body {
  margin: 0;
  padding: 0;
}

:where(.scc-page-wrapper) :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
}

/* Structural overrides for new-page wrapper (legacy style.css is dequeued
   on new templates in header.php, so attribute-selector defensives are gone) */
body.home #wrapper,
#wrapper.scc-page-wrapper {
    max-width: none !important;
    box-shadow: none;
    overflow: visible;
}

/* Clip horizontal overflow at the page wrapper only. Using `overflow-x: clip`
   (not `hidden`) so the wrapper does NOT become a containing block for
   position: absolute children — desktop header dropdowns still escape
   vertically, the news mobile carousel still scrolls inside its own
   overflow-x: auto container. This replaces the `#wrapper { overflow: hidden }`
   the legacy theme used to provide. */
.scc-page-wrapper {
  overflow-x: clip;
}

/* Global border-box reset for every BEM component. Prevents any class that
   combines an explicit `width` with `padding` from blowing past the viewport
   — which was the root cause of mobile horizontal scroll on the hero/mission
   content columns. Matches the convention already used inside most
   components; formalizes it site-wide so future components can't regress. */
[class^="scc-"],
[class^="scc-"]::before,
[class^="scc-"]::after,
[class*=" scc-"],
[class*=" scc-"]::before,
[class*=" scc-"]::after {
  box-sizing: border-box;
}

/* Belt-and-braces for the two mobile wrappers known to blow out the viewport
   (the hero content column and the mission narrative wrapper each set
   `width: 100%` + horizontal padding). The global border-box rule above
   should cover these, but pin explicit max-widths so even if a future rule
   forgets box-sizing the container still stays within the viewport. */
.scc-hero__content-mobile,
.scc-mission__mobile-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Form element base — legacy style.css is dequeued on new templates, so
   inputs/textareas/selects no longer inherit font/color from the browser's
   user-agent stylesheet quirks the prototype relied on. :where() keeps
   specificity at 0 so any page-specific class style (e.g. .scc-faq-search-input,
   .scc-footer__newsletter-input, .scc-connect-form__input) continues to win. */
:where(.scc-page-wrapper) input[type="text"],
:where(.scc-page-wrapper) input[type="email"],
:where(.scc-page-wrapper) input[type="search"],
:where(.scc-page-wrapper) input[type="tel"],
:where(.scc-page-wrapper) input[type="url"],
:where(.scc-page-wrapper) input[type="number"],
:where(.scc-page-wrapper) input[type="date"],
:where(.scc-page-wrapper) textarea,
:where(.scc-page-wrapper) select {
  font-family: var(--scc-font-sans);
  font-size: var(--scc-text-base);
  color: var(--scc-foreground);
  background-color: white;
  border: 1px solid var(--scc-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  min-height: 48px;
  line-height: var(--scc-leading-normal);
  box-sizing: border-box;
}

:where(.scc-page-wrapper) button {
  font-family: inherit;
  cursor: pointer;
}

/* Visually-hidden helper — referenced by footer social links for screen-reader
   labels (Fix 5 for footer LinkedIn/Facebook/Instagram/Bluesky). Lived only
   in scc-connect.css before; lifted to global because any component can use it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Base typography for new pages */
.scc-page-wrapper {
  font-family: var(--scc-font-sans);
  font-size: var(--scc-text-base);
  font-weight: var(--scc-weight-regular);
  line-height: var(--scc-leading-relaxed);
  color: var(--scc-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading defaults — wrapped in :where() so specificity is 0-0-1 (element
   only). Any page-level class rule (e.g. .scc-faq-hero-title { color: white },
   .scc-footer__nav-heading { color: white }) now wins without needing a
   .scc-page-wrapper prefix. Previously these rules tied on specificity and
   the global primary-blue won, turning every heading on a dark background
   invisible once legacy style.css was dequeued. */
:where(.scc-page-wrapper) :where(h1, h2, h3, h4) {
  font-family: var(--scc-font-heading);
  font-weight: var(--scc-weight-bold);
  line-height: var(--scc-leading-tight);
  color: var(--scc-primary);
}

/* Dark-background containers — pin text color to white so any descendant that
   doesn't set its own color inherits white instead of falling back to the
   body's --scc-foreground. Explicit overrides on individual elements (like
   .scc-hero__desc { color: rgba(255,255,255,0.8) }) still win. */
.scc-header,
.scc-footer,
.scc-hero,
.scc-mobile-panel,
.scc-mobile-overlay {
  color: white;
}

:where(.scc-section--on-primary) {
  color: white;
}
:where(.scc-section--on-primary) :where(h1, h2, h3, h4) {
  color: inherit;
}

.scc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  min-height: 44px;
  font-family: var(--scc-font-sans);
  font-size: var(--scc-text-base);
  font-weight: var(--scc-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.scc-btn--success {
  background: var(--scc-success);
  color: white;
  border-color: var(--scc-success);
}
.scc-btn--success:hover,
.scc-btn--success:focus {
  background: var(--scc-success-dark);
  border-color: var(--scc-success-dark);
}

.scc-btn--accent {
  background: var(--scc-accent);
  color: white;
  border-color: var(--scc-accent);
}
.scc-btn--accent:hover,
.scc-btn--accent:focus {
  background: color-mix(in srgb, var(--scc-accent) 88%, black);
  border-color: color-mix(in srgb, var(--scc-accent) 88%, black);
}

.scc-btn--primary {
  background: var(--scc-primary);
  color: white;
  border-color: var(--scc-primary);
}
.scc-btn--primary:hover,
.scc-btn--primary:focus {
  background: var(--scc-primary-dark);
  border-color: var(--scc-primary-dark);
}

.scc-btn--outline-white {
  background: transparent;
  color: white;
  border-color: white;
}
.scc-btn--outline-white:hover,
.scc-btn--outline-white:focus {
  background: white;
  color: var(--scc-primary);
}

.scc-btn--outline-primary {
  background: transparent;
  color: var(--scc-primary);
  border-color: var(--scc-primary);
}
.scc-btn--outline-primary:hover,
.scc-btn--outline-primary:focus {
  background: var(--scc-primary);
  color: white;
}

.scc-btn--pill {
  border-radius: 9999px;
}

.scc-btn--lg {
  font-size: var(--scc-text-lg);
  padding: 1.25rem 2.5rem;
}

/* Skip-to-content link */
.scc-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: var(--scc-primary);
  color: white;
  font-family: var(--scc-font-sans);
  font-size: var(--scc-text-sm);
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}

.scc-skip-link:focus {
  top: 0;
}

/* Generic fade-in on scroll (wired by scc-fade-in.js) */
[data-fade-in] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

[data-fade-in].scc-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-fade-in] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}