/* ==========================================================================
   BioManage — shared page hero
   The header, navigation and footer are the theme's own markup and styling.
   This file only adds the one hero composition used by every internal page.
   ========================================================================== */

:root {
  --bm-ink: #0b1f3a;
  --bm-surface: #eaf0f6;
  --bm-muted: #dde7f1;
  --bm-accent: #cfb180;
  --bm-accent-deep: #b89b74;
  --bm-line: #8a949e;

  /* Replaced at runtime with the header's measured height. */
  --bm-header-h: 80px;
  --bm-gutter: 15px;
  --bm-shell: 1600px;
  /* Left edge of the site container, so hero text lines up with the logo. */
  --bm-edge: max(var(--bm-gutter), calc((100vw - var(--bm-shell)) / 2));

  /* Composizione dell'hero: larghezza della fotografia, respiro fra le due
     colonne e misura massima della colonna di testo. Stanno qui perché la
     dimensione del titolo si calcola a partire da questi tre numeri. */
  --bm-hero-media: min(46vw, 820px);
  --bm-hero-pad-r: clamp(1.75rem, 4vw, 4.5rem);
  --bm-hero-measure: 54rem;

  /* Altezza dell'hero delle pagine interne. A schermo pieno la fotografia e
     il titolo spingevano il primo capoverso della pagina sotto la piega e
     lasciavano due bande vuote sopra e sotto il testo: 80vh e' abbastanza per
     reggere il titolo piu' lungo del sito e abbastanza poco da far vedere che
     la pagina continua. La misura dei titoli si ricava da qui (vedi sotto),
     quindi cambiando questo numero si riaccorda da sola. */
  --bm-hero-h: 70svh;
}

@media (min-width: 640px) {
  :root { --bm-gutter: 20px; }
}

@media (min-width: 960px) {
  :root { --bm-gutter: 40px; }
}

/* --------------------------------------------------------------------------
   Page hero — the same composition on every internal page:
   text on the left, one image bleeding to the right edge, one screen tall.
   -------------------------------------------------------------------------- */

.bm-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bm-hero-media);
  align-items: center;
  min-height: var(--bm-hero-h);
  background: var(--bm-surface);
  overflow: hidden;

  /* Misura viva della colonna di testo: la stessa sottrazione che fa la
     griglia qui sopra, così il titolo sa quanto spazio ha davvero. */
  --bm-measure: min(
    calc(100vw - var(--bm-hero-media) - var(--bm-edge) - var(--bm-hero-pad-r)),
    var(--bm-hero-measure)
  );
}

.bm-hero__text {
  grid-column: 1;
  align-self: center;
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(var(--bm-edge) + var(--bm-hero-measure) + var(--bm-hero-pad-r));
  padding: clamp(2.25rem, 6vh, 4.5rem) var(--bm-hero-pad-r) clamp(2.25rem, 6vh, 4.5rem) var(--bm-edge);
}

/* Stesso occhiello del resto del sito (.bm-occhiello in layout-refinements):
   etichetta e filo che corre fino al bordo della fotografia. Vale sia per la
   dicitura semplice sia per il percorso a briciole delle pagine servizio. */
.bm-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.75rem);
  margin: 0 0 clamp(.9rem, 2vh, 1.6rem);
  color: var(--bm-accent-deep);
  font: 500 11px/1.5 Sora, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bm-hero__eyebrow::after {
  content: '';
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity: .5;
}

.bm-hero__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.bm-hero__eyebrow a:hover {
  color: var(--bm-ink);
}

.bm-hero__eyebrow ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .55em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-hero__eyebrow li + li::before {
  content: '/';
  margin-right: .55em;
  color: var(--bm-line);
}

/* Il titolo riempie la misura: la dimensione non e' scelta a occhio ma
   ricavata dalla larghezza della colonna diviso --bm-title-d, un numero
   tarato su ogni singolo titolo (vedi la tabella in fondo al file).
   Niente text-wrap: balance — le righe devono riempire, non pareggiarsi.

   Il secondo termine e' il freno in altezza: su uno schermo basso un titolo
   di quattro righe riempirebbe la misura e uscirebbe dalla schermata, quindi
   non puo' prendersi piu' del 55% dell'hero (.55 / .84 di interlinea = .6548,
   diviso il numero di righe che quel titolo fa davvero, --bm-title-r).
   L'altezza di riferimento e' --bm-hero-h, non piu' la schermata intera. */
