@charset "UTF-8";
/* Grid a 3 colonne (non flex + space-between) così il logo resta esattamente al centro
   anche quando i due gruppi laterali hanno larghezze diverse (es. 2 bottoni a destra
   contro hamburger+lingua a sinistra). */
.site-header {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1037px;
  margin: 0 auto;
  z-index: 210;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 20px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease, border-radius 0.25s ease;
}

.site-header .logo {
  justify-self: center;
}

.site-header .header-right {
  justify-self: end;
}

/* Scorrendo verso l'alto l'header ricompare fisso in cima alla viewport, con angoli
   arrotondati come il pannello del menu (stesso trattamento "card" di Figma). */
.site-header.is-pinned {
  position: fixed;
  background: var(--color-bg-default-light);
  border-radius: 8px;
}

/* Menu aperto: fisso in cima (resta visibile scorrendo in qualunque direzione,
   non solo quando lo scroll-up lo "pinna"), sfondo e angoli come il resto. */
.site-header.is-menu-open {
  position: fixed;
  background: var(--color-bg-default-light);
  border-radius: 8px;
}

.site-header .header-left,
.site-header .header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dimensione fissa (non basata su padding+icona) così il bottone resta identico,
   perfettamente tondo, sia con l'icona hamburger sia con la X. */
.menu-toggle {
  background: var(--color-accent-500);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-toggle img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.menu-toggle .icon-close {
  display: none;
}

.site-header.is-menu-open .menu-toggle .icon-menu {
  display: none;
}

.site-header.is-menu-open .menu-toggle .icon-close {
  display: block;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--font-weight-medium);
}

.site-header .logo img {
  height: 56px;
  width: auto;
}

/* Pannello del menu: non è un overlay a schermo intero, si apre sotto l'header (che resta
   fermo al suo posto) ed è alto quanto il suo contenuto (max 90vh, scroll interno se serve).
   Solo il riquadro interno ha lo sfondo crema con angoli arrotondati, come in Figma. */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 90vh;
  z-index: 200;
  padding-top: calc(var(--header-height, 124px) + 30px);
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-16px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.nav-overlay.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}

.nav-overlay .menu-panel {
  padding: 0 24px;
}

.nav-overlay .menu-panel-inner {
  max-width: 1037px;
  margin: 0 auto;
  background: var(--color-bg-default-light);
  border-radius: 8px;
  padding: 20px 16px;
}

.nav-links {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nav-links a,
.nav-link-toggle {
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}

/* Voci con sottopagine (Zimmer & Ferienwohnungen, Aktivurlaub): un accordion che
   rivela i link reali alle sottopagine, invece di un singolo link generico. */
.nav-link-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.nav-link-toggle .nav-caret {
  width: 16px;
  height: 8px;
  transition: transform 0.25s ease;
}

.nav-item.is-expanded .nav-link-toggle .nav-caret {
  transform: rotate(180deg);
}

/* Valori esatti dal componente Figma "links menu" (stato espanso): gap 16px tra il
   parent e il blocco sotto-voci, padding 8px sul blocco, gap 16px tra le sotto-voci. */
.nav-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-item.is-expanded {
  gap: 16px;
}

.nav-sublist {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.nav-item.is-expanded .nav-sublist {
  max-height: 340px;
  opacity: 1;
}

.nav-sublist a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  color: var(--color-text-primary-dark);
}

.nav-sublist a.is-active {
  color: var(--color-accent-500);
}

/* Voce attiva/cliccata: colore accent. Il toggle diventa verde anche subito al click
   (classe .is-expanded, gestita via JS lato client), non solo quando il server rileva
   che la pagina attiva è dentro questa sezione. */
.nav-links a.is-active,
.nav-link-toggle.is-active,
.nav-item.is-expanded .nav-link-toggle {
  color: var(--color-accent-500);
}

.nav-links .nav-image {
  width: 359px;
  height: 366px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.nav-links .nav-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

/* Grid a 3 colonne (come per il logo dell'header) così Tel/email restano centrati per
   davvero, indipendentemente dalla larghezza di "Gallery" e dell'indirizzo ai lati. */
.overlay-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding-top: 24px;
  font-size: var(--text-body-size);
}

/* mod_custom avvolge il contenuto in un <div class="mod-custom">: va "sciolto" per
   restituire i due <p> come figli diretti della grid a 3 colonne. */
.overlay-footer .mod-custom {
  display: contents;
}

.overlay-footer > span {
  order: 1;
  justify-self: start;
}

.overlay-footer .footer-contact-text {
  order: 2;
  justify-self: center;
  text-align: center;
}

.overlay-footer .footer-address-text {
  order: 3;
  justify-self: end;
  text-align: right;
}

@media (max-width: 960px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px;
  }
  /* Pannello menu a tutto schermo (niente "card" arrotondata come su desktop). */
  .nav-overlay {
    background: var(--color-bg-default-light);
    max-height: 100vh;
  }
  .nav-overlay .menu-panel {
    padding: 16px;
  }
  .nav-overlay .menu-panel-inner {
    max-width: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }
  .nav-links {
    flex-direction: column;
  }
  .nav-links .nav-image {
    display: none;
  }
  /* Le voci menu (h3) e le sottovoci (h4) prendono già la dimensione mobile corretta
     dai token in tokens.scss (--text-h3-size/--text-h4-size), nessun override qui. */
  /* padding-bottom generoso: la barra Anfragen/Buchen è fixed sopra tutto, altrimenti
     copre l'ultima riga (indirizzo) del pannello menu. */
  .overlay-footer {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    padding-bottom: 110px;
  }
  .overlay-footer .footer-contact-text,
  .overlay-footer .footer-address-text {
    justify-self: start;
    text-align: left;
  }
  /* Anfragen/Buchen: su mobile sempre fissi in fondo allo schermo (non solo a menu
     aperto), affiancati e centrati (non a piena larghezza), sfondo uguale a quello
     dell'hero. Il position:fixed li toglie dal flusso dell'header, che quindi mostra
     solo hamburger + lingua + logo nella riga in alto. */
  .site-header .header-right {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 220;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-default-dark);
  }
  /* Sovrascrive il "tutti i bottoni full-width" globale (layout.scss): qui i due
     bottoni restano alla loro larghezza naturale, affiancati e centrati. */
  .site-header .header-right .btn {
    width: auto;
    flex: none;
  }
}