/*
** deck-byu-theme.css
** Design override for zenomt/mdslides — load AFTER deck.css
**
**   <link rel="stylesheet" href="deck.css" />
**   <link rel="stylesheet" href="deck-byu-theme.css" />
**
** Only values that differ from deck.css defaults are set here.
**
** ── Palette ────────────────────────────────────────────────────────────────
**
**  Background   #0a1a35   deep navy           —
**  Surface      #0f2245   lifted navy         title slide
**  Accent       #d4af6a   warm gold           8.37:1 vs bg  — WCAG AAA
**  Accent-dim   #a8844a   darker gold         rules/borders
**  Body text    #f0ede6   warm off-white     14.82:1 vs bg  — WCAG AAA
**  Muted        #8a93b2   slate blue-grey     5.69:1 vs bg  — WCAG AA
**  Code bg      #061025   near-black navy
**  Divider bg   #d1ccbd   BYU Light Sand
**  Divider text #002e5d   BYU Navy            8.45:1 vs divider bg — WCAG AAA
**
** ── Fonts (all system fonts — no network required) ─────────────────────────
**
**  Headings : "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif
**  Body     : Georgia, "Times New Roman", serif
**  Code     : "Courier New", Courier, monospace
*/

/* ─── Colour & font foundation ──────────────────────────────────────────── */

:root {
    font-family: Georgia, "Times New Roman", serif;
    color: #f0ede6;
    background: #0a1a35;
}

