/* sc-theme.css — showconnect.org cross-page theme
   ONE stylesheet that makes the legacy event pages (scoring, leaderboard,
   teams results, entries) and the Show Office page read as the same
   application: full-bleed event header, composed Open Sans type, the
   compact text-link page nav with a gold-underline current-page marker,
   and widget-language form controls.

   INSTALL (site-wide, one line in Squarespace Settings > Advanced >
   Code Injection > Header):
     <link rel="stylesheet" href="https://scripts.showconnect.org/sc-theme.css?v=1">
   Bump ?v= on changes (same convention as widgets.js).

   Full-bleed technique: the band's COLOR is painted to the viewport edges
   with a clipped box-shadow — the element itself never moves, so the result
   is identical regardless of each page's container geometry. The single
   Squarespace ancestor that would clip the paint (.fluid-engine,
   overflow-x: clip) is released; shadows don't affect layout or scrolling,
   so this cannot introduce horizontal scroll. */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

/* ---- event header band: full-bleed + composed type ---- */
.header-event {
  margin: 0 !important;
  padding: 14px 8px 12px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: 0 0 0 100vmax #0056b3 !important;
  clip-path: inset(0 -100vmax) !important;
}
.header-event .event-details {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #d7e5f6 !important;
  margin-top: 3px !important;
  line-height: 2 !important;
}

/* ---- page nav: compact text links; current page = white + gold underline
       (replaces the old #bcbcbc gray, which barely read as "you are here") ---- */
.header-event .event-details .head-link { color: #fff !important; font-weight: 600 !important; font-size: 13px !important; }
.header-event .event-details .head-link-selected {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-bottom: 2px solid #ffe996 !important;
  padding-bottom: 1px !important;
}
.header-event .event-details > span { color: #7fa8d9 !important; }
/* links never break mid-name ("Show Office" stays whole when the row wraps) */
.header-event .event-details .head-link,
.header-event .event-details .head-link-selected { white-space: nowrap !important; }
/* phones: the six links can't fit one line — drop the pipes for even spacing
   and balance the wrap so no link or separator is ever orphaned on its own line */
@media (max-width: 599px) {
  .header-event .event-details > span { display: none !important; }
  .header-event .event-details .head-link,
  .header-event .event-details .head-link-selected { margin: 0 7px !important; }
  .header-event .event-details { text-wrap: balance; }
}

/* ---- release the one Squarespace ancestor that clips the painted bleed ---- */
.fluid-engine { overflow: visible !important; }

/* ---- uniform gap above the band on EVERY page ----
   Each page carried its own stack of offsets (section min-height, content
   padding, empty grid rows above the code block, an inner legacy .container
   pad, per-page main/body padding from old spacing hacks). Scoped to pages
   that contain an event header, these normalize the band to sit at exactly
   the same position under the site header everywhere (verified 142px on all
   five pages at 1600w). The flex order also guarantees the header's block
   renders FIRST in its section even when another block sits above it in the
   editor (that block then lands after the content — move or delete it in
   the editor for proper placement). */
section.page-section:has(.header-event) { min-height: 0 !important; }
section.page-section:has(.header-event) .content-wrapper { padding-top: 0 !important; }
section.page-section:has(.header-event) .fluid-engine { display: flex !important; flex-direction: column !important; }
section.page-section:has(.header-event) .fluid-engine > .fe-block:has(.header-event) { order: -1; }
section.page-section:has(.header-event) .sqs-block { padding-top: 0 !important; padding-bottom: 0 !important; }
section.page-section:has(.header-event) .sqs-code-container .container { padding-top: 0 !important; }
main.container:has(.header-event) { padding-top: 0 !important; }
body:has(.header-event) { padding-top: 0 !important; margin-top: 0 !important; }
body:has(.header-event) > .clearfix { padding-top: 0 !important; margin-top: 0 !important; }

/* ---- Show Office: the widget's navy tab band bleeds the same way, so its
       edges match the header exactly (the widget can't know the host went
       full-bleed — this theme is the coupling layer) ---- */
.sc-w .so-hero.slim {
  margin: -10px 0 12px !important;
  box-shadow: 0 0 0 100vmax #003e80 !important;
  clip-path: inset(0 -100vmax) !important;
}

/* ---- form controls pick up the widget's control language ---- */
select {
  border: 1px solid #c9d6e0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 15px !important;
  font-family: 'Open Sans', sans-serif !important;
  background: #fff;
}
input[type="text"], input[type="search"] {
  border: 1px solid #c9d6e0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 15px !important;
  font-family: 'Open Sans', sans-serif !important;
}