/* ── Variables ───────────────────────────────────────────── */
:root {
  --bg-page:        #6B0000;
  --sidebar-dark:   #5A0000;
  --sidebar-darker: #3D0000;
  --accent:         #1b20bd;
  --accent-light:   #0f2f79;
  --accent-dim:     rgba(0, 153, 255, 0.18);
  --accent-mid:     rgba(0, 153, 255, 0.30);
  --nav-text:       #E8D5D5;
  --nav-text-dim:   rgba(255, 255, 255, 0.38);
  --bg-card:        #ffffff;
  --text:           #222222;
  --text-secondary: #555555;
  --content-width:  calc((68ch + 5.2rem) * 4 / 3); /* ~65-75 char measure, plus the content-card's side padding, x1.33 */
  --box-gap:        4.8rem;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Page ────────────────────────────────────────────────── */
body {
  background-color: var(--bg-page);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Top bar (its own floating box, sized to its content) ──── */
.topbar {
  position: sticky;
  top: 1.2rem;
  z-index: 20;
  margin: 1.4rem auto 1.6rem;
  min-width: min(var(--content-width), calc(100% - 2 * clamp(1rem, 5vw, 4rem)));
  max-width: calc(100% - 2 * clamp(1rem, 5vw, 4rem));
  background: linear-gradient(180deg, var(--sidebar-dark) 0%, var(--sidebar-darker) 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.topbar-nav {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.nav-item a {
  display: flex;
  align-items: center;
  padding: 1.4rem 1.8rem;
  color: var(--nav-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.nav-item a:hover {
  background: rgba(0, 0, 0, 0.22);
  color: #ffffff;
}

/* ── Section jump-links (current page's sections) ───────────── */
.nav-item.section-item a {
  font-style: italic;
  opacity: 0.8;
}

.nav-item.section-item a:hover {
  opacity: 1;
}

.nav-divider {
  align-self: stretch;
  width: 1px;
  margin: 0.7rem 0.2rem;
  background: rgba(255, 255, 255, 0.18);
}

/* ── Hamburger toggle (kicks in once the nav no longer fits) ── */
.nav-toggle-input {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 1.4rem 1.6rem;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nav-text);
  box-shadow: 0 0 3px 1px var(--bg-page), 0 0 6px 2px var(--bg-page);
}

/* ── Page card (content column only) ────────────────────── */
.layout {
  width: var(--content-width);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--box-gap);
  padding-bottom: 2rem;
}

/* A '---' section renders as a row of boxes: normally one, but a section
   with multiple top-level ('# ') headings becomes several boxes placed
   side by side. The row breaks out of --content-width to fit them. */
.box-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* boxes sharing a row match the tallest one */
  gap: var(--box-gap);
  width: 100vw;
  max-width: 96vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* When boxes share a row, each is capped at half the normal content width */
.card-slot {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(var(--content-width) / 2);
  max-width: calc(var(--content-width) / 2);
}

/* A lone box in a row keeps the normal, full content width */
.card-slot:only-child {
  flex-basis: var(--content-width);
  max-width: 100%;
}

/* ── Content card (each box is its own separated card) ─── */
/* --box-bg / --box-color / --box-font-scale are set per-box via an inline
   style attribute, driven by a '// no-box font_size:1.7' directive line at
   the top of the box's markdown source (font_color overrides its default,
   which otherwise matches the menu bar's text color). */
.content-card {
  background: var(--box-bg, var(--bg-card));
  color: var(--box-color, var(--text));
  padding: 2.2rem 2.6rem 2.8rem;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  scroll-margin-top: 7.5rem;
  flex: 1 1 auto; /* fill the row-stretched card-slot */
  display: flex;
  flex-direction: column;
  font-size: calc(1em * var(--box-font-scale, 1));
}

/* Heading stays pinned to the top; the rest of the section stacks below it,
   so when a box-row stretches a shorter card to match its tallest sibling,
   the leftover height falls as blank space after the content instead of
   pushing headings apart to center everything in the extra room. */
.content-card .section-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* The 'no-box' directive drops the card's background, shadow and padding
   so its text sits straight on the page background — same box, just an
   invisible one. Its default text color matches the menu bar's, since
   that's the other text that already sits directly on the page. */
.content-card.no-box {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.content-card.no-box,
.content-card.no-box h1,
.content-card.no-box h2,
.content-card.no-box h3,
.content-card.no-box p,
.content-card.no-box a {
  color: var(--box-color, var(--nav-text));
}

.content-card.no-box a:hover {
  color: var(--box-color, #ffffff);
}

/* h1 sits outside .section-body (see comment below), so a no-box box whose
   only content is its title still has an unclosed margin-bottom hanging
   past the box's visible content, adding to the box-gap the same way the
   section-body first/last-child margins did. */
.content-card.no-box h1 {
  margin-bottom: 0;
}

/* ── Banner (full-bleed) ─────────────────────────────────── */
/* Use ![[image.jpg|banner]] in markdown to activate */
.content-card .banner-image {
  width: calc(100% + 5.2rem);
  margin-left: -2.6rem;
  display: block;
  height: auto;
  margin-bottom: 1.8rem;
}

/* ── Regular inline images ───────────────────────────────── */
.content-card .content-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2rem 0;
}

/* ── Video embeds ─────────────────────────────────────────── */
/* Use ![[video.mp4|banner]] the same way as banner images */
.content-card .banner-video {
  width: calc(100% + 5.2rem);
  margin-left: -2.6rem;
  display: block;
  height: auto;
  margin-bottom: 1.8rem;
}

.content-card .content-video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2rem 0;
}

/* A video that's the sole content of its box (no surrounding text to
   separate from) doesn't need its own extra breathing room on top of the
   box-to-box gap — that stacked up into a visibly bigger gap than any
   other box transition. */
.content-card .section-body > p:only-child > .content-video {
  margin: 0;
}

/* ── Typography ──────────────────────────────────────────── */
.content-card h1 {
  font-size: calc(1.86rem * var(--box-font-scale, 1));
  font-weight: 700;
  color: var(--box-color, var(--accent));
  margin: 1.6rem 0 1rem;
  line-height: 1.25;
}

.content-card h2 {
  font-size: calc(1.29rem * var(--box-font-scale, 1));
  font-weight: 600;
  color: var(--box-color, var(--accent));
  margin-top: 2.2rem;
  margin-bottom: 0.6rem;
}

/* The leading h1 sits outside .section-body, so its bottom margin doesn't
   collapse into the body's first child. Give text the same top margin
   headings already have, so the gap below h1 is the same either way. */
.content-card .section-body > p:first-child,
.content-card .section-body > ul:first-child,
.content-card .section-body > ol:first-child {
  margin-top: 2.2rem;
}

/* No-box sections have no visible boundary, so any margin here shows up as
   extra empty page background stacked on top of the box-gap — unlike a
   bordered box, where it's just padding inside a visible card. A headingless
   no-box section (no h1 to match spacing against) should sit flush with the
   surrounding box-gap instead. */
.content-card.no-box .section-body > *:first-child {
  margin-top: 0;
}

.content-card.no-box .section-body > *:last-child {
  margin-bottom: 0;
}

.content-card h3 {
  font-size: calc(1.13rem * var(--box-font-scale, 1));
  font-weight: 600;
  color: var(--box-color, var(--accent));
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}

.content-card p {
  margin-bottom: 1rem;
  color: var(--box-color, var(--text));
}

.content-card ul,
.content-card ol {
  padding-left: 1.6rem;
  margin-bottom: 1rem;
}

.content-card li {
  margin-bottom: 0.3rem;
}

/* ── Links ───────────────────────────────────────────────── */
.content-card a {
  color: var(--box-color, #0077CC);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-card a:hover {
  color: var(--box-color, var(--accent));
  opacity: 0.8;
}

.broken-link {
  color: var(--text-secondary);
  font-style: italic;
  cursor: default;
}

/* ── Media embed placeholders ────────────────────────────── */
.media-embed {
  background: #f5f5f5;
  border: 2px dashed #cccccc;
  border-radius: 6px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  margin: 1.2rem 0;
  color: #888888;
  font-size: 1.01rem;
}

.media-embed.video-embed {
  border-color: #a0ccd8;
  background: #f0f8fa;
}

.media-embed.photo-embed {
  border-color: #a8bfcc;
  background: #f2f5f8;
}

.media-label {
  font-style: italic;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .layout {
    width: 100%;
  }

  .box-row {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
    flex-direction: column;
  }

  .card-slot,
  .card-slot:only-child {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  /* Collapsed, the bar itself is invisible — just the hamburger, pinned to
     the top-right corner with no enclosing box. The dropdown it opens
     supplies its own background. Stays in the document flow (still sticky)
     so page content is pushed down below it rather than overlapped. */
  .topbar {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0.6rem 0 0;
    justify-content: flex-end;
    background: none;
    box-shadow: none;
  }

  .nav-toggle-label {
    display: flex;
    padding: 0.6rem 1rem;
  }

  .topbar-nav {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    left: auto;
    transform: none;
    width: max-content;
    min-width: 220px;
    flex-direction: column;
    align-items: stretch;
    background: var(--sidebar-darker);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-toggle-input:checked ~ .topbar-nav {
    max-height: 70vh;
    overflow-y: auto;
  }

  .nav-item a {
    height: auto;
    padding: 0.9rem 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nav-item a:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.22);
  }

  .nav-divider {
    align-self: stretch;
    width: auto;
    height: 1px;
    margin: 0.3rem 1rem;
  }

  .content-card {
    padding: 1.5rem;
    scroll-margin-top: 5rem;
    /* Boxes with a '// no-box font_size:1.7'-style scale get the full
       multiplier at the 860px breakpoint (matching desktop) and ease down
       to no boost at all by 360px, instead of jumping straight to 1.7x on
       a narrow phone. */
    --fluid-scale: clamp(1, calc(1 + (var(--box-font-scale, 1) - 1) * ((100vw - 360px) / 500px)), var(--box-font-scale, 1));
    font-size: calc(1em * var(--fluid-scale));
  }

  /* No-box boxes stay borderless, but still need enough side inset to keep
     their text/video off the screen edge now that .layout spans full width. */
  .content-card.no-box {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  /* ...except a no-box box whose only content is a video: let that go full
     bleed edge-to-edge on mobile, where screen width is scarce. Desktop
     keeps it inset, inside the normal content column. */
  .content-card.no-box:has(.section-body > p:only-child > .content-video) {
    padding-left: 0;
    padding-right: 0;
  }

  .content-card h1 {
    font-size: calc(1.86rem * var(--fluid-scale));
  }

  .content-card h2 {
    font-size: calc(1.29rem * var(--fluid-scale));
  }

  .content-card h3 {
    font-size: calc(1.13rem * var(--fluid-scale));
  }

  .content-card .banner-image,
  .content-card .banner-video {
    width: 100%;
    margin-left: 0;
  }
}