/* ============================================================================
   Express override sheet (docs/EXPRESS_SEED_SPEC.md sections 1.4 + 6)
   Loaded ONLY when the design tid carries a live XPRESS row - the :root token
   block is emitted inline above this link, so every var(--xp-*) here resolves.
   Every var() carries a fallback so a partial token row still renders sanely.
   Mobile ship gates: no horizontal scroll >=320px, body >=16px, 44px targets,
   no fixed pixel widths.
   ============================================================================ */

/* ---- top nav: painted with the nav token (accent when set, else primary) ---- */
#nav.navbar {
    background-color: var(--xp-nav-bg, var(--xp-primary, #1b5e9e)) !important;
    border-bottom: 0 !important;
}
#nav .nav-link,
#nav .navbar-brand,
#nav .dropdown-toggle {
    color: var(--xp-on-nav, #ffffff) !important;
}
#nav .nav-link:hover,
#nav .nav-link:focus {
    opacity: 0.85;
}
#nav .navbar-toggler {
    border-color: transparent;
}
#nav .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}
/* dropdown panels stay light, so their items need ink - not the on-nav color */
#nav .dropdown-menu a,
#nav .dropdown-menu .dropdown-item,
#nav .dropdown-menu .dropdown-header {
    color: var(--xp-ink, #16181d) !important;
}
#nav .dropdown-menu a:hover,
#nav .dropdown-menu .dropdown-item:hover {
    background: var(--xp-primary-tint, rgba(27, 94, 158, 0.08));
}

/* ---- event identity bar: every page EXCEPT details.aspx ----
   Past the home page the chrome carried no event identity at all - no mark, no
   name, no dates. This strip sits directly under the nav and restores all three
   in one quiet line. The inner div also carries Bootstrap's .container, so the
   mark lines up exactly with the left edge of the page card below it. */
