/* Shared public-site layout foundation ("sponsor-shell"). Ported from SponsorIntake.html/
   SponsorShared.html (Apps Script) -- same tokens, spacing, interaction system, and band system
   already approved and live there. Loaded via <link> by every Public Website page and Sponsor
   Intake, so there is exactly one copy of this CSS, not one per page. */
:root{
  --hq-bg:#F5F7FA; --hq-surface:#fff; --hq-border:#E2E6ED; --hq-border-strong:#CBD2DE;
  --hq-text:#101828; --hq-text-secondary:#475467; --hq-text-tertiary:#667085; --hq-text-disabled:#98a2b3;
  --hq-primary:#002CA1; --hq-primary-hover:#0080E0; --hq-primary-tint:#E7ECF9;
  --hq-success:#12805c; --hq-r-sm:6px; --hq-r-lg:14px;
  --hq-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sp-shell-width:520px;
  --sp-shell-padding:22px 20px 28px;
  --sp-section-gap:24px;
  --hq-motion-duration:.18s;
  --hq-motion-ease:cubic-bezier(.22,.61,.36,1);
  --hq-card-lift:-4px;
  --hq-card-shadow:0 10px 24px rgba(16,24,40,.14);
  --hq-btn-lift:-1px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--hq-bg);color:var(--hq-text);font-family:var(--hq-font);-webkit-font-smoothing:antialiased}

.spHeader{padding:24px 20px 0;text-align:center}
.spMark{width:48px;height:48px;display:block;margin:0 auto 6px;object-fit:contain}
.spOrg{font-size:13px;font-weight:700;color:var(--hq-primary);letter-spacing:.2px}
.spSeason{font-size:11px;color:var(--hq-text-tertiary);margin-top:2px}

.spBody{max-width:var(--sp-shell-width);margin:0 auto;padding:var(--sp-shell-padding);container-type:inline-size}
.section{margin-bottom:var(--sp-section-gap)}

.card{background:var(--hq-surface);border:1px solid var(--hq-border);border-radius:var(--hq-r-lg);padding:20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}

/* Unified interaction system: .interactiveCard for whole-card links/buttons, .interactiveCardBtn for
   the button-shaped span inside one, .interactiveBtn for any standalone clickable control. */
.interactiveCard{transition:transform var(--hq-motion-duration) var(--hq-motion-ease),box-shadow var(--hq-motion-duration) var(--hq-motion-ease),border-color var(--hq-motion-duration) var(--hq-motion-ease)}
.interactiveCard:hover{transform:translateY(var(--hq-card-lift));box-shadow:var(--hq-card-shadow);border-color:var(--hq-primary)}
.interactiveCardBtn{transition:background var(--hq-motion-duration) var(--hq-motion-ease),color var(--hq-motion-duration) var(--hq-motion-ease),border-color var(--hq-motion-duration) var(--hq-motion-ease)}
.interactiveCard:hover .interactiveCardBtn{background:var(--hq-primary);color:#fff;border-color:var(--hq-primary)}
.interactiveBtn{transition:background var(--hq-motion-duration) var(--hq-motion-ease),transform var(--hq-motion-duration) var(--hq-motion-ease),box-shadow var(--hq-motion-duration) var(--hq-motion-ease),border-color var(--hq-motion-duration) var(--hq-motion-ease)}
.interactiveBtn:hover{transform:translateY(var(--hq-btn-lift))}
.interactiveBtn:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .interactiveCard,.interactiveCardBtn,.interactiveBtn{transition:none}
  .interactiveCard:hover,.interactiveBtn:hover,.interactiveBtn:active{transform:none}
}

