/* Kindent — layout: container, header/nav, footer, sekce, scroll-reveal */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Širší varianta jen pro homepage dlaždice — ať mají víc místa do šířky
   (a text u zubní ordinace vyjde na jeden řádek), aniž by to měnilo
   max-width kdekoliv jinde na webu. */
.container--wide {
  max-width: 1440px;
}

section {
  padding-block: var(--space-6);
}

@media (min-width: 1024px) {
  section {
    padding-block: var(--space-7);
  }
}

/* ---------- Utility bar (nad hlavní hlavičkou, jen v sekcích) ---------- */
.utility-bar {
  background: var(--color-ink);
  color: #fff;
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 0.4rem;
  font-size: var(--fs-small);
}

.utility-bar a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.utility-bar a:hover {
  color: var(--color-brown);
}

.utility-bar__switch {
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* Telefon v utility liště je jen bonus pro širší obrazovky — na malém
   telefonu je stejný odkaz v hlavičce (CTA) i v rozbaleném mobilním menu,
   tak ať se lišta nezalamuje na dva řádky kvůli trojici položek.
   (Selektor musí být aspoň tak specifický jako ".utility-bar a" výše,
   jinak by pořadí v souboru nerozhodlo a display:flex by vyhrálo.) */
.utility-bar a.utility-bar__phone {
  display: none;
}

@media (min-width: 480px) {
  .utility-bar a.utility-bar__phone { display: inline-flex; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(251, 249, 244, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: var(--space-2);
}

@media (min-width: 480px) {
  .site-header__inner { gap: var(--space-3); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__mark {
  width: 68px;
  height: 68px;
  display: block;
}

/* Text vedle značky — jen tagline (bez "Kindent", to už nese samo logo).
   Skrytý pod 768px, kde by vedle telefonu a CTA tlačítka byl na jeden řádek
   příliš dlouhý; do té doby nese značku samotná ikona. */
.brand__tagline {
  display: none;
  font-size: 1.294rem; /* 1.125rem +15 % */
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-turquoise); /* přesně #7ab8b6 dle zadání */
  white-space: nowrap;
}

@media (min-width: 900px) {
  .brand__tagline { display: block; }
}

/* Klient chce tagline i na mobilu. Na 375px zbývá vedle loga a tlačítka
   "Objednat se" jen kolem 128px, takže musí být výrazně menší a hlavně se
   smět zalomit — nowrap z desktopu by hlavičku roztlačil do strany.
   Jen hlavičky bez odznaku sekce (rozcestník, blog, ochrana osobních
   údajů, 404) — tam tagline nese značku místo odznaku. Na stránkách sekcí
   tuhle roli plní odznak a další text by se vedle něj nevešel. */
@media (max-width: 899px) {
  .site-header--home .brand {
    flex-shrink: 1;
    min-width: 0;
  }

  .site-header--home .brand__tagline {
    display: block;
    /* 14px, ne 11px — klientovi přišel nápis malý. Víc už nejde: na 360px
       displeji zbývá vedle loga a tlačítka 143px a nejdelší řádek
       "DENTÁLNÍ HYGIENA" má při 14px 134px. Výšku hlavičky to nemění,
       tagline (35px) je pořád nižší než značka (60px). */
    font-size: 0.875rem;
    line-height: 1.25;
    white-space: normal;
  }

  /* Zalomení musí padnout mezi "Zubní péče &" a "dentální hygiena", ne
     kamkoliv podle šířky — proto jsou obě části ve vlastním <span> a na
     mobilu z nich děláme bloky. Na desktopu zůstávají řádkové, takže tam
     je nadpis pořád na jednom řádku. */
  .site-header--home .brand__tagline > span {
    display: block;
  }

  /* Menší značka na mobilu u hlaviček bez odznaku (blog, ochrana osobních
     údajů, 404): 68 -> 60px dělá hlavičku 101 -> 93px. Původně kvůli
     rozcestníku, ten ale dnes hlavičku nemá vůbec. */
  .site-header--home .brand__mark {
    width: 60px;
    height: 60px;
  }
}

/* ---------- Průhledná hlavička rozcestníku ----------
   Jen na úvodní stránce s dlaždicemi. Leží PŘES dlaždice, nezabírá místo —
   dlaždice tak dál vyplní celý displej.

   Není sticky, na rozdíl od zbytku webu: pod dlaždicemi je krémová
   patička a bílé logo s textem by nad ní při scrollování zmizelo.
   Stránka je stejně jedna obrazovka, takže se odjetím nahoru nic neztratí.

   Čitelnost nedrží průhlednost samotná, ale jemný přechod níž — měřeno
   v horním pásu dlaždic vychází bílý text na 4,8:1 u hygieny a 7,8:1
   u zubní péče. U hygieny je to jen těsně nad hranicí 4,5 a fotky se
   na dlaždicích už třikrát měnily, takže přechod tu je jako pojistka
   nezávislá na tom, jak je zrovna tmavá konkrétní fotka. */
.site-header--pruhledna {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  /* Vlásek místo linky — na fotce nemá působit jako lišta. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* Přechod od horní hrany, ne plochá vrstva přes celou hlavičku: oko pak
   nevnímá lištu, jen o kousek hlubší horní okraj stránky. Vykresluje se
   pod obsahem hlavičky (z-index) a nesmí chytat kliknutí. */
.site-header--pruhledna::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 160px;
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: -1;
}

.site-header--pruhledna .brand__tagline,
.site-header--pruhledna .header-actions__phone {
  color: #fff;
}

.site-header--pruhledna .btn--primary {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: none;
}

.site-header--pruhledna .btn--primary:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

/* Section badge — hlavní nástroj pro "kde jsem" wayfinding (priorita č.1) */
/* Odznak sekce je zároveň odkaz zpět na hlavní stránku dané sekce —
   vizuálně beze změny (proto text-decoration:none), jen klikatelný. */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: filter var(--duration-base) var(--ease-out);
}

a.section-badge:hover {
  filter: brightness(0.95);
}

@media (min-width: 480px) {
  .section-badge {
    font-size: var(--fs-small);
    padding: 0.3rem 0.75rem;
  }
}

.section-badge--hygiena {
  background: color-mix(in srgb, var(--color-section-hygiena) 30%, white);
  color: var(--color-ink);
}

.section-badge--ordinace {
  background: color-mix(in srgb, var(--color-section-ordinace) 35%, white);
  color: var(--color-ink);
}

.site-nav {
  display: none;
  margin-inline: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.site-nav a {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--color-grey);
  padding-block: var(--space-1);
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transition: right var(--duration-base) var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  right: 0;
}

.site-nav a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .header-actions { gap: var(--space-2); }
}

/* Kompaktnější CTA v hlavičce na malých telefonech — na zbytku webu si
   .btn drží svůj běžný, prostornější padding. */
.site-header .btn--primary {
  padding: 0.7rem 1rem;
  font-size: 0.8125rem;
}

@media (min-width: 480px) {
  .site-header .btn--primary {
    padding: 0.9rem 1.6rem;
    font-size: var(--fs-small);
  }
}

/* Telefon v hlavní hlavičce — jen tam, kde nesoutěží o místo s celým menu
   (homepage). Na stránkách sekcí (Nav A/B + badge) žije stejný odkaz
   v prostornější utility liště. */
.header-actions__phone {
  display: none;
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .header-actions__phone { display: inline-flex; align-items: center; gap: 0.35rem; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.nav-toggle:hover {
  background: var(--color-border);
}

/* 1200px, ne 1024px: logo + section badge + celé menu (7 položek) + CTA
   se do jednoho řádku bezpečně vejdou až odsud (ověřeno měřením), pod tím
   zůstává spolehlivější hamburger. */
@media (min-width: 1200px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
}

/* Mobilní nav panel */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-offwhite);
}

.mobile-nav.is-open {
  display: block;
}

/* Spodní odsazení je 0: telefon pod seznamem je vizuálně stejný řádek jako
   položky menu (stejná výška i linka pod ním), a 16px mezera nad ním dělala
   jeho pruh o tolik vyšší než ostatní. Horní odsazení zůstává — odděluje
   první položku od linky pod hlavičkou. */
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-2) 0;
}

