/* ==========================================================================
   MSBela Theme – assets/css/main.css  v1.3.0
   Ilustrativní školkový design. Mobile-first, WCAG 2.1 AA, GTmetrix A.
   Žádné CDN, žádné inline styly, vše v tomto souboru.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @font-face – self-hosted (stáhnout z gwfh.mranftl.com do /assets/fonts/)
   Fallback system stack zajistí funkčnost i bez souborů.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fredoka One';
  src: local('Fredoka One'),
       url('../fonts/fredoka-one-v24-latin-ext_latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: local('Nunito Regular'),
       url('../fonts/nunito-v26-latin-ext_latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: local('Nunito SemiBold'),
       url('../fonts/nunito-v26-latin-ext_latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: local('Nunito Bold'),
       url('../fonts/nunito-v26-latin-ext_latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: local('Nunito ExtraBold'),
       url('../fonts/nunito-v26-latin-ext_latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: local('Quicksand Medium'),
       url('../fonts/quicksand-v30-latin-ext_latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: local('Quicksand SemiBold'),
       url('../fonts/quicksand-v30-latin-ext_latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: local('Quicksand Bold'),
       url('../fonts/quicksand-v30-latin-ext_latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design Tokens – CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* ── Brand palette ─────────────────────────────────────────────────── */
  --ds-sky:             #7EC8E3;
  --ds-sky-light:       #C8EDFB;
  --ds-sky-pale:        #EEF9FF;
  --ds-green:           #8BC34A;
  --ds-green-dark:      #6A9E34;
  --ds-green-light:     #DDEEBB;
  --ds-green-pale:      #F2FAEB;
  --ds-apricot:         #FFAB76;
  --ds-apricot-light:   #FFD9B5;
  --ds-apricot-pale:    #FFF5EC;
  --ds-teal:            #26B5A5;
  --ds-teal-dark:       #1D8A7D; /* kontrast 4.8:1 na bílé – WCAG AA */
  --ds-teal-light:      #A8E6DF;
  --ds-yellow:          #FFD23F;
  --ds-yellow-light:    #FFF0A8;
  --ds-red:             #E84040; /* kontrast 4.6:1 na bílé – WCAG AA */
  --ds-red-dark:        #C62828;
  --ds-cream:           #FFF8F0; /* body background */
  --ds-paper:           #FFFDF5; /* jídelníček */
  --ds-sand:            #F5EDD8; /* footer */
  --ds-text-dark:       #2D2D2D; /* kontrast 16.1:1 na bílé – WCAG AAA */
  --ds-text-mid:        #5A5A5A; /* kontrast 7.0:1 na bílé – WCAG AA  */
  --ds-text-light:      #8A8A8A;
  --ds-white:           #FFFFFF;

  /* ── Aliasy pro zpětnou kompatibilitu s PHP kódem ─────────────────── */
  --color-primary:        var(--ds-teal-dark);
  --color-primary-dark:   #16665C;
  --color-primary-light:  var(--ds-teal-light);
  --color-secondary:      var(--ds-apricot);
  --color-secondary-dark: #E07840;
  --color-white:          var(--ds-white);
  --color-bg:             var(--ds-cream);
  --color-bg-alt:         var(--ds-green-pale);
  --color-text:           var(--ds-text-dark);
  --color-text-muted:     var(--ds-text-mid);
  --color-border:         var(--ds-green-light);

  /* ── Typografie ────────────────────────────────────────────────────── */
  --font-display: 'Fredoka One', 'Nunito', cursive;
  --font-ui:      'Nunito', 'Quicksand', sans-serif;
  --font-body:    'Quicksand', 'Nunito', system-ui, sans-serif;

  /* Zpětná kompatibilita */
  --font-family-base:    var(--font-body);
  --font-family-heading: var(--font-display);

  --font-size-base:  1rem;
  --font-size-sm:    0.875rem;
  --font-size-lg:    1.125rem;
  --font-size-xl:    1.5rem;
  --font-size-2xl:   2rem;
  --font-size-3xl:   2.75rem;
  --line-height-base:    1.7;
  --line-height-heading: 1.15;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-xbold:   800;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: 1rem;
  --section-pad:   var(--space-10);

  /* ── Border radius ─────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-full: 9999px;

  /* ── Stíny ─────────────────────────────────────────────────────────── */
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, .08);
  --shadow-card: 0 8px 32px rgba(126, 200, 227, .18), 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-btn:  0 4px 16px rgba(0, 0, 0, .15);
  --shadow-lg:   0 12px 40px rgba(0, 0, 0, .14);

  /* Zpětná kompatibilita */
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-card);

  /* ── Přechody ──────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Header ────────────────────────────────────────────────────────── */
  --header-height:        80px;
  --header-height-mobile: 64px;
  --header-bg:            var(--ds-white);
  --header-shadow:        var(--shadow-soft);

  /* ── WCAG Focus ring ───────────────────────────────────────────────── */
  --focus-ring:        3px solid var(--ds-teal-dark);
  --focus-ring-offset: 2px;

  /* ── Hero dynamické hodnoty (přepisuje wp_add_inline_style) ─────────
     Výchozí hodnoty; PHP enqueue.php je přepíše dle Customizeru.        */
  --hero-overlay-opacity:      0.55;
  --hero-min-height-mobile:    420px;
  --hero-min-height-desktop:   580px;
  --hero-text-align:           center;
  --hero-slider-transition:    1000ms;

  /* ── Typografie – dynamické hodnoty (enqueue.php → wp_add_inline_style)
     Výchozí odpovídají self-hosted fontům; přepsáno Customizerrem.
     --msbela-font-*   = CSS font-family stack
     --msbela-h*-size  = font-size nadpisů v rem
     ─────────────────────────────────────────────────────────────────── */
  --msbela-font-display:    'Fredoka One', cursive;
  --msbela-font-ui:         'Nunito', sans-serif;
  --msbela-font-body:       'Quicksand', sans-serif;
  --msbela-h1-size:         3.0rem;
  --msbela-h2-size:         2.4rem;
  --msbela-h3-size:         1.8rem;
  --msbela-h4-size:         1.4rem;
  --msbela-base-font-size:  16px;
  --msbela-line-height:     1.7;
}

/* --------------------------------------------------------------------------
   3. Box-sizing & Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--ds-text-dark);
  background-color: var(--ds-cream);
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ── Napojení CSS vars na elementy ────────────────────────────────────────
   Customizer přepíše --msbela-* vars v :root (viz enqueue.php).
   Díky CSS custom properties se změna okamžitě propaguje všude.
   ──────────────────────────────────────────────────────────────────────── */

html {
  font-size: var(--msbela-base-font-size, 16px);
}

/* Přepíše --font-display/ui/body vars z :root */
:root {
  --font-display: var(--msbela-font-display);
  --font-ui:      var(--msbela-font-ui);
  --font-body:    var(--msbela-font-body);
}

h1 { font-size: var(--msbela-h1-size, 3.0rem); }
h2 { font-size: var(--msbela-h2-size, 2.4rem); }
h3 { font-size: var(--msbela-h3-size, 1.8rem); }
h4 { font-size: var(--msbela-h4-size, 1.4rem); }


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--ds-text-dark);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

body {
  line-height: var(--msbela-line-height, var(--line-height-base));
}

a {
  color: var(--ds-teal-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast);
}

a:hover, a:focus {
  color: var(--color-primary-dark);
}

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. WCAG Focus Styles
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   5. Skip Link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--ds-teal-dark);
  color: var(--ds-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  font-family: var(--font-ui);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* --------------------------------------------------------------------------
   6. Screen Reader Only
   -------------------------------------------------------------------------- */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  word-wrap: normal;
}

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

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-xbold);
  font-size: var(--font-size-base);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color            var(--transition-fast),
    border-color     var(--transition-fast),
    transform        var(--transition-fast),
    box-shadow       var(--transition-fast);
  box-shadow: var(--shadow-btn);
  white-space: nowrap;
  min-height: 44px; /* WCAG tap target */
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  text-decoration: none;
}

/* Primární – teal */
.btn--primary {
  background-color: var(--ds-teal-dark);
  color: var(--ds-white);
  border-color: var(--ds-teal-dark);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--ds-white);
}

/* CTA červené */
.btn--cta-red {
  background-color: var(--ds-red);
  color: var(--ds-white);
  border-color: var(--ds-red);
}

.btn--cta-red:hover,
.btn--cta-red:focus-visible {
  background-color: var(--ds-red-dark);
  border-color: var(--ds-red-dark);
  color: var(--ds-white);
}

/* CTA tyrkysové */
.btn--cta-teal {
  background-color: var(--ds-teal);
  color: var(--ds-white);
  border-color: var(--ds-teal);
}

.btn--cta-teal:hover,
.btn--cta-teal:focus-visible {
  background-color: var(--ds-teal-dark);
  border-color: var(--ds-teal-dark);
  color: var(--ds-white);
}

/* Ghost */
.btn--ghost {
  background-color: transparent;
  color: var(--ds-teal-dark);
  border-color: var(--ds-teal-dark);
  box-shadow: none;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--ds-teal-light);
  color: var(--ds-teal-dark);
}

/* White (pro tmavá pozadí) */
.btn--white {
  background-color: var(--ds-white);
  color: var(--ds-red);
  border-color: var(--ds-white);
  font-family: var(--font-display);
}

.btn--white:hover,
.btn--white:focus-visible {
  background-color: var(--ds-cream);
  border-color: var(--ds-cream);
  color: var(--ds-red-dark);
}

/* Sizes */
.btn--lg, .btn--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

.btn--sm, .btn--small {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   9. Site Header
   Sticky header, brand logo, CTA tlačítka.
   Z-index 200 – nad hero (z-index 0) a jeho obsahem.
   Overflow visible – nutné pro desktop dropdown menu.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--ds-white);
  box-shadow: var(--shadow-soft);
  min-height: var(--header-height-mobile);
  /* overflow: visible je výchozí – nemusíme psát, ale NIKDY hidden (dropdown) */
}

