/* ========================================================
   FRONTEND BRAND — tipografia del brand book Arcademy v1.0
   Solo sito pubblico: attivo con <html class="frontend-brand">
   (impostato in includes/header-public.php). L'area riservata
   non carica questo file.
   Due caratteri (28/10/2026): Montserrat per titoli, sottotitoli,
   menu, pulsanti ed etichette; Inter per il testo di
   lettura (paragrafi, elenchi, moduli, footer).
   Il 28/10 provato Source Sans 3, scartato da Vito: ora Inter.
   Testo #1F1F1F, secondario #6A6560.
======================================================== */

html.frontend-brand {
  /* scala tipografica (base 16 px, rapporto ~1,25) */
  --fb-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fb-text: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fb-display: clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem);   /* 28 → 38  titolo hero (carosello) */
  --fb-h1: clamp(1.875rem, 1.45rem + 1.4vw, 2.5rem);         /* 30 → 40  titoli di sezione */
  --fb-h2: clamp(1.5rem, 1.27rem + 0.8vw, 1.875rem);         /* 24 → 30  titoli dei blocchi */
  --fb-h3: 1.375rem;                                         /* 22       titoli delle card */
  --fb-h4: 1.125rem;                                         /* 18       titoli di card piccole */
  --fb-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17 → 19  sottotitoli e introduzioni */
  --fb-body: 1rem;                                           /* 16 */
  --fb-read: 1rem;                                           /* 16  testo in Inter */
  --fb-read-small: 0.9375rem;                                /* 15  note e card corso in Inter */
  --fb-small: 0.875rem;                                      /* 14       date, note, metadati */
  --fb-label: 0.75rem;                                       /* 12       etichette maiuscole */

  /* colori del brand */
  --fb-ink: #1F1F1F;
  --fb-muted: #6A6560;
  --fb-orange: #E79A2D;
  --fb-paper: #F4F3F2;

  /* aggancio alle variabili esistenti (Bootstrap/AdminKit e design moderno) */
  --bs-body-font-family: var(--fb-text);
  --bs-font-sans-serif: var(--fb-font);
  --bs-body-color: var(--fb-ink);
  --bs-heading-color: var(--fb-ink);
  --bs-secondary-color: var(--fb-muted);
  --mod-font: var(--fb-font);
  --mod-text: var(--fb-ink);
  --mod-text-muted: var(--fb-muted);
}

/* --- Base --- */
html.frontend-brand body {
  font-family: var(--fb-text);
  font-size: var(--fb-read);
  line-height: 1.65;
  color: var(--fb-ink);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.frontend-brand body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--fb-font);
  color: inherit;
  text-wrap: balance;           /* niente righe a gradini né parole isolate */
}

html.frontend-brand body :is(p, li, dd, blockquote) {
  text-wrap: pretty;
}

html.frontend-brand body :is(h1, h2, h3, h4, h5, h6):not([class*="text-white"]):not([style*="color"]) {
  color: var(--fb-ink);
}

/* Montserrat dove non è un titolo HTML: sottotitoli, titoli di card, etichette dei moduli */
html.frontend-brand body :is(.hero-subtitle, .courses-subtitle, .course-row__title, .premium-title,
  .arc-box-title, .intro-title, .approach-title, .service-title, .help-highlight, .form-label,
  .card-title, .card-subtitle) {
  font-family: var(--fb-font);
}

/* testo di lettura in Inter anche dove app-modern.css forza --mod-font */
html.frontend-brand body :is(.intro-paragraph, .premium-text, .lead) {
  font-family: var(--fb-text);
}

html.frontend-brand body :is(.text-muted, .text-secondary) {
  color: var(--fb-muted) !important;
}

/* --- Navigazione --- */
html.frontend-brand nav.navbar .nav-link {
  font-family: var(--fb-font);
  font-size: 0.9375rem;         /* 15 */
  font-weight: 600;
  letter-spacing: 0.005em;
}

