/* InForma 2.0 — foglio di stile condiviso (home, 404, base del calendario).
 Ordine dei layer: reset, tokens, base, layout, components, sections, responsive, utilities. */
@layer reset, tokens, base, layout, components, sections, responsive, utilities;

/* Font — Raleway = display, Inter = UI/testo/numeri.
 I fallback hanno metriche misurate per azzerare il CLS allo swap. */
@font-face{font-family:Raleway;font-weight:100 900;font-display:swap;
 src:url("../media/fonts/raleway-variable.woff2") format("woff2")}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;
 src:url("../media/fonts/inter-variable.woff2") format("woff2")}
@font-face{font-family:"Raleway Fallback";src:local("Arial"),local("Liberation Sans");
 size-adjust:100%;ascent-override:94%;descent-override:23.4%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Liberation Sans");
 size-adjust:105.2%;ascent-override:92.1%;descent-override:22.9%;line-gap-override:0%}

/* ============================== RESET ============================== */
@layer reset{
 *,*::before,*::after{box-sizing:border-box}
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body,h1,h2,h3,h4,p,figure,dl,dd,ul{margin:0}
 ul{padding:0;list-style:none}
 img,svg{display:block;max-width:100%}
 a{color:inherit;text-decoration:none}
 button,select{font:inherit;color:inherit}
 button{background:none;border:0;padding:0;cursor:pointer}
 summary{list-style:none}
 summary::-webkit-details-marker{display:none}
}