.mobile-nav a {
  display: block;
  padding: var(--space-2) 0;
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav a[aria-current="page"] {
  color: var(--color-turquoise-deep);
}

/* Selektor musí být ".mobile-nav a.mobile-nav__phone", ne jen
   ".mobile-nav__phone": pravidlo ".mobile-nav a" výše má specificitu
   (0,1,1) a přebilo by display:flex zpátky na block. Ikona telefonu pak
   kvůli globálnímu resetu "img, picture, svg, video { display:block }"
   (base.css) spadla na vlastní řádek nad číslo. Takhle je vedle čísla. */
.mobile-nav a.mobile-nav__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: var(--space-2);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

@media (min-width: 1200px) {
  .mobile-nav { display: none !important; }
}

/* ---------- Footer ----------
   Světlá, kompaktní patička (podle živého webu kindent.cz) — ne masivní
   tmavý blok. Sedí na offwhite, tenký horní okraj místo barevného bloku
   odděluje od obsahu nad ní. Zmenšeno oproti dřívější světlé verzi —
   menší padding, menší mezery mezi řádky/sloupci. */
.site-footer {
  background: var(--color-offwhite);
  color: var(--color-grey);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
  font-size: var(--fs-small);
}

.site-footer a {
  color: var(--color-ink);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-turquoise-text);
}