.bm-hero__title {
  margin: 0;
  color: var(--bm-ink);
  font-family: Genos, sans-serif;
  font-size: min(
    calc(var(--bm-measure) * .86 / var(--bm-title-d, 6)),
    calc(var(--bm-hero-h) * .62 / var(--bm-title-r, 2))
  );
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.005em;
}

.bm-hero__lead {
  max-width: 38ch;
  margin: clamp(1.4rem, 3vh, 2.4rem) 0 0;
  color: rgba(11, 31, 58, .78);
  font-family: Genos, sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  line-height: 1.25;
}

.bm-hero__media {
  grid-column: 2;
  align-self: stretch;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--bm-muted);
}

.bm-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bm-hero-pos, center);
}

/* Chi siamo: la foto di gruppo si legge da sinistra, cosi' alle larghezze in
   cui il riquadro taglia ai lati restano dentro le persone di quel lato. */
.bm-hero--chi-siamo { --bm-hero-pos: 0% 50%; }

/* Scroll cue: sits on the baseline of the text column. */
.bm-hero__cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  left: var(--bm-edge);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  color: rgba(11, 31, 58, .55);
  font: 500 10px/1 Sora, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease-in-out;
}

.bm-hero__cue:hover {
  color: var(--bm-ink);
}

.bm-hero__cue::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-bottom: 3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

/* L'hero e' l'unico blocco che entra al caricamento invece che allo scorrimento
   — sta sopra la piega, non c'e' niente da aspettare. Usa pero' gli stessi
   numeri di tutto il resto (motion.css): stessa curva, stessa durata, stessa
   distanza e lo stesso passo di sfalsamento, cosi' l'ingresso in pagina e la
   lettura che segue si muovono allo stesso modo. */
@media (prefers-reduced-motion: no-preference) {
  .bm-hero__eyebrow,
  .bm-hero__title,
  .bm-hero__lead {
    animation: bm-rise var(--bm-dur, .7s) var(--bm-ease, cubic-bezier(.16, 1, .3, 1)) backwards;
  }

  .bm-hero__title { animation-delay: .06s; }
  .bm-hero__lead { animation-delay: .12s; }

  .bm-hero__cue {
    animation: bm-rise var(--bm-dur, .7s) var(--bm-ease, cubic-bezier(.16, 1, .3, 1)) .45s backwards,
               bm-cue 2.4s 1.4s ease-in-out infinite;
  }

  .bm-hero__media {
    animation: bm-reveal 1s var(--bm-ease, cubic-bezier(.16, 1, .3, 1)) backwards;
  }

  .bm-hero__img {
    animation: bm-zoom 1.4s var(--bm-ease, cubic-bezier(.16, 1, .3, 1)) backwards;
  }
}

@keyframes bm-rise {
  from { opacity: 0; transform: translateY(var(--bm-rise, 16px)); }
}

/* L'hero della home non e' il .bm-hero delle pagine interne: e' il blocco con
   il video. Entra allo stesso modo — stessa curva, stessa distanza, stesso
   passo — perche' il primo movimento che si vede sul sito deve essere uno solo. */
@media (prefers-reduced-motion: no-preference) {
  .hero-hp h1,
  .hero-hp h2 {
    animation: bm-rise var(--bm-dur, .7s) var(--bm-ease, cubic-bezier(.16, 1, .3, 1)) backwards;
  }

  .hero-hp h2 { animation-delay: .06s; }
}

