/* ============================================================
   Lunárny kalendár — dizajn „Obloha dňa a noci“
   Celá stránka je obloha: svetlý režim = denné nebo (mesiac ako
   bledý disk na modrej), tmavý režim = nočné nebo s hviezdami.
   Obsah leží na sklenených kartách, zlatá = mesačné svetlo.
   Prechod režimov = crossfade oblohy (fixné vrstvy ::before/::after).
   ============================================================ */

/* --- Písma ------------------------------------------------- */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/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: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/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;
}

/* --- Dizajnové tokeny -------------------------------------- */
:root {
    color-scheme: light;

    /* zlaté konštanty (tlačidlá, skip-link, focus) — rovnaké v oboch režimoch */
    --zlata: #e9c46a;
    --zlata-svetla: #f4dfa4;
    --zlata-tmava: #c9a244;

    /* denná obloha */
    --obloha-fallback: #f2ead9;
    --nocna-obloha: 0;              /* opacity nočnej vrstvy */
    --atrament: #2c2a3f;
    --tlmena: #565170;
    --linka: rgba(44, 42, 63, 0.16);
    --jemna: rgba(44, 42, 63, 0.05);
    --akcent: #675018;              /* denné bronzové zlato — ≥4,5:1 aj na vrchu oblohy */
    --akcent-hover: #4f3d0f;
    --akcent-text: #ffffff;
    --akcent-linka: rgba(138, 106, 32, 0.55);
    --akcent-jemny: rgba(138, 106, 32, 0.1);
    --zlata-glyf: #8a6a20;          /* veľké dekoratívne glyfy */
    --karta-bg: rgba(255, 255, 255, 0.52);
    --karta-linka: rgba(44, 42, 63, 0.12);
    --karta-plna: #fdfbf5;          /* nepriehľadné plochy (select) */
    --tlac-ramik: rgba(44, 42, 63, 0.28);
    --alert-text: #a63d3d;
    --mesiac-ziara: rgba(255, 255, 255, 0.55);
    --mesiac-ziara-plna: rgba(255, 255, 255, 0.85);
    --tien-karty: 0 1px 2px rgba(24, 27, 58, 0.04), 0 10px 28px -14px rgba(24, 27, 58, 0.14);

    --pismo-nadpis: 'Fraunces', Georgia, 'Times New Roman', serif;
    --pismo-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* Tmavý režim: systémová preferencia (pokiaľ ju používateľ ručne neprepol
   na svetlý) ALEBO ručné prepnutie cez data-theme. Obe vetvy musia mať
   identické tokeny — pri úprave zmeň OBIDVA bloky. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --obloha-fallback: #050311;
        --nocna-obloha: 1;
        --atrament: #ece7f7;
        --tlmena: #b3aacd;
        --linka: rgba(255, 255, 255, 0.14);
        --jemna: rgba(255, 255, 255, 0.05);
        --akcent: #e8c98f;
        --akcent-hover: #f4dfa4;
        --akcent-text: #241d08;
        --akcent-linka: rgba(232, 201, 143, 0.5);
        --akcent-jemny: rgba(232, 201, 143, 0.12);
        --zlata-glyf: #e8c98f;
        --karta-bg: rgba(255, 255, 255, 0.045);
        --karta-linka: rgba(255, 255, 255, 0.11);
        --karta-plna: #191340;
        --tlac-ramik: rgba(255, 255, 255, 0.22);
        --alert-text: #f2a6a6;
        --mesiac-ziara: rgba(232, 201, 143, 0.4);
        --mesiac-ziara-plna: rgba(240, 215, 160, 0.7);
        --tien-karty: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.55);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --obloha-fallback: #050311;
    --nocna-obloha: 1;
    --atrament: #ece7f7;
    --tlmena: #b3aacd;
    --linka: rgba(255, 255, 255, 0.14);
    --jemna: rgba(255, 255, 255, 0.05);
    --akcent: #e8c98f;
    --akcent-hover: #f4dfa4;
    --akcent-text: #241d08;
    --akcent-linka: rgba(232, 201, 143, 0.5);
    --akcent-jemny: rgba(232, 201, 143, 0.12);
    --zlata-glyf: #e8c98f;
    --karta-bg: rgba(255, 255, 255, 0.045);
    --karta-linka: rgba(255, 255, 255, 0.11);
    --karta-plna: #191340;
    --tlac-ramik: rgba(255, 255, 255, 0.22);
    --alert-text: #f2a6a6;
    --mesiac-ziara: rgba(232, 201, 143, 0.4);
    --mesiac-ziara-plna: rgba(240, 215, 160, 0.7);
    --tien-karty: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.55);
}

