/* Base — reset, tipografia, layout mobile-first, focus visibile (F3.1c). */

/* Poppins (titoli/bottoni, allineamento al brand epcsafety.it, 25/08/2026): file self-hosted
   in wwwroot/fonts, non un <link> a Google Fonts - la CSP del portale è "font-src 'self'"
   apposta, niente CDN esterni (vedi commento in SecurityHeadersMiddleware.cs). Solo il
   sottoinsieme "latin" (copre gli accentati italiani, U+0000-00FF) nei due pesi usati da
   questo tema; licenza SIL Open Font License in wwwroot/fonts/OFL.txt. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* Header e footer sempre alla stessa altezza, footer sempre in fondo alla finestra anche a
   pagina corta (25/08/2026, prima finiva subito sotto il contenuto lasciando un vuoto sotto):
   colonna flex su tutta la viewport, main si allarga per riempire lo spazio restante. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--epc-font-family);
  font-size: var(--epc-font-size-base);
  line-height: var(--epc-line-height);
  color: var(--epc-color-text);
  background: var(--epc-color-bg);
}

.accesso-shell { background: #f3f7fa; }
.accesso-shell main { min-height: 100vh; }

h1,
h2,
h3,
h4 {
  font-family: var(--epc-font-family-display);
  line-height: 1.25;
  margin: 0 0 var(--epc-space-4);
}

h1 {
  font-size: var(--epc-font-size-2xl);
}
h2 {
  font-size: var(--epc-font-size-xl);
}

p {
  margin: 0 0 var(--epc-space-4);
}

a {
  color: var(--epc-color-primary);
}

/* Mai togliere il focus senza sostituirlo (§11 punto 1): outline sempre visibile e con
   contrasto verificato (--epc-color-focus su sfondo chiaro = 6.58:1, vedi tokens.css). */
:focus-visible {
  outline: 3px solid var(--epc-color-focus);
  outline-offset: 2px;
}

/* Skip link: invisibile finché non riceve il focus da tastiera. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--epc-color-primary);
  color: #fff;
  padding: var(--epc-space-3) var(--epc-space-4);
  border-radius: 0 0 var(--epc-radius-sm) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* Contenuto per screen reader, invisibile a schermo (§11) - non usare display:none, che lo
   toglierebbe anche dall'albero di accessibilità. */
.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;
}

/* display:flex column: identico al flusso a blocchi normale per contenuto che si impila
   (align-items:stretch di default = figli a piena larghezza, nessun figlio con margin:auto
   dentro), ma abilita il trucco margin:auto per centrare verticalmente il singolo blocco che
   lo richiede (.pagina-accesso) senza flexbox o JS per-pagina. */
.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--epc-space-4);
}

@media (min-width: 900px) {
  .container {
    max-width: 960px;
  }
}

header.site-header {
  flex-shrink: 0;
  padding-block: var(--epc-space-3);
  border-bottom: 1px solid var(--epc-color-border);
  box-shadow: var(--epc-shadow-sm);
}

header.site-header a.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--epc-space-2);
  font-family: var(--epc-font-family-display);
  font-weight: 700;
  font-size: var(--epc-font-size-lg);
  text-decoration: none;
  color: var(--epc-color-primary);
}

header.site-header a.brand img {
  display: block;
  height: 31px;
  width: auto;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-block: var(--epc-space-6);
}

/* Spaziatura di default fra le sezioni di una pagina (es. "Da compilare"/"In
   compilazione"/"Completati" in Assegnazioni): un componente più specifico (es.
   .riepilogo-area, un'altra sezione dentro riepilogo-contenuto) vince comunque per
   specificità di selettore, questo è solo il valore di base. */
section {
  margin-bottom: var(--epc-space-6);
}

section:last-child {
  margin-bottom: 0;
}

footer.site-footer {
  flex-shrink: 0;
  padding-block: var(--epc-space-3);
  border-top: 1px solid var(--epc-color-border);
  color: var(--epc-color-text-muted);
  font-size: var(--epc-font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}