@keyframes bm-reveal {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes bm-zoom {
  from { transform: scale(1.04); }
}

@keyframes bm-cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (max-width: 959px) {
  .bm-hero {
    /* In colonna l'hero resta quello di prima: testo sopra, fotografia sotto,
       una schermata piena. Gli 80vh valgono dove le due colonne stanno
       affiancate e il vuoto si vedeva. */
    min-height: calc(100svh - var(--bm-header-h));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    /* Una sola colonna: la misura e' la pagina meno i margini. */
    --bm-measure: calc(100vw - var(--bm-gutter) * 2);
  }

  .bm-hero__title { line-height: .88; }

  .bm-hero__text {
    grid-column: 1;
    max-width: none;
    padding: clamp(2.5rem, 7vh, 4.5rem) var(--bm-gutter) clamp(2rem, 5vh, 3rem);
  }

  .bm-hero__media {
    grid-column: 1;
    height: 38svh;
  }

  .bm-hero__cue {
    display: none;
  }

  .bm-hero__lead {
    max-width: 40ch;
  }
}

@media (max-width: 639px) {
  .bm-hero__media { height: 32svh; }
  .bm-hero__lead { font-size: 1.125rem; }
}


/* --------------------------------------------------------------------------
   Taratura dei titoli, pagina per pagina
   --bm-title-d e' il divisore della misura: font-size = misura / d.
   Si ricava da due vincoli, e vince il piu' grande dei due:
     d1 = larghezza della parola piu' lunga / 100  (la parola deve entrare)
     d2 = larghezza dell'intero titolo / 100 / righe volute
   Le larghezze sono misurate in Genos a 100px. Cambiando un titolo va
   rimisurata la sua riga: e' l'unico modo per riempire davvero la colonna
   senza mandare una parola fuori misura o il titolo sotto la fotografia.
   -------------------------------------------------------------------------- */

/* "A chi ci rivolgiamo" — 2 righe, vincolo: rivolgiamo (402) */
.bm-hero--a-chi { --bm-title-d: 4.02; --bm-title-r: 2; }

/* "Asset management" — 2 righe, vincolo: management (498) */
.bm-hero--asset { --bm-title-d: 4.98; --bm-title-r: 2; }

/* "Analisi e progettazione di fattibilita" — 3 righe, vincolo: progettazione (536) */
.bm-hero--fattibilita { --bm-title-d: 5.36; --bm-title-r: 3; }

/* "Consulenza biologica per impianti biogas e biometano" — 4 righe piene */
.bm-hero--biologica { --bm-title-d: 6.55; --bm-title-r: 4; }

/* "Coordinamento sicurezza per impianti biogas e biometano" — 4 righe piene */
.bm-hero--sicurezza { --bm-title-d: 6.75; --bm-title-r: 4; }

/* "Gestione elettromeccanica" — 2 righe, vincolo: elettromeccanica (664) */
.bm-hero--elettromeccanica { --bm-title-d: 6.64; --bm-title-r: 2; }

/* "Gestione vendita commodities energetiche" — quattro parole lunghe quasi
   uguali: vanno una per riga, vincolo commodities (486) con un po' d'aria */
.bm-hero--commodities { --bm-title-d: 5.2; --bm-title-r: 4; }

/* "Gestione O&M" — 2 righe, vincolo: Gestione (338) */
.bm-hero--om { --bm-title-d: 3.38; --bm-title-r: 2; }

/* "Reperimento e logistica biomasse" — 3 righe, vincolo: Reperimento (499) */
.bm-hero--biomasse { --bm-title-d: 5.08; --bm-title-r: 3; }

/* "Servizi agronomici per biogas e biometano" — 4 righe piene */
.bm-hero--agronomici { --bm-title-d: 6; --bm-title-r: 4; }

/* "Supporto amministrativo per impianti biogas e biometano" — 4 righe piene */
.bm-hero--amministrativo { --bm-title-d: 7.2; --bm-title-r: 4; }

/* "Chi siamo" — una riga sola che riempie la misura (381) */
.bm-hero--chi-siamo { --bm-title-d: 3.81; --bm-title-r: 1; }

/* "Contatti" — parola sola, una riga piena (296) */
.bm-hero--contatti { --bm-title-d: 2.96; --bm-title-r: 1; }

/* "Manifesto" — parola sola, una riga piena (377) */
.bm-hero--manifesto { --bm-title-d: 3.77; --bm-title-r: 1; }

/* "Analisi, presidio, coordinamento" — 3 righe, vincolo: coordinamento (582) */
.bm-hero--metodo { --bm-title-d: 5.78; --bm-title-r: 3; }

/* "Mission & Vision" — 2 righe (634/2) */
.bm-hero--mission { --bm-title-d: 3.17; --bm-title-r: 2; }

/* "News" — parola sola, una riga piena (221): e' la piu' corta del sito,
   quindi la piu' grande. Stessa regola delle altre, non un'eccezione. */
.bm-hero--news { --bm-title-d: 2.25; --bm-title-r: 1; }

/* Articolo di news: il titolo cambia a ogni pezzo, quindi qui non si tara
   niente e si tiene una misura che regge anche un titolo lungo. */
.bm-hero--articolo { --bm-title-d: 7; --bm-title-r: 3; }


/* ==========================================================================
   Menu mobile
   Stesso fondo chiaro del menu desktop (.uk-navbar-dropdown, #eaf0f6):
   pannello a tutta altezza, voci su righe divise da una linea sottile e
   sottolivelli a fisarmonica, così il listino servizi non allunga la pagina.
   Ogni regola è agganciata a .bm-menu: il tema veste l'offcanvas come pannello
   scuro con selettori a due classi, che altrimenti vincerebbero per specificità.
   ========================================================================== */

.bm-menu .uk-offcanvas-bar {
  --uk-inverse: dark;
  /* Lo scorrimento è su transform, non su right: UIkit attende il transitionend
     del pannello per completare la chiusura, e su una barra ancorata a destra
     con larghezza propria l'animazione di "right" non parte sempre. */
  left: auto;
  right: 0;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  width: min(100%, 25rem);
  padding: 0;
  background: var(--bm-surface);
  color: var(--bm-ink);
  overflow: hidden;
}

/* uk-open sta sul contenitore, che è anche .bm-menu: serve il selettore composto. */
.bm-menu.uk-open > .uk-offcanvas-bar { transform: translateX(0); }
.bm-menu .uk-offcanvas-bar-animation { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }

/* --- testa: logo e chiusura -------------------------------------------- */

.bm-menu .bm-menu__top {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(11, 31, 58, .1);
}

.bm-menu .bm-menu__logo { display: block; line-height: 0; }
.bm-menu .bm-menu__logo img { display: block; width: 150px; height: auto; }

/* Il pulsante usa la chiusura nativa dell'offcanvas (.uk-offcanvas-close), così
   UIkit riporta l'icona della barra da "chiudi" ad "apri". Le sue coordinate
   assolute vanno annullate: qui il pulsante sta nel flusso della testata. */
.bm-menu .bm-menu__close {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bm-ink);
  cursor: pointer;
}

