/* Prevent header “jump” when scrollbar appears/disappears */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Remove the default top margin of the first element on each page */
.site-main > :first-child {
  margin-top: 0;
}

/* === Layout + Typography Controls === */
:root {
  /* Layout width is stable (not tied to font size like 75ch was) */
  --inner-max: 43rem;

  --page-pad-x: 1rem;
  --page-pad-top: 1rem;
  --page-pad-bottom: 1rem;

  /* Keep base stable to avoid rem-based header shifts */
  --fs-base: 18px;
  --lh-base: 1.55;

  /* One knob to change BODY font size safely */
  --content-fs: 19px;
  --content-lh: 1.65;

  /* Header sizes */
  --fs-title: 2.8rem;
  --fs-nav: 1.2rem;

  /* ✅ Consistent spacing under header */
  --header-gap: 1.5rem;
}

/* Global typography */
html { font-size: var(--fs-base); }

body {
  line-height: var(--lh-base);
}

/* Full-width page wrapper */
.page {
  width: 100%;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
  box-sizing: border-box;
}

/* IMPORTANT: do NOT clamp the whole site here */
.content-col {
  width: 100%;
  max-width: none;
}

/* Shared width wrapper used in baseof.html */
.wrap {
  width: 100%;
  max-width: var(--inner-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* === Header === */
.site-header {
  width: 100%;
  display: block;
  margin-bottom: var(--header-gap); /* ✅ consistent gap under header */
}

/* Desktop default: prevent header reflow */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  box-sizing: border-box;
  flex-wrap: nowrap;
}

/* Title */
.site-title {
  flex: 0 0 auto;
}

.site-title a {
  font-size: var(--fs-title);
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-family: Verdana;
  color: #1A2CA3;
  text-align: center;
}

/* Vertical nav */
.site-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.25rem;
  margin-left: auto;
}

.site-nav a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 550;
  letter-spacing: 0.04em;
  line-height: 1.05;
  font-size: var(--fs-nav);
  color: black;
  font-family: Verdana;
}

/* === Main content === */
.site-main {
  width: 100%;
  margin: 0;                 /* ✅ header controls spacing now */
  box-sizing: border-box;

  /* Safe body sizing (does NOT affect header, does NOT affect wrap width) */
  font-size: var(--content-fs);
  line-height: var(--content-lh);

  /* Safety net: prevent any accidental horizontal scroll from "bleed" */
  overflow-x: clip;
}

/* --- Content typography fixes --- */
.site-main ul,
.site-main ol {
  padding-left: 1.25rem;
  margin-left: 0;
}

.site-main li {
  margin: 0.25rem 0;
}

/* Keep your post-list link styling (only affects link underline) */
.site-main ul a {
  text-decoration: none;
}

.post-date {
  margin-right: 0.8rem;
}

/* Images */
figure img { max-width: 100%; height: auto; display: block; }
figure { margin: 1rem 0; }
figcaption { font-size: 0.95em; opacity: 0.8; margin-top: 0.4rem; }

/* --- Fold / details styling --- */
.fold {
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  margin: 1rem 0;
  overflow: hidden;

  /* ✅ needed for the consistent focus ring overlay */
  position: relative;
}

/* clickable header */
.fold__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  user-select: none;
  font-weight: 600;
}

/* remove default marker (Chrome/Safari) */
.fold__summary::-webkit-details-marker { display: none; }

/* subtle hover */
.fold__summary:hover {
  background: rgba(0,0,0,0.04);
}

/* =========================================================
   ✅ Consistent focus ring (same color over summary + content)
   ========================================================= */
.fold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px; /* match .fold radius */
  border: 2px solid rgba(26,44,163,0.35);
  pointer-events: none;
  opacity: 0;
}

.fold:focus-within::after {
  opacity: 1;
}

/* ✅ child wins: hide parent ring if a nested fold is focused */
.fold:has(.fold:focus-within):focus-within::after {
  opacity: 0;
}

/* Prevent double outlines on the summary itself */
.fold__summary:focus,
.fold__summary:focus-visible {
  outline: none;
}

/* the chevron */
.fold__chev {
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  opacity: 0.7;
}

/* rotate when open */
.fold[open] .fold__chev {
  transform: rotate(-135deg);
}

/* content area (single source of truth for fold padding) */
.fold__content {
  --fold-pad-x: 0.9rem;
  padding: 0.85rem var(--fold-pad-x) 0.95rem;
  border-top: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.6);
}

/* ✅ make the divider line a bit clearer ONLY when open */
.fold[open] .fold__content {
  border-top-color: rgba(0,0,0,0.16);
}

/* tighten first/last margins inside */
.fold__content > :first-child { margin-top: 0; }
.fold__content > :last-child  { margin-bottom: 0; }

/* Code blocks inside folds: keep round corners + allow scroll on desktop */
.fold__content pre {
  border-radius: 10px;
  overflow-x: auto;
}

/* === Mobile === */
@media (max-width: 701px) {
  .header-inner {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .site-title a {
    font-size: 2.2rem;
    white-space: normal;
    text-align: center;
  }

  .site-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-left: 0;
  }

  .site-main ul,
  .site-main ol {
    padding-left: 1rem;
  }
}

/* === Page background === */
html, body {
  background: #E9EEF5;
}

/* Home: Most recent 10 posts (no bullets) */
.site-main ul.recent-posts {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Option B: only "bleed" code blocks to the fold padding (prevents shrink-on-nesting) */

/* Code block wrapper fills the fold content area */
.fold__content .highlight {
  margin-left: calc(-1 * var(--fold-pad-x));
  margin-right: calc(-1 * var(--fold-pad-x));
  width: calc(100% + (2 * var(--fold-pad-x)));
  box-sizing: border-box;
}

/* Keep code block itself comfy */
.fold__content .highlight pre {
  padding: 1rem 1.1rem !important;
  border-radius: 12px;
  overflow-x: auto;
}

/* Mobile safety: stop the bleed so it doesn't hit the edges */
@media (max-width: 701px) {
  .fold__content .highlight {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* ================================
   Code blocks: wrap + shrink on phones
   (no duplicate fold__content rules)
   ================================ */

/* Desktop defaults (covers Hugo highlight + plain <pre><code>) */
.highlight pre,
pre {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.highlight pre code,
pre code {
  white-space: pre;
}

/* Phones: wrap so users can see everything */
@media (max-width: 701px) {
  .highlight pre,
  pre {
    overflow-x: hidden;
  }

  .highlight pre code,
  pre code {
    white-space: pre-wrap;       /* ✅ wrap lines */
    overflow-wrap: anywhere;     /* long URLs/hashes */
    word-break: normal;          /* avoid ugly mid-word breaks when possible */
    font-size: 0.9em;            /* slight shrink */
    line-height: 1.45;
  }
}