/* ================================================================
   JKZM Cinematic Design System (v6.72.0)

   Shared štýly pre všetky verejné stránky.
   Palette: dark navy (#050811) + gold (#d4b170) + emerald (#10b981 akcent)
   Typografia: Inter 300-900 + Fraunces italic (iba akcenty)
   Inšpirácia: Apple.com, Linear.app, Stripe, LGCT

   Každá stránka importuje:
     <link rel="stylesheet" href="/css/cinematic.css">
   ================================================================ */

:root {
    --bg: #050811;
    --bg-2: #0a0f1c;
    --bg-3: #111827;
    --surface: rgba(255, 255, 255, 0.03);
    --surface-hi: rgba(255, 255, 255, 0.06);
    /* Podklad dialógového okna — NEPRIEHĽADNÝ. `--surface` je 3% odtieň karty
       a modál na ňom presvitá aj s prekrytím pod sebou (USER-50). */
    --panel: #111827;
    --border: rgba(255, 255, 255, 0.08);
    --border-hi: rgba(255, 255, 255, 0.14);
    --ink: #f5f6f9;
    --ink-2: rgba(245, 246, 249, 0.72);
    /* 0,55 (nie 0,5): na najsvetlejšom povrchu tmavej témy (citácie v bloku,
       pozadie #34302a) malo 0,5 kontrast 4,28:1, teda tesne pod AA. 0,55 dá 5,01. */
    --ink-3: rgba(245, 246, 249, 0.55);
    --gold: #d4b170;
    --gold-hover: #e2c389;
    --gold-soft: rgba(212, 177, 112, 0.2);
    --emerald: #10b981;
    --emerald-soft: rgba(16, 185, 129, 0.15);
    /* Text NA zlatej výplni. V tmavej téme je zlatá svetlá (#d4b170), takže
       text musí byť tmavý; vo svetlej je zlatá tmavá (#826418) a text biely.
       Bez tejto premennej sa natvrdo zapísaná farba vždy pokazí v druhej téme. */
    --on-gold: #0f1419;
    /* Farba zvýraznení v červených rámčekoch — v každej téme iná. */
    --danger-ink: #fca5a5;
    /* Text upozornenia („prijaté, ale niekto má vyšší max“). Amber-700
       natvrdo mal v tmavej téme 3,99 : 1 — pod prahom; táto dvojica má
       11,99 (tmavá) a 6,67 (svetlá) nad --bg. U-46, v7.9.268. */
    --warn-ink: #fbbf24;
    /* Informačný stav („Čaká platbu“). Pastel #93c5fd natvrdo mal vo svetlej
       téme 1,70 : 1; táto dvojica má 11,10 (tmavá) a 6,31 (svetlá). */
    --info-ink: #93c5fd;

    --container: 1200px;
    --radius: 16px;
    --radius-sm: 8px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Záložné písma — držia rozloženie, kým sa načíta skutočné písmo.
   `ascent-override` a `descent-override` sú DOPOČÍTANÉ z metrík v .woff2:
   platí ascent-override × size-adjust = ascent ÷ unitsPerEm. Stráži to
   `npm run check:pisma-fallback`.
   `size-adjust` je pomer šírky znakov k záložnému písmu (Arial, Georgia)
   a zmerať sa tu nedá — tie písma v tomto prostredí nie sú (S-08). */
/* ── PÍSMA ───────────────────────────────────────────────────────────────────
   Inter a Fraunces sú hostované LOKÁLNE, nie z Google CDN. Dôvod je právny:
   načítanie písma z `fonts.googleapis.com` odošle IP adresu návštevníka
   spoločnosti Google hneď pri prvom vykreslení — teda skôr, než sa lišta
   súhlasu vôbec objaví. Merané 5. 9. 2026: 118 zo 119 verejných stránok,
   vrátane samotných `/privacy` a `/cookies`. Stránka `/privacy` pritom
   tvrdila: „Bez súhlasu sa žiadne dáta o vás na Google neprenášajú.“

   Obidve písma sú pod licenciou SIL Open Font License 1.1, ktorá lokálne
   hostovanie výslovne dovoľuje.

   Súbory sú VARIABILNÉ — jeden pokrýva celý rozsah váh. Prvé stiahnutie ich
   vzalo po jednotlivých váhach a vyšlo 18 súborov (1 146 kB), z toho len
   4 unikátne; po odstránení duplicít 254 kB. Pri obnove over `md5sum`.

   Podmnožiny latin + latin-ext; latin-ext je pre slovenskú diakritiku
   nevyhnutná (ď, ľ, ť, ô, ŕ, ĺ).

   Fallbacky nižšie (Inter-fallback, Fraunces-fallback) ostávajú — držia
   rozloženie, kým sa písmo načíta.
   ───────────────────────────────────────────────────────────────────────── */
/* Písma hostované lokálne — pozri hlavičku súboru. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fraunces-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fraunces-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: 'Inter-fallback';
    src: local('Arial');
    size-adjust: 94.74%;
    ascent-override: 102.25%;
    descent-override: 25.46%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Fraunces-fallback';
    src: local('Georgia');
    size-adjust: 97.5%;
    ascent-override: 100.31%;
    descent-override: 26.15%;
    line-gap-override: 0%;
}

/* Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-font-smoothing: antialiased; }
body {
    font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    overflow-x: hidden;
    min-height: 100vh;
}
::selection { background: var(--gold); color: var(--bg); }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }

/* WCAG 1.4.1 (Use of Color): odkaz vnútri súvislého textu sa NESMIE od okolia
   líšiť iba farbou — kto farby nerozlišuje, taký odkaz nenájde. Podčiarknutie
   je jediné rozlíšenie, ktoré funguje aj pri farbosleposti, aj v čiernobielom
   režime. Týka sa iba odkazov v odsekoch a v textových rámčekoch; navigácia,
   pätička a karty sú samostatné bloky, tam pravidlo neplatí a axe ich nehlási.
   Audit 11. 8. 2026: 184 takých odkazov na 84 stránkach. */
p a,
.cennik-note a,
.note-box a,
.prose-note a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: from-font;
}
/* Výnimky. `.content-inner .card a` je odkaz v sprievodcovi — tie majú vlastné
   rozlíšenie (spodný okraj), dvojitá čiara by vyzerala ako chyba. Výnimka MUSÍ
   byť viazaná na `.content-inner`: samotné `.card` je na webe aj mimo
   sprievodcov (napr. formulárová karta v rezervácii) a tam by podčiarknutie
   potichu zrušila. */
