/* ==========================================================================
   Klingon Academy — base stylesheet
   Reverse-engineered from klingonacademy.net (Google Sites fansite):
   deep navy-black background, Bebas Neue display headings (red for
   section titles, yellow for the marquee/link accent), Roboto body copy.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,700&family=Source+Code+Pro:wght@400;700&display=swap');

:root {
  /* Colour — sampled from klingonacademy.net computed styles */
  --bg:          #191C26;  /* site body background */
  --surface:     #1C1C1C;  /* site nav bar background — used for panels / code / blockquote */
  --border:      #33374A;  /* hairline rules (hr, code, pre) */
  --text:        #FFFFFF;  /* site body copy */
  --text-muted:  #B7B9C2;  /* captions, secondary text */
  --accent:      #FFFF00;  /* site's link / emphasis yellow */
  --accent-hover:#FFEE55;
  --accent-2:    #C81E1E;  /* site's section-heading red */

  /* Type — the Google Fonts klingonacademy.net actually loads */
  --font-display: "Bebas Neue", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Roboto", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Source Code Pro", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Layout */
  --content-width: 70ch;  /* good reading measure, ~70 characters per line */
  --radius: 3px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* 100vw (used by the image breakout below) includes the scrollbar's
     own width, which overhangs the true viewport by a few px when one
     is present — clip it rather than let the page gain a horizontal
     scrollbar of its own. */
  overflow-x: hidden;
}

body {
  margin: 0 auto;
  max-width: var(--content-width);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  padding: 0 1.25rem;  /* no top/bottom — first/last cover images abut the frame */
}

/* ---- Headings ----
   Top margin scales down with heading level — the type treatment
   (font, colour, case) already carries the hierarchy, so a dense
   reference manual doesn't need large gaps to read as structured.
   Top > bottom at every level so each heading binds to what follows it. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* Marquee title — mirrors the site's yellow hero heading */
h1 {
  font-size: 2.6rem;
  color: var(--accent);
  text-align: center;
  margin: 1em 0 0.6em;
}

/* Section heading — mirrors "Welcome to Klingon Academy" / "Links" */
h2 {
  font-size: 1.7rem;
  color: var(--accent-2);
  margin: 1em 0 0.5em;
  padding-bottom: 0;
  border-bottom: 1px solid var(--accent-2);
}

h3 { font-size: 1.6rem; color: var(--accent-2); margin: 1.3em 0 0.4em; }

/* Eyebrow label — mirrors the site's small white "Online" heading */
h4 {
  font-size: 1.5rem;  /* 24px minimum */
  color: var(--text);
  letter-spacing: 0.06em;
  margin: 1em 0 0.3em;
}

h5 { font-size: 1.125rem; /* 18px */ color: var(--accent); margin: 1em 0 0.3em; }

h6 { font-size: 1rem; color: var(--text-muted); margin: 1em 0 0.3em; }

p { margin: 0 0 1.1em; }

/* ---- Links ---- */
a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover { color: var(--accent-hover); text-decoration: underline; }

a:visited { color: #D6D600; }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Lists ---- */
ul, ol { margin: 0 0 1.1em; padding-left: 1.4em; }
li { margin-bottom: 0.4em; }
ul { list-style-type: disc; }  /* same solid dot at every nesting depth, not disc/circle/square */
ul > li::marker { color: var(--accent-2); }
ol > li::marker { color: var(--accent); font-weight: 600; }

/* ---- Blockquote — signature element: red edge, like a red-alert callout ---- */
blockquote {
  margin: 1.4em 0;
  padding: 0.7em 1.1em;
  background: var(--bg);
  border-left: 3px solid var(--accent-2);
  color: var(--text-muted);
  font-style: italic;
}

blockquote p:last-child { margin-bottom: 0; }

/* ---- Code ---- */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.15em 0.4em;
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1em;
  overflow-x: auto;
}

pre code { background: none; border: none; padding: 0; }

/* ---- Tables ----
   Used here for layout only (e.g. side-by-side images), not tabular
   data — no visual styling of its own, just fills the column width
   so cells share it evenly instead of shrinking to content. Tables
   are auto-wrapped in <figure>, which carries a browser-default
   1em 40px margin — reset so it doesn't inset the table off the
   column edges the rest of the page aligns to. */
figure { margin: 0; }
table { width: 100%; table-layout: fixed; }
/* table-layout:fixed holds the column to width but won't itself wrap an
   unbroken token (e.g. an email address) — without this it overflows
   the cell and breaks out past the page edge. */
td, th { overflow-wrap: anywhere; }

/* ---- Misc elements ---- */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

strong { color: var(--text); font-weight: 700; }
em { color: var(--text); }

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: 1em auto;
}

/* Images break out of the reading column to go full-bleed — 95% of the
   viewport (a sliver of breathing room either side) below the desktop
   breakpoint, where the 960px cap below takes over instead. left:50% +
   translateX(-50%) centers a box of *any* resulting width in the
   viewport (unlike a fixed calc(50% - 50vw) margin, which only centers
   correctly when the box is exactly the breakout width); img itself
   (below) centers within it and never renders larger than its natural
   size. */
body > p:has(> img) {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 95vw;
}

/* Front/back cover abut the frame — no gap above the first image or
   below the last, even though img normally carries 1em top/bottom. */
body > p:first-child > img { margin-top: 0; }
body > p:last-child > img { margin-bottom: 0; }
body > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet and up */
@media (min-width: 768px) {
  body { font-size: 17px; padding: 0 2rem; }
  h1 { font-size: 3.4rem; }
  h2 { font-size: 2rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  body { padding: 0 1.5rem; }

  /* Full-bleed images cap out here instead of running edge-to-edge. */
  body > p:has(> img) { max-width: 960px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}