/* ==========================================================================
   foojay.io — Hugo theme stylesheet
   Replaces the v0 structural scaffolding with the site's visual design.

   Brand tokens live in :root — the palette below is reconstructed from the
   live foojay.io theme (warm amber accent, deep navy ink, Java blue as the
   secondary). If you have the official hex values, change them ONLY here.
   ========================================================================== */

:root {
  /* Brand */
  --brand-accent:        #f2951b;
  --brand-accent-strong: #d97a06;
  --brand-accent-soft:   #fdf1e0;
  --brand-secondary:     #37698c;
  --brand-secondary-soft:#eaf1f6;

  /* Ink & surfaces */
  --ink:            #10233a;
  --ink-soft:       #3c4b5d;
  --ink-muted:      #6d7c8c;
  --surface:        #ffffff;
  --surface-sunken: #f4f6f8;
  --surface-navy:   #0d1d2f;
  /* Page background: a touch off-white so the page isn't glaringly bright,
     while cards/header stay pure --surface white for contrast. */
  --page-bg:        #f5f7f9;
  /* Page-head band: a step darker than the page so the title area reads. */
  --page-head-bg:   #e7ecf1;

  /* Footer keeps its own tokens: it is dark in the light scheme, and needs a
     different treatment once the whole page is dark. */
  --footer-bg:     #0d1d2f;
  --footer-fg:     #b9c6d4;
  --footer-link:   #d7e1ea;
  --footer-head:   #ffffff;
  --footer-muted:  #93a5b6;
  --footer-border: #2b425c;
  --border:         #e2e7ec;
  --border-strong:  #cfd7de;

  /* Type */
  --font-display: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Metrics */
  --max-width: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 10px;
  --radius-sm: 6px;
  --header-h: 76px;

  --shadow-sm: 0 1px 2px rgba(16, 35, 58, .06), 0 2px 8px rgba(16, 35, 58, .05);
  --shadow-md: 0 4px 12px rgba(16, 35, 58, .08), 0 16px 40px rgba(16, 35, 58, .10);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-secondary); text-decoration: none; }
a:hover { color: var(--brand-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }

code, pre { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--surface-sunken); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--surface-navy); color: #e6edf3; padding: 1.1rem 1.25rem; border-radius: var(--radius); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }
blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--brand-accent);
  color: var(--ink); font-size: 1.1rem;
}
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.u-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; text-decoration: none; }

/* --------------------------------------------------------------- shell --- */

.shell { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

.site-main { display: block; }

.layout-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(1.5rem, 3vw, 3.25rem);
  max-width: var(--max-width);
  margin: 2.5rem auto 4rem;
  padding-inline: var(--gutter);
  align-items: start;
}
.content-col { min-width: 0; }
.content-col.full-width {
  grid-column: 1 / -1;
  max-width: var(--max-width);
  margin: 2.5rem auto 4rem;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------- header --- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-sm); }

.site-header__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

/* Brand -------------------------------------------------------- */
.logo { display: flex; align-items: center; gap: .6rem; color: var(--ink); flex: 0 0 auto; }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo__mark { width: 34px; height: 34px; }
/* The logo PNG carries the wordmark, so it is sized by height and replaces the
   text mark entirely. */
.logo__img { height: 34px; width: auto; }
.site-footer .logo__img { height: 30px; }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; line-height: 1;
}
.logo__word b { font-weight: 800; }
.logo__word .dot { color: var(--brand-accent); }
.logo__tag {
  display: none;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-muted); font-weight: 600;
  padding-left: .7rem; margin-left: .1rem;
  border-left: 1px solid var(--border-strong);
}

/* Primary nav -------------------------------------------------- */
.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }

.nav-link {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--ink); padding: .55rem .7rem; border-radius: var(--radius-sm);
  line-height: 1.2; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-link:hover { background: var(--surface-sunken); color: var(--brand-accent-strong); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--brand-accent-strong); }