html, body { background: #0a1a35; }

@media screen {
    article { background: #0a1a35; }
}

/* ─── All slides: dark background, gold left-edge rule ──────────────────── */
/* Use background-color (not the shorthand) so we don't reset background-image
   on section:first-of-type, which sets its own gradient via a more-specific rule. */

section {
    background-color: #0a1a35;
    border-left: 0.5vmin solid #a8844a;
    color: #f0ede6;
}

/* ─── Slide counter: muted colour, serif font ───────────────────────────── */

article > section::before {
    color: #8a93b2;
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-weight: 400;
}

/* ─── Optional data-footer attribute ────────────────────────────────────
   Add data-footer="Your Name · Talk Title" to any <section> to show a
   footer label at bottom-left. deck.css does not define this at all.
*/
section::after {
    content: attr(data-footer);
    position: absolute;
    inset-block-end: 1.8vh;
    inset-inline-start: 1.5vw;
    font-size: 2.0vmin;
    color: #8a93b2;
    line-height: 1;
}

/* ─── Title slide ───────────────────────────────────────────────────────── */

section:first-of-type {
    background-color: #0a1a35;  /* same as all other slides */
    border-left: none;
}

/* The decorative rule sits as a bottom-border on the h1/h2 itself, so it
   always lands directly beneath the title text regardless of layout. */
section:first-of-type h1,
section:first-of-type h2 {
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    border-bottom: 0.25vmin solid #a8844a;
    padding-bottom: 0.6vh;
    margin-bottom: 1.5vh;
}

section:first-of-type p {
    font-style: italic;
    color: #8a93b2;
}

/* deck.css zeroes all margins on title slide children; restore spacing
   so the rule under the h1 is visually separated from the subtitle. */
section:first-of-type > * { margin-bottom: 1.2vh; }
section:first-of-type > :last-child { margin-bottom: 0; }

/* ─── Content slide font size ───────────────────────────────────────────── */
/* deck.css sets 5.0vmin; we scale down slightly for more breathing room. */

section:nth-of-type(n+2) { font-size: 4.5vmin; }

/* Scale body copy and lists relative to the section base size.
   deck.css sets no font-size on p/ul/ol, so they would inherit 4.5vmin
   directly — 0.82em brings them to a comfortable reading size below the title. */
p, ul, ol { font-size: 0.82em; }

/* ─── Headings ──────────────────────────────────────────────────────────── */

h1, h2 {
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    color: #f0ede6;
    padding-bottom: 0.6vh;
    border-bottom: 0.25vmin solid #a8844a;
}

h3 {
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: #d4af6a;
}

/* ─── Lists: em-dash markers in gold ────────────────────────────────────── */
/* deck.css uses padding-left: 4vw on ul. We suppress the native bullet,
   then use absolute-positioned ::before inside a relatively-positioned li
   so the marker never intrudes on the text column regardless of font size. */

ul { list-style-type: none; }

ul > li {
    padding-left: 2.6vw;
    position: relative;
}

ul > li::before {
    content: '\2014';   /* em dash */
    color: #d4af6a;
    position: absolute;
    left: 0;
    width: 2.2vw;
}

ul > li > ul { list-style-type: none; }

ul > li > ul > li::before {
    content: '\00b7';   /* middle dot */
    color: #8a93b2;
}

/* ─── Section-divider slides (lone h1 or h2) ────────────────────────────
   Any content slide with only a single heading renders as a full-bleed
   section break: warm sand background, BYU navy text. No classes needed.
*/

section:nth-of-type(n+2):has(> h1:only-child),
section:nth-of-type(n+2):has(> h2:only-child) {
    display: grid;
    place-content: center;
    text-align: center;
    background: #d1ccbd;
    border-left: none;
}

section:nth-of-type(n+2):has(> h1:only-child) h1,
section:nth-of-type(n+2):has(> h2:only-child) h2 {
    color: #002e5d;
    font-size: 1.6em;
    border-bottom: none;
    padding-bottom: 0;
}

section:nth-of-type(n+2):has(> h1:only-child)::before,
section:nth-of-type(n+2):has(> h2:only-child)::before {
    color: #002e5d;
    opacity: 0.4;
}

/* ─── Inline emphasis ───────────────────────────────────────────────────── */

strong { color: #d4af6a; }

/* ─── Code ──────────────────────────────────────────────────────────────── */

pre {
    background: #061025;
    border: 0.2vmin solid #1a2f55;
    border-left: 0.5vmin solid #a8844a;
    border-radius: 0 0.3vmin 0.3vmin 0;
    color: #c8d0e8;
    font-family: "Courier New", Courier, monospace;
}

code {
    background: #061025;
    color: #d4af6a;
    font-family: "Courier New", Courier, monospace;
}

pre code {
    background: none;
    color: inherit;
}

/* ─── Blockquotes & citations ──────────────────────────────────────────── */

blockquote {
    border-left-color: #a8844a;
    background: rgba(212, 175, 106, 0.07);
    color: #f0ede6;
    /* Zero browser default margins (40px left/right, 1em top/bottom) */
    margin: 0;
}

/* <cite> after a blockquote: close the gap and match blockquote indentation.
   deck.css gives non-first section children margin-inline: 2.5vw, and the
   blockquote itself gets padding-left from deck.css's blockquote rule.
   The p wrapping cite needs to mirror that so the dash aligns with the quote. */
blockquote + p {
    margin-top: 0;
    margin-bottom: 0;
    margin-inline: 2.5vw;
    padding-left: 0.75vw; /* align with blockquote border-left inset */
}

/* On figure slides, margin-inline is already zeroed on all non-figure children,
   so match that and rely only on the padding to align with the blockquote. */
section:nth-of-type(n+2):has(> figure) blockquote + p {
    margin-inline: 0 !important;
    padding-left: 0.75vw;
}

/* The cite element itself */
cite {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.75em;
    color: #8a93b2;
    display: block;
}

/* Em dash before the citation */
cite::before {
    content: '— '; /* em dash + non-breaking space */
    color: #a8844a;
    font-style: normal;
}

/* cite inside figcaption: smaller, no dash, inherits figcaption styling */
figcaption cite {
    font-size: 0.9em;   /* relative to figcaption's already-small size */
    color: #8a93b2;
    display: block;
    margin-top: 0.4vh;
    word-break: break-all;  /* long URLs won't overflow the figure column */
}

figcaption cite::before {
    content: none;
}

/* ─── Tables ────────────────────────────────────────────────────────────── */

table { color: #f0ede6; }

thead { border-bottom-color: #a8844a; }

th {
    color: #d4af6a;
    font-style: italic;
}

td { border-color: #1a2f55; }

/* ─── Links ─────────────────────────────────────────────────────────────── */

a {
    color: #d4af6a;
    border-bottom: 0.12vmin solid rgba(212, 175, 106, 0.4);
    text-decoration: none;
}

/* ─── Figure + text grid layout ─────────────────────────────────────────────
   Any content slide containing a <figure> automatically becomes a two-column
   grid: figure on the left, content on the right.
   No classes, no inline styles, no wrapper divs needed.

   Expected slide structure (exactly one figure, one content element after title):

     # Slide Title

     <figure>
     <img src="photo.jpg" alt="description" />
     <figcaption>Caption text here</figcaption>
     </figure>

     * Bullet one
     * Bullet two

   The content after the figure may be a <ul>, <ol>, or <p>.
   For image on the right, add class="fig-right" to the <figure>.

   Grid layout:
     Row 1: title spans both columns
     Row 2: figure in col-left | content in col-right

   The key insight: we use named grid-template-areas so each element is
   placed explicitly by name, not by source order or nth-child arithmetic.
*/

/* ─── Figure + text grid layout ─────────────────────────────────────────────
   Any content slide containing a <figure> gets a two-column layout.

   Source structure:

     # Slide Title

     <figure>
     <img src="photo.jpg" alt="…" />
     <figcaption>Caption</figcaption>
     </figure>

     Any number of content children (blockquote, ul, ol, p) follow.
     No wrapper div needed — the figure spans the full content height
     in column 1 while all siblings flow into column 2.

   For image on the right, add class="fig-right" to <figure>.

   Approach: explicit grid-column/grid-row on the figure pin it to
   column 1 across all content rows. The title spans both columns in
   row 1 via grid-column. All other children auto-place into column 2,
   stacking naturally in successive rows.
*/

section:nth-of-type(n+2):has(> figure) {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    /* title row auto-sized; remaining rows share leftover space equally */
    grid-auto-rows: 1fr;
    grid-template-rows: auto;
    column-gap: 5vw;
    row-gap: 0;
    align-content: stretch;
    /* Cancel deck.css flex centring margins on this slide type */
    justify-content: start;
}

/* Cancel deck.css auto-margin flex-centring trick for figure slides */
section:nth-of-type(n+2):has(> figure) > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: none;
}

/* Title: span both columns, row 1 */
section:nth-of-type(n+2):has(> figure) > :first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    margin-bottom: 0;
    width: 100%;
}

/* Figure: column 1, span from row 2 to end of all rows */
section:nth-of-type(n+2):has(> figure) > figure {
    grid-column: 1;
    grid-row: 2 / -1;
    margin: 0;
    margin-inline: 0;
    align-self: center;   /* centre within the spanned rows */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vh;
}

/* All other children: column 2, auto-placed into successive rows from row 2 */
section:nth-of-type(n+2):has(> figure) > :not(:first-child):not(figure) {
    grid-column: 2;
    margin-inline: 0;
    padding-right: 2vw;
    align-self: center;
    min-width: 0;        /* prevent grid item from overflowing its column */
    overflow-wrap: break-word;
}

section:nth-of-type(n+2):has(> figure) figure img {
    width: 100%;
    max-height: 65vh;
    object-fit: contain;
    padding: 0;
}

figcaption {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.55em;
    font-style: italic;
    color: #8a93b2;
    text-align: center;
    line-height: 1.4;
}

/* fig-right: figure goes to column 2, content to column 1 */
section:nth-of-type(n+2):has(> figure.fig-right) {
    grid-template-columns: 1.8fr 1fr;
}

section:nth-of-type(n+2):has(> figure.fig-right) > figure {
    grid-column: 2;
}

section:nth-of-type(n+2):has(> figure.fig-right) > :not(:first-child):not(figure) {
    grid-column: 1;
}