.content-inner .card a,
.btn,
p a.btn,
p a.stretched-link,
/* `.footer-social` je odsek s jediným odkazom, teda samostatný prvok, nie
   odkaz v texte — podčiarknutie tam WCAG nežiada a rozbíja vzhľad pätičky. */
p.footer-social a { text-decoration: none; }
/* Zlatá je odladená na neutrálne povrchy; na tónovanom podklade pätičky padne
   vo svetlej téme pod AA — namerané 4,11:1 na odkaze na Facebook (audit
   kontrastu nad fotkou, 30. 8. 2026). */
/* Aj potomkovia: ikona „f" je vlastný <span> s vlastnou farbou, takže ju
   dedenie po odkaze nezmení — po prvej oprave ostala na 4,11:1 sama. */
:root[data-theme="light"] p.footer-social a,
:root[data-theme="light"] p.footer-social a span { color: #6f5415; }
/* Dlhé neroztrhnuteľné reťazce (URL, e-maily, kódy, dlhé zložené slová) inak
   nastavia min-content šírku bloku. Položky mriežky a flexu majú
   `min-width: auto`, takže sa pod ňu nezmestia a roztiahnu celý dokument —
   na mobile sa potom stránka dá rolovať vodorovne. Meranie 11. 8. 2026:
   /slovnik +3 px, /obchodne-podmienky +14 px. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, td, th, figcaption, blockquote, address { overflow-wrap: break-word; }

img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
.skip-link { position: absolute; left: -9999px; background: var(--gold); color: var(--bg); padding: 8px 16px; z-index: 1000; }
.skip-link:focus { left: 8px; top: 8px; }
/* Ciele skip-linku majú tabindex="-1", aby na ne skok naozaj presunul
   klávesový fokus (bez toho prehliadač len odroluje a Tab pokračuje späť
   v navigácii). Nie sú to interaktívne prvky, takže okolo celej sekcie
   nekreslíme focus rámik — orientáciu dáva odrolovanie na začiatok obsahu. */
[tabindex="-1"]:focus { outline: none; }

/* Omrvinková navigácia (`page-nav.js`). Štýl je TU, nie v skripte: navigácia
   je od v7.9.15 priamo v HTML 78 stránok a musí byť ostýlovaná už pri prvom
   vykreslení. Skript ju stále vie doplniť tam, kde v HTML nie je — markup aj
   triedy sú rovnaké, takže obidve cesty vyzerajú identicky. */
.pn-breadcrumb {
    font-size: 0.8rem;
    margin: 0 0 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}
.pn-breadcrumb a { color: var(--ink-2); border: 0; }
.pn-breadcrumb a:hover { color: var(--gold); }
.pn-breadcrumb .pn-sep { color: var(--ink-3); opacity: 0.5; }
.pn-breadcrumb .pn-current { color: var(--ink-3); }

/* WCAG 2.4.7 Focus Visible — vizuálny indikátor pre keyboard navigáciu na public stránkach */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold, #d4b170);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Typography scale ---- */
.display-xl {
    font-size: clamp(2.75rem, 8vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.98;
}
.display-lg {
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.display-md {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold);
}
.serif { font-family: 'Fraunces', 'Fraunces-fallback', Georgia, serif; font-weight: 400; font-style: italic; }

/* Noise overlay (premium texture) ---- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, section, header, footer { position: relative; z-index: 2; }

/* Header ---- */
header.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 1.25rem 0;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(5, 8, 17, 0.75);
    border-bottom: 1px solid var(--border);
}
/* Brand úplne vľavo, menu úplne vpravo — header-inner je flex na plnej
   šírke viewportu (žiadny container constraint). Padding na bokoch
   nahradzuje stratený container padding. */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: opacity 0.3s var(--ease);
}
.brand:hover { opacity: 0.85; }
.brand-logo {
    height: 52px;
    width: auto;
    background: #fff;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
/* Brand text — vždy jeden riadok pre "JK Zelená míľa" a druhý pre "Jaslovské Bohunice".
   white-space: nowrap zabráni lámaniu textu na užších viewport-och. */
.brand-text { font-size: 0.95rem; color: var(--ink); line-height: 1.15; white-space: nowrap; }
.brand-text small {
    display: block;
    font-size: 0.7rem;
    color: var(--ink-3);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 1px;
    white-space: nowrap;
}
nav.main-nav { display: flex; gap: 1.25rem; align-items: center; }
nav.main-nav a {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-2);
    position: relative;
    /* 44 px na výšku aj na počítači (USER-198): pri 36 px boli položky menu
       medzi malými cieľmi tesne vedľa seba. Výšku drží cieľ, nie odsadenie. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    white-space: nowrap;
}
nav.main-nav a:hover { color: var(--ink); }
nav.main-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}
nav.main-nav a:hover::after, nav.main-nav a.active::after { transform: scaleX(1); }

/* --- Vstup do vlastného účtu ---------------------------------------------
   Odlíšený zámerne: ostatné položky navigácie sú OBSAH klubu, toto je
   ÚKON s účtom. Keby vyzeral rovnako, šiesta položka by iba zriedila
   navigáciu; rámik z neho robí cieľ, ktorý sa hľadá očami.

   Meranie 7. 9. 2026 (Chromium, šírka 1281 px, teda tesne nad breakpointom
   1280 px, kde je menu ešte viditeľné): päť položiek malo 687 px a medzeru
   po značku 330 px, so šiestou „Prihlásenie" 811 px a medzeru 206 px.
   Nič sa nezalamuje a breakpoint sa hýbať nemusel. Dlhšie znenie
   „Prihlásenie do účtu" by nechalo 127 px — preto sa nepoužilo.

   Popis mení `js/auth-nav.js` po prihlásení na meno používateľa alebo
   „Admin"; obidve sú kratšie, takže prihlásený stav je vždy užší.

   Podčiarknutie zospodu (`::after` vyššie) sa tu ruší — rámik už rozlíšenie
   nesie a dve zvýraznenia naraz pôsobia ako chyba. Ohnisko sa NERUŠÍ:
   `outline: none` do `:focus-visible` nepatrí nikdy (viď CLAUDE.md). */
nav.main-nav a.nav-ucet {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    color: var(--ink);
}
nav.main-nav a.nav-ucet::after { display: none; }
nav.main-nav a.nav-ucet:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* --- Dropdown "Viac" v hlavnej navigácii --- */
.nav-more { position: relative; }
.nav-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-2);
    padding: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s var(--ease);
}
.nav-more-btn:hover, .nav-more[data-open="true"] .nav-more-btn { color: var(--ink); }
.nav-more-caret {
    display: inline-block;
    font-size: 0.7em;
    transition: transform 0.25s var(--ease);
    opacity: 0.85;
}
.nav-more[data-open="true"] .nav-more-caret { transform: rotate(180deg); }
.nav-more-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 200px;
    background: rgba(10, 15, 28, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212, 177, 112, 0.18);
    border-radius: 12px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 100;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.nav-more[data-open="true"] .nav-more-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-more-menu a {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    padding: 0.7rem 1rem;
    border-radius: 8px;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
    white-space: nowrap;
}
.nav-more-menu a::after { display: none !important; }
.nav-more-menu a:hover {
    background: rgba(212, 177, 112, 0.1);
    color: var(--gold);
}

