/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Editorial type roles (magazine language)
   ────────────────────────────────────────────────────────────────
   File:   .obsidian/plugins/slides-extended/css/typography.css
   Prefix: all classes use .mag- to separate from base.css utilities
   Requires: fonts.css loaded first (uses --font-headline/body/label)
   ════════════════════════════════════════════════════════════════ */

/* -- Tokens ---------------------------------------------------------
 * Sizes are in em, relative to the slide's base font-size, so they
 * scale consistently with Reveal.js's own zoom/scale behavior.
 */
:root {
	/* Kicker / eyebrow */
	--mag-kicker-size:      0.85em;
	--mag-kicker-weight:    600;
	--mag-kicker-tracking:  0.12em;
	--mag-kicker-color:     var(--accent);

	/* Headline */
	--mag-headline-size:    2em;
	--mag-headline-weight:  700;
	--mag-headline-lh:      1.05;
	--mag-headline-color:   var(--color-sky);

	/* Dek (subhead) */
	--mag-dek-size:         1em;
	--mag-dek-weight:       400;
	--mag-dek-lh:           1.35;
	--mag-dek-color:        var(--color-cream);

	/* Byline / credit */
	--mag-byline-size:      0.8em;
	--mag-byline-weight:    400;
	--mag-byline-tracking:  0.04em;
	--mag-byline-color:     rgba(255, 255, 255, 0.55);

	/* Pull-quote (large, dramatic — full-slide quote) */
	--mag-quote-size:       1.6em;
	--mag-quote-weight:     600;
	--mag-quote-lh:         1.25;
	--mag-quote-mark-size:  2.2em;
	--mag-quote-mark-color: var(--accent);

	/* Quote text (small, inline — quote embedded in body content) */
	--mag-quotetext-size:   0.95em;
	--mag-quotetext-lh:     1.45;
	--mag-quotetext-color:  rgba(255, 255, 255, 0.85);

	/* Drop cap */
	--mag-dropcap-size:     3.5em;
	--mag-dropcap-lh:       0.8;

	/* Folio (page number / section name) */
	--mag-folio-size:       0.75em;
	--mag-folio-tracking:   0.1em;
	--mag-folio-color:      rgba(255, 255, 255, 0.50);

	/* Article subtitle — level 1 (paragrafo) */
	--mag-h2-size:          1.5em;
	--mag-h2-weight:        600;
	--mag-h2-tracking:      0.02em;
	--mag-h2-color:         var(--color-sky);

	/* Article subtitle — level 2 (sotto-paragrafo) */
	--mag-h3-size:          1.15em;
	--mag-h3-weight:        500;
	--mag-h3-tracking:      0.02em;
	--mag-h3-color:         var(--color-sky);

	/* Rule (divider line) */
	--mag-rule-color:       rgba(255, 255, 255, 0.20);
	--mag-rule-weight:      1px;
}


/* -- Kicker / Rubrica -------------------------------------------------
 * Small label above a headline, e.g. "TECNOLOGIA", "CASE STUDY".
 * Usage: <p class="mag-kicker">RUBRICA</p>
 */
.mag-kicker {
	font-family:    var(--font-label);
	font-size:      var(--mag-kicker-size);
	font-weight:    var(--mag-kicker-weight);
	letter-spacing: var(--mag-kicker-tracking);
	text-transform: uppercase;
	color:          var(--mag-kicker-color);
	margin:         0 0 0.4em 0;
}


/* -- Headline ---------------------------------------------------------
 * Large editorial title. Multi-line via <br>, size controllable
 * per-instance via --mag-headline-size inline override.
 * Usage: <h1 class="mag-headline">Titolo</h1>
 */
.reveal .mag-headline {
	font-family: var(--font-headline) !important;
	font-size:   var(--mag-headline-size);
	font-weight: var(--mag-headline-weight) !important;
	line-height: var(--mag-headline-lh) !important;
	color:       var(--mag-headline-color) !important;
	margin:      0;
}


/* -- Dek (subhead) ------------------------------------------------------
 * Sommario sotto l'headline. Body font, leggero, colore attenuato.
 * Usage: <p class="mag-dek">Sommario del capitolo...</p>
 */
.reveal .mag-dek {
	font-family: var(--font-headline) !important;
	font-style:  italic;
	font-size:   var(--mag-dek-size);
	font-weight: var(--mag-dek-weight) !important;
	line-height: var(--mag-dek-lh);
	color:       var(--mag-dek-color);
	margin:      0.9em 0 0 0;
}


/* -- Byline / Credit ----------------------------------------------------
 * Per crediti foto, autori, fonti.
 * Usage: <p class="mag-byline">Foto: Mario Rossi</p>
 */
.mag-byline {
	font-family:    var(--font-label);
	font-size:      var(--mag-byline-size);
	font-weight:    var(--mag-byline-weight);
	letter-spacing: var(--mag-byline-tracking);
	text-transform: uppercase;
	color:          var(--mag-byline-color);
}


/* -- Pull-quote ---------------------------------------------------------
 * Citazione estratta, grande, con virgolette decorative.
 * Usage:
 *   <div class="mag-pullquote">
 *     <span class="mag-pullquote-mark">"</span>
 *     Testo della citazione qui.
 *   </div>
 */