.spFooter{max-width:var(--sp-shell-width);margin:32px auto 0;padding:20px 20px 8px;border-top:1px solid var(--hq-border);text-align:center}
.spFooterBrand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.spFooterLogo{display:block;width:36px;height:36px;object-fit:contain}
.spFooterOrg{font-size:14px;font-weight:700;color:var(--hq-text-secondary)}
.spFooterFlag{display:block;width:24px;height:16px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.spFooterLinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--hq-border)}
.spFooterLinks a{font-size:12.5px;font-weight:650;color:var(--hq-text-secondary);text-decoration:none}
.spFooterLinks a:hover{color:var(--hq-primary);text-decoration:underline}
.spFooterFb{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--hq-primary);margin-bottom:12px;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:box-shadow .15s,transform .15s}
.spFooterFb:hover{box-shadow:0 2px 6px rgba(0,0,0,.15),0 0 0 3px var(--hq-primary-hover);transform:translateY(-1px)}
.spFooterFb svg{width:18px;height:18px}
.spFooterMeta{font-size:12.5px;color:var(--hq-text-tertiary)}
.spFooterContact{font-size:12.5px;color:var(--hq-text-tertiary);margin-top:4px}
.spFooterContact a{color:var(--hq-text-secondary);font-weight:650;text-decoration:none}
.spFooterContact a:hover{color:var(--hq-primary);text-decoration:underline}

@media(min-width:861px){
  :root{
    --sp-shell-width:760px;
    --sp-shell-padding:56px 48px 64px;
    --sp-section-gap:32px;
  }
  .spHeader{padding:40px 20px 0}
  .spMark{width:56px;height:56px;margin-bottom:10px}
  .spOrg{font-size:14.5px}
  .spSeason{font-size:12px}
  .card{padding:24px 28px}
  .spFooter{margin-top:48px;padding:26px 20px 10px}
  .spFooterMeta{font-size:11.5px}
  .spFooterContact{font-size:11.5px}
}

/* ---- Shared public-site nav (markup lives inline per page; this is its styling). ---- */
.spBand.spTopBand{padding:0}
.spTopBand .spBandInner{padding:32px 20px 38px}
@media(min-width:861px){
  .spTopBand .spBandInner{padding:64px 32px 68px}
}

.spTopBand h1{font-size:27px;font-weight:800;letter-spacing:-.2px;margin:0;text-align:center;line-height:1.15}
.spHeroEyebrow{font-size:11.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.65)}
.spHeroBenefit{font-size:15px;color:rgba(255,255,255,.85);line-height:1.55;margin:0}
.spHeroSub{font-size:16px;font-weight:650;color:#fff;line-height:1.5;margin:0}
.spBody.spBandInner.spHeroFull{padding-top:8px;padding-bottom:8px}
.spHeroFull .spHeroEyebrow{margin-bottom:16px}
.spHeroFull h1{margin-bottom:12px}
.spHeroFull .spHeroBenefit{margin-bottom:20px}
@media(min-width:861px){
  .spTopBand h1{font-size:34px}
  .spHeroEyebrow{font-size:11px}
  .spHeroBenefit{font-size:15px}
  .spHeroSub{font-size:17px}
  .spBody.spBandInner.spHeroFull{padding-top:16px;padding-bottom:16px}
  .spHeroFull .spHeroEyebrow{margin-bottom:20px}
  .spHeroFull h1{margin-bottom:16px}
  .spHeroFull .spHeroBenefit{margin-bottom:26px}
}

.spNav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 24px;border-bottom:1px solid rgba(255,255,255,.14);background:var(--hq-primary)}
.spNavFixedWrap{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--hq-primary)}
body{padding-top:98px}
/* Header logo spacing (2026-08-02, per Holly): this gap was already a single shared rule applied
   identically across every public page and both breakpoints (verified directly, no per-page
   override exists anywhere) -- but a round crest sitting flush at a small fixed gap next to bold
   text reads as tighter than it measures, so the gap itself is widened slightly here (16px->18px
   desktop, 10px->12px mobile) for real breathing room, not just to "fix" a page-to-page
   difference that didn't exist in code. */