/* chevron, drawn in CSS so there is no icon dependency */
.nav-link--parent::after {
  content: ""; width: .42em; height: .42em; margin-top: -.18em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
  opacity: .65;
}
.nav-item[data-open="true"] > .nav-link { background: var(--surface-sunken); color: var(--brand-accent-strong); }
.nav-item[data-open="true"] > .nav-link--parent::after { transform: rotate(-135deg); margin-top: .16em; }

/* Dropdown panels ---------------------------------------------- */
.site-header__inner { position: relative; }
.nav-item { position: relative; }

/* Multi-column panels are too wide to hang off their trigger: drop the item's
   containing block so the panel is laid out against .site-header__inner and
   clamp it to that width. */
.nav-item:has(.nav-panel__inner--cols-2),
.nav-item:has(.nav-panel__inner--cols-3) { position: static; }

.nav-panel {
  position: absolute; top: calc(100% + .4rem); left: 50%;
  transform: translate(-50%, -6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .6rem;
  max-width: calc(100vw - 2rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-item:has(.nav-panel__inner--cols-2) > .nav-panel,
.nav-item:has(.nav-panel__inner--cols-3) > .nav-panel {
  left: 50%; right: auto;
  max-width: calc(100% - 2 * var(--gutter));
}
.nav-item[data-open="true"] > .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
/* keyboard/no-JS fallback */
.nav-item:focus-within > .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
/* keep the last panel from running off the right edge */
.nav-item:last-child > .nav-panel { left: auto; right: 0; transform: translate(0, -6px); }
.nav-item:last-child[data-open="true"] > .nav-panel,
.nav-item:last-child:focus-within > .nav-panel { transform: translate(0, 0); }

.nav-panel__inner { display: grid; gap: .25rem 1.75rem; align-items: start; }
.nav-panel__inner--cols-1 { min-width: 250px; }
.nav-panel__inner--cols-2 { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.nav-panel__inner--cols-3 { grid-template-columns: repeat(3, minmax(170px, 1fr)); }

.nav-panel__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  align-content: start; grid-auto-rows: min-content;
}

.nav-panel a {
  display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
  color: var(--ink); font-size: .96rem; line-height: 1.35;
}
.nav-panel a:hover { background: var(--brand-accent-soft); color: var(--brand-accent-strong); text-decoration: none; }
.nav-panel a .nav-panel__desc {
  display: block; font-size: .82rem; color: var(--ink-muted); margin-top: .1rem;
}
.nav-panel a:hover .nav-panel__desc { color: var(--ink-soft); }

/* Third level: flattened into a titled column instead of a nested flyout.
   This is the main fix for the live site's cramped 3-deep hover menus. */
.nav-group { padding: .35rem 0; }
.nav-group__title {
  display: block;
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-muted);
  padding: .3rem .7rem .45rem;
}
a.nav-group__title:hover { background: none; color: var(--brand-accent-strong); text-decoration: underline; }
.nav-group .nav-panel__list a { font-size: .9rem; padding-block: .38rem; color: var(--ink-soft); }
.nav-group + .nav-group { border-top: 1px solid var(--border); margin-top: .3rem; }
.nav-panel__inner--cols-2 .nav-group + .nav-group,
.nav-panel__inner--cols-3 .nav-group + .nav-group { border-top: 0; margin-top: 0; }

.nav-panel__foot {
  grid-column: 1 / -1;
  margin-top: .35rem; padding: .7rem .7rem 0;
  border-top: 1px solid var(--border);
}
.nav-panel__foot a { font-weight: 600; font-size: .9rem; color: var(--brand-accent-strong); padding-inline: 0; }

/* Header actions ----------------------------------------------- */
.header-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
/* The drawer copy exists only for the <=900px off-canvas menu. */
.header-actions--mobile { display: none; }

.site-search { position: relative; }
.site-search input {
  font: inherit; font-size: .92rem;
  width: 150px; padding: .5rem .8rem;
  background: var(--surface-sunken);
  border: 1px solid transparent; border-radius: 999px;
  color: var(--ink);
  transition: width .2s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.site-search input::placeholder { color: var(--ink-muted); }
.site-search input:focus { width: 210px; background: var(--surface); border-color: var(--border-strong); outline-offset: 0; }

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn--accent { background: var(--brand-accent); color: #1c1204; }
.btn--accent:hover { background: var(--brand-accent-strong); color: #fff; text-decoration: none; }
.btn--ghost { border-color: var(--border-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.btn--navy { background: var(--ink); color: #fff; }
.btn--navy:hover { background: #1d3a5c; }

/* Theme toggle ------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.theme-toggle:hover { border-color: var(--brand-accent); color: var(--brand-accent-strong); background: var(--brand-accent-soft); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Mobile toggle ------------------------------------------------ */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s var(--ease), opacity .15s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13, 29, 47, .45);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s;
}
body[data-nav-open="true"] .nav-backdrop { opacity: 1; visibility: visible; }

/* -------------------------------------------------------- page headers -- */

.page-head {
  background: var(--page-head-bg);
  border-bottom: 1px solid var(--border);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
}
.page-head__inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
.page-head .eyebrow { margin-bottom: .5rem; }
.page-head h1 { margin-bottom: .35rem; }
.page-head p { color: var(--ink-soft); max-width: 62ch; margin: 0; }
.page-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; }
.page-head__meta p { margin: 0; }
.btn--sm { padding: .3rem .75rem; font-size: .82rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--brand-accent-strong);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--brand-accent); border-radius: 2px; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.section-head h2 { margin: 0; }
.section-head p { margin: .3rem 0 0; color: var(--ink-muted); font-size: .98rem; }
.section-head .more { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--brand-accent-strong); }

.band { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.band--sunken { background: var(--surface-sunken); border-block: 1px solid var(--border); }

/* ------------------------------------------------------------ post grid -- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.post-card { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.post-card-image {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--surface-sunken); aspect-ratio: 300 / 200;
}
.post-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s var(--ease);
}
.post-card:hover .post-card-image img { transform: scale(1.04); }

.post-card-title { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.post-card-title a { color: var(--ink); }
.post-card-title a:hover { color: var(--brand-accent-strong); text-decoration: none; }

.post-card-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  color: var(--ink-muted); font-size: .85rem;
}
.post-card-meta a { color: var(--ink-muted); font-weight: 600; }
.post-card-meta a:hover { color: var(--brand-accent-strong); }
.post-card-meta time + a::before { content: "·"; margin-right: .5rem; color: var(--border-strong); }

.post-card-categories, .post-categories, .post-tags, .chip-row {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.post-card-categories a, .post-categories a, .chip-row a {
  font-family: var(--font-display); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .22rem .6rem; border-radius: 999px;
  background: var(--brand-secondary-soft); color: var(--brand-secondary);
}
.post-card-categories a:hover, .post-categories a:hover, .chip-row a:hover {
  background: var(--brand-accent-soft); color: var(--brand-accent-strong); text-decoration: none;
}
.post-tags a { font-size: .85rem; color: var(--ink-muted); }

.post-card-excerpt { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Lead / featured card */
.post-card--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--border);
}
.post-card--lead .post-card-image { aspect-ratio: 16 / 9; }
.post-card--lead .post-card-title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); }
.post-card--lead .post-card-excerpt { font-size: 1.05rem; }

/* ------------------------------------------------------------- sidebar --- */

.sidebar { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + 1.25rem); }
.sidebar .widget {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 0;
}
.sidebar h4 {
  margin: 0 0 .8rem; padding: 0 0 .55rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink);
  border-bottom: 2px solid var(--brand-accent);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sidebar li a {
  display: block; padding: .3rem 0; font-size: .95rem; color: var(--ink-soft);
}
.sidebar li a:hover { color: var(--brand-accent-strong); }
.sidebar .view-all {
  display: inline-block; margin-top: .8rem;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: var(--brand-accent-strong);
}
.sponsor-logos { gap: .5rem; }

