/* ============================================================
   site-custom.css – vlastní vzhled webu bez šablony (J3, v2 po revizi)
   ------------------------------------------------------------
   Načítá ho jen „Klasický web“ (client/layout.php) – one-page šablony
   mají vlastní vzhled (WebTheme::isOnePage) a tento soubor nedostanou.

   Zásady (oprava nalezené revize 2026-09-26):
   1. VÝCHOZÍ HODNOTY (inter/standard/center/pilulka…) zde NEMAJÍ žádná
      pravidla. Web bez uložených voleb i web s výchozími volbami se
      renderuje přesně jako před nasazením – na desktopu i mobilu
      (žádné pravidlo nemůže přebít mobilní pravidla client.css).
   2. Velikost písma škáluje kořenovou rem bázi (html), nikoli jen body –
      veškeré rem/clamp velikosti (nadpisy, běžný text, popisky, tlačítka)
      se změní ve stejném poměru.
   3. Šířka obsahu cílí na .container:not(.container--narrow) – úzké čtecí
      sloupce (blog, články) si svých 860 px drží ve všech variantách.
   4. Systémové písmo přepisuje proměnnou --font (pokrýje i prvky
      s font-family: var(--font)) a layout pro tuto variantu vůbec
      nestahuje Google Fonts.

   Barvy mění jen volby Stylu úvodu; ostatní volby barvy nemění.
   Jediný pohyb je volba „Reakce na myš“ (data-site-motion):
   jemné zvednutí a záře jsou jen v prefers-reduced-motion: no-preference,
   klidná varianta pohyb při najetí myší naopak vypíná.
   ============================================================ */

/* ---- Písmo webu (data-site-font) ---- */
/* Elegantní nadpisy: patkové nadpisy v hlavním obsahu; běžný text zůstává Inter. */
html[data-site-font="playfair"] .site-main h1,
html[data-site-font="playfair"] .site-main h2,
html[data-site-font="playfair"] .site-main h3,
html[data-site-font="playfair"] .site-main h4,
html[data-site-font="playfair"] .site-main h5,
html[data-site-font="playfair"] .site-main h6,
html[data-site-font="playfair"] .site-main .section-title,
html[data-site-font="playfair"] .site-main .hero-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    letter-spacing: 0;
}

/* Systémové písmo: jedna proměnná přepne celý web (body i prvky s var(--font));
   Google Fonts se v této variantě nestahují (podmínka v client/layout.php). */
html[data-site-font="system"] {
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Velikost písma (data-site-scale) ----
   1) Škáluje kořenovou rem bázi: 15 px ≈ −6 %, 17.25 px ≈ +8 % oproti
      16 px z client.css. Běžný text, popisky, labely i tlačítka (rem) tak
      rostou/klesají ve stejném poměru. Výchozí „standard“ nemá pravidlo.
   2) Hlavní nadpisy mají clamp s vw uprostřed – změna rem báze je sama
      o sobě nezmění (ve středu rozsahu vyhrává vw člen). Proto se
      přepisují na ekvivalent s px mezemi (původní rem @16 px) a celý
      výsledek se násobí týmž poměrem jako rem báze – škáluje pak přesně
      na jakékoli šířce obrazovky. Pokryté hlavní nadpisy klasického webu:
      hero, titulky sekcí, O mně, Kontakt, Blog, karty „S čím pomohu“,
      pás Čísel. Dekorativní komponenty s vlastním vw (rotující text apod.)
      svou velikost ponechávají. */
html[data-site-scale="kompaktni"] { font-size: 15px; }
html[data-site-scale="velke"]     { font-size: 17.25px; }

html[data-site-scale="kompaktni"] .hero-title        { font-size: calc(clamp(36px, 5vw, 64px) * 0.9375); }
html[data-site-scale="kompaktni"] .section-title     { font-size: calc(clamp(28px, 3vw, 40px) * 0.9375); }
html[data-site-scale="kompaktni"] .about-content h2  { font-size: calc(clamp(28px, 3.5vw, 42px) * 0.9375); }
html[data-site-scale="kompaktni"] .contact-info h2   { font-size: calc(clamp(28px, 3vw, 40px) * 0.9375); }
html[data-site-scale="kompaktni"] .blog-article-title{ font-size: calc(clamp(30px, 4vw, 48px) * 0.9375); }
html[data-site-scale="kompaktni"] .pomoci-title      { font-size: calc(clamp(24px, 3vw, 35.2px) * 0.9375); }
html[data-site-scale="kompaktni"] .home-stats__value { font-size: calc(clamp(32px, 4.4vw, 46.4px) * 0.9375); }