/* --- Obloha (fixné vrstvy pod obsahom) ----------------------- */
/* Denná obloha je vždy podmaľovaná (::before), nočná (::after) sa cez ňu
   prelína cez opacity — CSS nevie animovať medzi gradientmi priamo. */
html { background: var(--obloha-fallback); scroll-behavior: smooth; }

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}
body::before {
    z-index: -2;
    background: linear-gradient(180deg, #bccbe9 0%, #d6d4e6 45%, #f2ead9 100%);
}
body::after {
    z-index: -1;
    opacity: var(--nocna-obloha);
    transition: opacity 0.7s ease;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 10%, rgba(255, 255, 255, 0.7), transparent 100%),
        radial-gradient(1px 1px at 26% 28%, rgba(255, 255, 255, 0.45), transparent 100%),
        radial-gradient(1.5px 1.5px at 43% 8%, rgba(244, 223, 164, 0.55), transparent 100%),
        radial-gradient(1px 1px at 55% 22%, rgba(255, 255, 255, 0.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 71% 14%, rgba(255, 255, 255, 0.6), transparent 100%),
        radial-gradient(1px 1px at 84% 34%, rgba(244, 223, 164, 0.5), transparent 100%),
        radial-gradient(1.5px 1.5px at 93% 9%, rgba(255, 255, 255, 0.5), transparent 100%),
        radial-gradient(1px 1px at 8% 52%, rgba(255, 255, 255, 0.35), transparent 100%),
        radial-gradient(1.5px 1.5px at 34% 60%, rgba(255, 255, 255, 0.3), transparent 100%),
        radial-gradient(1px 1px at 66% 55%, rgba(255, 255, 255, 0.35), transparent 100%),
        radial-gradient(1px 1px at 90% 68%, rgba(255, 255, 255, 0.3), transparent 100%),
        radial-gradient(1.5px 1.5px at 18% 82%, rgba(255, 255, 255, 0.22), transparent 100%),
        radial-gradient(1px 1px at 74% 86%, rgba(255, 255, 255, 0.25), transparent 100%),
        linear-gradient(180deg, #191036 0%, #0d0824 45%, #050311 100%);
}

/* --- Základ ------------------------------------------------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--pismo-text);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--atrament);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* plynulý prechod farieb pri prepnutí režimu (obloha sa prelína vyššie);
   interaktívne prvky dostávajú rýchlejšie prechody nižšie */
body, h1, h2, h3, p, li, dt, dd, blockquote, figcaption,
.brand, .brand-claim, .stitok, .prepinac, .titul-kicker,
.nocny-panel, .denne-karty section, .tabulka, form, .vysledok, .oznam,
.paticka, .paticka-brand, .zivel-glyf, .fakt-glyf {
    transition: color 0.7s ease, background-color 0.7s ease, border-color 0.7s ease;
}

.obal {
    max-width: 860px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 1.5rem);
}

main {
    padding-top: clamp(1.4rem, 4vw, 2.2rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akcent-hover); }

:focus-visible {
    outline: 2px solid var(--zlata-tmava);
    outline-offset: 2px;
    border-radius: 3px;
}

.preskocit {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--zlata);
    color: #241d08;
    padding: 0.6rem 1rem;
    border-radius: 0 0 10px 0;
    text-decoration: none;
}
.preskocit:focus { left: 0; }

/* --- Typografia --------------------------------------------- */
h1, h2, h3 {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 4.5vw, 2.5rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.6rem); margin: 0 0 0.7rem; }
h3 { font-size: 1.12rem; margin: 1.5rem 0 0.35rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.35rem; }

hr { border: 0; border-top: 1px solid var(--linka); margin: 1.5rem 0; }

/* editoriálny rytmus dlhých stránok: sekcie oddelené vlasovou linkou */
main > section { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--linka); }
main > section:first-of-type,
main > section.hero { margin-top: 0; padding-top: 0; border-top: 0; }
main > section.hero + section { border-top: 0; }
/* sklenený panel si drží vlastný symetrický padding a rám aj ako prvá sekcia */
main > section.nocny-panel { padding: clamp(1.4rem, 4vw, 2.3rem); border: 1px solid var(--karta-linka); }

/* --- Hlavička: priehľadná nad oblohou ------------------------ */
.hlavicka { color: var(--atrament); }