@media (min-width: 992px) {
  .site-header {
    min-height: var(--header-height);
  }
}

/* SVG oblaky – dekorativní, overflow:hidden jen zde */
.site-header__clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cloud {
  position: absolute;
  opacity: 0;
}

@media (min-width: 640px) {
  .cloud--1 { width: 180px; top: -20px; left: 38%; opacity: 1; }
  .cloud--2 { width: 130px; top:   5px; left: 60%; opacity: 1; }
  .cloud--3 { width: 120px; top: -10px; left: 73%; opacity: 1; }
}

/* Inner layout */
.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height-mobile);
  padding-block: var(--space-3);
}

@media (min-width: 992px) {
  .site-header__inner {
    min-height: var(--header-height);
    padding-block: 0;
    gap: var(--space-4);
  }
}

/* ── Brand ──────────────────────────────────────────────────────────── */
.siteHeader__brand,
.site-header__branding {
  flex-shrink: 0;
  order: 1;
}

.siteHeader__brand-link,
.site-header__logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  border-radius: var(--radius-sm);
  /* Omezení šířky na mobilu – předchází přetékání */
  max-width: calc(100vw - 120px);
}

.siteHeader__brand-link:focus-visible,
.site-header__logo-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Logo wrap */
.siteHeader__logo-wrap,
.site-header__owl-wrap {
  flex-shrink: 0;
  line-height: 0;
  display: block;
}

/* SVG sovička */
.siteHeader__owl,
.site-header__owl-svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
  width: 44px;
  height: 44px;
}

@media (min-width: 992px) {
  .siteHeader__owl,
  .site-header__owl-svg {
    width: 52px;
    height: 52px;
  }
}

/* Vlastní logo obrázek */
.siteHeader__logo-img,
.site-header__logo-img,
.site-header__logo {
  display: block;
  max-height: 44px;
  width: auto;
}

@media (min-width: 992px) {
  .siteHeader__logo-img,
  .site-header__logo-img,
  .site-header__logo {
    max-height: 52px;
  }
}

/* Textová část branding */
.siteHeader__text,
.site-header__branding-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Ořez dlouhého názvu na mobilu */
  overflow: hidden;
}

.siteHeader__name,
.site-header__site-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ds-teal-dark);
  line-height: 1.2;
  /* Skrýt přetékání na velmi malých mobilech */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .siteHeader__name,
  .site-header__site-name {
    font-size: 1.05rem;
    white-space: normal;
  }
}

@media (min-width: 992px) {
  .siteHeader__name,
  .site-header__site-name {
    font-size: 1.2rem;
  }
}

.siteHeader__tagline,
.site-header__tagline {
  margin: 0;
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  color: var(--ds-text-light);
  display: none;
}

@media (min-width: 992px) {
  .siteHeader__tagline,
  .site-header__tagline {
    display: block;
  }
}

/* Header CTA tlačítka – pouze desktop */
.site-header__ctas {
  display: none;
  flex-shrink: 0;
  gap: var(--space-2);
  order: 3;
}

@media (min-width: 992px) {
  .site-header__ctas {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   10. Hamburger toggle (mobile only)
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;  /* touch target */
  padding: var(--space-2);
  background: transparent;
  border: 2px solid var(--ds-teal-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  order: 4;        /* hamburger vpravo */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.nav-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (min-width: 992px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--ds-teal-dark);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Animace → X při otevření (aria-expanded=true na hamburgeru) */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   11. Desktop Main Navigation (.mainNav)
   Viditelná pouze ≥ 992px. Mobil má vlastní drawer (.mobileNav).
   -------------------------------------------------------------------------- */

/* Na mobilu desktop nav skryta – drawer přebírá */
.mainNav {
  display: none;
}

@media (min-width: 992px) {
  .mainNav {
    display: flex;
    order: 2;
    flex: 1;
    justify-content: center;
    overflow: visible; /* nutné pro dropdown */
  }
}

.mainNav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Výchozí: blokový seznam (mobile) */
  display: block;
}

/* Desktop ≥992px: položky vedle sebe */
@media (min-width: 992px) {
  .mainNav__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}

/* Mobile drawer: vždy sloupec, bez ohledu na dědičnost */
.mobileNav__nav .mainNav__list,
.mobileNav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mainNav__item {
  position: relative;
}

/* Link v hlavní navigaci */
.mainNav__link {
  display: block;
  padding: var(--space-3) var(--space-3);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  color: var(--ds-text-mid);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mainNav__link:hover,
.mainNav__link:focus-visible {
  background-color: var(--ds-sky-pale);
  color: var(--ds-teal-dark);
  outline: none;
}

.mainNav__link[aria-current="page"] {
  background-color: var(--ds-sky-pale);
  color: var(--ds-teal-dark);
  font-weight: var(--font-weight-xbold);
}

/* Toggle chevron button (přidán Walkerem pro položky s dětmi) */
.mainNav__toggle {
  display: none;        /* Skryto na desktopu – submenu otevírá CSS hover/focus-within */
}

.mainNav__toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.mainNav__toggle svg {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
  pointer-events: none;
}

.mainNav__item--has-children.is-open > .mainNav__toggle svg,
.mainNav__item--has-children:hover > .mainNav__toggle svg,
.mainNav__item--has-children:focus-within > .mainNav__toggle svg {
  transform: rotate(180deg);
}

/* -/* --------------------------------------------------------------------------
   11a. Desktop Dropdown Submenu (2. a 3. urovne)

   PRAVIDLO: hover/focus-within selektory POUZE uvnitr @media (min-width:992px).
   Tim se eliminuji vsechny konflikty s mobilnim accordion.
   Na mobilu styl ridi VYHRADNE JS pres .is-open + max-height.
   -------------------------------------------------------------------------- */
@keyframes navFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Vychozi: skryto vsude */
.mainNav__submenu {
  display: none;

  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 200px;
  z-index: 9999;

  background: var(--ds-white);
  border: 1px solid var(--ds-green-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2) 0;
  list-style: none;
  margin: 0;
}

/* 3. uroven: posunute vpravo */
.mainNav__submenu .mainNav__submenu {
  top: -4px;
  left: 100%;
}

/* Desktop: hover + focus-within jen na >=992px (zadny konflikt s mobile) */
@media (min-width: 992px) {
  .mainNav__item--has-children:hover > .mainNav__submenu,
  .mainNav__item--has-children:focus-within > .mainNav__submenu,
  .mainNav__item--has-children.is-open > .mainNav__submenu {
    display: block;
    animation: navFadeDown 160ms ease forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mainNav__item--has-children:hover > .mainNav__submenu,
  .mainNav__item--has-children:focus-within > .mainNav__submenu,
  .mainNav__item--has-children.is-open > .mainNav__submenu {
    animation: none;
  }
}

/* Polozky v submenu */
.mainNav__submenu .mainNav__item {
  position: relative;
}

.mainNav__submenu .mainNav__link {
  padding: var(--space-3) var(--space-5);
  border-radius: 0;
  white-space: normal;
}

.mainNav__submenu .mainNav__link:hover,
.mainNav__submenu .mainNav__link:focus-visible {
  background-color: var(--ds-sky-pale);
}

/* Indikator 3. urovne - sipka vpravo */
.mainNav__submenu .mainNav__item--has-children > .mainNav__link::after {
  content: ' ›';
  color: var(--ds-text-light);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   11b. Mobile Navigation Drawer — REDESIGN v2.2
   Krásný full-height drawer s gradientní hlavičkou, animovanými položkami,
   akordeonem a CTA sekcí. Vizuální identita MŠ Bělá pod Bezdězem.
   -------------------------------------------------------------------------- */

/* ── Backdrop ──────────────────────────────────────────────────────────── */
.mobileNav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 298;
  background: rgba(29, 138, 125, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.mobileNav__backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 992px) {
  .mobileNav__backdrop { display: none !important; }
}

/* ── Drawer panel ──────────────────────────────────────────────────────── */
.mobileNav__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 92vw);
  z-index: 299;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ds-white); /* BUG1 FIX: panel musí mít vlastní bg (fixed element neztrácí průhlednost v rozích) */

  /* Slide-in transform */
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 380ms;
  visibility: hidden;
  pointer-events: none;

  /* Zaoblený levý roh */
  border-radius: 24px 0 0 24px;
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.18), -2px 0 12px rgba(0, 0, 0, 0.08);
}

.mobileNav__panel.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mobileNav__panel { transition: none; }
  .mobileNav__backdrop { transition: none; }
}

@media (min-width: 992px) {
  .mobileNav__panel { display: none !important; }
}

/* Scroll lock */
body.mobileNav-lock { overflow: hidden; }

/* ── Drawer header — gradientní pruh ───────────────────────────────────── */
.mobileNav__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);

  /* Teal → sky gradient */
  background: linear-gradient(135deg, var(--ds-teal-dark) 0%, var(--ds-teal) 50%, var(--ds-sky) 100%);

  /* Wave na spodním okraji */
  clip-path: ellipse(100% 100% at 50% 0%);
  padding-bottom: calc(var(--space-5) + 8px);
}

.mobileNav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.mobileNav__owl {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.mobileNav__owl svg {
  width: 30px;
  height: 30px;
  display: block;
}

.mobileNav__heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: white;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobileNav__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-full);
  color: white;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.mobileNav__close:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: rotate(90deg);
}

.mobileNav__close:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

.mobileNav__close svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* ── Scrollovatelná tělo draweru ───────────────────────────────────────── */
.mobileNav__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--ds-white);
  display: flex;
  flex-direction: column;
}

