/* ================================================================
   slides.css
   Fonts: Outfit (headings) · Inter (body) · JetBrains Mono (code)
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:ital,wght@0,300;0,400;0,500;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ── Design tokens ────────────────────────────────────────────── */
:root {
  --navy:        #1B2D5E;
  --navy-mid:    #243674;
  --blue:        #2563EB;
  --blue-light:  #c7d8fc;
  --teal:        #0891B2;
  --amber:       #F59E0B;
  --red:         #DC2626;
  --red-light:   #FEEBE7;
  --green:       #F59E0B; /*#096e26*/
  --green-light: #ffeed1; /*#b8f5c9*/
  --grey:        #64748B;
  --grey-light:  #F1F5F9;
  --light:       #F8FAFC;
  --white:       #FFFFFF;
  --text:        #1E293B;
  --text-mid:    #475569;
  --text-muted:  #94A3B8;
  --border:      #E2E8F0;
  --code-bg:     #F1F5F9;
}

/* ================================================================
   1 · BASE SLIDE
   ================================================================ */

.remark-slide-content {
  font-family: 'Inter', sans-serif;
  font-size: 20px; /* intially set at 17px */
  line-height: 1.3; /* initially set at 1.7 */
  color: var(--text);
  background-color: var(--white);
  padding: 2em 3.5em 2.5em;
  border-top: 5px solid var(--navy);
  position: relative;          /* containing block for absolute children */
  overflow: hidden;   /* to prevent left image scaling with right content over-runs */
}

.remark-slide-number {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  bottom: 14px;
  right: 22px;
}

/* ================================================================
   2 · TYPOGRAPHY
   ================================================================ */

h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--navy);
  margin-top: 0;
  margin-bottom: 0.45em;
  line-height: 1.25;
}

h1 {
  font-size: 1.9em;
  padding-bottom: 0.1em; /* 0.3 em */
  border-bottom: 3px solid var(--blue);
  margin-bottom: 0.75em;
}

h2 {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--navy-mid);
}

h3 {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--blue);
}

h4 {
  font-size: 1.1em; /* originally 0.92 em */
  font-weight: 600;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

p { margin: 0 0 0.8em; }

ul, ol {
  padding-left: 1.4em;
  margin: 0.25em 0 0.75em;
}

li              { margin-bottom: 0.4em; }
li > ul,
li > ol         { margin-top: 0.3em; }

strong          { font-weight: 600; color: var(--blue); } /* originally --navy */
em              { font-style: italic; color: var(--text-mid); }

a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid var(--blue);
}
a:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

blockquote {
  margin: 0.8em 0;
  padding: 0.6em 1.2em;
  border-left: 4px solid var(--blue);
  background-color: var(--light);
  border-radius: 0 5px 5px 0;
  color: var(--text-mid);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1.5px solid var(--border);
  margin: 1em 0;
}

/* ================================================================
   3 · CODE
   ================================================================ */

.remark-inline-code,
code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.83em;
  background-color: var(--code-bg);
  border-radius: 4px;
  padding: 0.15em 0.45em;
  color: #B91C1C;
}

pre {
  background-color: var(--code-bg);
  border-radius: 6px;
  border-left: 4px solid var(--blue);
  padding: 0.9em 1.1em;
  overflow-x: auto;
  margin: 0.5em 0 0.9em;
}

pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--text);
}

.remark-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78em;
  line-height: 1.5;
}

.remark-code-line-highlighted {
  background-color: rgba(37, 99, 235, 0.13);
}

/* ================================================================
   4 · TABLES
   Clean & uncluttered — bold header row, thick rule beneath header
   ================================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.88em;
  margin: 0.5em 0 1em;
}

/* ── Header row ─────────────────────────────────────────────── */
thead tr th {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9em;
  text-align: left;
  color: var(--navy);
  padding: 0.6em 1em;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid var(--navy); /* thick rule below header */
}