.hlavicka-vnutro {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 1.1rem;
    padding-bottom: 0.9rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--atrament);
}
.brand:hover { color: var(--akcent); }
.brand-znak { flex-shrink: 0; }
.brand-texty { display: flex; flex-direction: column; line-height: 1.2; }
.brand-nazov {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.28rem;
    letter-spacing: 0.01em;
}
.brand-claim { font-size: 0.74rem; color: var(--tlmena); letter-spacing: 0.06em; }

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.2rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.menu a {
    color: var(--tlmena);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.menu a:hover { color: var(--akcent); background: var(--akcent-jemny); }
.menu a.menu-dnes { color: var(--akcent); }

/* prepínač svetlého/tmavého režimu */
.prepinac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-left: 0.4rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--akcent-linka);
    background: transparent;
    color: var(--akcent);
    cursor: pointer;
}
.prepinac:hover { background: var(--akcent-jemny); }
.prepinac svg { width: 1.05rem; height: 1.05rem; display: block; }

/* hamburger — zobrazi sa len na mobile s JS (bez JS ostava menu rozbalene) */
.hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 2.2rem;
    height: 2.2rem;
    margin-left: 0.4rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--akcent-linka);
    background: transparent;
    color: var(--akcent);
    cursor: pointer;
}
.hamburger:hover { background: var(--akcent-jemny); }
.hamburger span {
    display: block;
    width: 15px;
    height: 1.7px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.7px) rotate(-45deg); }
.i-slnko { display: none !important; }
:root[data-theme="dark"] .i-mesiac { display: none !important; }
:root[data-theme="dark"] .i-slnko { display: block !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .i-mesiac { display: none !important; }
    :root:not([data-theme="light"]) .i-slnko { display: block !important; }
}

/* --- Mesiac: denný/nočný variant kresby ----------------------- */
/* Makro kreslí obe vrstvy, viditeľnú vyberá režim (ako i-mesiac/i-slnko). */
.mesiac-noc { display: none; }
:root[data-theme="dark"] .mesiac-noc { display: inline; }
:root[data-theme="dark"] .mesiac-den { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mesiac-noc { display: inline; }
    :root:not([data-theme="light"]) .mesiac-den { display: none; }
}

@keyframes lk-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes lk-glow {
    0%, 100% { filter: drop-shadow(0 0 22px var(--mesiac-ziara)); }
    50% { filter: drop-shadow(0 0 44px var(--mesiac-ziara-plna)); }
}
.mesiac-anim {
    display: inline-block;
    animation: lk-drift 7s ease-in-out infinite, lk-glow 5s ease-in-out infinite;
}

/* --- Sklenený panel (hero hubov, pôvodne nočný panel) ---------- */
.nocny-panel {
    background: var(--karta-bg);
    border: 1px solid var(--karta-linka);
    border-radius: 22px;
    padding: clamp(1.4rem, 4vw, 2.3rem);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--tien-karty);
}

.hero { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.2rem, 4vw, 2.5rem); }
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero-text > :last-child { margin-bottom: 0; }
.hero-mesiac { flex: 0 0 auto; display: flex; align-items: center; filter: drop-shadow(0 0 18px var(--mesiac-ziara)); }
.mesiac-svg { display: block; }

.kicker {
    font-family: var(--pismo-text);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tlmena);
    margin: 0 0 0.5rem;
}
h2.kicker { line-height: 1.5; }

.hero h1 { margin-bottom: 0.6rem; }

.hero-veta {
    font-family: var(--pismo-nadpis);
    font-size: clamp(1.15rem, 2.6vw, 1.4rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--atrament);
    margin-bottom: 0.9rem;
}

.hero-pozn { font-size: 0.92rem; color: var(--tlmena); }

.stitky { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.stitky li { margin: 0; } /* generický li margin by pridával medzeru pod hero (chipy v 2 riadkoch) */
.stitok {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.5;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--akcent-linka);
    color: var(--akcent);
    background: var(--akcent-jemny);
    white-space: nowrap;
}

.hero-akcie { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }

/* --- Denná stránka: centrovaný hero ---------------------------- */
.hero-denna { text-align: center; padding-top: clamp(0.6rem, 2.5vw, 1.4rem); }
.hero-denna .hero-mesiac { display: flex; justify-content: center; filter: none; }
.hero-denna .mesiac-svg { width: clamp(160px, 42vw, 230px); height: auto; aspect-ratio: 1; }

