/*
Theme Name: AK Kasperová
Theme URI: https://www.ak-kasperova.cz/
Author: Alexandr Koula
Author URI: https://www.alexkoula.cz/
Description: Jednostránková šablona pro advokátní kancelář JUDr. Simony Kasperové v Trutnově. Texty, fotka a kontakty se upravují v Customizeru (Vzhled → Přizpůsobit → AK Kasperová), seznam služeb a druhů odměny v template-parts/sections/data-*.php.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kasperova
*/

/* =========================================================
   Obsah
   1.  Fonty (vlastní soubory v assets/fonts, nic se nenačítá z Googlu)
   2.  Proměnné (barvy, fonty, šířky)
   3.  Základ
   4.  Rozložení (wrap, mřížka 12 sloupců, svislý popisek sekce)
   5.  Typografie
   6.  Hlavička a menu (+ mobilní menu)
   7.  Úvod (hero s portrétem)
   8.  O mně
   9.  Služby (tmavá sekce, akordeon)
   10. Odměna (+ volitelné druhy odměny)
   11. Kontakt + formulář z pluginu
   12. Patička
   13. Podstránky (page.php, index.php, 404)
   14. Drobnosti (přeskočení na obsah, omezený pohyb)
   Breakpointy: < 540 mobil · 540–720 · 720–960 tablet · 960–1280 desktop · 1280+ široký
   ========================================================= */

