/* 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; }
}

/* Section badge — hlavní nástroj pro "kde jsem" wayfinding (priorita č.1) */
.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;
}

@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;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-2);
}

.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);
}

.mobile-nav__phone {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  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 {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-grey);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 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;
  gap: var(--space-2);
}

.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;
    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;
  }
}