/* ── Nav list ──────────────────────────────────────────────────────────── */
.mobileNav__nav {
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.mobileNav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Animace položek při otevření draweru */
.mobileNav__panel.is-open .mainNav__item {
  animation: mobileNavItemIn 320ms ease forwards;
  opacity: 0;
}

.mobileNav__panel.is-open .mainNav__item:nth-child(1)  { animation-delay: 60ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(2)  { animation-delay: 90ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(3)  { animation-delay: 120ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(4)  { animation-delay: 150ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(5)  { animation-delay: 180ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(6)  { animation-delay: 210ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(7)  { animation-delay: 240ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(8)  { animation-delay: 270ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(9)  { animation-delay: 300ms; }
.mobileNav__panel.is-open .mainNav__item:nth-child(10) { animation-delay: 330ms; }

@keyframes mobileNavItemIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mobileNav__panel.is-open .mainNav__item { animation: none; opacity: 1; }
}

/* Každá položka
 * BUG2 FIX: display:flex + flex-wrap:wrap
 * → <a> a <button> jsou vedle sebe (ne pod sebou)
 * → <ul.mainNav__submenu> s flex-basis:100% padne na vlastní řádek
 */
.mobileNav__nav .mainNav__item {
  position: static;
  display: flex;          /* BUG2 FIX */
  flex-wrap: wrap;        /* BUG2 FIX: submenu zalamuje na nový řádek */
  align-items: center;    /* BUG2 FIX: link + tlačítko vertikálně zarovnány */
  border-bottom: 1px solid rgba(0, 0, 0, 0.045);
}

.mobileNav__nav .mainNav__item:last-child { border-bottom: none; }

/* Link
 * BUG3 FIX: flex:1 → link vyplní celý řádek, tlačítko zůstane vpravo
 */
.mobileNav__nav .mainNav__link {
  flex: 1;                /* BUG3 FIX */
  min-width: 0;           /* BUG3 FIX: zabraňuje přetékání textu */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ds-text-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color 120ms ease, color 120ms ease;
  white-space: normal;
  line-height: 1.25;
}

/* Barevná tečka před každou položkou */
.mobileNav__nav .mainNav__link::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--ds-green-light);
  transition: background-color 120ms ease, transform 120ms ease;
}

.mobileNav__nav .mainNav__link:hover,
.mobileNav__nav .mainNav__link:focus-visible {
  background: var(--ds-sky-pale);
  color: var(--ds-teal-dark);
}

.mobileNav__nav .mainNav__link:hover::before,
.mobileNav__nav .mainNav__link:focus-visible::before {
  background: var(--ds-teal);
  transform: scale(1.5);
}

/* Aktivní stránka */
.mobileNav__nav .mainNav__item--current > .mainNav__link {
  color: var(--ds-teal-dark);
  font-weight: 400;
  background: linear-gradient(90deg, var(--ds-teal-light) 0%, var(--ds-sky-pale) 100%);
}

.mobileNav__nav .mainNav__item--current > .mainNav__link::before {
  background: var(--ds-teal-dark);
  transform: scale(1.3);
}

/* ── Toggle button (chevron) ───────────────────────────────────────────── */
.mobileNav__nav .mainNav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin-left: auto;
  background: var(--ds-green-pale);
  border: 1.5px solid var(--ds-green-light);
  border-radius: var(--radius-full);
  color: var(--ds-teal-dark);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.mobileNav__nav .mainNav__toggle:hover {
  background: var(--ds-teal-light);
  border-color: var(--ds-teal);
}

.mobileNav__nav .mainNav__toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.mobileNav__nav .mainNav__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobileNav__nav .mainNav__item--has-children > .mainNav__toggle[aria-expanded="true"] {
  background: var(--ds-teal-light);
  border-color: var(--ds-teal);
}

.mobileNav__nav .mainNav__item--has-children > .mainNav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ── Accordion submenu ─────────────────────────────────────────────────── */
.mobileNav__nav .mainNav__submenu {
  position: static;
  flex-basis: 100%;       /* BUG4 FIX: v flex kontejneru zalamuje na vlastní řádek */
  width: 100%;            /* BUG4 FIX: záloha pro starší prohlížeče */
  display: block;
  overflow: hidden;
  max-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  animation: none;
  transition: max-height 300ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Odsazení zleva = odděluje podmenu vizuálně */
  margin-left: var(--space-3);
  border-left: 2px solid var(--ds-green-light);
}

@media (prefers-reduced-motion: reduce) {
  .mobileNav__nav .mainNav__submenu { transition: none; }
}

.mobileNav__nav .mainNav__item--has-children.is-open > .mainNav__submenu {
  /* max-height nastavuje JS na scrollHeight */
}

/* Položky 2. úrovně */
.mobileNav__nav .mainNav__submenu .mainNav__link {
  padding: 10px var(--space-3) 10px var(--space-4);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ds-text-mid);
}

.mobileNav__nav .mainNav__submenu .mainNav__link::before {
  width: 5px;
  height: 5px;
  background: var(--ds-teal-light);
}

.mobileNav__nav .mainNav__submenu .mainNav__link:hover::before {
  background: var(--ds-teal);
  transform: scale(1.6);
}

/* Položky 3. úrovně */
.mobileNav__nav .mainNav__submenu .mainNav__submenu {
  margin-left: var(--space-4);
}

.mobileNav__nav .mainNav__submenu .mainNav__submenu .mainNav__link {
  font-size: 0.85rem;
  padding-left: var(--space-4);
}

/* ── CTA sekce v patičce draweru ───────────────────────────────────────── */
.mobileNav__ctas {
  margin-top: auto;
  padding: var(--space-4) var(--space-4);
  background: linear-gradient(180deg, var(--ds-white) 0%, var(--ds-green-pale) 100%);
  border-top: 1px solid var(--ds-green-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobileNav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.mobileNav__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.mobileNav__cta--zapis {
  background: var(--ds-red);
  color: white;
  box-shadow: 0 4px 16px rgba(232, 64, 64, 0.35);
}

.mobileNav__cta--kontakt {
  background: var(--ds-teal);
  color: white;
  box-shadow: 0 4px 16px rgba(38, 181, 165, 0.35);
}

/* ── Vyhledávání ───────────────────────────────────────────────────────── */
.mobileNav__search {
  padding: var(--space-4) var(--space-4);
  background: var(--ds-green-pale);
  border-top: 1px solid var(--ds-green-light);
}

.mobileNav__search-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ds-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 var(--space-2);
}

.mobileNav__search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--ds-white);
  border: 1.5px solid var(--ds-green-light);
  border-radius: var(--radius-full);
  padding: 4px 4px 4px var(--space-4);
  transition: border-color 150ms ease;
}

.mobileNav__search-form:focus-within {
  border-color: var(--ds-teal);
}

.mobileNav__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ds-text-dark);
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
}

.mobileNav__search-input::placeholder { color: var(--ds-text-light); }

.mobileNav__search-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--ds-teal);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.mobileNav__search-btn:hover { background: var(--ds-teal-dark); }

.mobileNav__search-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.mobileNav__search-btn svg {
  display: block;
  width: 15px;
  height: 15px;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   12. Hero sekce – základní
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: var(--hero-min-height-mobile, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #C8EDFB  0%,
    #9FD8F0 28%,
    #B8E0A0 60%,
    #8BC34A 82%,
    #7AAD3E 100%
  );
  /* Žádný transform zde! Transform na wrapperu by rozbil sticky positioning
     rodičovského headeru. Hero nemá transform. */
}

@media (min-width: 768px) {
  .hero {
    min-height: clamp(480px, 60vh, var(--hero-min-height-desktop, 580px));
  }
}

/* Statický obrázek pozadí */
.hero__image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Overlay – barva + průhlednost z CSS var (Customizer) */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(29, 138, 125, var(--hero-overlay-opacity, .55)) 0%,
    rgba(0,  60,  50,  var(--hero-overlay-opacity, .45)) 100%
  );
}

/* SVG oblaky uvnitř hero */
.hero__clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero__cloud {
  position: absolute;
}

.hero__cloud--1 {
  width: clamp(140px, 18vw, 240px);
  top: 8%;
  left: 4%;
  opacity: .75;
}

.hero__cloud--2 {
  width: clamp(100px, 13vw, 180px);
  top: 4%;
  right: 8%;
  opacity: .65;
}

.hero__cloud--3 {
  width: clamp(80px, 10vw, 150px);
  top: 18%;
  right: 22%;
  opacity: .5;
}

/* Hero content – zarovnání dle CSS var */
.hero__content {
  position: relative;
  z-index: 3;
  padding-block: var(--space-12);
  text-align: var(--hero-text-align, center);
  max-width: 760px;
}

/* Levé zarovnání – obsah vlevo přesunut */
.hero--left .hero__content {
  margin-inline: 0 auto;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 400;
  color: var(--ds-white);
  margin-bottom: var(--space-4);
  text-shadow: 0 3px 12px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .35);
  line-height: 1.1;
}

.hero__subtitle {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: var(--font-weight-semibold);
  font-style: italic;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  margin-bottom: var(--space-6);
}

.hero__text {
  font-family: var(--font-ui);
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, .92);
  margin-bottom: var(--space-6);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: var(--hero-text-align, center);
}

/* --------------------------------------------------------------------------
   12A. Hero – Slider mód
   Každý slide je position:absolute, opacity:0. Aktivní slide má opacity:1.
   Fade přechod přes CSS transition. JS přepíná třídu .is-active.
   První slide je viditelný hned (is-active class v HTML = no CLS).
   -------------------------------------------------------------------------- */
.hero--slider .hero__slides-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hero-slider-transition, 1000ms) ease;
  /* Pointer-events none pro neaktivní slide */
  pointer-events: none;
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Navigační tečky slideru */
.hero__slider-nav {
  position: absolute;
  bottom: calc(var(--space-5) + 90px); /* nad krajinou */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: var(--space-2);
  pointer-events: auto;
}

@media (min-width: 640px) {
  .hero__slider-nav {
    bottom: calc(var(--space-5) + 130px);
  }
}

.hero__slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  border: 2px solid rgba(255, 255, 255, .8);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.hero__slider-dot.is-active,
.hero__slider-dot:hover,
.hero__slider-dot:focus-visible {
  background: var(--ds-white);
  transform: scale(1.3);
}

/* --------------------------------------------------------------------------
   12B. Hero – YouTube mód
   iframe je absolutně pozicovaný, Cover efekt: width=177.78vh, min-width=100%,
   height=56.25vw, min-height=100%, centred. Bez deformace, responzivní.
   -------------------------------------------------------------------------- */