html[data-site-scale="velke"] .hero-title        { font-size: calc(clamp(36px, 5vw, 64px) * 1.078125); }
html[data-site-scale="velke"] .section-title     { font-size: calc(clamp(28px, 3vw, 40px) * 1.078125); }
html[data-site-scale="velke"] .about-content h2  { font-size: calc(clamp(28px, 3.5vw, 42px) * 1.078125); }
html[data-site-scale="velke"] .contact-info h2   { font-size: calc(clamp(28px, 3vw, 40px) * 1.078125); }
html[data-site-scale="velke"] .blog-article-title{ font-size: calc(clamp(30px, 4vw, 48px) * 1.078125); }
html[data-site-scale="velke"] .pomoci-title      { font-size: calc(clamp(24px, 3vw, 35.2px) * 1.078125); }
html[data-site-scale="velke"] .home-stats__value { font-size: calc(clamp(32px, 4.4vw, 46.4px) * 1.078125); }

/* Mobilní přepisy velikostí (jinde v client.css) dostanou stejnou úpravu. */
@media (max-width: 768px) {
    html[data-site-scale="kompaktni"] .hero-title { font-size: calc(clamp(32px, 11vw, 48px) * 0.9375); }
    html[data-site-scale="velke"] .hero-title     { font-size: calc(clamp(32px, 11vw, 48px) * 1.078125); }
    html[data-site-scale="kompaktni"] .about-content h2 { font-size: calc(clamp(30.4px, 4.5vw, 50px) * 0.9375); }
    html[data-site-scale="velke"] .about-content h2     { font-size: calc(clamp(30.4px, 4.5vw, 50px) * 1.078125); }
}

/* ---- Šířka obsahu (data-site-width) ----
   Standard nemá pravidlo (1200 px z client.css). Volba platí jen na desktopu
   (≥ 769 px) – na mobilu client.css nastavuje .container max-width:100 %,
   které těmto pravidlům záměrně nepřekáží (web je tam vždy přes celou šířku). */
@media (min-width: 769px) {
    html[data-site-width="uzka"]   .container:not(.container--narrow) { max-width: 1070px; }
    html[data-site-width="siroka"] .container:not(.container--narrow) { max-width: 1380px; }
    /* Úzký čtecí sloupec (blogový text apod.) si svoji šířku drží ve všech variantách. */
    html[data-site-width] .container--narrow { max-width: 860px; }
}

/* ---- Mezery mezi sekcemi (data-site-space) ----
   Standard nemá pravidlo (6.5rem z client.css platí i na mobilu, jako dřív).
   Na mobilu se zvětšené/zmenšené mezery přiměřeně squashnou. */
html[data-site-space="huste"]   .section { padding: 4.75rem 0; }
html[data-site-space="vzdusne"] .section { padding: 8.5rem 0; }
@media (max-width: 768px) {
    html[data-site-space="huste"]   .section { padding: 3rem 0; }
    html[data-site-space="vzdusne"] .section { padding: 4.5rem 0; }
}

/* ---- Tvar tlačítek (data-site-btn) ----
   Pilulka (výchozí) nemá pravidlo – var(--r-full) z client.css. */
html[data-site-btn="zaoblene"] .btn { border-radius: 12px; }
html[data-site-btn="hranate"]  .btn { border-radius: 2px; }

/* ---- Zarovnání úvodu (data-site-hero) ----
   Na střed (výchozí) nemá pravidlo – původní centrovaný hero z client.css. */
