/*
 * league-miniport.css — "Miniport" public-page skin (Pro).
 *
 * Miniport is NOT a separate render path: the page ships the Modern markup
 * (body carries `tpl-modern tpl-miniport`), and this stylesheet — loaded AFTER
 * league-page.css — restyles the shared classes into the Miniport look:
 * a fixed dark top nav, Open Sans type with uppercase spaced headings,
 * alternating light section bands + a dark contact/footer band, and flat
 * rounded "box" cards. The league's accent still comes from --league-secondary.
 *
 * Design tokens lifted from the HTML5 UP "Miniport" template (Open Sans;
 * nav #282828; bands #fff / #fafafa / #f4f4f4 / #303030; 8px button radius).
 * Only `.tpl-miniport`-scoped rules live here so Modern is untouched.
 *
 * DISTINCTIVE LAYOUT: unlike Modern's full-bleed sections, Miniport frames the
 * whole site as a centered fixed-width "sheet" floating on a soft neutral page,
 * with whitespace down the left and right. That boxed structure is what sets it
 * apart from Modern at a glance.
 */

/* ── Centered "boxed card" layout — the signature difference from Modern ──
   The whole site (nav + content + footer) is ONE rounded card floating on a
   soft neutral page, raised with a drop shadow, framed by whitespace on all
   sides. The three pieces sit flush (no gaps between them); the next sibling
   paints over the previous one's inner shadow, so the shadow reads as a single
   card halo with no internal seams. Below the max-width it goes full-width. */
.tpl-miniport {
    background: #eef0f3;
    /* clears the FULL-WIDTH fixed nav (matches Modern's 72px header offset);
       28px side gutters keep whitespace between the card and the page edges at
       every width (the card caps at max-width on wide screens). */
    padding-top: 72px;
    padding-left: 28px;
    padding-right: 28px;
}
/* Content + footer = the boxed card (the full-width fixed nav sits above it). Strong
   drop shadow so it clearly reads as raised off the page. */
.tpl-miniport .lp-content,
.tpl-miniport .lp-footer {
    max-width: 1144px; /* 10% wider than the previous 1040 */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}