.hero--youtube .hero__youtube-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* pointer-events:none – video nesmí zachytit kliknutí (kontroly=0) */
  pointer-events: none;
}

.hero__youtube-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Cover math pro 16:9 video:
     Šířka: 177.78vh (= 100vh × 16/9) – zaručí pokrytí vždy po výšce.
     Min-width: 100% – zaručí pokrytí po šířce u wide viewportů.
     Výška: 56.25vw (= 100vw × 9/16) – zaručí pokrytí po šířce.
     Min-height: 100% – zaručí pokrytí po výšce u tall viewportů.  */
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  border: 0;
  /* pointer-events:none – controls=0 v URL, iframe nesmí reagovat na klik */
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   12C. Hero – Sound toggle v2.0
   iOS-style přepínač zvuku YouTube pozadí.

   ── Redesign v2.0 ────────────────────────────────────────────────────────
   Přechod z dark-frosted-glass na pastelový light-mode switch, který
   vizuálně zapadá do ilustrativního školkového designu.

   ── Anatomy (flex row, left→right) ───────────────────────────────────────
     [speaker SVG 18px] [track 52×30px s knobem 24px] [label "Zvuk"]

   ── Barevný systém ───────────────────────────────────────────────────────
   OFF  track bg:    #C2CDD6  (pastelová blue-gray – kontrast 1.9:1 na knob)
   ON   track bg:    #26B5A5  (ds-teal – tyrkysová z brand palety)
   Backdrop:         rgba(255,255,255,0.94)  light frosted-glass
   Icon OFF:         #6B7B8A  (mid-tone gray, kontrast 4.7:1 na white backdrop)
   Icon ON:          #1D8A7D  (ds-teal-dark, kontrast 4.8:1 na white backdrop)
   Label:            #2D2D2D  (ds-text-dark, kontrast 16.1:1 na white backdrop)

   ── WCAG 2.1 AA compliance ────────────────────────────────────────────────
   • Backdrop bílý → text #2D2D2D = 16.1:1 ✓ (text AA min 4.5:1)
   • Icon #6B7B8A na backdrop white = 4.7:1 ✓ (ikona non-text → 3:1)
   • Focus ring: 3px teal-dark (#1D8A7D) = viditelný na libovolném hero bg
   • Touch target: min 44×44px ✓ (WCAG 2.5.5)
   • aria-pressed + aria-label = plná screen reader podpora ✓

   ── CSS stavový vzor (single source of truth: aria-pressed) ──────────────
   JS NIKDY nepřidává CSS třídy pro stav – vše řídí [aria-pressed] selektor.
   Výhoda: hydratace JS je postupná, vizuální stav vychází z HTML atributu.

   ── Knob rozměry & travel ────────────────────────────────────────────────
   Track:  52px × 30px
   Knob:   24px × 24px  (offset od hrany: 3px = (30-24)/2)
   Travel: 52 − 24 − 3 − 3 = 22px → translateX(22px) ve stavu ON

   ── Animace ──────────────────────────────────────────────────────────────
   Knob: cubic-bezier(0.34, 1.56, 0.64, 1) – spring s lehkým overshootem
   250ms – rychlé ale perceptuálně "živé"; vhodné pro školkový charakter
   Track bg: linear ease 250ms

   ── Z-index stack ────────────────────────────────────────────────────────
   YouTube iframe:  z-index 0
   Hero overlay:    z-index 1
   Sound toggle:    z-index 5   ← nad overlayem, pod sticky headerem (100)
   -------------------------------------------------------------------------- */

/* ── Wrapper: pozicování v rohu hero ─────────────────────────────────────── */
.hero__sound-control {
  position:       absolute;
  bottom:         calc(var(--space-5) + 90px);  /* nad krajinovou SVG vrstvou */
  right:          var(--space-5);
  z-index:        5;
  pointer-events: auto;           /* přepisuje pointer-events:none youtube-wrapu */
}

/* ── Button – pill container ─────────────────────────────────────────────── */
.hero__sound-toggle {
  /* Layout */
  display:     inline-flex;
  align-items: center;
  gap:         10px;

  /* Min. dotyková plocha 44×44px (WCAG 2.5.5) */
  min-height: 44px;
  padding:    0 14px 0 10px;

  /* Light frosted-glass pill – čitelnost na libovolném hero bg */
  border-radius:          999px;
  background:             rgba(255, 255, 255, 0.94);
  border:                 1.5px solid rgba(255, 255, 255, 0.70);
  box-shadow:             0 4px 20px rgba(0, 0, 0, 0.18),
                          0 1px  4px rgba(0, 0, 0, 0.10),
                          inset 0 1px 0 rgba(255, 255, 255, 0.80);
  backdrop-filter:        blur(12px);
  -webkit-backdrop-filter:blur(12px);

  /* Reset button defaults */
  cursor:        pointer;
  appearance:    none;
  -webkit-appearance: none;
  font-family:   var(--font-ui);
  font-size:     0;             /* skryje white-space artefakty flex dětí */
  line-height:   1;
  user-select:   none;

  /* Transitions */
  transition:
    box-shadow       200ms ease,
    background-color 200ms ease,
    transform        150ms ease;
}

/* Hover – lehký lift + sytější stín */
.hero__sound-toggle:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.22),
    0 2px  6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  transform: translateY(-1px);
}

/* Active – micro press */
.hero__sound-toggle:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}

/* Focus-visible: teal-dark ring – kontrast splněn na světlém i tmavém bg.
   offset 3px → mezera mezi buttonem a ringem pro přehlednost */
.hero__sound-toggle:focus-visible {
  outline:        3px solid var(--ds-teal-dark);
  outline-offset: 3px;
}

/* Skryje dotted :focus v FF/starém Chrome (používá :focus-visible nativně) */
.hero__sound-toggle:focus:not(:focus-visible) {
  outline: none;
}

/* ── Speaker icon ─────────────────────────────────────────────────────────── */
.hero__sound-toggle__icon {
  display:     block;
  width:       18px;
  height:      18px;
  flex-shrink: 0;

  /* OFF: mid-gray (kontrast 4.7:1 na bílém backdropu = WCAG AA non-text) */
  color:      #6B7B8A;

  /* Ikona se křížkuje přes CSS opacity pro plynulý cross-fade */
  transition: color 200ms ease, opacity 200ms ease;
}

/* ON: teal-dark pro pozitivní vizuální potvrzení */
.hero__sound-toggle[aria-pressed="true"] .hero__sound-toggle__icon {
  color: var(--ds-teal-dark);
}

/* ── Track (pill pozadí pro knob) ──────────────────────────────────────────── */
.hero__sound-toggle__track {
  position:      relative;
  display:       block;
  width:         52px;
  height:        30px;
  border-radius: 999px;
  flex-shrink:   0;

  /* OFF: pastelová blue-gray – rozlišitelná od backdropu, ne agresivní */
  background:  #C2CDD6;
  box-shadow:  inset 0 1px 3px rgba(0, 0, 0, 0.14);

  transition: background-color 250ms ease;
}

/* ON: brand tyrkys */
.hero__sound-toggle[aria-pressed="true"] .hero__sound-toggle__track {
  background: var(--ds-teal);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* ── Knob (posuvný kruh) ──────────────────────────────────────────────────── */
.hero__sound-toggle__knob {
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         24px;
  height:        24px;
  border-radius: 50%;
  background:    var(--ds-white);

  /* Vrstvený stín: spodní stín + vnitřní highlight = iOS realismus */
  box-shadow:
    0 2px  6px rgba(0, 0, 0, 0.22),
    0 0   0 0.5px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);

  /* Spring cubic-bezier: lehký overshoot = hravý, školkový charakter.
     250ms = dost rychlé aby nebylo čekání, dost pomalé aby byl vidět. */
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* GPU vrstva pro transform animaci – žádný layout/paint overhead */
  will-change: transform;
}

/* ON: 52 − 24 − 3 − 3 = 22px */
.hero__sound-toggle[aria-pressed="true"] .hero__sound-toggle__knob {
  transform: translateX(22px);
}

/* ── Textový label "Zvuk" ──────────────────────────────────────────────────── */
/*    aria-hidden="true" na span → SR čte aria-label buttonu, ne tento text,
      aby nedošlo k duplicitnímu přečtení.
      Vizuálně přítomný: informuje zrakové uživatele o funkci prvku.       */
.hero__sound-toggle__label {
  font-family:    var(--font-ui);
  font-size:      0.6875rem;   /* 11px – kompaktní ale čitelné */
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--ds-text-mid);   /* #5A5A5A – kontrast 7.0:1 na bílém bg */
  line-height:    1;
  white-space:    nowrap;
}

/* ── Responsive: tablet+ – posun nad vyšší krajinovou SVG ─────────────────── */
@media (min-width: 640px) {
  .hero__sound-control {
    bottom: calc(var(--space-5) + 130px);
  }
}

/* ── Redukované pohyby (prefers-reduced-motion) ──────────────────────────── */
/*    Odstraní spring animaci knob + všechny transitions buttonu.
      Toggle zůstane funkční – pouze okamžitý vizuální přeskok.            */
@media (prefers-reduced-motion: reduce) {
  .hero__sound-toggle__knob {
    transition: none;
  }
  .hero__sound-toggle {
    transition: none;
  }
  .hero__sound-toggle__track {
    transition: none;
  }
  .hero__sound-toggle__icon {
    transition: none;
  }
}

/* ── High-contrast mode (forced-colors) ─────────────────────────────────── */
/*    Windows HC mode: nahradí naše barvy systémovými, ale zachová layout.
      ButtonText / Highlight = systémové HC tokeny.                         */
@media (forced-colors: active) {
  .hero__sound-toggle {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    forced-color-adjust: none;
  }
  .hero__sound-toggle__track {
    background: ButtonText;
    forced-color-adjust: none;
  }
  .hero__sound-toggle[aria-pressed="true"] .hero__sound-toggle__track {
    background: Highlight;
  }
  .hero__sound-toggle__knob {
    background: ButtonFace;
    forced-color-adjust: none;
  }
}


