/*
 * IMATNOTE — Semestre aperto site (blocksy-child)
 * Scope: semestre-aperto WP install only. All classes prefixed sa-.
 * Mirrors the IMATNOTE root-portal design tokens; accent = "semestre" indigo.
 */

:root {
  --sa-bg: #FFFFFF;
  --sa-soft: #F5F8FF;
  --sa-ink: #102033;
  --sa-muted: #607084;
  --sa-accent: #3730A3;      /* semestre indigo (matches root portal --sem chip) */
  --sa-accent-soft: #E0E7FF;
  --sa-blue: #2563EB;
  --sa-blue-dark: #1E40AF;
  --sa-border: #E2E8F0;
  --sa-amber: #B45309;
  --sa-amber-soft: #FEF3C7;
  --sa-shadow-sm: 0 1px 2px rgba(16, 32, 51, 0.05);
  --sa-shadow-md: 0 10px 30px -12px rgba(16, 32, 51, 0.18);
  --sa-radius: 16px;
}

/* ---------- Base scope ---------- */
.sa-page {
  color: var(--sa-ink);
  font-size: 1.03rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* contain the full-bleed bands */
}
.sa-page *,
.sa-page *::before,
.sa-page *::after { box-sizing: border-box; }
.sa-page img, .sa-page svg { max-width: 100%; height: auto; }

/* Full-bleed helper: break out of Blocksy's centred <main> container so
 * coloured bands reach the viewport edges, regardless of theme width. */
.sa-bleed { margin-inline: calc(50% - 50vw); }

.sa-container {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}
.sa-container--wide { max-width: 1120px; }
.sa-section { padding-block: clamp(40px, 6vw, 68px); }
.sa-band--soft { margin-inline: calc(50% - 50vw); background: var(--sa-soft); }
.sa-band--accent { margin-inline: calc(50% - 50vw); background: var(--sa-ink); color: #E7EEF9; }

/* Neutralise any Blocksy default page hero/title if the template ever falls
 * back to the standard content wrapper. */
.sa-page .entry-header,
.sa-page .page-hero-section { display: none; }

/* ---------- Hero ---------- */
.sa-hero {
  margin-inline: calc(50% - 50vw);
  background: linear-gradient(160deg, #111c30 0%, #1b2a47 55%, #24346b 100%);
  color: #EAF0FB;
  padding-block: clamp(56px, 9vw, 104px);
}
.sa-hero .sa-container { max-width: 960px; }
.sa-hero__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A5B4FC;
  margin: 0 0 16px;
}
.sa-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.05rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  color: #FFFFFF;
}
.sa-hero__lead {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.6;
  color: #C6D2EA;
  margin: 0 0 26px;
  max-width: 62ch;
}
.sa-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.sa-hero__meta li {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #D9E2F4;
}
.sa-updated {
  margin: 20px 0 0;
  font-size: 0.86rem;
  color: #9FB0CE;
}

/* ---------- Typography ---------- */
.sa-page h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.017em;
  margin: 2.4em 0 0.6em;
  padding-top: 0.3em;
  color: var(--sa-ink);
  scroll-margin-top: 90px;
}
.sa-page h2:first-child { margin-top: 0; }
.sa-page h3 {
  font-size: 1.24rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 1.8em 0 0.4em;
  color: var(--sa-ink);
  scroll-margin-top: 90px;
}
.sa-page p { margin: 0 0 1.15em; }
.sa-page a {
  color: var(--sa-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.sa-page a:hover { color: var(--sa-blue-dark); }
.sa-page strong { color: var(--sa-ink); font-weight: 700; }
.sa-page ul, .sa-page ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.sa-page li { margin-bottom: 0.4em; }
.sa-lead {
  font-size: 1.12rem;
  color: var(--sa-muted);
}

/* ---------- Table of contents ---------- */
.sa-toc {
  background: var(--sa-soft);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  padding: 22px 26px;
  margin: 0 0 8px;
}
.sa-toc h2 {
  font-size: 0.82rem !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sa-accent);
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.sa-toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2;
  column-gap: 34px;
}
.sa-toc li { margin-bottom: 7px; }
.sa-toc a { text-decoration: none; font-weight: 600; }
.sa-toc a:hover { text-decoration: underline; }

/* ---------- Tables ---------- */
.sa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.6em;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  box-shadow: var(--sa-shadow-sm);
}
.sa-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 560px;
}
.sa-page thead th {
  background: var(--sa-ink);
  color: #FFFFFF;
  text-align: left;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  padding: 13px 16px;
  vertical-align: top;
}
.sa-page tbody td {
  padding: 12px 16px;
  border-top: 1px solid var(--sa-border);
  vertical-align: top;
}
.sa-page tbody tr:nth-child(even) { background: #FAFBFE; }
.sa-page tbody tr:hover { background: var(--sa-accent-soft); }
.sa-page tbody td:first-child { font-weight: 600; color: var(--sa-ink); }

/* ---------- Callout / note ---------- */
.sa-note {
  background: var(--sa-amber-soft);
  border: 1px solid #FDE68A;
  border-left: 4px solid var(--sa-amber);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 1.6em;
  font-size: 0.98rem;
}
.sa-note strong { color: #92400E; }
.sa-info {
  background: var(--sa-accent-soft);
  border: 1px solid #C7D2FE;
  border-left: 4px solid var(--sa-accent);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 1.6em;
  font-size: 0.98rem;
}

/* ---------- University scheda ---------- */
.sa-scheda {
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  padding: 22px 26px;
  margin: 0 0 18px;
  background: #FFFFFF;
  box-shadow: var(--sa-shadow-sm);
}
.sa-scheda h3 { margin-top: 0; }
.sa-scheda p { margin-bottom: 0.7em; font-size: 0.99rem; }
.sa-scheda p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.sa-faq details {
  border: 1px solid var(--sa-border);
  border-radius: 12px;
  margin: 0 0 10px;
  background: #FFFFFF;
  box-shadow: var(--sa-shadow-sm);
  overflow: hidden;
}
.sa-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 48px 16px 20px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--sa-ink);
  position: relative;
}
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--sa-accent);
  transition: transform 0.18s ease;
}
.sa-faq details[open] summary::after { content: "\2212"; }
.sa-faq summary:hover { background: var(--sa-soft); }
.sa-faq details[open] summary { border-bottom: 1px solid var(--sa-border); }
.sa-faq__body { padding: 4px 20px 18px; }
.sa-faq__body p { margin: 0.8em 0 0; color: #33465C; }
.sa-faq__body p:first-child { margin-top: 0.8em; }

/* ---------- Sources ---------- */
.sa-sources { font-size: 0.94rem; color: var(--sa-muted); }
.sa-sources li { margin-bottom: 0.5em; }

/* ---------- Footer disclosure (independent-platform) ---------- */
.sa-footer-disclosure {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 24px 30px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8091A6;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .sa-toc ol { columns: 1; }
  .sa-section { padding-block: clamp(32px, 8vw, 48px); }
}