/* Nexxen s.r.o. – styly webu. Sestaveno nastroje/sestav.mjs, zdroj navrhy/c/styl.css – needitovat ručně. */

/* Písma Schibsted Grotesk (web) a Montserrat (podpis Theimer), SIL OFL 1.1 (fonty/OFL.txt), ořezaná na znaky CZ/SK/EN/DE */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(fonty/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+010C-010F,U+011A-011B,U+0139-013A,U+013D-013E,U+0147-0148,U+0154-0155,U+0158-0159,U+0160-0161,U+0164-0165,U+016E-016F,U+017D-017E; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(fonty/schibsted-grotesk-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonty/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+010C-010F,U+011A-011B,U+0139-013A,U+013D-013E,U+0147-0148,U+0154-0155,U+0158-0159,U+0160-0161,U+0164-0165,U+016E-016F,U+017D-017E; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonty/montserrat-latin.woff2) format('woff2'); unicode-range: U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+20AC,U+2122,U+2212; }

/* =========================================================
   Podpis Theimer – neonová patička (verze 1, 25. 9. 2026)
   Barvy pruhu a klidového stavu jde sladit s webem proměnnými
   --tp-pozadi, --tp-barva, --tp-barva-hover (na .tp-paticka).
   ========================================================= */
.tp-paticka {
  display: flex; justify-content: center;
  background: var(--tp-pozadi, #0F371F);
  padding: 5px 16px;
}
.tp-podpis {
  --tp-ease: cubic-bezier(.22, .8, .24, 1);
  --tp-ease-io: cubic-bezier(.65, 0, .35, 1);
  --tp-pruzina: cubic-bezier(.34, 1.56, .64, 1);
  display: inline-flex; align-items: center; gap: 11px;
  padding: 6px 14px;
  border-radius: 999px;
  font: 500 12.8px/1 var(--tp-font, 'Montserrat', 'Segoe UI', system-ui, sans-serif);
  letter-spacing: normal; text-transform: none;
  color: var(--tp-barva, #A9C28F);
  text-decoration: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.tp-podpis:focus-visible { outline: 2.5px solid var(--tp-barva, #A9C28F); outline-offset: 2px; }
.tp-text { transition: color .4s; }
.tp-logo { display: block; width: 23px; height: 17px; flex: none; transition: transform .6s var(--tp-pruzina); }
.tp-svg { width: 100%; height: 100%; display: block; overflow: visible; transition: filter .5s var(--tp-ease); }
.tp-d {
  fill: var(--tp-barva, #A9C28F);
  stroke: #3CD8FF; stroke-width: 0; stroke-linejoin: round;
  stroke-dasharray: 1 1.2; stroke-dashoffset: 1;
}
.tp-jmeno { font-weight: 800; font-size: 14.4px; letter-spacing: .02em; color: var(--tp-barva, #A9C28F); transition: color .45s; }

/* najetí myší, fokus z klávesnice, nebo třída .tp-hraje (dotyková zařízení) */
.tp-podpis:is(:hover, :focus-visible, .tp-hraje) .tp-logo { transform: scale(1.5); }
.tp-podpis:is(:hover, :focus-visible, .tp-hraje) .tp-text { color: var(--tp-barva-hover, #C8D9B6); }
.tp-podpis:is(:hover, :focus-visible, .tp-hraje) .tp-svg {
  filter: drop-shadow(0 0 2px rgba(60, 216, 255, .95)) drop-shadow(0 0 6px rgba(47, 124, 214, .75));
}
.tp-podpis:is(:hover, :focus-visible, .tp-hraje) .tp-d { fill: var(--c); animation: tp-neon 1.3s var(--tp-ease-io) calc(var(--i) * 60ms) both; }
.tp-podpis:is(:hover, :focus-visible, .tp-hraje) .tp-jmeno {
  color: transparent;
  background: linear-gradient(90deg, var(--tp-barva, #A9C28F) 0%, var(--tp-barva, #A9C28F) 30%, #B8F2FF 45%, #01D6FE 55%, #8BE9FF 67%, #4FD0FF 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: tp-neon-text 1.3s var(--tp-ease-io) .2s both;
  filter: drop-shadow(0 0 5px rgba(60, 216, 255, .55));
}
@keyframes tp-neon {
  0% { stroke-width: 26; stroke-dashoffset: 1; fill-opacity: 0; }
  62% { stroke-width: 26; stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-width: 0; stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes tp-neon-text { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* omezení pohybu v systému: bez animace, rovnou konečný stav */
@media (prefers-reduced-motion: reduce) {
  .tp-podpis, .tp-podpis * {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
}


/* Návrh C – Čistý list: stránka jako zrcadlo podle loga (NEX | XƎИ) */

:root {
  --papir: #fff;
  --inkoust: #0b2a47;
  --tlumeny: #5b7186;
  --odkaz: #1270ad;
  --osa: rgba(11, 42, 71, .16);
  --osa-aktivni: #23a5df;
  --mapa-cara: rgba(11, 42, 71, .17);
  --mapa-hranice: rgba(11, 42, 71, .07);
  --mapa-cesko: rgba(35, 165, 223, .07);
  --mapa-cesko-cara: rgba(35, 165, 223, .45);
  --tabor: #1a8fd0;
  --qr-stin: 0 14px 34px -16px rgba(11, 42, 71, .35);
  --fokus: #0f5e9c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papir: #06121f;
    --inkoust: #e8f1f8;
    --tlumeny: #8ea6ba;
    --odkaz: #6cc8f2;
    --osa: rgba(232, 241, 248, .16);
    --osa-aktivni: #4dbbec;
    --mapa-cara: rgba(160, 205, 240, .16);
    --mapa-hranice: rgba(160, 205, 240, .06);
    --mapa-cesko: rgba(77, 187, 236, .07);
    --mapa-cesko-cara: rgba(77, 187, 236, .45);
    --tabor: #6cc8f2;
    --qr-stin: 0 14px 34px -16px rgba(0, 0, 0, .7);
    --fokus: #8fdcff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papir: #06121f;
  --inkoust: #e8f1f8;
  --tlumeny: #8ea6ba;
  --odkaz: #6cc8f2;
  --osa: rgba(232, 241, 248, .16);
  --osa-aktivni: #4dbbec;
  --mapa-cara: rgba(160, 205, 240, .16);
  --mapa-hranice: rgba(160, 205, 240, .06);
  --mapa-cesko: rgba(77, 187, 236, .07);
  --mapa-cesko-cara: rgba(77, 187, 236, .45);
  --tabor: #6cc8f2;
  --qr-stin: 0 14px 34px -16px rgba(0, 0, 0, .7);
  --fokus: #8fdcff;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; height: 100%; }

/* Stránka se neposouvá celá – posouvá se obsah uvnitř panelu (.posuvnik), logo nahoře stojí. */
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font: 400 1.0625rem/1.6 "Schibsted Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.prechod-tematu body { transition: background .5s ease, color .5s ease; }

.ikona {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- obrys Evropy v pozadí, Tábor leží na ose ---------- */

.pozadi-mapa {
  --w: max(150vw, 1500px);
  position: absolute;
  z-index: 0;
  left: calc(50vw - var(--w) * .53325);
  top: calc(52vh - var(--w) * .625 * .598);
  width: var(--w);
  pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent);
  mask: radial-gradient(closest-side, #000 35%, transparent);
}
.pozadi-mapa svg { display: block; width: 100%; height: auto; }
.pozadi-mapa path { fill: none; stroke-linejoin: round; }
.pozadi-mapa .pevnina { stroke: var(--mapa-cara); stroke-width: .8; }
.pozadi-mapa .hranice { stroke: var(--mapa-hranice); stroke-width: .7; }
.pozadi-mapa .cesko { fill: var(--mapa-cesko); stroke: var(--mapa-cesko-cara); stroke-width: 1; }
.pozadi-mapa .tabor { fill: var(--tabor); }
.pozadi-mapa .tabor-kruh {
  fill: none;
  stroke: var(--tabor);
  stroke-width: .8;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

/* ---------- přepínač jazyků (vlevo nahoře) – stojí na místě i při posunu jazykových verzí ---------- */

.prepinac-jazyka {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10, 30, 52, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 600 12px/1 system-ui, sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.prepinac-jazyka a {
  color: #cfe3f2;
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.prepinac-jazyka a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/* tmavší modrá než #23a5df kvůli kontrastu bílého písma (4,8 : 1) */
.prepinac-jazyka a[aria-current="page"] { background: #1478b8; color: #fff; }
.prepinac-jazyka a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 999px; }

/* ---------- přepínač režimu (vpravo nahoře) ---------- */

.tema {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--inkoust);
  cursor: pointer;
  transition: background .2s ease;
}
.tema:hover { background: color-mix(in srgb, var(--inkoust) 7%, transparent); }
.tema .ikona {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease;
}
.tema .ikona-mesic { opacity: 0; transform: rotate(-90deg) scale(.4); }
.tema[aria-pressed="true"] .ikona-slunce { opacity: 0; transform: rotate(90deg) scale(.4); }
.tema[aria-pressed="true"] .ikona-mesic { opacity: 1; transform: none; }

/* ---------- dráha jazykových verzí a panel ---------- */

.draha {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.panel {
  --logo-w: clamp(170px, 19vw, 230px);
  --hlavicka-top: clamp(40px, 7vh, 72px);
  --hlavicka-v: calc(var(--hlavicka-top) + var(--logo-w) / 3.128 + 24px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--papir);
}
.prechod-tematu .panel,
.prechod-tematu .clona { transition: background .5s ease; }

/* logo stojí nahoře, obsah pod ním se posouvá a pod logem se rozplyne */
.hlavicka {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: var(--posuvnik-sirka, 0px);
  display: flex;
  justify-content: center;
  padding: var(--hlavicka-top) 16px 0;
  pointer-events: none;
}
/* na podstránkách (zásady, 404) vede logo na úvodní stránku – odkaz musí jít kliknout i přes pointer-events hlavičky */
.hlavicka a { display: block; pointer-events: auto; }
.clona {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: var(--posuvnik-sirka, 0px);
  height: calc(var(--hlavicka-v) + 40px);
  background: linear-gradient(to bottom, var(--papir) calc(100% - 72px), color-mix(in srgb, var(--papir) 0%, transparent));
  pointer-events: none;
}
.posuvnik {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.posuvnik:focus { outline: none; }

/* ---------- list ---------- */

.list {
  --mezera: clamp(28px, 4vw, 56px);
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: var(--hlavicka-v) 16px 0;
}

.znacka { margin: 0; line-height: 0; }
/* Původní logo zvětšené Real-ESRGAN; při načtení se zaostří (varianta 2 z navrhy/_varianty/logo-animace) */
.logo {
  position: relative;
  display: block;
  width: var(--logo-w);
  aspect-ratio: 588 / 188;
}
.logo-obr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.zrcadlo {
  position: relative;
  display: grid;
  row-gap: clamp(44px, 7vh, 76px);
  padding: clamp(28px, 5vh, 56px) 0 clamp(56px, 9vh, 96px);
}

.osa {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -.5px;
  background: var(--osa);
  transform-origin: top;
}

.radek {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--mezera) * 2);
  align-items: baseline;
}
/* při najetí se rozsvítí úsek osy u daného řádku */
.radek::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.2em;
  bottom: -.2em;
  width: 2px;
  margin-left: -1px;
  background: var(--osa-aktivni);
  transform: scaleY(0);
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.radek:hover::before,
.radek:focus-within::before { transform: scaleY(1); }

.vlevo { text-align: right; }
.vpravo { text-align: left; }

.radek h2 {
  margin: 0;
  font: 600 clamp(1.35rem, 1rem + 1.3vw, 2rem)/1.15 "Schibsted Grotesk", sans-serif;
  letter-spacing: -.025em;
}

.vpravo p,
.vpravo address { margin: 0; color: var(--tlumeny); font-style: normal; }
.vpravo > p + p { margin-top: 6px; }

.udaje { margin: 0; color: var(--tlumeny); }
.udaje div { display: flex; gap: .4em; }
.udaje dd { margin: 0; color: var(--inkoust); font-weight: 500; font-variant-numeric: tabular-nums; }

.funkce { font-size: .95rem; }
.telefon a {
  color: var(--inkoust);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.telefon a:hover { color: var(--odkaz); }

.odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 14px !important;
}
.odkazy a,
.odkazy button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--odkaz);
  font: 600 .9375rem/1 "Schibsted Grotesk", sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.odkazy span {
  padding: 3px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .35s cubic-bezier(.2, .8, .3, 1);
}
.odkazy a:hover span,
.odkazy button:hover span,
.odkazy button[aria-expanded="true"] span { background-size: 100% 1.5px; }

/* QR kód se rozbalí pod odkazy */
.qr-obal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.2, .8, .3, 1);
}
.qr-obal.otevreny { grid-template-rows: 1fr; }
.qr-vnitrek { min-height: 0; overflow: hidden; }
.qr {
  display: block;
  width: 160px;
  height: 160px;
  margin: 16px 0 4px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--qr-stin);
  transform: translateY(-10px) scale(.94);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .35s ease;
}
.qr-obal.otevreny .qr { transform: none; opacity: 1; }

/* ---------- patička: podpis Theimer, barvy sladěné s webem ---------- */

.tp-paticka {
  --tp-pozadi: #0b2a47;
  --tp-barva: #8ea6ba;
  --tp-barva-hover: #b9cadb;
}
:root[data-theme="dark"] .tp-paticka {
  --tp-pozadi: #030a12;
  --tp-barva: #6f8799;
  --tp-barva-hover: #a6bacb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tp-paticka {
    --tp-pozadi: #030a12;
    --tp-barva: #6f8799;
    --tp-barva-hover: #a6bacb;
  }
}
.prechod-tematu .tp-paticka { transition: background .5s ease; }

/* ---------- úvodní sekvence (jen při načtení stránky, ne při změně jazyka – panel pak nemá třídu .uvod) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .uvod .logo-obr { animation: logo-zaostreni 1.15s cubic-bezier(.2, .7, .2, 1) both; }
  .uvod .osa { animation: osa 1.5s cubic-bezier(.6, 0, .2, 1) 1.15s both; }
  .uvod .radek .vlevo { animation: z-osy-vlevo .9s cubic-bezier(.2, .8, .3, 1) both; }
  .uvod .radek .vpravo { animation: z-osy-vpravo .9s cubic-bezier(.2, .8, .3, 1) both; }
  .uvod .radek:nth-child(2) > * { animation-delay: 1.35s; }
  .uvod .radek:nth-child(3) > * { animation-delay: 1.5s; }
  .uvod .radek:nth-child(4) > * { animation-delay: 1.65s; }
  .uvod .radek:nth-child(5) > * { animation-delay: 1.8s; }
  .pozadi-mapa.hotova .tabor-kruh { animation: kruh 3s cubic-bezier(.2, .6, .3, 1) infinite; }
  .pozadi-mapa.kresli path { stroke-dasharray: 1; animation: kresli 3.2s cubic-bezier(.45, 0, .2, 1) 1.4s both; }
  .pozadi-mapa.kresli .cesko { animation: kresli 1.6s ease 2.6s both, objevit 1.2s ease 2.6s both; }
  .pozadi-mapa.kresli .tabor { animation: objevit .6s ease 3.4s both; }
  .pozadi-mapa.kresli .tabor-kruh { animation: kruh 3s cubic-bezier(.2, .6, .3, 1) 3.4s infinite; }
}

@keyframes logo-zaostreni {
  0% { opacity: 0; filter: blur(16px); transform: scale(1.12); }
  45% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes osa { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes z-osy-vlevo { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes z-osy-vpravo { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes objevit { from { opacity: 0; } }
@keyframes kresli { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kruh { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }

/* ---------- mobil: osa se přesune k levému okraji ---------- */

@media (max-width: 720px) {
  .panel { --logo-w: 116px; --hlavicka-top: 60px; --hlavicka-v: calc(60px + 116px / 3.128 + 18px); }
  .clona { height: calc(var(--hlavicka-v) + 28px); background: linear-gradient(to bottom, var(--papir) calc(100% - 48px), color-mix(in srgb, var(--papir) 0%, transparent)); }
  .zrcadlo { padding-left: 22px; row-gap: 40px; }
  .osa { left: 0; }
  .radek { grid-template-columns: 1fr; row-gap: 10px; }
  .radek::before { left: -22px; }
  .vlevo { text-align: left; }
  .uvod .radek .vlevo { animation-name: z-osy-vpravo; }
  .pozadi-mapa { --w: 260vw; left: calc(40vw - var(--w) * .53325); top: calc(40vh - var(--w) * .625 * .598); }
}

/* ---------- tisk: celá stránka na papír, bez pevných panelů, vždy světlé barvy ---------- */

@media print {
  :root,
  :root[data-theme] { --papir: #fff; --inkoust: #0b2a47; --tlumeny: #5b7186; --odkaz: #1270ad; color-scheme: light; }
  html, body { height: auto; overflow: visible; background: #fff; }
  .draha, .panel, .posuvnik { position: static; height: auto; overflow: visible; }
  .hlavicka { position: static; padding: 0 0 8px; }
  .list { padding-top: 16px; }
  .clona, .pozadi-mapa, .prepinac-jazyka, .tema, .radek::before, .qr-obal, [data-qr] { display: none !important; }
  .zrcadlo { row-gap: 28px; padding-bottom: 24px; }
  .tp-paticka { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* Lišta souhlasu s měřením návštěvnosti (GA4). Vzor: projekt „web seo ai“, vzory/mereni-ga4/souhlas.css.
   Značky vkládá nastroje/sestav.mjs, chování řídí souhlas.js. Barvy jako přepínač jazyků: tmavě modrá plocha
   v obou režimech, světlé písmo, akcent a fokus z webu; písmo Schibsted Grotesk. */

.site-consent,
.site-consent__again,
.site-consent__note {
  --consent-pozadi: rgba(10, 30, 52, .94);
  --consent-line: rgba(207, 227, 242, .16);
  --consent-text: #b9cfe0;
  --consent-head: #fff;
  --consent-accent: #6cc8f2;
  --consent-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  z-index: 60;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  font: 400 .8125rem/1.55 "Schibsted Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.site-consent[hidden],
.site-consent__again[hidden],
.site-consent__note[hidden] {
  display: none;
}

.site-consent {
  width: min(380px, calc(100% - 32px));
  padding: 16px 18px;
  color: var(--consent-text);
  background: var(--consent-pozadi);
  border: 1px solid var(--consent-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: site-consent-in .5s var(--consent-ease) .3s both;
}

.site-consent__title {
  margin: 0 0 6px;
  color: var(--consent-head);
  font: 600 .9375rem/1.3 "Schibsted Grotesk", system-ui, sans-serif;
  letter-spacing: -.01em;
}

.site-consent__text {
  margin: 0 0 14px;
}

.site-consent__text a {
  color: var(--consent-accent);
  text-underline-offset: 2px;
}

.site-consent__actions {
  display: flex;
  gap: 10px;
}

/* Odmítnout a přijmout mají stejnou váhu (souhlas nesmí být vnucený vzhledem tlačítek). */
.site-consent__btn {
  flex: 1;
  padding: 9px 10px;
  color: var(--consent-head);
  font: 600 .8125rem/1.2 "Schibsted Grotesk", system-ui, sans-serif;
  background: transparent;
  border: 1px solid rgba(207, 227, 242, .35);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.site-consent__btn:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--consent-accent);
}

.site-consent__btn:focus-visible,
.site-consent__again:focus-visible,
.site-consent__text a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Malé tlačítko po volbě: umožní ji kdykoli změnit. */
.site-consent__again {
  padding: 6px 11px;
  color: #cfe3f2;
  font: 600 12px/1 system-ui, sans-serif;
  background: rgba(10, 30, 52, .78);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color .2s, bottom .4s var(--consent-ease);
}

.site-consent__again:hover,
.site-consent__again:focus-visible {
  color: #fff;
}

/* Když je vidět patička s podpisem tvůrce, tlačítko i potvrzení vyjedou nad ni – jinak by ji zakryly, na úzkém displeji
   i s textem „Web vytvořil“. Třídu na <html> a výšku patičky (--paticka) nastavuje skript.js. */
.paticka-videt .site-consent__again {
  bottom: calc(var(--paticka, 40px) + 8px);
}

.paticka-videt .site-consent__note {
  bottom: calc(var(--paticka, 40px) + 48px);
}

/* Potvrzení po zapnutí nebo vypnutí vyloučení vlastních návštěv (?nemerit, ?mereni). */
.site-consent__note {
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 40px);
  max-width: min(380px, calc(100% - 32px));
  margin: 0;
  padding: 10px 14px;
  color: var(--consent-head);
  background: var(--consent-pozadi);
  border: 1px solid var(--consent-line);
  border-radius: 14px;
  animation: site-consent-in .5s var(--consent-ease) both;
  transition: bottom .4s var(--consent-ease);
}

@keyframes site-consent-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-consent,
  .site-consent__note {
    animation: none;
  }

  .site-consent__again,
  .site-consent__note {
    transition: none;
  }
}

@media print {
  .site-consent,
  .site-consent__again,
  .site-consent__note {
    display: none !important;
  }
}