/* --------------------------------------------------------------------------
   13. Section helpers
   -------------------------------------------------------------------------- */
.section-padded {
  padding-block: var(--section-pad);
}

.section-alt {
  background-color: var(--ds-green-pale);
}

/* --------------------------------------------------------------------------
   Kanonická definice sekčního nadpisu – JEDINÁ, žádné duplicity
   Používají: .section--provozy, .section--aktuality, home-kontakt, home-jidelnicek, …
   .section__title  = BEM varianta (alias)
   .section-title   = původní třída (zachována pro zpětnou kompatibilitu)
   -------------------------------------------------------------------------- */

/* BEM alias – nové sekce (provozy, aktuality) */
.section__title,
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, var(--font-size-2xl));
  font-weight: 400;            /* Fredoka One je inherentně bold */
  font-style: italic;          /* v1.3 design – kurzíva */
  color: var(--ds-teal-dark);
  margin-bottom: var(--space-8);
  position: relative;
  padding-bottom: var(--space-5);
  display: block;
  line-height: 1.2;
}

/* Dekorativní podtržení – kratší než text, zaoblené */
.section__title::after,
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;                     /* zarovnáno vlevo (konzistentní s .section-title v kontaktu) */
  width: 56px;                 /* kratší než šířka textu (~40-60% běžného nadpisu) */
  height: 4px;
  background: linear-gradient(90deg, var(--ds-teal), var(--ds-sky));
  border-radius: var(--radius-full);
  display: block;              /* explicitní – zabraňuje přepisu na display:none */
}

/* Centrované verze (pokud je nadpis text-align:center) */
.section__title--centered::after,
.section-title--centered::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile: trochu menší spacing */
@media (max-width: 639px) {
  .section__title,
  .section-title {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
  }
}

.section-more {
  margin-top: var(--space-8);
  text-align: center;
}

/* --------------------------------------------------------------------------
   14. Tiles / Dlaždice
   -------------------------------------------------------------------------- */
.home-tiles {
  background: linear-gradient(135deg, var(--ds-teal-dark), var(--ds-teal));
  padding-block: var(--space-6);
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .tiles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-md);
  color: var(--ds-white);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.tile:hover, .tile:focus-visible {
  background: rgba(255, 255, 255, .24);
  color: var(--ds-white);
  transform: translateY(-3px);
  outline: 3px solid rgba(255, 255, 255, .6);
  outline-offset: 2px;
}

.tile__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

.tile-icon--jidelnicek .tile__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z'/%3E%3C/svg%3E");
}

.tile-icon--provozy .tile__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

.tile-icon--dokumenty .tile__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

.tile-icon--aktuality .tile__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-7 3h2v2h-2V7zm0 4h2v6h-2v-6zM9 7h2v2H9V7zm0 4h2v6H9v-6z'/%3E%3C/svg%3E");
}

.tile__label {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.tile__desc {
  font-size: var(--font-size-sm);
  opacity: .85;
  display: none;
}

@media (min-width: 640px) {
  .tile__desc { display: block; }
}

/* --------------------------------------------------------------------------
   15. Provozy Grid
   -------------------------------------------------------------------------- */
.home-provozy {
  background-color: var(--ds-cream);
  padding-block: var(--section-pad);
}

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

@media (min-width: 640px) {
  .provozy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .provozy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.provoz-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.provoz-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events: none;
  border-radius: var(--radius-lg);
}

.provoz-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Barevné varianty dle pořadí v PHP loopě */
.provoz-card--1 { background: linear-gradient(145deg, #FFE0D0, #FFCDB8); }
.provoz-card--2 { background: linear-gradient(145deg, #B2EBF2, #80DEEA); }
.provoz-card--3 { background: linear-gradient(145deg, #FFF9C4, #FFF176); }

/* Emoji ilustrace */
.provoz-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-5) var(--space-3);
  font-size: 4.5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.14));
  text-align: center;
}

.provoz-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-6);
  text-align: center;
  gap: var(--space-3);
}

.provoz-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  margin: 0;
  color: var(--ds-text-dark);
  line-height: 1.2;
}

.provoz-card__title a {
  color: var(--ds-text-dark);
  text-decoration: none;
}

.provoz-card__title a:hover {
  color: var(--ds-teal-dark);
}

.provoz-card__stats {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: var(--font-weight-xbold);
  color: var(--ds-text-dark);
  line-height: 1.5;
}

.provoz-card__excerpt {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ds-text-mid);
  margin: 0;
}

.provoz-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: var(--font-size-sm);
  margin: 0;
  text-align: left;
}

.provoz-card__meta-label {
  font-weight: var(--font-weight-semibold);
  color: var(--ds-text-mid);
}

.provoz-card__meta-value {
  color: var(--ds-text-dark);
}

.provoz-card__meta-value a {
  color: var(--ds-teal-dark);
  text-decoration: none;
}

.provoz-card__meta-value a:hover {
  text-decoration: underline;
}

.provoz-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  justify-content: center;
}

/* Tlačítka karty 1 – červené */
.provoz-card--1 .btn--primary {
  background-color: var(--ds-red);
  border-color: var(--ds-red);
}
.provoz-card--1 .btn--primary:hover {
  background-color: var(--ds-red-dark);
  border-color: var(--ds-red-dark);
}

/* Tlačítko karty 3 – tmavší žlutá (4.6:1 kontrast pro bílý text) */
.provoz-card--3 .btn--primary {
  background-color: #D4940A;
  border-color: #D4940A;
  color: var(--ds-white);
}
.provoz-card--3 .btn--primary:hover {
  background-color: #B47A00;
  border-color: #B47A00;
}

/* Zpětná kompatibilita – skryje starý image wrapper */
.provoz-card__image-link {
  display: none;
}

/* --------------------------------------------------------------------------
   16. Post Card Grid – Aktuality
   -------------------------------------------------------------------------- */
.home-aktuality {
  background-color: var(--ds-green-pale);
  padding-block: var(--section-pad);
}

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

@media (min-width: 600px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .post-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--ds-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.post-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.post-card__image-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card__image {
  transform: scale(1.04);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
  gap: var(--space-3);
}

.post-card__meta {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--ds-red);
  margin: 0;
}

.post-card__title {
  font-family: var(--font-ui);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-xbold);
  margin: 0;
  line-height: 1.3;
}

.post-card__title a {
  color: var(--ds-text-dark);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--ds-teal-dark);
}

.post-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--ds-text-mid);
  flex: 1;
  margin: 0;
}

/* Barevné varianty karet aktualit dle index */
.post-card--1 .post-card__meta { color: var(--ds-red); }
.post-card--2 .post-card__meta { color: var(--ds-teal-dark); }
.post-card--3 .post-card__meta { color: #C4621A; }

.post-card--1 .btn--ghost { color: var(--ds-red); border-color: var(--ds-red); }
.post-card--1 .btn--ghost:hover { background-color: #FFF0F0; }

.post-card--2 .btn--ghost { color: var(--ds-teal-dark); border-color: var(--ds-teal-dark); }
.post-card--2 .btn--ghost:hover { background-color: var(--ds-teal-light); }

.post-card--3 .btn--ghost { color: #C4621A; border-color: var(--ds-apricot); }
.post-card--3 .btn--ghost:hover { background-color: var(--ds-apricot-pale); }

/* --------------------------------------------------------------------------
   17. Jídelníček blok – papírový styl
   -------------------------------------------------------------------------- */
.home-jidelnicek {
  background-color: var(--ds-cream);
  padding-block: var(--section-pad);
}

.jidelnicek-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .jidelnicek-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

.jidelnicek-block {
  background: var(--ds-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 20px rgba(0,0,0,.08),
              inset 0 1px 0 rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
}

/* Barevný pruh nahoře */
.jidelnicek-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.jidelnicek-block--a::before {
  background: linear-gradient(90deg, var(--ds-teal), var(--ds-sky));
}

.jidelnicek-block--b::before {
  background: linear-gradient(90deg, var(--ds-apricot), var(--ds-yellow));
}

.jidelnicek-block--empty {
  background: var(--ds-green-pale);
  border-color: var(--ds-green-light);
}

.jidelnicek-block__title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-4);
}

.jidelnicek-block--a .jidelnicek-block__title { color: var(--ds-teal-dark); }
.jidelnicek-block--b .jidelnicek-block__title { color: #C4621A; }

.jidelnicek-block__period {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--ds-text-light);
}

.jidelnicek-block--a .jidelnicek-block__period {
  color: var(--ds-teal-dark);
  border-color: var(--ds-teal-light);
}

.jidelnicek-block--b .jidelnicek-block__period {
  color: #C4621A;
  border-color: var(--ds-apricot-light);
}

.jidelnicek-block__content {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-5);
  color: var(--ds-text-dark);
}

.jidelnicek-block__content p {
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  margin-bottom: 0;
}

.jidelnicek-block__content p:last-child {
  border-bottom: none;
}

.jidelnicek-block__content strong {
  color: var(--ds-text-mid);
  font-weight: var(--font-weight-bold);
}

.jidelnicek-block__content table {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.jidelnicek-block__content th,
.jidelnicek-block__content td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ds-green-light);
  text-align: left;
}

.jidelnicek-block__content th {
  background-color: var(--ds-green-pale);
  font-weight: var(--font-weight-bold);
  color: var(--ds-teal-dark);
}

/* Allergen badge */
.allergen-badge {
  display: inline-block;
  background-color: #FFF0F0;
  color: var(--ds-red);
  font-weight: var(--font-weight-xbold);
  font-family: var(--font-ui);
  border: 1px solid #FFCCCC;
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  font-size: .8em;
  letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   18. Kontakt sekce
   -------------------------------------------------------------------------- */
.home-kontakt {
  background-color: var(--ds-sky-pale);
  padding-block: var(--section-pad);
}

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

@media (min-width: 768px) {
  .kontakt-grid {
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
  }
}

.kontakt-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.kontakt-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--ds-teal-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}

.kontakt-item__icon--address {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231D8A7D' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.kontakt-item__icon--phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231D8A7D' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.kontakt-item__icon--email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231D8A7D' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.kontakt-item__value {
  flex: 1;
  margin: 0;
}

