/* GravelHQ — site-wide Additional CSS (paste ONCE into Kadence Customizer > Additional CSS,
   same single-whole-site-file mechanism as motorbeast/dartinghq/SO). Page content is then
   plain Custom HTML using these classes — no per-page <style> blocks.

   Palette matches the existing portfolio dark theme (same real values as
   motorbeast's "mex-" editorial template and dartinghq's #07080c dark background) rather
   than inventing a new one — Kevin's brief: "same style as the others, black background".
   Prefix: .ghq- (GravelHQ), matching .dhq-/.so-/.ffa/.mb- on the other 4 sites. */

:root {
  /* Tells the browser this page is ALREADY dark, so browser/OS "auto dark mode" (Chrome's
     force-dark, GNOME/Android dark-mode inversion, etc.) doesn't try to re-invert it on top —
     that double-processing is what can turn dark-on-dark into invisible or corrupted text. */
  color-scheme: dark;
  --ghq-base: #0F151B;
  --ghq-panel: #172029;
  --ghq-panel-2: #1D2731;
  --ghq-line: #28323C;
  --ghq-amber: #F2A63C;
  --ghq-amber-dim: #6B5127;
  --ghq-red: #E1614F;
  --ghq-red-dim: #6B342B;
  --ghq-green: #4FB37B;
  --ghq-chalk: #EEF2F5;
  --ghq-steel: #93A1AC;
  --ghq-body: #C7CFD5;
}

/* Force the dark background site-wide — same rule as dartinghq/SO's #07080c override,
   using GravelHQ's own (slightly lighter navy) base tone. Adjust once the theme is live
   and header/nav/footer chrome need matching overrides too. */
body {
  background: var(--ghq-base) !important;
  color: var(--ghq-body);
}

.ghq-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px 60px; }
.ghq-wrap * { box-sizing: border-box; }
.ghq-wrap a { color: var(--ghq-amber); }

/* Kicker pill — small caps label above the dek, e.g. "Italy · Lake Maggiore · Swiss Border" */
.ghq-kicker {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ghq-amber);
  border: 1px solid var(--ghq-amber-dim);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.ghq-dek {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ghq-steel);
  margin-bottom: 28px;
}

.ghq-wrap h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--ghq-chalk);
  margin: 44px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ghq-line);
}

.ghq-wrap p, .ghq-wrap li { font-size: 16.5px; line-height: 1.7; color: var(--ghq-body); }
.ghq-wrap ul { margin: 0 0 18px; padding-left: 22px; }
.ghq-wrap li { margin-bottom: 8px; }

/* Draft-only flag — remove this element once Kevin confirms the page is ready to publish,
   same convention as the SO/FF2 confirm-note boxes. Red border = "not live yet". */
.ghq-draft-banner {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  background: var(--ghq-panel);
  border: 1px solid var(--ghq-red-dim);
  border-left: 4px solid var(--ghq-red);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 28px;
  color: var(--ghq-steel);
}

/* Route-data / stats callout */
.ghq-stats {
  background: linear-gradient(160deg, var(--ghq-panel-2), var(--ghq-panel));
  border: 2px solid var(--ghq-amber);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 26px 0;
}
.ghq-stats strong { color: var(--ghq-amber); }

/* Embedded map — responsive frame, card-style border to match the figures. Uses OpenStreetMap's
   free embed (openstreetmap.org/export/embed.html) — no API key, no account, ever needed.
   Switched from Google Maps 2026-09-04 after Kevin reported it not showing. */
.ghq-map {
  position: relative;
  width: 100%;
  padding-bottom: 65%;
  margin: 26px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ghq-line);
}
.ghq-map iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Ride/place figures — single full-width, stacked, lazy-loaded (portfolio-wide image rule,
   never 2-col grids). Card-style to sit against the dark background. */
.ghq-figure {
  margin: 26px 0;
  background: var(--ghq-panel);
  border: 1px solid var(--ghq-line);
  border-radius: 12px;
  padding: 12px;
}
.ghq-figure img { width: 100%; height: auto; display: block; border-radius: 6px; }
.ghq-figure figcaption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ghq-steel);
  margin-top: 10px;
  font-style: italic;
  padding: 0 4px;
}

/* Safety warning box — red, distinct from the amber "needs input" note below. For a specific
   route/behaviour Kevin flags as genuinely dangerous, not just unconfirmed. */
.ghq-warning {
  background: var(--ghq-panel);
  border: 2px solid var(--ghq-red);
  border-radius: 14px;
  padding: 24px 26px;
  margin: 30px 0;
}
.ghq-warning h3 {
  font-family: 'Archivo', sans-serif;
  margin: 0 0 12px;
  font-size: 17px;
  color: var(--ghq-red);
}
.ghq-warning p:last-child { margin-bottom: 0; }

/* Kevin's own confirm-note box — KEEP on the page until he confirms each item, then remove
   only the resolved lines (same rule as the Scottish Outposts 📝 boxes). Amber = "needs input". */
.ghq-note {
  background: var(--ghq-panel);
  border: 2px solid var(--ghq-amber);
  border-radius: 14px;
  padding: 24px 26px;
  margin-top: 40px;
}
.ghq-note h3 {
  font-family: 'Archivo', sans-serif;
  margin: 0 0 12px;
  font-size: 17px;
  color: var(--ghq-amber);
}
.ghq-note ul { margin-bottom: 0; }

/* Related-rides block — sits early in the body (right after the intro/stats), links to
   the parent hub and sibling rides. First in-body links a reader reaches, by design. */
.ghq-related {
  background: var(--ghq-panel-2);
  border: 1px solid var(--ghq-amber-dim);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 28px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.ghq-related-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ghq-steel);
  margin-right: 4px;
}
.ghq-related a {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ghq-chalk) !important;
  background: var(--ghq-base);
  border: 1px solid var(--ghq-line);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.ghq-related a:hover { border-color: var(--ghq-amber); color: var(--ghq-amber) !important; }

.ghq-footer-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ghq-steel);
  margin-top: 32px;
  border-top: 1px solid var(--ghq-line);
  padding-top: 16px;
}

@media (max-width: 760px) {
  .ghq-wrap { padding: 0 18px 44px; }
  .ghq-figure { padding: 8px; }
}

/* ---------- legal / info pages ---------- */
.ghq-legal h1 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 40px); color: var(--ghq-chalk); margin: 4px 0 8px; }
.ghq-legal h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: var(--ghq-chalk); margin: 30px 0 8px; }
.ghq-legal p, .ghq-legal li { color: var(--ghq-body); line-height: 1.7; font-size: 16.5px; }
.ghq-legal ul { padding-left: 22px; }
.ghq-legal a { color: var(--ghq-amber); }
.ghq-legal-updated { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ghq-steel); letter-spacing: .04em; }
.ghq-legal-email { font-family: 'IBM Plex Mono', monospace; font-size: 20px; margin: 8px 0 14px; }