.mobile-menu {
    display: none;
    background: none;
    border: none;
    color: var(--ink);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Hero ---- */
.hero {
    position: relative;
    min-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 9rem 0 5rem;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 80% at 25% 30%, rgba(16, 185, 129, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 50% 70% at 80% 50%, rgba(212, 177, 112, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 50% 90%, rgba(16, 185, 129, 0.12) 0%, transparent 50%);
    filter: blur(60px);
    animation: meshDrift 18s ease-in-out infinite;
}
@keyframes meshDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5%, 3%) scale(1.05); }
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
/* Názov klubu a lokalita sú súčasťou <h1>, aby hlavný nadpis obsahoval kľúčové
   slová zhodné s <title> (predtým bol H1 iba slogan bez jediného kľúčového slova).
   Vizuálne ostáva samostatným riadkom nad sloganom, vrátane zlatej čiarky vľavo.
   Vlastná trieda zámerne — .eyebrow je inline-flex a vnútri obrieho h1 rozbíja
   riadkovanie. */
.hero h1 .hero-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height: 1.4;
    color: var(--gold);
    margin-bottom: 2rem;
}
.hero h1 .hero-kicker::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    margin-right: 0.75rem;
    vertical-align: middle;
    background: var(--gold);
}
.hero .eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--gold);
}
.hero h1 {
    margin-bottom: 2rem;
    max-width: 950px;
    color: var(--ink);
}
.hero h1 .accent {
    font-family: 'Fraunces', 'Fraunces-fallback', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
    letter-spacing: -0.03em;
}
.hero-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--ink-2);
    max-width: 620px;
    margin-bottom: 3rem;
    line-height: 1.6;
}
.hero-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
.hero-compact {
    min-height: auto;
    padding: 9rem 0 4rem;
}

/* Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    font-family: inherit;
}
.btn-primary {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
}
.btn-primary:hover {
    background: var(--gold-hover);
    border-color: var(--gold-hover);
    color: var(--bg);
    transform: translateY(-1px);
    box-shadow: 0 10px 40px rgba(212, 177, 112, 0.3);
}
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--border-hi);
}
.btn-ghost:hover {
    background: var(--surface);
    border-color: var(--ink-2);
    color: var(--ink);
}
.btn .arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* 2% z dane banner ---- */
.cta-2percent {
    background: var(--bg-3);
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}
.cta-2-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cta-2-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
}
.cta-2-badge {
    display: inline-block;
    background: var(--gold-soft);
    color: var(--gold);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
}
.cta-2-text strong { color: var(--ink); font-weight: 600; }
.cta-2-ico { color: var(--ink-3); font-size: 0.82rem; }

/* Metrics strip ---- */
.metrics {
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    text-align: center;
}
.metric .num {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--gold);
    display: block;
    margin-bottom: 0.25rem;
}
.metric .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-3);
    font-weight: 500;
}

/* Section ---- */
section.content {
    padding: 6rem 0;
    position: relative;
}
section.content-compact { padding: 4rem 0; }
section.light { background: #f7f5f0; color: #0a0f1c; }
section.light a { color: inherit; }
section.light .eyebrow { color: #7a6332; }
section.light h1, section.light h2, section.light h3, section.light h4 { color: #0a0f1c; }
section.light p { color: rgba(10, 15, 28, 0.72); }

.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.section-head .eyebrow { margin-bottom: 1.25rem; display: block; }
.section-head h2, .section-head h1 { margin-bottom: 1rem; color: var(--ink); }
.section-head p {
    color: var(--ink-2);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* Grid cards (services, features, etc.) ---- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-item {
    background: var(--bg);
    padding: 2.25rem 1.75rem;
    transition: background 0.3s var(--ease);
}
.card-item:hover { background: var(--bg-3); }
.card-num {
    font-size: 0.72rem;
    color: var(--gold);
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    display: block;
    font-weight: 500;
    text-transform: uppercase;
}
.card-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.card-item p {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.card-item .service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 600;
}

/* Výzva na akciu („Viac o drezúre →“, „Stať sa členom →“) mala 19–20 px na
   výšku (U-28). Nie je to odkaz v riadku súvislého textu, takže výnimka
   „inline“ z WCAG 2.5.8 sa na ňu nevzťahuje.

   Pravidlo je viazané na **triedu, nie na rodiča**: audit ukazoval na
   `.card-item .service-link`, lenže na úvodnej aj na cenníku je rodičom
   `.service`, takže to pravidlo tie odkazy nikdy neštýlovalo a `min-height`
   v ňom nemalo účinok. Zmerané po oprave: 19 → 44 px.

   `inline-flex` so zvislým centrovaním znamená, že sa mení plocha, nie
   vzhľad. */
.service-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* `inline-flex` zahodí medzeru medzi textom a šípkou (kontajner flexu
       zbalí textový uzol so samou medzerou) — bez tohto by sa vypísalo
       „Stať sa členom→“. Rovnaká hodnota ako v `.card-item .service-link`. */
    gap: 0.5rem;
}

/* Info card / data card (IČO, IBAN...) ---- */
.info-card {
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.3s var(--ease);
}
.info-card:hover { border-color: var(--border-hi); }
.info-card-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
}
.info-card-value {
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.45;
}
.info-card-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
a.info-card-value { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
a.info-card-value:hover { border-bottom-color: var(--gold); }

/* Contact + Map layout ---- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: stretch;
}
.contact-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-content: start;
}
.contact-map {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 420px;
    position: relative;
    background: var(--bg-3);
}
.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    display: block;
    filter: grayscale(15%) contrast(1.05);
}

/* Quote / philosophy ---- */
.big-quote {
    font-family: 'Fraunces', 'Fraunces-fallback', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
    max-width: 900px;
    margin: 0 auto 2rem;
}
.big-quote::before { content: '"'; color: var(--gold); font-size: 1.3em; line-height: 0; vertical-align: -0.15em; margin-right: 0.15em; }
.big-quote::after { content: '"'; color: var(--gold); font-size: 1.3em; line-height: 0; vertical-align: -0.3em; margin-left: 0.1em; }
.quote-attribution {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-3);
    text-align: center;
}
.quote-attribution strong { color: var(--ink); font-weight: 500; }

/* CTA section ---- */
.cta-section {
    padding: 7rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(212, 177, 112, 0.15), transparent 60%);
    filter: blur(40px);
}
.cta-section h2 {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    color: var(--ink);
}
.cta-section p {
    color: var(--ink-2);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}
.cta-section .hero-cta-group { justify-content: center; }

/* Prose (articles) ---- */
.prose {
    max-width: 720px;
    margin: 0 auto;
    color: var(--ink-2);
    font-size: 1.05rem;
    line-height: 1.75;
}
.prose h1, .prose h2, .prose h3 {
    color: var(--ink);
    font-family: 'Inter', 'Inter-fallback', sans-serif;
    letter-spacing: -0.015em;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.25;
}
.prose h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; }
.prose h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 600; }
.prose h3 { font-size: 1.2rem; font-weight: 600; }
.prose p { margin-bottom: 1.25rem; }
.prose a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.prose a:hover { border-bottom-color: var(--gold); }
.prose ul, .prose ol { margin: 1rem 0 1.25rem 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 3px solid var(--gold);
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-style: italic;
    color: var(--ink-2);
}
.prose code {
    background: var(--surface);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose img { border-radius: var(--radius-sm); margin: 1.5rem 0; }

/* Article card (list) ---- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.5rem;
}
.article-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    transition: all 0.3s var(--ease);
    display: block;
    position: relative;
    overflow: hidden;
}
.article-card:hover {
    border-color: var(--border-hi);
    transform: translateY(-3px);
}
.article-card-meta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--gold);
    margin-bottom: 1rem;
    font-weight: 500;
}
.article-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.article-card p {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.article-card .read-more {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 600;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

/* Footer ---- */
footer.site-footer {
    padding: 5rem 0 2rem;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-grid h3 {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    margin-bottom: 1.25rem;
}
.footer-grid a {
    /* 44 px na výšku na každej šírke (USER-198). Na mobile to platilo od
       USER-132; na počítači mali odkazy 32 px pod sebou bez medzery. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    color: var(--ink-2);
    font-size: 0.92rem;
}
.footer-grid a:hover { color: var(--ink); }
.footer-lead {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.7;
    max-width: 360px;
    margin-top: 1rem;
}
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--ink-3);
}
/* Odkaz v spodnej lište stojí vedľa iných riadkov pätičky; 44 px na výšku
   drží cieľ bez zmeny riadkovania textu okolo (USER-198). */
.footer-bottom a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a:hover { color: var(--ink); }

/* Kompaktná pätička pre prihlasovacie a účtové stránky. Plnú pätičku tu
   nechceme (rozbíjala by sústredený formulár), ale identifikačné údaje
   prevádzkovateľa a odkaz na ochranu súkromia musia byť dostupné z každej
   stránky — § 4 zákona č. 22/2004 Z. z. o elektronickom obchode + GDPR čl. 13. */
footer.site-footer.footer-compact { padding: 2.5rem 0 1.75rem; }
footer.site-footer.footer-compact .footer-bottom { padding-top: 0; border-top: none; }

/* Print ---- */
@media print {
    body::before, header.site-header, footer.site-footer, nav, .btn { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .hero { padding: 1rem 0 !important; min-height: auto !important; }
    .hero h1 { color: #000 !important; }
    section.content { padding: 1rem 0 !important; }
}

/* Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
}

/* Mobile + tablet ---- */
/* Breakpoint zvýšený 900 → 1280px aby sa brand-text (na 2 riadkoch)
   a menu + dropdown neprekrývali na užších desktopoch.
   1280px pokrýva väčšinu macbook+tablet scenárov.

   Merané 12. 8. 2026 po skrátení menu (v7.8.3): pôvodných šesť položiek
   s dlhými popiskami malo 1078 px a pri okne 1366 px ostávalo medzi logom
   a menu 23 px — presne to tlačenie k logu, ktoré bolo vidno na fotke.
   Päť skrátených položiek má 687 px, čiže pri 1366 px je medzera 414 px.
   Breakpoint napriek tomu ostáva na 1280 px: pod ním sa mení celé
   rozloženie hlavičky, nielen viditeľnosť menu. */
@media (max-width: 1280px) {
    header.site-header { padding: 1rem 0; }
    nav.main-nav { display: none; }
    .mobile-menu { display: block; }
    .hero { padding: 7rem 0 4rem; min-height: auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    section.content { padding: 3.5rem 0; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-map, .contact-map iframe { min-height: 340px; }
}
@media (max-width: 500px) {
    .container { padding: 0 1.25rem; }
    .hero-inner { padding: 0 1.25rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .contact-details { grid-template-columns: 1fr; }
    .hero-cta-group { width: 100%; flex-direction: column; align-items: stretch; }
    .btn { justify-content: center; width: 100%; }
    .cta-2-inner { justify-content: center; text-align: center; }
    .cta-2-text { justify-content: center; text-align: center; }
}

/* ===== Úzke displeje (od 320 px — WCAG 1.4.10 Reflow) =====
   Meranie 25. 8. 2026: pri 320 px pretekalo 10 stránok. Dve príčiny:
   viacstĺpcové tabuľky (porovnania dostupnosti na mestských stránkach)
   a hlavička s logom + dvojriadkovým názvom.

   Tabuľka sa NErozbíja na bloky — porovnanie stráca zmysel bez stĺpcov.
   Namiesto toho dostane vlastný rolovací kontajner: rolovať sa dá tabuľkou,
   nie celou stránkou (to je rozdiel, na ktorom Reflow stojí). */
@media (max-width: 400px) {
    .content table,
    .card table,
    .content-inner table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Hlavička: menšie logo, názov, tlačidlá aj medzery. Meranie na 320 px:
       brand 154 + tri tlačidlá 120 + medzery 32 + odsadenie 27 = 333 px,
       teda 13 px cez okraj. Uberá sa zo všetkých štyroch.

       Zmenšenie ale platilo až po 400 px, hoci namerané bolo na 320 px (U-27):
       na 360 aj 390 px vychádzali všetky tri tlačidlá na 34 × 34 px, teda
       najmenšie ciele práve na najmenších telefónoch, kde je ťuknutie najmenej
       presné. Nad WCAG 2.5.8 (24 px) to je, pod hranicou 44 px z ôsmej osi nie.
       Preto sa zmenšenie zúžilo na ≤ 360 px a dotyková plocha sa rozširuje
       pseudoprvkom — vizuálna veľkosť ostáva, layout sa nemení. */
    .header-inner { padding: 0 0.6rem; gap: 0.3rem; }
    .header-inner .jkzm-search-trigger,
    .header-inner .mobile-nav-toggle,
    .header-inner .theme-toggle { width: 40px; height: 40px; flex-shrink: 0; }

    /* Dotyková plocha 44 px na výšku a cez medzeru na šírku. `::after` je na
       `.theme-toggle` obsadené (`display:none !important` proti podčiarknutiu
       navigácie), preto `::before`. Vodorovne sa rozširuje len o 2 px na
       stranu — medzera medzi tlačidlami je 4,8 px, takže väčšie rozšírenie by
       plochy susedov **prekrylo** a ťuknutie by dostal ten, čo sa kreslí
       neskôr. */
    .header-inner .jkzm-search-trigger,
    .header-inner .mobile-nav-toggle,
    .header-inner .theme-toggle { position: relative; }
    .header-inner .jkzm-search-trigger::before,
    .header-inner .mobile-nav-toggle::before,
    .header-inner .theme-toggle::before {
        content: '';
        position: absolute;
        inset: -6px -2px;
        border-radius: inherit;
    }
    .brand img { max-height: 30px; }
    /* 44 px na výšku ako skutočný rozmer, nie cez `::before` — logo je prvý
       cieľ na stránke a susedí s tlačidlom vyhľadávania (USER-132, webscore
       namerala 228 × 30 px). */
    .brand { gap: 0.4rem; min-width: 0; flex: 1 1 auto; min-height: 44px; }
    /* Aj DETI brandu musia mať min-width: 0 — inak si `.brand-text` drží
       svoju min-content šírku a celá hlavička sa odmietne zúžiť. */
    .brand > * { min-width: 0; }

    /* Len tu je zmenšenie na 34 px naozaj potrebné — meranie bolo na 320 px.
       Dotyková plocha ostáva 44 px na výšku vďaka `::before` vyššie. */
    @media (max-width: 360px) {
        .header-inner .jkzm-search-trigger,
        .header-inner .mobile-nav-toggle,
        .header-inner .theme-toggle { width: 34px; height: 34px; }
        .header-inner .jkzm-search-trigger::before,
        .header-inner .mobile-nav-toggle::before,
        .header-inner .theme-toggle::before { inset: -5px -2px; }
    }

    /* Prvky, ktoré si držia vlastnú šírku a pretečú úzky displej:
       tlačidlá s dlhým popisom a formulárové polia vo flexe (pasca
       z CLAUDE.md — `<input>`/`<select>` bez `max-width: 100%`). */
    .btn,
    .content input, .content select, .content textarea,
    .search-wrap input, .search-wrap button {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .btn { padding-left: 0.9rem; padding-right: 0.9rem; }
    /* brand-text má inak `white-space: nowrap` — práve to bránilo hlavičke
       zmestiť sa do 320 px. */
    .brand-text { min-width: 0; font-size: 0.86rem; line-height: 1.2; white-space: normal; overflow-wrap: break-word; }
    .brand-text small { font-size: 0.66rem; }
}

/* ===== Breadcrumb navigation ===== */
.breadcrumb-nav {
    /* Header je position:fixed; reálna rendered výška sa môže líšiť (105–140px desktop)
       podľa fontov/scaling. Buffer 9.5rem (152px) → breadcrumb je vždy pod headerom
       (čistí aj ~140px rendering s ~12px medzerou), no bez prehnaného odstupu.
       Mobile úmerne nižšie. */
    padding: 9.5rem 0 0;
}
.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0 auto;
    padding: 0 1.25rem;
    max-width: 1200px;
    font-size: 0.82rem;
    color: var(--ink-3, #6b7280);
}
.breadcrumb-nav li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.breadcrumb-nav li + li::before {
    content: "›";
    color: var(--ink-3, #6b7280);
    margin-right: 0.2rem;
    opacity: 0.6;
}
.breadcrumb-nav a {
    color: var(--ink-2, #9ca3af);
    text-decoration: none;
    transition: color 0.15s ease;
}
.breadcrumb-nav a:hover {
    color: var(--gold, #d4b170);
    text-decoration: underline;
}
.breadcrumb-nav [aria-current="page"] {
    color: var(--ink, #f4f4f5);
    font-weight: 500;
}
@media (max-width: 640px) {
    /* Mobilný header — úmerne menšia rezerva, ale stále nad reálnu výšku. */
    .breadcrumb-nav { padding-top: 7.5rem; }
    .breadcrumb-nav ol { font-size: 0.78rem; }
}

/* Ak breadcrumb-nav predchádza hero / page-hero / .hero / section.content,
   znížime ich padding-top, aby sa neduplikoval voľný priestor na vrchu. */
.breadcrumb-nav + section.page-hero,
.breadcrumb-nav + section.hero,
.breadcrumb-nav + main > section.page-hero:first-child,
.breadcrumb-nav + main > section.hero:first-child {
    padding-top: 1.25rem !important;
}
.breadcrumb-nav + main { padding-top: 0; }
.breadcrumb-nav + section.content { padding-top: 1rem; }

/* ── Klubová pečať — jemný watermark z loga na pozadí všetkých stránok ──
   Za obsahom (z-index 1, rovnako ako noise; obsah má z-index 2), neinteraktívna.
   Logo (WebP) má biele pozadie → invert ho zmení na čierne; mix-blend-mode:screen
   čierne pozadie „odstráni" (na tmavej stránke zmizne) a necháva len svetlú
   siluetu koňa + text, sepia/hue ich ladí do zlatého tónu. */
body::after {
    content: '';
    position: fixed;
    left: 2rem;
    bottom: 1.75rem;
    width: clamp(220px, 26vw, 380px);
    height: clamp(220px, 26vw, 380px);
    background: url('/assets/logo.png') center / contain no-repeat;
    filter: invert(1) sepia(0.55) saturate(2) hue-rotate(353deg) brightness(1.05);
    mix-blend-mode: screen;
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 768px) {
    body::after { width: 52vw; height: 52vw; left: 1rem; bottom: 1rem; opacity: 0.18; }
}

/* ================================================================
   Prepínač témy (theme.js) + svetlá „bledá" téma
   ----------------------------------------------------------------
   Pôvodná tmavá schéma ostáva DEFAULT (žiadny atribút na <html>).
   Svetlá téma sa aktivuje `data-theme="light"` na <html> — rovnaké
   štýly, len bledá moderná farebnosť. Väčšina prvkov beží cez
   premenné; nižšie sú aj override-y pár natvrdo tmavých miest.
   ================================================================ */

/* --- Tlačidlo prepínača (zdieľané pre obe témy) --- */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-hi);
    color: var(--ink-2);
    width: 40px; height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.theme-toggle .theme-toggle-ico { pointer-events: none; }
.theme-toggle::after { display: none !important; } /* neaplikuj nav underline */
.theme-toggle--desktop { margin-left: 0.5rem; }
.theme-toggle--mobile { display: none; margin-left: auto; margin-right: 0.5rem; }
@media (max-width: 1280px) {
    .theme-toggle--desktop { display: none; }   /* nav je aj tak skrytá */
    .theme-toggle--mobile { display: inline-flex; }
}

/* --- Svetlá téma: premenné --- */
:root[data-theme="light"] {
    --bg: #f7f8fa;
    --bg-2: #eef1f6;
    --bg-3: #e4e9f1;
    --surface: rgba(20, 27, 45, 0.035);
    --surface-hi: rgba(20, 27, 45, 0.06);
    --panel: #ffffff;
    --border: rgba(20, 27, 45, 0.10);
    --border-hi: rgba(20, 27, 45, 0.18);
    --ink: #161b26;
    --ink-2: rgba(22, 27, 38, 0.74);
    /* 0.64 (nie 0.54) → kontrast ~5:1 na --bg, spĺňa WCAG 2.1 AA (4.5:1)
       pre sekundárny text; svetlá téma je od v7.7.535 predvolená. */
    --ink-3: rgba(22, 27, 38, 0.64);
    /* #826418: zlatý text spĺňa WCAG 1.4.3 AA (4,5:1) na VŠETKÝCH povrchoch —
       --bg 5,22, --bg-2 4,90, --bg-3 4,55, karty 4,87. Predošlá #8a6a1a overovala
       kontrast len voči --bg (4,75) a na kartách a sekciách padala na 4,14–4,46;
       axe-core hlásil ~3 800 takých prvkov naprieč webom (audit 11. 8. 2026).
       POZOR: zlatá ako VÝPLŇ tlačidla má vlastnú premennú --gold-fill nižšie —
       tmavnutie textovej zlatej by tam kontrast naopak zhoršilo. */
    --gold: #826418;
    --gold-hover: #6f5415;
    --gold-soft: rgba(138, 106, 26, 0.14);
    /* --emerald sa všade používa ako farba TEXTU (odznaky „Nové“, stav
       prípravy knihy, akcenty vzdelávania). #0f9d70 má na --bg 3,25:1,
       #0b6b4f dosiahne 6,12:1 pri rovnakom tóne. Výplne majú vlastnú
       --emerald-soft, tú netreba meniť. */
    --emerald: #0b6b4f;
    --emerald-soft: rgba(15, 157, 112, 0.14);
    --on-gold: #ffffff;
    --danger-ink: #b91c1c;
    --warn-ink: #92400e;
    --info-ink: #1d4ed8;
    color-scheme: light;
}

/* --- Svetlá téma: override natvrdo tmavých miest --- */
:root[data-theme="light"] body { background: var(--bg); color: var(--ink); }

/* Header + dropdown „Viac" (mali hardcoded tmavé pozadia) */
:root[data-theme="light"] header.site-header {
    background: rgba(247, 248, 250, 0.8);
    border-bottom-color: var(--border);
}
:root[data-theme="light"] .nav-more-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(20, 27, 45, 0.12);
    box-shadow: 0 24px 60px rgba(20, 27, 45, 0.16);
}
:root[data-theme="light"] .nav-more-menu a:hover {
    background: rgba(154, 116, 32, 0.10);
    color: var(--gold);
}

/* Gold tlačidlá — text musí ostať tmavý (v tmavej téme to bol var(--bg)) */
/* Tlačidlo so zlatou výplňou: vo svetlej téme je text BIELY, nie tmavý. Tmavý
   text na zlatej mal kontrast 3,41:1 — a keďže .btn má 13,1 px pri váhe 600,
   NEIDE o „veľký text“ podľa WCAG (≥24 px, alebo ≥18,66 px pri tučnom), takže
   platí prah 4,5:1. Predošlý komentár tvrdil opak; biely na #826418 dáva 5,55:1.
   Farbu drží --on-gold, aby sa tmavá téma (svetlá zlatá) nepokazila. */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-primary:hover { color: var(--on-gold); }
:root[data-theme="light"] ::selection { background: var(--gold); color: #fff; }
/* Skip-link má zlatú výplň — tmavý text na nej dáva 3,1:1. Biely 5,55:1. */
:root[data-theme="light"] .skip-link { color: #ffffff; }

/* Zlatý text na ZLATOM podklade (.highlight-box má pozadie --gold-soft, teda
   zlato tónované) vychádzal 3,84–4,50:1, čiže tesne pod AA. Tmavší odtieň
   rovnakého tónu dá 4,9–6,2:1. Týka sa nadpisov v rámčekoch sprievodcov —
   axe-core hlásil ~190 takých prvkov (audit 11. 8. 2026). */
:root[data-theme="light"] .highlight-box strong,
:root[data-theme="light"] .highlight-box .eyebrow,
:root[data-theme="light"] .roadmap-badge-soon,
:root[data-theme="light"] .cta-2-badge { color: #6f5415; }

/* Nadpisy zdravotných upozornení (.warning-box strong) sú v sprievodcoch
   inlinované ako #ff7878 (pre tmavú tému) → na svetlom podklade len ~2,3:1.
   Centrálny override na tmavočervenú (~5:1) — vyššia špecificita prebije
   per-page inline pravidlo. WCAG 1.4.3. */
:root[data-theme="light"] .warning-box strong { color: #b91c1c; }

/* Telo upozornenia: 5 dokumentových stránok (cookies, klubový a prevádzkový
   poriadok, obchodné podmienky, dokumenty na podpis) má vo vlastnom <style>
   natvrdo `color: #fcd34d` — jantárovú zo TMAVEJ témy. Na svetlom podklade
   má kontrast 1,2:1, teda prakticky nečitateľné. Sprievodcovia používajú
   var(--ink), takže ich tento override nemení. WCAG 1.4.3. */
:root[data-theme="light"] .warning-box { color: var(--ink); }

/* Červený súrodenec .warning-box. Rovnaká príčina: telo drží #fca5a5
   a zvýraznenia #ef4444 z tmavej témy — na ružovkastom podklade
   1,5:1 a 2,98:1. WCAG 1.4.3. */
:root[data-theme="light"] .danger-box { color: var(--ink); }
:root[data-theme="light"] .danger-box strong { color: #b91c1c; }

/* Odkazy v tónovaných rámčekoch. Zlatá --gold je odladená na neutrálne
   povrchy; na tónovanom podklade .highlight-box (#e1ddd4) padne na
   4,09:1 a na .warning-box (#eee3e6) na 4,42:1 — tesne pod AA.
   Tmavší odtieň rovnakého tónu dá 5,25 a 5,67. */
:root[data-theme="light"] .highlight-box a,
:root[data-theme="light"] .warning-box a,
:root[data-theme="light"] .danger-box a { color: #6f5415; }

/* Hero mriežka — biele čiary sú na svetlom neviditeľné → tmavé */
:root[data-theme="light"] .hero::after {
    background-image:
        linear-gradient(rgba(20, 27, 45, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 27, 45, 0.045) 1px, transparent 1px);
}

/* Šumový overlay jemnejšie na svetlom podklade */
:root[data-theme="light"] body::before { opacity: 0.22; mix-blend-mode: soft-light; }

/* Klubová pečať — bez invertu, multiply → jemná tmavá silueta na svetlom */
:root[data-theme="light"] body::after {
    filter: sepia(0.5) saturate(1.5) hue-rotate(353deg) brightness(0.85);
    mix-blend-mode: multiply;
    opacity: 0.10;
}

/* ── Kapitola „Časté otázky“ v sprievodcoch (G-15) ───────────────────────────
   Otázky žili iba v JSON-LD `FAQPage`, teda pre vyhľadávač a nie pre čitateľa;
   Google smie neviditeľný blok ignorovať celý. Rozbaľovací tvar (`details`)
   je ten istý, aký má /aukcie — obsah je v HTML a čitateľ si ho otvorí.
   Farby idú cez premenné, takže platia v obidvoch témach. */
.faq-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
    /* 0,7 rem hore aj dole = aspoň 44 px na riadok otázky; otázky idú pod
       sebou, pri 33 px sa palcom otvárala susedná (USER-132). */
    padding: 0.7rem 0;
}
.faq-item > p {
    color: var(--ink-2);
    margin: 0.5rem 0 0;
    line-height: 1.7;
}