.kontakt-item__link {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--ds-teal-dark);
  text-decoration: none;
}

.kontakt-item__link:hover {
  text-decoration: underline;
}

.kontakt-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.kontakt-mapa {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.kontakt-mapa__embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.kontakt-mapa__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   19. CTA Pás – Přijímáme nové děti!
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, #FF8A65, var(--ds-red), var(--ds-red-dark));
  padding-block: var(--space-12);
  overflow: hidden;
  text-align: center;
}

.cta-band__flowers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.cta-band__flowers svg {
  display: block;
  width: 100%;
}

.cta-band__inner {
  position: relative;
  z-index: 1;
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--ds-white);
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
  margin-bottom: var(--space-3);
}

.cta-band__text {
  font-family: var(--font-ui);
  font-size: var(--font-size-lg);
  font-style: italic;
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, .92);
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   20. Site Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--ds-sand);
  color: var(--ds-text-dark);
  position: relative;
}

.site-footer__wave {
  line-height: 0;
  margin-bottom: -1px;
}

.site-footer__wave svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__inner {
  padding-block: var(--space-10) var(--space-6);
}

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

.site-footer a:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

.site-footer__widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .site-footer__widgets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .site-footer__widgets {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.site-footer__brand-text {
  display: flex;
  flex-direction: column;
}

.site-footer__site-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ds-teal-dark);
  line-height: 1.2;
}

.site-footer__address,
.site-footer__phone,
.site-footer__email {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ds-text-mid);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--ds-white);
  border-radius: 50%;
  color: var(--ds-teal-dark);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.site-footer__social-link:hover {
  background-color: var(--ds-teal-dark);
  color: var(--ds-white);
  transform: translateY(-2px);
  text-decoration: none;
}

.site-footer .widget-title {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-xbold);
  font-size: var(--font-size-base);
  color: var(--ds-text-dark);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.site-footer__nav {
  padding-block: var(--space-5);
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin-bottom: var(--space-5);
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer__nav-list li {
  list-style: none;
}

.site-footer__nav-list a {
  font-size: var(--font-size-sm);
  color: var(--ds-text-mid);
  font-weight: var(--font-weight-medium);
}

.site-footer__nav-list a:hover {
  color: var(--ds-teal-dark);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.site-footer__copy {
  font-size: var(--font-size-sm);
  color: var(--ds-text-light);
  margin: 0;
  font-weight: var(--font-weight-medium);
}

/* Zápatí – tagline pod logem */
.site-footer__tagline {
  font-size: 0.85rem;
  color: var(--ds-text-light);
  margin: var(--space-2) 0 0;
  line-height: 1.5;
}

/* Zápatí – nadpis sloupce */
.site-footer__col-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ds-teal-dark);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ds-green-light);
}

/* Zápatí – doplňkový text v patičce */
.site-footer__bottom-text {
  font-size: 0.8rem;
  color: var(--ds-text-light);
  margin-top: var(--space-2);
}
.site-footer__bottom-text a {
  color: var(--ds-teal);
  text-decoration: underline;
}


.site-footer__flowers {
  line-height: 0;
  margin-top: var(--space-6);
  overflow: hidden;
}

.site-footer__flowers svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* --------------------------------------------------------------------------
   21. Single Post
   -------------------------------------------------------------------------- */
.site-main {
  padding-block: var(--space-8);
}

.content-sidebar-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 992px) {
  .content-sidebar-wrap {
    grid-template-columns: minmax(0, 2fr) 300px;
  }
}

.single-post__header {
  margin-bottom: var(--space-6);
}

.single-post__title {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  color: var(--ds-teal-dark);
}

.single-post__meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--ds-text-light);
  margin-bottom: var(--space-4);
}

.single-post__thumbnail {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.single-post__thumbnail img {
  width: 100%;
  height: auto;
}

.single-post__content {
  margin-bottom: var(--space-8);
}

.entry-content > * + * {
  margin-top: var(--space-4);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: var(--space-8);
  color: var(--ds-teal-dark);
}

.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.entry-content blockquote {
  border-left: 4px solid var(--ds-teal);
  padding-left: var(--space-5);
  padding-block: var(--space-3);
  margin-left: 0;
  font-style: italic;
  color: var(--ds-text-mid);
  background-color: var(--ds-sky-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.single-post__footer {
  padding-top: var(--space-6);
  border-top: 1px solid var(--ds-green-light);
}

.nav-posts {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   22. Provoz meta DL
   -------------------------------------------------------------------------- */
.provoz-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  font-size: var(--font-size-base);
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--ds-sky-pale);
  border-radius: var(--radius-md);
  border: 1px solid var(--ds-sky-light);
}

.provoz-meta dt {
  font-weight: var(--font-weight-bold);
  color: var(--ds-teal-dark);
}

/* --------------------------------------------------------------------------
   23. Jídelníček detail (single)
   -------------------------------------------------------------------------- */
.jidelnicek-detail {
  margin-top: var(--space-6);
}

.jidelnicek-detail__period {
  font-size: var(--font-size-sm);
  color: var(--ds-text-light);
  margin-bottom: var(--space-4);
}

.jidelnicek-detail__content {
  overflow-x: auto;
}

.jidelnicek-detail__content table {
  min-width: 400px;
  font-size: var(--font-size-sm);
}

.jidelnicek-detail__content th,
.jidelnicek-detail__content td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ds-green-light);
}

.jidelnicek-detail__content th {
  background-color: var(--ds-green-pale);
  font-weight: var(--font-weight-bold);
  color: var(--ds-teal-dark);
}

/* --------------------------------------------------------------------------
   24. Page Header + Page content
   -------------------------------------------------------------------------- */
.page-header {
  margin-bottom: var(--space-8);
}

.page-header__title,
.page-content__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--ds-teal-dark);
}

.page-content__header {
  margin-bottom: var(--space-6);
}

.page-content__featured-image {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   25. Sidebar
   -------------------------------------------------------------------------- */
.sidebar .widget {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--ds-sky-pale);
  border-radius: var(--radius-md);
  border: 1px solid var(--ds-sky-light);
}

.sidebar .widget:last-child {
  margin-bottom: 0;
}

.sidebar .widget-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  color: var(--ds-teal-dark);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ds-teal-light);
}

.sidebar .widget ul {
  list-style: disc;
  padding-left: var(--space-5);
}

.sidebar .widget li {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   26. Pagination
   -------------------------------------------------------------------------- */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-8);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--ds-green-light);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  color: var(--ds-text-dark);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.page-numbers.current,
.page-numbers:hover {
  background-color: var(--ds-teal-dark);
  color: var(--ds-white);
  border-color: var(--ds-teal-dark);
}

/* --------------------------------------------------------------------------
   27. Post navigation (next/prev)
   -------------------------------------------------------------------------- */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.nav-previous, .nav-next {
  max-width: 48%;
}

.nav-previous a, .nav-next a {
  text-decoration: none;
  color: var(--ds-teal-dark);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   28. No results
   -------------------------------------------------------------------------- */
.no-results {
  text-align: center;
  padding: var(--space-10);
  color: var(--ds-text-light);
  font-size: var(--font-size-lg);
}

/* --------------------------------------------------------------------------
   29. Responzivní tabulky
   -------------------------------------------------------------------------- */
.entry-content table,
.jidelnicek-block__content table,
.jidelnicek-detail__content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   30. Print styles
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .hero,
  .home-tiles,
  .cta-band,
  .nav-toggle,
  .btn { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }

  a { color: #000; }

  a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; }
}

/* --------------------------------------------------------------------------
   32. Hero – ilustrativní SVG krajina (spodní dekor)
   -------------------------------------------------------------------------- */
.hero__landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
  overflow: hidden;
}

.hero__landscape svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px;
}

@media (max-width: 639px) {
  .hero__landscape svg {
    max-height: 90px;
  }
  .hero__content {
    padding-bottom: calc(var(--space-12) + 90px);
  }
}

@media (min-width: 640px) {
  .hero__content {
    padding-bottom: calc(var(--space-12) + 120px);
  }
}

@media (min-width: 1200px) {
  .hero__content {
    padding-bottom: calc(var(--space-12) + 140px);
  }
}

/* ==========================================================================
   v1.2 – Design integration fixes & additions
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX: btn--cta-white alias → btn--white (cta-band.php používal neexistující třídu)
   -------------------------------------------------------------------------- */
.btn--cta-white {
  background-color: var(--ds-white);
  color: var(--ds-red);
  border-color: var(--ds-white);
  font-family: var(--font-display);
  box-shadow: var(--shadow-btn);
}

.btn--cta-white:hover,
.btn--cta-white:focus-visible {
  background-color: var(--ds-cream);
  border-color: var(--ds-cream);
  color: var(--ds-red-dark);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   FIX: .site-header.is-scrolled – JS přidává třídu při scrollu >10px,
   CSS musí obsloužit zvýšení stínu a jemné zmenšení výšky.
   Transition zajišťuje plynulý efekt bez JS animace.
   -------------------------------------------------------------------------- */
.site-header {
  transition:
    box-shadow       var(--transition-base),
    background-color var(--transition-base),
    min-height       var(--transition-base);
}

.site-header.is-scrolled,
.siteHeader.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .14);
  background-color: rgba(255, 255, 255, .98);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (min-width: 768px) {
  .site-header.is-scrolled,
  .siteHeader.is-scrolled {
    min-height: 68px;
  }
}

/* --------------------------------------------------------------------------
   NEW: .provoz-card__stats – statistiky (počet dětí / tříd)
   Zobrazeno pod nadpisem karty, velký font pro vizuální dopad.
   -------------------------------------------------------------------------- */
.provoz-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: var(--font-weight-xbold);
  color: var(--ds-text-dark);
  line-height: 1.3;
  text-align: center;
  margin-block: var(--space-3);
}

.provoz-card__stats-item {
  display: block;
}

