/* =========================================================
   SaturdayOff site theme ("Race day")
   Loaded after each page's own styles. Green and white,
   Archivo for headings, Instrument Sans for everything else.
   ========================================================= */

/* Self-hosted fonts (SIL Open Font License): no third-party requests */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations'), url('/assets/fonts/archivo-var.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('/assets/fonts/instrument-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url('/assets/fonts/instrument-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url('/assets/fonts/instrument-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url('/assets/fonts/instrument-sans-700.woff2') format('woff2'); }

:root {
  --so-ink: #0f2418;
  --so-green-900: #0c2216;
  --so-green-800: #13301f;
  --so-green-700: #185c35;
  --so-green-600: #1c6b3d;
  --so-green-300: #7fd39f;
  --so-green-100: #eef6f1;
  --so-bg: #f6f9f7;
  --so-line: #e1e9e4;
  --so-mid: #3d5447;
  --so-soft: #5a7064;
  --so-amber: #b45309;
  --so-red: #b4322a;
  --so-radius: 18px;
  --so-head: 'Archivo', 'Arial Narrow', sans-serif;
  --so-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Old page variables, remapped so every page picks up the new palette */
  --forest: #13301f; --forest-mid: #185c35;
  --g900: #0c2216; --g800: #13301f; --g700: #185c35; --g600: #1c6b3d;
  --g400: #3f9a63; --g200: #7fd39f; --g100: #eef6f1;
  --off: #f6f9f7; --white: #ffffff; --ink: #0f2418; --mid: #3d5447;
  --soft: #5a7064; --rule: #e1e9e4;
}

/* ---------- Base typography ---------- */
html body {
  font-family: var(--so-body) !important;
  background: var(--so-bg) !important;
  color: var(--so-ink);
  -webkit-font-smoothing: antialiased;
}
body *:not(svg):not(svg *) {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
html body :is(h1, h2, h3, .course-title, .guide-title, .page-title, .hero-headline, .faq-title, .cc-name, .pb-course-name, .so-display) {
  font-family: var(--so-head) !important;
  font-stretch: 92%;
  letter-spacing: -0.4px !important;
}
html body :is(h1, .course-title, .guide-title, .page-title) {
  font-weight: 900 !important;
  font-stretch: 88%;
  line-height: 0.98 !important;
  letter-spacing: -0.8px !important;
}
html body :is(h2, h3) { font-weight: 800 !important; }
html body h4 { font-weight: 700 !important; }
a { color: var(--so-green-700); }
a:hover { color: var(--so-green-600); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--so-green-300); outline-offset: 2px; }

/* Article headings: drop the heavy underline rule */
html body :is(.article, .prose, .content, .page-body, .body-wrap, .main, .content-wrap, .guides-wrap) h2 {
  font-size: clamp(24px, 3vw, 30px) !important;
  color: var(--so-ink) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 40px 0 12px !important;
  line-height: 1.1 !important;
}
html body :is(.article, .prose, .content, .page-body, .body-wrap, .main, .content-wrap) h2:first-child { margin-top: 0 !important; }
html body :is(.article, .prose, .content, .page-body, .body-wrap, .main, .content-wrap) h3 { font-size: 20px !important; line-height: 1.2 !important; }
html body :is(.article, .prose, .content, .page-body, .body-wrap, .main, .content-wrap) :is(p, li) { color: #2d4236; }

/* ---------- Shared header ---------- */
.so-header { background: var(--so-green-800); color: #fff; position: sticky; top: 0; z-index: 200; }
.so-header-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
html body .so-logo { font-family: var(--so-head) !important; font-stretch: 112%; font-weight: 900; font-size: 22px; letter-spacing: -0.2px !important; text-transform: uppercase !important; color: #fff; text-decoration: none; white-space: nowrap; }
html body .so-logo span { color: var(--so-green-300); text-transform: uppercase !important; font-family: var(--so-head) !important; }
.so-logo:hover { color: #fff; }
html body nav.so-nav { display: flex; align-items: center; gap: 22px; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; position: static !important; height: auto !important; border: none !important; width: auto !important; }
.so-nav a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; opacity: 0.92; }
.so-nav a:hover, .so-nav a[aria-current="page"] { opacity: 1; color: var(--so-green-300); }
.so-nav .so-nav-cta { background: var(--so-green-300); color: var(--so-green-800); padding: 11px 16px; border-radius: 10px; font-weight: 700; opacity: 1; white-space: nowrap; }
.so-nav .so-nav-cta:hover { background: #fff; color: var(--so-green-800); }
.so-burger { display: none; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.25); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.so-burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
html body .mobile-menu.so-mobile { display: none; position: sticky; top: 74px; z-index: 199; background: var(--so-green-800); border-top: 1px solid rgba(255,255,255,0.12); padding: 8px 0 14px; box-shadow: 0 12px 24px rgba(0,0,0,0.25); }
html body .mobile-menu.so-mobile.open { display: block; }
html body .mobile-menu.so-mobile a { display: block; padding: 14px 24px; color: #fff !important; text-decoration: none; font-size: 17px; font-weight: 600; border: none; }
html body .mobile-menu.so-mobile a.so-mobile-cta { margin: 10px 24px 0; background: var(--so-green-300); color: var(--so-green-800) !important; border-radius: 12px; text-align: center; font-weight: 700; }
@media (max-width: 960px) {
  html body nav.so-nav { display: none !important; }
  .so-burger { display: flex; }
}

/* ---------- Hero bands on inner pages ---------- */
html body :is(.guide-hero, .page-hero, .tool-hero, .hero:not(.so-home-hero)) {
  background: var(--so-green-800) !important;
  background-image: none !important;
  color: #fff;
  border: none !important;
}
html body :is(.guide-hero, .page-hero, .tool-hero, .hero:not(.so-home-hero)) :is(h1, .guide-title, .page-title) {
  color: #fff !important;
  font-size: clamp(38px, 6vw, 66px) !important;
}
html body :is(.guide-hero, .page-hero, .hero:not(.so-home-hero)) :is(p, .guide-subtitle, .guide-meta, .page-sub, .hero-meta, .lede) { color: #cfe6d7 !important; font-size: 18px !important; line-height: 1.55 !important; }
html body :is(.guide-hero, .page-hero, .hero:not(.so-home-hero)) :is(.guide-kicker, .guide-category, .page-kicker, .kicker) { color: var(--so-green-300) !important; font-size: 15px !important; font-weight: 700 !important; }
html body :is(.guide-breadcrumb, .course-breadcrumb) { font-size: 14px !important; font-weight: 600 !important; color: rgba(255,255,255,0.7) !important; }
html body :is(.guide-breadcrumb, .course-breadcrumb) a { color: var(--so-green-300) !important; }

/* Course pages: split hero with the real photo on the right */
html body .course-hero {
  height: auto !important;
  min-height: 0 !important;
  background: var(--so-green-800) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 36px max(24px, calc((100% - 1152px) / 2)) 48px !important;
  overflow: visible !important;
}
html body .course-hero .course-hero-overlay { display: none !important; }
html body .course-hero .course-hero-img {
  position: relative !important;
  inset: auto !important;
  order: 2;
  width: 100%;
  height: 380px !important;
  border-radius: 24px 24px 24px 4px;
  background-size: cover !important;
}
html body .course-hero .course-hero-content {
  position: relative !important;
  inset: auto !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  order: 1;
}
html body .course-hero .course-title { color: #fff !important; font-size: clamp(44px, 7vw, 84px) !important; margin-bottom: 14px !important; }
html body .course-hero .course-subtitle, html body .course-hero .course-location { color: #cfe6d7 !important; font-size: 18px !important; }
@media (max-width: 760px) {
  html body .course-hero { grid-template-columns: 1fr; gap: 22px; padding: 24px 16px 32px !important; }
  html body .course-hero .course-hero-img { height: 240px !important; }
}

/* Quick stats become a white scoreboard under the hero */
html body .quick-stats { background: transparent !important; padding: 0 16px; margin-top: -24px; position: relative; z-index: 2; }
html body .quick-stats-inner {
  max-width: 1152px !important; margin: 0 auto !important; padding: 8px 12px !important;
  background: #fff; border-radius: 20px; box-shadow: 0 16px 36px rgba(15,36,24,0.12);
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
html body .qs-item { padding: 16px 18px !important; margin: 0 !important; border-right: none !important; }
html body .qs-label { color: var(--so-soft) !important; font-size: 13px !important; font-weight: 600 !important; }
html body .qs-value { color: var(--so-ink) !important; font-family: var(--so-head) !important; font-stretch: 92%; font-size: 22px !important; font-weight: 800 !important; margin-top: 2px; }
html body .qs-value.green { color: var(--so-green-600) !important; }
html body .qs-value.amber { color: var(--so-amber) !important; }
html body .qs-value.red { color: var(--so-red) !important; }

/* Course alert banner */
html body .cta-banner { background: transparent !important; border: none !important; padding: 20px 16px 0 !important; }
html body .cta-banner-inner {
  max-width: 1152px !important; margin: 0 auto !important; background: var(--so-green-100) !important;
  border-radius: 20px; padding: 22px 24px !important; border: none !important;
}
html body .cta-banner-text strong { color: var(--so-ink) !important; font-size: 19px !important; font-family: var(--so-head) !important; font-weight: 800 !important; }
html body .cta-banner-text p { color: var(--so-mid) !important; }

/* ---------- Layout containers ---------- */
html body :is(.page-wrap, .guide-body, .body-wrap, .content-wrap) { max-width: 1152px !important; }
html body .page-wrap { gap: 48px !important; }

/* ---------- Cards and callouts: no left-border stripes ---------- */
html body :is(.tip-box, .callout, .caveat-box, .highlight-box, .warning-box, .warning-bar, .stats-link, .shoe-box, .faq-item, .faq-block, .reason-card, .layer-card, .example-box, .criteria-item, .benchmark-card, .role-item, .mistake-item, .tip-item, .step-item, .km-item, .contact-box, .credit-note, .community-note, .no-guide-note, .key-facts, .guide-cta-box, .stat-box, .card, .box, .pb-course, .course-card, .guide-item, .advice-item, .unsub-card, .stay-card, .form-panel, .milestone-row, .alert-cta, .contact-block, .author-block) {
  border: none !important;
  border-radius: var(--so-radius) !important;
  box-shadow: none !important;
}
html body :is(.tip-box, .callout, .highlight-box, .credit-note, .community-note, .no-guide-note, .key-facts, .guide-cta-box) { background: var(--so-green-100) !important; }
html body :is(.caveat-box, .warning-box, .warning-bar) { background: #fff6e8 !important; }
html body :is(.stats-link, .shoe-box, .faq-item, .faq-block, .reason-card, .layer-card, .example-box, .criteria-item, .benchmark-card, .role-item, .mistake-item, .tip-item, .step-item, .contact-box, .stat-box, .card, .box, .pb-course, .course-card, .guide-item, .advice-item, .unsub-card, .stay-card, .form-panel, .milestone-row, .contact-block, .author-block) { background: #fff !important; border: 1px solid var(--so-line) !important; }
html body .faq-item { padding: 18px 20px !important; }
html body .faq-item dt, html body .faq-q { font-size: 17px !important; font-weight: 700 !important; color: var(--so-ink) !important; }
html body .km-item { overflow: hidden; background: #fff !important; border: 1px solid var(--so-line) !important; margin-bottom: 10px; }
html body .km-num { background: var(--so-green-800) !important; font-family: var(--so-head) !important; font-weight: 800 !important; font-size: 15px !important; }
html body :is(.verdict:not(#verdict), .alert-cta) { background: var(--so-green-800) !important; border-radius: 24px !important; border: none !important; }
html body .verdict:not(#verdict) h3 { color: var(--so-green-300) !important; font-size: 22px !important; }
html body .verdict-item dt { color: rgba(255,255,255,0.65) !important; font-size: 13px !important; }
html body .verdict-item dd { font-size: 16px !important; }
html body .stats-link a, html body .stats-link a:hover { border-radius: 10px !important; }

/* Inline-styled boxes inherited from older pages */
html body [style*="border-left:5px"], html body [style*="border-left: 5px"], html body [style*="border-left:4px"], html body [style*="border-left: 4px"] {
  border: none !important;
  border-radius: var(--so-radius) !important;
}
html body [style*="background:#e8f5ee"], html body [style*="background: #e8f5ee"] { background: var(--so-green-100) !important; }
html body [style*="background:#1a3a2a"], html body [style*="background: #1a3a2a"] { background: var(--so-green-800) !important; }
html body a[style*="display:inline-block"][style*="background"], html body a[style*="display: inline-block"][style*="background"] { border-radius: 10px !important; }

/* ---------- Sidebars ---------- */
html body :is(.sidebar-block, .sb-block) { background: #fff !important; border: 1px solid var(--so-line) !important; border-radius: var(--so-radius) !important; box-shadow: none !important; overflow: hidden; }
html body :is(.sb-hd, .sidebar-hd, .hd) { background: transparent !important; color: var(--so-ink) !important; font-family: var(--so-head) !important; font-size: 19px !important; font-weight: 800 !important; padding: 18px 18px 0 !important; }
html body .sb-link { border-radius: 10px !important; }



/* ---------- Inline alert widget ---------- */
html body .inline-alert-widget {
  background: var(--so-green-800) !important;
  color: #fff;
  border: none !important;
  border-radius: 22px !important;
  padding: 24px !important;
}
html body .inline-alert-widget .iaw-icon { display: flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(127,211,159,0.18); color: var(--so-green-300); font-size: 22px !important; }
html body .inline-alert-widget strong { color: #fff !important; font-family: var(--so-head) !important; font-size: 21px !important; font-weight: 800 !important; }
html body .inline-alert-widget p { color: #cfe6d7 !important; }
html body .inline-alert-widget :is(input) { border-radius: 10px !important; border: none !important; min-height: 48px; background: #fff !important; color: var(--so-ink) !important; }
html body .inline-alert-widget :is(button, .iaw-btn) { border-radius: 10px !important; background: var(--so-green-300) !important; color: var(--so-green-800) !important; font-weight: 700 !important; border: none !important; min-height: 48px; }

/* ---------- Buttons and inputs ---------- */
html body :is(button, .btn, .btn-primary, .btn-secondary, .cta-btn-primary, .cta-btn-secondary, .cta-inline-btn, .iaw-btn, .submit-btn, .alert-cta-btn, .empty-btn-primary, .empty-btn-secondary, .submit-cta-btn, .btn-unsub, .btn-home, .btn-stay, .filter-btn, .diff-btn, .radio-btn, .variant-tab, .stats-link a, .guide-cta, .cc-cta, .feature-btn, .show-more-btn, .sb-btn) { border-radius: 10px !important; font-weight: 700 !important; }
html body :is(.cta-inline-btn, .submit-btn, .alert-cta-btn, .empty-btn-primary, .submit-cta-btn, .btn-primary, .cta-btn-primary) { background: var(--so-green-600) !important; color: #fff !important; border: none !important; }
html body :is(input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], select, textarea) { border-radius: 10px !important; }
html body .cta-inline-email { border: 2px solid var(--so-line) !important; background: #fff !important; min-height: 48px; }
html body .cta-inline-btn { min-height: 48px; }

/* ---------- Tags and chips ---------- */
html body :is(.course-tag, .pb-tag, .role-tag, .ag-badge, .milestone-badge, .shoe-condition, .ctag, .tick, .v-label) { border-radius: 999px !important; }

/* ---------- Tables ---------- */
html body table { border-collapse: separate !important; border-spacing: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--so-line); background: #fff; }
html body table th { background: var(--so-green-800) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; }

/* ---------- Icons replacing emoji ---------- */
.so-ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: 0 0 auto; }


/* ---------- Shared call-to-action band ---------- */
.so-cta-band { max-width: 1200px; margin: 0 auto; padding: 56px 24px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .so-cta-band { grid-template-columns: 1fr; } }
.so-cta-card { border-radius: 26px; padding: 34px 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.so-cta-card.dark { background: var(--so-green-800); color: #fff; }
.so-cta-card.light { background: var(--so-green-100); color: var(--so-ink); }
html body .so-cta-card h2 { margin: 0; font-size: clamp(28px, 3.4vw, 38px) !important; line-height: 1.02 !important; font-weight: 900 !important; font-stretch: 88%; }
.so-cta-card.dark h2 { color: #fff; }
.so-cta-card p { margin: 0; font-size: 17px; line-height: 1.55; }
.so-cta-card.dark p { color: #cfe6d7; }
.so-cta-card.light p { color: var(--so-mid); }
.so-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 20px; border-radius: 10px; border: none; cursor: pointer; }
.so-btn.mint { background: var(--so-green-300); color: var(--so-green-800); }
.so-btn.mint:hover { background: #fff; color: var(--so-green-800); }
.so-btn.dark { background: var(--so-green-800); color: #fff; }
.so-btn.dark:hover { background: var(--so-green-600); color: #fff; }
.so-btn.outline { background: transparent; color: var(--so-green-800); border: 2px solid var(--so-green-800); padding: 12px 18px; }
.so-btn.outline:hover { background: var(--so-green-800); color: #fff; }
.so-btn.coffee { background: #ffdd00; color: #1a1a1a; }
.so-btn.coffee:hover { background: #ffe94d; color: #1a1a1a; }

/* ---------- Shared footer ---------- */
.so-footer { background: #fff; border-top: 1px solid var(--so-line); margin-top: 40px; color: var(--so-mid); }
.so-footer-inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.so-footer-brand p { margin: 12px 0 18px; font-size: 15px; line-height: 1.6; max-width: 360px; }
html body .so-footer .so-logo { color: var(--so-green-800); }
html body .so-footer .so-logo span { color: var(--so-green-600); }
html body .so-footer h3 { font-size: 16px !important; font-weight: 800 !important; color: var(--so-ink); margin: 4px 0 12px; }
.so-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.so-footer ul a { color: var(--so-mid); text-decoration: none; font-size: 15px; font-weight: 500; }
.so-footer ul a:hover { color: var(--so-green-600); text-decoration: underline; }
.so-footer-bottom { max-width: 1200px; margin: 0 auto; padding: 18px 24px 36px; border-top: 1px solid var(--so-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--so-soft); }
@media (max-width: 860px) { .so-footer-inner { grid-template-columns: 1fr 1fr; } .so-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .so-footer-inner { grid-template-columns: 1fr; } .so-cta-card { padding: 26px 22px; } }

/* Footer guards against older page styles */
html body footer.so-footer { text-align: left !important; padding: 0 !important; background: #fff !important; }
html body .so-footer p { color: var(--so-mid) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; }
html body .so-footer h3 { color: var(--so-ink) !important; }
html body .so-footer a.so-btn.coffee { color: #1a1a1a !important; }
html body .so-footer .so-footer-bottom span { color: var(--so-soft) !important; font-size: 14px; }
.so-cta-band, .so-footer, .so-header { width: 100%; box-sizing: border-box; }
.so-cta-band *, .so-footer *, .so-header * { box-sizing: border-box; }
html body .quick-stats a { color: var(--so-green-600) !important; }
.so-photo-ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--so-green-300); background: rgba(127,211,159,0.14); padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.so-photo-ask:hover { color: #fff; }

/* ---------- Cookie choice ---------- */
.so-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 500; max-width: 720px; margin: 0 auto; background: var(--so-green-900); color: #fff; border-radius: 18px; padding: 16px 18px; display: none; flex-wrap: wrap; gap: 12px; align-items: center; box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.so-cookie p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.5; color: #cfe6d7; }
.so-cookie a { color: var(--so-green-300); }
.so-cookie-btns { display: flex; gap: 8px; }
html body .so-cookie button { font-size: 14px; font-weight: 700; padding: 10px 14px; min-height: 44px; border-radius: 10px !important; cursor: pointer; }
.so-cookie-no { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.so-cookie-yes { background: var(--so-green-300); color: var(--so-green-800); border: none; }
.so-footer-bottom button.so-linkish { background: none; border: none; padding: 0; color: var(--so-soft); text-decoration: underline; font: inherit; cursor: pointer; }
.so-report-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 18px 24px; border-radius: 18px; border: 2px dashed var(--so-green-600); color: var(--so-ink); text-decoration: none; font-size: 16px; }
.so-report-strip span { font-weight: 700; color: var(--so-green-600); }
.so-report-strip span::after { content: " \2192"; }
.so-report-strip:hover { background: var(--so-green-100); color: var(--so-ink); }
@media (max-width: 1120px) {
  html body nav.so-nav { display: none !important; }
  .so-burger { display: flex; }
}

/* ---------- Dark panels: keep their text light ---------- */
html body :where(.verdict-box, .submit-cta, .alert-cta, .inline-alert-widget, .calc-result, .verdict:not(#verdict), .feature-wrap) :is(h1, h2, h3, h4, p, li, dt, dd, span, label, strong, small, em, div:not([class*="btn"])) { color: #e6f2ea !important; }
html body :where(.verdict-box, .submit-cta, .alert-cta, .inline-alert-widget, .calc-result, .verdict:not(#verdict)) :is(h2, h3, .submit-cta-title) { color: #ffffff !important; }
html body :where(.verdict-box, .submit-cta, .alert-cta, .inline-alert-widget, .calc-result, .verdict:not(#verdict)) a:not([class*="btn"]):not(.so-btn) { color: var(--so-green-300) !important; }
html body :is(.verdict-box, .submit-cta, .alert-cta, .inline-alert-widget) :is(button, .btn, a[class*="btn"]) { color: var(--so-green-800) !important; background: var(--so-green-300) !important; }
html body :is(.verdict-box, .submit-cta, .alert-cta, .inline-alert-widget) :is(button, a[class*="btn"]) * { color: var(--so-green-800) !important; }
html body :is(.verdict-box, .submit-cta, .alert-cta, .inline-alert-widget) input { color: var(--so-ink) !important; }

/* ---------- Small contrast fixes ---------- */
html body .milestone-badge.m-500 { background: #8a6500 !important; }
html body [style*="color:#8a9e92"], html body [style*="color: #8a9e92"] { color: var(--so-soft) !important; }
html body .unsub-note { color: var(--so-soft) !important; }
html body .submit-cta > a:not(#so-x), html body .submit-cta-actions a:not(#so-x) { color: var(--so-green-800) !important; background: var(--so-green-300) !important; border: none !important; border-radius: 10px !important; }

/* Tablet menu: some older course pages force the menu hidden; the open state must win */
html body .mobile-menu.so-mobile.open { display: block !important; }
/* iPhones zoom into form fields with text under 16px, which breaks the layout. Keep fields at 16px on touch-sized screens. */
@media (max-width: 1120px) { html body :is(input, select, textarea) { font-size: 16px !important; } }

/* WhatsApp share prompt after signup */
.so-share { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; max-width: 420px; margin: 0 auto; background: var(--so-green-800); color: #fff; border-radius: 20px; padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35); transform: translateY(30px); opacity: 0; transition: transform .35s ease, opacity .35s ease; font-family: 'Instrument Sans', system-ui, sans-serif; }
.so-share.show { transform: none; opacity: 1; }
html body .so-share p { margin: 0; color: #e6f2ea !important; }
html body .so-share .so-share-k { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--so-green-300) !important; margin-bottom: 6px; }
html body .so-share .so-share-h { font-family: var(--so-head); font-stretch: 112%; font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1.1; color: #fff !important; margin-bottom: 8px; }
html body .so-share .so-share-p { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
html body .so-share .so-share-wa { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--so-green-300); color: var(--so-green-800) !important; text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 18px; border-radius: 12px; }
html body .so-share .so-share-wa:hover { background: #9ee0b6; }
html body .so-share .so-share-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; color: #cfe6d7 !important; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 10px; padding: 0; }
html body .so-share .so-share-x:hover { background: rgba(255,255,255,.08); }

/* Frost checker: signup inside the result */
html body .chk-signup { background: var(--so-green-800); border-radius: 18px; padding: 22px; margin: 4px 0 14px; }
html body .chk-signup .chk-title { font-family: var(--so-head); font-stretch: 112%; font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: 1.15; color: #fff !important; margin: 0 0 6px; }
html body .chk-signup .chk-sub { font-size: 15px; line-height: 1.5; color: #cfe6d7 !important; margin: 0 0 14px; }
html body .chk-signup .chk-form { display: flex; gap: 10px; flex-wrap: wrap; }
html body .chk-signup input { flex: 1 1 200px; min-width: 0; padding: 14px 16px; border: 0; border-radius: 12px; font-size: 16px; color: var(--so-ink) !important; background: #fff; }
html body .chk-signup button { flex: 0 0 auto; padding: 14px 22px; border: 0; border-radius: 12px; background: var(--so-green-300) !important; color: var(--so-green-800) !important; font-weight: 700; font-size: 16px; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
html body .chk-signup button:disabled { opacity: .6; }
html body .chk-signup .chk-msg { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: #fff !important; }
html body .chk-signup .chk-small { margin: 10px 0 0; font-size: 13px; color: #9fbfac !important; }
html body .chk-signup .chk-small a { color: var(--so-green-300) !important; }
html body .chk-signup .chk-frost { display: flex !important; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #e6f2ea !important; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
html body .chk-signup .chk-frost[style*="none"] { display: none !important; }
html body .chk-signup .chk-frost span { flex: 1; min-width: 0; color: #e6f2ea !important; }
html body .chk-signup .chk-frost input { flex: none; padding: 0; margin: 0; border-radius: 4px; accent-color: var(--so-green-300); background: #fff; }
@media (max-width: 480px) { html body .chk-signup button { flex: 1 1 100%; } }

/* Parkrun name dropdown (replaces datalist) */
.so-ac { position: relative; flex: 1; min-width: 200px; }
@media (max-width: 640px) { .so-ac { width: 100%; min-width: 0; } }
.so-ac > input { width: 100%; box-sizing: border-box; }
html body .so-ac-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--so-line, #d6e7dc); border-radius: 12px; box-shadow: 0 16px 40px rgba(12,34,22,.18); max-height: 300px; overflow-y: auto; }
html body .so-ac-list li { padding: 12px 14px; border-radius: 8px; font-size: 16px; color: var(--so-ink) !important; cursor: pointer; }
html body .so-ac-list li:hover, html body .so-ac-list li.on { background: var(--so-green-100, #eef6f1); }

/* Readability on phones: small tags never below 12px, tick-boxes big enough to tap */
html body :is(.cc-stat, .role-tag, .pb-tag, .shoe-condition, .calc-label, .ag-badge, .ctag, .course-tag) { font-size: 12px !important; }
html body input[type="checkbox"] { width: 24px !important; height: 24px !important; min-width: 24px; flex: none; accent-color: var(--so-green-600); cursor: pointer; }

/* Sidebar signup box on course pages (dark panel) */
html body .alert-signup-sb .sb-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; min-width: 0; width: 100%; }
html body .alert-signup-sb .cta-inline-email { width: 100%; min-width: 0; height: 50px; padding: 0 14px; font-size: 16px; background: #fff !important; color: var(--so-ink) !important; border: 2px solid transparent !important; border-radius: 10px; box-sizing: border-box; }
html body .alert-signup-sb .cta-inline-btn { width: 100%; height: 50px; background: var(--so-green-300) !important; color: var(--so-green-800) !important; border: none !important; border-radius: 10px !important; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
html body .alert-signup-sb .cta-inline-msg { color: #e6f2ea !important; font-size: 14px; }
html body .alert-signup-sb .cta-inline-msg.error { color: #ffd2cc !important; }
html body div.nearby-event { cursor: default; }

/* Phone notifications */
html body .so-share .so-share-push { display: block; width: 100%; margin-top: 10px; background: transparent; color: #fff !important; border: 1.5px solid rgba(127,211,159,.55); font-family: inherit; font-weight: 700; font-size: 15px; padding: 13px 16px; border-radius: 12px; cursor: pointer; }
html body .so-share .so-share-copy { display: block; width: 100%; margin-top: 10px; background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.35) !important; border-radius: 10px !important; padding: 12px 14px; font-weight: 700; font-size: 15px; cursor: pointer; }
html body .so-share .so-share-copy:hover { background: rgba(255,255,255,.06); }
html body .so-share .so-share-push:hover { background: rgba(255,255,255,.06); }
html body .so-share .so-share-push:disabled { opacity: .7; cursor: default; }
html body .so-share a.so-share-push { text-align: center; text-decoration: none; box-sizing: border-box; }
html body .so-share .so-share-n { font-size: 14px; line-height: 1.5; margin-top: 12px; color: #cfe6d7 !important; }
.so-push-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--so-green-300); padding: 10px 12px 10px 16px; font-family: var(--so-body); }
html body .so-push-bar a { color: var(--so-green-800) !important; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.so-push-bar button { border: 0; background: transparent; color: var(--so-green-800); font-size: 24px; line-height: 1; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; padding: 0; }

/* Guide credit card, with a supporter variant for runners who have donated */
.so-credit { display: flex; gap: 16px; align-items: flex-start; background: var(--so-green-100); border: 1px solid #cfe5d7; border-radius: 16px; padding: 18px 20px; margin: 0 0 28px; }
.so-credit-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--so-green-800); color: var(--so-green-300); display: flex; align-items: center; justify-content: center; font-family: var(--so-head); font-stretch: 112%; font-weight: 900; font-size: 22px; }
.so-credit-body { flex: 1; min-width: 0; }
html body .article .so-credit p { margin: 0; }
html body .so-credit .so-credit-k { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--so-green-700); margin-bottom: 2px; }
html body .so-credit .so-credit-name { font-family: var(--so-head); font-stretch: 112%; font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: 1.15; color: var(--so-ink); margin-bottom: 6px; }
html body .so-credit .so-credit-p { font-size: 15px; line-height: 1.6; color: var(--so-mid); }
html body .so-credit .so-credit-p a { color: var(--so-green-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.so-supporter-badge { display: inline-flex; align-items: center; gap: 6px; background: #ffd43b; color: #3d2c00; border-radius: 999px; padding: 4px 10px 4px 8px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 8px; font-family: var(--so-body); }
.so-supporter-badge svg { width: 14px; height: 14px; }
.so-credit.supporter { background: #fffbea; border: 2px solid #ffd43b; }
.so-credit.supporter .so-credit-avatar { background: #ffd43b; color: #3d2c00; }
.cc-supporter { display: inline-flex; align-items: center; gap: 5px; background: #ffd43b; color: #3d2c00; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
@media (max-width: 480px) { .so-credit { padding: 16px; gap: 12px; } .so-credit-avatar { flex-basis: 40px; width: 40px; height: 40px; font-size: 18px; } }

/* Supporter badge sits next to the author's name, with a "What is this?" explainer */
.so-credit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
html body .article .so-credit .so-credit-row .so-credit-name { margin: 0; }
.so-sup { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.so-sup .so-supporter-badge { margin: 0; }
html body .so-sup-q { background: none; border: 0; padding: 4px 2px; font: 600 13px/1.2 var(--so-body); color: var(--so-green-700) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.so-sup-pop { display: none; position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; width: 300px; max-width: calc(100vw - 48px); background: var(--so-green-800); color: #e6f2ea; border-radius: 14px; padding: 16px 18px; font: 400 14px/1.55 var(--so-body); box-shadow: 0 16px 40px rgba(0,0,0,.28); text-align: left; }
.so-sup-pop::before { content: ""; position: absolute; top: -6px; left: 22px; width: 12px; height: 12px; background: var(--so-green-800); transform: rotate(45deg); }
.so-sup-pop strong { display: block; color: #fff; font-weight: 700; margin-bottom: 4px; }
html body .so-sup-pop .so-sup-cta { display: block; width: fit-content; margin-top: 12px; background: #ffd43b; color: #3d2c00 !important; text-decoration: none; font-weight: 700; padding: 9px 14px; border-radius: 10px; }
.so-sup.open .so-sup-pop { display: block; }
@media (hover: hover) { .so-sup:hover .so-sup-pop, .so-sup:focus-within .so-sup-pop { display: block; } }
@media (max-width: 480px) { .so-sup { position: static; } .so-credit.supporter { position: relative; } .so-sup-pop { left: 0; right: 0; width: auto; max-width: none; } .so-sup-pop::before { display: none; } }

/* Contributors with several guides */
.so-credit.top { border: 2px solid var(--so-green-600); }
.so-top-badge { display: inline-flex; align-items: center; background: var(--so-green-800); color: var(--so-green-300); border-radius: 999px; padding: 4px 11px; font-family: var(--so-body); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
html body .article .so-credit .so-credit-more { margin-top: 8px; font-size: 14px; color: var(--so-mid); }
html body .so-credit .so-credit-more a { color: var(--so-green-700); font-weight: 700; }

/* Article photos on pages that don't style them themselves */
:where(.article) :where(.article-photo) { margin: 24px 0; }
:where(.article-photo) img { width: 100%; height: auto; display: block; max-height: 520px; object-fit: cover; border-radius: 14px; }
:where(.article-photo) figcaption { font-size: 13px; color: var(--so-soft); font-weight: 600; padding: 8px 0; }

html body .so-mailfix { display: block; margin: 8px 0 4px; padding: 8px 12px; background: #fff4e5; border: 1px solid #f0c48a; border-radius: 10px; color: #3b2a14 !important; font-size: 14px; line-height: 1.4; text-align: left; font-family: 'Instrument Sans', system-ui, sans-serif; }
html body .so-mailfix button { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: #7a3a00 !important; text-decoration: underline; cursor: pointer; word-break: break-all; }
.so-btn.wa { background: var(--so-green-300); color: var(--so-green-800); margin: 14px 10px 0 0; }
.so-btn.wa:hover { background: #9ee0b6; color: var(--so-green-800); }

/* ---------- Usability fixes, Nov 2026 ---------- */
html body { margin: 0; }
html.so-cookie-open { scroll-padding-bottom: var(--so-cookie-room, 0px); }
html.so-cookie-open body { padding-bottom: var(--so-cookie-room, 0px); }
@media (max-width: 640px) {
  .so-cookie { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; gap: 10px; }
  .so-cookie p { flex-basis: 100%; font-size: 14px; line-height: 1.4; }
  .so-cookie-btns { width: 100%; }
  html body .so-cookie .so-cookie-btns button { flex: 1; }
}
html body .so-share .so-share-x { width: 44px; height: 44px; top: 8px; right: 8px; }
html body .so-share .so-share-ok { font-size: 15px; line-height: 1.5; margin: 0 40px 12px 0; color: #fff !important; font-weight: 600; }
html body .so-share .so-share-h:focus { outline: none; }
/* Focus rings: dark green on light backgrounds, light green on dark ones */
:focus-visible { outline: 3px solid var(--so-green-700); outline-offset: 2px; }
:is(.so-header, .so-footer, .mobile-menu, .so-share, .so-cookie, .join-card.dark, .so-home-hero, .tools-band, .pn-hero) :focus-visible { outline-color: var(--so-green-300); }
html body :is(input, select, textarea):focus-visible { outline: 3px solid var(--so-green-700) !important; outline-offset: 1px; }
html body :is(.so-home-hero, .join-card.dark) :is(input, select, textarea):focus-visible { outline-color: var(--so-green-300) !important; }
html body .so-ac-list li.on { background: var(--so-green-700) !important; color: #fff !important; }
.so-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: #fff; color: var(--so-green-800) !important; font-weight: 700; padding: 12px 16px; border-radius: 10px; text-decoration: none; }
.so-skip:focus { top: 12px; }
.so-main-anchor { display: block; height: 0; outline: none; }