.denny-titul { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.2rem 0 0; }
.titul-kicker {
    font-family: var(--pismo-text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--akcent);
}
.titul-datum {
    font-family: var(--pismo-nadpis);
    font-size: clamp(2.3rem, 6.5vw, 3.5rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.hero-podtitul {
    margin: 0.8rem 0 0;
    font-size: clamp(1.02rem, 2.2vw, 1.15rem);
    color: var(--tlmena);
}

.hero-denna .stitky { justify-content: center; margin: 1.3rem 0 0; }
.hero-denna .hero-pozn { margin: 1rem 0 0; }

/* Medailón znamenia pri Mesiaci — druhé nebeské teleso na dennej stránke.
   Rozmery sú v % veľkosti Mesiaca, takže sa škáluje spolu s ním (clamp vyššie
   aj mobilná vetva na konci súboru). Wrapper musí byť inline-block s line-height 0,
   inak by pod SVG ostal riadkový priestor a medailón by sedel privysoko. */
.hero-znak { position: relative; display: inline-block; line-height: 0; }
.znamenie-medailon {
    position: absolute;
    right: -7%;
    bottom: 1%;
    width: 37%;
    height: 37%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--akcent-linka);
    background: var(--akcent-jemny);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--tien-karty);
    color: var(--zlata-glyf);
}
.znamenie-medailon .znamenie-glyf { width: 60%; height: 60%; }

/* --- Myšlienka dňa --------------------------------------------- */
.myslienka { max-width: 640px; margin: clamp(2.2rem, 5vw, 3.2rem) auto 0; text-align: center; }
.myslienka-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.myslienka-ornament::before,
.myslienka-ornament::after {
    content: "";
    display: block;
    width: 72px;
    height: 1px;
    background: var(--akcent-linka);
}
.myslienka-ornament span {
    display: block;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    background: var(--akcent);
}
.myslienka figcaption {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--akcent);
}
.myslienka figcaption .myslienka-ornament { margin-bottom: 1rem; }
.myslienka blockquote {
    margin: 0.9rem 0 0;
    font-family: var(--pismo-nadpis);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 450;
    line-height: 1.55;
    color: var(--atrament);
}
.myslienka .myslienka-ornament:last-child { margin-top: 1.2rem; }

/* --- Denné karty ------------------------------------------------ */
.denne-karty {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: clamp(2rem, 5vw, 2.8rem);
}
.denne-karty section {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--karta-bg);
    border: 1px solid var(--karta-linka);
    border-radius: 20px;
    padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.2rem, 3.5vw, 2rem);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--tien-karty);
}
.denne-karty section > :last-child { margin-bottom: 0; }
.denne-karty h2 {
    font-size: 1.35rem;
    font-weight: 550;
    color: var(--akcent);
    margin-bottom: 0.6rem;
}
.karty-dvojica { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* zvýraznená karta (udalosti dňa) */
.denne-karty section.karta-zlata {
    border-color: var(--akcent-linka);
    background: linear-gradient(135deg, var(--akcent-jemny), transparent 65%), var(--karta-bg);
}

/* veľký líniový glyf v pozadí karty (šírka musí byť na blokoch — inline span ju ignoruje) */
.glyf-pozadie {
    display: block;
    position: absolute;
    top: 1.1rem;
    right: 1.3rem;
    width: 74px;
    height: 74px;
    opacity: 0.3;
    pointer-events: none;
    filter: drop-shadow(0 0 12px var(--mesiac-ziara));
}
.glyf-pozadie .zivel-glyf,
.glyf-pozadie .fakt-glyf { display: block; width: 100%; height: 100%; }

/* --- Tlačidlá ------------------------------------------------ */
.tlacidlo {
    display: inline-block;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    padding: 0.58rem 1.15rem;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    border: 0;
    cursor: pointer;
    font-family: var(--pismo-text);
}
.tlacidlo:active { transform: translateY(1px); }

.tlacidlo-zlate {
    background: linear-gradient(180deg, #f2d489 0%, #e0b556 100%);
    color: #241d08 !important;
    box-shadow: 0 6px 18px -8px rgba(233, 196, 106, 0.7);
}
.tlacidlo-zlate:hover { background: linear-gradient(180deg, #f7dd9c 0%, #e6be62 100%); }

.tlacidlo-tiche {
    background: transparent;
    color: var(--atrament) !important;
    border: 1px solid var(--tlac-ramik);
}
.tlacidlo-tiche:hover { border-color: var(--akcent); color: var(--akcent) !important; }

button.tlacidlo, .tlacidlo-akcent {
    background: var(--akcent);
    color: var(--akcent-text) !important;
    box-shadow: 0 6px 16px -8px var(--akcent);
}
button.tlacidlo:hover, .tlacidlo-akcent:hover { background: var(--akcent-hover); }

/* --- Oznam (zatmenie, výstraha) ------------------------------ */
.oznam {
    display: block;
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.16), rgba(233, 196, 106, 0.04));
    border: 1px solid var(--akcent-linka);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    margin: 1.2rem 0;
}
.oznam p { margin: 0; }
.oznam p + p { margin-top: 0.5rem; }

/* --- Lead odsek (fáza dňa) -------------------------------------- */
.lead {
    font-family: var(--pismo-nadpis);
    font-size: 1.28rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--atrament);
    margin: 0 0 0.6rem;
}
.lead-pozn {
    font-family: var(--pismo-text);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--tlmena);
}

