/* Scouting Robotics — Brand tokens
   Palette: Teal-cyan #018FA6 + electric yellow #E5E900 on warm off-white.
   Type: Orbitron (display) + Space Grotesk (body) + JetBrains Mono (meta).
*/
:root {
  /* Surfaces */
  --sr-parchment: #F7F4EC;
  --sr-parchment-2: #ECE6D6;
  --sr-cream: #FAF8F2;
  --sr-bone: #FFFFFF;

  /* Brand — primary palette */
  --sr-teal: #018FA6;        /* primary */
  --sr-teal-2: #02A8C2;      /* hover light */
  --sr-teal-deep: #015F70;   /* deep */
  --sr-teal-ink: #003B47;    /* near-black teal for dark surfaces */
  --sr-yellow: #E5E900;      /* electric accent */
  --sr-yellow-2: #F0F33D;
  --sr-yellow-deep: #BDC100;

  /* Legacy / supporting (used by earlier A/B/C variations & for crest categories) */
  --sr-amber: #E5E900;       /* alias \u2014 keep var name working */
  --sr-amber-2: #F0F33D;
  --sr-rust: #C9892B;        /* warm support */

  /* Neutrals */
  --sr-ink: #0F1419;
  --sr-slate: #3F4A52;
  --sr-slate-2: #6F7570;
  --sr-mist: #D8D4CA;
  --sr-rule: #D6D2C5;

  /* Type stacks */
  --sr-display: 'Orbitron', 'Space Grotesk', system-ui, sans-serif;
  --sr-sans:    'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --sr-mono:    'JetBrains Mono', 'Geist Mono', ui-monospace, Menlo, monospace;
  --sr-serif:   'Newsreader', Georgia, serif;  /* retained for A's editorial flavor */

  /* Radii / shadows */
  --sr-r-pill: 999px;
  --sr-r-sm: 4px;
  --sr-r-md: 12px;
  --sr-r-lg: 22px;
  --sr-shadow-1: 0 1px 0 rgba(15,20,25,0.06), 0 8px 24px -12px rgba(15,20,25,0.18);
  --sr-shadow-2: 0 1px 0 rgba(15,20,25,0.06), 0 22px 50px -22px rgba(15,20,25,0.28);
  --sr-shadow-stamp: 4px 4px 0 var(--sr-ink);
}

/* Base */
.sr-page {
  background: var(--sr-parchment);
  color: var(--sr-ink);
  font-family: var(--sr-sans);
  font-feature-settings: 'ss01';
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* ── Full-width escape: break out of any theme content column ── */
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}
.sr-page * { box-sizing: border-box; }
.sr-page h1, .sr-page h2, .sr-page h3, .sr-page h4 {
  margin: 0; line-height: 1.05; letter-spacing: -0.025em;
  font-family: var(--sr-display) !important; font-weight: 700;
  text-transform: uppercase !important;
}
.sr-page p { margin: 0; }

.sr-mono    { font-family: var(--sr-mono); font-weight: 500; letter-spacing: 0.04em; }
.sr-serif   { font-family: var(--sr-serif); }
.sr-display { font-family: var(--sr-display) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: -0.01em; }
.sr-eyebrow {
  font-family: var(--sr-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sr-slate);
  font-weight: 500;
}

/* Buttons \u2014 pill */
.sr-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: var(--sr-r-pill);
  font-family: var(--sr-sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.sr-btn:hover { transform: translateY(-1px); }
.sr-btn-primary { background: var(--sr-teal); color: #fff; }
.sr-btn-primary:hover { background: var(--sr-teal-deep); }
.sr-btn-yellow { background: var(--sr-yellow); color: var(--sr-ink); border-color: var(--sr-ink); }
.sr-btn-yellow:hover { background: var(--sr-yellow-2); }
.sr-btn-amber { background: var(--sr-yellow); color: var(--sr-ink); }   /* alias for older variations */
.sr-btn-amber:hover { background: var(--sr-yellow-2); }
.sr-btn-ghost { background: transparent; color: var(--sr-ink); border-color: var(--sr-ink); }
.sr-btn-ghost:hover { background: var(--sr-ink); color: var(--sr-bone); }
.sr-btn-on-dark { background: transparent; color: var(--sr-bone); border-color: rgba(255,255,255,0.6); }
.sr-btn-on-dark:hover { background: var(--sr-bone); color: var(--sr-teal-deep); }
.sr-btn-stamp { border: 2px solid var(--sr-ink); box-shadow: var(--sr-shadow-stamp); }
.sr-btn-stamp:hover { box-shadow: 6px 6px 0 var(--sr-ink); }

/* Photo placeholder \u2014 diagonal stripes + mono caption */
.sr-photo {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(1,143,166,0.10) 0 8px,
      rgba(1,143,166,0) 8px 16px),
    var(--sr-parchment-2);
  border: 1px solid var(--sr-rule);
  border-radius: var(--sr-r-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--sr-teal-deep);
}
.sr-photo--dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(229,233,0,0.18) 0 8px,
      rgba(229,233,0,0) 8px 16px),
    var(--sr-teal-ink);
  color: var(--sr-yellow);
  border-color: rgba(255,255,255,0.12);
}
.sr-photo--yellow {
  background:
    repeating-linear-gradient(135deg,
      rgba(15,20,25,0.10) 0 8px,
      rgba(15,20,25,0) 8px 16px),
    var(--sr-yellow-2);
  color: var(--sr-ink);
}
.sr-photo__label {
  font-family: var(--sr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--sr-bone);
  border: 1px solid var(--sr-rule);
  padding: 6px 10px;
  border-radius: 4px;
}
.sr-photo--dark .sr-photo__label {
  background: rgba(0,0,0,0.4); color: var(--sr-yellow);
  border-color: rgba(229,233,0,0.3);
}

