/* ==========================================================
   SCUOLA DI FUMETTO — BRANDING / TYPOGRAPHY v0.1
   File: css/branding-fumetto.css
   ========================================================== */

:root{
  /* FONT */
  --font-body: Arial, Helvetica, sans-serif;
  --font-title: Arial, Helvetica, sans-serif;
  --font-nav: 'Inter', system-ui, sans-serif;

  /* TESTO */
  --color-text: #555555;
  --color-text-dark: #2a2a2a;
  --color-muted: #6f6f6f;
 
  /* TITOLI */
  --color-title: #1B3083;
  --color-title-dark: #1B3083;
  --color-title-neutral: #2a2a2a;

  /* LINK */
  --color-link: #4c46a3;
  --color-link-hover: #373180;
  --color-link-soft: #7561aa;
  --color-link-soft-hover: #a06ad6;

  /* ACCENTI */
  --color-accent-cyan: #7CD6F9;
  --color-accent-violet: #ce6ed5;
  --color-accent-orange: #f08523;

  /* SFONDI */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-block-light: #f4f7fc;
  --color-block-soft: #eef3fb;
  --color-section-tint: #f6f7f8;

  /* BORDI */
  --color-border-soft: rgba(44,69,124,.15);
  --color-border-medium: rgba(44,69,124,.100);
  --color-border-strong: #d6dce8;

  /* FOOTER */
  --color-footer-bg: #2a2f95;
  --color-footer-card-bg: rgba(255,255,255,.06);
  --color-footer-card-border: rgba(255,255,255,.12);
  --color-footer-text: #ffffff;
  --color-footer-link: #dfe4ff;

  /* OMBRE */
  --shadow-soft: 0 10px 28px rgba(0,0,0,.06);
}

/* BASE */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img{max-width:100%;display:block;}

p{
  margin:0 0 10px;
  color: var(--color-text);
  line-height: 1.58;
}

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

.muted,
.text-muted{color:var(--color-muted);}

strong{
  color:#4b58a2;
  font-weight:600;
}

/* LINK */
a{
  color:var(--color-link);
  text-decoration:none;
  font-weight:500;
}

a:hover{
  color:var(--color-link-hover);
  text-decoration:underline;
  text-underline-offset:3px;
}

.block a,
.content-stack a{
  color:var(--color-link-soft);
  border-bottom:1px dotted rgba(117,97,170,.45);
}

.block a:hover,
.content-stack a:hover{
  color:var(--color-link-soft-hover);
  border-bottom-color:rgba(160,106,214,.55);
  text-decoration:none;
}

/* TITOLI */
h1,h2,h3{
  margin:0 0 10px;
  font-family:var(--font-title);
  line-height:1.1;
  letter-spacing:-0.02em;
}

.h1-bio{
  font-size:clamp(1.9rem, 4vw, 2.4rem);
  font-weight:500;
  color:var(--color-title);
  text-align:center;
  letter-spacing:-0.02em;
}

.h1-corsi{
  font-size:clamp(2.35rem, 5vw, 3rem);
  font-weight:700;
  color:var(--color-title);
  text-align:center;
  letter-spacing:-0.03em;
}

.h1-tecnico{
  font-size:clamp(2rem, 4.5vw, 2.75rem);
  font-weight:600;
  color:var(--color-title);
  text-align:center;
  letter-spacing:-0.025em;
}

.h2-standard{
  font-size:clamp(1.6rem, 3vw, 2rem);
  font-weight:500;
  color:var(--color-title);
  text-align:center;
  letter-spacing:-0.02em;
}

.h2-corsi{
  font-size:clamp(1.8rem, 3.5vw, 2.35rem);
  font-weight:600;
  color:var(--color-title);
  text-align:center;
  letter-spacing:-0.025em;
}

.h3-standard{
  font-size:1.2rem;
  font-weight:600;
  color:var(--color-text-dark);
  line-height:1.25;
}

.h3-blue{
  font-size:1.2rem;
  font-weight:600;
  color:var(--color-title);
  line-height:1.25;
}

.subtitle,
.bio-role{
  text-align:center;
  font-size:1.05rem;
  color:#666666;
  margin-top:0;
  margin-bottom:16px;
  line-height:1.45;
}

.subtitle-section{
  color:var(--color-text);
  font-size:1.05rem;
  line-height:1.55;
}

/* NAV */
.nav-inner a{
  font-family:var(--font-nav);
  font-size:15.5px;
  font-weight:300;
  color:#2f2f2f;
  line-height:1;
  opacity:.95;
  text-decoration:none;
}

.nav-inner a:hover{
  opacity:.72;
  text-decoration:none;
}