.reveal .mag-pullquote {
	font-family: var(--font-headline) !important;
	font-size:   var(--mag-quote-size);
	font-weight: var(--mag-quote-weight) !important;
	font-style:  italic;
	line-height: var(--mag-quote-lh) !important;
	position:    relative;
}
.mag-pullquote-mark {
	display:     block;
	font-family: var(--font-headline);
	font-size:   var(--mag-quote-mark-size);
	font-style:  normal;
	font-weight: 900;
	color:       var(--mag-quote-mark-color);
	line-height: 0.6;
	margin:      0 0 0.1em 0;
}


/* -- Quote text (inline / embedded) ----------------------------------
 * Citazione più piccola, incassata nel corpo del testo — non a piena
 * slide come il pull-quote. Serif italic, bordo sinistro d'accento.
 * Usage:
 *   <blockquote class="mag-quote-text">
 *     Testo della citazione qui.
 *   </blockquote>
 */
.reveal .mag-quote-text {
	font-family:  var(--font-headline) !important;
	font-style:   italic;
	font-weight:  400 !important;
	font-size:    var(--mag-quotetext-size);
	line-height:  var(--mag-quotetext-lh);
	color:        var(--mag-quotetext-color);
	border-left:  3px solid var(--accent);
	padding-left: 0.8em;
	margin:       0.8em 0;
}


/* -- Drop cap -------------------------------------------------------
 * Prima lettera ingrandita a inizio articolo.
 * Usage:
 *   <p><span class="mag-dropcap">L</span>orem ipsum dolor...</p>
 */
.reveal .mag-dropcap {
	float:        left;
	font-family:  var(--font-headline) !important;
	font-size:    var(--mag-dropcap-size);
	font-weight:  700 !important;
	line-height:  var(--mag-dropcap-lh) !important;
	margin:       0.02em 0.08em 0 0;
}


/* -- Folio (page number / section label) -----------------------------
 * Stile editoriale per numerazione pagina + nome sezione.
 * Usage: <div class="mag-folio">04 — TECNOLOGIA</div>
 */
.mag-folio {
	font-family:    var(--font-label);
	font-size:      var(--mag-folio-size);
	letter-spacing: var(--mag-folio-tracking);
	text-transform: uppercase;
	color:          var(--mag-folio-color);
}


/* -- Article subtitle — level 1 (paragrafo) --------------------------
 * Saira Condensed, same family as the kicker — structural label
 * style rather than narrative serif.
 * Usage: <h2 class="mag-h2">Titolo paragrafo</h2>
 */
.reveal .mag-h2 {
	font-family:    var(--font-label) !important;
	font-size:      var(--mag-h2-size);
	font-weight:    var(--mag-h2-weight) !important;
	letter-spacing: var(--mag-h2-tracking);
	color:          var(--mag-h2-color) !important;
	margin:         1.2em 0 0.4em 0;
}

/* -- Article subtitle — level 2 (sotto-paragrafo) --------------------
 * Same family, smaller and lighter than mag-h2 for clear hierarchy.
 * Usage: <h3 class="mag-h3">Titolo sotto-paragrafo</h3>
 */
.reveal .mag-h3 {
	font-family:    var(--font-label) !important;
	font-size:      var(--mag-h3-size);
	font-weight:    var(--mag-h3-weight) !important;
	letter-spacing: var(--mag-h3-tracking);
	color:          var(--mag-h3-color) !important;
	margin:         0.8em 0 0.3em 0;
}


/* -- Rule (divider line) ---------------------------------------------
 * Linea sottile orizzontale o verticale tra blocchi.
 * Usage: <div class="mag-rule"></div>
 *        <div class="mag-rule vertical"></div>
 */
.mag-rule {
	border: none;
	height: var(--mag-rule-weight);
	background: var(--mag-rule-color);
	margin: 1em 0;
}
.mag-rule.vertical {
	width:  var(--mag-rule-weight);
	height: 100%;
	margin: 0 1em;
}

/* -- Native horizontal rule (markdown ---- separator) -----------------
 * Reuses the same tokens as .mag-rule for visual consistency.
 * Usage: just type ---- on its own line in the markdown.
 */
.reveal hr {
	border:     none;
	height:     var(--mag-rule-weight);
	background: var(--accent);
	margin:     1em 0;
}

/* -- Short divider (dinkus / section mark) -----------------------------
 * Short, thick horizontal bar — marks the start of an article/section,
 * distinct from the full-width .mag-rule / native hr.
 * Aligns with surrounding text via inline-block + inherited text-align.
 * Usage: <div class="mag-divider"></div>
 *        <div class="mag-divider center"></div>
 */
.mag-divider {
	display:       inline-block;
	width:         48px;
	height:        4px;
	background:    var(--accent);
	border-radius: 2px;
	margin:        1.2em 0 0.4em 0;
}
.mag-divider.center {
	display: block;
	margin:  1.2em auto;
}

/* -- End-of-article mark -------------------------------------------
 * Usage: <div class="mag-ender right"
 * 		style="--ender-color: #000000; --ender-w: 100px;">
 * 	  </div>
 */
.mag-ender {
	display:   block;
	width:     var(--ender-w, 80px);
	color:     var(--ender-color, var(--accent));
	margin:    var(--ender-margin, 1.5em 0);
}
.mag-ender.right { margin-left: auto; }
.mag-ender.center { margin: var(--ender-margin, 1.5em) auto; }