/* goblin.css: Goblin Docs skin for mdBook.
   Mobile-first. Dark "midnight ledger" palette + Geist, echoing goblin.st.
   Accent #FFD60A on ink #0E0E0C. Restyles the built-in `navy` theme and
   provides a light variant if the reader toggles. */

/* ---- Fonts (bundled under src/fonts → copied to /fonts) ---- */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --goblin-accent: #FFD60A;
  --goblin-accent-deep: #E8B800;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Type scale ----
   NOTE: mdBook sets `html { font-size: 62.5% }`, so 1rem = 10px here.
   Every size below is in that scale: 1.7rem = 17px, 3.2rem = 32px, etc.
   One scale governs the whole reading column so sizing stays consistent. */
html, body { font-family: var(--sans); }

/* Body copy: 17px, generous line-height, like goblin.st. */
.content { font-size: 1.7rem; line-height: 1.7; }
.content p,
.content li,
.content td,
.content th,
.content blockquote { font-size: 1.7rem; line-height: 1.7; }

/* Headings: a clear, consistent hierarchy. */
.content h1 { font-size: 3.2rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin-top: 2.4rem; margin-bottom: 1.4rem; }
.content h2 { font-size: 2.4rem; line-height: 1.2;  font-weight: 700; letter-spacing: -0.01em; margin-top: 3.4rem; margin-bottom: 1.2rem; }
.content h3 { font-size: 1.9rem; line-height: 1.25; font-weight: 600; margin-top: 2.6rem; margin-bottom: 1rem; }
.content h4 { font-size: 1.7rem; font-weight: 600; margin-top: 2rem; }

/* Monospace: inline code scales with its surrounding text; blocks at 15px. */
.content code, code, pre, kbd { font-family: var(--mono); }
.content :not(pre) > code { font-size: 0.92em; }
.content pre code { font-size: 1.5rem; line-height: 1.55; }

/* Tables a touch smaller than body so wide rows fit, but still readable. */
.content table { font-size: 1.6rem; }

.menu-title { font-weight: 700; letter-spacing: 0.2px; }

/* ---- Dark Goblin palette (applied to the default `navy` theme) ---- */
.navy {
  --bg: #0E0E0C;
  --fg: #F4F2E8;

  --sidebar-bg: #14140F;
  --sidebar-fg: #C9C6B6;
  --sidebar-non-existant: #6E6B5E;
  --sidebar-active: #FFD60A;
  --sidebar-spacer: rgba(244, 242, 232, 0.08);

  --scrollbar: #2a2a22;

  --icons: #8b8878;
  --icons-hover: #F4F2E8;

  --links: #FFD60A;

  --inline-code-color: #FFE066;

  --theme-popup-bg: #14140F;
  --theme-popup-border: rgba(244, 242, 232, 0.12);
  --theme-hover: #21211A;

  --quote-bg: #16160F;
  --quote-border: #2a2a1d;

  --warning-border: #FFD60A;

  --table-border-color: rgba(244, 242, 232, 0.12);
  --table-header-bg: #21211A;
  --table-alternate-bg: #131310;

  --searchbar-border-color: rgba(244, 242, 232, 0.16);
  --searchbar-bg: #191914;
  --searchbar-fg: #F4F2E8;
  --searchbar-shadow-color: rgba(0,0,0,0.5);
  --searchresults-header-fg: #A9A698;
  --searchresults-border-color: rgba(244, 242, 232, 0.12);
  --searchresults-li-bg: #16160F;
  --search-mark-bg: rgba(255, 214, 10, 0.35);
}

/* Light variant if the reader toggles to "light"/"rust" */
.light, .rust {
  --links: #9a7d00;
  --sidebar-active: #9a7d00;
  --search-mark-bg: rgba(255, 214, 10, 0.5);
}

/* ---- Links & accents ---- */
.content a, .content a:visited { color: var(--goblin-accent-deep); }
.navy .content a, .navy .content a:visited { color: var(--goblin-accent); }
.content a:hover { text-decoration: underline; }

/* Active sidebar item gets a left accent rail */
.chapter li.chapter-item a.active {
  color: var(--goblin-accent);
  font-weight: 600;
  border-left: 2px solid var(--goblin-accent);
  padding-left: 8px;
  margin-left: -10px;
}

/* ---- Brand mark above the sidebar nav ---- */
.sidebar .sidebar-scrollbox::before {
  content: "";
  display: block;
  height: 56px;
  margin: 6px 14px 2px;
  background: url("assets/goblin-mark-white.svg") left center / contain no-repeat;
  opacity: 0.95;
}

/* ---- Screenshots: phone-framed, mobile-first ---- */
.content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
/* Wrap a screenshot in <p class="shot"> ... </p> to get the phone frame */
.shot { text-align: center; }
.shot img {
  max-width: 300px;
  width: 100%;
  border: 1px solid rgba(244, 242, 232, 0.14);
  border-radius: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  background: #0E0E0C;
}
.shot em { display: block; color: #A9A698; font-size: 1.4rem; margin-top: 0.8rem; }

/* Placeholder box for shots not yet captured */
.shot-todo {
  border: 1px dashed rgba(255, 214, 10, 0.5);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 1rem auto;
  max-width: 320px;
  color: #A9A698;
  text-align: center;
  font-size: 1.5rem;
}
.shot-todo strong { color: var(--goblin-accent); }

/* ---- Definition-style callouts used on component pages ---- */
.content blockquote {
  border-inline-start: 3px solid var(--goblin-accent);
}

/* ---- Big "new here?" call-to-action box on the landing page ---- */
.content a.cta {
  display: block;
  border: 1.5px solid var(--goblin-accent);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  margin: 0.5rem 0 2.4rem;
  background: rgba(255, 214, 10, 0.06);
  color: var(--fg);
  text-decoration: none;
}
.content a.cta:hover { background: rgba(255, 214, 10, 0.12); }
.content a.cta strong {
  display: block;
  color: var(--goblin-accent);
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.content a.cta span { font-size: 1.6rem; color: var(--fg); }

/* ---- Mobile-first: comfortable measure, tap targets ----
   Body size is set once above (1.7rem = 17px) and is NOT reduced on mobile. */
.content { max-width: 72rem; }
@media only screen and (max-width: 620px) {
  .content { padding: 0 1.2rem; }
  .content h1 { font-size: 2.8rem; }   /* 28px: still prominent, fits narrow */
  .content h2 { font-size: 2.2rem; }   /* 22px */
  .shot img { max-width: 88vw; }
}

/* Section dividers in the summary look like quiet kickers */
.chapter .spacer + li.part-title,
.chapter li.part-title {
  color: #8b8878;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.3rem;
}