/* ──────────────────────────────────────────────────────────────
   pagefind-overrides.css
   Restyles the classic Pagefind UI to the contentmill v2 system.

   WHY THIS LOOKS THE WAY IT DOES (read before editing):

   Pagefind UI ships Svelte-scoped CSS whose selectors are doubled,
   e.g. `.pagefind-ui__result-title.svelte-j9e30.svelte-j9e30`
   — that's a specificity of THREE classes. A plain override like
   `.pagefind-ui__result-title { … }` (one class) LOSES the cascade
   and Pagefind's styling wins. Every previous attempt failed here.

   The fix: Pagefind mounts into <div id="pagefind-search">, so we
   scope EVERY rule under that ID. `#pagefind-search .pagefind-ui__x`
   carries an ID → it outranks any number of classes, and does NOT
   depend on the volatile `.svelte-*` hash. Don't remove the
   `#pagefind-search` prefix from any selector below.

   Pair this with `resetStyles: true` (the Pagefind default) so the
   widget's own `:where()`-based reset neutralises our global
   element styles (a / p / ul / button) instead of letting them
   bleed in. That reset has zero specificity, so our rules still win.

   Load order (set in SearchModal.astro):
     <link rel="stylesheet" href="/_pagefind/pagefind-ui.css" />
     <link rel="stylesheet" href="/pagefind-overrides.css" />
   ────────────────────────────────────────────────────────────── */


/* ── Theme variables ──────────────────────────────────────
   Pagefind reads these `--pagefind-ui-*` vars inside its own
   rules. Setting them on `#pagefind-search .pagefind-ui` beats
   Pagefind's `:root` defaults, so colours/borders/font track
   the active language theme automatically. */
#pagefind-search .pagefind-ui {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--primary-700);
  --pagefind-ui-text: var(--fg-strong);
  --pagefind-ui-background: var(--bg-elevated);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-tag: var(--bg-muted);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--radius-sm);
  --pagefind-ui-image-border-radius: var(--radius-sm);
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: var(--font-sans);

  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg);
}


/* ── Dialog layout — pin the search bar, scroll the results ─
   #pagefind-search is the flex child of .gs-search-dialog. Make
   it (and Pagefind's wrapper) a column that fills the dialog so
   the form stays put and only the results drawer scrolls. */
.gs-search-dialog #pagefind-search {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#pagefind-search .pagefind-ui {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#pagefind-search .pagefind-ui__form { flex-shrink: 0; }
#pagefind-search .pagefind-ui__drawer {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  gap: 0;
}


/* ── Search bar ───────────────────────────────────────────
   Flatten Pagefind's 64px bold pill into a single quiet field
   with a hairline underline — the header bar of the dialog. */
#pagefind-search .pagefind-ui__search-input {
  height: auto;
  padding: 13px 40px 13px 40px;   /* room for the icon (L) + clear (R) */
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 16px;                /* 16px keeps iOS from auto-zooming */
  font-weight: 400;
  color: var(--fg-strong);
  width: 100%;
  box-sizing: border-box;
}
#pagefind-search .pagefind-ui__search-input::placeholder {
  color: var(--fg-faint);
  opacity: 1;
}

/* The search glyph Pagefind draws via .__form::before — recentre
   it to the new input height and tint it with the ink ramp. */
#pagefind-search .pagefind-ui__form::before {
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: var(--fg-subtle);
  opacity: 0.7;
}

/* Clear (×) button on the right of the input. */
#pagefind-search .pagefind-ui__search-clear {
  top: 50%;
  right: 8px;
  height: auto;
  transform: translateY(-50%);
  background: transparent;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#pagefind-search .pagefind-ui__search-clear:hover {
  color: var(--fg-strong);
  background: var(--bg-muted);
}


/* ── Status line ("Showing 12 results") ───────────────────
   Quiet mono row above the list. */
#pagefind-search .pagefind-ui__message {
  box-sizing: border-box;
  height: auto;
  margin: 0;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}