.xp-ebar {
    background: var(--xp-surface, #ffffff);
    border-bottom: 1px solid var(--xp-border, #e3e8ef);
}
.xp-ebar-in {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.xp-ebar-logo {
    /* 44px minimum tap target (mobile ship gate) */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.3rem;
    background: #ffffff;
    border: 1px solid var(--xp-border, #e3e8ef);
    border-radius: 0.5rem;
    line-height: 0;
}
.xp-ebar-logo img {
    display: block;
    height: 2.4rem;
    width: auto;
    max-width: 7rem;
    object-fit: contain;
}
.xp-ebar-txt {
    /* min-width:0 lets the name ellipsis instead of stretching the row */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
a.xp-ebar-name,
a.xp-ebar-name:link,
a.xp-ebar-name:visited {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--xp-ink, #16181d) !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.xp-ebar-name:hover {
    color: var(--xp-primary, #1b5e9e) !important;
    text-decoration: none;
}
.xp-ebar-meta {
    font-family: var(--xp-font-body, 'DM Sans', sans-serif);
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--xp-ink-soft, #5b6472);
    white-space: nowrap;
}
.xp-ebar-meta .mdi {
    opacity: 0.65;
}
@media (max-width: 575px) {
    /* phones: let a long event name wrap rather than truncate */
    a.xp-ebar-name {
        white-space: normal;
        font-size: 0.95rem;
    }
    .xp-ebar-logo img {
        height: 1.8rem;
        max-width: 4.5rem;
    }
}

/* ---- base typography + chrome ---- */
body {
    font-family: var(--xp-font-body, 'DM Sans', sans-serif);
    color: var(--xp-ink, #16181d);
}
h1, h2, h3, h4, h5, h6, .controlHeader {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    color: var(--xp-ink, #16181d);
}
.pageArea a {
    color: var(--xp-primary, #1b5e9e);
}
.btn-primary,
input[type=submit].btn-primary {
    background-color: var(--xp-primary, #1b5e9e);
    border-color: var(--xp-primary, #1b5e9e);
    color: var(--xp-on-primary, #ffffff);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--xp-primary-dark, #164b7e);
    border-color: var(--xp-primary-dark, #164b7e);
}

/* Full-bleed breakout for the three Express bands: the render engine wraps
   widgets in gutter-carrying rows/cols, so the bands escape to the viewport
   edge themselves (margin % is parent-relative, so this self-adjusts; the
   few px that land under the scrollbar are background-only and clipped by
   the body overflow guard). */
.xp-hero,
.xp-facts,
.xp-contact {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---- hero (#xhero#) ---- */
.xp-hero {
    position: relative;
    background: linear-gradient(150deg, var(--xp-primary, #1b5e9e) 0%, var(--xp-primary-dark, #164b7e) 100%);
    color: var(--xp-on-primary, #ffffff);
    overflow: hidden;
}
.xp-hero-img {
    background-size: cover;
    background-position: center;
}
.xp-hero-img::before {
    /* contrast overlay so text passes WCAG on any photo */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 14, 20, 0.35) 0%, rgba(10, 14, 20, 0.62) 100%);
}
.xp-hero-inner {
    position: relative;
    max-width: 62rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 8vw, 5.5rem) 1.25rem;
    text-align: center;
}
.xp-hero-img .xp-hero-inner {
    color: #ffffff;
}
.xp-hero-logo-sm {
    /* org brand mark when the flyer leads the hero */
    max-height: 4.5rem;
    max-width: 50%;
    margin-bottom: 0.9rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.35rem;
}
.xp-flyer-band {
    text-align: center;
    padding: 1.75rem 1rem 0.5rem;
}
.xp-hero-flyerlink {
    display: inline-block;
    cursor: zoom-in;
}
.xp-hero-flyer {
    /* large enough to mostly read; tap opens full size */
    width: min(92%, 30rem);
    border-radius: 0.65rem;
    border: 1px solid var(--xp-border, #e3e8ef);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    transition: transform 0.15s ease;
}
.xp-hero-flyerlink:hover .xp-hero-flyer {
    transform: scale(1.015);
}
.xp-hero-logolink {
    display: inline-block;
    cursor: zoom-in;
}
.xp-hero-logo {
    /* big enough that a flyer is legible; tap opens the full-size lightbox */
    max-height: clamp(8rem, 24vw, 15rem);
    max-width: min(80%, 24rem);
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.4rem;
    transition: transform 0.15s ease;
}
.xp-hero-logolink:hover .xp-hero-logo {
    transform: scale(1.02);
}
.xp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 16, 0.88);
    cursor: zoom-out;
    padding: 2vh 2vw;
}
.xp-lightbox img {
    max-width: 96vw;
    max-height: 96vh;
    border-radius: 0.4rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.xp-hero-name {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: clamp(1.75rem, 5.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 0.5rem 0;
    color: inherit;
}
.xp-hero-meta {
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    opacity: 0.92;
    margin-bottom: 1.25rem;
}
.xp-cta {
    display: inline-block;
    min-height: 44px;
    padding: 0.7rem 2.2rem;
    border-radius: 999px;
    background: var(--xp-surface, #ffffff);
    color: var(--xp-primary, #1b5e9e);
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.xp-cta:hover {
    color: var(--xp-primary-dark, #164b7e);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.xp-cta-soon {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
}

/* countdown - compresses to a single row on phones by construction */
.xp-cd {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 1.4rem 0;
}
.xp-cd-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.14);
}
.xp-cd-box b {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: 1.4rem;
    line-height: 1.1;
}
.xp-cd-box i {
    font-style: normal;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

/* ---- key facts band (#xfacts#) ---- */
.xp-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.4rem 1rem;
    background: var(--xp-surface-alt, #f5f7fa);
}
.xp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--xp-border, #e3e8ef);
    border-radius: 999px;
    background: var(--xp-surface, #ffffff);
    color: var(--xp-ink, #16181d);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.xp-chip .mdi {
    color: var(--xp-primary, #1b5e9e);
    font-size: 1.15rem;
}
a.xp-chip:hover {
    border-color: var(--xp-primary, #1b5e9e);
    background: var(--xp-primary-tint, rgba(27, 94, 158, 0.08));
    color: var(--xp-ink, #16181d);
    text-decoration: none;
}
@media (max-width: 575px) {
    .xp-facts {
        display: grid;
        grid-template-columns: 1fr 1fr; /* chips wrap 2-up on phones */
    }
    .xp-chip {
        white-space: normal;
        justify-content: center;
        text-align: center;
    }
}

/* ---- contact band (#xcontact#) ---- */
.xp-contact {
    background: var(--xp-footer-bg, #16181d);
    color: var(--xp-footer-ink, #f5f7fa);
    text-align: center;
    padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
}
.xp-contact-name {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: 1.35rem;
    font-weight: 600;
}
.xp-contact-loc {
    opacity: 0.75;
    margin-bottom: 1.1rem;
}
.xp-contact-btn {
    display: inline-block;
    min-height: 44px;
    margin-top: 1.1rem;
    padding: 0.65rem 1.8rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}
.xp-contact-btn:hover {
    background: var(--xp-primary, #1b5e9e);
    border-color: var(--xp-primary, #1b5e9e);
    color: var(--xp-on-primary, #ffffff);
    text-decoration: none;
}
.xp-contact-social {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.xp-contact-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    font-size: 1.25rem;
    text-decoration: none;
}
.xp-contact-social a:hover {
    background: var(--xp-primary, #1b5e9e);
    color: var(--xp-on-primary, #ffffff);
}
/* powered-by lockup, bottom-right of the site's black copyright bar */
#bottom .xp-powered-bar {
    float: right;
    font-size: 0.85rem;
}
#bottom .xp-powered-bar a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
#bottom .xp-powered-bar a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ---- Express footer theming for the site-wide footer links block ---- */
#tfooter {
    background-color: var(--xp-footer-bg, #16181d);
    color: var(--xp-footer-ink, #f5f7fa);
}
#tfooter .fContents,
#tfooter .fContents a {
    color: var(--xp-footer-ink, #f5f7fa) !important;
}
#tfooter .fContents a:hover {
    opacity: 0.8;
}
/* SincSports logo anchors the left side of the help row */
#tfooter #sincLogo {
    float: none;
    width: auto;
    margin: 0;
}
#tfooter a#powered img,
#tfooter a#powered img:hover {
    width: 168px;
    height: 34px;
    background-image: url(https://sincsports.com/assets/img/sinc_line_dark_bg_email.png);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    float: none;
}
#tfooter .usa_lnk {
    display: none;
}

/* ---- mobile app promo (#app#, Express variant) ----
   Renders as a slim horizontal band in its full-width row; stacks and centers
   below 768px. */
.xp-app {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2rem;
    max-width: 56rem;
    margin: 1.25rem auto;
    padding: 1.4rem 1.75rem;
    border: 1px solid var(--xp-border, #e3e8ef);
    border-radius: 0.9rem;
    background: var(--xp-surface, #ffffff);
    text-align: left;
}
.xp-app-icon .mdi {
    font-size: 2.4rem;
    color: var(--xp-primary, #1b5e9e);
}
.xp-app-title {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}
.xp-app-text {
    flex: 1 1 16rem;
}
.xp-app-copy {
    color: var(--xp-ink-soft, #5b6472);
    font-size: 0.95rem;
    margin: 0.15rem 0 0 0;
}
.xp-app-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
@media (max-width: 767px) {
    .xp-app {
        flex-direction: column;
        text-align: center;
    }
    .xp-app-copy {
        flex-basis: auto;
    }
}
.xp-app-badges a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.35rem 1rem;
    border-radius: 0.55rem;
    background: var(--xp-ink, #16181d);
    color: #ffffff;
    text-decoration: none;
    text-align: left;
    line-height: 1.1;
}
.xp-app-badges a:hover {
    background: var(--xp-primary, #1b5e9e);
    color: var(--xp-on-primary, #ffffff);
    text-decoration: none;
}
.xp-app-badges .mdi {
    font-size: 1.5rem;
}
.xp-app-badges small {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}
.xp-app-badges span {
    display: inline-block;
    font-weight: 600;
    font-size: 0.95rem;
}

/* ---- reused widgets: token consumption (colors only, no geometry) ---- */
ul.eventSponsors li img {
    border-color: var(--xp-border, #e3e8ef);
}
.subdiv h3 a,
.subdiv .morebtn {
    color: var(--xp-primary, #1b5e9e);
}

/* ---- token bridge: sinc-setup pages inherit the site's Express brand ----
   schedule2 (and future modernized pages) style themselves from --setup-*
   tokens; on an Express site those resolve to the event's own palette. */
.sched2-page,
.teamlist-page,
.spon-page,
.orgp-page {
    --setup-primary: var(--xp-primary, #1b5e9e);
    /* accent = the site's second brand color when set (nav token), else primary */
    --setup-accent: var(--xp-nav-bg, var(--xp-primary, #1b5e9e));
    --setup-accent-glow: var(--xp-primary-tint, rgba(27, 94, 158, 0.08));
    --setup-font: var(--xp-font-body, 'DM Sans', sans-serif);
    --setup-font-heading: var(--xp-font-display, 'Outfit', sans-serif);
}

/* teamlist table links: only Express paints them with the event accent. The page
   itself sets no color, so on a classic template they keep the template's own
   link color (tt10.css / the event's tid CSS) instead of the sinc-setup green. */
.teamlist-page .tl-grid-wrap a {
    color: var(--setup-accent);
}

/* ---- director welcome text band (#xtext#) ----
   One column by default. When the event has sponsor logos AND a message, the band
   widens and splits 75/25 - message left, sponsor rail right. The split is driven by
   content, never by a setting, so an event with no sponsors is untouched. */
.xp-text {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.6rem 1.25rem 0.5rem;
    text-align: center;
}
.xp-text-split {
    /* wider than the one-column band so the 75% message column still lands near the
       ~48rem reading measure and the rail gets room for a real logo */
    max-width: 64rem;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2.5rem;
    align-items: start;
    text-align: left;
}
.xp-text-body {
    font-size: 1.02rem;
    line-height: 1.65;
    text-align: left;
}
.xp-text-body img {
    max-width: 100%;
    height: auto;
}
.xp-text-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.25rem 0.9rem;
    border: 1px dashed var(--xp-border, #e3e8ef);
    border-radius: 999px;
    color: var(--xp-ink-soft, #5b6472);
    font-size: 0.82rem;
    text-decoration: none;
}
.xp-text-edit:hover {
    border-color: var(--xp-primary, #1b5e9e);
    color: var(--xp-primary, #1b5e9e);
    text-decoration: none;
}
.xp-text-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1.4rem 1rem;
    border: 2px dashed var(--xp-border, #e3e8ef);
    border-radius: 0.9rem;
    color: var(--xp-ink-soft, #5b6472);
    font-weight: 600;
    text-decoration: none;
}
.xp-text-empty:hover {
    border-color: var(--xp-primary, #1b5e9e);
    color: var(--xp-primary, #1b5e9e);
    text-decoration: none;
}
.xp-text-empty .mdi {
    font-size: 1.6rem;
}
.xp-text-empty span {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.75;
}


/* ---- organization promo band (#xpromo#) ----
   The org's own flyers, rendered on every site beneath it. The column count comes
   from how many flyers exist, never from a setting: two make the 50/50 row USFA
   asked for, one fills a single centred card, three or four wrap into an even grid.
   Flyers are portrait artwork, so the card is a frame around the image and the image
   is never cropped - a cropped flyer is an unreadable flyer. */
.xp-promo {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.7rem 1.25rem 0.4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    align-items: start;
}
.xp-promo-1 {
    max-width: 34rem;
}
.xp-promo-2,
.xp-promo-4 {
    grid-template-columns: 1fr 1fr;
}
.xp-promo-3 {
    grid-template-columns: repeat(3, 1fr);
}
.xp-promo-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--xp-border, #e3e8ef);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* explicit ink pin - never color:inherit, which outranks the token it inherits from */
a.xp-promo-card:link,
a.xp-promo-card:visited {
    color: var(--xp-ink, #1b2432);
    text-decoration: none;
}
a.xp-promo-card:hover {
    transform: translateY(-2px);
    border-color: var(--xp-primary, #1b5e9e);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.14);
    text-decoration: none;
}
.xp-promo-card img {
    display: block;
    width: 100%;
    height: auto;
}
.xp-promo-cap {
    display: block;
    padding: 0.7rem 0.9rem 0.8rem;
    border-top: 1px solid var(--xp-border, #e3e8ef);
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.xp-promo-admin {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.25rem 0.4rem;
    text-align: right;
}
.xp-promo-admin a:link,
.xp-promo-admin a:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.9rem;
    border: 1px dashed var(--xp-border, #e3e8ef);
    border-radius: 999px;
    color: var(--xp-ink-soft, #5b6472);
    font-size: 0.82rem;
    text-decoration: none;
}
.xp-promo-admin a:hover {
    border-color: var(--xp-primary, #1b5e9e);
    color: var(--xp-primary, #1b5e9e);
}
.xp-promo-empty {
    grid-column: 1 / -1;
}
.xp-promo-empty:link,
.xp-promo-empty:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.6rem 1rem;
    border: 1px dashed var(--xp-border, #e3e8ef);
    border-radius: 14px;
    color: var(--xp-ink-soft, #5b6472);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}
.xp-promo-empty:hover {
    border-color: var(--xp-primary, #1b5e9e);
    color: var(--xp-primary, #1b5e9e);
}
.xp-promo-empty .mdi {
    font-size: 1.6rem;
}
.xp-promo-empty span {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.75;
}
@media (max-width: 700px) {
    /* a 50/50 pair of portrait flyers on a phone leaves both unreadable */
    .xp-promo-2,
    .xp-promo-3,
    .xp-promo-4 {
        grid-template-columns: 1fr;
    }
    .xp-promo {
        max-width: 30rem;
    }
    .xp-promo-admin {
        text-align: center;
    }
}
/* ---- sponsor logos beside the welcome message ----
   Two presentations of the same list: a stacked rail in the 25% column when there is
   a message to sit beside, and a centered wrapping strip when sponsors are the only
   content in the band. */
.xp-spon-rail,
.xp-spon-strip {
    display: block;
    text-align: center;
}
.xp-spon-strip {
    margin-top: 0.5rem;
}
.xp-spon-head {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--xp-ink-soft, #5b6472);
    margin-bottom: 0.6rem;
}
.xp-spon-rail .xp-spon-head {
    text-align: left;
}
.xp-spon-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.xp-spon-strip .xp-spon-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
/* each logo sits on its own white tile so dark, light and transparent artwork all
   read the same against the band - directors upload whatever they are given */
.xp-spon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.75rem;
    background: #ffffff;
    border: 1px solid var(--xp-border, #e3e8ef);
    border-radius: 0.6rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.xp-spon-strip .xp-spon-item {
    width: 10.5rem;
}
a.xp-spon-item:hover {
    border-color: var(--xp-primary, #1b5e9e);
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.08);
}
/* contain, never stretch: the old page measured every image with GDI+ to center it,
   which CSS does for free and without decoding the file server-side */
.xp-spon-item img {
    max-width: 100%;
    max-height: 4.5rem;
    width: auto;
    height: auto;
    object-fit: contain;
}
.xp-spon-all,
.xp-spon-edit {
    display: inline-block;
    margin-top: 0.55rem;
    font-size: 0.78rem;
    color: var(--xp-ink-soft, #5b6472);
    text-decoration: none;
}
.xp-spon-rail .xp-spon-all,
.xp-spon-rail .xp-spon-edit {
    display: block;
    text-align: left;
}
.xp-spon-all:hover,
.xp-spon-edit:hover {
    color: var(--xp-primary, #1b5e9e);
    text-decoration: underline;
}
/* admin-only "add sponsors" tile: quieter than the message empty state, so an event
   with neither does not present two competing calls to action */
.xp-spon-add {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    font-size: 0.85rem;
}
.xp-spon-add .mdi {
    font-size: 1.1rem;
}

@media (max-width: 767px) {
    /* the rail stacks under the message and lays its logos out side by side, so it
       never becomes a tall single-file column on a phone */
    .xp-text-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .xp-text-split .xp-spon-head {
        text-align: center;
    }
    .xp-text-split .xp-spon-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }
    .xp-text-split .xp-spon-item {
        width: 9.5rem;
    }
    .xp-text-split .xp-spon-all,
    .xp-text-split .xp-spon-edit {
        text-align: center;
    }
}

/* ---- weather / announcement alert bar ---- */
/* .xp-alert now lives in tt10.css. The bar is the TT10 master's weather
   alert, and it is wanted on the standard template as well as Express -
   tt10.css is loaded on every TT10 render, express.css only on an Express
   one. Nothing here consumed the --xp-* tokens, so the move is lossless. */

/* ---- games strip (#gamescroll#, Express variant) ---- */
.xp-games {
    padding: 1.5rem 1rem 1.75rem;
}
.xp-games-hd {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}
.xp-games-track {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.15rem 0.15rem 0.85rem;
    scrollbar-width: thin;
}
.xp-game {
    flex: 0 0 auto;
    width: clamp(14rem, 26vw, 17rem);
    scroll-snap-align: start;
    border: 1px solid var(--xp-border, #e3e8ef);
    border-radius: 0.75rem;
    background: var(--xp-surface, #ffffff);
    padding: 0.85rem 1rem;
}
.xp-game-div {
    margin-bottom: 0.55rem;
}
.xp-game-div a {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: var(--xp-primary-tint, rgba(27, 94, 158, 0.08));
    color: var(--xp-primary, #1b5e9e);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.xp-game-team {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
}
.xp-game-team span {
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xp-game-team b {
    font-family: var(--xp-font-display, 'Outfit', sans-serif);
    font-size: 1.05rem;
}
.xp-game-meta {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--xp-border, #e3e8ef);
    color: var(--xp-ink-soft, #5b6472);
    font-size: 0.8rem;
}
.xp-game-meta em {
    display: block;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- footer: one thin help row ----
   SincSports logo on the left, help links right-justified. The Event
   Information column is redundant on Express (the contact band sits right
   above), so it hides entirely. The column label text is erased with the
   font-size-0 trick because it is a bare text node in the master markup. */
#tfooter .footerWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    text-align: right;
    float: none;
    width: auto;
    max-width: 1160px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
}
#tfooter #eFoot {
    display: none;
}
#tfooter #sincFoot {
    float: none;
    width: auto;
    margin: 0;
    order: 2;
}
#tfooter #sincLogo {
    order: 1;
}
#tfooter #sincFoot .fContents {
    font-size: 0;
}
#tfooter #sincFoot .fContents br {
    display: none;
}
#tfooter #sincFoot .fContents a {
    font-size: 0.88rem;
    display: inline-block;
    margin: 0 0 0 1.6rem;
    line-height: 2;
    opacity: 0.85;
}
@media (max-width: 560px) {
    #tfooter .footerWrap {
        justify-content: center;
        text-align: center;
    }
    #tfooter #sincFoot .fContents a {
        margin: 0 0.7rem;
    }
}
#tfooter #sincFoot .fContents a:hover {
    opacity: 1;
}
#tfooter .clear {
    display: none;
}

/* ---- footer: collapse the vertical space ----
   Express has a one-line footer, so TT10's chrome around it is sized for a footer
   that is not there any more. THREE separate sources contribute vertical space and
   all of them have to go or the footer cannot shrink:

     bs/all.css      .pt-8 -> padding-top: 3rem !important   (the class is on the
                     div in TT10.master, and it is !important, which is why the
                     override below has to be too)
     css/tt10.css    padding-top 10px + padding-bottom 22px, and min-height 80px
     this file       .footerWrap padding 1.1rem top/bottom

   min-height goes with the padding deliberately: at an 80px floor, removing the
   padding would not change the rendered height at all. The 15px margin-top from
   tt10.css is LEFT alone - that is separation from the content above, not footer
   padding, and removing it would butt the footer against the last band. */
#tfooter {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0;
}
#tfooter .footerWrap {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- mobile safety net ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}