/* =====================================================================
   Odontekne — base: font, colori, reset, tipografia, griglia.
   Ordine di caricamento: base.css → components.css → pages.css

   Idea: una tavola tecnica impaginata come un quadro di Mondrian.
   Linee blu inchiostro, campi chiari, i tre colori del logo usati come
   blocchi pieni e con misura. Nessun nero, nessuna ombra, nessun gradiente.
   ===================================================================== */

/* ---------- Font ospitati sul sito ---------- */
/* Titoli: Barlow, un carattere tecnico e leggibile */
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
/* Testo e interfaccia: IBM Plex Sans */
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* ===== Colori ===== */
  --paper:#F7F5F0;          /* fondo: carta calda */
  --paper-2:#EEEAE1;        /* campi alternati */
  --white:#FFFFFF;          /* il bianco dei quadri, moduli */
  --ink:#1B2B45;            /* testo e linee: blu inchiostro, mai nero */
  --ink-soft:#4A5A72;       /* testo secondario (6,4:1 sulla carta) */
  --line:#D9D4C9;           /* filetti sottili */
  --action:#0104A2;         /* pulsanti e link: il blu di sempre */
  --action-hover:#1B20C9;
  --navy:#16275A;           /* footer: blu notte */
  --on-navy:#F4F2EC;
  --on-navy-soft:#BAC4DC;

  /* i colori del logo */
  --red:#D5001C;
  --yellow:#FFD100;
  --blue:#0104A2;
  --accent:var(--red);      /* colore della pagina, vedi .accent-* */

  /* ===== Tipografia ===== */
  --display:"Barlow","Segoe UI",Roboto,Arial,sans-serif;
  --sans:"IBM Plex Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-h1:clamp(2.5rem,1.25rem + 4.3vw,5rem);
  --fs-h2:clamp(1.95rem,1.3rem + 2.3vw,3.2rem);
  --fs-h3:clamp(1.4rem,1.15rem + .9vw,1.9rem);
  --fs-lead:clamp(1.08rem,1rem + .35vw,1.25rem);

  /* ===== Misure ===== */
  --wrap:1240px;
  --gutter:clamp(16px,4vw,40px);
  --gap:clamp(16px,2.4vw,32px);
  --section:clamp(72px,9vw,136px);
  --m-line:3px;             /* spessore delle linee della composizione */
  --radius:2px;
  --header-h:72px;

  /* ===== Movimento (token transitions.dev) ===== */
  --duration-quick:150ms;
  --duration-fast:250ms;
  --duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:ease-in-out;
  --learn-shift:2px;
  --learn-spread:8deg;
  --learn-in:200ms;
  --learn-out:200ms;
  --learn-ease:cubic-bezier(0.22,1,0.36,1);
  --dropdown-open-dur:250ms;
  --dropdown-close-dur:150ms;
  --dropdown-pre-scale:0.97;
  --dropdown-closing-scale:0.99;
  --dropdown-ease:cubic-bezier(0.22,1,0.36,1);
  /* risposta al tocco: i pulsanti "cedono" appena (Emil Kowalski) */
  --press-scale:0.97;
  --press-dur:160ms;
  /* testi che compaiono in sequenza (ricetta "Texts reveal") */
  --rv-dur:600ms;
  --rv-stagger:80ms;
  --rv-distance:14px;
  --rv-blur:3px;
}
.accent-red{--accent:var(--red);}
.accent-yellow{--accent:var(--yellow);}
.accent-blue{--accent:var(--blue);}

/* ---------- Reset essenziale ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px);accent-color:var(--action);}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;}
::selection{background:var(--yellow);color:var(--ink);}
img,svg,video,canvas{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
a,button,input,select,textarea,label{touch-action:manipulation;}
p,ul,ol,dl,dd,figure,blockquote{margin:0;}
ul[role="list"],ol[role="list"]{list-style:none;padding:0;}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.08;text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.015em;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);line-height:1.15;}
p{text-wrap:pretty;}
strong{font-weight:600;}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);max-width:54ch;}
.muted{color:var(--ink-soft);}

a{color:var(--action);text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--duration-quick) var(--ease-smooth-out),text-decoration-color var(--duration-quick) var(--ease-smooth-out);}
a:hover{color:var(--action-hover);}

/* Etichetta sopra i titoli: maiuscoletto tecnico, come nelle tavole */
.eyebrow,.label{display:block;font-family:var(--sans);font-size:.78rem;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.eyebrow{margin-bottom:20px;}

/* Piccolo quadrato pieno: il "blocco" di Mondrian ridotto a segno */
.sq{display:inline-block;width:12px;height:12px;background:var(--accent);flex:none;}

/* ---------- Griglia ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));}
.section{padding-block:var(--section);}
.section--tight{padding-block:clamp(56px,7vw,96px);}
.section--flush{padding-top:0;}
.section--deep{background:var(--paper-2);}

/* Caricamento progressivo: le sezioni sotto la prima vengono impaginate e
   disegnate solo quando chi visita ci arriva scorrendo (le immagini hanno
   già loading="lazy"). La misura di riserva evita salti della barra. */
main > section:not(:first-child),.site-footer{content-visibility:auto;contain-intrinsic-size:auto 900px;}

/* ---------- Accessibilità ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;padding:12px 18px;background:var(--action);color:#fff;font-weight:600;text-decoration:none;transition:top var(--duration-quick) var(--ease-smooth-out);}
.skip-link:focus{top:12px;color:#fff;}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;}
.site-footer :focus-visible{outline-color:var(--yellow);}
.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;}
main:focus{outline:none;}
/* Riduci movimento: meno movimento, non zero. Restano le dissolvenze di
   colore e opacità, che aiutano a capire; spariscono spostamenti e scale. */
@media (prefers-reduced-motion:reduce){
  .btn:active,.menu-toggle:active{transform:none !important;}
  .t-dropdown,.t-dropdown.is-open,.t-dropdown.is-closing,.sticky-cta{transform:none !important;}
  .t-learn-chevron,.t-learn-arm,.index-go,.btn .icon-trail,.menu-toggle svg{transform:none !important;}
  .nav-links a::after{transition:none !important;}
}