/* Guscio: testata, menu, piede, barra azioni.
   I colori-servizio hanno un ripiego sul blu di marca, cosi' il guscio sta in
   piedi anche sulle pagine che non ne hanno uno (home, informative).

   ⚠️ [10-09] Le regole di testata/menu/toggle/telefono qui sotto sono copiate
   da web/stili/scheda-servizio.css a HEAD (righe 51-89 desktop, 365-489 le
   quattro media query), NON dal testo del task-06.md: la testata del
   prototipo e' cambiata dopo che il brief e' stato scritto (barra 72px
   invece di 91, logo 151px invece di 176, voci 13px invece di 15, raggio 18,
   soglia mobile 860 invece di 820). Le sole differenze deliberate rispetto
   al file sono i tre ripieghi sui colori-servizio (var(--service-dark,var(--brand)),
   var(--service-surface-soft,var(--soft-blue)), var(--service-surface,var(--soft-blue)))
   e var(--card) al posto di #fff in .services-panel — perche' il guscio deve
   reggere anche su pagine senza classe .service-*. Il piede (.site-footer e
   discendenti) e' invece markup NUOVO che il prototipo non ha mai avuto in
   questa forma (Task 6, Passo 10, riconciliazione dei due piedi): per quello
   non esiste un file da copiare, e la fonte e' il codice qui sotto. */
