/* ================================================================
   SLIDES EXTENDED — BASE LIBRARY
   ----------------------------------------------------------------
   File:   .obsidian/plugins/slides-extended/css/base.css
   Ref:    Add to the presentation frontmatter:
           css: base.css
   ================================================================ */


/* ── SECTION 1 · DESIGN TOKENS ────────────────────────────────── */
/*
   All variable values live here.
   To customize: override these variables in the frontmatter
   via a <style> block, or in an additional project-specific CSS
   file (e.g. css: [base.css, my-project.css])
*/
:root {
	/* Brand colors now live in colors.css — must load before this file.
	 * --accent, --accent-dim, --accent-faint are defined there. */

	/* Surfaces / overlays */
	--overlay-dark:        rgba(0, 0, 0, 0.60);
	--overlay-light:       rgba(255, 255, 255, 0.08);
	--border-subtle:       rgba(255, 255, 255, 0.15);

	/* Typography */
	--fs-body:             24px;
	--fs-caption:          27px;
	--fs-nav:              24px;
	--fs-small:            21px;

	/* Layout split */
	--split-gap:           4%;

	/* Image stack */
	--img-stack-h:         900px;
	--img-stack-margin:    60px auto;
	--img-inset-x:         2%;
	--img-inner-w:         92%;
	--img-border:          12px solid white;
	--img-shadow:          8px 8px 23px rgba(0, 0, 0, 0.30);
	--img-shadow-heavy:    8px 8px 23px rgba(0, 0, 0, 0.40);
	--img-radius:          6px;

	/* Global nav (legacy, hash-link version) */
	--nav-bottom:          -15px;
	--nav-right:           30px;
	--nav-gap:             15px;
	--nav-padding:         15px 23px;
	--nav-radius:          12px;

	/* Box / card */
	--box-radius:          12px;
	--box-padding:         18px 30px;
	--hl-radius:           6px;
	--badge-radius:        15px;
	--badge-padding:       15px 30px;

	--slide-h: 1080px; /* must match height: in frontmatter */
}


/* ── SECTION 2 · LEGACY HASH-LINK NAV ─────────────────────────── */
/*
   USAGE — insert ONCE at the start of the document
   (stays fixed across all slides):

   <div class="nav-global">
     <a href="#/0">🏠 HOME</a>
     <a href="#/my-section-id">📌 SECTION</a>
   </div>

   Target IDs are assigned with:
   <!-- .slide: id="my-section-id" -->
*/
.nav-global {
	position:       fixed !important;
	bottom:         var(--nav-bottom) !important;
	right:          var(--nav-right) !important;
	z-index:        99999 !important;
	display:        flex;
	gap:            var(--nav-gap);
	pointer-events: all;
}
.nav-global a {
	background:      var(--overlay-dark);
	color:           white !important;
	padding:         var(--nav-padding);
	border-radius:   var(--nav-radius);
	text-decoration: none;
	font-weight:     bold;
	font-size:       var(--fs-nav);
	transition:      background 0.2s ease;
}
.nav-global a:hover {
	background: var(--accent);
}


/* ── SECTION 3 · LAYOUT — SPLIT ───────────────────────────────── */
/*
   USAGE — side-by-side column layout:

   <div class="split">
     <div class="col-35">...</div>
     <div class="col-65">...</div>
   </div>

   Vertical alignment variants:
   <div class="split align-top">...</div>
   <div class="split align-bottom">...</div>

   Available columns: col-30 col-35 col-40 col-50 col-60 col-65 col-70
   The pair should add up to ~100% minus the gap.
*/
.split {
	display:         flex;
	width:           100%;
	justify-content: space-between;
	align-items:     center;
	gap:             var(--split-gap);
	text-align:      left;
}
.split.align-top    { align-items: flex-start; }
.split.align-bottom { align-items: flex-end; }