/* --- Fakty dňa — editoriálny prúžok „štítok → hodnota" --------- */
.fakty {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.6rem;
    margin: 0.4rem 0 1.15rem;
    padding: 0;
    list-style: none;
}
.fakt { margin: 0; min-width: 0; }
.fakt + .fakt { padding-left: 1.6rem; border-left: 1px solid var(--linka); }

.fakt dt {
    font-family: var(--pismo-text);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tlmena);
    margin: 0 0 0.15rem;
}
.fakt dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--pismo-nadpis);
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--atrament);
}

/* zlatý líniový glyf — živel dňa aj časť rastlín */
.zivel-glyf, .fakt-glyf {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    color: var(--zlata-glyf);
}
.zivel-glyf svg, .fakt-glyf svg { display: block; width: 100%; height: 100%; }

/* zlatý líniový glyf znamenia — v texte, v čipe, v medailóne aj ako vodoznak karty.
   Kresby majú mriežku 64×64 (živel/časť majú 24×24), preto vlastný blok. */
.znamenie-glyf {
    display: inline-block;
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    color: var(--zlata-glyf);
    vertical-align: -0.19em;
}
.znamenie-glyf svg { display: block; width: 100%; height: 100%; }
.glyf-pozadie .znamenie-glyf { display: block; width: 100%; height: 100%; }
/* v čipe dedí farbu textu (čip má vlastný bronzový odtieň) a musí byť väčší,
   lebo okolo stojí verzálkový text 0,72rem */
.stitok .znamenie-glyf { width: 1.45em; height: 1.45em; color: currentColor; vertical-align: -0.36em; margin-right: 0.1em; }

/* --- Tabuľky -------------------------------------------------- */
.tabulka {
    background: var(--karta-bg);
    border: 1px solid var(--karta-linka);
    border-radius: 14px;
    box-shadow: var(--tien-karty);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-x: auto;
    margin: 1rem 0;
}
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
.tabulka table { margin: 0; }
/* Obal legacy tabuliek v tele článku (dopĺňa ho ArticleController). Bez neho
   široká tabuľka pretlačí na mobile celú stránku do strany; na desktope je
   pravidlo bez vizuálneho účinku. */
.tabulka-scroll { overflow-x: auto; margin: 1rem 0; }
.tabulka-scroll > table { margin: 0; }
th, td { padding: 0.55rem 0.9rem; text-align: left; border: 0; border-bottom: 1px solid var(--linka); }
thead th {
    font-family: var(--pismo-text);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tlmena);
    background: var(--jemna);
    white-space: nowrap;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--jemna); }

/* --- Karty a mriežky ------------------------------------------ */
.mriezka {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}
.mriezka > li { margin: 0; }

.karta {
    background: var(--karta-bg);
    border: 1px solid var(--karta-linka);
    border-radius: 16px;
    padding: 1rem 1.15rem;
    box-shadow: var(--tien-karty);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.7s ease;
}
.karta:hover { border-color: var(--akcent-linka); transform: translateY(-2px); }
.karta-titul {
    display: block;
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    margin-bottom: 0.25rem;
}
.karta p { margin: 0; font-size: 0.88rem; color: var(--tlmena); }

/* karta udalosti (spln / nov na homepage) */
.udalost-karta { display: flex; align-items: center; gap: 0.9rem; }
.udalost-karta .mesiac-svg { flex-shrink: 0; }
.udalost-karta strong { font-family: var(--pismo-nadpis); font-size: 1.02rem; }
.udalost-typ {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tlmena);
    margin-bottom: 0.1rem;
}
.udalost-karta p { font-size: 0.9rem; }

