/* ============================================================
   NFMSS SPONSORS PAGE STYLES - v1.0.6
   Matches the NFMSS homepage design system (Barlow / navy / red).
   All rules scoped under .nfsp except the PAGE LAYOUT RESCUE
   block, which is safe because this stylesheet only loads on
   pages that contain the [nfmss_sponsors] shortcode. ASCII-only.
   ============================================================ */

/* ---- FLIXITA / FLIXITA PRO EXACT FIX ----------------------
   The theme's page.php puts content in .col-lg-8 and the
   widget sidebar in .col-lg-4 > .sidebar inside a boxed
   Bootstrap .container. These rules (which only load on the
   sponsors page) hide that sidebar column, stretch the content
   column and container to full width, and remove the section's
   default vertical padding so the hero meets the header. */
.flixita-page .col-lg-4.pl-lg-4,
.Flixita-page .col-lg-4.pl-lg-4,
#flixita-page .col-lg-4.pl-lg-4,
.flixita-page .sidebar,
.Flixita-page .sidebar {
  display: none !important;
}
.flixita-page .col-lg-8,
.Flixita-page .col-lg-8,
#flixita-page .col-lg-8 {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.flixita-page .container,
.Flixita-page .container,
#flixita-page .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.flixita-page.st-py-default,
.Flixita-page.st-py-default,
#flixita-page.st-py-default {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.flixita-page .row,
.Flixita-page .row,
#flixita-page .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0;
}

/* ---- PAGE LAYOUT RESCUE ----------------------------------
   Fixes two problems when the theme assigns this page a
   sidebar template:
   1. The theme sidebar renders on top of the hero.
   2. The off-center content column breaks the full-bleed
      breakout math, shoving the page off the left edge.
   Hiding the sidebar and forcing the content column to full
   width re-centers the column so the breakout works again.
   Selectors cover the common WordPress theme conventions. */
#content #secondary,
.site-content #secondary,
#content #sidebar,
.site-content #sidebar,
#content #right-sidebar,
.site-content #right-sidebar,
#content aside.widget-area,
.site-content aside.widget-area,
#content aside.sidebar,
.site-content aside.sidebar,
#content main ~ aside,
.site-content main ~ aside {
  display: none !important;
}
#primary,
#main,
.content-area,
.site-main,
article.page,
.entry-content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  float: none !important;
}
html, body {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  max-width: 100% !important;
}
.nfsp {
  --blue: #0e3a66;
  --blue-deep: #06182f;
  --red: #c8102e;
  --red-dark: #9e0c24;
  --red-bright: #e81c34;
  --gold: #c9a227;
  --off: #f6f7f9;
  --border: #e4e7eb;
  --ink: #1c2430;
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1c2430;
  line-height: 1.6;
  font-size: 17px;
  background: #ffffff;
  margin: 0;
}
.nfsp *, .nfsp *::before, .nfsp *::after { box-sizing: border-box; }

/* Full-bleed breakout: stretches the page edge-to-edge even when the
   theme wraps content in a boxed container. Uses 100vw for the math
   but caps rendering so the ~16px scrollbar width cannot create a
   horizontal scroll or make the page look too wide. */
.nfsp {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
  overflow-x: clip;
}
.nfsp img { max-width: 100%; height: auto; display: block; }
.nfsp h1, .nfsp h2, .nfsp h3 { margin: 0; line-height: 1.05; }
.nfsp p { margin: 0 0 1em; }
.nfsp a:focus-visible,
.nfsp button:focus-visible {
  outline: 3px solid #c8102e;
  outline-offset: 3px;
}