html[data-site-hero="left"] .hero-inner { justify-items: start; }
html[data-site-hero="left"] .hero-text,
html[data-site-hero="left"] .hero-content-section .hero-text {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
html[data-site-hero="left"] .hero-logo-wrap,
html[data-site-hero="left"] .hero-home-photo-wrap,
html[data-site-hero="left"] .hero-cta { justify-content: flex-start; }

/* ============================================================
   GLM-14 — další volby vlastního webu bez šablony
   ------------------------------------------------------------
   Pokračování stejných zásad jako výše: VÝCHOZÍ HODNOTY nemají
   žádná pravidla (web se renderuje jako dřív), každá nevýchozí
   volba má reálné pravidlo, nic nerozbíjí světlý/tmavý režim.

   Barevné schéma (data-site-palette) zde úmyslně není: pravidla
   generuje PHP (SiteCustomization::paletteCss) přímo v <head> z
   jediné definice palet, kterou používá i editor pro náhledy –
   barvy tedy nemohou rozjet mezi CSS a náhledem.
   ============================================================ */

/* ---- Typografické dvojice (data-site-font, pokračování) ---- */
/* Teplé charakterní nadpisy: řezané Fraunces v hlavním obsahu,
   běžný text zůstává Inter. Google Fonts načte layout.php jen
   pro tuto variantu (SiteCustomization::fontsHref). */
html[data-site-font="fraunces"] .site-main h1,
html[data-site-font="fraunces"] .site-main h2,
html[data-site-font="fraunces"] .site-main h3,
html[data-site-font="fraunces"] .site-main h4,
html[data-site-font="fraunces"] .site-main h5,
html[data-site-font="fraunces"] .site-main h6,
html[data-site-font="fraunces"] .site-main .section-title,
html[data-site-font="fraunces"] .site-main .hero-title {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    letter-spacing: 0;
}

/* Editorská dvojice: patkové Source Serif 4 nadpisy + DM Sans text.
   Proměnná --font přepne celý běžný text (stejný mechanismus jako
   u systémového písma), nadpisy dostanou vlastní rodinu. */
html[data-site-font="dserif"] {
    --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[data-site-font="dserif"] .site-main h1,
html[data-site-font="dserif"] .site-main h2,
html[data-site-font="dserif"] .site-main h3,
html[data-site-font="dserif"] .site-main h4,
html[data-site-font="dserif"] .site-main h5,
html[data-site-font="dserif"] .site-main h6,
html[data-site-font="dserif"] .site-main .section-title,
html[data-site-font="dserif"] .site-main .hero-title {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    letter-spacing: 0;
}

/* ---- Výška úvodu (data-site-hero-size) ----
   Plná obrazovka (výchozí) nemá pravidlo – min-height z client.css.
   Kompaktní úvod ruší výšku přes celou obrazovku a zmenšuje odsazení;
   na mobilu hero stejně nemá pevnou výšku, jen se zmenší mezery. */
html[data-site-hero-size="kompaktni"] .hero {
    min-height: 0;
    padding: 3.5rem 0 4.25rem;
}
html[data-site-hero-size="kompaktni"] .hero-content-section {
    padding: 3.5rem 0 4.25rem;
}
@media (max-width: 768px) {
    html[data-site-hero-size="kompaktni"] .hero              { padding: 2.25rem 0 3rem; }
    html[data-site-hero-size="kompaktni"] .hero-content-section { padding: 2.25rem 0 3rem; }
}

/* ---- Styl úvodu (data-site-hero-style) ----
   Standard (výchozí) nemá pravidlo. Všechna pravidla cílí jen na samostatný
   úvod bez videa (section.hero:not(.hero--has-video)); úvod pod videem,
   3D úvodem či vstupním videem má třídu .hero-content-section a nemění se.
   Pozor: ve světlém režimu je úvod světlý s tmavým textem (client.css),
   v tmavém režimu tmavý s bílým textem – karta proto má dvě podoby panelu
   a barevný pruh text výslovně přebarvuje na bílý v obou režimech. */

/* Text v kartě: poloprůhledný panel kolem jména, textu a tlačítek. */
html[data-site-hero-style="karta"] section.hero:not(.hero--has-video) .hero-text {
    box-sizing: border-box;
    max-width: 100%;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
html[data-theme="dark"][data-site-hero-style="karta"] section.hero:not(.hero--has-video) .hero-text {
    background: rgba(15, 23, 42, .45);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

/* Barevný pruh: přechod barev poradce ztmavený k #0f172a, aby bílý text
   držel kontrast i u světlých vlastních barev. !important jako .hero v client.css. */
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 72%, #0f172a),
        color-mix(in srgb, var(--color-secondary) 60%, #0f172a)) !important;
}
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video)::before {
    display: none;
}
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) .hero-title,
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) .hero-eyebrow,
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) .hero-location,
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) .hero-bio {
    color: #fff;
}
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) .hero-title {
    text-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) .hero-eyebrow {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
}
html[data-site-hero-style="pruh"] section.hero:not(.hero--has-video) .btn-outline-white {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .08);
}

/* Text a fotka vedle sebe: jen s fotkou (.hero--split), jen nad 900 px.
   Pod 900 px platí mobilní skládání z client.css. */
@media (min-width: 901px) {
    html[data-site-hero-style="deleny"] section.hero.hero--split:not(.hero--has-video) .hero-inner--split {
        grid-template-columns: 1fr 1fr;
    }
    html[data-site-hero-style="deleny"] section.hero.hero--split:not(.hero--has-video) .hero-photo-side {
        border-left: 1px solid rgba(15, 23, 42, .15);
        padding-left: clamp(2rem, 4vw, 3.5rem);
    }
    html[data-theme="dark"][data-site-hero-style="deleny"] section.hero.hero--split:not(.hero--has-video) .hero-photo-side {
        border-left-color: rgba(255, 255, 255, .18);
    }
}

