/* =========================================================================
   Akcent „žlutá" — nad základní školní motiv (css/style.css)

   Žlutá přebírá roli, kterou má na stránce /skoly zelená: podkres sekcí
   a pásů, štítky sekcí, podklady ikon, dekorační skvrny a tlačítka.
   Text, nadpisy a odkazy zůstávají tmavě modrozelené — žlutá na světlém
   pozadí nemá pro text dost kontrastu, proto ho nikdy nenese.

   Tlačítka jsou žlutá plocha s tmavým textem (--ink na #f2c230 má
   kontrast 7.2:1), ne bílý text na žluté.

   Vrstva je samostatný soubor a váže se na třídu .accent-yellow
   (<body class="accent-yellow">). Nosí ji jen /o-nas-alt. Smazáním
   <link> se stránka vrátí do zelené.

   Načítá se až za style.css: selektory mají vyšší specificitu (třída
   na body), takže na pořadí tolik nezáleží, ale drží se stejné konvence.
   ========================================================================= */

/* ---------- 1. Tokeny ---------------------------------------------------- */

.accent-yellow {
  --cta:        #f2c230;   /* plné plochy CTA; text na nich je --ink */
  --cta-dark:   #e3b11c;   /* hover */
  --cta-line:   #ecd58a;   /* obrysy a rámečky ovládacích prvků */
  --cta-ink:    #8a6a00;   /* žlutá tam, kde musí být čitelná (ikony, podtržení) */

  /* Plochy — stejná hierarchie jako zelená u škol, jen v žluté. */
  --green-100:  #fbf0c4;   /* štítky sekcí, podklady ikon v hero */
  --green-800:  #6b5200;   /* text ve štítcích; kontrast 6.5:1 na #fbf0c4 */
  --bg-mint:    #fdfaee;   /* podkres sekce Co jsme zač */
  --band-green: #fcf5dc;   /* závěrečný pás s formulářem */

  --acc-green-bg: #fbefc0; /* ikony karet, které byly zelené */
  --acc-green:    #8a6a00;
}

/* ---------- 2. Tlačítka -------------------------------------------------- */

.accent-yellow .btn { background: var(--cta); color: var(--ink); }
.accent-yellow .btn:hover { background: var(--cta-dark); }

/* ---------- 3. Ovládací prvky -------------------------------------------- */

.accent-yellow .main-nav { --nav-active: var(--cta); }

.accent-yellow .field input:focus,
.accent-yellow .field textarea:focus {
  border-color: var(--cta-dark);
  box-shadow: 0 0 0 3px rgba(242, 194, 48, .22);
}
.accent-yellow .field input:hover,
.accent-yellow .field textarea:hover { border-color: var(--cta-line); }
.accent-yellow .form-foot .phone svg,
.accent-yellow .contact-links svg,
.accent-yellow .contact-avatar { color: var(--cta-ink); }

.accent-yellow .proof-logos a:hover { background: var(--band-green); }

/* ---------- 4. Dekorace -------------------------------------------------- */

.accent-yellow .deco-cta { color: #f6e3a1; }
/* ručně psaná poznámka i šipka drží stejnou tmavou žlutou */
.accent-yellow .cta-hand .hand { color: var(--cta-ink); }
.accent-yellow .cta-hand svg { stroke: var(--cta-ink); }

/* ---------- 5. Přesné tvary --------------------------------------------- */

/* Štítky a podklady ikon nejsou obkreslené rukou: štítek je přesná pilulka
   bez natočení, ikony přesné kruhy. Ručně psaná poznámka „Pojďme na to!"
   zůstává. Na rozdíl od vrstvy .precise ve style.css (zaoblené čtverce)
   tu ikony drží kruhový tvar. */
.accent-yellow .badge,
.accent-yellow .badge--v2,
.accent-yellow .badge--v3 { border-radius: 999px; transform: none; }

.accent-yellow .hero-usp .ico,
.accent-yellow .hero-usp li:nth-child(n) .ico,
.accent-yellow .ico-tile,
.accent-yellow .feature-grid li:nth-child(n) .ico-tile { border-radius: 50%; }

/* ---------- 6. Výběr textu ----------------------------------------------- */

.accent-yellow ::selection { background: #fbe9a6; color: var(--ink); }

/* Podklad ikonky u kontaktní osoby = barva skvrny u CTA. */
.accent-yellow .contact-avatar { background: #f6e3a1; }