/* ── Results list ─────────────────────────────────────────
   Strip Pagefind's drawer/area framing and render rows, not
   cards: hairline-dotted dividers, hover tint, no shadow. */
#pagefind-search .pagefind-ui__results-area {
  min-width: 0;
  margin-top: 0;
  flex: none;
}
#pagefind-search .pagefind-ui__results {
  padding: 0;
  margin: 0;
  list-style: none;
}
#pagefind-search .pagefind-ui__result {
  padding: 10px 14px;
  margin: 0;
  gap: var(--space-3);
  border-top: 0;
  border-bottom: 1px dotted var(--border);
}
#pagefind-search .pagefind-ui__result:last-of-type { border-bottom: 0; }
#pagefind-search .pagefind-ui__result:hover,
#pagefind-search .pagefind-ui__result:focus-within {
  background: var(--bg-subtle);
}
#pagefind-search .pagefind-ui__result-inner { margin-top: 0; }

/* Title — bold ink, brand-coloured on hover. */
#pagefind-search .pagefind-ui__result-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0;
}
#pagefind-search .pagefind-ui__result-title .pagefind-ui__result-link {
  color: var(--fg-strong);
  text-decoration: none;
}
#pagefind-search .pagefind-ui__result:hover .pagefind-ui__result-title .pagefind-ui__result-link {
  color: var(--primary-700);
}

/* Excerpt — small grey body, match highlights in note-yellow. */
#pagefind-search .pagefind-ui__result-excerpt {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--leading-snug);
  margin-top: 3px;
  min-width: 0;
  text-wrap: pretty;
}
#pagefind-search .pagefind-ui mark {
  background: var(--note-bg);
  color: var(--note-fg);
  padding: 0 2px;
  border-radius: 0;
  font-weight: 600;
}

/* Thumbnail — pedagogic pages seldom ship images, and Pagefind
   reserves a ~120px thumb box on EVERY result whether or not an
   image exists, leaving ugly empty rectangles. Hide it so results
   stay dense and left-aligned. */
#pagefind-search .pagefind-ui__result-thumb,
#pagefind-search .pagefind-ui__result-image {
  display: none;
}


/* ── Sub-results (showSubResults: true) ───────────────────
   Section-level hits inside one page. Indent + lighten so the
   parent row stays the primary affordance; drop the ⤷ glyph. */
#pagefind-search .pagefind-ui__result-nested {
  padding-left: var(--space-3);
  margin-top: 6px;
  border-left: 2px solid var(--border);
}
#pagefind-search .pagefind-ui__result-nested:first-of-type { padding-top: 6px; }
#pagefind-search .pagefind-ui__result-nested .pagefind-ui__result-link {
  font-size: var(--text-sm);
  color: var(--fg);
}
#pagefind-search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
  content: "";
}


/* ── Tags ─────────────────────────────────────────────────
   Small mono chips below the excerpt. */
#pagefind-search .pagefind-ui__result-tags {
  margin-top: 6px;
  padding: 0;
  gap: 4px;
  list-style: none;
}
#pagefind-search .pagefind-ui__result-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--fg-muted);
}


/* ── Load-more button ─────────────────────────────────────
   Demote Pagefind's 48px CTA to a quiet full-width bar. */
#pagefind-search .pagefind-ui__button {
  margin-top: 0;
  width: 100%;
  height: auto;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  text-align: center;
  cursor: pointer;
}
#pagefind-search .pagefind-ui__button:hover {
  background: var(--bg-muted);
  color: var(--fg-strong);
  border-color: var(--border);
}


/* ── Loading skeleton ─────────────────────────────────────
   Pagefind paints a faint block while fetching. Soften it. */
#pagefind-search .pagefind-ui__loading {
  border-radius: var(--radius-sm);
  opacity: 0.08;
}


/* ── Filters (only if a site enables faceting) ────────────
   Most sites won't, but keep these on-theme for the day they do. */
#pagefind-search .pagefind-ui__filter-panel {
  margin-top: var(--space-3);
}
#pagefind-search .pagefind-ui__filter-checkbox:checked {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
}