/* MyFitSpace – verze 1 (tmavá) – převzato z návrhu My Fit Space.dc.html.
   Pozn.: layout drží inline styly přímo v markupu (věrná kopie exportu);
   tady jen globální reset, fonty řeší <link> v header.tpl, a keyframes. */
/* ══════════════════════════════════════════════════════════════════════
   BARVY POZADÍ  —  PRO ZMĚNU STAČÍ PŘEPSAT JEDINOU HODNOTU: --mfs-bg
   Ostatní odstíny (střídavé sekce, patička, karty, hlavička, menu)
   se z ní dopočítají samy přes color-mix().
   Řádek s #hex nad každým color-mix() je jen záloha pro staré prohlížeče.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --mfs-bg: #172d1d;                                                 /* ←←← HLAVNÍ BARVA POZADÍ */

  --mfs-bg-alt:  #132618;
  --mfs-bg-alt:  color-mix(in srgb, var(--mfs-bg) 85%, #000);        /* střídavé sekce */
  --mfs-bg-deep: #101f14;
  --mfs-bg-deep: color-mix(in srgb, var(--mfs-bg) 70%, #000);        /* patička */
  --mfs-card:    #273c2d;
  --mfs-card:    color-mix(in srgb, var(--mfs-bg) 93%, #fff);        /* karty a boxy */
  --mfs-hero:    #2e4634;
  --mfs-hero:    color-mix(in srgb, var(--mfs-bg) 88%, #fff);        /* světlejší konec hero gradientu */
  --mfs-header:  rgba(23,45,29,.55);
  --mfs-header:  color-mix(in srgb, var(--mfs-bg) 55%, transparent); /* průhledná hlavička */
  --mfs-menu:    rgba(23,45,29,.97);
  --mfs-menu:    color-mix(in srgb, var(--mfs-bg) 97%, transparent); /* mobilní menu */

  /* závoj nad hero fotkou (4 stupně průhlednosti téže barvy) */
  --mfs-veil-1:  rgba(23,45,29,.94);
  --mfs-veil-1:  color-mix(in srgb, var(--mfs-bg) 94%, transparent);
  --mfs-veil-2:  rgba(23,45,29,.74);
  --mfs-veil-2:  color-mix(in srgb, var(--mfs-bg) 74%, transparent);
  --mfs-veil-3:  rgba(23,45,29,.40);
  --mfs-veil-3:  color-mix(in srgb, var(--mfs-bg) 40%, transparent);
  --mfs-veil-4:  rgba(23,45,29,.32);
  --mfs-veil-4:  color-mix(in srgb, var(--mfs-bg) 32%, transparent);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--mfs-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:'Hanken Grotesk',sans-serif;color:#C8CDC4}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:#C8AA67;color:#0B120E}
@keyframes mfsCue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}
@keyframes mfsRise{from{transform:translateY(16px)}to{transform:none}}
@keyframes faqOpen{from{transform:translateY(-6px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* FAQ accordion (statická náhrada za sc-if) */
.mfs-faq-a{display:none}
.mfs-faq-item.open .mfs-faq-a{display:block;animation:faqOpen .35s cubic-bezier(.2,.7,.2,1) both}
.mfs-faq-item.open .mfs-faq-plus{display:none}
.mfs-faq-close{display:none}
.mfs-faq-item.open .mfs-faq-close{display:inline-flex}

/* mobilní menu toggle */
#mfsMobileMenu{display:none}
#mfsMobileMenu.open{display:flex}
@media (max-width:900px){
  .mfs-desktop-nav{display:none!important}
  .mfs-burger{display:inline-flex!important}
}
@media (min-width:901px){
  .mfs-burger{display:none!important}
}

/* ===== Logo v hlavičce – wide verze + zmenšení na scroll ===== */
.mfs-logo-header{display:block;flex:none}
.mfs-logo-header img{height:64px;width:auto;display:block;transition:height .35s ease}
header.mfs-scrolled .mfs-logo-header img{height:50px}
.mfs-header-inner{height:100px;transition:height .35s ease}
header.mfs-scrolled .mfs-header-inner{height:76px}
@media (max-width:560px){
  .mfs-logo-header img{height:48px}
  header.mfs-scrolled .mfs-logo-header img{height:38px}
  .mfs-header-inner{height:82px}
  header.mfs-scrolled .mfs-header-inner{height:64px}
}

/* Cookie modal (Bootstrap) – skrytý dokud ho nevyvolá tlačítko „Nastavení".
   Bez načteného Bootstrapu by se prázdný .modal jinak zobrazil v layoutu. */
#modal_window_id{display:none}

/* Prostory (MFS) – fotky 2/3 šířky, text + bubliny 1/3 */
.mfs-space-row{display:grid;grid-template-columns:3fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.mfs-space-row--rev{grid-template-columns:1fr 3fr}   /* MFS 2 – fotka vpravo */
@media (max-width:860px){
  .mfs-space-row,.mfs-space-row--rev{grid-template-columns:1fr}
}

/* MFS galerie – 2×2 fotky, na mobilu pod sebe */
.mfs-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){ .mfs-photos{grid-template-columns:1fr} }

/* Mapa – vlastní pin (logo „M") */
#mfs-map{background:var(--mfs-card)}
.mfs-pin-badge{width:44px;height:44px;border-radius:50%;background:#FBF8F1;border:2px solid #C0A860;box-shadow:0 3px 10px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.mfs-pin-badge svg{width:26px;height:26px}

/* Cookie lišta (CMS) – má bílé pozadí, ale dědila by světlý text z body */
.eu-cookies { color: #222; }