/* mriežka 8 fáz */
.fazy-mriezka { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); counter-reset: faza; }
.faza-karta { text-align: center; }
.faza-karta .mesiac-svg { margin: 0.2rem auto 0.5rem; }
.faza-karta strong { font-family: var(--pismo-nadpis); display: block; margin-bottom: 0.25rem; }
.faza-karta::before {
    counter-increment: faza;
    content: counter(faza);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--akcent);
    border: 1px solid var(--akcent-linka);
    border-radius: 999px;
    width: 1.5rem;
    line-height: 1.4rem;
    margin-bottom: 0.15rem;
}

/* --- Omrvinky a stránkovanie ---------------------------------- */
.omrvinky { font-size: 0.85rem; color: var(--tlmena); margin: 0 0 0.9rem; }
.omrvinky a { color: var(--tlmena); }
.omrvinky a:hover { color: var(--akcent); }

.strankovanie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: clamp(2rem, 5vw, 2.7rem);
    font-size: 0.92rem;
}
.strankovanie a {
    text-decoration: none;
    font-weight: 500;
    color: var(--atrament);
    padding: 0.55rem 1.35rem;
    border: 1px solid var(--tlac-ramik);
    border-radius: 999px;
    background: transparent;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.strankovanie a:hover { border-color: var(--akcent); color: var(--akcent); }
.strankovanie a.strankovanie-stred {
    border-color: var(--akcent);
    color: var(--akcent);
    background: var(--akcent-jemny);
}

/* --- Formuláre (kalkulačky) ------------------------------------ */
form {
    background: var(--karta-bg);
    border: 1px solid var(--karta-linka);
    border-radius: 16px;
    padding: 1.2rem 1.3rem 1rem;
    box-shadow: var(--tien-karty);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    margin: 1rem 0 1.3rem;
}
form p { margin: 0 0 0.9rem; }

fieldset {
    border: 1px solid var(--linka);
    border-radius: 12px;
    margin: 0 0 1.1rem;
    padding: 0.8rem 1rem 0.2rem;
}
legend {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    padding: 0 0.5rem;
}

label { font-size: 0.95rem; }

select {
    font: inherit;
    font-size: 0.95rem;
    color: var(--atrament);
    background: var(--karta-plna);
    border: 1px solid var(--linka);
    border-radius: 10px;
    padding: 0.42rem 0.55rem;
    margin: 0.15rem 0.1rem 0.15rem 0;
}
select:hover { border-color: var(--akcent); }

[role="alert"] {
    background: rgba(196, 82, 82, 0.09);
    border: 1px solid rgba(196, 82, 82, 0.4);
    border-radius: 12px;
    padding: 0.65rem 1rem;
    color: var(--alert-text);
}

/* výsledok kalkulačky */
.vysledok {
    background: var(--karta-bg);
    border: 1px solid var(--akcent-linka);
    border-radius: 16px;
    padding: 1.3rem 1.4rem;
    box-shadow: var(--tien-karty);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    margin-top: 1.2rem;
}
/* --- Partnerská zhoda: profilové karty dvojice --------------------
   Dva profily vedľa seba namiesto dvoch blokov odsekov pod sebou —
   čitateľ vidí obe znamenia naraz, čo je pri porovnávaní dvojice zmysel
   celej stránky. Medailón je zväčšený .znamenie-medailon z dennej stránky. */
.zhoda-karty {
    --medailon: clamp(88px, 20vw, 122px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0.2rem 0 1.6rem;
}
.zhoda-karta {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--karta-bg);
    border: 1px solid var(--karta-linka);
    border-radius: 18px;
    padding: 1.15rem 1.25rem 1.3rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--tien-karty);
    text-align: center;
}
.zhoda-medailon {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--medailon);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid var(--akcent-linka);
    background: var(--akcent-jemny);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--tien-karty);
    color: var(--zlata-glyf);
    transition: border-color 0.25s ease;
}
.zhoda-medailon .znamenie-glyf { position: relative; width: 52%; height: 52%; }
/* halo je samostatná vrstva — drop-shadow priamo na skle rozmaže backdrop blur */
.zhoda-medailon::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    box-shadow: 0 0 26px -6px var(--mesiac-ziara);
    pointer-events: none;
}
.zhoda-karta:hover .zhoda-medailon { border-color: var(--akcent); }
/* Vodoznak v rohu karty — ako .glyf-pozadie na dennej stránke, len nižšie.
   Na dennej stránke stojí v prázdnom rohu, tu leží pod textom: preto bez
   drop-shadow žiary (hmlila by písmo) a s nižšou krytosťou. */
