/* ═══════════════════════════════════════════════════════════════════════════
   Tmavý režim — jediné místo, kde je celé tmavé schéma webu.

   Proč jeden sdílený soubor a ne @media v každé stránce:
   stránky vznikaly postupně a proměnné se v nich jmenují různě
   (--border2 vs --border-2, child-safety.html má vlastní --a/--t/--card).
   Kdyby se tmavý režim dopisoval do každé zvlášť, jedna zapomenutá
   napevno zadaná barva vyrobí bílou navigaci na tmavé stránce.

   Aktivace: <html data-theme="dark"> nastaví js/theme.js.
   Bez JS zůstane web světlý — to je stav před touto změnou, ne regrese.
   Cíleně se NEPOUŽÍVÁ @media (prefers-color-scheme) jako druhý zdroj pravdy;
   dva nezávislé spínače by se rozešly a uživatel by přepínačem nedokázal
   systémové nastavení přebít.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Základní plochy */
    --bg:      #0d0d15;
    --bg-2:    #14141f;
    --bg2:     #14141f;   /* child-safety.html */
    --bg-3:    #1f1f2e;
    --bg3:     #262637;   /* child-safety.html */
    --bg-card: #1a1a28;
    --card:    rgba(255,255,255,.045);

    /* Linky */
    --border:   #262637;
    --border2:  #33334a;
    --border-2: #33334a;
    --cb:       rgba(255,255,255,.13);

    /* Text — hodnoty vybrané tak, aby i nejtišší odstín (--text-m) držel
       kontrast nad 4.5:1 proti --bg i --bg-card. */
    --text:   #f0f0f5;
    --text-2: #a8a8c0;
    --text-m: #8b8ba5;
    --t:      #f0f0f5;    /* child-safety.html */
    --t2:     #a8a8c0;
    --t3:     #8b8ba5;

    /* Akcenty — značka zůstává, jen o něco svítivější, aby na tmavém
       podkladu nezhasla. */
    --accent:  #22b1f2;
    --accent2: #4d7fff;
    --a:       #22b1f2;   /* child-safety.html */
    --a2:      #00cde4;
    --glow:    rgba(34,177,242,.35);
    --shadow:  0 4px 24px rgba(0,0,0,.5);
}

/* ── Navigace ────────────────────────────────────────────────────────────
   Vzhled sdílené navigace (světlý i tmavý) je v css/nav.css. Dřívější pravidla
   pro holé <nav> tady byla schválně odstraněna, aby neobarvovala jiné <nav>
   (např. „Kam dál“ na 404.php). */