/* Hairline */
.sr-rule { height: 1px; background: var(--sr-rule); border: 0; margin: 0; }

/* Container widths */
.sr-container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.sr-container--narrow { max-width: 880px; margin: 0 auto; padding: 0 48px; }

/* Chip */
.sr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid var(--sr-ink);
  background: var(--sr-bone);
  font-family: var(--sr-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sr-ink); font-weight: 600;
}
.sr-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sr-yellow);
  outline: 1px solid var(--sr-ink);
}

/* Orbitron tightening (it's wide by default) */
.sr-display {
  font-feature-settings: 'tnum';
}

/* ============================================================
   RESPONSIVE
   Mobile-first overrides. Inline grid styles are caught via
   attribute selectors so we don't need to edit every page.
   ============================================================ */

/* Prevent horizontal scroll from any oversize content */
.sr-page { overflow-x: clip; }
img { max-width: 100%; height: auto; }

/* Tablet (≤ 1024px) ---------------------------------------- */
@media (max-width: 1024px) {
  .sr-container,
  .sr-container--narrow {
    padding: 0 28px;
  }
  /* Heading caps */
  .sr-page h1 { font-size: clamp(40px, 7vw, 84px) !important; }
  .sr-page h2 { font-size: clamp(32px, 5.6vw, 64px) !important; }
  .sr-page h3 { font-size: clamp(20px, 3vw, 32px) !important; }
}

