/* Téma cookie lišty (vanilla-cookieconsent) — statický soubor mimo Vite, aby se
   CSS nenavázalo na bundle stránek, když je CMP vypnuté (viz
   src/lib/cookieconsent-boot.ts). Načítá se až za vendorovaným cookieconsent.css. */
/* Přemapování proměnných knihovny na naše design tokeny (CLAUDE.md §3.1) —
   tokeny se přepínají podle motivu (prefers-color-scheme / data-theme), takže
   tady není potřeba `.cc--darkmode` ani vlastní tmavá varianta. Selektor
   `#cc-main` je specifičtější než `:root` z vendorovaného CSS, takže
   nezáleží na pořadí načtení.
   POZOR: soubor leží mimo `src/`, takže ho nechytí grep po přejmenování tokenu
   ani Tailwind. Neexistující token = neplatná `--cc-*` proměnná a lišta bez
   pozadí (průhledná přes obsah stránky, redesign 2026-09 → CHANGELOG
   2026-09-28). Používej jen tokeny, které web vykresluje i jinde — Tailwind v4
   vypíše do `:root` jen proměnné použité v utilitách. */
#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-bg: var(--color-bg-primary);
  --cc-primary-color: var(--color-text-primary);
  --cc-secondary-color: var(--color-text-secondary);
  --cc-link-color: var(--color-text-brand);
  --cc-modal-border-radius: 1rem;
  --cc-btn-border-radius: 0.625rem;
  --cc-overlay-bg: rgb(10 10 10 / 0.6); /* Neutral 950 */

  /* Souhlas i odmítnutí mají stejnou váhu (GDPR, equalWeightButtons):
     primární = brand, sekundární = obrys, žádné "temné vzory". */
  --cc-btn-primary-bg: var(--color-brand);
  --cc-btn-primary-color: var(--color-on-brand);
  --cc-btn-primary-hover-bg: var(--color-brand-hover);
  --cc-btn-primary-hover-color: var(--color-on-brand);
  /* Vendor má okraj jako `var(--cc-btn-primary-bg)` už na `:root` — dědí se
     vyhodnocený s JEHO výchozí tmavou barvou, ne s naší brand, takže ho
     přepisujeme explicitně (jinak tmavý rámeček kolem fialových tlačítek). */
  --cc-btn-primary-border-color: var(--color-brand);
  --cc-btn-primary-hover-border-color: var(--color-brand-hover);
  --cc-btn-secondary-bg: var(--color-bg-primary);
  --cc-btn-secondary-color: var(--color-text-primary);
  --cc-btn-secondary-border-color: var(--color-border-secondary);
  --cc-btn-secondary-hover-bg: var(--color-bg-tertiary);
  --cc-btn-secondary-hover-color: var(--color-text-primary);
  --cc-btn-secondary-hover-border-color: var(--color-border-secondary);

  --cc-separator-border-color: var(--color-border-primary);
  --cc-section-category-border: var(--color-border-primary);
  --cc-footer-bg: var(--color-bg-tertiary);
  --cc-footer-color: var(--color-text-secondary);
  --cc-footer-border-color: var(--color-border-primary);
  --cc-cookie-category-block-bg: var(--color-bg-tertiary);
  --cc-cookie-category-block-border: var(--color-border-primary);
  --cc-cookie-category-block-hover-bg: var(--color-bg-tertiary);
  --cc-cookie-category-block-hover-border: var(--color-border-secondary);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: var(--color-bg-tertiary);

  --cc-toggle-on-bg: var(--color-brand);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-bg: var(--color-border-secondary);
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-readonly-bg: var(--color-border-primary);
  --cc-toggle-readonly-knob-bg: var(--color-bg-primary);
  --cc-toggle-readonly-knob-icon-color: var(--color-border-primary);
  --cc-toggle-enabled-icon-color: var(--color-on-brand);
  --cc-toggle-disabled-icon-color: var(--color-text-secondary);
  --cc-webkit-scrollbar-bg: var(--color-border-primary);
  --cc-webkit-scrollbar-hover-bg: var(--color-border-secondary);
}

/* Karta v našem stylu: jemný okraj + stín místo těžkého vendorového stínu
   (v tmavém motivu je okraj nutný, jinak splývá s pozadím stránky). */
#cc-main .cm,
#cc-main .pm {
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-lg);
}
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}
#cc-main .cm__btn,
#cc-main .pm__btn {
  min-height: 2.75rem; /* cíl pro dotyk ≥ 44 px */
  box-shadow: var(--shadow-xs);
  transition: background-color 0.15s, border-color 0.15s;
}
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main a:focus-visible,
#cc-main .section__toggle:focus-visible,
#cc-main .pm__section-title:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Kompaktní banner. Původní verze zabírala ~53 % výšky mobilního viewportu
   (vtip + 5řádkový text + tři plnošířková tlačítka pod sebou) a zakrývala
   kartu s počasím. Teď: nadpis + max. 4 řádky textu, Přijmout/Odmítnout
   vedle sebe ve stejné váze a „Nastavení“ jako textový odkaz pod nimi.
   Vendorované CSS na mobilu vynucuje sloupec přes `!important`, proto
   `#cc-main .cm …` (vyšší specificita) + `!important` u přepsaných věcí. */
#cc-main .cm .cm__texts {
  padding-top: 1rem;
}
#cc-main .cm .cm__title {
  font-size: 1rem;
  line-height: 1.35;
}
#cc-main .cm .cm__title + .cm__desc {
  margin-top: 0.375em;
}
#cc-main .cm .cm__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  padding-bottom: 0.75rem;
}
#cc-main .cm .cm__title,
#cc-main .cm .cm__desc,
#cc-main .cm .cm__links {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
#cc-main .cm .cm__btns {
  border-top: 0 !important;
  padding: 0 1.25rem 0.5rem;
}
#cc-main .cm .cm__btn-group:first-child {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem;
}
#cc-main .cm .cm__btn-group .cm__btn {
  margin: 0 !important;
}
#cc-main .cm .cm__btn-group:first-child .cm__btn {
  flex: 1 1 0 !important;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
#cc-main .cm .cm__btn-group + .cm__btn-group {
  margin-top: 0.125rem !important;
}
#cc-main .cm .cm__btn-group + .cm__btn-group .cm__btn {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-text-brand);
}
#cc-main .cm .cm__btn-group + .cm__btn-group .cm__btn:hover {
  background: var(--color-bg-tertiary);
}

/* Přepínač kategorie v modalu nastavení: vendor 50×23 px je pod minimem
   24 px (WCAG 2.2 AA, 2.5.8 Target Size) a sousedí s tlačítkem rozbalení
   sekce, takže výjimka pro rozestup neplatí — axe ho hlásí. */
#cc-main .section__toggle,
#cc-main .section__toggle-wrapper,
#cc-main .toggle__icon,
#cc-main .toggle__label {
  height: 24px;
}
#cc-main .toggle__icon-circle {
  height: 24px;
  width: 24px;
}
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  transform: translateX(26px);
}

@media (prefers-reduced-motion: reduce) {
  #cc-main,
  #cc-main * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}