/* ==================================================================
   STILE MAGAZINE, per tutto il sito tranne il pannello /admin.
   Lo carica il layout su ogni pagina pubblica: tutto sta sotto html.mag. Cambia la grafica, mai i testi.
   Le sezioni della home hanno in piu' le loro regole in index.ejs.

   Il sistema: titoli in Inter Tight, testi in Barlow; verde Venezia,
   verde notte, avorio e un verde d'accento (niente oro); angoli vivi;
   pulsanti rettangolari in maiuscolo spaziato.
   ================================================================== */

html.mag {
  --mag-verde: #0d3b2e;
  --mag-notte: #06201a;
  --mag-avorio: #f4efe8;
  --mag-accento: #3f7a5f;
  --mag-menta: #9fd6bd;
  --mag-titolo: 'Inter Tight', Arial, sans-serif;

  /* Le variabili di base del sito: testo verde notte invece del blu,
     fondi avorio, bordi caldi, niente angoli arrotondati. */
  --text: #06201a;
  --text-dim: #4a5f56;
  --border: #ddd5c8;
  --bg-soft: #f4efe8;
  --radius: 0px;
  --shadow: 0 10px 30px rgba(6, 32, 26, 0.08);
}

html.mag body { background: var(--mag-avorio); color: var(--text); }

/* --- Titoli ---------------------------------------------------------- */
html.mag h1,
html.mag h2,
html.mag h3,
html.mag .section-title,
html.mag .page-title {
  font-family: var(--mag-titolo);
  font-weight: 800;
  letter-spacing: -0.03em;
  word-spacing: 0.04em;
  line-height: 1.04;
  text-wrap: balance;
}
/* Il colore non si forza: lo da' --text (verde notte), e i titoli bianchi
   delle fasce scure restano bianchi. */
/* La barretta sopra i titoli di sezione non c'e' piu'. */
html.mag .section-title::before { display: none !important; }

/* --- Angoli vivi ----------------------------------------------------- */
html.mag .card,
html.mag .form-card,
html.mag [class*="-card"],
html.mag .notice,
html.mag .btn,
html.mag input:not([type="checkbox"]):not([type="radio"]),
html.mag select,
html.mag textarea,
html.mag table,
html.mag .modal,
html.mag dialog { border-radius: 0 !important; }

/* Tutto il contenuto delle pagine ad angoli vivi, salvo quello che deve
   restare tondo: i punti di navigazione, la linguetta della disponibilita',
   le caselle di spunta, i volti e il bollino "AI". */
html.mag .site-main *:not(.side-dots):not(.side-dots *):not([class*="dispo"]):not([class*="dispo"] *)
  :not(input[type="checkbox"]):not(input[type="radio"]):not([class*="avatar"]):not([class*="face"])
  :not(.ai-bollino):not([class*="dot"]) { border-radius: 0; }

/* --- Pulsanti -------------------------------------------------------- */
html.mag .btn,
html.mag .btn-cta,
html.mag button[type="submit"]:not(.link):not([class*="icon"]) {
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
html.mag .btn { font-size: 0.84rem; padding-top: 13px; padding-bottom: 13px; }
html.mag .btn-sm { font-size: 0.74rem; padding: 8px 14px; letter-spacing: 0.12em; }
html.mag .btn-primary { background: var(--mag-verde); border-color: var(--mag-verde); }
html.mag .btn-primary:hover { background: var(--mag-notte); border-color: var(--mag-notte); }

/* --- Riquadri: carta bianca sull'avorio, bordo sottile ---------------- */
html.mag .card,
html.mag .form-card { box-shadow: none; border: 1px solid var(--border); }

/* --- Occhielli ------------------------------------------------------- */
html.mag .eyebrow,
html.mag .program-intro-eyebrow,
html.mag .ai-award-eyebrow {
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  font-weight: 700;
}

/* --- Intestazione: pulsanti rettangolari anche li' -------------------- */
html.mag .site-header .btn,
html.mag .site-nav a.btn-light { border-radius: 0 !important; letter-spacing: 0.14em; }

/* --- Navigazione a punti (home): verde e menta ------------------------- */
html.mag .side-dots button.active { background: var(--mag-menta); }