.zhoda-karta .glyf-pozadie {
    top: auto;
    bottom: -16px;
    right: -14px;
    width: 104px;
    height: 104px;
    opacity: 0.1;
    filter: none;
}
.zhoda-karta .glyf-pozadie .znamenie-glyf { display: block; width: 100%; height: 100%; }

.zhoda-meno {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--pismo-nadpis);
    font-size: 1.12rem;
    font-weight: 550;
    color: var(--atrament);
    line-height: 1.25;
}
.zhoda-datum { display: block; font-size: 0.82rem; color: var(--tlmena); margin-top: 0.15rem; white-space: nowrap; }
.zivel-stitok {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.18rem 0.62rem;
    border-radius: 999px;
    border: 1px solid var(--akcent-linka);
    color: var(--akcent);
    background: var(--akcent-jemny);
}
.zivel-stitok .zivel-glyf { width: 1.15em; height: 1.15em; color: currentColor; }
.zhoda-motto {
    margin: 0.9rem 0 0;
    font-family: var(--pismo-nadpis);
    font-size: 1.02rem;
    color: var(--akcent);
}
.zhoda-karta dl { margin: 0.9rem 0 0; text-align: left; }
.zhoda-karta dt {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tlmena);
    margin-top: 0.75rem;
}
.zhoda-karta dd { margin: 0.18rem 0 0; font-size: 0.92rem; }

/* --- Kalkulačka narodenia: portrét jedného znamenia ----------------
   Jedna osoba má celú šírku, takže medailón stojí vedľa identity a fakty
   idú pod tým do dvoch stĺpcov. Tokeny a medailón sú spoločné s kartami
   dvojice vyššie — mení sa len smer kompozície. */
.znamenie-portret {
    --medailon: clamp(96px, 22vw, 132px);
    position: relative;
    overflow: hidden;
    margin: 0.2rem 0 1.4rem;
    background: var(--karta-bg);
    border: 1px solid var(--karta-linka);
    border-radius: 18px;
    padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.2rem, 3.5vw, 1.9rem);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--tien-karty);
    animation: zhoda-zjav 0.7s ease-out both;
}
.portret-hlava { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.7rem); }
.portret-hlava .zhoda-medailon { margin: 0; animation: zhoda-plava 7s ease-in-out infinite; }
.portret-identita { min-width: 0; }
.portret-identita .zhoda-meno { margin-top: 0; font-size: clamp(1.35rem, 4vw, 1.65rem); }
.portret-identita .zhoda-motto { margin-top: 0.55rem; }
.znamenie-portret .glyf-pozadie {
    top: auto;
    bottom: -30px;
    right: -26px;
    width: 124px;
    height: 124px;
    opacity: 0.09;
    filter: none;
}
.znamenie-portret .glyf-pozadie .znamenie-glyf { display: block; width: 100%; height: 100%; }
.znamenie-portret:hover .zhoda-medailon { border-color: var(--akcent); }

.portret-fakty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem clamp(1.2rem, 4vw, 2.2rem);
    margin: 1.25rem 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--linka);
}
.portret-fakty > div { margin: 0; min-width: 0; }
.portret-fakty dt {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tlmena);
}
.portret-fakty dd { margin: 0.2rem 0 0; font-size: 0.94rem; }

/* výhrada o hraničnom dni — pri dvojici spoločná pre oboch, preto pod kartami raz */
.zhoda-pozn {
    border-left: 2px solid var(--akcent-linka);
    padding-left: 0.9rem;
    margin: 0 0 1.4rem;
    font-size: 0.88rem;
    color: var(--tlmena);
}