.spNavBrand{display:flex;align-items:center;gap:18px;text-decoration:none;color:#fff;cursor:pointer}
.spNavBrand:hover{opacity:.88}
.spNavLogo{display:block;width:46px;height:46px;max-width:none;object-fit:contain;flex:0 0 46px}
.spNavWordmark{font-size:16px;font-weight:700;letter-spacing:.4px;color:#fff}
.spNavLinks{display:flex;gap:22px;font-size:13px;font-weight:600}
.spNavLinks a{color:rgba(255,255,255,.75);text-decoration:none}
.spNavLinks a:hover{color:#fff}
.spNavRight{display:flex;align-items:center;gap:16px}
.spNavGhost{display:inline-block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);text-decoration:none;border:1px solid rgba(255,255,255,.35);border-radius:var(--hq-r-sm);padding:8px 14px;transition:color .15s,border-color .15s}
.spNavGhost:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.spNavCta{display:inline-block;border:0;border-radius:var(--hq-r-sm);padding:6px 16px;font-size:13px;font-weight:600;font-family:inherit;text-decoration:none;background:#fff;color:var(--hq-primary);transition:background .15s,color .15s,box-shadow .15s}
.spNavCta:hover{background:var(--hq-primary);color:#fff;box-shadow:0 0 0 3px var(--hq-primary-hover)}
.spNavMenuBtn{display:none;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:var(--hq-r-sm);padding:8px 14px;font-size:13px;font-weight:600;font-family:inherit;align-items:center;justify-content:center;gap:6px;cursor:pointer;min-width:44px;min-height:44px}
.spMobileMenuPanel{display:none}
.spMobileMenuPanel.open{display:flex;flex-direction:column;gap:14px;padding:18px 20px 22px;border-bottom:1px solid rgba(255,255,255,.14);text-align:left}
.spMobileMenuPanel a{font-size:14px;font-weight:600;color:#fff;text-decoration:none}
.spMobileMenuPanel .spNavCta,.spMobileMenuPanel .spNavGhost{display:block;width:100%;text-align:center;box-sizing:border-box}
.spMobileMenuPanel .spNavCta{color:var(--hq-primary)}
.spMobileMenuPanel .spNavCta:hover{background:var(--hq-primary);color:#fff;box-shadow:0 0 0 3px var(--hq-primary-hover)}
@media(max-width:1024px){
  .spNavLinks,.spNavRight{display:none}
  .spNavMenuBtn{display:inline-flex}
  .spNav{padding:6px 14px}
  body{padding-top:90px}
  .spNavBrand{gap:12px;padding:6px 4px}
  .spNavLogo{width:32px;height:32px;flex:0 0 32px}
  .spNavWordmark{font-size:12px}
  .spNavMenuBtn{padding:5px 10px;font-size:13px;min-height:44px}
  .spMobileMenuPanel{padding:16px 20px 20px}
  .spMobileMenuPanel a{font-size:15.5px;padding:8px 0;min-height:24px}
  .spMobileMenuPanel .spNavGhost{font-size:14.5px}
  .spMobileMenuPanel .spNavCta{font-size:14.5px;padding:14px 22px}
}

/* 2026-08-13, mobile Team Login prominence (Holly's explicit direction): "blends into the
   surrounding blue/white page... should feel like an important account-access action." Mobile-menu-
   panel only -- the desktop .spNavRight pill (same .spNavCta class, outside this wrapper) is
   completely untouched, still the same small nav-bar CTA it always was. Existing tokens/colors only,
   no new brand color: separation from Business Sponsor Login via a top divider, a small lock icon,
   concise helper copy, and simply larger/bolder type -- not a new visual system. */
.spNavTeamLoginBlock{margin-top:4px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.spMobileMenuPanel .spNavTeamLoginBlock .spNavCta{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700;padding:16px 22px}
.spNavTeamLoginBlock .spNavCta svg{flex:0 0 auto}
.spNavTeamLoginHelp{margin:8px 0 0;font-size:12px;font-weight:600;color:rgba(255,255,255,.72);text-align:center}

/* ---- Seasonal announcement bar. ----
   Layout-shift fix (2026-08-02, docs/decision-log.md): this used to start display:none and only
   reveal itself once the async getPublicSiteConfig fetch resolved, which pushed the whole page
   down after the visitor had already started reading -- exactly the jump Holly flagged. It now
   reserves its final height and background from the very first paint (min-height matches the
   bar's own single-line box; the default background matches the most common "sponsorships open"
   state so the reserved space isn't a jarring blank gap) -- renderAnnouncementBar() in
   public-nav.js only ever fills in text and swaps the state class after that, never toggling
   display, so the header/hero never reflows once the real status arrives. */
.annBarOuter{min-height:31px; background:var(--hq-primary-hover)}
.annBarOuter.annBarOuter-none{min-height:0; background:transparent}
.annBar{display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;padding:6px 24px;text-decoration:none;text-align:center;border-bottom:1px solid transparent;transition:background var(--hq-motion-duration) var(--hq-motion-ease)}
.annBarText{font-size:13px;font-weight:600;line-height:1.5;display:inline-block;transition:transform .2s ease}
.annBarText strong{font-weight:800;letter-spacing:.1px}
.annBar:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
.annBar:not(.annBar-static):hover .annBarText{transform:scale(1.03)}
.annBar-static{cursor:default}
.annBar-open{background:var(--hq-primary-hover);color:#fff;border-bottom-color:#FFE500}
.annBar-extended{background:#FFE500;color:#101828}
.annBar-final-days{background:var(--hq-primary-hover);color:#fff;border-bottom-color:#FFE500}
.annBar-final-days .annBarText strong{color:#FFE500}
.annBar-closed{background:var(--hq-surface);color:var(--hq-text);border-bottom-color:var(--hq-border)}
.annBar-emphasis{padding:10px 24px}
.annBar-emphasis .annBarText{font-size:14px}
@media(max-width:640px){
  .annBar{padding:6px 16px}
  .annBarText{font-size:12.5px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){
  .annBar{transition:none}
}

/* ---- Shared privacy notice. ---- */
.privacyNotice{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;background:var(--hq-primary-tint);border-radius:var(--hq-r-sm)}
.privacyNoticeIcon{flex:0 0 auto;width:16px;height:16px;color:var(--hq-primary);margin-top:2px}
.privacyNotice p{margin:0;font-size:12.5px;line-height:1.55;color:var(--hq-text-secondary)}
@media(max-width:640px){
  .privacyNotice p{font-size:13px}
}

/* ---- Blue -> White -> Gray full-bleed band system. ---- */
.spBand{padding:44px 0}
/* Hero-to-content spacing standard (2026-08-02, per Holly): applied to whichever band sits
   immediately after the hero on every public page -- the standard .spBand padding above (44px/
   64px) is meant for spacing BETWEEN later sections deeper on a page, not for the very first
   transition, where it read as excess dead space before any real content (flagged specifically on
   Ways to Support and Business Sponsorship, but audited and applied consistently everywhere this
   pattern occurs). Only the top edge is tightened -- the band's own bottom padding, and every
   other section's spacing, is untouched, so the page doesn't start feeling crowded lower down. */
.spBandAfterHero{padding-top:20px}
@media(min-width:861px){
  .spBandAfterHero{padding-top:32px}
}
/* .spBody's own shell padding (--sp-shell-padding, 22px/56px top) stacks on top of the band
   padding above since it's a separate element (.spBody spBandInner) inside the band -- without
   this, the after-hero band still showed the full combined gap. Zeroing just the inner top edge
   here leaves .spBody's side/bottom shell padding (and every other band's top padding) untouched. */
.spBandAfterHero .spBody{padding-top:0}
.spBandBlue{background:var(--hq-primary);color:#fff;text-align:center}
.spBandBlue h1,.spBandBlue h2{color:#fff}
.spBandBlue p{color:rgba(255,255,255,.85)}
.spBandBlue .btnPrimary{background:#fff;color:var(--hq-primary);transition:background .15s,color .15s,box-shadow .15s}
.spBandBlue .btnPrimary:hover{background:var(--hq-primary);color:#fff;box-shadow:0 0 0 3px var(--hq-primary-hover)}
.spBandBlue .spFooter{margin-top:0;border-top-color:rgba(255,255,255,.22)}
.spBandBlue .spFooterMeta,.spBandBlue .spFooterContact{color:rgba(255,255,255,.85)}
.spBandBlue .spFooterContact a{color:#fff}
.spBandBlue .spFooterOrg{color:#fff}
.spBandBlue .spFooterLinks{border-bottom-color:rgba(255,255,255,.22)}
.spBandBlue .spFooterLinks a{color:rgba(255,255,255,.85)}
.spBandBlue .spFooterLinks a:hover{color:#fff}
.spBandWhite{background:#fff}
.spBandGray{background:#F7F8FB;position:relative;overflow:hidden}
.spBandGray::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcgcmVzdWx0PSdub2lzZScvPjxmZUNvbG9yTWF0cml4IGluPSdub2lzZScgdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwIDAgIDAgMCAwIDAuMTQgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");background-repeat:repeat;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 0% 100%,#000,transparent 88%);mask-image:radial-gradient(ellipse 85% 75% at 0% 100%,#000,transparent 88%)}
.spBandGray>.spBandInner{position:relative;z-index:1}
.spBand.spTopBand.spHeroPinstripe{background-image:linear-gradient(180deg,rgba(0,44,161,.12) 0%,rgba(0,44,161,0) 32%,rgba(0,44,161,0) 68%,rgba(0,44,161,.14) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+PGZpbHRlciBpZD0nYjEnIHg9Jy01MCUnIHk9Jy01MCUnIHdpZHRoPScyMDAlJyBoZWlnaHQ9JzIwMCUnPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249JzAuNScvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9J2IyJyB4PSctNTAlJyB5PSctNTAlJyB3aWR0aD0nMjAwJScgaGVpZ2h0PScyMDAlJz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPScwLjY1Jy8+PC9maWx0ZXI+PHJlY3QgeD0nOCcgeT0nMCcgd2lkdGg9JzEnIGhlaWdodD0nNjQnIGZpbGw9JyNmZmZmZmYnIG9wYWNpdHk9JzAuMDUnIGZpbHRlcj0ndXJsKCNiMSknLz48cmVjdCB4PSc0MCcgeT0nMCcgd2lkdGg9JzEnIGhlaWdodD0nNjQnIGZpbGw9JyNmZmZmZmYnIG9wYWNpdHk9JzAuMDM1JyBmaWx0ZXI9J3VybCgjYjIpJy8+PC9zdmc+");background-size:auto,64px 64px;background-repeat:no-repeat,repeat}
.spBand.spFooterBand.spHeroPinstripe,.spBandBlue.spFooterBand{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+PGZpbHRlciBpZD0nYjEnIHg9Jy01MCUnIHk9Jy01MCUnIHdpZHRoPScyMDAlJyBoZWlnaHQ9JzIwMCUnPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249JzAuNScvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9J2IyJyB4PSctNTAlJyB5PSctNTAlJyB3aWR0aD0nMjAwJScgaGVpZ2h0PScyMDAlJz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPScwLjY1Jy8+PC9maWx0ZXI+PHJlY3QgeD0nOCcgeT0nMCcgd2lkdGg9JzEnIGhlaWdodD0nNjQnIGZpbGw9JyNmZmZmZmYnIG9wYWNpdHk9JzAuMDUnIGZpbHRlcj0ndXJsKCNiMSknLz48cmVjdCB4PSc0MCcgeT0nMCcgd2lkdGg9JzEnIGhlaWdodD0nNjQnIGZpbGw9JyNmZmZmZmYnIG9wYWNpdHk9JzAuMDM1JyBmaWx0ZXI9J3VybCgjYjIpJy8+PC9zdmc+")}