/* BLOCCHI */
.block--white{
  background:var(--color-surface);
  border:1px solid var(--color-border-soft);
}

.block--light{
  background:var(--color-block-light);
  border:1px solid var(--color-border-soft);
}

.block--soft{
  background:var(--color-block-soft);
  border:1px solid rgba(44,69,124,.08);
}

.card-border-standard{
  border:1.5px solid var(--color-border-strong);
  border-radius:0;
  box-shadow:none;
}

/* BOTTONI */
.btn-primary{
  background:#24277f;
  color:#ffffff;
}

.btn-primary:hover{
  background:#1b1f68;
  color:#ffffff;
  text-decoration:none;
}

.btn-secondary{
  background:#ffffff;
  color:var(--color-title);
  border:1px solid var(--color-border-medium);
}

/* SPAZIATURE TESTI NEI BLOCCHI */
.block h1,
.block h2{
  margin-bottom:18px;
}

.block h3{
  margin-bottom:12px;
}

.block p{
  margin-bottom:12px;
  line-height:1.6;
}

/* FOOTER */
.footer-main{
  width:100%;
  margin-top:40px;
  padding:70px 0 38px;
  background:var(--color-footer-bg);
  color:var(--color-footer-text);
}

.footer-grid{
  width:min(var(--content-max, 1200px), calc(100% - 2rem));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

.footer-card{
  background:var(--color-footer-card-bg);
  border:1px solid var(--color-footer-card-border);
  padding:28px 24px;
}

.footer-card h3{
  margin:0 0 14px;
  font-size:1.1rem;
  font-weight:600;
  color:var(--color-footer-text);
  text-align:center;
}

.footer-card p{
  margin:6px 0;
  font-size:.95rem;
  color:rgba(255,255,255,.88);
  line-height:1.65;
}

.footer-card a{
  color:var(--color-footer-link);
  text-decoration:none;
  border-bottom:0;
}

.footer-card a:hover{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer-card strong{
  color:#e0e6ff;
}

.footer-copy{
  grid-column:1 / -1;
  text-align:center;
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:.9rem;
  color:rgba(255,255,255,.72);
}

.footer-copy a{
  color:rgba(255,255,255,.72);
  text-decoration:none;
}

.footer-copy a:hover{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:900px){
  .footer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:767px){
  .footer-main{
    margin-top:28px;
    padding:36px 0 28px;
    overflow:hidden;
  }

  .footer-grid{
    width:calc(100% - 28px);
    grid-template-columns:1fr;
    gap:14px;
  }

  .footer-card{
    padding:20px 16px;
  }

  .footer-card h3{
    text-align:left;
    font-size:1.05rem;
  }

  .footer-card p{
    font-size:.95rem;
    line-height:1.55;
    overflow-wrap:anywhere;
  }

  .footer-copy{
    margin-top:16px;
    font-size:.86rem;
    line-height:1.45;
  }
}

/* VARIANTI */
.model-bio{--page-h1-size:clamp(1.9rem, 4vw, 2.4rem);}
.model-corsi{--page-h1-size:clamp(2.35rem, 5vw, 3rem);}
.model-tecnico{--color-link:#4c46a3;--color-link-hover:#373180;}
.model-junior{--color-accent-current:var(--color-accent-orange);}

/* MOBILE */
@media (max-width:767px){
  p{line-height:1.55;}
  .h1-bio{font-size:clamp(1.8rem, 8vw, 2.3rem);}
  .h1-corsi{font-size:clamp(2.2rem, 9vw, 3rem);}
  .h1-tecnico{font-size:clamp(2rem, 8vw, 2.7rem);}
  .h2-standard,
  .h2-corsi{font-size:clamp(1.55rem, 7vw, 2rem);}
  .subtitle,
  .bio-role{font-size:1rem;}
}

/* ==========================================================
   ABACO RAPIDO
   .h1-bio       → bio, educational, istituzionali
   .h1-corsi     → corsi, landing, pagine promozionali
   .h1-tecnico   → iscrizioni, pagamenti, pagine funzionali
   .h2-standard  → sezioni comuni
   .h2-corsi     → sezioni corsi più forti
   .h3-standard  → sottosezioni neutre
   .h3-blue      → sottosezioni blu
   .block--white → card bianca
   .block--light → card azzurro chiarissimo
   .block--soft  → sfondo tecnico / informativo
   ========================================================== */

/* ==========================================================
   PAGINE TECNICHE / ANALISI
   Uso: <body class="analisi-page model-tecnico">
   ========================================================== */

.model-tecnico{
  --color-link:#4c46a3;
  --color-link-hover:#373180;
}

/* H1 sobrio, vicino al modello bio */
.model-tecnico .h1-tecnico{
  font-size:clamp(1.85rem, 3.8vw, 2.32rem);
  font-weight:500;
  color:var(--color-title);
  text-align:center;
  letter-spacing:-0.02em;
}

/* Sottotitolo più leggero */
.model-tecnico .bio-role,
.model-tecnico .subtitle{
  color:#6f6f6f;
  font-size:1rem;
  font-weight:400;
  line-height:1.45;
}

/* Testo tecnico leggibile, neutro */
.model-tecnico p,
.model-tecnico li{
  color:#3e3e3e;
  font-size:1em;
  line-height:1.58;
}

.model-tecnico strong{
  color:#4f5d86;
  font-weight:600;
}

/* H2 tecnico sempre blu */
.model-tecnico .h2-standard{
  color:var(--color-title);
  font-weight:500;
}

/* Lista tipo indice / documenti */
.model-tecnico .apple-list a{
  color:#3e3e3e;
  font-weight:400;
  border-bottom:1px solid rgba(44,69,124,.09);
}

.model-tecnico .apple-list a:hover{
  color:#2C457C;
  text-decoration:none;
  background:#f8f9fc;
}

/* Titoletti della lista: blu bio, poco più grandi */
.model-tecnico .apple-list a span{
  color:var(--color-title);
  font-size:1.29em;
  font-weight:500;
  line-height:1.25;
}

/* Descrizione sotto: nero/grigio come testo pagina */
.model-tecnico .apple-list a small{
  color:#3e3e3e;
  font-size:.74em;
  font-weight:400;
  line-height:1.5;
}

/* ==========================================================
   COMUNICAZIONI AI SOCI
   Uso: <article class="card block block--light communication-card">
   ========================================================== */

/* Data sopra al titolo */
.communication-date{
  display:block;
  margin-bottom:8px;
  color:#6f6f6f;
  font-size:0.9rem;
  font-weight:500;
  letter-spacing:0.01em;
  text-align:center;
}

/* Titolo della comunicazione */
.communication-card h2{
  font-size:clamp(1.35rem, 2.2vw, 2rem);
  font-weight:500;
  line-height:1.18;
  color:var(--color-title, #2C457C);
  text-align:center;
  max-width:900px;
  margin:0 auto 12px;
}

/* Corpo del testo */
.communication-card .bio-text{
  width:min(860px, 100%);
  margin:0 auto;
}

.communication-card p,
.communication-card li{
  color:#3e3e3e;
  font-size:1em;
  line-height:1.58;
}
/* ==========================================================
   PAGINE SEDE
   H1 e H2 con identico aspetto grafico
   (l'H1 mantiene il suo valore semantico SEO, ma visivamente
   è uguale a un H2)
   ========================================================== */

.sede-page h1,
.sede-page h2 {
   color: var(--color-title) !important;
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 0 0.9rem 0 !important;
}

/* ==========================================================
   CARD GLOBALI DEL SITO
   Stile elegante senza angoli arrotondati
   ========================================================== */

.block--white{
  background: #ffffff;
  border: 1px solid #dfe5f0;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(44,69,124,.04);
  padding: 2rem;
  overflow: hidden;
}

@media (max-width: 767px){
  .block--white{
    border-radius: 0;
    padding: 1.25rem;
  }
}

/* ==========================================================
   IMMAGINE IN TESTA ALLA CARD
   Utilizzabile in tutto il sito
   ========================================================== */

.card-cover{
  display: block;
  width: calc(100% + 4rem);
  max-width: none;
  margin: -2rem -2rem 1.5rem -2rem;
  border-radius: 0;
  height: auto;
  object-fit: cover;
}

@media (max-width: 767px){
  .card-cover{
    width: calc(100% + 2.5rem);
    margin: -1.25rem -1.25rem 1.1rem -1.25rem;
    border-radius: 0;
  }
}
/* Rimuove tratteggio/sottolineatura dai link che contengono immagini */
a:has(img){
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

a:has(img):hover,
a:has(img):focus,
a:has(img):active{
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* ==========================================================
   RIDUCE LO SPAZIO TRA LE CARD DELLE PAGINE SEDE
   (desktop e mobile)
   ========================================================== */

.sede-page .migrated-content > .card + .card,
.sede-page .cards-stack > .card + .card,
.sede-page .block + .block {
  margin-top: 0px !important;   /* spazio più compatto */
}
/* NAV: gestione dropdown Corsi da CSS esterno */
.nav-item.has-submenu{
  position:relative;
}

.nav-item.has-submenu > a{
  cursor:default;
}