/* =========================================================
   Naše Kolovraty – volební web
   Designové tokeny: barvy, typografie, rozměry
   Uprav hodnoty tady, projeví se na celém webu.
   ========================================================= */

:root {
  /* --- Barvy značky --- */
  --green:        #8bc34a;   /* základní barva */
  --green-600:    #7cb342;   /* tmavší odstín pro hover ploch */
  --green-ink:    #33691e;   /* zelená použitelná na text (kontrast na bílé ~7:1) */
  --green-dark:   #142c0a;   /* tmavá zeleň – hero gradient, překryvy nad fotkou */
  --green-ink-hero: #14300a; /* nadpisy na zelené ploše / na světlé části fotky (AA na #8bc34a) */
  --green-ink-body: #1f4310; /* běžný text na zelené ploše (AA na #8bc34a) */
  --green-panel:  #8bc34a;   /* plný zelený panel v hero + celoplošné sekce */
  --pink:         #ce0f68;   /* doplňková barva – akcenty, hlavní CTA */
  --pink-700:     #a50c53;   /* pink hover */

  /* --- Neutrální --- */
  --white:        #ffffff;
  --bg:           #ffffff;
  --bg-soft:      #f4f7ee;   /* jemný zelený nádech pro pásy sekcí */
  --ink:          #1a1a1a;   /* hlavní text */
  --muted:        #5b5b55;   /* vedlejší text */
  --line:         #e2e8d5;   /* linky, ohraničení */
  --ink-dark-bg:  #2b2f26;   /* tmavý pás patičky */

  /* --- Typografie --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, "Helvetica Neue", sans-serif;

  --fs-hero: clamp(2.2rem, 1.35rem + 3.8vw, 4rem);
  --fs-h1: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
  --fs-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-body: 1.6;

  /* --- Rozměry --- */
  /* Jedna společná šířka pro VŠECHNY sekce (.inner). Cílíme na fullscreen web,
     takže je záměrně velká – obsah drží jen boční okraj (--gutter). Barevné
     pásy jdou vždy od kraje ke kraji. Chceš užší/širší web? Uprav jen tohle. */
  --maxw: 1600px;
  --maxw-text: 82ch;       /* čitelná šířka – použij třídu .prose tam, kde je souvislý delší text */
  --gutter: clamp(1rem, 0.4rem + 4vw, 4rem);   /* boční okraj sekcí */
  --section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --pagehead-h: clamp(58svh, 40svh + 12vw, 72svh);  /* zelený hero pás vnitřních stránek */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);

  /* Kompaktní zelená lišta – na vnitřních stránkách i na úvodu po odscrollování
     hero fotky. V liště je jen cedule (logo-white.png), podtitul „s podporou…"
     žije v obsahu sekce, ne v hlavičce. */
  --header-h: clamp(78px, 8.5vw, 96px);
  --logo-h:   clamp(60px, 7vw, 80px);      /* výška vlastní cedule (průhledné okraje jsou oříznuté) */

  /* Úvodní stránka: vysoká průhledná lišta nad fotkou s velkou cedulí.
     Držíme ji spíš nižší, ať odkazy nezasahují do obličejů na fotce. */
  --header-h-hero: clamp(124px, 15vw, 168px);
  --logo-h-hero:   clamp(96px, 12vw, 138px);

  /* Průhledná plocha nad menu – menu tak sedí přesně u spodní hrany 1. obrazovky */
  --hero-lead-h: calc(100svh - var(--header-h-hero));

  /* --- Vodoznak pozadí odvozený z loga: obrys „cedule“ + nakloněné „naše“ + KOLOVRATY.
     Bílá kresba, na zelených plochách se používá s opacity ~.12 (viz main.css).
     Poměr 5:3 – ::before plochy mají aspect-ratio: 5 / 3. --- */
  --deco-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-8%20-14%20216%20142'%3E%3Crect%20x='8'%20y='26'%20width='184'%20height='84'%20rx='15'%20fill='none'%20stroke='%23ffffff'%20stroke-width='4'/%3E%3Crect%20x='15'%20y='33'%20width='170'%20height='70'%20rx='9'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'/%3E%3Ctext%20x='100'%20y='83'%20text-anchor='middle'%20fill='%23ffffff'%20font-family='Arial,sans-serif'%20font-weight='700'%20font-size='42'%20textLength='150'%20lengthAdjust='spacingAndGlyphs'%3EKOLOVRATY%3C/text%3E%3Ctext%20x='46'%20y='31'%20text-anchor='middle'%20fill='%23ffffff'%20font-style='italic'%20font-family='Georgia,serif'%20font-weight='700'%20font-size='40'%20transform='rotate(-12%2046%2026)'%3Ena%C5%A1e%3C/text%3E%3C/svg%3E");
}