html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Přepínač motivu ─────────────────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    margin-left: auto; margin-right: .3rem;
    background: none; border: none; border-radius: 8px;
    color: var(--text, #0d1b2a); cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(0,0,0,.06); }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.09); }
.theme-toggle svg   { width: 19px; height: 19px; display: block; }
/* Slunce v tmavém režimu, měsíc ve světlém — ikona ukazuje, kam přepnutí vede. */
.theme-toggle .icon-sun  { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Stránky bez navigace — plovoucí v rohu. */
.theme-toggle.floating {
    position: fixed; top: 14px; right: 14px; z-index: 300;
    margin: 0; background: var(--bg-card); border: 1px solid var(--border);
}

/* ── index.php ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .hero::before {
    background-image: radial-gradient(circle, rgba(140,190,255,.07) 1px, transparent 1px);
}
html[data-theme="dark"] .hero::after {
    background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 35%, var(--bg) 100%);
}
html[data-theme="dark"] .hero-title {
    background: linear-gradient(135deg, #eaf6ff 0%, #4db8ff 55%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 55px rgba(34,177,242,.35));
}
html[data-theme="dark"] .hero-orb-1 { background: rgba(0,140,255,.20); }
html[data-theme="dark"] .hero-orb-2 { background: rgba(0,210,255,.15); }
html[data-theme="dark"] .hero-orb-3 { background: rgba(90,110,255,.14); }
html[data-theme="dark"] .hero-stats {
    background: var(--bg-card);
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
html[data-theme="dark"] .btn-primary       { box-shadow: 0 6px 24px rgba(34,177,242,.28); }
html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 10px 36px rgba(34,177,242,.42); }
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] .btn-confirm { color: #04121c; }
html[data-theme="dark"] .btn-ghost         { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .btn-ghost:hover   { background: rgba(255,255,255,.09); }
html[data-theme="dark"] .btn-locked,
html[data-theme="dark"] .cta-locked        { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .roadmap-item,
html[data-theme="dark"] .cl-item           { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .support-card:hover { background: #20202f; }
html[data-theme="dark"] .form-control       { background: var(--bg-2); }
html[data-theme="dark"] .alert-error {
    background: rgba(255,90,90,.10);
    border-color: rgba(255,90,90,.35);
    color: #ff9b9b;
}

/* Štítky na news.php — tmavé odstíny ze světlého režimu by na tmavé
   stránce zhasly. */
html[data-theme="dark"] .badge-update,
html[data-theme="dark"] .badge-announcement { color: var(--accent); }
html[data-theme="dark"] .badge-feature      { color: #45d67f; }
html[data-theme="dark"] .badge-fix          { color: #f0c060; }
html[data-theme="dark"] .badge-important    { color: #ff9b9b; }
html[data-theme="dark"] .badge-maintenance  { color: #b98cff; }

/* ── privacy-policy.php / delete-account.php ─────────────────────────────── */
html[data-theme="dark"] .info-box.info { color: #7fd2f5; }
html[data-theme="dark"] .last-updated  { background: rgba(255,255,255,.05); }
/* .info-box.warning je na každé stránce jiná (jantar v zásadách, červená
   u mazání účtu), řeší se proto v té stránce. */

/* ── shop.php ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .modal-error { color: #ff8a8a; }
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-card  { box-shadow: 0 24px 80px rgba(0,0,0,.65); }

/* ── Fokus ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] summary:focus-visible { outline-color: var(--accent); }

/* Přechod jen na plochách, ne na všem — jinak se rozjede i animace v hero. */
body, .dn-top, .feature-card, .support-card,
.roadmap-col, .about-val, .beta-card, .form-control, footer {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    body, .dn-top, .feature-card, .support-card,
    .roadmap-col, .about-val, .beta-card, .form-control, footer { transition: none; }
}

/* ── Přístupnost napříč stránkami ─────────────────────────────────────────
   Odkaz pro klávesnici — schovaný, dokud na něj nepřijde fokus. Bez něj musí
   uživatel klávesnice proklikat celou navigaci na každé stránce, než se
   dostane k obsahu. index.php má vlastní kopii ve svém <style>, ostatní
   stránky ji berou odsud. */
.skip-link {
    position: absolute; left: 50%; top: 0;
    transform: translate(-50%, -150%);
    z-index: 999;
    background: var(--accent, #00a2e8); color: #fff;
    padding: .7rem 1.4rem; border-radius: 0 0 10px 10px;
    font-size: .9rem; font-weight: 700; text-decoration: none;
    transition: transform .18s;
}
.skip-link:focus { transform: translate(-50%, 0); }
html[data-theme="dark"] .skip-link { color: #04121c; }

/* Viditelný fokus pro ovládání klávesnicí. */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accent, #00a2e8);
    outline-offset: 3px;
}
/* Cíl skip linku dostane fokus programově — orámovat ho nemá smysl. */
[id="obsah"]:focus { outline: none; }

/* ── Utility třídy — nahrazují bývalé inline style="…" atributy.
   Kvůli CSP bez 'unsafe-inline' nesmí ve stránkách zůstat žádný inline styl.
   !important drží stejnou prioritu, jakou měl inline styl. ── */
.u-logo-glow { height:96px !important; width:96px !important; margin-bottom:1.2rem !important; filter:drop-shadow(0 0 40px rgba(0,220,255,.35)) !important; }
.u-tiny { font-size:11px !important; opacity:.75 !important; font-weight:500 !important; }
.is-locked-hard { opacity:.45 !important; cursor:not-allowed !important; pointer-events:none !important; }
.u-text-sep { color:var(--text) !important; margin:0 .25rem !important; }
.u-flex-between { display:flex !important; justify-content:space-between !important; }
.u-w-100 { width:100% !important; }
.u-w-70 { width:70% !important; }
.u-w-25 { width:25% !important; }
.u-w-45 { width:45% !important; }
.u-box { margin-top:2rem !important; padding:1.5rem !important; background:var(--bg-card) !important; border:1px solid var(--border2) !important; border-radius:14px !important; }
.u-kicker { font-size:.72rem !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--accent) !important; margin-bottom:.8rem !important; }
.u-note { font-size:.88rem !important; color:var(--text-2) !important; margin-bottom:.5rem !important; }
.u-link-accent { color:var(--accent) !important; font-size:.9rem !important; font-weight:600 !important; text-decoration:none !important; }
.u-offscreen { position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
.is-locked { opacity:.45 !important; cursor:not-allowed !important; }
.u-narrow { max-width:480px !important; margin:0 auto !important; text-align:center !important; }
.u-card-pad { background:var(--bg-card) !important; border:1px solid var(--border2) !important; border-radius:18px !important; padding:2.5rem 2rem !important; }
.u-icon-badge { width:52px !important; height:52px !important; border-radius:50% !important; background:rgba(0,180,255,.1) !important; border:1px solid rgba(0,180,255,.2) !important; color:var(--accent) !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 auto 1.2rem !important; }
.u-lead { color:var(--text-2) !important; font-size:.92rem !important; line-height:1.7 !important; margin-bottom:1.4rem !important; }
.u-inline-flex { display:inline-flex !important; }
.u-mt { margin-top:1.2rem !important; }
.u-row-center { flex-direction:row !important; align-items:center !important; gap:.6rem !important; }
.u-icon-28 { height:28px !important; width:28px !important; }
.u-flex-col { display:flex !important; flex-direction:column !important; }
.u-center { text-align:center !important; }
.u-brand { font-size:.95rem !important; font-weight:900 !important; }
.u-eyebrow { font-size:.65rem !important; font-weight:500 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--accent) !important; }
.u-empty-icon { font-size:2.5rem !important; margin-bottom:1rem !important; opacity:.4 !important; }
.u-empty-title { font-weight:700 !important; font-size:1.1rem !important; margin-bottom:.5rem !important; }
.u-icon-tile { width:52px !important; height:52px !important; border-radius:16px !important; background:rgba(0,137,208,.15) !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 auto 16px !important; }
