/* ==========================================================================
   Solar CMA, HEADER e navigazione. Proprietario: header. Caricato dopo theme.css.
   Stato a riposo: barra trasparente a tutta larghezza, allineata alla griglia.
   Stato .is-stuck (classe messa da site.js dopo ~14px di scroll): una pillola di
   vetro compatta, centrata. La pillola e' la lastra .header-plate (un solo
   backdrop-filter, solo in questo stato); wordmark e nav si avvicinano con
   transform, l'altezza dell'header NON cambia (zero layout shift).
   Animazioni solo transform/opacity. Barra di progresso: .header::after (theme.css).
   ========================================================================== */

.header{
  --hd-ph:58px;                 /* altezza della pillola */
  --hd-max:980px;               /* larghezza massima della pillola */
  --hd-m:16px;                  /* margine minimo pillola dal bordo schermo */
  --hd-ip:16px;                 /* respiro interno pillola (bordo pillola > contenuto) */
  --hd-u:1vw;                   /* unita' di larghezza: 1cqw dove supportata (niente scrollbar nel conto) */
  --hd-ease:var(--ease-out,cubic-bezier(.22,1,.36,1));
  --hd-link:#33496b;            /* testo link a riposo (AA su chiaro e sul vetro) */
  --hd-pad:max(calc(4.5 * var(--hd-u)),calc((100vw - 1480px) / 2));   /* stesso margine di .hero (style.css) */
  --hd-w:min(calc(100 * var(--hd-u) - 2 * var(--hd-m)),var(--hd-max));
  --hd-s:max(0px,calc((100 * var(--hd-u) - var(--hd-w)) / 2 + var(--hd-ip) - var(--hd-pad)));
  /* niente padding sull'header: cosi' 100cqw = larghezza intera; il margine laterale lo portano wordmark e nav */
  padding:0;
  /* l'header e' una fascia a tutta larghezza: lascia passare i click dove e' vuota */
  pointer-events:none;
}
@supports (width:1cqw){
  .header{--hd-u:1cqw;container-type:inline-size}
}
.header>.wordmark,
.header>nav{position:relative;z-index:1;pointer-events:auto}
.header>.wordmark{margin-left:max(4.5%,calc((100vw - 1480px) / 2))}
.header>nav{margin-right:max(4.5%,calc((100vw - 1480px) / 2))}