/* ── Body rows ──────────────────────────────────────────────── */
tbody tr td {
  padding: 0.55em 1em;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

tbody tr:nth-child(even) td { background-color: var(--light); }
tbody tr:last-child td      { border-bottom: none; }
tbody tr:hover td           { background-color: #EFF6FF; }


/* ── Slightly compact table variant ──────────────────────────────────── */

.scompact-table table {
  font-size: 0.9em;          /* slightly smaller text too   */
  line-height: 1.4;
}

.scompact-table thead tr th {
  padding: 0.4em 0.8em;
}

.scompact-table tbody tr td {
  padding: 0.3em 0.8em;
}

/* ── Compact table variant ──────────────────────────────────── */

.compact-table table {
  font-size: 0.82em;          /* slightly smaller text too   */
  line-height: 1.3;
}

.compact-table thead tr th {
  padding: 0.25em 0.8em;
}

.compact-table tbody tr td {
  padding: 0.2em 0.8em;
}

/* ── Extra-compact table variant ────────────────────────────── */

.xcompact-table table {
  font-size: 0.74em;
  line-height: 1.2;
}

.xcompact-table thead tr th {
  padding: 0.15em 0.65em;
}

.xcompact-table tbody tr td {
  padding: 0.12em 0.65em;
}



/* ================================================================
   5 · TITLE SLIDE
   Styled automatically via seal: true + YAML metadata
   ================================================================ */

.title-slide {
  background-color: var(--navy) !important;
  border-top: none;
  padding: 3em 4em;
}

/*
.title-slide {
  background-color: var(--navy) !important;
  background-image: url('images/attendance_qr.png'); 
  background-repeat: no-repeat;                      
  background-size: auto 40%;                         
  background-position: bottom 2em right 2em;         
  border-top: none;
  padding: 3em 4em;
}
*/

.title-slide h1 {
  font-size: 2.5em;
  font-weight: 800;
  color: var(--white);
  border-bottom: 4px solid var(--amber);
  padding-bottom: 0.25em;
  margin-bottom: 0.3em;
  line-height: 1.15;
}

.title-slide h2 {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.5em;
  font-weight: 400;
  border: none;
  margin-bottom: 2.5em;
}

.title-slide h3,
.title-slide p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 1em;
  font-weight: 400;
  border: none;
  margin-bottom: 0.25em;
}

.title-slide .remark-slide-number { display: none; }

/* ================================================================
   5b · INTRO SLIDE (second title slide)
   ─────────────────────────────────────────────────────────────────
   Left panel (33 %): solid navy background (matches section slides),
   hosting the two QR codes stacked vertically.
   Right panel (67 %): vanta.js "birds" animated background, with
   the title / subtitle / callout layered above it.
   This slide uses raw HTML in the .Rmd — see template.
   Do NOT add .callout-bottom to the callout inside this slide;
   the flex layout pushes it to the bottom automatically.
   ================================================================ */

.intro-slide {
  padding:  0 !important;
  position: relative;
}

/* ── Left panel — solid colour, QR codes stacked vertically ────── */

.intro-slide .intro-left {
  position:        absolute;
  top:             0;
  left:            0;
  bottom:          0;
  width:           33%;
  overflow:        hidden;
  box-sizing:      border-box;
  box-shadow:      4px 0 20px rgba(27, 45, 94, 0.18);

  /* Solid background matching the section-slide colour */
  background-color: var(--navy);

  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     stretch;
  gap:             2.5em;
  padding:         2.5em 2.5em;
}

.intro-slide .intro-left .qr-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.intro-slide .intro-left .qr-caption {
  font-family: 'Inter', sans-serif;
  font-size:   0.85em;
  font-weight: 600;
  color:       rgba(255, 255, 255, 0.80);
  margin:      0 0 0.6em 0;
  text-align:  center;
  line-height: 1.3;
}

.intro-slide .intro-left .qr-item img {
  display:          block;
  width:            85%;        /* was 70% */
  max-width:        230px;      /* was 180px */
  aspect-ratio:     1 / 1;
  object-fit:       contain;
  background-color: var(--white);
  border-radius:    6px;
  padding:          0.5em;
}

/* ── Right panel — vanta.js animated background ─────────────────── */

.intro-slide .intro-right {
  position:  absolute;
  left:      33%;
  right:     0;
  top:       0;
  bottom:    0;
  overflow:  hidden;
  background-color: white; /* fallback while vanta.js loads */
}

.intro-slide .intro-right {
  position: absolute; /* already set */
  ...
}

.intro-slide .intro-right canvas {
  position: absolute !important;
  top: 0; left: 0;
  z-index: 1;
}

/* Content sits above the vanta canvas, which vanta.js injects   */
/* as an absolutely-positioned child of #vanta-bg / .intro-right */
.intro-slide .intro-right-content {
  position:        relative;
  z-index:         2;
  height:          100%;
  padding:         2em 3em 1.8em 3em;
  display:         flex;
  flex-direction:  column;
  box-sizing:      border-box;
}

/* Title — light text, since it now sits over an animated bg */
.intro-slide .intro-right-content h1 {
  font-size:     3em;
  margin-top:    0;
  margin-bottom: 0.2em;
  color:         var(--navy);
  border-bottom: 3px solid var(--amber);
}

/* Subtitle */
.intro-slide .intro-right-content h2 {
  font-size:     1.05em;
  font-weight:   400;
  color:         var(--amber);
  border:        none;
  margin-top:    0;
  margin-bottom: 0;
}

/* Flexible spacer — pushes the callout to the bottom */
.intro-slide .intro-spacer {
  flex: 1;
}

/* ── Callout — cancel default vertical margins, ensure contrast ── */

.intro-slide .intro-right-content .callout-question {
  margin-top:        0;
  margin-bottom:     0;
}

/* ================================================================
   6 · SECTION SLIDES   ·   class: section [, middle]
   ─────────────────────────────────────────────────────────────────
   Usage
   -----
     ---
     class: section, middle

     # Part 1: Topic Name
     ## Optional sub-heading
   ================================================================ */

.section {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
  border-top: none;
  padding: 2.5em 4em;
}

.section h1 {
  font-size: 2.3em;
  font-weight: 800;
  color: var(--white);
  border-bottom: none;
  line-height: 1.2;
  margin-bottom: 0;
}

/* Amber accent bar beneath the section heading */
.section h1::after {
  content:          '';
  display:          block;
  width:            calc(90% + 7.2em);  /* was calc(100% + 8em) */
  height:           5px;
  background-color: var(--amber);
  border-radius:    0;
  margin-top:       0.45em;
  margin-left:      -4em;
}



/*
.section h2 {
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.05em;
  font-weight: 400;
  border: none;
  margin-top: 1em;
}
*/

.section h2 {
  color: rgba(255, 255, 255, 0.62);
  font-size: 2em;    /* larger */
  font-weight: 500;    /* slightly bolder to match */
  border: none;
  margin-top: 0.25em;  /* tighten the gap slightly if needed */
}

.section h3 {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.95em;
  border: none;
}

.section p,
.section li              { color: rgba(255, 255, 255, 0.65); }
.section .remark-slide-number { color: rgba(255, 255, 255, 0.28); }

/* ================================================================
   7 · IMAGE-LEFT SLIDES   ·   class: image-left
   ─────────────────────────────────────────────────────────────────
   Basic usage
   ────────────
     ---
     class: image-left

     .left-panel[
     ![Alt text](path/to/image.jpg)
     ]

     # Slide Title
     Content in the right 75 %.

   Modifier cheat-sheet
   ─────────────────────────────────────────────────────────────────
   Image fit / position (chain onto .left-panel):
     (none)           crop-to-fill, centred          ← default
     .top             crop-to-fill, anchored top
     .bottom          crop-to-fill, anchored bottom
     .contain         whole image, navy letterbox
     .contain-light   whole image, white letterbox
     .pad             whole image, white bg + padding

   Background — text or image content:
     .navy            navy background, white text
     .amber           amber background, navy text

   Modifiers are combinable:
     .left-panel.navy.top       navy bg + image anchored top
     .left-panel.amber.bottom   amber bg + image anchored bottom
     .left-panel.contain.top    navy letterbox + image anchored top

   .left-panel[ ] must be the FIRST element on the slide.
   ================================================================ */

/* ── 7.1  Base layout ────────────────────────────────────────── */

.image-left {
  padding-left: calc(25% + 3em) !important;
  position: relative;
}

.image-left .left-panel {
  position:   absolute;
  top:        0;
  left:       0;
  bottom:     0;
  width:      25%;
  margin:     0;
  padding:    0;
  overflow:   hidden;
  box-sizing: border-box;
  box-shadow: 4px 0 20px rgba(27, 45, 94, 0.18);
}

.image-left .left-panel p {
  height:  100%;
  margin:  0;
  padding: 0;
}

/* Default: crop to fill, anchored centre */
.image-left .left-panel img {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}

/* ── 7.2  Position modifiers ─────────────────────────────────── */
/*  Work with the default crop-to-fill behaviour and with         */
/*  .contain / .contain-light. Compatible with .navy and .amber.  */

.image-left .left-panel.top    img { object-position: top;    }
.image-left .left-panel.bottom img { object-position: bottom; }

/* ── 7.3  Image fit modifiers ────────────────────────────────── */

/* Whole image visible — navy letterbox (background on container) */
.image-left .left-panel.contain {
  background-color: var(--navy);
}

.image-left .left-panel.contain img {
  object-fit: contain;
}

/* Whole image visible — white letterbox */
.image-left .left-panel.contain-light {
  background-color: var(--white);
}

.image-left .left-panel.contain-light img {
  object-fit: contain;
}

/* Whole image visible — white bg with internal padding */
.image-left .left-panel.pad {
  background-color: var(--white);
  padding:          1.5em;
}

.image-left .left-panel.pad img {
  object-fit: contain;
}

/* ── 7.4  Background modifiers — shared structure ────────────── */
/*  Applies to both .navy and .amber.                             */

.image-left .left-panel.navy,
.image-left .left-panel.amber {
  padding:         2em 1.4em;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

/* Images inside background panels — contained, no bg on img */
.image-left .left-panel.navy  img,
.image-left .left-panel.amber img {
  object-fit:       contain;
  background-color: transparent;
  width:            100%;
  height:           100%;
}

/* ── 7.4a  Navy panel ────────────────────────────────────────── */

.image-left .left-panel.navy {
  background-color: var(--navy);
}

.image-left .left-panel.navy h1,
.image-left .left-panel.navy h2,
.image-left .left-panel.navy h3,
.image-left .left-panel.navy h4 {
  color:         var(--white);
  border-bottom: none;
}

.image-left .left-panel.navy p,
.image-left .left-panel.navy li    { color: rgba(255, 255, 255, 0.80); }
.image-left .left-panel.navy strong { color: var(--white);              }
.image-left .left-panel.navy em     { color: rgba(255, 255, 255, 0.65); }
.image-left .left-panel.navy .muted { color: rgba(255, 255, 255, 0.42); }

.image-left .left-panel.navy a {
  color:               var(--amber);
  border-bottom-color: var(--amber);
}

.image-left .left-panel.navy blockquote {
  background-color:  rgba(255, 255, 255, 0.08);
  border-left-color: var(--amber);
  color:             rgba(255, 255, 255, 0.75);
}

.image-left .left-panel.navy code {
  background-color: rgba(255, 255, 255, 0.12);
  color:            rgba(255, 255, 255, 0.90);
}

/* ── 7.4b  Amber panel ───────────────────────────────────────── */

.image-left .left-panel.amber {
  background-color: var(--amber);
}

.image-left .left-panel.amber h1,
.image-left .left-panel.amber h2,
.image-left .left-panel.amber h3,
.image-left .left-panel.amber h4 {
  color:         var(--navy);
  border-bottom: none;
}

.image-left .left-panel.amber p,
.image-left .left-panel.amber li     { color: var(--navy);               }
.image-left .left-panel.amber strong  { color: var(--navy);               }
.image-left .left-panel.amber em      { color: rgba(27, 45, 94, 0.70);   }
.image-left .left-panel.amber .muted  { color: rgba(27, 45, 94, 0.50);   }

.image-left .left-panel.amber a {
  color:               var(--navy);
  border-bottom-color: var(--navy);
}

.image-left .left-panel.amber blockquote {
  background-color:  rgba(27, 45, 94, 0.10);
  border-left-color: var(--navy);
  color:             var(--navy);
}

.image-left .left-panel.amber code {
  background-color: rgba(27, 45, 94, 0.10);
  color:            var(--navy);
}

/* Suppress the empty <p> that remark.js inserts between        */
/* the .left-panel[] block notation and the first heading.      */
/* The adjacent sibling combinator ensures only the <p>         */
/* immediately after .left-panel is affected — no other         */
/* paragraph content on the slide is touched.                   */
.image-left .left-panel + p:empty {
  display: none;
  margin:  0;
  padding: 0;
}

.image-left {
  padding-top: 1.2em !important; /* 2em base − ~0.8em surplus = 1.2em */
}

/* ── Vertical text alignment within .navy / .amber panels ──── */
/* Chain onto .left-panel alongside .navy or .amber              */

.image-left .left-panel.align-top {
  justify-content: flex-start;
}

.image-left .left-panel.align-bottom {
  justify-content: flex-end;
}

/* ================================================================
   8 · UTILITY CLASSES
   ================================================================ */

/* ── Callout boxes ──────────────────────────────────────────── */

/* Shared structure                                             */
/* left padding = original gap (1.1em) + icon (1.35em)        */
/*                + gap between icon and text (0.75em) = 3.2em */
.callout,
.callout-warn,
.callout-question,
.callout-ref {
  display:       block;
  position:      relative;
  border-radius: 0 6px 6px 0;
  padding:       0.5em 1.1em 0.5em 4.3em; /* top and bottom initially 0.7em; must update last term if changing icon size */
  margin:        0.7em 0;
  font-size:     0.93em;
  line-height:   1.5;
}

/* Icon — absolutely positioned inside the left padding area   */
.callout::before,
.callout-warn::before,
.callout-question::before,
.callout-ref::before {
  content:             '';
  position:            absolute;
  left:                1.1em;    /* flush with the original left padding  */
  top:                 0.82em;   /* optical alignment with cap-height     */
  width:               2.4em;    /* size of icon */
  height:              2.4em;
  background-repeat:   no-repeat;
  background-size:     contain;
  background-position: center top;
}

/* .callout — definition / key fact */
.callout {
  background-color: var(--blue-light);
  border-left:      4px solid var(--blue);
}

.callout::before {
  background-image: url('images/callout.svg');
}

/* .callout-warn — warning / common pitfall */
.callout-warn {
  background-color: var(--red-light); /*#FFFBEB*/
  border-left:      4px solid var(--red);
}

.callout-warn::before {
  background-image: url('images/callout-warn.svg');
}

/* .callout-question — audience question */
.callout-question {
  background-color: var(--green-light);
  border-left:      4px solid var(--green);
}

.callout-question::before {
  background-image: url('images/callout-question.svg');
}


/* .callout-ref — references / citations */
.callout-ref {
  background-color: var(--grey-light);
  border-left:      4px solid var(--grey);
}

.callout-ref::before {
  background-image: url('images/callout-ref.svg');
}


/* ── Bottom-pinned callout modifier ─────────────────────────── */
/* Chain with any existing callout type:                         */
/*   .callout.callout-bottom[ ]                                  */
/*   .callout-warn.callout-bottom[ ]                             */
/*   .callout-question.callout-bottom[ ]                         */

.callout-bottom {
  position: absolute;
  bottom:   1.0em;   /* 2.5 em matches the slide's bottom padding     */
  left:     3.5em;   /* matches the slide's left padding       */
  right:    3.5em;   /* matches the slide's right padding      */
  margin:   0;       /* overrides the default top/bottom margin */
}

/* image-left override — aligns to the right-hand 75 % column   */
.image-left .callout-bottom {
  left: calc(25% + 3em);   /* matches the padding-left of .image-left */
}

.callout        strong { color: var(--blue);  }
.callout-warn   strong { color: var(--red);   }
.callout-question strong { color: var(--green); }
.callout-ref strong { color: var(--grey); }


/* ── Boxed content ──────────────────────────────────────────── */

.box {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.85em 1.2em;
  margin: 0.6em 0;
}

/* ── Text size ──────────────────────────────────────────────── */

.small  { font-size: 0.82em; color: var(--text-mid);   }
.xsmall { font-size: 0.72em; color: var(--text-muted); }
.large  { font-size: 1.3em;  }
.xlarge { font-size: 1.7em;  }

/* ── Text colour ────────────────────────────────────────────── */

.text-blue  { color: var(--blue);  }
.text-navy  { color: var(--navy);  }
.text-amber { color: var(--amber); }
.text-teal  { color: var(--teal);  }
.text-red   { color: var(--red);   }
.muted      { color: var(--text-muted); }

/* ── Alignment ──────────────────────────────────────────────── */

.center { text-align: center; }
.right  { text-align: right;  }

/* ── Inline highlight ───────────────────────────────────────── */

.hl {
  background-color: #FEF08A;
  border-radius: 3px;
  padding: 0.05em 0.3em;
}

/* ── Clearfix (float-based two-column) ──────────────────────── */

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Full-height image utilities ────────────────────────────── */

/* Full content area — use on slides with no title              */
.img-full-height img {
  display:    block;
  max-height: calc(min(100vh, 56.25vw) - 4.8em);
  width:      auto;
  max-width:  100%;
  object-fit: contain;
  margin:     0 auto;
}

/* ── Full-height image utilities ─────────────────────────────── */
/* position: absolute works within the slide's own coordinate    */
/* system — unaffected by remark.js transform scaling.           */
/* .remark-slide-content already has position: relative.         */

/* Full content area — slide with no title */
.img-full-height {
  position: absolute;
  top:      2em;    /* matches slide top padding    */
  bottom:   2.5em;  /* matches slide bottom padding */
  left:     3.5em;  /* matches slide left padding   */
  right:    3.5em;  /* matches slide right padding  */
}

.img-full-height p {
  height:  100%;
  margin:  0;
  padding: 0;
}

.img-full-height img {
  display:    block;
/*  width:      100%; */
  height:     100%;
  object-fit: contain;
}

/* Below an h1 title — top offset accounts for padding + h1     */
.img-below-title {
  position: absolute;
  top:      6em;    /* 2em padding + ~4em for h1, margins, border */
  bottom:   2.5em;
  left:     3.5em;
  right:    3.5em;
}

.img-below-title p {
  height:  100%;
  margin:  0;
  padding: 0;
}

.img-below-title img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: contain;
}

/* TO PRINT INCREMENTAL SLIDES TO PDF */

@media print {
  .has-continuation {
    display: block !important;
  }
}