.bm-menu .bm-menu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: background-color .2s ease-in-out;
}

.bm-menu .bm-menu__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.bm-menu .bm-menu__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.bm-menu .bm-menu__close:hover span { background: var(--bm-accent-deep); }

/* --- navigazione -------------------------------------------------------- */

.bm-menu .bm-menu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.bm-menu .bm-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-menu .bm-menu__list > li {
  margin: 0;
  border-bottom: 1px solid rgba(11, 31, 58, .08);
}

.bm-menu .bm-menu__item > a,
.bm-menu .bm-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.0625rem 1.5rem;
  border: 0;
  background: none;
  color: var(--bm-ink);
  font: 400 1.0625rem/1.3 Sora, sans-serif;
  letter-spacing: -.01em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: color .2s ease-in-out;
}

.bm-menu .bm-menu__item > a:hover,
.bm-menu .bm-menu__toggle:hover { color: var(--bm-accent-deep); }

/* freccia dei livelli apribili */
.bm-menu .bm-menu__toggle::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.bm-menu .bm-menu__group.uk-open > .bm-menu__toggle { color: var(--bm-accent-deep); }
.bm-menu .bm-menu__group.uk-open > .bm-menu__toggle::after { margin-top: 3px; transform: rotate(-135deg); }

/* pagina corrente */
.bm-menu .bm-menu__item--active > a { justify-content: flex-start; color: var(--bm-accent-deep); }

/* Il richiamo in fondo al sottolivello usa gia' ::before per lo stelo della
   freccia: li' la pagina corrente si segnala col colore, non col trattino. */
.bm-menu .bm-menu__item--active > a::before,
.bm-menu .bm-menu__subitem--active:not(.bm-menu__subitem--cta) > a::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  margin-right: .75rem;
  background: var(--bm-accent-deep);
}

.bm-menu .bm-menu__subitem--cta.bm-menu__subitem--active > .bm-menu__subcta { color: var(--bm-ink); }

/* --- sottolivelli ------------------------------------------------------- */

.bm-menu .bm-menu__sub {
  margin: 0;
  padding: 0 1.5rem 1.125rem;
  list-style: none;
}

.bm-menu .bm-menu__sub > li { margin: 0; }

.bm-menu .bm-menu__subitem > a {
  display: flex;
  align-items: center;
  padding: .5rem 0;
  color: rgba(11, 31, 58, .68);
  font: 400 .9375rem/1.4 Inter, sans-serif;
  text-decoration: none;
  text-transform: none;
  transition: color .2s ease-in-out;
}

.bm-menu .bm-menu__subitem > a:hover { color: var(--bm-ink); }
.bm-menu .bm-menu__subitem--active > a { color: var(--bm-accent-deep); }

/* --- piede: contatti ---------------------------------------------------- */

.bm-menu .bm-menu__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(11, 31, 58, .1);
  background: var(--bm-muted);
}