/* ============================== TOKENS ============================== */
@layer tokens{
 :root{
  /* Brand */
  --lime:#c0d000; --lime-bright:#d7e62a; --lime-deep:#96a500;
  --lime-text:#5c7000;          /* lime conforme AA per testo su carta */
  --lime-wash:#e9efc2; --olive:#99c225;
  /* Ink */
  --ink:#0a0c0a; --ink-950:#090b09; --ink-900:#111411; --ink-850:#171b16;
  --ink-800:#1f241e; --ink-700:#2b322a; --ink-600:#3a4238; --ink-500:#4d554b;
  /* Paper */
  --paper:#f4f5ef; --paper-2:#eef1e9; --paper-3:#e8ecd9; --white:#fff;
  /* Testo */
  --text-on-dark:#fff; --text-on-dark-soft:#c2c9bd; --text-on-dark-mute:#9aa297;
  --text-on-light:var(--ink); --text-on-light-soft:#4f5a4c; --text-on-light-mute:#626c5f;
  /* Linee */
  --line-dark:#303730; --line-dark-2:#434b41; --line-light:#d6dcd3; --line-light-2:#e3e8df;
  /* Area Salute */
  --health-surface:#eaedee; --health:#3d8bc1; --health-deep:#2c6288;
  /* Raggi */
  --r-xs:.4rem; --r-sm:.65rem; --r-md:1rem; --r-lg:1.25rem;
  --r-xl:1.6rem; --r-2xl:2rem; --r-pill:999px;
  /* Elevazione */
  --shadow-sm:0 1px 2px rgba(12,18,10,.06),0 2px 8px rgba(12,18,10,.04);
  --shadow-md:0 .5rem 1.25rem rgba(12,18,10,.07),0 .15rem .4rem rgba(12,18,10,.05);
  --shadow-lg:0 1.25rem 2.75rem rgba(12,18,10,.12);
  --shadow-dark:0 1.25rem 2.75rem rgba(0,0,0,.38);
  /* Spazio */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem;
  --section-y:clamp(4rem,8vw,8rem); --gutter:clamp(1.25rem,4vw,3rem);
  /* Tipografia */
  --t-xs:.72rem; --t-sm:.8rem; --t-base:.95rem; --t-md:1.05rem;
  --t-lg:clamp(1.1rem,.95rem + .6vw,1.3rem);
  --t-h3:clamp(1.2rem,1.05rem + .7vw,1.6rem);
  --t-h2:clamp(2.4rem,1.2rem + 5.2vw,5.6rem);
  --t-h1:clamp(3rem,1rem + 8vw,8rem);
  /* Layout / movimento / focus */
  --max:78rem; --header-h:4.75rem; --sticky-top:var(--header-h);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.16s; --dur:.28s; --dur-slow:.6s;
  --focus:var(--lime); --focus-offset:3px;
  color-scheme:dark; accent-color:var(--lime);
 }

 /* Contesto di superficie: le sezioni dichiarano .on-*, i componenti leggono solo le var semantiche. */
 .on-dark{--surface:var(--ink-950);--surface-raised:var(--ink-850);--fg:var(--text-on-dark);
  --fg-soft:var(--text-on-dark-soft);--fg-mute:var(--text-on-dark-mute);
  --border:var(--line-dark);--border-strong:var(--line-dark-2);--accent-text:var(--lime)}
 .on-light{--surface:var(--paper);--surface-raised:var(--white);--fg:var(--text-on-light);
  --fg-soft:var(--text-on-light-soft);--fg-mute:var(--text-on-light-mute);
  --border:var(--line-light);--border-strong:#c3ccbf;--accent-text:var(--lime-text);--focus:var(--ink)}
 .on-lime{--surface:var(--lime);--surface-raised:var(--ink);--fg:var(--ink);
  --fg-soft:#2b3100;--fg-mute:#3d4200;--border:var(--ink);--border-strong:var(--ink);
  --accent-text:var(--ink);--focus:var(--ink)}
 .on-olive{--surface:var(--olive);--surface-raised:var(--ink);--fg:var(--ink);
  --fg-soft:#1f2a06;--fg-mute:#2b3a08;--border:var(--ink);--border-strong:var(--ink);
  --accent-text:var(--ink);--focus:var(--ink)}
 .on-health{--surface:var(--health-surface);--surface-raised:var(--white);--fg:var(--ink);
  --fg-soft:var(--text-on-light-soft);--fg-mute:var(--text-on-light-mute);
  --border:#d5dadc;--border-strong:#bcc5c9;--accent-text:var(--health-deep);--focus:var(--ink)}
}

/* ============================== BASE ============================== */
@layer base{
 html{scroll-behavior:smooth}
 body{
  background:var(--ink-950);color:var(--text-on-dark);
  font:400 1rem/1.6 Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"cv05" 1,"cv11" 1;
  -webkit-font-smoothing:antialiased;
 }
 h1,h2,h3,h4,.display{
  font-family:Raleway,"Raleway Fallback",ui-sans-serif,system-ui,sans-serif;
  font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;
 }
 p{text-wrap:pretty}
 time,.num,td,th{font-variant-numeric:tabular-nums}
 :focus-visible{outline:3px solid var(--focus);outline-offset:var(--focus-offset)}
 ::selection{background:var(--lime);color:var(--ink)}
 [id]{scroll-margin-top:calc(var(--header-h) + 1rem)}

 .icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
 .icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
 /* "+" che diventa "meno" grazie alla var --plus-v (ereditata dentro <use>) */
 .icon-toggle{--plus-v:1}
 [aria-expanded="true"]>.icon-toggle,[aria-expanded="true"] .icon-toggle,
 details[open]>summary .icon-toggle{--plus-v:0}

 .skip-link{position:fixed;top:-6rem;left:1rem;z-index:60;padding:.75rem 1.1rem;
  background:var(--lime);color:var(--ink);font-weight:800;border-radius:var(--r-pill);
  transition:top var(--dur-fast) var(--ease)}
 .skip-link:focus{top:1rem;outline-color:var(--ink)}
}

/* ============================== LAYOUT ============================== */
@layer layout{
 .container{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
 .section{padding-block:var(--section-y);background:var(--surface);color:var(--fg)}
 /* Le sezioni sotto la piega saltano il rendering finché non servono */
 .defer-render{content-visibility:auto;contain-intrinsic-size:auto 46rem}
 .section-heading{max-width:48rem;margin-bottom:clamp(1.75rem,4vw,3.5rem)}
 .heading-inline{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:3rem}
 .heading-inline>p{max-width:31rem;color:var(--fg-soft);font-size:var(--t-md)}
 .h-display{font-size:var(--t-h2);font-weight:900;line-height:.9;letter-spacing:-.04em;text-transform:uppercase;margin:.25rem 0 1rem}
 .h-display em{font-style:normal;color:var(--accent-text)}
}

/* ============================== COMPONENTS ============================== */
@layer components{
 .eyebrow{margin:0 0 1rem;color:var(--accent-text);font-size:var(--t-sm);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase}

 /* Pulsanti */
 .button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:3rem;
  padding:.8rem 1.3rem;background:var(--lime);color:var(--ink);border:2px solid var(--lime);
  border-radius:var(--r-pill);font-weight:800;line-height:1.2;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
 .button:hover{background:var(--lime-bright);border-color:var(--lime-bright);transform:translateY(-2px)}
 .button .icon{transition:transform var(--dur) var(--ease)}
 .button:hover .icon-nudge{transform:translate(2px,-2px)}
 .button:hover .icon-nudge-r{transform:translateX(3px)}
 .button-small{min-height:2.75rem;padding:.55rem 1.05rem}
 .button-ghost{background:transparent;color:#fff;border-color:#fff}
 .button-ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
 .button-dark{background:var(--ink);border-color:var(--ink);color:#fff}
 .button-dark:hover{background:var(--ink-700);border-color:var(--ink-700)}
 .button-health{background:var(--health);border-color:var(--health);color:var(--ink)}
 .button-health:hover{background:var(--health-deep);border-color:var(--health-deep);color:#fff}

 .tag{color:var(--accent-text);font-size:var(--t-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
 .pill{display:inline-flex;align-items:center;gap:.4rem;border:1px solid currentColor;border-radius:var(--r-pill);
  padding:.3rem .65rem;font-size:var(--t-xs);font-weight:700;line-height:1.2}

 /* Stato apertura (calcolato da INFORMA_DATA.sedi) */
 .status{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border-strong);
  border-radius:var(--r-pill);padding:.35rem .75rem;font-size:var(--t-xs);font-weight:700;color:var(--fg)}
 .status::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--fg-mute)}
 .status[data-state="open"]{border-color:var(--lime)}
 .status[data-state="open"]::before{background:var(--lime);box-shadow:0 0 0 0 rgba(192,208,0,.6);animation:pulse 2.4s infinite}
 .status[data-state="soon"]::before{background:var(--lime-deep)}
 @keyframes pulse{70%{box-shadow:0 0 0 .5rem rgba(192,208,0,0)}100%{box-shadow:0 0 0 0 rgba(192,208,0,0)}}

 /* Disclosure: <button aria-expanded aria-controls> + pannello .collapsible */
 .collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur) var(--ease),visibility 0s}
 .collapsible>.collapsible-inner{min-height:0;overflow:hidden}
 .collapsible.is-collapsed{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--dur) var(--ease),visibility 0s var(--dur)}
 .disclosure-btn{display:flex;align-items:center;gap:1rem;width:100%;min-height:2.75rem;text-align:left}

 /* Ruoli (staff) */
 .roles{display:flex;flex-wrap:wrap;gap:.35rem}
 .roles span{border-radius:var(--r-pill);padding:.28rem .55rem;font-size:.68rem;font-weight:700;line-height:1.2}
 .role-sala{background:#e8ece5;color:#30372f}
 .role-salute{background:#e2eef6;color:var(--health-deep)}
 .role-corsi{background:#e7efba;color:#455900}
 .role-segreteria{background:var(--ink);color:#fff}
 .role-titolare{background:var(--lime);color:var(--ink)}

 }

/* ============================== SECTIONS ============================== */
@layer sections{
 /* ---- Header ---- */
 .site-header{position:sticky;top:0;z-index:30;background:rgba(9,11,9,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);transition:transform var(--dur) var(--ease)}
 .site-header.is-hidden{transform:translateY(-101%)}
 .site-header::after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:var(--lime);
  transform-origin:0 50%;transform:scaleX(var(--progress,0))}
 .header-inner{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
 .brand{display:inline-flex;align-items:center}
 .brand img{height:3.4rem;width:auto}
 .brand-full img{height:5rem}
 .site-nav{display:flex;align-items:center;gap:1.25rem;font-size:.88rem;font-weight:700}
 .site-nav>a:not(.button){position:relative;padding-block:.5rem;transition:color var(--dur-fast)}
 .site-nav>a:not(.button)::after{content:"";position:absolute;inset:auto 0 .1rem;height:2px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
 .site-nav>a:not(.button):hover,.site-nav>a.is-active,.site-nav>a[aria-current]{color:var(--lime)}
 .site-nav>a:not(.button):hover::after,.site-nav>a.is-active::after,.site-nav>a[aria-current]::after{transform:scaleX(1)}
 .menu-toggle{display:none;align-items:center;gap:.5rem;min-height:2.75rem;padding:.55rem .95rem;
  border:1px solid #5a6458;border-radius:var(--r-pill);font-weight:700}
 .menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-menu{display:none}
 .menu-toggle[aria-expanded="true"] .icon-close{display:block}
 html.nav-open{overflow:hidden}
 html.nav-open body{position:fixed;left:0;right:0;width:100%}

 /* ---- Footer ---- */
 .site-footer{background:#050605;color:var(--text-on-dark-soft);padding:4.5rem 0 1.5rem;border-top:1px solid var(--ink-700)}
 .footer-grid{display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:1rem;padding-bottom:3rem}
 .footer-brand,.footer-links{padding:1.25rem}
 .footer-brand>p{max-width:24rem;margin-block:1.15rem;color:var(--text-on-dark-mute)}
 .footer-social{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
 .footer-social a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.5rem .9rem;
  border:1px solid var(--line-dark-2);border-radius:var(--r-pill);color:#fff;font-size:.8rem;font-weight:700}
 .footer-social a:hover{border-color:var(--lime);color:var(--lime)}
 .footer-links h3{margin:.2rem 0 .75rem;color:#fff;font-size:var(--t-sm);letter-spacing:.12em;text-transform:uppercase}
 .footer-links>div{display:grid;grid-template-columns:1fr 1fr;gap:.15rem 1rem}
 .footer-links a{display:flex;align-items:center;min-height:2.75rem;border-bottom:1px solid var(--ink-700);
  color:#fff;font-size:.88rem;font-weight:700}
 .footer-links a:hover{color:var(--lime)}
 .footer-contact-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:1.6rem;
  background:var(--surface);color:var(--fg);border-radius:var(--r-xl)}
 .footer-contact-card p{margin-bottom:.35rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
 .footer-contact-card h3{margin-bottom:1.5rem;font-size:clamp(1.7rem,3vw,2.5rem);line-height:.98;letter-spacing:-.04em}
 .footer-contact-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:3rem;
  padding:.65rem 1rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-weight:700}
 .footer-contact-card>a:not(.footer-contact-link){display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700}
 .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1rem;
  border-top:1px solid var(--ink-700);font-size:.8rem}
 .footer-bottom a{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;color:#fff;font-weight:700}

 /* ---- Barra CTA mobile + torna su ---- */
 .mobile-cta{display:none}
 .to-top{position:fixed;right:1rem;bottom:1rem;z-index:25;display:grid;place-items:center;width:3rem;height:3rem;
  border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:var(--shadow-dark);
  opacity:0;visibility:hidden;transform:translateY(.75rem);
  transition:opacity var(--dur),transform var(--dur) var(--ease),visibility 0s var(--dur)}
 .to-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
 .to-top:focus-visible{outline-color:#fff}

 /* ---- 404 ---- */
 .not-found{min-height:calc(100svh - var(--header-h));display:grid;align-items:center;padding-block:var(--section-y)}
 .not-found h1{font-size:var(--t-h1);font-weight:900;line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
 .not-found h1 span{color:var(--lime)}
 .not-found p{max-width:34rem;margin-block:1.5rem 2rem;color:var(--text-on-dark-soft);font-size:var(--t-lg)}
}

/* ============================== RESPONSIVE ============================== */
@layer responsive{
 @media (max-width:68rem){
  .site-nav{gap:.7rem;font-size:.78rem}
 }
 @media (max-width:48rem){
  :root{--header-h:4.4rem}
  body{padding-bottom:5.5rem}
  .menu-toggle{display:inline-flex}
 .heading-inline{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
   max-height:calc(100dvh - var(--header-h));overflow-y:auto;padding:1rem var(--gutter) 1.25rem;
   background:var(--ink-950);border-bottom:1px solid var(--line-dark);box-shadow:0 1.2rem 2rem rgba(0,0,0,.4);font-size:.95rem}
  .site-nav.is-open{display:flex}
  .site-nav>a{display:flex;align-items:center;min-height:2.9rem;border-bottom:1px solid var(--ink-700)}
  .site-nav>a:not(.button)::after{display:none}
  .site-nav .button{margin-top:.75rem}
  .footer-grid{grid-template-columns:1fr;gap:.75rem}
  .footer-brand,.footer-links{padding:1rem 0}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:0}
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;position:fixed;inset:auto 0 0;z-index:28;
   padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));background:rgba(9,11,9,.96);
   border-top:1px solid var(--line-dark);transition:transform var(--dur) var(--ease)}
  .mobile-cta.is-hidden{transform:translateY(100%)}
  .mobile-cta .button-dark{border-color:#fff}
  .to-top{bottom:5.25rem}
 }
 @media (max-width:32rem){
  :root{--section-y:3rem;--header-h:4.15rem}
  body{overflow-x:hidden}
  .brand img{height:2.8rem}
  .brand-full img{height:4.5rem}
  .footer-links>div{grid-template-columns:1fr}
 }
}

/* ============================== UTILITIES ============================== */
@layer utilities{
 /* Rivelazione allo scroll: attiva solo se l'inline script ha messo .reveal-on su <html> */
 .reveal-on .reveal{opacity:0;transform:translateY(1.25rem);
  transition:opacity var(--dur-slow) var(--ease-out) var(--reveal-delay,0s),transform var(--dur-slow) var(--ease-out) var(--reveal-delay,0s)}
 .reveal-on .reveal.is-visible{opacity:1;transform:none}
 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 [hidden]{display:none}

 @media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms;transition-delay:0s;animation:none}
  .reveal-on .reveal{opacity:1;transform:none}
 }

 @media (forced-colors:active){
  .button,.pill,.status,.room-card,.course-card,.staff-person,.health-list article,.why-points article,
  .contact-panel,.footer-contact-card,.service-nav a{border:1px solid CanvasText}
  .status::before{background:CanvasText}
  .icon{stroke:currentColor}
  .site-header::after{background:Highlight}
 }
}