/* Testata sottile al computer (kit header-sottile-8-10, CEO 8/10). Con js/tbp-testata-sottile.js.
 * html.tbp-ts-pronta: altezza della testata fissata (misurata in cima) e transizioni attive.
 * html.tbp-ts: barra di 72 px dopo 80 px di scorrimento. L'altezza persa diventa margin-bottom nello stesso
 * tempo e con la stessa curva: la somma resta uguale a ogni fotogramma, la pagina sotto non si muove.
 * --tbp-testata-spazio è il margine che già c'era sotto la testata (si fonde con il nostro): parte da lì, mai da 0.
 * Le regole stanno nel livello tbp-appearance perché lì il tema fissa height: auto !important sulla testata
 * (e un !important a livelli vince su ogni !important fuori). Solo da 1024 px: il telefono ha la barra in basso. */
:root { --tbp-testata-sottile: 72px; }

@layer tbp-appearance {
@media (min-width: 1024px) {
  html.tbp-ts-pronta body:not(.home) #header {
    height: var(--tbp-testata-alta) !important;
    min-height: 0 !important;
    margin-bottom: var(--tbp-testata-spazio, 0px) !important;
    transition: height 200ms cubic-bezier(.2, 0, 0, 1), margin-bottom 200ms cubic-bezier(.2, 0, 0, 1), box-shadow 200ms ease !important;
  }
  html.tbp-ts-pronta body:not(.home) #header .header-wrapper,
  html.tbp-ts-pronta body:not(.home) #header #masthead {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* ---------- La barra sottile ---------- */
  html.tbp-ts body:not(.home) #header {
    height: var(--tbp-testata-sottile) !important;
    margin-bottom: calc(var(--tbp-testata-alta) - var(--tbp-testata-sottile) + var(--tbp-testata-spazio, 0px)) !important;
    box-shadow: 0 1px 0 rgba(8, 72, 40, .10), 0 6px 18px rgba(8, 72, 40, .06) !important;
  }
  html.tbp-ts[data-tbp-theme="dark"] body:not(.home) #header { box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .35) !important; }

  html.tbp-ts body:not(.home) #header #masthead { padding-top: 0 !important; padding-bottom: 0 !important; }
  html.tbp-ts body:not(.home) #header #masthead .header-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    height: var(--tbp-testata-sottile) !important;
    max-width: 1224px !important; /* contenuti a 1160 px come /cerca/ e le pagine nuove */
    margin: 0 auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    animation: tbp-ts-entra 200ms cubic-bezier(.2, 0, 0, 1) both;
  }
  html.tbp-ts-mosso.tbp-ts-pronta:not(.tbp-ts) body:not(.home) #header #masthead .header-inner { animation: tbp-ts-torna 200ms cubic-bezier(.2, 0, 0, 1) both; }

  /* Marchio a sinistra, 46 px di altezza (stesso disegno, chiaro o scuro come in cima). */
  html.tbp-ts body:not(.home) #header #masthead #logo {
    flex: 0 0 auto !important;
    order: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 0 !important;
  }
  html.tbp-ts body:not(.home) #header #masthead #logo a,
  html.tbp-ts body:not(.home) #header #masthead #logo .tbp-brand-lockup { display: inline-flex !important; align-items: center !important; height: 46px !important; width: auto !important; }
  html.tbp-ts body:not(.home) #header #masthead #logo img {
    height: 46px !important;
    max-height: 46px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Menu, tema e lingua: una riga. */
  html.tbp-ts body:not(.home) #header #masthead .tbp-header-desktop-slot {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item {
    --tbp-icon: 26px;
    flex-direction: row !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:hover { background: rgba(8, 72, 40, .06) !important; }
  html.tbp-ts[data-tbp-theme="dark"] body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:hover { background: rgba(255, 255, 255, .08) !important; }
  html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:focus-visible { outline: 3px solid #145e3f !important; outline-offset: 2px !important; }
  html.tbp-ts[data-tbp-theme="dark"] body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:focus-visible { outline-color: #9bdbb5 !important; }
  html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item::after { left: 10px !important; right: 10px !important; bottom: 2px !important; }
  html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-lava-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    flex: 0 0 26px !important;
  }
  html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__label {
    margin: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
  html.tbp-ts body:not(.home) #header #masthead :is(.tbp-header-appearance, .tbp-language-switcher) { margin: 0 !important; flex: 0 0 auto !important; }

  /* Scheda esperienza (tbp-scheda-desktop.css): la colonna «Prenota» è ferma a 24 px perché lì la testata sparisce
     scorrendo in giù (inc/esperienze-testata.php). Quando ricompare (scorrendo in su) è la barra sottile:
     la colonna scende sotto di lei invece di finirci sotto. */
  html.tbp-ts body.single-esperienze.tbp-scheda-pc:not(.tbp-testata-via) #main > .corpo > .tbp-exp-bookcol { top: calc(var(--tbp-testata-sottile) + 24px) !important; }
  html.tbp-ts-pronta body.single-esperienze.tbp-scheda-pc #main > .corpo > .tbp-exp-bookcol { transition: top 260ms cubic-bezier(.4, 0, .2, 1) !important; }

  /* La firma «Made in Garda» resta solo nella testata alta. */
  html.tbp-ts body:not(.home) #header .tbp-header-brandline {
    position: absolute !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Fra 1024 e 1199 px le voci sono strette: solo l'icona, il nome resta per chi legge lo schermo e nel suggerimento del mouse (title dallo script). */
  @media (max-width: 1199px) {
    html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__label {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
    }
    html.tbp-ts body:not(.home) #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item { padding: 0 9px !important; }
  }
}
}

@keyframes tbp-ts-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tbp-ts-torna { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  @layer tbp-appearance {
    html.tbp-ts-pronta body:not(.home) #header { transition: none !important; }
    html.tbp-ts-pronta body:not(.home) #header #masthead .header-inner { animation: none !important; }
  }
}

/* 13/10/2026 (CEO, dal telefono: «che brutto header così da mobile, togli Made in Garda e tieni solo ToBePolo»).
   Sotto 850 px la firma «Made in Garda per l'Italia intera» non si vede più: in nessuna pagina e in nessuno stato
   della testata (alta, sottile, dopo lo scorrimento, con l'accesso fatto, dove finiva in colonna accanto al marchio
   su quattro righe). Resta il marchio. Al computer non cambia niente. La regola sta anche nello strato delle
   apparenze, con l'id scritto due volte: lì vivono le regole che oggi la mostrano, e fuori dallo strato perderebbe. */
@media (max-width: 849px) {
  html body #header .tbp-header-brandline,
  html body .tbp-header-brandline {
    display: none !important;
  }
}
@layer tbp-appearance {
  @media (max-width: 849px) {
    html body #header#header .tbp-header-brandline,
    html body.home #header#header .tbp-header-brandline,
    html body .tbp-header-brandline.tbp-header-brandline.tbp-header-brandline {
      display: none !important;
    }
  }
}