html.frontend-brand nav.navbar .btn {
  font-family: var(--fb-font);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Hero (carosello in home) --- */
html.frontend-brand body .hero-title,
html.frontend-brand #heroCarousel .hero-slide--intro .hero-title {
  font-size: var(--fb-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

html.frontend-brand body .hero-subtitle,
html.frontend-brand #heroCarousel .hero-slide--intro .hero-subtitle {
  font-size: var(--fb-lead);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

/* --- Titoli di sezione --- */
html.frontend-brand body :is(.caffe-hero-title, .donation-title, .title-success, .help-dual h2) {
  font-size: var(--fb-h1);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

html.frontend-brand body :is(.courses-subtitle, .intro-paragraph, .lead) {
  font-size: var(--fb-lead);
  font-weight: 400;
  line-height: 1.6;
}

/* "Corsi attivi" (home, Accademia): come i titoli dei blocchi, non come un h1 (Vito 28/10) */
html.frontend-brand body .courses-title {
  font-size: var(--fb-h2);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* --- Titoli dei blocchi (Chi siamo, Accademia, ecc.) --- */
html.frontend-brand body :is(.intro-title, .approach-title, .service-title) {
  font-size: var(--fb-h2);
  font-weight: 800;             /* tutti i titoli di sezione a 800 (Vito 28/10) */
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* --- Card --- */
html.frontend-brand body :is(.premium-title, .arc-box-title) {
  font-size: var(--fb-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

html.frontend-brand body :is(.premium-text, .big-card-blue .intro-paragraph, .big-card-network .intro-paragraph) {
  font-size: var(--fb-read);
  line-height: 1.65;
}

/* titolo della card corso in home (h2.h5) e righe corso */
html.frontend-brand body :is(.course-row__title, .card .h5, .card h5, .help-highlight) {
  font-size: var(--fb-h4);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

/* titoli generici nel contenuto (pagine corso, privacy, accessibilità…) */
html.frontend-brand main :is(h1:not([class]), .content h1) {
  font-size: var(--fb-h1);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

html.frontend-brand main h2:not([class]),
html.frontend-brand body .donation-title h2 {
  font-size: var(--fb-h2);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

html.frontend-brand main h3:not([class]),
html.frontend-brand main h3.mb-3,
html.frontend-brand main h3.text-center {
  font-size: var(--fb-h3);
  font-weight: 800;             /* titoletti di sezione (Voucher, 5x1000…): come le altre intestazioni */
  line-height: 1.25;
}

html.frontend-brand main :is(h4:not([class]), h5:not([class]), h6:not([class])) {
  font-size: var(--fb-h4);
  font-weight: 700;
  line-height: 1.3;
}

/* --- Testo piccolo, metadati, form --- */
html.frontend-brand body :is(small, .small, .form-text) {
  font-size: var(--fb-read-small);
}

html.frontend-brand body .form-label {
  font-size: var(--fb-small);
  font-weight: 600;
  color: var(--fb-ink);
}

html.frontend-brand body :is(.form-control, .form-select) {
  font-family: var(--fb-text);
  font-size: 1rem;
}

/* --- Etichette (badge dei corsi): maiuscolo spaziato, come le pillole del brand --- */
html.frontend-brand body .badge {
  font-family: var(--fb-font);
  font-size: 0.6875rem;         /* 11 */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.45em 0.8em;
}

/* --- Pulsanti --- */
html.frontend-brand body .btn {
  font-family: var(--fb-font);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

html.frontend-brand body .btn-sm {
  font-size: var(--fb-small);
}

/* --- Footer --- */
html.frontend-brand footer {
  font-family: var(--fb-text);
}

html.frontend-brand footer :is(h6, .h6) {
  font-size: var(--fb-label);
  font-weight: 700 !important;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Link nel testo --- */
html.frontend-brand main p a:not(.btn) {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* --- Dati compatti: solo le card corso della home (date, codici), footer --- */
html.frontend-brand body .home-course-card :is(p, li) {
  font-size: var(--fb-read-small);
  line-height: 1.55;
}

/* footer su verde acqua: bianco pieno e un peso in più, altrimenti il testo sottile si perde */
html.frontend-brand footer :is(p, li, a, small, span) {
  font-size: 0.9375rem;         /* 15 */
  font-weight: 500;
  line-height: 1.6;
  color: #fff !important;
  letter-spacing: 0.005em;
}

html.frontend-brand body :is(footer, .footer) a {
  font-weight: 600 !important;
  color: #fff !important;   /* app-modern.css li mette a 500 e bianco 85% con !important */
}

html.frontend-brand footer :is(h5, .h5) {
  font-size: 1rem;
  font-weight: 700 !important;
  color: #fff;
}

html.frontend-brand footer :is(p, small).small,
html.frontend-brand footer .text-center.small {
  font-size: var(--fb-read-small);
  font-weight: 500;
}

/* --- Colori dei paragrafi: un solo nero e un solo grigio --- */
html.frontend-brand body :is(.intro-paragraph, .premium-text):not(.text-white) {
  color: var(--fb-ink);
}

html.frontend-brand body .courses-subtitle {
  color: var(--fb-muted);
}

/* --- Testo chiaro su fondi colorati (blu, verde acqua, foto):
       un peso in più perché il testo sottile si "impasta" col fondo --- */
html.frontend-brand body :is(.big-card-blue, .big-card-network, .text-white, .bg-primary, .bg-success, .bg-info, .bg-dark) :is(p, li, span, small, div):not(.badge),
html.frontend-brand body :is(p, li).text-white {
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

html.frontend-brand body :is(.big-card-blue, .big-card-network) :is(strong, b, a) {
  font-weight: 700 !important;
}

html.frontend-brand body :is(.big-card-blue, .big-card-network) :is(h1, h2, h3, h4, .intro-title) {
  font-weight: 800;
}

html.frontend-brand body .hero-subtitle,
html.frontend-brand #heroCarousel .hero-slide--intro .hero-subtitle {
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}

/* pulsanti ed etichette pieni (bianco su verde acqua/arancio): grassetto.
   !important perché app.css forza 600 !important su tutti i link e su .fw-bold */
html.frontend-brand body .btn:not([class*="btn-outline"]):not(.btn-link),
html.frontend-brand body .badge {
  font-weight: 700 !important;
}

/* --- Testo di lettura nelle pagine interne (chi siamo, accademia, corso, privacy…):
       16 px, interlinea ariosa, uno spazio di circa una riga tra i paragrafi.
       Nessun limite di larghezza: il testo riempie il riquadro (scelta di Vito) --- */
html.frontend-brand main :is(p, li):not(.home-course-card *):not(.hero-subtitle):not(.badge) {
  font-size: var(--fb-read);
  line-height: 1.7;
}

html.frontend-brand main p:not(.home-course-card *):not(:last-child) {
  margin-bottom: 1em;
}

html.frontend-brand main :is(ul, ol):not(.home-course-card *) > li + li {
  margin-top: 0.35em;
}

/* --- Testata delle pagine corso (copertina + titolo): proporzionato al riquadro,
       come il titolo del carosello in home --- */
html.frontend-brand body .hero-img ~ .card-body h1 {
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);   /* 26 → 32 */
  font-weight: 800 !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

html.frontend-brand body .hero-img ~ .card-body h1 + :is(h4, .h4) {
  font-size: var(--fb-body);
  font-weight: 600;
}

/* --- Sottotitolo sotto il titolo di pagina (es. Accademia: p.text-muted dopo l'h1) --- */
html.frontend-brand main :is(h1, h2) + p.text-muted {
  font-family: var(--fb-font);
  font-weight: 500;
  line-height: 1.45;
}

/* --- CTA: stessa forma delle pagine /conferenza (28/10/2026).
       Pillola piena, Montserrat 800, icona staccata; colori invariati.
       !important perché app.css/app-modern.css fissano 10-14 px anche con !important --- */
html.frontend-brand body .btn:not(.btn-close):not(.btn-link):not(.btn-check) {
  border-radius: 999px !important;
  font-family: var(--fb-font);
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.5rem;
  line-height: 1.2;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

html.frontend-brand body .btn:not(.btn-close):not(.btn-link):hover {
  transform: translateY(-2px);
}

html.frontend-brand body .btn:not(.btn-close):not(.btn-link):active {
  transform: none;
}

html.frontend-brand body .btn-sm:not(.btn-close),
html.frontend-brand nav.navbar .btn {
  padding: 0.5rem 1.15rem;
}

html.frontend-brand body .btn > :is(i, svg, .bi):first-child {
  margin-right: 0.45em;
}

@media (prefers-reduced-motion: reduce) {
  html.frontend-brand body .btn:hover { transform: none; }
}

/* --- Gerarchia dei pesi in tutte le pagine (28/10/2026).
       adminkit forza .fw-bold/.fw-semibold a 600 !important, quindi nelle pagine
       interne (Chi siamo, Accademia, Privacy, Caffè…) i titoli uscivano a 600.
       Titoli di pagina e di sezione 800, titoli di card e sottosezioni 700,
       sottotitoli grigi (h4.text-muted) invariati --- */
html.frontend-brand main :is(h1, h2, h3):not(.h4, .h5, .h6, .text-muted, .premium-title, .card-title) {
  font-weight: 800 !important;
}

html.frontend-brand main :is(h4, h5, h6, .h4, .h5, .h6):is(h1, h2, h3, h4, h5, h6):not(.text-muted) {
  font-weight: 700 !important;
}