/* =========================================================
   1. Fonty
   ========================================================= */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url(assets/fonts/newsreader-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url(assets/fonts/newsreader-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url(assets/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url(assets/fonts/newsreader-italic-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url(assets/fonts/instrument-sans-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url(assets/fonts/instrument-sans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   2. Proměnné
   ========================================================= */
:root {
	/* Světlé sekce (papír) */
	--paper: #f4f1eb;
	--paper-2: #ebe6dd;
	--ink: #1c1917;
	--ink-2: #3d3732;
	--muted: #5c544d;
	--line: #d6cfc4;
	--accent: #a3301a;

	/* Tmavá sekce (Služby) */
	--dark: #1f1a17;
	--dark-line: #3d3530;
	--dark-text: #f1ece4;
	--dark-text-2: #cfc6bb;
	--dark-text-3: #e4ddd3;
	--dark-muted: #b5aca2;
	--dark-accent: #e0866b;

	--font-head: 'Newsreader', Georgia, 'Times New Roman', serif;
	--font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

	/* Velikosti textu — mění se jen tady */
	--fs-text: 1rem;        /* běžný text (16 px) */
	--fs-small: .875rem;    /* drobný text: menu, seznamy, patička (14 px) */
	--fs-eyebrow: .8125rem; /* nadtitulky velkými písmeny (13 px) */

	--container: 1540px;                 /* šířka webu (hlavička i sekce) */
	--container-hero: 2000px;            /* strop pro úvod a hlavičku */
	--hero-gutter: clamp(32px, 3vw, 64px); /* odstup úvodu a hlavičky od krajů displeje, když jsou širší než web */
	--gutter: clamp(20px, 3vw, 40px);
	/* Šířka úvodu a hlavičky: do šířky webu = celá obrazovka, nad ní roste s okraji až k --container-hero */
	--wide: min(100%, max(var(--container), min(100% - 2 * var(--hero-gutter), var(--container-hero))));
	--col-gap: 24px;
	--col2: calc(100% / 12 + 28px); /* začátek obsahu = 2. sloupec mřížky + 28 px (hlavička, úvod, patička) */
	--header-h: 64px;               /* skutečnou výšku hlavičky doplní main.js */
	--ks-bar: 0px;                  /* výška lišty administrace WordPressu (doplní main.js) */
	--sec-pt: clamp(96px, 11vw, 160px);
	--sec-pb: clamp(96px, 10vw, 150px);
}

/* =========================================================
   3. Základ
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + var(--ks-bar) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 var(--fs-text)/1.6 var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
body.ks-menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color .2s, border-color .2s; }
a:hover { color: var(--ink); }
::selection { background: var(--accent); color: var(--paper); }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 300; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.ks-main { display: block; }

/* =========================================================
   4. Rozložení
   ========================================================= */
.ks-wrap { max-width: var(--container); margin: 0 auto; }

/* Mřížka 12 sloupců: sloupec 1 = svislý popisek sekce, obsah od sloupce 2 */
.ks-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	padding-right: var(--gutter);
}
.ks-grid > * { min-width: 0; }

.ks-rail {
	grid-column: 1 / 2;
	grid-row: 1 / -1;
	border-right: 1px solid var(--line);
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.ks-rail__txt {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--muted);
	position: sticky;
	top: calc(var(--header-h) + var(--ks-bar) + 32px);
	height: max-content;
	white-space: nowrap;
}
.ks-body { padding-left: 28px; }

.ks-sec { position: relative; padding: var(--sec-pt) 0 var(--sec-pb); }
.ks-sec--line { border-top: 1px solid var(--line); }
.ks-sec--dark { background: var(--dark); color: var(--dark-text); }
.ks-sec--dark .ks-rail { border-color: var(--dark-line); }
.ks-sec--dark .ks-rail__txt { color: var(--dark-muted); }
.ks-sec--dark ::selection { background: var(--dark-accent); color: var(--dark); }

@media (max-width: 960px) {
	.ks-grid { display: block; padding: 0 20px; }
	.ks-rail { border: 0; display: block; margin-bottom: 28px; }
	.ks-rail__txt { writing-mode: horizontal-tb; transform: none; position: static; height: auto; }
	.ks-body { padding-left: 0; }
}

/* =========================================================
   5. Typografie
   ========================================================= */
.ks-eyebrow {
	font-size: var(--fs-eyebrow);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
}
.ks-h2 {
	font-size: clamp(40px, 4.4vw, 68px);
	line-height: 1;
	letter-spacing: -.02em;
}
.ks-h2--xl {
	font-size: clamp(48px, 6vw, 104px);
	line-height: .95;
	letter-spacing: -.025em;
}
.ks-h2 em, .ks-h2--xl em, .ks-h2 span, .ks-h2--xl span { font-style: italic; color: var(--accent); }
.ks-sec--dark .ks-h2 em, .ks-sec--dark .ks-h2 span { color: var(--dark-accent); }
.ks-lead {
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(20px, 1.7vw, 26px);
	line-height: 1.4;
	text-wrap: pretty;
}
.ks-lead strong { font-weight: 500; }
/* Mezery mezi odstavci v textech z Customizeru (prázdný řádek = nový odstavec) */
.ks-onas__text p + p, .ks-sluzby__text p + p, .ks-odmena__lead p + p, .ks-odmena__text p + p, .ks-odmena__more p + p, .ks-kontakt__lead p + p { margin-top: 1em; }

/* =========================================================
   6. Hlavička a menu
   ========================================================= */
.ks-header {
	position: fixed;
	top: var(--ks-bar);
	left: 0;
	right: 0;
	z-index: 50;
	border-bottom: 1px solid var(--line);
}
/* Průsvitné pozadí s rozostřením je na pseudo-elementu: backdrop-filter přímo na hlavičce by z ní udělal
   containing block pro mobilní menu (position: fixed) a menu by se nerozbalilo přes celou obrazovku. */
.ks-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(244, 241, 235, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.ks-header__bar {
	width: var(--wide);
	max-width: none;
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 2.4vw, 40px);
	padding: 20px var(--gutter) 18px var(--col2);
}
.ks-logo {
	font-family: var(--font-head);
	font-size: 22px;
	line-height: 1;
	color: var(--ink);
	letter-spacing: .02em;
	white-space: nowrap;
}
.ks-logo span { color: var(--accent); }
.ks-logo:hover { color: var(--ink); }
.ks-logo__img { height: 28px; width: auto; display: inline-block; vertical-align: baseline; }

.ks-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(12px, 1.8vw, 28px);
	font-size: var(--fs-small);
	white-space: nowrap;
}
.ks-nav__list a { color: var(--ink); }
.ks-nav__list a:hover,
.ks-nav__list .is-active > a,
.ks-nav__list .current-menu-item > a { color: var(--accent); }

.ks-header__email {
	margin-left: auto;
	font-size: var(--fs-small);
	color: var(--ink);
	white-space: nowrap;
}
.ks-header__email:hover { color: var(--accent); }

/* Hamburger (jen do 720 px) */
.ks-burger {
	display: none;
	margin-left: auto;
	align-self: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.ks-burger .ks-icon { width: 26px; height: 26px; }
.ks-burger .ks-burger__close { display: none; }
.ks-header.is-open .ks-burger .ks-burger__open { display: none; }
.ks-header.is-open .ks-burger .ks-burger__close { display: block; }

.ks-mobile {
	position: fixed;
	top: calc(var(--header-h) + var(--ks-bar));
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 49;
	display: none;
	overflow: auto;
	background: var(--paper);
	padding: 24px 20px 40px;
}
.ks-mobile.is-visible { display: block; }
.ks-mobile .ks-nav__list {
	flex-direction: column;
	gap: 0;
	white-space: normal;
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 300;
	line-height: 1.1;
	border-top: 1px solid var(--ink);
}
.ks-mobile .ks-nav__list li { border-bottom: 1px solid var(--line); }
.ks-mobile .ks-nav__list a { display: block; padding: 16px 0; }
.ks-mobile__contact {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
}
.ks-mobile__contact a { color: var(--ink); }
.ks-mobile__contact .is-accent { color: var(--accent); }

@media (max-width: 720px) {
	.ks-header__bar { padding: 14px 16px; gap: 18px; align-items: center; }
	.ks-nav, .ks-header__email { display: none; }
	.ks-burger { display: flex; }
}

/* =========================================================
   7. Úvod (hero)
   ========================================================= */
.ks-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	min-height: 700px;
	overflow: hidden;
	background: var(--paper);
}
.ks-hero__in {
	position: relative;
	flex: 1 1 auto;
	width: var(--wide);
	max-width: none;
	display: flex;
	flex-direction: column;
}
/* Fotka začíná uvnitř úvodu (zbylých 41 % šířky) a vpravo jde vždy až k okraji okna:
   na displejích širších než úvod přidá --bleed mezeru mezi úvodem a krajem obrazovky. */
.ks-hero__photo {
	--bleed: max(0px, (100vw - 100%) / 2);
	position: absolute;
	left: 59%;
	top: 0;
	height: 100%;
	width: calc(41% + var(--bleed));
	object-fit: cover;
	object-position: var(--gal-pos, 50% 8%);
	mix-blend-mode: multiply;
	z-index: 1;
}
.ks-hero--bw .ks-hero__photo { filter: grayscale(1) contrast(1.04); }
.ks-hero__rail {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(100% / 12 - 22px);
	border-right: 1px solid var(--line);
}
.ks-hero__rot {
	position: absolute;
	left: clamp(6px, 1.2vw, 22px);
	bottom: 36px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-head);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(56px, min(14vh, 7.6vw), 168px);
	line-height: .82;
	color: var(--accent);
	letter-spacing: -.01em;
	white-space: nowrap;
}
.ks-hero__content {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: calc(var(--header-h) + var(--ks-bar) + 16px) 0 0 var(--col2);
}
.ks-hero__eyebrow { margin-bottom: 18px; }
.ks-hero__h1 {
	font-size: clamp(56px, 8.4vw, 160px);
	line-height: .9;
	letter-spacing: -.025em;
	color: var(--ink);
}
.ks-hero__pre {
	display: block;
	font-style: italic;
	font-size: .42em;
	color: var(--accent);
	margin-bottom: .15em;
}
.ks-hero__a { display: block; }
.ks-hero__b { display: block; padding-left: 1.1em; }

.ks-hero__bottom {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 40px;
	padding: 48px var(--gutter) 40px var(--col2);
	max-width: 59%;
	flex-wrap: wrap;
	align-items: flex-start;
}
.ks-hero__lead {
	flex: 1 1 260px;
	max-width: 360px;
	font-family: var(--font-head);
	font-size: 20px;
	line-height: 1.4;
	color: var(--ink);
	text-wrap: pretty;
}
.ks-areas {
	list-style: none;
	flex: 0 1 220px;
	font-size: var(--fs-small);
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--ink);
}
.ks-areas li { border-bottom: 1px solid var(--line); }
.ks-areas a { display: flex; gap: 12px; padding: 7px 0; color: var(--ink); }
.ks-areas a:hover { color: var(--accent); }
.ks-areas__n { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Zástupný portrét, když fotka chybí */
.ks-hero__placeholder {
	--bleed: max(0px, (100vw - 100%) / 2);
	position: absolute;
	left: 59%;
	top: 0;
	height: 100%;
	width: calc(41% + var(--bleed));
	background: var(--paper-2);
	z-index: 1;
}
.ks-hero__placeholder svg { width: 100%; height: 100%; }

@media (max-width: 1280px) {
	.ks-hero__photo, .ks-hero__placeholder { left: 62%; width: calc(38% + var(--bleed)); }
	.ks-hero__h1 { font-size: 7.2vw; white-space: nowrap; }
	.ks-hero__content { max-width: 62%; }
	.ks-hero__bottom { max-width: 62%; padding-right: 24px; }
}
@media (max-width: 720px) {
	.ks-hero { height: auto; min-height: 100svh; }
	.ks-hero__rail, .ks-hero__rot { display: none; }
	.ks-hero__photo, .ks-hero__placeholder { left: 60%; width: calc(40% + var(--bleed)); object-position: 50% 6%; }
	.ks-hero__content { padding: calc(var(--header-h) + var(--ks-bar) + 32px) 20px 0 20px; max-width: 60%; }
	.ks-hero__eyebrow { font-size: 11px; line-height: 1.5; }
	.ks-hero__h1 { font-size: 9.6vw; }
	.ks-hero__b { padding-left: .3em; }
	.ks-hero__bottom {
		max-width: 60%;
		padding: 28px 16px 32px 20px;
		flex-direction: column;
		gap: 24px;
	}
	.ks-hero__lead { font-size: 16px; flex: none; }
	.ks-areas { flex: none; width: 100%; }
}

/* =========================================================
   8. O mně
   ========================================================= */
.ks-onas__body { grid-column: 2 / 9; }
.ks-onas__text {
	margin-bottom: 48px;
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1.4;
	text-wrap: pretty;
}
.ks-facts {
	margin: 0;
	font-size: var(--fs-small);
	border-top: 1px solid var(--ink);
	max-width: 480px;
}
.ks-facts__row {
	display: flex;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.ks-facts dt { flex: 0 0 96px; color: var(--accent); }
.ks-facts dd { margin: 0; }

/* =========================================================
   9. Služby
   ========================================================= */
.ks-sluzby__intro { grid-column: 2 / 6; padding-left: 28px; }
.ks-sluzby__sticky { position: sticky; top: calc(var(--header-h) + var(--ks-bar) + 40px); }
.ks-sluzby__intro .ks-eyebrow { color: var(--dark-accent); margin-bottom: 20px; }
.ks-sluzby__intro .ks-h2 { margin-bottom: 28px; }
.ks-sluzby__text { color: var(--dark-text-2); max-width: 380px; text-wrap: pretty; }

.ks-sluzby__list { grid-column: 7 / 13; border-top: 1px solid var(--dark-text); }

.ks-acc { border-bottom: 1px solid var(--dark-line); }
.ks-acc__btn {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	width: 100%;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 40px;
	align-items: baseline;
	gap: 16px;
	padding: 26px 40px 26px 0;
	transition: color .2s;
}
.ks-acc__btn:hover { color: var(--dark-accent); }
.ks-acc__btn:focus-visible { outline: 2px solid var(--dark-accent); outline-offset: 4px; }
.ks-acc__n { font-size: 13px; color: var(--dark-accent); font-variant-numeric: tabular-nums; }
.ks-acc__title {
	display: block;
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.1;
}
.ks-acc__lead { display: block; font-size: var(--fs-small); color: var(--dark-muted); margin-top: 6px; }
.ks-acc__sign {
	font-family: var(--font-head);
	font-size: 28px;
	line-height: 1;
	text-align: right;
	color: var(--dark-accent);
}
.ks-acc__sign::before { content: '+'; }
.ks-acc__btn[aria-expanded="true"] .ks-acc__sign::before { content: '−'; }

.ks-acc__panel { padding: 0 40px 32px 64px; }
.ks-acc__panel[hidden] { display: none; }
.ks-acc__items {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ks-acc__items li {
	display: flex;
	gap: 16px;
	color: var(--dark-text-3);
	font-size: 15px;
	line-height: 1.6;
	text-wrap: pretty;
}
.ks-acc__items li::before { content: '—'; flex: 0 0 18px; color: var(--dark-accent); }

@media (max-width: 960px) {
	.ks-sluzby__intro { padding-left: 0; margin-bottom: 48px; }
	.ks-sluzby__sticky { position: static; }
	.ks-acc__btn { padding: 22px 0; grid-template-columns: 36px minmax(0, 1fr) 28px; }
	.ks-acc__panel { padding: 0 0 28px 0; }
}

/* =========================================================
   10. Odměna
   ========================================================= */
.ks-odmena__body { grid-column: 7 / 13; }
.ks-odmena .ks-h2 { margin-bottom: 32px; }
.ks-odmena__lead { margin-bottom: 24px; max-width: 600px; }
.ks-odmena__text {
	padding-top: 24px;
	border-top: 1px solid var(--ink);
	font-size: 15px;
	color: var(--ink-2);
	max-width: 600px;
	text-wrap: pretty;
}
.ks-odmena__more { margin-top: 20px; font-size: 15px; color: var(--ink-2); max-width: 600px; text-wrap: pretty; }

/* Druhy odměny (zapínají se v Customizeru → Odměna) */
.ks-fees {
	grid-column: 2 / 13;
	grid-row: 2;
	margin-top: 80px;
	padding-left: 28px;
	border-top: 1px solid var(--ink);
}
.ks-fee { border-bottom: 1px solid var(--line); }
.ks-fee__btn {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr) 32px;
	gap: 24px;
	align-items: baseline;
	padding: 22px 0;
	transition: color .2s;
}
.ks-fee__btn:hover { color: var(--accent); }
.ks-fee__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ks-fee__name { font-family: var(--font-head); font-size: 28px; line-height: 1.1; }
.ks-fee__summary { font-size: 15px; color: var(--muted); }
.ks-fee__figure { font-size: 15px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.ks-fee__sign { font-family: var(--font-head); font-size: 24px; line-height: 1; text-align: right; color: var(--accent); }
.ks-fee__sign::before { content: '+'; }
.ks-fee__btn[aria-expanded="true"] .ks-fee__sign::before { content: '−'; }

.ks-fee__panel {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) 32px;
	gap: 24px;
	padding: 0 0 28px;
}
.ks-fee__panel[hidden] { display: none; }
.ks-fee__detail { grid-column: 2; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.ks-fee__detail p { max-width: 640px; }
.ks-fee__link { display: inline-block; margin-top: 12px; border-bottom: 1px solid var(--accent); }
.ks-tariff { max-width: 680px; border-top: 1px solid var(--ink); }
.ks-fee__detail p + .ks-tariff { margin-top: 16px; }
.ks-tariff__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 24px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-variant-numeric: tabular-nums;
}
.ks-tariff__row span:first-child { color: var(--muted); }

@media (max-width: 960px) {
	.ks-fees { margin-top: 64px; padding-left: 0; }
	.ks-fee__btn { grid-template-columns: minmax(0, 1fr) 28px; gap: 4px 16px; }
	.ks-fee__summary, .ks-fee__figure { grid-column: 1 / -1; }
	.ks-fee__sign { grid-column: 2; grid-row: 1; }
	.ks-fee__panel { grid-template-columns: minmax(0, 1fr); }
	.ks-fee__detail { grid-column: 1; }
}

/* =========================================================
   11. Kontakt + formulář
   ========================================================= */
.ks-kontakt { background: var(--paper-2); padding-bottom: clamp(64px, 8vw, 120px); overflow: hidden; }
.ks-kontakt__body { grid-column: 2 / 8; padding-left: 28px; }
.ks-kontakt .ks-h2--xl { margin-bottom: 24px; }
.ks-kontakt__lead {
	margin-bottom: 56px;
	font-family: var(--font-head);
	font-size: 21px;
	line-height: 1.45;
	color: var(--ink-2);
	max-width: 460px;
	text-wrap: pretty;
}
.ks-kontakt__email {
	display: inline-block;
	font-family: var(--font-head);
	font-size: clamp(28px, 3.6vw, 56px);
	line-height: 1.1;
	color: var(--accent);
	letter-spacing: -.01em;
	border-bottom: 1px solid var(--accent);
	word-break: break-word;
}
.ks-kontakt__email:hover { color: var(--ink); border-color: var(--ink); }
.ks-kontakt__tel { display: block; margin-top: 20px; font-size: 16px; color: var(--ink); }
.ks-kontakt__tel:hover { color: var(--accent); }
.ks-kontakt__addr { margin-top: 40px; font-size: 15px; color: var(--ink-2); }
.ks-kontakt__map { font-size: 14px; }

.ks-kontakt__form { grid-column: 8 / 13; padding-top: 8px; }
.ks-kontakt__form-title {
	margin-bottom: 24px;
	font-family: var(--font-head);
	font-size: 28px;
	line-height: 1.1;
}
@media (max-width: 960px) {
	.ks-kontakt__body { padding-left: 0; }
	.ks-kontakt__form { margin-top: 64px; max-width: 560px; }
}

/* Formulář z pluginu (WPForms, Contact Form 7) převezme vzhled webu */
.ks-form input[type="text"],
.ks-form input[type="email"],
.ks-form input[type="tel"],
.ks-form input[type="number"],
.ks-form input[type="url"],
.ks-form textarea,
.ks-form select {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 12px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
	box-shadow: none;
}
.ks-form textarea { min-height: 120px; resize: vertical; }
.ks-form input:focus, .ks-form textarea:focus, .ks-form select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: none;
}
.ks-form ::placeholder { color: var(--muted); opacity: 1; }
.ks-form label,
.ks-form .wpforms-field-label,
.ks-form .wpcf7-form label {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}
.ks-form .wpforms-field-label-inline,
.ks-form .wpforms-field-checkbox label,
.ks-form .wpcf7-list-item label {
	display: inline;
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
	color: var(--ink-2);
}
.ks-form .wpforms-field { margin-bottom: 22px; padding: 0; }
.ks-form .wpforms-form .wpforms-field-label { margin-bottom: 2px; }
.ks-form .wpforms-required-label { color: var(--accent); }
.ks-form .wpforms-field-description, .ks-form .wpcf7-form p { font-size: 13px; color: var(--muted); }
.ks-form .wpcf7-form p { margin-bottom: 22px; }
.ks-form button[type="submit"],
.ks-form input[type="submit"],
.ks-form .wpforms-form button[type="submit"],
.ks-form .wpcf7-submit {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 28px;
	background: var(--accent);
	color: var(--paper);
	border: 0;
	border-radius: 0;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s;
}
.ks-form button[type="submit"]:hover,
.ks-form input[type="submit"]:hover,
.ks-form .wpforms-form button[type="submit"]:hover,
.ks-form .wpcf7-submit:hover { background: var(--ink); }
.ks-form .wpforms-submit-container { padding: 0; }
.ks-form .wpforms-error, .ks-form .wpcf7-not-valid-tip { color: var(--accent); font-size: 13px; margin-top: 4px; }
.ks-form .wpforms-confirmation-container-full, .ks-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 16px 0;
	border: 0;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
}

/* =========================================================
   12. Patička
   ========================================================= */
.ks-footer { background: var(--paper-2); }
.ks-footer__in {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	padding: 28px var(--gutter) 28px var(--col2);
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--muted);
}
.ks-footer a { color: var(--muted); }
.ks-footer a:hover { color: var(--accent); }
.ks-footer__links {
	list-style: none;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}
@media (max-width: 960px) {
	.ks-footer__in { padding: 28px 20px; }
	.ks-footer__links { margin-left: 0; flex-basis: 100%; }
}

/* =========================================================
   13. Podstránky
   ========================================================= */
.ks-page { padding: calc(var(--header-h) + var(--ks-bar) + clamp(64px, 8vw, 120px)) 0 var(--sec-pb); }
.ks-page__body { grid-column: 2 / 10; }
.ks-page__title { margin-bottom: 40px; }
.ks-content { font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 720px; }
.ks-content > * + * { margin-top: 1.2em; }
.ks-content h2, .ks-content h3 { margin-top: 2em; color: var(--ink); line-height: 1.15; }
.ks-content h2 { font-size: clamp(30px, 3vw, 42px); }
.ks-content h3 { font-size: clamp(24px, 2.2vw, 30px); }
.ks-content ul, .ks-content ol { padding-left: 1.3em; }
.ks-content li + li { margin-top: .4em; }
.ks-content a { border-bottom: 1px solid var(--accent); }
.ks-content a:hover { border-color: var(--ink); }
.ks-content blockquote {
	margin: 1.5em 0;
	padding-left: 24px;
	border-left: 1px solid var(--accent);
	font-family: var(--font-head);
	font-size: 1.25em;
	line-height: 1.4;
}
.ks-content img { margin: 1.5em 0; }
.ks-content .wp-block-image figcaption { font-size: 13px; color: var(--muted); }
.ks-posts { display: grid; gap: 48px; }
.ks-post__title a { color: var(--ink); }
.ks-post__title a:hover { color: var(--accent); }
.ks-post__date { display: block; margin-bottom: 8px; }
.ks-btn-link {
	display: inline-block;
	margin-top: 24px;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--accent);
	font-size: 15px;
}
.ks-btn-link:hover { border-color: var(--ink); }

/* =========================================================
   14. Drobnosti
   ========================================================= */
.ks-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--ink);
	color: var(--paper);
	font-size: 14px;
}
.ks-skip:focus { top: calc(var(--ks-bar) + 12px); color: var(--paper); }
.ks-icon { display: inline-block; vertical-align: middle; }
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}