.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-brand__mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.footer-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-grey);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}

.footer-list li {
  margin-bottom: 0.3rem;
}

.footer-social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.footer-social a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
}

.footer-social a:hover {
  border-color: var(--color-turquoise);
}

/* .footer-bottom (copyright + odkaz na ochranu osobnich udaju) byla
   odstranena na prani klienta, vcetne oddelovaci cary nad ni. */

@media (min-width: 768px) {
  /* Zpátky na tři sloupce — Blog se přestěhoval pod Kontakt do obou
     sekčních seznamů, takže samostatný sloupec "Kindent" zanikl.
     minmax(0,…) místo holých jednotek, ať dlouhý odkaz sloupec neroztlačí. */
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  }
}

/* Kompaktní patička (všechny podstránky kromě rozcestníkové homepage) —
   podle dodaného vzoru (PATIČKA VZOR PRO DESKTOP.png): na desktopu úplně
   plochý jeden řádek (logo, slogan, adresa, tel, e-mail, IČ, ikony), ne
   sloupce/skupiny. Pod 1024px (kde by se řádek už lámal na dva) zůstává
   svislý seznam — tam na výšce nezáleží, klient potvrdil, že mobil je OK.
   Kontejner patičky je container--wide (1440px), ne běžných 1180px —
   při běžné mezeře (--space-3) by se položky do standardní šířky na
   1280px oknech nevešly a lámaly se; širší kontejner dá dost místa pro
   čitelnější rozestupy, aniž by se řádek rozpadal. */
.footer-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Na mobilu (svislý seznam) stačí těsnější rozestup — se --space-2
     byla patička zbytečně vysoká. Od 1024px si řádkové/sloupcové mezery
     řídí media query níž. */
  gap: var(--space-1);
}

.footer-compact p {
  margin: 0;
}

.footer-compact__tagline {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.footer-compact .footer-social {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .footer-compact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    /* Drobné zmenšení textu jen tady — se čitelnější mezerou (--space-3)
       by na běžných 1280px oknech zbývalo jen pár px rezervy do zalomení
       řádku; o kousek menší písmo dá bezpečnější odstup od zlomu i při
       mírně jiném vykreslení fontu na jiném OS/prohlížeči. */
    font-size: 0.8125rem;
  }
}

/* ---------- Střídání barevných bloků sekcí (podle živého webu) ----------
   main.alt-hygiena / main.alt-ordinace na <main> — každá druhá <section>
   dostane plný brand-barevný podklad (tyrkys pro hygienu, hnědá/oranžová
   pro ordinaci), zbytek zůstává offwhite. Text zůstává vždy tmavý
   (--color-ink / --color-grey) — bílý text na tyrkysu/hnědé má na malé
   písmo nedostatečný kontrast (viz poznámka v tokens.css). Karty uvnitř
   (.service-card, .price-rows, .team-card…) mají vlastní --color-surface
   pozadí, takže na barevném podkladu pěkně vystoupí. */
main.alt-hygiena > section:nth-of-type(even) {
  background: var(--color-section-hygiena);
}

main.alt-ordinace > section:nth-of-type(even) {
  background: var(--color-section-ordinace);
}

/* main.no-stripe — na vybraných stránkách zůstává barva jen na
   dlaždicích, pruh za nimi ne. Dlaždice na .no-stripe stránkách jsou
   barevné VŽDY (viz .service-card pravidlo níže), bez ohledu na to, jestli
   by jejich section vyšla jako sudá/lichá — na stránce služby zubní
   ordinace jsou karty rozdělené do 3 samostatných gridů napříč sekcemi
   a měly by být barevné všechny, ne jen ty v "sudé" sekci. */
main.no-stripe > section:nth-of-type(even) {
  background: var(--color-offwhite);
}

/* První barevný pruh hned pod hero potřeboval na desktopu víc odstupu,
   ať nepůsobí namáčklý na hero sekci nad ním — margin (ne padding), takže
   se posouvá dolů celý barevný blok, ne jen jeho obsah. Netýká se
   .no-stripe stránek — tam žádný pruh není, takže by ten odstup jen
   zbytečně odsouval sekci dolů (viz zpětná vazba: "sekce je níž, než by
   měla být"). */
@media (min-width: 1024px) {
  main.alt-hygiena:not(.no-stripe) > section:nth-of-type(2),
  main.alt-ordinace:not(.no-stripe) > section:nth-of-type(2) {
    margin-top: 2cm;
  }
}

/* ---------- Scroll reveal (fade-in) ----------
   Skryté jsou .reveal prvky JEN když je aktivní .js na <html> (viz malý
   inline skript na začátku <head>). Bez JS (nebo dokud se nenačte) zůstává
   obsah rovnou viditelný — animace nikdy nesmí obsah trvale schovat. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}