/* --------------------------------------------------------------------------
   NEW: .post-card__meta-provoz – provoz/kategorie tag v aktualitách
   Zobrazuje se za datumem: "22.04.2024 | MŠ Velenského"
   -------------------------------------------------------------------------- */
.post-card__meta-sep {
  margin-inline: var(--space-2);
  opacity: .5;
}

.post-card__meta-provoz {
  font-weight: var(--font-weight-xbold);
  /* barva dědí z .post-card__meta (variantní pravidla) */
}

/* --------------------------------------------------------------------------
   NEW: .jidelnicek-block__allergens – sekce alergenů v jídelníčku
   Separátní řádek pod obsahem s výrazným červeným badge pro čísla.
   -------------------------------------------------------------------------- */
.jidelnicek-block__allergens {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--ds-text-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ds-text-mid);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.jidelnicek-block__allergens-label {
  font-weight: var(--font-weight-bold);
  color: var(--ds-text-dark);
}

/* --------------------------------------------------------------------------
   NEW: .section-title--decorated – varianta s emoji dekorací vlevo
   Použito v sekci aktualit a jídelníčku pro hravější vzhled.
   -------------------------------------------------------------------------- */
.section-title--decorated {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.section-title__deco {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   NEW: .home-tiles flower decoration – jemné obrázky na přechodu
   -------------------------------------------------------------------------- */
.home-tiles__flowers {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
}

.home-tiles__flowers svg {
  display: block;
  width: 100%;
}

.home-tiles {
  position: relative;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   NEW: .jidelnicek-block__link – variant button styling
   -------------------------------------------------------------------------- */
.jidelnicek-block--a .jidelnicek-block__link {
  color: var(--ds-teal-dark);
  border-color: var(--ds-teal-dark);
}

.jidelnicek-block--b .jidelnicek-block__link {
  color: #C4621A;
  border-color: var(--ds-apricot);
}

.jidelnicek-block--a .jidelnicek-block__link:hover,
.jidelnicek-block--a .jidelnicek-block__link:focus-visible {
  background-color: var(--ds-teal-light);
  color: var(--ds-teal-dark);
}

.jidelnicek-block--b .jidelnicek-block__link:hover,
.jidelnicek-block--b .jidelnicek-block__link:focus-visible {
  background-color: var(--ds-apricot-pale);
  color: #C4621A;
}

/* --------------------------------------------------------------------------
   REFINEMENT: .site-footer__flowers – větší výška pro bohatší dekor
   -------------------------------------------------------------------------- */
.site-footer__flowers svg {
  height: 90px;
}

/* --------------------------------------------------------------------------
   REFINEMENT: .provoz-card – výchozí přechod výšky pro smoother hover
   -------------------------------------------------------------------------- */
.provoz-card {
  will-change: transform;
}

/* Section emoji dekorace – vložena jako span.section-deco v PHP */
.section-deco {
  display: inline-block;
  margin-right: var(--space-3);
  font-size: 1.5rem;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* --------------------------------------------------------------------------
   REFINEMENT: provoz-card hover – sjednocení s design systémem
   -------------------------------------------------------------------------- */
.provoz-card:hover {
  transform: translateY(-8px);
}

/* --------------------------------------------------------------------------
   NEW: .jidelnicek-block__allergens – allergen badge inline rendering
   php funkce msbela_render_allergen_badges() generuje tuto strukturu
   -------------------------------------------------------------------------- */
.allergen-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

/* ==========================================================================
   DS-CARDS v2.0 – Sekce Provozy a Aktuality
   Mobile-first, WCAG 2.1 AA, design systém msbela-design-system.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   DS.1  Sdílené section utility
   Výchozí padding a nadpis styly pro .section--provozy a .section--aktuality
   -------------------------------------------------------------------------- */

.section--provozy,
.section--aktuality {
  padding-block: var(--section-pad);
}

.section--aktuality {
  background-color: var(--ds-green-pale);
}

.section--provozy {
  background-color: var(--ds-cream);
}

/* Section header – flex řádek pro případné future actions vpravo */
.section__header {
  margin-bottom: var(--space-6);
}

/* Section title varianta s emoji dekorací vlevo */
.section__title--provozy::before,
.section__title--aktuality::before {
  content: '';          /* emoji přidáno přes <span aria-hidden> v PHP */
}

/* Sdílený footer sekce (odkaz „Všechny aktuality") */
.section__footer {
  margin-top: var(--space-6);
  text-align: center;
}

.section__more-link {
  /* Zachovává stávající .btn--primary styly */
}

/* --------------------------------------------------------------------------
   DS.2  Provozy Grid
   3-sloupcový grid (mobile: 1 sl., tablet: 2 sl., desktop: 3 sl.)
   -------------------------------------------------------------------------- */

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

@media (min-width: 640px) {
  .provozy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .provozy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   DS.3  Provoz Card – base
   Design systém: radius 24px, měkký stín, pastelový gradient bg
   -------------------------------------------------------------------------- */

.provoz-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;

  border-radius:  var(--radius-lg);          /* 24px dle design systému */
  box-shadow:     var(--shadow-card);
  overflow:       hidden;

  padding:        var(--space-6) var(--space-5);

  /* Plynulý přechod pro hover – GPU composite vrstva */
  transition:
    transform  250ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 250ms ease;
  will-change: transform;

  /* Subtilní shimmer overlay pro hloubku */
  position: relative;
}

/* Shimmer overlay – glassmorphism efekt */
.provoz-card::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent              60%
  );
  border-radius: inherit;
  pointer-events: none;
}

/* Hover: lehký translateY + sytější stín dle design systému */
.provoz-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Redukované pohyby */
@media (prefers-reduced-motion: reduce) {
  .provoz-card {
    transition: none;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   DS.4  Provoz Card – barevné varianty
   Modifier třídy: .provoz-card--red / --teal / --yellow
   -------------------------------------------------------------------------- */

/* Červená (MŠ Velenského) */
.provoz-card--red {
  background: linear-gradient(145deg, #FFE0D0, #FFCDB8);
}

/* Tyrkysová (MŠ Mladoboleslavská) */
.provoz-card--teal {
  background: linear-gradient(145deg, #B2EBF2, #80DEEA);
}

/* Žlutá (MŠ Březinka) */
.provoz-card--yellow {
  background: linear-gradient(145deg, #FFF9C4, #FFF176);
}

/* --------------------------------------------------------------------------
   DS.5  Provoz Card – image / emoji icon
   -------------------------------------------------------------------------- */

.provoz-card__image {
  width:         100%;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow:      hidden;
  margin:        calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-4);
  max-height:    160px;
}

.provoz-card__img {
  width:      100%;
  height:     160px;
  object-fit: cover;
  display:    block;
}

/* Fallback: emoji ikona místo obrázku */
.provoz-card__image--icon {
  display:        flex;
  align-items:    center;
  justify-content:center;
  background:     transparent;
  max-height:     none;
  margin:         0 0 var(--space-3) 0;
}

.provoz-card__icon-emoji {
  font-size:   4rem;
  line-height: 1;
  filter:      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

/* --------------------------------------------------------------------------
   DS.6  Provoz Card – title
   -------------------------------------------------------------------------- */

.provoz-card__title {
  font-family: var(--font-display);
  font-size:   var(--font-size-xl);          /* 1.5rem = 24px */
  line-height: var(--line-height-heading);
  color:       var(--ds-text-dark);
  margin-bottom: var(--space-3);
}

.provoz-card__title a {
  color:           inherit;
  text-decoration: none;
}

.provoz-card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   DS.7  Provoz Card – stats (počet dětí + tříd)
   DL struktura s dd (číslo velké) + dt (popis malý)
   -------------------------------------------------------------------------- */

.provoz-card__stats {
  display:        flex;
  gap:            var(--space-5);
  justify-content:center;
  margin:         0 0 var(--space-5) 0;
}

.provoz-card__stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-1);
}

/* Velké číslo dle design systému */
.provoz-card__stat-value {
  font-family:  var(--font-display);
  font-size:    clamp(1.75rem, 3vw, 2.25rem);
  font-weight:  400;                         /* Fredoka One je inherentně bold */
  line-height:  1;
  color:        var(--ds-text-dark);
  margin:       0;
}

/* Popis pod číslem */
.provoz-card__stat-label {
  font-family: var(--font-ui);
  font-size:   var(--font-size-sm);          /* 0.875rem */
  font-weight: 700;
  color:       var(--ds-text-mid);
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   DS.8  Provoz Card – CTA tlačítko
   margin-top: auto = tlačítko vždy u spodku karty (stretch výška)
   -------------------------------------------------------------------------- */

.provoz-card__cta {
  margin-top:    auto;
  padding:       var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-weight:   var(--font-weight-xbold);

  /* Výchozí barva – přepisují modifier varianty */
  background-color: var(--ds-teal);
  color:            var(--ds-white);
  border:           2px solid transparent;
  text-decoration:  none;
  display:          inline-flex;
  align-items:      center;
  gap:              4px;
  transition:       background-color 200ms ease, transform 150ms ease;
}

.provoz-card__cta:hover {
  background-color: var(--ds-teal-dark);
  transform:        translateY(-1px);
}

.provoz-card__cta:focus-visible {
  outline:        3px solid var(--ds-teal-dark);
  outline-offset: 3px;
}

/* Barevné CTA dle varianty karty */
.provoz-card--red .provoz-card__cta {
  background-color: var(--ds-red);
}
.provoz-card--red .provoz-card__cta:hover {
  background-color: var(--ds-red-dark);
}

.provoz-card--teal .provoz-card__cta {
  background-color: var(--ds-teal);
}
.provoz-card--teal .provoz-card__cta:hover {
  background-color: var(--ds-teal-dark);
}

/* Žlutá karta – tmavší pozadí CTA pro dostatečný kontrast (WCAG AA 4.5:1) */
.provoz-card--yellow .provoz-card__cta {
  background-color: #D4940A;   /* kontrast na white: 4.9:1 ✓ */
  color:            var(--ds-white);
}
.provoz-card--yellow .provoz-card__cta:hover {
  background-color: #B47A00;
}

/* --------------------------------------------------------------------------
   DS.9  Aktuality Grid
   Responzivní grid 1→2→3 sloupce; respektuje počet karet (1–12)
   -------------------------------------------------------------------------- */

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

@media (min-width: 640px) {
  .aktuality-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .aktuality-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Pokud je zobrazen 1 příspěvek, zarovnat na střed */
.aktuality-grid:has(> :only-child) {
  grid-template-columns: minmax(auto, 480px);
  justify-content:       center;
}

/* --------------------------------------------------------------------------
   DS.10  Aktualita Card – base
   -------------------------------------------------------------------------- */

.aktualita-card {
  display:        flex;
  flex-direction: column;

  background-color: var(--ds-white);
  border-radius:    var(--radius-lg);        /* 24px */
  box-shadow:       var(--shadow-card);
  overflow:         hidden;

  transition:
    transform  250ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 250ms ease;
  will-change: transform;
}

.aktualita-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .aktualita-card {
    transition: none;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   DS.11  Aktualita Card – media (obrázek / placeholder)
   -------------------------------------------------------------------------- */

.aktualita-card__media {
  position:   relative;
  width:      100%;
  height:     180px;
  overflow:   hidden;
  flex-shrink:0;
}

.aktualita-card__media a {
  display: block;
  height:  100%;
}

.aktualita-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 400ms ease;
}

.aktualita-card:hover .aktualita-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .aktualita-card:hover .aktualita-card__img {
    transform: none;
  }
}

/* Barevné placeholder pozadí dle varianty (1/2/3) */
.aktualita-card--1 .aktualita-card__placeholder {
  width:            100%;
  height:           100%;
  background:       linear-gradient(135deg, var(--ds-sky-light), var(--ds-green-light));
}

.aktualita-card--2 .aktualita-card__placeholder {
  background: linear-gradient(135deg, var(--ds-teal-light), var(--ds-sky-light));
}

.aktualita-card--3 .aktualita-card__placeholder {
  background: linear-gradient(135deg, var(--ds-yellow-light), var(--ds-apricot-light));
}

/* --------------------------------------------------------------------------
   DS.12  Aktualita Card – body
   -------------------------------------------------------------------------- */

.aktualita-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--space-5);
  gap:            var(--space-3);
}

/* --------------------------------------------------------------------------
   DS.13  Aktualita Card – meta (datum + provoz)
   -------------------------------------------------------------------------- */

.aktualita-card__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-2);

  font-family: var(--font-ui);
  font-size:   var(--font-size-sm);   /* 0.875rem */
  font-weight: 700;
  line-height: 1;
  margin:      0;
}

/* Datum – dle varianty barevné */
.aktualita-card--1 .aktualita-card__date { color: var(--ds-red);      }
.aktualita-card--2 .aktualita-card__date { color: var(--ds-teal-dark);}
.aktualita-card--3 .aktualita-card__date { color: #c4621a;            }  /* apricot dark */

.aktualita-card__meta-sep {
  color: var(--ds-text-light);
  user-select: none;
}

/* Kategorie / provoz tag */
.aktualita-card__provoz {
  font-weight: 600;
  color:       var(--ds-text-mid);
}

/* --------------------------------------------------------------------------
   DS.14  Aktualita Card – title
   -------------------------------------------------------------------------- */

.aktualita-card__title {
  font-family:   var(--font-ui);
  font-size:     var(--font-size-lg);    /* 1.125rem */
  font-weight:   var(--font-weight-xbold);
  line-height:   var(--line-height-heading);
  color:         var(--ds-text-dark);
  margin:        0;
}

.aktualita-card__title a {
  color:           inherit;
  text-decoration: none;
}

.aktualita-card__title a:hover {
  color:           var(--ds-teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   DS.15  Aktualita Card – excerpt
   -------------------------------------------------------------------------- */

.aktualita-card__excerpt {
  font-family: var(--font-body);
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-base);
  color:       var(--ds-text-mid);
  margin:      0;

  /* 3 řádky max → konsistentní výška karet */
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* --------------------------------------------------------------------------
   DS.16  Aktualita Card – CTA tlačítko
   -------------------------------------------------------------------------- */

.aktualita-card__cta {
  margin-top:    auto;
  align-self:    flex-start;

  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-weight:   var(--font-weight-xbold);
  font-size:     var(--font-size-sm);
  text-decoration: none;
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  transition:    background-color 200ms ease, transform 150ms ease;
}

/* Barevné CTA dle varianty */
.aktualita-card--1 .aktualita-card__cta {
  background-color: var(--ds-red);
  color:            var(--ds-white);
}
.aktualita-card--1 .aktualita-card__cta:hover {
  background-color: var(--ds-red-dark);
}

.aktualita-card--2 .aktualita-card__cta {
  background-color: var(--ds-teal);
  color:            var(--ds-white);
}
.aktualita-card--2 .aktualita-card__cta:hover {
  background-color: var(--ds-teal-dark);
}

.aktualita-card--3 .aktualita-card__cta {
  background-color: var(--ds-apricot);
  color:            var(--ds-text-dark);
}
.aktualita-card--3 .aktualita-card__cta:hover {
  background-color: #E07840;
  color:            var(--ds-white);
}

.aktualita-card__cta:focus-visible {
  outline:        3px solid var(--ds-teal-dark);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   DS.17  Forced colors (Windows HC Mode)
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .provoz-card,
  .aktualita-card {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }

  .provoz-card__cta,
  .aktualita-card__cta {
    background: Highlight;
    color: HighlightText;
    border: 2px solid ButtonText;
  }
}

/* ==========================================================================
   HEADER v2.0 – nové BEM třídy (.siteHeader, .navToggle, .mobileNav__toggle)
   Aliasují staré .site-header třídy pro zpětnou kompatibilitu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   H1. .siteHeader – wrapper (alias pro .site-header)
   -------------------------------------------------------------------------- */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--ds-white);
  box-shadow: var(--shadow-soft);
  min-height: var(--header-height-mobile);
}

@media (min-width: 992px) {
  .siteHeader {
    min-height: var(--header-height);
  }
}

/* Oblaky */
.siteHeader__clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Inner layout */
.siteHeader__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height-mobile);
  padding-block: var(--space-3);
}

@media (min-width: 992px) {
  .siteHeader__inner {
    min-height: var(--header-height);
    padding-block: 0;
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   H2. Brand / Logo
   -------------------------------------------------------------------------- */
.siteHeader__brand {
  flex-shrink: 0;
  order: 1;
  min-width: 0;         /* flexbox: dovolí shrinknutí textu */
}

.siteHeader__logoLink {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  border-radius: var(--radius-sm);
  min-width: 0;
}

.siteHeader__logoLink:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Inline SVG sova – hover/touch: zavrtění */
@keyframes owlWiggle {
  0%   { transform: rotate(0deg) scale(1); }
  15%  { transform: rotate(-18deg) scale(1.05); }
  35%  { transform: rotate(16deg) scale(1.05); }
  55%  { transform: rotate(-12deg) scale(1.02); }
  70%  { transform: rotate(10deg) scale(1.02); }
  85%  { transform: rotate(-5deg) scale(1); }
  100% { transform: rotate(0deg) scale(1); }
}

.siteHeader__owlWrap {
  flex-shrink: 0;
  line-height: 0;
  display: block;
  cursor: pointer;
}

.siteHeader__owlSvg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
  width: 48px;
  height: 48px;
  transform-origin: 50% 80%; /* sova se kolébá kolem spodku těla */
  transition: filter var(--transition-fast);
}

/* Hover nebo touch (active) → zavrtění */
.siteHeader__owlWrap:hover .siteHeader__owlSvg,
.siteHeader__owlWrap:focus .siteHeader__owlSvg,
.siteHeader__owlWrap.is-wiggling .siteHeader__owlSvg {
  animation: owlWiggle 0.65s cubic-bezier(.36,.07,.19,.97) forwards;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .22));
}

