/* =========================================================================
   Akcent „hnědá" — nad motiv css/theme-tech.css

   Modrá zůstává beze změny: nese strukturu, plochy, ikony i dekoraci.
   Hnědá se přidává jako druhá, výrazně menší barva a má jediný úkol —
   označit, kam se dá kliknout a kde se poptávka odesílá. Proto ji nosí
   tlačítka, ovládací prvky formuláře a dva geometrické tvary, které leží
   přesně pod hlavním a závěrečným CTA.

   Původní pravidlo „hnědá = výzva k akci" se rozšířilo: hnědá je druhá
   barva stránky jako zelená u škol — jemně i v podkresu sekcí a pásů
   a ve štítcích sekcí. Informační ikony a text zůstávají modré.

   Varianta souboru css/accent-red.css se stejnou logikou, jen v hnědé.

   Vrstva je záměrně samostatný soubor a váže se na třídu .accent-brown
   (<body class="precise theme-tech accent-brown">). Nosí ji jen
   /akademicka-pracoviste — /konference (varianta B) sdílí motiv, ale tenhle
   soubor nelinkuje, takže zůstává celá modrá. Smazáním <link> se stránka
   vrátí do původního stavu.

   Načítá se až za theme-tech.css: selektory mají stejnou specificitu jako
   pravidla, která přebíjejí, rozhoduje pořadí.
   ========================================================================= */

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

.accent-brown {
  --cta:        #483b31;   /* plné plochy CTA; tmavá jako #06403f (školy) a #0c3b55 (konference) */
  --cta-dark:   #5b4b3f;   /* hover — o odstín světlejší, stejně jako u motivu konferencí */
  --cta-line:   #cfc4ba;   /* obrysy a rámečky ovládacích prvků */
  --cta-tint:   #e4dcd4;   /* geometrický tvar u závěrečného CTA */
  --cta-tint-soft: #efeae5; /* tvar u hero — o odstín slabší */

  /* Hnědá jako druhá barva i v plochách — stejně jako zelená u škol.
     Zatím jen jemně: podkres sekcí (.section--mint) a pásů financování
     a závěrečného CTA (.band--green). Pás AI asistenta zůstává modrý. */
  --bg-mint:    #f7f4f1;
  --band-green: #f0ebe6;

  /* Token pro „výjimečný" akcent motivu míří nově do hnědé. Na téhle
     stránce ho nese jediný prvek — hvězdička u povinného pole. */
  --acc-pink:    #483b31;
  --acc-pink-bg: #e9e2db;
}

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

/* Všechna .btn na stránce jsou CTA: hlavička, hero i odeslání formuláře.
   Tmavě modrá plocha se mění na hnědou, tvar ani velikost ne. */
.accent-brown .btn { background: var(--cta); }
.accent-brown .btn:hover { background: var(--cta-dark); }

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

/* Aktivní položka navigace: podtržení je jediné místo v hlavičce, kde se
   dá barvu použít, aniž by soupeřila s tlačítkem vedle. */
.accent-brown .main-nav a[aria-current="page"] { border-bottom-color: var(--cta); }

/* Formulář. Rámeček aktivního pole, zaškrtávátka i hvězdička u povinných
   polí drží stejnou barvu jako tlačítko, pod kterým formulář končí. */
.accent-brown .field input:focus,
.accent-brown .field textarea:focus {
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(72, 59, 49, .14);
}
.accent-brown .field input:hover,
.accent-brown .field textarea:hover { border-color: var(--cta-line); }
.accent-brown .check input,
.accent-brown .consent input { accent-color: var(--cta); }
.accent-brown .field .req { color: var(--cta); }
.accent-brown .form-foot .phone svg { color: var(--cta); }

/* Odkaz na referenční web je taky ovládací prvek — karta reaguje na najetí
   hnědým obrysem, „Otevřít" ji drží barevně pohromadě. */
.accent-brown .case-site { border-color: var(--cta-line); }
.accent-brown .case-site:hover { border-color: var(--cta); }
.accent-brown .case-site-go { color: var(--cta); }

/* Textový odkaz zůstává modrý, aby si nekonkuroval s tlačítkem. Hnědá
   se objeví až při najetí — signál „tady se kliká", ne druhé CTA. */
.accent-brown .link-arrow:hover { color: var(--cta); }

/* Obrysový prstenec u fokusu zůstává modrý: na hnědém tlačítku je vidět,
   hnědý by na něm zanikl. */

/* ---------- 4. Ovládací prvky v ukázkách --------------------------------- */

/* Maketa webu i ukázka chatu ukazují hotový web — logika „hnědá = akce"
   musí platit i v nich, jinak by ukázka odporovala stránce kolem. */
.accent-brown .mockup-pill {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
}
.accent-brown .chat-input i { background: var(--cta); }

/* ---------- 5. Geometrická dekorace -------------------------------------- */

/* Z pěti tvarů na stránce zhnědnou dva — čtverec u hero a čtverec
   v závěrečném pásu. Oba leží u tlačítka, takže barva i tady ukazuje
   na akci. Prstence, rastr teček a kruh u AI asistenta zůstávají modré. */
.accent-brown .geo-square.deco-conf-square { background: var(--cta-tint-soft); }
.accent-brown .geo-square.deco-conf-cta { background: var(--cta-tint); }

/* ---------- 5b. Štítky sekcí -------------------------------------------- */

/* Hnědá jako druhá barva nese i štítky sekcí — obrysový styl motivu
   zůstává, mění se jen barva textu a rámečku. */
.accent-brown .badge,
.accent-brown .badge--lav {
  color: var(--cta);
  border-color: var(--cta-line);
}

/* ---------- 5c. Případová studie --------------------------------------- */

/* Případovka na /akademicka-pracoviste leží celá na hnědém podkladu, aby
   se oddělila od obecné nabídky. Pás uvnitř je bílý - na hnědé by
   jeho vlastní podkres zanikl. */
.accent-brown .case-study { background: #f2f0ed; }   /* podklad sekcí na hiu.cas.cz */
.accent-brown .case-study .band--green { background: var(--white); }
/* Části studie mají h3 pod jejím h2. Velikost je mezi h2 a h3 dlaždic,
   aby se nadpis části nepletl s nadpisy karet pod ním. */
.accent-brown .case-study .section-intro h3,
.accent-brown .case-study .band-head h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.5rem); letter-spacing: -.022em; }

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

.accent-brown ::selection { background: var(--cta-tint); color: var(--ink); }