.bm-menu .bm-menu__cta {
  display: block;
  margin-bottom: .5rem;
  padding: .875rem 1.25rem;
  background: var(--bm-ink);
  color: var(--bm-surface);
  font: 400 .875rem/1 Sora, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease-in-out;
}

.bm-menu .bm-menu__cta:hover { background: var(--bm-accent-deep); color: var(--bm-surface); }

.bm-menu .bm-menu__contact {
  color: rgba(11, 31, 58, .68);
  font: 400 .875rem/1.6 Inter, sans-serif;
  text-decoration: none;
}

.bm-menu .bm-menu__contact:hover { color: var(--bm-ink); }

@media (min-width: 960px) {
  .bm-menu { display: none; }
}

/* --------------------------------------------------------------------------
   Righe con accordion
   L'accordion cambia l'altezza della riga a ogni apertura: le colonne accanto
   non devono seguirla, altrimenti l'immagine si allunga a ogni clic.
   La classe è messa da site-shell.js sulla griglia più vicina.
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .bm-row-accordion > * { align-self: start; }
  .bm-row-accordion > .uk-flex-column > .uk-flex-1 { flex: 0 0 auto; }
  .bm-row-accordion > .uk-flex-column { justify-content: flex-start; }

  /* La foto accanto prende l'altezza dell'elenco a voci chiuse, misurata da
     site-shell.js: combacia con la colonna di fianco e resta ferma quando una
     voce si apre. Senza la misura resta il comportamento di prima. */
  .bm-row-accordion > .uk-flex-column > .bm-fill {
    height: var(--bm-row-accordion-h, auto);
  }
}

/* --------------------------------------------------------------------------
   Menu mobile: il rimando a "Chi siamo"
   Su desktop la voce non sta nell'elenco del menu a tendina, sta sotto la
   riga come richiamo del genitore (.bm-mega-cta). Qui fa lo stesso: chiude
   il sottolivello dell'Azienda con lo stesso segno — maiuscoletto e freccia
   lunga — e non si confonde con le pagine elencate sopra.
   -------------------------------------------------------------------------- */

.bm-menu .bm-menu__subitem--cta { margin-top: .5rem; }

.bm-menu .bm-menu__subcta {
  display: inline-flex;
  align-items: center;
  padding: .5rem 0;
  color: var(--bm-accent-deep);
  font: 500 11px/1 Sora, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease-in-out;
}

.bm-menu .bm-menu__subcta::before {
  content: '';
  order: 2;
  width: 44px;
  height: 1px;
  margin-left: 14px;
  background: currentColor;
  transition: width .3s cubic-bezier(.16, 1, .3, 1);
}

.bm-menu .bm-menu__subcta::after {
  content: '';
  order: 3;
  width: 7px;
  height: 7px;
  margin-left: -5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.bm-menu .bm-menu__subcta:hover { color: var(--bm-ink); }
.bm-menu .bm-menu__subcta:hover::before { width: 62px; }

/* ==========================================================================
   Barra mobile agganciata in alto
   Il tema affida l'aggancio a uk-sticky, che in questa esportazione statica
   non si avvia: la barra scorre via con la pagina e per riaprire il menu si
   deve tornare in cima. Qui e' fissa da subito, senza dipendere da JS per
   stare al suo posto. Il cambio di stato — trasparente sull'hero, piena
   appena si scorre — lo fa site-shell.js con le stesse classi che avrebbe
   messo uk-sticky, cosi' logo e colori del tema seguono senza altre regole.
   ========================================================================== */

@media (max-width: 959px) {
  .tm-header-mobile > [uk-sticky] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 980;
  }

  /* Sulle pagine interne la barra stava nel flusso: uscendone lascerebbe il
     contenuto a salire di 80px, quindi l'intestazione tiene il proprio posto. */
  .tm-header-mobile:not(.tm-header-overlay) { min-height: var(--bm-header-h, 80px); }

  .tm-header-mobile .uk-navbar-container {
    transition: background-color .3s cubic-bezier(.16, 1, .3, 1);
  }

  /* Sull'hero della home la barra e' sovrapposta e trasparente: quando si
     stacca le serve un fondo suo, altrimenti il logo navy resta appeso sopra
     il contenuto che scorre. Scritto qui e non lasciato al tema perche' sulle
     pagine con intestazione sovrapposta il tema la tiene trasparente. */
  .tm-header-mobile .uk-navbar-sticky { background-color: var(--bm-surface); }
}