/* Mobile (≤ 760px) ----------------------------------------- */
@media (max-width: 760px) {
  .sr-container,
  .sr-container--narrow {
    padding: 0 18px !important;
  }

  /* Stack ANY 2- or 3- or 4- column inline grid into one column */
  .sr-page [style*="grid-template-columns: 1fr 1fr"],
  .sr-page [style*="grid-template-columns:1fr 1fr"],
  .sr-page [style*="grid-template-columns: 1.1fr 1fr"],
  .sr-page [style*="grid-template-columns: 1.2fr 1fr"],
  .sr-page [style*="grid-template-columns: 1.3fr 1fr"],
  .sr-page [style*="grid-template-columns: 1.4fr 1fr"],
  .sr-page [style*="grid-template-columns: 1.5fr 1fr"],
  .sr-page [style*="grid-template-columns: 1.6fr 1fr"],
  .sr-page [style*="grid-template-columns: 1fr 1.1fr"],
  .sr-page [style*="grid-template-columns: 1fr 1.2fr"],
  .sr-page [style*="grid-template-columns: 1fr 1.3fr"],
  .sr-page [style*="grid-template-columns: 0.9fr"],
  .sr-page [style*="grid-template-columns: 160px"],
  .sr-page [style*="grid-template-columns: 220px"],
  .sr-page [style*="grid-template-columns: 320px"],
  .sr-page [style*="grid-template-columns: 120px"],
  .sr-page [style*="repeat(2,"],
  .sr-page [style*="repeat(2 ,"],
  .sr-page [style*="repeat(3,"],
  .sr-page [style*="repeat(4,"],
  .sr-page [style*="repeat(5,"],
  .sr-page [style*="repeat(6,"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Reduce big paddings on sections */
  .sr-page section { padding-top: clamp(56px, 12vw, 96px) !important; padding-bottom: clamp(56px, 12vw, 96px) !important; }

  /* Heading caps */
  .sr-page h1 { font-size: clamp(36px, 10vw, 60px) !important; line-height: 1 !important; }
  .sr-page h2 { font-size: clamp(28px, 7.5vw, 44px) !important; line-height: 1.05 !important; }
  .sr-page h3 { font-size: clamp(18px, 5vw, 26px) !important; }
  .sr-page p  { font-size: 15px !important; }

  /* Reduce ghost / hero decorative text */
  .sr-page [aria-hidden] { display: none !important; }

  /* Nav: hide secondary nav links + tighten CTA */
  .sr-page header nav { display: none !important; }
  .sr-page header > div { padding: 14px 18px !important; gap: 8px !important; }
  .sr-page header .sr-btn { padding: 8px 12px !important; font-size: 12.5px !important; }

  /* Buttons row wraps */
  .sr-page .sr-btn { white-space: normal; font-size: 13.5px !important; padding: 10px 16px !important; }

  /* Sticky sidebars unstick */
  .sr-page aside[style*="sticky"] { position: static !important; top: auto !important; }

  /* Horizontal toolbar (catalog) — stack */
  .sr-catalog__toolbar { grid-template-columns: 1fr !important; }

  /* Marquee strip — speed up + shrink */
  .sr-page [style*="white-space: nowrap"] { padding: 12px 0 !important; }
}

/* Crest stack hero (hide the decorative floating crests on mobile) */
@media (max-width: 760px) {
  .sr-page section:first-of-type [style*="position: absolute"][style*="filter: drop-shadow"] {
    display: none;
  }
}

/* Ensure home page never forces 1440px width */
.sr-page[style*="1440"] { width: auto !important; max-width: 100% !important; }


/* ══════════════════════════════════════════════════════════════
   ORBITRON ALWAYS UPPERCASE — catch-all rules
   These override any theme/plugin that resets text-transform.
   ══════════════════════════════════════════════════════════════ */
[style*="Orbitron"],
[style*="var(--sr-display)"],
.sr-display,
.sr-page h1,
.sr-page h2,
.sr-page h3,
.sr-page h4 {
  text-transform: uppercase !important;
}

/* Buttons must NOT be uppercase (they use Space Grotesk, not Orbitron) */
.sr-btn,
.sr-btn * {
  text-transform: none !important;
  font-family: var(--sr-sans) !important;
}

/* Quote/blockquote text must not be uppercase */
blockquote,
blockquote p,
.sr-home blockquote,
[style*="font-weight: 500"][style*="font-family"] {
  text-transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   THEME ESCAPE — ensure .sr-page fills the full viewport regardless
   of what theme content wrappers surround it.
   The margin trick pushes .sr-page to viewport edges even when
   nested inside a narrow .entry-content, .site-content, etc.
   ══════════════════════════════════════════════════════════════════ */

/* Any direct ancestors that might constrain width */
.sr-page,
.sr-page ~ *,
body.page .sr-page {
    max-width: 100% !important;
}

/* Override common theme content wrappers when they contain .sr-page */
.entry-content:has(.sr-page),
.post-content:has(.sr-page),
.site-content:has(.sr-page),
.page-content:has(.sr-page),
.wp-block-group:has(.sr-page),
main:has(.sr-page),
article:has(.sr-page) {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fallback for browsers without :has() support — target the wrappers directly */
.hentry,
.entry-content,
.post-content,
.page-content {
    /* Only override when sr-page is present — JS will add a class to <body> */
}
body.sr-active-page .hentry,
body.sr-active-page .entry-content,
body.sr-active-page .post-content,
body.sr-active-page .page-content,
body.sr-active-page .site-content,
body.sr-active-page article.page,
body.sr-active-page .wp-block-post-content {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   UNIFORM BUTTON SIZING
   Uses html body prefix for maximum specificity to beat any theme CSS.
   Reference: nav "Register for Camp" = 10px 18px, 14px, line-height 1.2
   ══════════════════════════════════════════════════════════════════ */
html body .sr-btn,
html body a.sr-btn,
html body button.sr-btn {
    padding-top:    10px !important;
    padding-bottom: 10px !important;
    padding-left:   18px !important;
    padding-right:  18px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Compact: nav header context */
html body .sr-page header .sr-btn,
html body .tc-nav .sr-btn {
    padding-top:    8px !important;
    padding-bottom: 8px !important;
    padding-left:   12px !important;
    padding-right:  12px !important;
    font-size: 12.5px !important;
}

/* Compact: workbook chrome */
html body .wb-chrome .sr-btn {
    padding-top:    8px !important;
    padding-bottom: 8px !important;
    font-size: 13px !important;
}

/* Text-link variant (hero interest list): no horizontal padding */
html body .sr-btn[style*="padding-left:0"],
html body .sr-btn[style*="padding-left: 0"] {
    padding-left:  0 !important;
    padding-right: 0 !important;
}