/* niente stile "stuck" sull'header stesso: lo porta la lastra */
.header.is-stuck{
  background:transparent;border-bottom-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* --------------------------------------------------------------------------
   Lastra di vetro (pillola)
   -------------------------------------------------------------------------- */
.header-plate{
  position:absolute;z-index:0;pointer-events:none;
  left:calc((100 * var(--hd-u) - var(--hd-w)) / 2);width:var(--hd-w);
  top:calc((var(--header-h,88px) - var(--hd-ph)) / 2);height:var(--hd-ph);
  border-radius:30px;corner-shape:squircle;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,252,255,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(11,36,71,.06),
    0 1px 2px rgba(7,27,58,.06),
    0 14px 28px -14px rgba(22,70,201,.34),
    0 26px 48px -26px rgba(25,180,236,.5);
  opacity:0;
  transform:translate3d(0,-10px,0) scale(.965);
  transition:opacity .4s ease,transform .7s var(--hd-ease);
}
/* bordo luminoso sottile (stessa tecnica del bordo della scena) */
.header-plate::before{
  content:"";position:absolute;inset:0;padding:1px;
  border-radius:inherit;corner-shape:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(25,180,236,.34) 38%,rgba(255,212,38,.32) 68%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.header.is-stuck .header-plate{
  opacity:1;transform:none;pointer-events:auto;
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
          backdrop-filter:blur(14px) saturate(1.5);
}
html:not(.js) .header-plate{display:none}   /* senza JS: ci pensa lo sfondo pieno di theme.css */

/* wordmark e nav si avvicinano alla pillola */
.header .wordmark{transform-origin:0 50%;transition:transform .7s var(--hd-ease)}
.header.is-stuck .wordmark{transform:translate3d(var(--hd-s),0,0) scale(.9)}
.header nav{transition:transform .7s var(--hd-ease)}
.header.is-stuck nav{transform:translate3d(calc(-1 * var(--hd-s)),0,0)}

/* --------------------------------------------------------------------------
   Wordmark: marchio + "Solar CMA" + sottotitolo
   -------------------------------------------------------------------------- */
.wordmark{
  gap:12px;min-height:44px;border-radius:16px;corner-shape:squircle;
  -webkit-tap-highlight-color:transparent;
}
.wordmark .wordmark-mark{width:44px;height:44px}
.wordmark .wordmark-text{gap:6px}
/* il disegno del testo (famiglie, pesi) e' in fonts.css; qui solo le proporzioni del lockup:
   nome e sottotitolo hanno la stessa larghezza (calibrato su Bricolage 30px + Geist 8px) */
.wordmark .wordmark-text strong{font-size:30px;line-height:.9;font-variant-numeric:lining-nums}
.wordmark .wordmark-text small{
  font-size:8px;letter-spacing:.04em;line-height:1;
  text-transform:uppercase;color:#4d6481;white-space:nowrap;
  transition:opacity .35s ease,transform .6s var(--hd-ease);
}
.header .wordmark .wordmark-text strong{transition:transform .7s var(--hd-ease)}
.header.is-stuck .wordmark .wordmark-text small{opacity:0;transform:translate3d(0,-3px,0)}
.header.is-stuck .wordmark .wordmark-text strong{transform:translate3d(0,7px,0)}
.header .wordmark:focus-visible{outline:2px solid var(--blue,#1646c9);outline-offset:4px;box-shadow:0 0 0 6px rgba(25,180,236,.28)}

/* --------------------------------------------------------------------------
   Navigazione
   -------------------------------------------------------------------------- */
.header nav{position:relative;gap:2px;font-size:14px;font-weight:600;letter-spacing:-.005em}
.header nav a:not(.nav-contact){
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border-radius:16px;corner-shape:squircle;
  color:var(--hd-link);
  transition:color .25s ease;
}
.header nav a[aria-current=page]{color:var(--navy,#071b3a)}
@media(hover:hover){
  .header nav a:not(.nav-contact):hover{color:var(--navy,#071b3a)}
}
.header nav a:not(.nav-contact):focus-visible{
  color:var(--navy,#071b3a);
  outline:2px solid var(--blue,#1646c9);outline-offset:-2px;box-shadow:0 0 0 4px rgba(25,180,236,.28);
}

/* indicatore scorrevole (site.js scrive --ix --iw --io); senza JS restano le sottolineature di theme.css */
.nav-ind{
  position:absolute;left:0;bottom:8px;width:100px;height:2px;border-radius:2px;
  background:var(--grad-solar,linear-gradient(90deg,#ffd426,#22b36b,#19b4ec));
  transform-origin:0 50%;
  transform:translate3d(var(--ix,0px),0,0) scaleX(var(--iw,0));
  opacity:0;pointer-events:none;
  transition:transform .55s var(--hd-ease),opacity .3s ease;
}
.header nav.has-ind .nav-ind{opacity:var(--io,0)}
.header nav.has-ind a::after{display:none}
.header nav.ind-init .nav-ind{transition:none}

/* CTA: pillola navy con puntino pulsante */
.header .nav-contact{
  min-height:44px;margin-left:8px;padding:0 20px 0 22px;gap:12px;
  border:0;border-radius:999px;corner-shape:squircle;
  color:#fff;background:var(--navy,#071b3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -12px rgba(7,27,58,.75);
  transition:box-shadow .4s var(--hd-ease),transform .35s var(--hd-ease),color .25s ease;
}
.header .nav-contact-label{position:relative}
@media(hover:hover){
  .header .nav-contact:hover{
    color:var(--navy,#071b3a);border-color:transparent;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -12px rgba(34,179,107,.85);
  }
  .header .nav-contact:hover .tiny-dot{background:var(--navy,#071b3a)}
}
.header .nav-contact:active{transform:scale(.97)}
.header .nav-contact:focus-visible{
  color:var(--navy,#071b3a);
  outline:2px solid var(--blue,#1646c9);outline-offset:3px;box-shadow:0 0 0 7px rgba(25,180,236,.28);
}
.header .nav-contact:focus-visible .tiny-dot{background:var(--navy,#071b3a)}
.header .tiny-dot{
  width:8px;height:8px;background:#5ee0a2;
  box-shadow:0 0 10px 1px rgba(94,224,162,.7);
  transition:background-color .25s ease;
}
.header .tiny-dot::after{
  inset:-1px;border:1.5px solid #5ee0a2;
  animation:hd-ping 2.8s var(--hd-ease) infinite;
}
.header .nav-contact:hover .tiny-dot::after,
.header .nav-contact:focus-visible .tiny-dot::after{border-color:var(--navy,#071b3a)}
@keyframes hd-ping{0%{transform:scale(.9);opacity:.85}70%,100%{transform:scale(2.7);opacity:0}}
/* tab nascosta: i loop dell'header si fermano (classe messa da site.js) */
html.is-hidden .header *,html.is-hidden .header *::before,html.is-hidden .header *::after{animation-play-state:paused!important}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  .header{--hd-ph:52px;--hd-m:10px;--hd-ip:10px;--hd-pad:calc(6 * var(--hd-u))}
  .header>.wordmark{margin-left:6%}
  .header>nav{margin-right:6%}
  .header-plate{border-radius:26px}
  .wordmark{gap:8px}
  .wordmark .wordmark-mark{width:34px;height:34px}
  .wordmark .wordmark-text strong{font-size:21px}
  .wordmark .wordmark-text small{display:none}
  .header.is-stuck .wordmark .wordmark-text strong{transform:none}
  .header nav{gap:0;font-size:13px}
  .header nav a:not(.nav-contact){padding:0 9px}
  .header nav a:first-child{display:none}
  .header .nav-contact{margin-left:2px;padding:0 13px 0 15px;gap:8px}
  .header .nav-contact .tiny-dot{display:inline-block;width:6px;height:6px}
}
/* "Chi siamo" rientra appena c'e' spazio */
@media(min-width:481px) and (max-width:640px){
  .header nav a:first-child{display:inline-flex}
  .header nav a:not(.nav-contact){padding:0 11px}
}
/* telefoni molto stretti (320): solo marchio + nav */
@media(max-width:350px){
  .wordmark .wordmark-text{display:none}
}

/* --------------------------------------------------------------------------
   Accessibilita'
   -------------------------------------------------------------------------- */
@media(prefers-reduced-transparency:reduce){
  .header.is-stuck .header-plate{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:#f6fbff;
  }
}
@media(forced-colors:active){
  .header-plate{border:1px solid CanvasText;background:Canvas}
  .nav-ind{background:Highlight}
}
@media print{.header-plate{display:none}}