/* ==========================================================================
   editorIA — Base

   Reset, tipografia, container, utility di accessibilita'.
   Nessun valore esadecimale: tutto passa dai token (R2).
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Lo scroll-stacking e le ancore del menu hanno bisogno che il browser
     tenga conto della navbar flottante quando salta a una sezione. */
  scroll-behavior: smooth;
  scroll-padding-top: var(--eia-stack-top);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

fieldset {
  border: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  /* Evita il salto di layout mentre l'immagine carica: width e height
     espliciti nel markup + questo (CLAUDE.md, definition of done § 4). */
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}


/* --- Documento ---------------------------------------------------------- */

body {
  min-height: 100vh;
  background-color: var(--eia-color-bg-page);
  color: var(--eia-color-text);
  font-family: var(--eia-font);
  font-size: var(--eia-fs-body);
  font-weight: var(--eia-fw-regular);
  line-height: var(--eia-lh-body);
  /* Il design e' interamente su fondo scuro: senza questo il rendering
     dei pesi leggeri (200) risulta piu' spesso del previsto su macOS. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Le ellissi decorative sfocate sforano lateralmente il viewport
     (diametri 451-735px, spec § 1). */
  overflow-x: hidden;
}


/* --- Tipografia --------------------------------------------------------- */

/* Gerarchia semantica fissata in docs/editoria-design-spec.md § 2.
   I nomi dei layer Figma sono inaffidabili e NON vanno usati per dedurla (R3). */

h1,
.eia-h1 {
  font-size: var(--eia-fs-hero);
  font-weight: var(--eia-fw-regular);
  line-height: var(--eia-lh-hero);
}

h2,
.eia-h2 {
  font-size: var(--eia-fs-display);
  font-weight: var(--eia-fw-regular);
  line-height: 1.2;
}

h3,
.eia-h3 {
  font-size: var(--eia-fs-heading);
  font-weight: var(--eia-fw-bold);
  line-height: 1.3;
}

p {
  font-size: var(--eia-fs-body);
  line-height: var(--eia-lh-body);
}

strong,
b {
  font-weight: var(--eia-fw-bold);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: filter var(--eia-transition);
}

/* Scala fluida sotto il frame di design.
   Il design esiste solo a 1512 e 393: i valori intermedi sono un default
   dichiarato ([ASSUMIBILE] spec § 7). */

@media (max-width: 1280px) {
  h1, .eia-h1 {
    font-size: clamp(32px, 3.6vw, 50px);
    line-height: 1.18;
  }
  h2, .eia-h2 {
    font-size: clamp(26px, 2.9vw, 40px);
  }
}


/* --- Layout ------------------------------------------------------------- */

.eia-container {
  width: 100%;
  max-width: var(--eia-container);
  margin-inline: auto;
  padding-inline: var(--eia-gutter-mobile);
}

@media (min-width: 1024px) {
  .eia-container {
    padding-inline: var(--eia-space-lg);
  }
}

.eia-section {
  position: relative;
  z-index: var(--eia-z-content);
  padding-block: var(--eia-space-section);
}

/* Il titolo di una sezione e il suo contenuto */
.eia-section__head {
  margin-bottom: var(--eia-space-heading);
}

/* Occhiello sopra i titoli di sezione (nodi 2566:181, 2566:218) */
.eia-eyebrow {
  font-size: var(--eia-fs-nav);
  font-weight: var(--eia-fw-semibold);
  letter-spacing: var(--eia-ls-nav);
  text-transform: uppercase;
  color: var(--eia-color-accent);
}

/* Divisore orizzontale che precede le sezioni 3 e 5 */
.eia-divider {
  height: 1px;
  border: 0;
  margin: 0 0 var(--eia-space-lg);
  background-color: var(--eia-color-hairline);
}


/* --- Bottoni ------------------------------------------------------------ */

/* Due varianti, spec § 3.2. Nessuno stato hover/focus/active e' definito
   nel file Figma: applicati i default di [ASSUMIBILE] spec § 7. */

.eia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--eia-btn-h);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--eia-transition), transform var(--eia-transition);
}

.eia-btn:hover {
  filter: brightness(var(--eia-hover-brightness));
}

.eia-btn:active {
  transform: translateY(1px);
}

/* Variante piena — CTA navbar, nodo 2633:262.
   ATTENZIONE (spec § 7): bianco su --eia-color-accent sta a circa 4.5:1,
   esattamente sulla soglia WCAG AA. Qualsiasi schiarimento dell'accento fa
   fallire il pulsante. Il filter: brightness in hover si applica al fondo
   E al testo insieme, quindi il rapporto resta invariato. */
.eia-btn--solid {
  padding: 16px 23px 13px 18px;
  border-radius: var(--eia-radius-btn);
  background-color: var(--eia-color-accent);
  color: var(--eia-color-text);
  font-size: var(--eia-fs-nav);
  font-weight: var(--eia-fw-semibold);
  letter-spacing: var(--eia-ls-nav);
  text-transform: uppercase;
}

/* Variante outline — CTA hero, nodo 2625:23 */
.eia-btn--outline {
  min-width: var(--eia-btn-w);
  padding-inline: var(--eia-space-md);
  border: 1px solid var(--eia-color-text);
  border-radius: var(--eia-radius-btn-ghost);
  background-color: transparent;
  color: var(--eia-color-text);
  font-size: var(--eia-fs-cta);
  font-weight: var(--eia-fw-regular);
}


/* --- Accessibilita' ----------------------------------------------------- */

/* Focus visibile su tutto cio' che e' raggiungibile da tastiera.
   currentColor garantisce leggibilita' su qualunque fondo del design. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--eia-focus-width) solid currentColor;
  outline-offset: var(--eia-focus-offset);
  border-radius: var(--eia-radius-input);
}

/* Nessun focus ring residuo per il puntatore nei browser che non
   supportano :focus-visible in modo nativo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Salto al contenuto: prima voce raggiungibile con Tab. */
.eia-skip-link {
  position: absolute;
  left: var(--eia-space-sm);
  top: var(--eia-space-sm);
  z-index: var(--eia-z-menu);
  padding: var(--eia-space-xs) var(--eia-space-md);
  border-radius: var(--eia-radius-btn);
  background-color: var(--eia-color-accent);
  color: var(--eia-color-text);
  font-size: var(--eia-fs-nav);
  font-weight: var(--eia-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--eia-ls-nav);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--eia-space-xl)));
  transition: transform var(--eia-transition);
}

.eia-skip-link:focus {
  transform: translateY(0);
}

/* Visibile solo agli screen reader */
.eia-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;
}

/* Disattiva ogni animazione per chi l'ha chiesto a livello di sistema. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- Segnaposto di contenuto -------------------------------------------- */

/* Il copy delle sezioni ⏳ non e' mai stato estratto da Figma: i default in
   inc/content-defaults.php sono segnaposto racchiusi tra ⟨ ⟩.
   Marcarli visivamente evita che finiscano online per distrazione.
   La regola si applica solo con WP_DEBUG attivo (vedi body_class). */

.eia-debug .eia-placeholder {
  outline: 1px dashed var(--eia-color-error);
  outline-offset: 4px;
  background-color: var(--eia-color-error-bg);
  color: var(--eia-color-error);
  font-style: italic;
}

/* Elemento decorativo di fondo: le ellissi sfocate della spec § 1.
   Mai raggiungibili, mai annunciate. */
.eia-decor {
  position: absolute;
  z-index: var(--eia-z-decor);
  pointer-events: none;
  user-select: none;
}