@media (max-width: 768px) {
    html[data-site-hero-style="karta"] section.hero:not(.hero--has-video) .hero-text {
        padding: 1.25rem 1.1rem;
        border-radius: 1.25rem;
        overflow-wrap: anywhere;
    }
}

/* ---- Výška horní lišty (data-site-nav) ----
   Standard nemá pravidlo ( --nav-h: 70px z client.css). Kompaktní
   lišta zmenší výšku hlavičky i logo; cílíme jen na klasickou
   navigaci (site-header), pill/mega/bottom si drží vlastní rozměry.
   Výška úvodu je počítaná od --nav-h, takže zůstává konzistentní. */
html[data-site-nav="kompaktni"] { --nav-h: 56px; }
html[data-site-nav="kompaktni"] .site-header .site-logo { min-height: 36px; }
html[data-site-nav="kompaktni"] .site-header .logo-img  { max-height: 36px; }
html[data-site-nav="kompaktni"] .site-header .logo-text { font-size: 1rem; }
html[data-site-nav="kompaktni"] .site-header .nav-link  { padding: .375rem .75rem; font-size: .875rem; }

/* ---- Pořadí sekcí (data-site-sections) a registrační blok
   (data-site-footer-legal) řeší přímo PHP renderer
   (client/pages/uvod.php, client/layout.php) – atributy na <html>
   slouží jen jako průhledná značka uloženého nastavení. ---- */

/* ---- Reakce na myš (data-site-motion) ----
   Standard nemá žádné pravidlo (hover z client.css zůstává beze změny).
   Jemné zvednutí a záře jsou v prefers-reduced-motion: no-preference,
   takže je návštěvník s omezením animací nevidí. Klidná varianta pohyb
   jen ruší, proto platí vždy. Měníme jen posun a stín, ne barvu textu
   ani pozadí. Selektory jsou vyšší než hover v client.css (včetně
   .pomoci-grid[data-cards-reveal].is-revealed). :not(:active) zachová
   stisk tlačítka. */
@media (prefers-reduced-motion: no-preference) {
    /* Jemně: karta o 2 px, tlačítko o 1 px, pomalejší přechod, měkčí stín */
    html[data-site-motion="jemne"] .btn:hover:not(:active) {
        transform: translateY(-1px);
        transition-duration: .35s;
    }
    html[data-site-motion="jemne"] .pomoci-clean-card:hover,
    html[data-site-motion="jemne"] .pomoci-clean-card--highlight:hover,
    html[data-site-motion="jemne"] .pomoci-grid[data-cards-reveal].is-revealed .pomoci-clean-card:hover,
    html[data-site-motion="jemne"] .pomoci-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 16%, transparent);
        transition-duration: .35s;
    }

    /* Záře: bez zvednutí, jemná záře v primární barvě */
    html[data-site-motion="zare"] .btn:hover:not(:active) {
        transform: none;
    }
    html[data-site-motion="zare"] .pomoci-clean-card:hover,
    html[data-site-motion="zare"] .pomoci-clean-card--highlight:hover,
    html[data-site-motion="zare"] .pomoci-grid[data-cards-reveal].is-revealed .pomoci-clean-card:hover,
    html[data-site-motion="zare"] .pomoci-card:hover {
        transform: none;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent),
                    0 0 26px color-mix(in srgb, var(--color-primary) 35%, transparent);
    }
    /* Primární tlačítko: paleta mu dává box-shadow s !important, proto také tady */
    html[data-site-motion="zare"] .btn.btn-primary:hover {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent),
                    0 0 22px color-mix(in srgb, var(--color-primary) 55%, transparent) !important;
    }
    html[data-site-motion="zare"] .btn:not(.btn-primary):hover {
        box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 35%, transparent);
    }
}

/* Klidně: žádný pohyb při najetí, zůstává jen změna barvy nebo okraje */
html[data-site-motion="klidne"] .btn:hover:not(:active),
html[data-site-motion="klidne"] .pomoci-clean-card:hover,
html[data-site-motion="klidne"] .pomoci-clean-card--highlight:hover,
html[data-site-motion="klidne"] .pomoci-grid[data-cards-reveal].is-revealed .pomoci-clean-card:hover,
html[data-site-motion="klidne"] .pomoci-card:hover {
    transform: none;
}
html[data-site-motion="klidne"] .pomoci-card:hover .pomoci-card-bg-img,
html[data-site-motion="klidne"] .pomoci-card:hover .pomoci-card-link {
    transform: none;
}