/* Hlavička, značka, menu, přepínač jazyka, burger */

/* ============================================================
   NAVIGACE
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.is-solid{
  background:var(--cream-2);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:var(--line);box-shadow:0 12px 30px -26px rgba(27,39,64,.4)
}
.nav__inner{
  /* hlavička má širší kontejner než obsah, stejně jako na webu kliniky */
  max-width:var(--wrap-wide);margin-inline:auto;padding-inline:clamp(1.5rem,4vw,3rem);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px
}

/* Značka — monogram v pískovém rámečku, obdoba loga kliniky */
.mark{display:flex;align-items:center;gap:9px}
/* Kosatec převzatý ze značky kliniky G-INNOVA. Je to alfa maska, takže
   se obarvuje přes background a drží se palety webu. */
.mark__flower{display:block;width:37px;height:44px;flex:none;transition:opacity .5s var(--ease)}
.mark:hover .mark__flower{opacity:.7}
@media (min-width:1024px){ .mark__flower{width:47px;height:56px} }

.mark__txt b{white-space:nowrap;font-family:var(--ff-display);font-size:1.06rem;font-weight:500;letter-spacing:.01em;color:var(--text)}
.mark__txt{display:flex;flex-direction:column;line-height:1.2}
/* Obal je potřeba proto, že jazykové spany mají display:revert !important
   a samy by se skrýt nedaly. */
.mark__tag{white-space:nowrap;font-size:.58rem;letter-spacing:.14em;line-height:1.45;text-transform:uppercase;color:var(--muted);margin-top:3px;font-weight:400}

.nav__menu{display:flex;align-items:center;gap:clamp(14px,1.6vw,25px)}
.nav__menu a{
  font-size:1rem;font-weight:500;color:var(--text);opacity:1;white-space:nowrap;
  transition:opacity .3s var(--ease),color .3s var(--ease);position:relative;padding-block:10px
}
.nav__menu a:hover{color:var(--gold-text)}
.nav__menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.nav__menu a:hover::after{width:100%}
.nav__side{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}

/* Přepínač jazyka */
.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;background:rgba(255,255,255,.5)}
.lang button{
  font-family:var(--ff-sans);font-size:.72rem;font-weight:500;letter-spacing:.09em;
  background:none;border:0;color:var(--text);opacity:.6;cursor:pointer;
  padding:.4em .78em;border-radius:var(--r-pill);transition:all .35s var(--ease)
}
.lang button:hover{opacity:1}
html[lang="cs"] .lang button[data-set="cs"],
html[lang="en"] .lang button[data-set="en"]{background:var(--navy);color:var(--cream);opacity:1}

.nav .btn{font-size:.9rem; padding:.62em .7em .62em 1.4em}

/* Burger */
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:none;border-radius:var(--r-pill);cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;width:20px;height:1px;background:var(--text);transition:all .4s var(--ease)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:27px}
body.menu-open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){top:23px;transform:rotate(-45deg)}

@media (max-width:1439px){
  .nav__menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 30px;
    clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
    max-height:calc(100svh - var(--nav-h));overflow-y:auto
  }
  .nav__menu a{opacity:1;font-size:1.05rem;width:100%;padding:15px 0;border-bottom:1px solid var(--line)}
  .nav__menu a::after{display:none}
  body.menu-open .nav__menu{clip-path:inset(0 0 0 0)}
  body.menu-open{overflow:hidden}
  .burger{display:block}
  .nav__side .btn{display:none}
  .mark__txt span{display:none}
}
@media (max-width:560px){ .mark__tag{display:none} }
@media (max-width:420px){ .mark__txt b{font-size:.95rem} }
/* Nejužší telefony — jméno se musí vejít na jeden řádek vedle jazyků a menu */
@media (max-width:420px){ .nav__inner{padding-inline:1.25rem;gap:12px} }
/* Nejužší telefony — jméno, jazyky i menu se musí vejít na jeden řádek.
   Hlavička je position:fixed, takže její přetečení nezvětší scrollWidth
   a projevilo by se až uříznutým tlačítkem menu. */
@media (max-width:374px){
  .nav__inner{padding-inline:1rem;gap:8px}
  .nav__side{gap:8px}
  .mark{gap:7px}
  .mark__flower{width:31px;height:37px}
  .mark__txt b{font-size:.86rem}
  .lang button{font-size:.66rem;padding:.4em .6em}
  .burger{width:40px;height:40px}
  .burger span{left:11px;width:18px}
  .burger span:nth-child(1){top:16px}
  .burger span:nth-child(2){top:23px}
  body.menu-open .burger span:nth-child(1),
  body.menu-open .burger span:nth-child(2){top:19px}
}