.tpl-miniport .lp-content { background: #ffffff; border-radius: 16px 16px 0 0; margin-top: 32px; }
/* Round the hero / first section to match the card's rounded top. */
.tpl-miniport .lp-content > .pe-mod-hero:first-child,
.tpl-miniport .lp-content > section:first-child {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
.tpl-miniport .lp-footer {
    margin-top: 0;
    margin-bottom: 34px;
    border-radius: 0 0 16px 16px;
    overflow: hidden; /* clip the bottom copyright bar to the rounded corners */
}
/* The copyright bar lives inside .lp-footer-inner (52px padding), so its darker/
   distinct background stops short of the footer edges. Break it out to the full
   footer width (negative margin = the inner padding) while keeping its text
   aligned with the columns (matching padding). overflow:hidden above clips its
   corners to the footer's rounded bottom. */
.tpl-miniport .lp-footer-bottom {
    margin-left: -52px;
    margin-right: -52px;
    padding-left: 52px;
    padding-right: 52px;
}
/* Keep the hero + bands contained within the card (no full-bleed breakout). */
.tpl-miniport .pe-mod-hero,
.tpl-miniport .pe-mod-section { width: auto; }

/* Hero sits at the TOP of the boxed card, showing the card's 32px float-gap
   below the fixed nav. The shared fill-mode hero pulls itself up under the
   header (margin-top: -72px) — right for full-bleed Modern, but here it eats
   the gap and jams the hero under the nav, so a league WITHOUT a hero image (or
   in Fill mode) lost the gap while a Fit/image hero (margin-top:0) kept it.
   Pin every desktop hero to margin-top:0 so all Default leagues match, and drop
   the now-pointless header-offset top padding. (A Fit hero's own
   `.pe-mod-hero-fit` rule (0,3,0) still wins, so its padding:0 is untouched.)
   Mobile (<=700px) stays full-bleed below, where the pull-up is still correct. */
@media (min-width: 701px) {
    .tpl-miniport .pe-mod-hero {
        margin-top: 0;
        padding-top: var(--mod-sp-xxl);
    }
}

/* Inner content padding: the boxed card is narrow, and the section containers
   (max-width ~1140) nearly fill it, so their default ~24px padding leaves
   content hugging the card edges. Give it comfortable whitespace on desktop
   (mobile keeps the tighter default). Applies to landing sections, sub-page
   sections, and the shared container. The hero stays full-bleed (not a section). */
@media (min-width: 768px) {
    .tpl-miniport .pe-mod-section,
    .tpl-miniport .lp-page-section,
    .tpl-miniport .pe-container,
    .tpl-miniport .lp-footer-inner {
        padding-left: 52px;
        padding-right: 52px;
    }
}

/* ── Sub-page header: how far it hangs outside the content column ──
   league-page.css outdents .lp-page-header-bar (and the breadcrumb that hangs
   with it) by --lp-outdent: 24px, rising to 52px from 1280 up. On Modern's
   full-bleed bands that is slack OUTSIDE the 1140px column. Inside this boxed
   card the section fills the card, so from 1280 up the 52px hang cancelled the
   52px padding above exactly and every sub-page title — About, Divisions,
   Calendar, What We Offer, Contact — sat flush on the card's rounded edge while
   its body copy sat 52px in. Pin the hang to 24px here: the title still reads a
   touch wider than the body and keeps 28px of card margin. A phone gets none.
   Declared on the body, so it beats the :root media rules at every width. */
.tpl-miniport { --lp-outdent: 0px; }
@media (min-width: 768px) {
    .tpl-miniport { --lp-outdent: 24px; }
}

/* The shared header bar is text-align:center, which the flex .lp-page-title
   never honours — so a page that lacks the inline text-align:left (What We
   Offer, Calendar, Contact, Become a Sponsor) drew a LEFT title over a CENTERED
   subtitle. Default's sub-page headers are left-aligned, title and subtitle. */
.tpl-miniport .lp-page-header-bar { text-align: left; }

/* Mobile (<=700px): drop the boxed-card look and go full-bleed edge-to-edge —
   no side gutters, rounded corners, shadow, or gaps. The hero and every band
   fill the screen width. Desktop keeps the centered card. */
@media (max-width: 700px) {
    .tpl-miniport { padding-left: 0; padding-right: 0; }
    .tpl-miniport .lp-content,
    .tpl-miniport .lp-footer { max-width: 100%; box-shadow: none; }
    .tpl-miniport .lp-content { border-radius: 0; margin-top: 0; }
    .tpl-miniport .lp-content > .pe-mod-hero:first-child,
    .tpl-miniport .lp-content > section:first-child { border-radius: 0; }
    .tpl-miniport .lp-footer { margin-bottom: 0; border-radius: 0; }
    /* Undo the desktop -52px copyright-bar breakout so it doesn't over-inset. */
    .tpl-miniport .lp-footer-bottom { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* ── Type ─────────────────────────────────────────────────────────── */
.tpl-miniport,
.tpl-miniport .pe-hero-subtitle,
.tpl-miniport p,
.tpl-miniport li,
.tpl-miniport input,
.tpl-miniport textarea,
.tpl-miniport select {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.tpl-miniport h1,
.tpl-miniport h2,
.tpl-miniport h3,
.tpl-miniport h4,
.tpl-miniport .pe-hero-title,
.tpl-miniport .pe-section-title,
.tpl-miniport .lp-page-title,
.tpl-miniport .lp-footer-heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ── FIXED full-width dark nav — a static bar pinned to the top (never moves,
   never animates). Square, edge-to-edge. */
.tpl-miniport .lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    z-index: 1000;
    background: #282828;
    border-radius: 0;
    border-bottom: 0;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
}
/* KILL the scroll automation: the header content spreads centred->full-width on
   scroll in Modern (`.lp-header-scrolled .lp-header-inner`). Force the scrolled
   state identical to the base + no transition, so the menu never moves. The
   logo is already forced always-visible above. */
.tpl-miniport .lp-header.lp-header-scrolled { background: #282828; }
.tpl-miniport .lp-header-inner,
.tpl-miniport .lp-header-scrolled .lp-header-inner {
    max-width: 100%;
    padding: 0 40px;
    transition: none;
}

/* Desktop (>=900): full nav — logo LEFT, menu links + Active Events RIGHT.
   Force the nav visible + hamburger/a11y-icon hidden to override Modern's
   <=1023 mobile rules across the 900-1023 band (Default uses a 900 breakpoint,
   not Modern's 1023). */
@media (min-width: 900px) {
    .tpl-miniport .lp-header-inner { justify-content: flex-start; gap: 20px; }
    .tpl-miniport .lp-logo-link { order: 0; flex-shrink: 0; }
    .tpl-miniport .lp-nav { order: 1; margin-left: auto; display: flex !important; max-height: none !important; }
    .tpl-miniport .lp-header-cta { order: 2; display: inline-flex !important; }
    .tpl-miniport .lp-hamburger,
    .tpl-miniport .lp-ada-mobile { display: none !important; }
}

/* Mobile + tablet (<900): hamburger menu. Active Events + Accessibility move
   INTO the overlay (revealed by the shared `.lp-nav.open .lp-nav-extra` rule in
   league-page.css); the bar CTA + separate a11y icon are hidden (they live in
   the menu now). Modern's <=1023 block supplies the hamburger + overlay. */
@media (max-width: 899px) {
    .tpl-miniport .lp-header-cta,
    .tpl-miniport .lp-ada-mobile { display: none !important; }
}

/* Always show the logo — Modern collapses it (opacity:0/max-width:0) until the
   header is scrolled; keep it visible at all times here. */
.tpl-miniport .lp-logo-link { display: flex !important; }
.tpl-miniport .lp-logo-img {
    display: block !important;
    opacity: 1 !important;
    max-width: none !important;
    height: 34px;
    max-height: 34px;
    width: auto;
    transition: none !important;   /* no fade — it's always visible here */
}
.tpl-miniport .lp-logo-placeholder { color: #fff; }

/* Active Events — smaller. */
.tpl-miniport .lp-header-cta {
    padding: 6px 15px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* Nav links (`.lp-header` prefix keeps these above Modern's rules). */
.tpl-miniport .lp-header .lp-nav-link {
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 600;
}
.tpl-miniport .lp-header .lp-nav-link:hover,
.tpl-miniport .lp-header .lp-nav-link.lp-nav-active {
    color: #fff;
}
.tpl-miniport .lp-header .lp-nav-link.lp-nav-active {
    box-shadow: inset 0 -2px 0 var(--league-secondary, #38bdf8);
}
/* mobile slide-in menu keeps the dark treatment */
.tpl-miniport .lp-nav { background: #282828; }

/* ── Register / primary buttons — flat, 8px, uppercase ────────────── */
.tpl-miniport .pe-btn,
.tpl-miniport .pe-btn-primary,
.tpl-miniport .pe-card-cta,
.tpl-miniport .lp-header-cta {
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: 0.78rem;
}
.tpl-miniport .lp-header-cta {
    background: var(--league-secondary, #38bdf8);
    color: #fff;
    /* Flat, vertically-centered label. line-height:1 + justify-content:center
       kill the "text sits high" look; border:0 drops Modern's 2px outline. */
    line-height: 1;
    justify-content: center;
    border: 0;
    transition: filter 0.15s ease;
}
/* Hover: just darken the blue in place — no raise (base translateY) and no
   transparent outline-flip (Modern's hover), which don't fit Default's flat style. */
.tpl-miniport .lp-header-cta:hover,
.tpl-miniport .lp-header-cta:focus {
    background: var(--league-secondary, #38bdf8);
    color: #fff;
    filter: brightness(0.9);
    transform: none;
    opacity: 1;
}

/* ── Section bands — Miniport's alternating light strips ──────────── */
.tpl-miniport .pe-section { padding: 4.5rem 0; }
.tpl-miniport .pe-section:nth-of-type(even) { background: #fafafa; }
.tpl-miniport .pe-section:nth-of-type(odd)  { background: #ffffff; }
.tpl-miniport .pe-section-title {
    text-align: center;
    font-size: 1.6rem;
}
/* accent rule under centered section titles (Miniport signature) */
.tpl-miniport .pe-section-title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0.85rem auto 0;
    background: var(--league-secondary, #38bdf8);
    border-radius: 3px;
}
.tpl-miniport .pe-section-subtitle { text-align: center; }

/* dark contact/closing band, like Miniport's style4 */
.tpl-miniport .pe-mod-dark { background: #303030; }

/* ── Landing composition (.pe-mod-* — the CMS-driven home sections) ─
   The home hero/About/Programs/Contact bands are rendered by the shared
   Modern composition; here we just swap their type to Open Sans so the
   landing matches the rest of the Miniport skin. Bands already alternate
   (white / league-dark / tint) and section titles already carry the
   centered accent underline, so those need no change. */
.tpl-miniport .pe-mod-hero-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5);
}
.tpl-miniport .pe-mod-hero-slogan {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1rem;
    font-weight: 600;
}
.tpl-miniport .pe-mod-section-title,
.tpl-miniport .pe-mod-section-desc,
.tpl-miniport .pe-mod-feature-title,
.tpl-miniport .pe-mod-feature-text {
    font-family: 'Open Sans', sans-serif;
}

/* ── Cards — flat "box" style with hover lift ─────────────────────── */
.tpl-miniport .pe-event-card,
.tpl-miniport .lp-season-card,
.tpl-miniport .lp-svc-card,
.tpl-miniport .pe-mod-feature-card,
.tpl-miniport .pe-card {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tpl-miniport .pe-event-card:hover,
.tpl-miniport .lp-season-card:hover,
.tpl-miniport .lp-svc-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* ── Mobile menu ──────────────────────────────────────────────────
   The desktop nav rule above sets a small 0.72rem link size; without this
   it would leak into the full-screen mobile overlay and shrink those links.
   Restore the larger tap-friendly size (Modern uses ~20px) at <=900px.
   The 0,4,0 selector clears both the desktop skin rule and Modern's. */
@media (max-width: 900px) {
    .tpl-miniport .lp-header .lp-nav.open .lp-nav-link {
        font-size: 0.95rem;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.85);
    }
    .tpl-miniport .lp-header .lp-nav.open .lp-nav-link.lp-nav-active {
        color: #fff;
    }
}

/* ── Footer — dark, matching the nav ──────────────────────────────── */
.tpl-miniport .lp-footer {
    background: #282828;
    color: rgba(255, 255, 255, 0.7);
}
.tpl-miniport .lp-footer-heading { color: #fff; }
.tpl-miniport .lp-footer a { color: rgba(255, 255, 255, 0.7); }
.tpl-miniport .lp-footer a:hover { color: #fff; }
.tpl-miniport .lp-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.12);
}