/* ============================================================
   CIVIS HOTELS — header.css
   Barra dell'header come www.imperialsuiterome.com (Pietro, 10/10/2026: «Dovevi cambiare l'header
   ma non il menu aperto»). Markup da tools/build-header.py, comportamento in scripts/nav.js.
   Caricato subito dopo shared.css: geometria di .cv-nav__inner, logo e lingua restano lì, e lì
   resta anche il menu aperto di sempre (#cv-nav-drawer, .cv-menu). Qui solo stati e pulsanti
   della barra, più il blocco dello scroll col menu aperto.
   ============================================================ */

/* ── Barra: piena di default; trasparente sopra l'hero finché non si scorre di 80px ── */
.cv-nav { --nav-fg: var(--ink); color: var(--nav-fg); }
.cv-nav::before { transition: opacity .5s var(--ease), background-color .25s, border-color .25s; }
/* velo in alto sopra la foto: tiene leggibili logo e pulsanti bianchi su qualsiasi hero */
.cv-nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: -1;
  background: linear-gradient(to bottom, oklch(0% 0 0 / 0.55), oklch(0% 0 0 / 0.28) 55%, oklch(0% 0 0 / 0));
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
html.js .cv-nav--over-hero:not(.is-solid) { --nav-fg: oklch(100% 0 0); }
html.js .cv-nav--over-hero:not(.is-solid)::before { opacity: 0; }
html.js .cv-nav--over-hero:not(.is-solid)::after { opacity: 1; }
/* ombra leggera sotto logo e pulsanti bianchi: le foto chiare (cielo, facciate) non li mangiano */
html.js .cv-nav--over-hero:not(.is-solid) :is(.cv-nav__brand, .cv-nav__theme, .cv-nav__menubtn, .cv-nav__lang-btn) {
  filter: drop-shadow(0 1px 5px oklch(0% 0 0 / 0.35));
}

.cv-nav__brand { color: var(--nav-fg); min-height: 44px; border-radius: 10px; transition: color .3s; }
.cv-nav__brand:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cv-nav__lang-btn, .cv-nav__auth-in, .cv-nav__auth-up { color: var(--nav-fg); transition: color .3s, background-color .2s; }

/* tema: icona senza cerchio, area 44px */
.cv-nav__theme {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--nav-fg); cursor: pointer; transition: color .3s, background-color .2s;
}
.cv-nav__theme:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* «Menu» con due tratti; aperto diventa «Chiudi» con la X */
.cv-nav__menubtn {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 44px; min-width: 44px; padding: 0 4px 0 12px; margin-right: -4px;
  border: 0; border-radius: 10px; background: none; color: var(--nav-fg); cursor: pointer;
  font: 500 var(--text-sm)/1 var(--sans); letter-spacing: var(--track-normal); white-space: nowrap;
  transition: color .3s, background-color .2s;
}
.cv-nav__menubtn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cv-nav__menubtn-icon { position: relative; display: block; width: 20px; height: 12px; flex: none; }
.cv-nav__menubtn-icon span {
  position: absolute; left: 0; display: block; width: 20px; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: width .2s, transform .35s var(--ease);
}
.cv-nav__menubtn-icon span:first-child { top: 2.5px; }
.cv-nav__menubtn-icon span:last-child { top: 8.5px; width: 13px; }
.cv-nav__menubtn-close { display: none; }
.cv-nav.is-open .cv-nav__menubtn-open { display: none; }
.cv-nav.is-open .cv-nav__menubtn-close { display: inline; }
.cv-nav.is-open .cv-nav__menubtn-icon span:first-child { transform: translateY(3px) rotate(45deg); }
.cv-nav.is-open .cv-nav__menubtn-icon span:last-child { width: 20px; transform: translateY(-3px) rotate(-45deg); }

@media (hover: hover) {
  .cv-nav__theme:hover, .cv-nav__menubtn:hover, .cv-nav__lang-btn:hover,
  .cv-nav__auth-in:hover, .cv-nav__auth-up:hover { background: color-mix(in oklch, var(--nav-fg) 10%, transparent); }
  .cv-nav__menubtn:hover .cv-nav__menubtn-icon span:last-child { width: 20px; }
}

/* telefono e tablet stretto: pulsante del menu solo icona (come Imperial); la lingua resta nella barra */
@media (max-width: 820px) {
  .cv-nav__actions { gap: 0; }
  /* la lingua resta nella barra anche sul telefono: il menu Civis non ha il selettore (10/10) */
  .cv-nav__menubtn { justify-content: center; padding: 0; margin-right: -12px; width: 44px; }
  .cv-nav__menubtn-open, .cv-nav.is-open .cv-nav__menubtn-close { display: none; }
}

/* breadcrumb mobile sotto la barra: trasparente anche lui finché la barra lo è */
@media (max-width: 900px) {
  html.js .cv-nav--over-hero:not(.is-solid) ~ .cv-subnav { background: transparent; border-bottom-color: transparent; }
  html.js .cv-nav--over-hero:not(.is-solid) ~ .cv-subnav .cv-subnav__track > a,
  html.js .cv-nav--over-hero:not(.is-solid) ~ .cv-subnav .cv-subnav__track > span:not(.cv-subnav__sep) { color: oklch(100% 0 0 / 0.9); text-shadow: 0 1px 6px oklch(0% 0 0 / 0.6); }
  html.js .cv-nav--over-hero:not(.is-solid) ~ .cv-subnav .cv-subnav__track > span[aria-current="page"] { color: oklch(100% 0 0); }
  html.js .cv-nav--over-hero:not(.is-solid) ~ .cv-subnav .cv-subnav__sep { border-top-color: oklch(100% 0 0 / 0.7); }
  .cv-subnav { transition: transform .25s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease); }
}

/* ── Menu aperto: è il cassetto di sempre (shared.css); qui solo pagina ferma e banner cookie nascosto ── */
html.cv-menu-open, html.cv-menu-open body { overflow: hidden; }
html.cv-menu-open .cv-consent { visibility: hidden; }
/* 404: un cassetto per lingua, page-lang.js mostra quello del percorso */
.cv-nav__drawer-inner.cv-menu[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cv-nav::before, .cv-nav::after, .cv-nav__menubtn-icon span { transition: none; }
}

/* 320-360px: logo, lingua, tema e menu senza toccarsi, tutti i pulsanti almeno 44 px (10/10) */
@media (max-width: 360px) {
  .cv-nav__lang-btn { padding: 8px 4px; gap: 3px; min-width: 44px; justify-content: center; }
  .cv-nav__theme { width: 44px; }
  .cv-nav__logo { width: 40px; height: auto; }
  .cv-nav__brand { min-width: 44px; justify-content: center; }
}