/* "On this page" table of contents + scroll-spy (partials/toc.html,
   static/js/toc.js). Nested for h2 > h3 (Hugo's default TOC levels). */
.toc #TableOfContents ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
.toc #TableOfContents > ul > li > ul { margin-top: .05rem; padding-left: .9rem; }
.toc #TableOfContents a {
  display: block; padding: .32rem 0 .32rem .75rem; font-size: .92rem;
  color: var(--ink-soft); border-left: 2px solid transparent; line-height: 1.3;
}
.toc #TableOfContents a:hover { color: var(--brand-accent-strong); }
.toc #TableOfContents a.is-active { color: var(--brand-accent-strong); border-left-color: var(--brand-accent-strong); font-weight: 600; }

/* ------------------------------------------------------------- article --- */

.post-single, .page-single { max-width: 88ch; }
.post-single .post-meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  color: var(--ink-muted); font-size: .93rem; margin-bottom: 1.25rem;
}
.post-single .post-meta a { font-weight: 600; }
.post-single .post-hero, .post-single img {
  width: 100%; border-radius: var(--radius); margin: 1.5rem 0;
}
.post-single h2, .post-single h3 { margin-top: 2rem; }
.post-single .post-categories, .post-single .post-tags { margin-top: 1.75rem; }

.related-posts {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.related-posts h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; }
.related-posts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.related-posts a { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.related-posts a:hover { color: var(--brand-accent-strong); }

/* -------------------------------------------------------------- authors -- */

.author-profile {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.25rem 1.5rem; align-items: start;
  padding-bottom: 1.75rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.author-profile h1 { grid-column: 2; margin: 0 0 .35rem; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.author-profile .author-bio, .author-profile .author-social { grid-column: 2; }
.author-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; grid-row: 1 / span 3; }
.author-bio { margin: 0 0 .8rem; color: var(--ink-soft); }
.author-social { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.author-social a {
  display: inline-block; font-size: .85rem; font-weight: 600;
  padding: .25rem .7rem; border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--ink-soft);
}
.author-social a:hover { border-color: var(--brand-accent); color: var(--brand-accent-strong); text-decoration: none; }

.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem; }
.author-card {
  display: grid; justify-items: center; gap: .6rem; text-align: center;
  padding: 1.25rem .75rem;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: .95rem;
}
.author-card:hover { border-color: var(--brand-accent); text-decoration: none; }
.author-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* --------------------------------------------------------------- events -- */

.events-updated { color: var(--ink-muted); font-size: .88rem; }
.jug-events { margin-bottom: 2rem; }
.jug-events h2 { font-size: 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.jug-events ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.jug-events li {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  padding: .7rem .9rem;
  background: var(--surface-sunken); border-radius: var(--radius-sm);
}
.jug-events li a { font-family: var(--font-display); font-weight: 600; color: var(--ink); flex: 1 1 260px; }
.jug-events li a:hover { color: var(--brand-accent-strong); }
.event-date { font-weight: 600; color: var(--brand-accent-strong); font-size: .9rem; }
.event-venue { color: var(--ink-muted); font-size: .9rem; }
.events-error { color: #a33; font-size: .92rem; }

/* ----------------------------------------------------------- pagination -- */

.pagination { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; list-style: none; margin: 2.5rem 0 0; padding: 0; }
.pagination .page-item a, .pagination .page-item span {
  display: inline-block; min-width: 40px; text-align: center;
  padding: .45rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--ink); font-weight: 600; font-size: .92rem;
}
.pagination .page-item.active span { background: var(--brand-accent); border-color: var(--brand-accent); color: #1c1204; }
.pagination .page-item a:hover { border-color: var(--ink); text-decoration: none; }
.pagination .page-item.disabled span { color: var(--ink-muted); opacity: .5; }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  margin-top: 4rem;
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  border-top: 0;
}
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: var(--brand-accent); text-decoration: none; }

.footer-cols {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(auto-fit, minmax(170px, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.footer-brand .logo { color: var(--footer-head); margin-bottom: .75rem; }
.footer-brand .logo:hover { color: var(--footer-head); }
.footer-brand .logo__tag { display: inline-block; color: var(--footer-muted); border-color: var(--footer-border); }
.footer-brand p { font-size: .95rem; color: var(--footer-muted); max-width: 32ch; }

.site-footer h4 {
  color: var(--footer-head); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 .9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-col li a { font-size: .95rem; }

.social-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.social-links a {
  display: inline-block; font-size: .85rem; font-weight: 600;
  padding: .3rem .8rem; border: 1px solid var(--footer-border); border-radius: 999px;
}
.social-links a:hover { border-color: var(--brand-accent); }

.footer-legal {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center;
  max-width: var(--max-width);
  margin: 2.5rem auto 0;
  padding: 1.25rem var(--gutter) 0;
  border-top: 1px solid var(--footer-border);
  color: var(--footer-muted); font-size: .87rem;
}

/* ----------------------------------------------------------- responsive -- */

@media (min-width: 1120px) {
  .logo__tag { display: inline-block; }
}

@media (max-width: 1080px) {
  .header-actions .btn { display: none; }
  .site-search input { width: 128px; }
}

@media (max-width: 960px) {
  .layout-with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .post-card--lead { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile drawer nav ------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed; z-index: 95;
    inset: var(--header-h) 0 0 auto;
    width: min(400px, 88vw);
    margin-left: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 1rem 1rem 3rem;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .25s var(--ease);
  }
  body[data-nav-open="true"] .primary-nav { transform: translateX(0); }

  .primary-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }

  .nav-item,
  .nav-item:has(.nav-panel__inner--cols-2),
  .nav-item:has(.nav-panel__inner--cols-3) { position: static; }
  .nav-item:has(.nav-panel__inner--cols-2) > .nav-panel,
  .nav-item:has(.nav-panel__inner--cols-3) > .nav-panel { left: auto; max-width: none; }
  .nav-link { width: 100%; justify-content: space-between; font-size: 1.05rem; padding: .75rem .6rem; }
  .nav-link--parent::after { margin: 0; }

  .nav-panel {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 .5rem .6rem;
    margin-left: .35rem;
    border-left: 2px solid var(--border);
    display: none;
  }
  .nav-item[data-open="true"] > .nav-panel { display: block; transform: none; }
  .nav-item:focus-within > .nav-panel { transform: none; }
  .nav-item:last-child > .nav-panel { transform: none; }

  .nav-panel__inner,
  .nav-panel__inner--cols-1,
  .nav-panel__inner--cols-2,
  .nav-panel__inner--cols-3 { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: .1rem; }

  .nav-group + .nav-group { border-top: 1px solid var(--border); margin-top: .35rem; }

  /* desktop copy hidden; the drawer copy takes over */
  .site-header__inner > .header-actions { display: none; }
  .primary-nav .header-actions--mobile { display: flex; position: static; flex-direction: column; align-items: stretch; gap: .75rem; margin-top: 1.25rem; }
  .primary-nav .header-actions--mobile .btn { display: inline-flex; justify-content: center; }
  .primary-nav .header-actions--mobile .site-search input { width: 100%; }
}

@media (max-width: 560px) {
  .author-profile { grid-template-columns: minmax(0, 1fr); }
  .author-avatar { grid-row: auto; }
  .author-profile h1, .author-profile .author-bio, .author-profile .author-social { grid-column: 1; }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------- added components ---- */

.post-card-body { display: grid; gap: .55rem; align-content: center; }
.post-card--lead .post-card-meta .eyebrow { margin: 0; }

.section-more { margin: 2rem 0 0; }

.chip-row--lg { gap: .6rem; }
.chip-row--lg a { font-size: .85rem; padding: .45rem 1rem; }
.chip-count, .sidebar .count {
  display: inline-block; font-weight: 700; opacity: .55; font-size: .85em;
  font-variant-numeric: tabular-nums;
}

.post-categories--top { margin-bottom: .9rem; }
.reading-time { color: var(--ink-muted); }
.post-single .post-meta > * + *::before {
  content: "·"; margin-right: .55rem; color: var(--border-strong);
}

/* Long-form body copy */
.prose { font-size: 1.09rem; }
/* Contain floated images (alignleft/alignright) so a trailing float can't
   escape the article and overlap the footer. */
.prose::after { content: ""; display: block; clear: both; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
/* So a TOC-link jump (or any #heading link) doesn't leave the heading
   tucked under the sticky header. */
.prose h2, .prose h3 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .35rem; }
.prose figure { margin: 1.75rem 0; }
.prose figcaption { font-size: .9rem; color: var(--ink-muted); margin-top: .5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
.prose th { font-family: var(--font-display); color: var(--ink); }

/* /jugs/ page: data/jugs.yaml source note + table (themes/foojay/layouts/jugs/single.html) */
.jugs-source-note { font-size: .92rem; color: var(--ink-muted); }
.jugs-map { height: 480px; margin: 1.5rem 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.jugs-table__links { font-size: .9rem; white-space: nowrap; }
.jugs-table__edit { text-decoration: none; opacity: .55; }
.jugs-table__edit:hover { opacity: 1; }

/* /java-champions/ page: data/java-champions.yaml source note + table
   (themes/foojay/layouts/champions/single.html) */
.champions-source-note { font-size: .92rem; color: var(--ink-muted); }
.champions-table__name { display: flex; align-items: center; gap: .6rem; }
.champions-table__name img { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.champions-table__status {
  font-size: .78rem; color: var(--ink-muted); background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: 999px; padding: .1rem .55rem;
}
/* Champions can have many links (Website, Twitter, Mastodon, Bluesky,
   LinkedIn, GitHub, YouTube, Sessionize, Speaker Deck). Let the cell wrap onto
   several lines instead of forcing one long nowrap row that stretches the
   whole table. Each link stays intact (no mid-word break); only the middot
   separators are break points. */
.champions-table__links { font-size: .9rem; line-height: 1.7; }
.champions-table__links a { white-space: nowrap; }

/* Author box under an article */
.author-callout {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1.25rem;
  align-items: start;
  margin-top: 2.5rem; padding: 1.4rem 1.5rem;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius);
}
.author-callout .author-avatar { width: 72px; height: 72px; }
.author-callout h3 { margin: .3rem 0 .7rem; font-size: 1.15rem; }
.author-callout h3 a { color: var(--ink); }
.author-callout h3 a:hover { color: var(--brand-accent-strong); }
.author-callout p { margin: 0; font-size: .95rem; }
.author-callout .author-social { margin-top: 1rem; }

@media (max-width: 560px) {
  .author-callout { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------- dark scheme ----
   Set by the inline script in baseof.html: a stored preference wins, then the
   OS setting. Single source of truth — no duplicated prefers-color-scheme
   block to keep in sync.
   ------------------------------------------------------------------------ */

:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-accent:        #f9a83a;
  --brand-accent-strong: #ffc46f;
  --brand-accent-soft:   rgba(249, 168, 58, .14);
  --brand-secondary:     #86b7d8;
  --brand-secondary-soft:rgba(134, 183, 216, .14);

  --ink:            #eaf1f7;
  --ink-soft:       #c0cedb;
  --ink-muted:      #8a9aa8;
  --surface:        #0e1a26;
  --surface-sunken: #16232f;
  --surface-navy:   #0a131c;
  --page-bg:        #0a131c;
  --page-head-bg:   #16232f;
  --border:         #23323f;
  --border-strong:  #364a5c;

  --footer-bg:     #0a131c;
  --footer-fg:     #a9b8c6;
  --footer-link:   #cfdce6;
  --footer-head:   #eaf1f7;
  --footer-muted:  #7d8d9c;
  --footer-border: #24343f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .5);
}

/* Amber is bright enough on dark that the pill button keeps dark label text,
   but a few surfaces need retuning rather than a token swap. */
:root[data-theme="dark"] .btn--accent { color: #14100a; }
:root[data-theme="dark"] .btn--navy { background: var(--surface-sunken); color: var(--ink); border-color: var(--border-strong); }
:root[data-theme="dark"] .btn--navy:hover { background: var(--border); }
:root[data-theme="dark"] pre { border: 1px solid var(--border); }
:root[data-theme="dark"] .nav-backdrop { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .post-card-image,
:root[data-theme="dark"] .author-card img,
:root[data-theme="dark"] .author-avatar,
:root[data-theme="dark"] .post-single img { filter: brightness(.92); }
:root[data-theme="dark"] .pagination .page-item.active span { color: #14100a; }
/* A light-background PNG logo needs no change, but a dark-ink one would vanish
   on the dark surface — set params.logoDark to supply an alternate file, or
   uncomment this to invert the single asset.
   :root[data-theme="dark"] .logo__img { filter: invert(1) hue-rotate(180deg); } */

/* --- Preserved WordPress inline image formatting (floats, resized, galleries) ---
   ConvertPosts/ConvertPages keep these as raw HTML instead of Markdown so the
   float / dimensions / caption / gallery grid survive. */
.prose .alignleft { float: left; margin: 0.3rem 1.4rem 1rem 0; }
.prose .alignright { float: right; margin: 0.3rem 0 1rem 1.4rem; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose figure.alignleft, .prose figure.alignright { max-width: 50%; }
.prose figure { margin: 1.5rem 0; }
.prose figure img, .prose img.alignleft, .prose img.alignright { height: auto; max-width: 100%; }
.prose figcaption, .prose .wp-element-caption { font-size: 0.85em; opacity: 0.72; text-align: center; margin-top: 0.4rem; }
.prose .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.prose .wp-block-gallery figure { flex: 1 1 45%; margin: 0; }
.prose .wp-block-gallery img { width: 100%; height: auto; }
.prose figure::after { content: ""; display: block; clear: both; }

/* ---------------------------------------------------------------- search --
   Pagefind-backed /search/ page (themes/foojay/layouts/search/single.html).
   `mark` is Pagefind's own match-highlighting inside excerpts. */

.search-page__form { max-width: 46rem; margin-bottom: .5rem; }
.search-page__form input {
  width: 100%; font: inherit; font-size: 1.1rem;
  padding: .8rem 1.1rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--ink);
}
.search-page__form input:focus { border-color: var(--brand-accent); outline-offset: 0; }

.search-page__status { color: var(--ink-muted); font-size: .92rem; min-height: 1.4em; }

.search-page__results { display: grid; gap: 2.25rem; max-width: 62rem; }
.search-page__section h2 {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: 1rem; text-transform: uppercase; letter-spacing: .1em;
  padding-bottom: .5rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.search-page__count { color: var(--ink-muted); font-weight: 600; font-size: .82rem; }
.search-page__group { display: grid; gap: 1.25rem; }
.search-result {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.search-result__image { display: block; width: 120px; border-radius: var(--radius-sm); overflow: hidden; }
.search-result__image img { width: 120px; height: 84px; object-fit: cover; }
.search-result h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.search-result__date {
  display: block; margin: 0 0 .4rem;
  color: var(--ink-muted); font-size: .85rem; font-variant-numeric: tabular-nums;
}
.search-result p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.search-result mark { background: var(--brand-accent-soft); color: var(--ink); border-radius: 2px; }

@media (max-width: 560px) {
  .search-result { grid-template-columns: minmax(0, 1fr); }
  .search-result__image { display: none; }
}

/* --- Click-to-enlarge lightbox (js/lightbox.js) --- */
.prose img.is-zoomable, img.post-hero.is-zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); padding: 2rem; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); cursor: zoom-out; }
.lightbox__close { position: absolute; top: 0.75rem; right: 1.25rem; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; }
.lightbox__close:hover { opacity: 0.8; }
body.lightbox-open { overflow: hidden; }

/* --- Post header: circular hero thumbnail floated left of the title.
   Floated (not flex) so a long title wraps to the right AND continues below the
   image, instead of leaving empty space under it. --- */
.post-header { margin-bottom: 1.75rem; }
.post-header::after { content: ""; display: block; clear: both; } /* contain the float */
.post-header h1 { margin-top: 0; }
.post-single .post-header .post-hero {
  float: left; width: 120px; height: auto; margin: .15rem 1.25rem .5rem 0;
  border-radius: var(--radius);
}
@media (max-width: 560px) {
  .post-single .post-header .post-hero { width: 88px; margin-right: 1rem; }
}

/* --- Pedia (Java Terms Explained) glossary --- */
.pedia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.pedia-card { display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.pedia-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pedia-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.pedia-card p { margin: 0; font-size: .9rem; color: var(--ink-muted); }
.pedia-back { margin: 0 0 1.25rem; }
.pedia-back a { font-weight: 600; font-size: .95rem; }
.pedia-back--foot { margin: 2.25rem 0 0; }

/* --- Author list quick filter --- */
.list-filter { margin: 0 0 1.5rem; }
.list-filter__input {
  width: 100%; max-width: 420px; padding: .6rem .9rem;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.list-filter__input:focus { border-color: var(--brand-accent); outline: none; }
.author-grid .author-card[hidden] { display: none !important; }
.jugs-table tbody tr[hidden] { display: none !important; }
.champions-table tbody tr[hidden] { display: none !important; }
.list-filter__empty { color: var(--ink-muted); margin: 0; }

/* --- Team page (meet-the-team) member cards --- */
/* Photo is floated (not flex) so the member's name can be a real Markdown ##
   heading -- that's what puts it in the page's table of contents -- while
   still sitting beside the avatar. */
.team-member {
  padding: 1.75rem 0; border-top: 1px solid var(--border);
}
.team-member::after { content: ""; display: block; clear: both; }
.prose .team-member:first-of-type { border-top: 0; padding-top: .5rem; }
.prose .team-member__photo {
  float: left; width: 120px; height: 120px;
  margin: .35rem 1.5rem .5rem 0; border-radius: 50%; object-fit: cover;
}
.prose .team-member h2 { margin: 0 0 .2rem; }
.team-member > :last-child { margin-bottom: 0; }
.team-member__role { color: var(--brand-secondary); font-weight: 600; margin: 0 0 .75rem; }
@media (max-width: 560px) {
  .prose .team-member__photo { width: 96px; height: 96px; margin-right: 1rem; }
}

/* --- "Where to find us" page: two-column grid of boxed items --- */
.where-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.where-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.where-card__img {
  display: block; width: auto; max-width: 160px; height: auto;
  margin: 0 0 1rem;
}
/* Card title is a real Markdown ## heading (so it shows in the page's table of
   contents), styled down to card size. */
.prose .where-card h2 { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.3; }
.where-card > p { margin: 0 0 .75rem; }
/* Last paragraph (the link row) is pushed to the bottom so cards stay tidy even
   when the intro text is a different length. */
.where-card > p:last-child { margin: auto 0 0; padding-top: .75rem; }
/* Links in the bottom row render as small pill buttons. */
.where-card > p:last-child a {
  display: inline-block;
  margin: .3rem .4rem 0 0;
  padding: .32rem .8rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.where-card > p:last-child a:hover {
  color: var(--brand-accent-strong);
  border-color: var(--border-strong);
}
@media (max-width: 640px) {
  .where-grid { grid-template-columns: 1fr; }
}