.col-30 { width: 30%; min-width: 0; }
.col-35 { width: 35%; min-width: 0; }
.col-40 { width: 40%; min-width: 0; }
.col-50 { width: 50%; min-width: 0; }
.col-60 { width: 60%; min-width: 0; }
.col-65 { width: 65%; min-width: 0; }
.col-70 { width: 70%; min-width: 0; }


/* ── SECTION 4 · IMAGE STACK ───────────────────────────────────── */
/*
   USAGE — overlapping images (auto-animate pattern):

   <div class="img-stack">
     <img class="img-card" style="--rotate: -5deg"                       src="...">
     <img class="img-card" style="--rotate: 3deg;  --stack-top: 10px"   src="...">
     <img class="img-card" style="--rotate: -2deg; --stack-top: 20px"   src="...">
   </div>

   Per-image properties are passed as inline CSS custom properties:
     --rotate       → rotation angle  (default: 0deg)
     --stack-top    → top offset      (default: 0px)
     --stack-shadow → shadow override (optional)
*/
.img-stack {
	position: relative;
	width:    100%;
	height:   var(--img-stack-h);
	margin:   var(--img-stack-margin);
}
.img-card {
	position:      absolute;
	top:           var(--stack-top, 0);
	left:          var(--img-inset-x);
	width:         var(--img-inner-w);
	border:        var(--img-border);
	box-shadow:    var(--stack-shadow, var(--img-shadow));
	border-radius: var(--img-radius);
	transform:     rotate(var(--rotate, 0deg));
}


/* ── SECTION 5 · TYPOGRAPHY & TEXT ────────────────────────────── */
/*
   USAGE — on an inline or block element:
   <p class="body-text">...</p>
   <div class="caption">Film: Title (2021)</div>

   For Reveal.js <!-- .element: class="..." --> annotations:
   Text <!-- .element: class="caption" -->
*/
.body-text    { font-size: var(--fs-body); font-family: var(--font-body); }
.small-text   { font-size: var(--fs-small); }
.caption      { font-size: var(--fs-caption); text-align: right; }
.caption-left { font-size: var(--fs-caption); text-align: left; }

.text-right  { text-align: right  !important; }
.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }


/* ── SECTION 6 · MACRO COMPONENTS ─────────────────────────────── */

/* ·· 6a. Title badge ················································
   Title/heading with semi-transparent background (e.g. on slides
   with a video background)

   USAGE:
   # TITLE
   <!-- .element: class="title-badge" -->

   Dark variant:
   <!-- .element: class="title-badge dark" -->
*/
.title-badge {
	color:          white !important; /* override Reveal.js .has-light-background */
	background:     var(--accent-dim);
	padding:        var(--badge-padding);
	border-radius:  var(--badge-radius);
	display:        inline-block;
}
.title-badge.dark {
	background:     var(--overlay-dark);
}

/* ·· 6b. Highlight inline ···········································
   Inline text with an accent-colored box

   USAGE:
   Word <span class="hl">highlighted</span> in the text.
   Variants: hl-dim  hl-dark
*/
.hl {
	background:    var(--accent);
	color:         #000;
	padding:       0.1em 0.4em;
	border-radius: var(--hl-radius);
	font-weight:   600;
}
.hl-dim {
	background:    var(--accent-dim);
	color:         white;
	padding:       0.1em 0.4em;
	border-radius: var(--hl-radius);
}
.hl-dark {
	background:    var(--overlay-dark);
	color:         white;
	padding:       0.1em 0.4em;
	border-radius: var(--hl-radius);
}

/* ·· 6c. Box ························································
   Bordered/filled container

   USAGE:
   <div class="box">Text or content</div>
   <div class="box accent">Text with accent border</div>
   <div class="box dark">Text with dark background</div>
*/
.box {
	background:    var(--overlay-light);
	border:        1px solid var(--border-subtle);
	border-radius: var(--box-radius);
	padding:       var(--box-padding);
}
.box.accent {
	border-left:   4px solid var(--accent);
	border-top:    none;
	border-right:  none;
	border-bottom: none;
	background:    var(--accent-faint);
}
.box.dark {
	background:    var(--overlay-dark);
	border-color:  transparent;
}