.service-container{width:min(calc(100% - 48px),var(--content));margin-inline:auto}
:focus-visible{outline:3px solid #1976b9;outline-offset:4px;border-radius:6px}
.site-footer :focus-visible{outline-color:#fff}
.skip-link{position:fixed;z-index:1000;top:10px;left:10px;padding:10px 14px;color:#fff;background:var(--brand);text-decoration:none;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}

/* Testata: valori della home (10-09), copiati da web/stili/scheda-servizio.css:64-89.
   Barra alta 72px in tutto a 1440, logo 151px, voci 13px, raggio 18. */
.site-header{position:sticky;z-index:100;top:0;padding:12px 0}
.site-header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:7px 12px 7px 18px;background:rgba(255,255,255,.96);border:1px solid rgba(205,218,231,.8);border-radius:18px;box-shadow:0 12px 35px rgba(31,61,89,.1)}
.site-brand{display:inline-flex;width:fit-content}
.site-brand img{width:151px;height:auto}
.site-navigation{display:flex;justify-content:center;gap:24px}
.site-navigation a,.services-menu summary{padding:10px 2px;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none}
.site-navigation a:hover,.services-menu summary:hover{color:var(--service-dark,var(--brand))}
.services-menu{position:relative}
.services-menu summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.services-menu summary::-webkit-details-marker{display:none}
.services-menu summary::after{content:"";width:6px;height:6px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.services-menu[open] summary::after{margin-top:3px;transform:rotate(-135deg)}
.services-panel{position:absolute;top:calc(100% + 18px);left:50%;display:grid;min-width:238px;padding:9px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);transform:translateX(-50%)}
.services-panel a{padding:10px 12px;border-radius:8px;white-space:nowrap}
.services-panel a:hover{background:var(--page)}
.services-panel a[aria-current="page"]{color:var(--service-dark,var(--brand));background:var(--service-surface-soft,var(--soft-blue))}
.site-actions{display:flex;align-items:center;gap:10px}
/* Nella testata il pulsante segue i valori della home (.st-cta): piu' compatto del .button
   usato dentro le sezioni, perche' la barra e' alta 72px in tutto. */
.site-actions .button{min-height:0;padding:11px 20px;border-radius:9px;font-size:13px}
.header-phone{display:inline-flex;align-items:center;gap:7px;padding:8px;border-radius:8px;color:var(--brand);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.header-phone svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-toggle{display:none;width:42px;height:42px;padding:10px;border:0;border-radius:9px;background:var(--soft-blue);cursor:pointer}
.menu-toggle span{display:block;height:2px;margin:4px 0;background:var(--brand);transition:transform .2s,opacity .2s}

.site-footer{padding:44px 0;color:#d2deea;background:var(--brand-deep)}
.footer-layout{display:grid;grid-template-columns:1.25fr .9fr .75fr;gap:42px;align-items:start}
.footer-layout img{width:160px;height:auto;filter:brightness(0) invert(1);opacity:.9}
.footer-brand p{margin:10px 0 0;max-width:34ch;color:#afc4df;font-size:13px;line-height:1.7}
.footer-titolo{display:block;margin-bottom:12px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.footer-contatti p{margin:0 0 7px;font-size:13px;line-height:1.7}
.footer-esplora{display:grid;gap:7px;align-content:start;font-size:13px}
.site-footer a{color:#d2deea;text-decoration:underline;text-underline-offset:3px}
.site-footer a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:12px}
.footer-legali{display:flex;gap:20px}
/* Il buco si deve vedere: spec §8 */
.lm-da-compilare{padding:2px 7px;color:#3a2c00;background:#ffe680;border-radius:4px}
.mobile-actions{display:none}

/* Soglia mobile a 860 (era 820): allineata alla home il 10-09. Sotto, la barra e' alta 58px a 390. */
@media (max-width:860px){
  .service-container{width:min(calc(100% - 32px),var(--content))}
  .site-header{padding:8px 0}
  .site-header-inner.service-container{width:calc(100% - 20px)}
  .site-header-inner{grid-template-columns:1fr auto;gap:10px;padding:7px 8px 7px 12px;border-radius:15px}
  .site-brand img{width:119px}
  .site-navigation{position:absolute;top:calc(100% + 6px);right:16px;left:16px;display:none;padding:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  .site-navigation>a,.services-menu summary{padding:11px 12px;border-radius:8px}
  .services-menu{width:100%}
  .services-panel{position:static;min-width:0;margin:2px 0 8px;padding:4px 0 4px 14px;border:0;border-left:2px solid var(--service-surface,var(--soft-blue));border-radius:0;box-shadow:none;transform:none}
  .services-panel a{padding:9px 12px}
  .site-header[data-menu-open="true"] .site-navigation{display:flex;flex-direction:column;gap:0}
  .site-header[data-menu-open="true"] .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .site-header[data-menu-open="true"] .menu-toggle span:nth-child(2){opacity:0}
  .site-header[data-menu-open="true"] .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .menu-toggle{display:block}
  .header-phone{width:42px;height:42px;padding:0;justify-content:center;border-radius:9px;background:var(--soft-blue)}
  .header-phone span{display:none} /* sotto gli 860 il telefono e' un quadrato con la sola icona */
  .site-actions .button{display:none}
  .site-actions{gap:6px}
  .footer-layout{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:10px}
}
@media (max-width:540px){
  body{padding-bottom:68px}
  .service-container{width:min(calc(100% - 24px),var(--content))}
  .header-phone,.menu-toggle{width:42px;height:42px}
  .footer-legali{flex-direction:column;gap:7px}
  .mobile-actions{position:fixed;z-index:300;right:0;bottom:0;left:0;display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 25px rgba(25,55,80,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .mobile-actions a{min-height:48px;display:grid;place-items:center;border:1px solid #a8bfd3;border-radius:10px;color:var(--brand);font-size:14px;font-weight:800;text-decoration:none}
  /* ⚠️ [10-09] color:var(--ink) aggiunto: presente nel file sorgente
     (scheda-servizio.css:453) ma assente nel testo letterale del task-06.md.
     Senza, il testo del pulsante «Prenota» della barra erediterebbe
     color:var(--brand) dalla regola sopra — un blu scuro sul fondo ambra,
     invece del testo scuro neutro che il prototipo usa davvero li'. */
  .mobile-actions a:last-child{background:var(--amber);border-color:var(--amber);color:var(--ink)}
}
@media (max-width:390px){
  .site-header-inner.service-container{width:calc(100% - 12px)}
  .site-header-inner{padding-left:9px}
  .site-brand img{width:108px}
}
/* 06-09/10-09: la testata sta a tutta larghezza, fuori dal contenitore, come la home —
   stesso margine laterale clamp(16px,3vw,56px) (43px a 1440). La hero e la fascia dati dei
   servizi si aggiungono a QUESTO selettore nel CSS del Task 8, cosi' i tre blocchi si muovono
   insieme. Sotto gli 861 il layout e' gia' quasi a pieno schermo e la regola non si applica. */
@media (min-width:861px){
  .site-header-inner{width:auto;margin-inline:clamp(16px,3vw,56px)}
}