@media (prefers-reduced-motion: reduce) {
  .siteHeader__owlSvg { animation: none !important; }
}

/* Vlastní logo (uploaded) */
.siteHeader__logo {
  max-height: 52px;
  width: auto;
  display: block;
}

/* Text (název + podtitul) */
.siteHeader__brandText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;          /* dovolí text-overflow */
}

.siteHeader__siteName {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ds-teal-dark);
  line-height: 1.15;
  /* Ořez na mobilu – 2 řádky max */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 480px) {
  .siteHeader__siteName {
    font-size: 1.1rem;
    -webkit-line-clamp: unset;
    overflow: visible;
    display: block;
  }
}

@media (min-width: 992px) {
  .siteHeader__siteName {
    font-size: 1.2rem;
  }
}

.siteHeader__tagline {
  margin: 0;
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  color: var(--ds-text-light);
  display: none;
}

@media (min-width: 992px) {
  .siteHeader__tagline {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   H3. Header CTA tlačítka (pouze ≥ 992px)
   -------------------------------------------------------------------------- */
.siteHeader__ctas {
  display: none;
  flex-shrink: 0;
  gap: var(--space-2);
  order: 3;
}

@media (min-width: 992px) {
  .siteHeader__ctas {
    display: flex;
  }
}

/* ── Hamburger button (navToggle) ──────────────────────────────────────── */
.navToggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: var(--space-2);
  background: linear-gradient(135deg, var(--ds-teal-dark), var(--ds-teal));
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 3px 12px rgba(29, 138, 125, 0.4);
  flex-shrink: 0;
  order: 5;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.navToggle:hover {
  transform: scale(1.07);
  box-shadow: 0 5px 18px rgba(29, 138, 125, 0.5);
}

.navToggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (min-width: 992px) {
  .navToggle { display: none; }
}

.navToggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: white;
  border-radius: 2px;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity   200ms ease,
              width     200ms ease;
}

/* Animace → X */
.navToggle[aria-expanded="true"] .navToggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navToggle[aria-expanded="true"] .navToggle__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.navToggle[aria-expanded="true"] .navToggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .navToggle, .navToggle__bar { transition: none; }
}

/* mobileNav__panel.is-open → aria-hidden="false" nastaví JS */