/* príchod výsledku po odoslaní formulára + tiché plávanie medailónov v protifáze */
@keyframes zhoda-zjav { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes zhoda-plava { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes zhoda-halo { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.zhoda-karta { animation: zhoda-zjav 0.7s ease-out both; }
.zhoda-karta:nth-of-type(2) { animation-delay: 0.12s; }
.zhoda-karta .zhoda-medailon { animation: zhoda-plava 7s ease-in-out infinite; }
.zhoda-karta:nth-of-type(2) .zhoda-medailon { animation-delay: -3.5s; }
.zhoda-medailon::after { animation: zhoda-halo 6s ease-in-out infinite; }
.zhoda-karta:nth-of-type(2) .zhoda-medailon::after { animation-delay: -3s; }

/* zlatý líniový glyf sekcie výsledku (láska, rodina, práca, celková zhoda) */
.sekcia-glyf { display: inline-block; flex-shrink: 0; width: 1.05em; height: 1.05em; color: var(--akcent); vertical-align: -0.14em; }
.sekcia-glyf svg { display: block; width: 100%; height: 100%; }
.vysledok h3 { display: flex; align-items: center; gap: 0.5rem; }
.vysledok h3 .sekcia-glyf { width: 1.3em; height: 1.3em; }

@media (max-width: 620px) {
    .zhoda-karty { grid-template-columns: 1fr; }
    .portret-fakty { grid-template-columns: 1fr; gap: 0.85rem; }
}
/* na úzkom mobile sa "Mesiac dňa 14. 3. 1988" lámal na dva riadky */
@media (max-width: 560px) { .zhoda-datum .datum-prefix { display: none; } }

/* --- Pätička: tichý záver nad oblohou -------------------------- */
.paticka {
    color: var(--tlmena);
    border-top: 1px solid var(--linka);
    margin-top: 2rem;
}
.paticka .obal { max-width: 1200px; }
.paticka-vnutro { padding-top: 1.8rem; padding-bottom: 1.8rem; text-align: center; }
.paticka-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    color: var(--atrament);
    margin-bottom: 0.9rem;
}
.paticka-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 1.2rem;
    font-size: 0.85rem;
    margin-bottom: 0.9rem;
}
.paticka-menu a { color: var(--tlmena); text-decoration: none; }
.paticka-menu a:hover { color: var(--akcent); }
.paticka-copy { font-size: 0.8rem; margin: 0; }

/* --- Články ----------------------------------------------------- */
article h2 { margin-top: 2rem; }
article img,
.stat img { max-width: 100%; height: auto; border-radius: 12px; }
/* Redakčná stať pod kalkulačkou / hubom (content/sekcie/*.md). Rovnaká sadzba
   ako telo článku, len bez vlastného rámu — je to pokračovanie stránky. */
.stat > h2 { margin-top: 2rem; }
.stat > h2:first-child { margin-top: 0; }

.citajte-dalej { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--linka); }
.citajte-dalej h2 { margin-top: 0; }

/* --- Reklama ------------------------------------------------------
   Blok pre manuálnu AdSense jednotku v obsahu. `min-height` drží miesto,
   kým sa jednotka načíta, aby nepodskočil text pod ňou (CLS). Cena za to je,
   že pri neobsadenej reklame — typicky keď návštevník odmietne súhlas v CMP —
   ostane prázdne miesto; ak by prekážalo, stačí `min-height` zmazať a jednotka
   sa zbalí na nulu. Rám ani pozadie zámerne žiadne: reklama sa nemá tváriť
   ako redakčná karta.                                                        */
.reklama {
    /* Ziadne `auto` po stranach: v .denne-karty (flex column) by auto margin v priecnej
       osi vypol stretch a blok by spadol na nulovu sirku, lebo <ins> vlastnu sirku nema.
       Centruje sa obsahom cez text-align. */
    margin: 2.4rem 0;
    min-height: 250px;
    text-align: center;
}

/* --- Chybová stránka -------------------------------------------- */
.stratene { text-align: center; padding: 2.5rem 1rem; }
.stratene .mesiac-svg { margin: 0 auto 1rem; }

/* --- Responzivita ------------------------------------------------ */
@media (max-width: 720px) {
    .karty-dvojica { grid-template-columns: 1fr; }

    /* mobilne menu: brand vlavo, prepinac + hamburger vpravo, menu zbalene pod nimi */
    html.js .hamburger { display: inline-flex; }
    html.js .hlavicka-vnutro { column-gap: 0.4rem; }
    html.js .prepinac { margin-left: auto; }
    html.js .menu {
        order: 5;
        flex-basis: 100%;
        flex-direction: column;
        flex-wrap: nowrap; /* pocas max-height animacie by wrap lamal stlpec do stran */
        align-items: center;
        gap: 0.15rem;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
    }
    html.js .menu.menu-otvorene {
        max-height: 460px;
        opacity: 1;
        transform: none;
        padding: 0.5rem 0 0.3rem;
    }
    html.js .menu a { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
}

@media (max-width: 640px) {
    .hero { flex-direction: column-reverse; text-align: center; }
    .hero-text { width: 100%; }
    .stitky, .hero-akcie { justify-content: center; }
    .hero-mesiac .mesiac-svg { width: 130px; height: 130px; }
    .hero-denna .mesiac-svg { width: 160px; height: 160px; }
    /* stranky vedla seba, "dnes" pilulka pod nimi (poradie len vizualne) */
    .strankovanie a.strankovanie-stred { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}