/* ·· 6d. Inline mono font ···········································
   USAGE:
   <code class="mono-inline">value</code>
   or via span for non-code text:
   <span class="mono">variable_name</span>
*/
.mono {
	font-family: monospace;
	font-size:   0.85em;
	background:  var(--overlay-light);
	padding:     0.1em 0.3em;
	border-radius: 3px;
}

.no-header thead { display: none; }

.img-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

/* -- Slide type: full-height sidebar --------------------------------
 * Usage: <!-- .slide: class="slide-sidebar" -->
 * Override sidebar colors per-slide via inline custom property
 * on the col-35 div: style="--sidebar-bg: #1a1a2e;"
 */
.reveal section.slide-sidebar {
	padding: 0 !important;
}
.reveal section.slide-sidebar .split {
	position: absolute;
	inset: 0;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
}
.reveal section.slide-sidebar .col-35 {
	background: var(--sidebar-bg, #3a3a3a);
	color: var(--sidebar-color, white) !important;
	padding: 60px 45px;
	box-sizing: border-box;
	flex-shrink: 0;
	overflow-y: hidden;
}
.reveal section.slide-sidebar .col-65 {
	padding:    60px 45px;
	box-sizing: border-box;
	overflow-y: hidden;
}

/* -- Containing block for absolute children (e.g. .mag-gallery-wrap) -
 * Without position: relative, any position: absolute descendant would
 * anchor to .split (position: absolute, covers the whole slide) instead
 * of the column. Covers all col-* widths generically.
 */
.reveal section.slide-sidebar .split > div {
	position: relative;
}

.reveal section.slide-sidebar .split,
.reveal section.slide-sidebar .col-35,
.reveal section.slide-sidebar .col-65 {
	touch-action: none;
}


/* -- Spacers -------------------------------------------------------- */
.gap-xs { display: block; height: 12px; }
.gap-sm { display: block; height: 30px; }
.gap-md { display: block; height: 60px; }
.gap-lg { display: block; height: 120px; }


/* -- Table: fixed column widths via wrapper -------------------------
 * Usage: wrap markdown table in <div class="table-spec">
 * Override widths per-table: style="--col-1: 45%; --col-2: 55%;"
 */
.table-spec table {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto;
}
.table-spec table th:nth-child(1),
.table-spec table td:nth-child(1) { width: var(--col-1, 35%); }
.table-spec table th:nth-child(2),
.table-spec table td:nth-child(2) { width: var(--col-2, 65%); }
.table-spec table th:nth-child(3),
.table-spec table td:nth-child(3) { width: var(--col-3, auto); }



/* -- SVG background with pixel-precise coordinate mapping ----------
 * Requires: SVG viewBox starting at 0 0
 * The 0,0→1920,1080 region maps exactly to the slide area.
 * SVG content beyond those coordinates overflows (clipped by Reveal.js).
 * Usage: <!-- .slide: class="slide-full" -->
 *        <img src="file.svg" class="bg-svg">
 */
.reveal section.slide-full .bg-svg {
	position:  absolute;
	top:       0;
	left:      0;
	width:     1920px;
	height:    1080px;
	z-index:   -1;
	object-fit:      none;
	object-position: top left;
}

/* -- Disable Reveal.js automatic text color based on bg value ------
 * Reveal.js adds .has-dark-background / .has-light-background
 * automatically and overrides text color. This block disables it.
 * Text color is controlled explicitly via CSS classes only.
 */
.reveal.has-dark-background,
.reveal.has-dark-background h1,
.reveal.has-dark-background h2,
.reveal.has-dark-background h3,
.reveal.has-dark-background h4,
.reveal.has-dark-background h5,
.reveal.has-dark-background h6,
.reveal.has-light-background,
.reveal.has-light-background h1,
.reveal.has-light-background h2,
.reveal.has-light-background h3,
.reveal.has-light-background h4,
.reveal.has-light-background h5,
.reveal.has-light-background h6 {
	color: inherit;
}

/* ── SECTION 7 · GLOBAL NAV PILL ──────────────────────────────────
 * All sizing/position parameters are in the :root block below.
 * Edit only that block — the CSS rules below consume vars directly.
 */

/* -- Tokens -------------------------------------------------------- */
:root {
	/* Position — top-left anchor */
	--gnav-top:          14px;
	--gnav-left:         14px;
	--gnav-height:       26px;

	/* Pill shape */
	--gnav-padding-v:    5px;   /* vertical padding   (controls pill height) */
	--gnav-padding-h:    14px;  /* horizontal padding (left/right inner margin) */

	/* Button box */
	--gnav-btn-size:     24px;  /* width = height (square) */
	--gnav-btn-radius:   5px;   /* corner radius of each button */
	--gnav-gap:          10px;  /* gap between buttons */

	/* Icon */
	--gnav-icon-size:    24px;
	--gnav-icon-color:   white;
}

/* -- Rules --------------------------------------------------------- */
.global-nav {
	position:        fixed;
	top:             var(--gnav-top);
	left:            var(--gnav-left);
	z-index:         99999;
	display:         flex;
	align-items:     center;
	gap:             var(--gnav-gap);
	padding:         var(--gnav-padding-v) var(--gnav-padding-h);
	background:      rgba(0, 0, 0, 0.50);
	border-radius:   999px;
	pointer-events:  all;
	backdrop-filter: blur(4px);
	height:          var(--gnav-height);
}

.global-nav a {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var(--gnav-btn-size);
	height:          var(--gnav-btn-size);
	border-radius:   var(--gnav-btn-radius);
	text-decoration: none;
	transition:      background 0.2s ease;
	flex-shrink:     0;
}

.global-nav a:hover  { background: rgba(255, 255, 255, 0.20); }
.global-nav a.active { background: rgba(255, 255, 255, 0.12); }

.global-nav svg {
	width:   var(--gnav-icon-size);
	height:  var(--gnav-icon-size);
	fill:    var(--gnav-icon-color);
	display: block;
}

.gnav-sep {
	width:      1px;
	height:     var(--gnav-icon-size);
	background: rgba(255, 255, 255, 0.20);
	flex-shrink: 0;
	margin:     0 3px;
}

/* -- Hide default Reveal.js plugin toolbar ------------------------- */
.slide-menu-button { display: none !important; }
#customcontrols    { display: none !important; }


/* -- Absolute overlay element --------------------------------------
 * Usage: <img class="overlay" style="--ov-top: 120px; --ov-left: 640px; --ov-w: 200px;">
 */
.overlay {
	position: absolute;
	z-index:  10;
	top:      var(--ov-top,  0px);
	left:     var(--ov-left, 0px);
	width:    var(--ov-w,    auto);
	height:   var(--ov-h,    auto);
}

/* -- Global footer copyright bar -----------------------------------
 * Fixed, centered, bottom of viewport.
 * Tokens:
 *   --gfooter-bottom        offset from bottom  (default: -8px)
 *   --gfooter-padding       pill padding        (default: 10px 22px)
 *   --gfooter-font-size     text size           (default: 15px)
 *   --gfooter-color         text color          (default: white)
 *   --gfooter-bg            background          (default: rgba(0,0,0,1.00))
 */
.global-footer {
	position:        fixed;
	bottom:          var(--gfooter-bottom,    -8px);
	left:            50%;
	transform:       translateX(-50%);
	z-index:         99999;
	padding:         var(--gfooter-padding,   10px 22px);
	background:      var(--gfooter-bg,        rgba(0, 0, 0, 1.00));
	border-radius:   10px;
	font-size:       var(--gfooter-font-size, 15px);
	color:           var(--gfooter-color,     white);
	white-space:     nowrap;
	pointer-events:  none;
	backdrop-filter: blur(4px);
	font-family:     var(--r-main-font, sans-serif);
}

.global-footer strong {
	font-weight: 700;
}

/* -- Global logo (slide-anchored, NOT viewport-anchored) -----------
 * Unlike .global-nav / .global-footer (appended to document.body,
 * anchored to the browser viewport), this is appended to
 * .reveal .slides — the element Reveal.js actually transform-scales.
 * Result: the logo moves and resizes WITH the slide canvas, but
 * still persists across every slide change.
 *
 * Color/variant is swapped per-slide via JS (see cycling.js),
 * controlled with:
 *   <!-- .slide: data-logo="orange" -->
 *   <!-- .slide: data-logo="none" -->     (hide on slides where the
 *                                          logo is already baked
 *                                          into the background image)
 * Default variant (no annotation) is set in cycling.js.
 */
.global-logo {
	position:       absolute;
	bottom:         var(--logo-bottom, 32px);
	left:           var(--logo-left,   32px);
	width:          var(--logo-w,      90px);
	z-index:        9999;
	pointer-events: none;
}

/* -- Display text block --------------------------------------------
 * Heading font, multi-line, controllable size.
 * Usage: <p class="display-text" style="--display-fs: 2em;">...</p>
 */
.display-text {
	font-family: var(--r-heading-font);
	font-weight: var(--r-heading-font-weight, 900);
	font-size:   var(--display-fs, 1.5em);
	line-height:  var(--display-lh,  1.2) !important;
}

/* -- Hyperlinks -----------------------------------------------------
 * Hairline underline, same color as text — no color change.
 * Dark purple on hover, underline always visible.
 */
.reveal a {
	color:                     inherit;
	text-decoration:           underline;
	text-decoration-color:     currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset:     3px;
	transition:                color 0.2s ease, text-decoration-color 0.2s ease;
}
.reveal a:hover {
	color:                 var(--color-purple, #5b2d8e);
	text-decoration-color: var(--color-purple, #5b2d8e);
}

/* -- Hyperlink tooltip ----------------------------------------------
 * Custom styled tooltip via data-tooltip attribute.
 * Usage: <a href="..." data-tooltip="Tooltip text">link</a>
 */
.reveal a[data-tooltip] {
	position: relative;
}
.reveal a[data-tooltip]::after {
	content:          attr(data-tooltip);
	position:         absolute;
	bottom:           calc(100% + 6px);
	left:             50%;
	transform:        translateX(-50%);
	background:       var(--overlay-dark);
	color:            white;
	font-size:        var(--fs-small);
	font-family:      var(--font-body);
	white-space:      nowrap;
	padding:          6px 12px;
	border-radius:    6px;
	pointer-events:   none;
	opacity:          0;
	transition:       opacity 0.2s ease;
	z-index:          9999;
}
.reveal a[data-tooltip]:hover::after {
	opacity: 1;
}

/* -- Bordered image frame ------------------------------------------
 * Combined selector [0,2,1] beats .mag-gallery-frame img [0,1,1]
 * in template-gallery.css, so object-fit override works without
 * !important. width/height: auto lets the image size to its natural
 * ratio — border then sits exactly on the visible image edge.
 * Usage: <div class="mag-gallery-frame img-bordered"
 *              style="--border-w: 2px; --border-color: #ffffff;">
 */
.mag-gallery-frame.img-bordered {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--img-border-bg, transparent);
}
.mag-gallery-frame.img-bordered img,
.mag-gallery-frame.img-bordered video {
	object-fit: unset;
	width:      auto;
	height:     auto;
	max-width:  100%;
	max-height: 100%;
	display:    block;
	border:     var(--border-w, 2px) solid var(--border-color, #ffffff);
	box-sizing: border-box;
}

/* -- Frame aspect ratio control ------------------------------------
 * Forces the frame to a specific ratio so object-fit: contain fills
 * it exactly with no letterbox — border then sits on the image edge.
 * Usage: style="--frame-ratio: 16/9;"  or  "4/3"  or  "3/2"
 */
.mag-gallery-frame[style*="--frame-ratio"] {
	aspect-ratio: var(--frame-ratio);
	flex:         none;
	width:        100%;
	height:       auto;
	align-self:   center;
}