/* ---- Shared building blocks ---- */
.nfsp .wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.nfsp .eyebrow {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e81c34;
  border-bottom: 2px solid #e81c34;
  padding-bottom: 6px;
  margin-bottom: 18px;
}
.nfsp .eyebrow.dark { color: #c8102e; border-color: #c8102e; }
.nfsp .headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.nfsp .headline em { font-style: italic; color: #c8102e; }
.nfsp .btn {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 34px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.nfsp .btn:hover { transform: translateY(-2px); }
.nfsp .btn-red { background: #c8102e; color: #fff; }
.nfsp .btn-red:hover { background: #9e0c24; }
.nfsp .btn-gold { background: #c9a227; color: #06182f; }
.nfsp .btn-gold:hover { background: #b08d1c; }
.nfsp .btn-ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.nfsp .btn-ghost-light:hover { border-color: #e81c34; background: #e81c34; }

/* ---- HERO ---- */
.nfsp .sp-hero {
  position: relative;
  overflow: hidden;
  background: #06182f;
  background-image: linear-gradient(160deg, #0e3a66 0%, #06182f 100%);
  color: #fff;
  padding: 84px 0 92px;
}
.nfsp .sp-hero-inner { display: grid; gap: 44px; align-items: center; }
.nfsp .sp-hero .headline {
  font-size: clamp(40px, 5.5vw, 68px);
  color: #fff;
  margin-bottom: 22px;
}
.nfsp .sp-hero .headline em { color: #e81c34; }
.nfsp .sp-hero-body {
  color: rgba(255,255,255,.82);
  max-width: 60ch;
  margin-bottom: 30px;
}
.nfsp .sp-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.nfsp .sp-hero-badge { max-width: 300px; margin: 0 auto; }

/* ---- STATS ---- */
.nfsp .sp-stats { background: #fff; border-bottom: 1px solid #e4e7eb; padding: 46px 0; }
.nfsp .sp-stats-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.nfsp .sp-stat {
  background: #f6f7f9;
  border: 1px solid #e4e7eb;
  padding: 24px 22px;
}
.nfsp .sp-stat.accent { background: #06182f; border-color: #06182f; }
.nfsp .sp-stat.accent .sp-stat-num { color: #e81c34; }
.nfsp .sp-stat.accent .sp-stat-lbl { color: rgba(255,255,255,.8); }
.nfsp .sp-stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: #0e3a66;
  margin-bottom: 8px;
}
.nfsp .sp-stat-lbl { font-size: 14px; color: #4a5261; }

/* ---- WHY PARTNER ---- */
.nfsp .sp-why { padding: 84px 0; background: #fff; }
.nfsp .sp-why .headline { font-size: clamp(36px, 5vw, 52px); color: #0e3a66; margin-bottom: 34px; }
.nfsp .sp-why-grid { display: grid; gap: 18px; }
.nfsp .sp-why-card {
  background: #f6f7f9;
  border: 1px solid #e4e7eb;
  padding: 26px 24px;
}
.nfsp .sp-why-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0e3a66;
  margin-bottom: 10px;
}
.nfsp .sp-why-card p { font-size: 15px; margin: 0; color: #4a5261; }

/* ---- TIERS ---- */
.nfsp .sp-tiers {
  background: #06182f;
  color: #fff;
  padding: 84px 0;
}
.nfsp .sp-tiers .headline { font-size: clamp(36px, 5vw, 52px); color: #fff; margin-bottom: 14px; }
.nfsp .sp-tiers .headline em { color: #e81c34; }
.nfsp .sp-tiers-sub { color: rgba(255,255,255,.78); max-width: 62ch; margin-bottom: 40px; }
.nfsp .sp-premier-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.nfsp .sp-tier {
  background: #0b2547;
  border: 1px solid rgba(255,255,255,.14);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.nfsp .sp-tier.premier.founding {
  background: #0e3a66;
  border-color: #c9a227;
  box-shadow: 0 0 0 1px #c9a227;
}
.nfsp .sp-tier-flag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #06182f;
  background: #c9a227;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.nfsp .sp-tier h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.nfsp .sp-tier-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 40px;
  color: #c9a227;
  margin-bottom: 16px;
}
.nfsp .sp-tier ul { list-style: none; margin: 0 0 24px; padding: 0; flex-grow: 1; }
.nfsp .sp-tier ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: 15px;
  color: rgba(255,255,255,.86);
}
.nfsp .sp-tier ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #e81c34;
  font-weight: 700;
}
.nfsp .sp-core-grid { display: grid; gap: 18px; }
.nfsp .sp-tier.core { padding: 24px 22px; }
.nfsp .sp-tier.core h3 { font-size: 20px; }
.nfsp .sp-tier.core .sp-tier-price { font-size: 30px; margin-bottom: 10px; }
.nfsp .sp-tier.core p { font-size: 14px; color: rgba(255,255,255,.78); flex-grow: 1; }
.nfsp .sp-tier-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e81c34;
  text-decoration: none;
}
.nfsp .sp-tier-link:hover { color: #fff; }

/* ---- PLEDGE ---- */
.nfsp .sp-pledge { padding: 84px 0; background: #f6f7f9; border-bottom: 1px solid #e4e7eb; }
.nfsp .sp-pledge-inner { display: grid; gap: 48px; align-items: start; }
.nfsp .sp-pledge .headline { font-size: clamp(36px, 5vw, 52px); color: #0e3a66; margin-bottom: 16px; }
.nfsp .sp-contact-block {
  background: #fff;
  border: 1px solid #e4e7eb;
  border-left: 4px solid #c8102e;
  padding: 20px 22px;
  margin: 22px 0;
  font-size: 16px;
}
.nfsp .sp-contact-block a { color: #0e3a66; }
.nfsp .sp-fineprint { font-size: 13px; color: #6a7383; }
.nfsp .sp-pledge-form {
  background: #fff;
  border: 1px solid #e4e7eb;
  box-shadow: 10px 10px 0 #c8102e;
  padding: 30px 28px;
}
.nfsp .sp-pledge-form label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0e3a66;
  margin-bottom: 16px;
}
.nfsp .sp-pledge-form input,
.nfsp .sp-pledge-form select,
.nfsp .sp-pledge-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  color: #1c2430;
  background: #f6f7f9;
  border: 1px solid #d6dbe2;
}
.nfsp .sp-pledge-form input:focus,
.nfsp .sp-pledge-form select:focus,
.nfsp .sp-pledge-form textarea:focus {
  outline: 2px solid #c8102e;
  background: #fff;
}
.nfsp .sp-form-row { display: grid; gap: 0 16px; }
.nfsp .sp-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.nfsp .sp-submit { width: 100%; margin-top: 6px; }
.nfsp .sp-form-note {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: #6a7383;
  text-align: center;
}
.nfsp .sp-form-notice {
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 15px;
  border: 1px solid;
}
.nfsp .sp-form-notice.ok { background: #eef7ef; border-color: #2e7d32; color: #1e5722; }
.nfsp .sp-form-notice.err { background: #fdeeee; border-color: #c8102e; color: #8d0b20; }

/* ---- FOOTER STRIP ---- */
.nfsp .sp-foot { background: #fff; padding: 40px 0; text-align: center; }
.nfsp .sp-foot img { max-width: 220px; margin: 0 auto 14px; }
.nfsp .sp-foot p {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6a7383;
  margin: 0;
}

/* ---- DESKTOP (768px and up) ---- */
@media (min-width: 768px) {
  .nfsp .sp-hero-inner { grid-template-columns: 1.25fr .75fr; gap: 64px; }
  .nfsp .sp-hero-badge { margin: 0 0 0 auto; }
  .nfsp .sp-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .nfsp .sp-why-grid { grid-template-columns: repeat(3, 1fr); }
  .nfsp .sp-premier-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .nfsp .sp-core-grid { grid-template-columns: repeat(5, 1fr); align-items: stretch; }
  .nfsp .sp-pledge-inner { grid-template-columns: 1fr 1fr; gap: 64px; }
  .nfsp .sp-form-row { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nfsp * { transition: none !important; }
}