/**
 * ProElite Sports — Public League Page Styles
 *
 * Styles for the public-facing league page rendered at /league/{slug}.
 * Uses --league-primary and --league-secondary CSS variables set inline
 * from the league's branding colors.
 */

/* ── Reset & Base ─────────────────────────────────────── */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333;
    background: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
}

.lp-content {
    flex: 1;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--league-link, var(--league-secondary, #38bdf8));
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── Container ────────────────────────────────────────── */

.pe-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Header ───────────────────────────────────────────── */

.lp-header {
    background: #1a1a2e;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.lp-header-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 64px;
    gap: 32px;
}

.lp-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ffffff;
    flex-shrink: 0;
}

.lp-logo-link:hover {
    text-decoration: none;
}

.lp-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}

.lp-logo-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.lp-league-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #ffffff;
}

/* ── Header CTA Button ──────────────────────────────── */

.lp-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    background: var(--league-primary, #1a1a2e);
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.15s;
}

.lp-header-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

/* ── Main Content ─────────────────────────────────────── */

/* ── Sections ─────────────────────────────────────────── */

.pe-section {
    padding: 80px 0;
}

.pe-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: -0.3px;
}

.pe-section-subtitle {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.pe-text {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

/* ── Row & Columns ────────────────────────────────────── */

.pe-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.pe-col {
    min-height: 40px;
}

.pe-col-4 {
    flex: 1 1 calc(33.333% - 16px);
    min-width: 200px;
}

.pe-col-6 {
    flex: 1 1 calc(50% - 12px);
    min-width: 240px;
}

/* ── Hero Banner ──────────────────────────────────────── */

.pe-hero {
    padding: 112px 24px;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
}

.pe-hero-image {
    padding: 128px 24px;
}

.pe-hero-image .pe-hero-title,
.pe-hero-image .pe-hero-subtitle {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pe-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
}

.pe-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.pe-hero-subtitle {
    font-size: 20px;
    margin-bottom: 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    opacity: 0.9;
}

/* ── Content Flow Sections ────────────────────────────── */

.pe-flow-section {
    padding: 80px 0;
}

.pe-flow-section.pe-flow-alt {
    background: #f8f9fa;
}

.pe-flow-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.pe-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--league-primary, #1a1a2e);
    color: #fff;
    margin-bottom: 20px;
}

.pe-flow-title {
    font-family: 'Outfit', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 20px;
    letter-spacing: -0.3px;
}

.pe-flow-body {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    text-align: left;
}

.pe-flow-empty {
    color: #999;
    font-style: italic;
}

/* Registration CTA Banner */
.pe-flow-cta {
    padding: 80px 0;
    background: var(--league-primary, #1a1a2e);
    color: #fff;
}

.pe-flow-cta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.pe-flow-cta-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.pe-flow-cta-sub {
    font-size: 17px;
    margin: 0;
    opacity: 0.85;
}

.pe-flow-cta .pe-btn-light {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── News Carousel ───────────────────────────────────── */

.pe-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    max-width: 760px;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.pe-carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.pe-carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

/* Image slide — background image with dark overlay */
.pe-slide-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 340px;
    position: relative;
    color: #fff;
}

.pe-slide-overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 600px;
}

.pe-slide-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65));
    z-index: 0;
}

.pe-slide-image .pe-slide-title {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pe-slide-image .pe-slide-body {
    color: rgba(255, 255, 255, 0.9);
}

.pe-slide-image .pe-slide-link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.pe-slide-image .pe-slide-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* Text-only slide — white bg, dark text */
.pe-slide-text {
    background: #fff;
    color: #333;
    min-height: 280px;
    text-align: center;
}

.pe-slide-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.pe-slide-body {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0 0 20px;
    max-width: 560px;
}

.pe-slide-link {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid var(--league-primary, #1a1a2e);
    border-radius: 50px;
    color: var(--league-primary, #1a1a2e);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.pe-slide-link:hover {
    background: var(--league-primary, #1a1a2e);
    color: #fff;
}

/* Prev / Next arrows */
.pe-carousel-prev,
.pe-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, transform 0.2s;
}

.pe-carousel-prev { left: 12px; }
.pe-carousel-next { right: 12px; }

.pe-carousel-prev:hover,
.pe-carousel-next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

/* Dot indicators */
.pe-carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
}

.pe-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.pe-dot.active {
    background: #fff;
}

.pe-dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ── Buttons ──────────────────────────────────────────── */

.pe-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s, transform 0.15s;
    text-align: center;
}

.pe-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

.pe-btn-primary {
    background: var(--league-btn-bg, var(--league-secondary, #38bdf8));
    color: var(--league-btn-text, #ffffff);
}

.pe-btn-light {
    background: #ffffff;
    color: var(--league-primary, #1a1a2e);
}

/* ── Event Cards ──────────────────────────────────────── */

.pe-event-grid {
    display: grid;
    /* minmax(0,1fr), never bare 1fr — a card with a long unbroken token would
       otherwise refuse to shrink and push the grid past the viewport. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.pe-event-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pe-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pe-event-card-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pe-event-badge {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pe-event-card-body {
    padding: 20px;
}

.pe-event-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.pe-event-dates {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.pe-event-desc {
    font-size: 14px;
    color: #777;
    margin-bottom: 16px;
    line-height: 1.5;
}

.pe-event-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.pe-event-price {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--league-primary, #1a1a2e);
}

.pe-event-ages {
    font-size: 13px;
    color: #888;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 4px;
}

.pe-event-card .pe-btn {
    display: block;
    width: 100%;
    text-align: center;
}

/* ── FAQ ──────────────────────────────────────────────── */

.pe-faq-list {
    max-width: 720px;
    margin: 32px auto 0;
}

.pe-faq-item {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.pe-faq-item[open] {
    border-color: var(--league-secondary, #38bdf8);
}

.pe-faq-q {
    padding: 16px 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pe-faq-q::after {
    content: '+';
    font-size: 20px;
    color: #999;
    transition: transform 0.2s;
}

.pe-faq-item[open] .pe-faq-q::after {
    content: '\2212';
    color: var(--league-secondary, #38bdf8);
}

.pe-faq-q::-webkit-details-marker {
    display: none;
}

.pe-faq-a {
    padding: 0 20px 16px;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* ── Contact ──────────────────────────────────────────── */

.pe-contact-grid {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.pe-contact-item {
    text-align: center;
    min-width: 200px;
}

.pe-contact-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.pe-contact-item h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.pe-contact-item p {
    font-size: 14px;
    color: #666;
}

.pe-contact-item a {
    color: var(--league-secondary, #38bdf8);
}

/* ── CTA Banner ───────────────────────────────────────── */

.pe-cta {
    padding: 80px 24px;
    text-align: center;
}

.pe-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}

.pe-cta-title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.pe-cta-text {
    font-size: 17px;
    margin-bottom: 32px;
}

/* ── Divider ──────────────────────────────────────────── */

.pe-divider {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: 32px auto;
    max-width: 720px;
}

/* ── Spacer ───────────────────────────────────────────── */

.pe-spacer {
    width: 100%;
}

/* ── Scroll to Top Button ────────────────────────────── */

.lp-scroll-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lp-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lp-scroll-top:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

/* ── Footer ──────────────────────────────────────────── */
.lp-footer {
    background: #333;
    color: #adb5bd;
    padding: 48px 24px 0;
    margin-top: 64px;
}

.lp-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.lp-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
}

.lp-footer-col {
    min-width: 0;
}

.lp-footer-brand {
    padding-right: 24px;
}

.lp-footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.lp-footer-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.lp-footer-logo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

.lp-footer-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.lp-footer-about {
    font-size: 14px;
    line-height: 1.7;
    color: #8a919a;
    margin: 0;
}

.lp-footer-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lp-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp-footer-links li {
    margin-bottom: 10px;
}

.lp-footer-links a {
    color: #8a919a;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s;
}

.lp-footer-links a:hover {
    color: #fff;
}

.lp-footer-social {
    display: flex;
    gap: 12px;
}

.lp-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.lp-social-icon svg {
    width: 18px;
    height: 18px;
}

.lp-social-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.lp-footer-no-social {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

.lp-footer-bottom {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #6c757d;
}

.lp-footer-bottom a {
    color: #adb5bd;
    text-decoration: none;
}

.lp-footer-bottom a:hover {
    color: #fff;
}

.lp-powered-by a {
    color: #adb5bd;
    text-decoration: none;
    font-weight: 500;
}

.lp-powered-by a:hover {
    color: #fff;
}

/* ── Header Navigation ────────────────────────────────── */

.lp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.lp-nav-link {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.lp-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.lp-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    padding: 8px;
    border-radius: 8px;
    flex-shrink: 0;
}

.lp-hamburger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lp-nav-close {
    display: none;
}

/* ── Breadcrumbs ─────────────────────────────────────── */

.lp-breadcrumbs {
    margin-bottom: 16px;
}

.lp-breadcrumbs ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0;
}

.lp-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.lp-breadcrumb-link {
    color: var(--league-secondary, #38bdf8);
    text-decoration: none;
}

.lp-breadcrumb-link:hover {
    text-decoration: underline;
}

.lp-breadcrumb-sep {
    color: #ccc;
    margin: 0 2px;
}

.lp-breadcrumb-current {
    color: #888;
    font-weight: 500;
}

/* ── Page Header (sub-pages) ─────────────────────────── */

.lp-page-header {
    padding: 32px 0 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8e8e8;
}

.lp-page-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Season Detail Styles ────────────────────────────── */

.lp-season-header {
    margin-top: 8px;
}

.lp-season-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.lp-season-dates {
    font-size: 16px;
    color: #666;
    margin-bottom: 12px;
}

.lp-season-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    max-width: 720px;
}

/* ── About This Season ──────────────────────────────── */

.lp-season-about {
    padding: 40px 0;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.lp-about-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.lp-about-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--league-primary, #38bdf8);
}

.lp-about-content {
    max-width: 780px;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.lp-about-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 24px 0 10px;
}

.lp-about-content h2:first-child {
    margin-top: 0;
}

.lp-about-content h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    margin: 20px 0 8px;
}

.lp-about-content p {
    margin: 0 0 14px;
}

.lp-about-content p:last-child {
    margin-bottom: 0;
}

.lp-about-content strong,
.lp-about-content b {
    font-weight: 700;
    color: #1e293b;
}

.lp-about-content em,
.lp-about-content i {
    font-style: italic;
}

.lp-about-content u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-about-content ul,
.lp-about-content ol {
    margin: 10px 0 14px 24px;
    padding: 0;
}

.lp-about-content li {
    margin-bottom: 6px;
}

.lp-about-content a {
    color: var(--league-primary, #38bdf8);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-about-content a:hover {
    opacity: 0.8;
}

.lp-division-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--league-secondary, #38bdf8);
    background: rgba(56, 189, 248, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Status Badges ───────────────────────────────────── */

.lp-status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lp-status-open {
    color: #166534;
    background: #dcfce7;
}

.lp-status-closed {
    color: #9a3412;
    background: #fed7aa;
}

.lp-status-full {
    color: #991b1b;
    background: #fee2e2;
}

/* ── Season Cards (landing page) ─────────────────────── */

.lp-season-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.lp-season-card:hover {
    text-decoration: none;
}

.lp-season-card .pe-event-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-team-count {
    font-size: 13px;
    color: #888;
}

.lp-view-details {
    font-size: 13px;
    font-weight: 600;
    color: var(--league-secondary, #38bdf8);
}

/* ── Pre-Registration Season Card ──────────────────────── */

.lp-season-card.pre-registration {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}
.lp-season-card.pre-registration:hover {
    opacity: 0.75;
    transform: none;
}

.lp-status-upcoming {
    color: #1e40af;
    background: #dbeafe;
}

.pre-reg-countdown {
    font-size: 13px;
    font-weight: 500;
    color: var(--league-primary, #3b82f6);
    padding: 6px 0 2px;
    display: flex;
    align-items: center;
}

/* ── Registration Card ───────────────────────────────── */

.lp-reg-section {
    padding: 24px 0;
}

.lp-reg-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.lp-reg-info h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.lp-reg-dates {
    font-size: 14px;
    color: #666;
}

.lp-reg-waiver-note {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
}

/* ── Registration Banner (season detail page) ──── */
.lp-reg-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    background: var(--league-primary, #1a1a2e);
    border-radius: 14px;
    color: #fff;
}
.lp-reg-banner-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
}
.lp-reg-banner-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin: 0;
}
.lp-reg-banner .lp-reg-dates {
    color: rgba(255,255,255,0.7);
    margin-top: 6px;
}
.lp-reg-banner .lp-reg-waiver-note {
    color: rgba(255,255,255,0.6);
}
.lp-reg-banner-action {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.lp-reg-price {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}
.lp-reg-banner .pe-btn-primary {
    background: #fff;
    color: var(--league-primary, #1a1a2e);
    font-weight: 700;
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 10px;
    white-space: nowrap;
}
.lp-reg-banner .pe-btn-primary:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.pe-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pe-btn[disabled]:hover {
    opacity: 0.5;
    transform: none;
}

/* ── Team Grid (season page) ─────────────────────────── */

/* ── Grade Grouping ────────────────────────────────── */
.lp-grade-group {
    margin-top: 28px;
}
.lp-grade-group:first-child {
    margin-top: 8px;
}
.lp-grade-group-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 4px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--league-primary, #1a1a2e);
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-grade-group-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--league-primary, #1a1a2e);
    flex-shrink: 0;
}

.lp-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 16px;
}

.lp-team-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.lp-team-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--league-secondary, #38bdf8);
    text-decoration: none;
}

.lp-team-card-top {
    margin-bottom: 14px;
}

.lp-team-card-name {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.lp-team-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.lp-team-coach {
    font-size: 14px;
    color: #666;
}

.lp-team-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.lp-team-roster-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.lp-roster-label {
    font-size: 13px;
    color: #888;
}

.lp-roster-bar-wrap {
    width: 100%;
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
}

.lp-roster-bar {
    height: 100%;
    background: var(--league-secondary, #38bdf8);
    border-radius: 2px;
    transition: width 0.3s;
}

.lp-grade-badge {
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Team Detail Page ────────────────────────────────── */

.lp-team-header {
    margin-top: 8px;
}

.lp-team-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.lp-team-detail {
    font-size: 15px;
    color: #555;
}

.lp-team-detail strong {
    color: #333;
}

/* ── Roster Table ────────────────────────────────────── */

.lp-roster-wrap {
    max-width: 540px;
    margin: 0 auto;
}

.lp-roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.lp-roster-table thead {
    border-bottom: 2px solid #e8e8e8;
}

.lp-roster-table th {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    padding: 12px 16px;
    text-align: left;
}

.lp-roster-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.lp-roster-table tbody tr:last-child td {
    border-bottom: none;
}

.lp-roster-table tbody tr:hover {
    background: #f8f9fa;
}

/* ── Empty State ─────────────────────────────────────── */

.lp-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.lp-empty-icon {
    margin-bottom: 16px;
}

.lp-empty-state h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.lp-empty-state p {
    font-size: 15px;
    color: #888;
    max-width: 400px;
    margin: 0 auto;
}

/* ── Schedule Stub ───────────────────────────────────── */

.lp-schedule-stub {
    background: #f8f9fa;
}

/* ── Back Link ───────────────────────────────────────── */

.lp-back-section {
    padding: 24px 0 48px;
}

.lp-back-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--league-secondary, #38bdf8);
    text-decoration: none;
    transition: opacity 0.2s;
}

.lp-back-link:hover {
    text-decoration: underline;
}

/* ── Sponsors (Public Page) ──────────────────────────── */

.pe-sponsor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    padding: 8px 0;
}

.pe-sponsor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, opacity 0.2s;
    min-width: 100px;
    max-width: 160px;
}

.pe-sponsor-item:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.pe-sponsor-logo {
    max-height: 60px;
    max-width: 140px;
    object-fit: contain;
}

.pe-sponsor-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #94a3b8;
}

.pe-sponsor-name {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-align: center;
}

/* ── Subpage Common ──────────────────────────────────── */
.lp-page-section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.lp-page-header-bar {
    text-align: center;
    margin-bottom: 40px;
}

.lp-page-title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.lp-page-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* ── Sponsors Page ───────────────────────────────────── */
.lp-sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.lp-sp-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: box-shadow 0.2s;
}

.lp-sp-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.lp-sp-card-logo-wrap {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto 16px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-sp-card-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lp-sp-card-letter {
    font-size: 28px;
    font-weight: 700;
    color: #94a3b8;
}

.lp-sp-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.lp-sp-card-url {
    font-size: 13px;
    color: #38bdf8;
    text-decoration: none;
}

.lp-sp-card-url:hover {
    text-decoration: underline;
}

/* ── Services Page ("What We Offer" marketing cards) ─── */
.lp-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.lp-svc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.lp-svc-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.lp-svc-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #f1f5f9;
}

.lp-svc-card-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.lp-svc-card-name {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
}

.lp-svc-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 18px;
    white-space: pre-line;
}

.lp-svc-card-link {
    margin-top: auto;
    align-self: flex-start;
}

/* ── Empty State ─────────────────────────────────────── */
.lp-empty-state {
    text-align: center;
    padding: 64px 24px;
    color: #94a3b8;
}

.lp-empty-state svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.lp-empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 8px;
}

.lp-empty-state p {
    font-size: 15px;
    margin: 0;
    max-width: 400px;
    margin: 0 auto;
}

/* ── Contact page: two-column layout ─────────────────────
   Contact details as a left-aligned list on the left, the message form on the
   right. Collapses to a single column at <=900px. */
.lp-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
    margin-top: 40px;
}

/* Left column — the base .pe-contact-grid is a centred wrapping row; inside the
   layout, stack the items into a left-aligned list with a boxed accent icon. */
.lp-contact-layout .pe-contact-grid {
    flex-direction: column;
    justify-content: flex-start;
    gap: 22px;
    margin-top: 0;
}
.lp-contact-layout .pe-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    min-width: 0;
}
.lp-contact-layout .pe-contact-icon {
    flex-shrink: 0;
    margin: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--league-secondary, #38bdf8) 12%, transparent);
    color: var(--league-secondary, #38bdf8);
}
.lp-contact-layout .pe-contact-item strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    color: #1a1a2e;
    margin-bottom: 2px;
}

/* Right column — let the form card fill the column rather than the centred
   640px cap it uses in the single-column layout. */
.lp-contact-layout .lp-contact-form {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* Send button sits at the bottom-right of the form. */
.lp-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .lp-contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* ── Contact Form ──────────────────────────────────────
   Base width also used by the standalone Coach/Referee signup cards. The real
   contact page overrides this to width:100% via .lp-contact-layout above. */
.lp-contact-form {
    max-width: 800px;
    margin: 48px auto 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
}

.lp-contact-form-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 24px;
}

.lp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lp-form-group {
    margin-bottom: 16px;
}

.lp-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.lp-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #1a1a2e;
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.lp-form-input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}

/* iOS Safari zooms the page when a focused control is < 16px — pin the public
   form controls to 16px on phones so the contact/registration forms don't lurch. */
@media (max-width: 599px) {
    .lp-form-input { font-size: 16px; }
}

/* ── Coach / Referee public signup forms (Modern shell) ──────────────────
   These two forms share ONE markup for both templates, built with Bold's
   .form/.field/.btn class names (styled in league-v2.css). On the Modern shell
   they render inside .lp-contact-form, where those classes were unstyled — so
   they fell back to bare browser inputs. Style them here to match the contact
   form. Scoped to .lp-contact-form; the real contact form uses .lp-form-* and
   is unaffected. */
.lp-contact-form .field { margin-bottom: 16px; }
.lp-contact-form .field > label {
    display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 6px;
}
.lp-contact-form .field input,
.lp-contact-form .field select,
.lp-contact-form .field textarea {
    width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; font-family: 'DM Sans', sans-serif; color: #1a1a2e; background: #fff;
    box-sizing: border-box; transition: border-color 0.15s;
}
.lp-contact-form .field textarea { min-height: 110px; resize: vertical; }
.lp-contact-form .field input:focus,
.lp-contact-form .field select:focus,
.lp-contact-form .field textarea:focus {
    outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}
@media (max-width: 599px) {
    .lp-contact-form .field input,
    .lp-contact-form .field select,
    .lp-contact-form .field textarea { font-size: 16px; }
}
/* Submit button — mirror .pe-btn / .pe-btn-primary, full-width. */
.lp-contact-form .btn {
    display: inline-block; width: 100%; padding: 14px 32px; border: none; border-radius: 50px;
    font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; text-align: center;
    cursor: pointer; transition: opacity 0.2s, transform 0.15s;
}
.lp-contact-form .btn:hover { opacity: 0.9; transform: translateY(-1px); }
.lp-contact-form .btn-primary {
    background: var(--league-btn-bg, var(--league-secondary, #38bdf8));
    color: var(--league-btn-text, #ffffff);
}
/* Referee sport pills + age note, tuned for the light theme. */
.lp-contact-form .ref-pill { color: #374151; background: #fff; border-color: #d1d5db; }
.lp-contact-form .ref-pill:hover { border-color: #38bdf8; }
.lp-contact-form .ref-pill input { accent-color: var(--league-secondary, #38bdf8); }
.lp-contact-form .ref-age-note { color: #475569; }

.lp-form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.lp-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
.lp-form-req {
    color: #ef4444;
    font-weight: 400;
}
.lp-form-hint {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 12px;
}

/* ── Divisions Page ──────────────────────────────────── */
.lp-division-group {
    margin-bottom: 40px;
}

.lp-division-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.lp-division-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: -8px 0 20px;
}

.lp-division-empty {
    font-size: 14px;
    color: #94a3b8;
    padding: 16px 0;
}

/* ── Registration Page ───────────────────────────────── */
.lp-reg-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s;
}

.lp-reg-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.lp-reg-card-info {
    flex: 1;
    min-width: 0;
}

.lp-reg-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.lp-reg-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.lp-reg-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lp-reg-badge-open {
    background: #dcfce7;
    color: #166534;
}

.lp-reg-badge-closed {
    background: #f3f4f6;
    color: #6b7280;
}

.lp-reg-dates {
    font-size: 13px;
    color: #666;
    margin: 4px 0 0;
}

.lp-reg-card-action {
    flex-shrink: 0;
}

/* ── Responsive: Tablet (600-1023px) ──────────────────── */

@media (max-width: 1023px) {
    .pe-hero {
        padding: 80px 24px;
    }

    .pe-hero-image {
        padding: 96px 24px;
    }

    .pe-hero-title {
        font-size: 42px;
    }

    .pe-hero-subtitle {
        font-size: 17px;
    }

    .pe-flow-section {
        padding: 56px 0;
    }

    .pe-flow-cta {
        padding: 56px 0;
    }

    .pe-carousel-slide {
        padding: 40px 32px;
    }

    .pe-slide-image {
        min-height: 300px;
    }

    .pe-slide-text {
        min-height: 240px;
    }

    .pe-event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pe-section {
        padding: 56px 0;
    }

    .pe-section-title {
        font-size: 28px;
    }

    .pe-cta-title {
        font-size: 28px;
    }

    .lp-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-page-title {
        font-size: 26px;
    }

    /* Header: hide nav text, keep CTA visible */
    .lp-nav:not(.open) {
        display: none;
    }

    .lp-hamburger {
        display: block;
    }

    .lp-header-inner {
        gap: 16px;
    }

    .lp-header-cta {
        padding: 7px 16px;
        font-size: 13px;
    }

    /* Full-screen nav overlay on tablet */
    .lp-nav.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1a1a2e;
        z-index: 200;
        padding: 80px 24px 24px;
        gap: 0;
        overflow-y: auto;
    }

    .lp-nav.open .lp-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        color: #ffffff;
        border-radius: 50%;
    }

    .lp-nav.open .lp-nav-close:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .lp-nav.open .lp-nav-link {
        padding: 16px 0;
        font-size: 20px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
    }

    .lp-nav.open .lp-nav-link:hover {
        color: #ffffff;
        background: transparent;
    }

    .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/* ── Responsive: Mobile (<600px) ──────────────────────── */

@media (max-width: 599px) {
    .lp-header-inner {
        height: 56px;
        gap: 12px;
    }

    .lp-league-name {
        font-size: 15px;
    }

    .lp-header-cta {
        padding: 6px 14px;
        font-size: 12px;
    }

    .pe-flow-section {
        padding: 48px 0;
    }

    .pe-flow-title {
        font-size: 22px;
    }

    .pe-flow-cta {
        padding: 48px 0;
    }

    .pe-flow-cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .pe-flow-cta-title {
        font-size: 24px;
    }

    .pe-carousel-slide {
        padding: 32px 24px;
    }

    .pe-slide-image {
        min-height: 260px;
    }

    .pe-slide-text {
        min-height: 220px;
    }

    .pe-slide-title {
        font-size: 20px;
    }

    .pe-slide-body {
        font-size: 14px;
    }

    .pe-carousel-prev,
    .pe-carousel-next {
        width: 34px;
        height: 34px;
    }

    .pe-carousel-prev { left: 8px; }
    .pe-carousel-next { right: 8px; }

    .pe-carousel-prev svg,
    .pe-carousel-next svg {
        width: 16px;
        height: 16px;
    }

    /* Hamburger shown, nav hidden by default on mobile/tablet */
    .lp-hamburger {
        display: block;
    }

    .lp-nav:not(.open) {
        display: none;
    }

    .lp-nav.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1a1a2e;
        z-index: 200;
        padding: 80px 24px 24px;
        gap: 0;
        overflow-y: auto;
    }

    .lp-nav.open .lp-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        color: #ffffff;
        border-radius: 50%;
    }

    .lp-nav.open .lp-nav-close:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .lp-nav.open .lp-nav-link {
        padding: 16px 0;
        font-size: 20px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
    }

    .lp-nav.open .lp-nav-link:hover {
        color: #ffffff;
        background: transparent;
    }

    .pe-hero {
        padding: 64px 16px;
    }

    .pe-hero-image {
        padding: 72px 16px;
    }

    .pe-hero-title {
        font-size: 32px;
    }

    .pe-hero-subtitle {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .pe-section {
        padding: 48px 0;
    }

    .pe-section-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .pe-event-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pe-row {
        flex-direction: column;
    }

    .pe-col-4,
    .pe-col-6 {
        flex: 1 1 100%;
        min-width: unset;
    }

    .pe-contact-grid {
        flex-direction: column;
        gap: 24px;
    }

    .pe-cta {
        padding: 56px 16px;
    }

    .pe-cta-title {
        font-size: 24px;
    }

    .pe-cta-text {
        font-size: 15px;
    }

    .pe-container {
        padding: 0 16px;
    }

    /* Team grid → single column */
    .lp-team-grid {
        grid-template-columns: 1fr;
    }

    /* Page header adjustments */
    .lp-page-header {
        padding: 24px 0 20px;
    }

    .lp-page-title {
        font-size: 22px;
    }

    .lp-season-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Registration card stacks */
    .lp-reg-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
        padding: 20px;
    }

    /* About section responsive */
    .lp-season-about {
        padding: 28px 0;
    }
    .lp-about-title {
        font-size: 19px;
    }
    .lp-about-content {
        font-size: 14px;
    }

    /* Registration banner stacks */
    .lp-reg-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    .lp-reg-banner-action {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .lp-reg-banner .pe-btn-primary {
        width: 100%;
        text-align: center;
    }

    /* Team meta stacks */
    .lp-team-meta {
        flex-direction: column;
        gap: 8px;
    }

    /* Roster table */
    .lp-roster-table th,
    .lp-roster-table td {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* Breadcrumbs smaller */
    .lp-breadcrumbs li {
        font-size: 13px;
    }

    /* Sponsors: tighter grid on mobile */
    .pe-sponsor-grid {
        gap: 20px;
    }
    .pe-sponsor-item {
        min-width: 80px;
        max-width: 120px;
    }
    .pe-sponsor-logo {
        max-height: 48px;
        max-width: 100px;
    }

    /* Footer responsive */
    .lp-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lp-footer-brand {
        padding-right: 0;
    }

    .lp-footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* New page styles responsive */
    .lp-page-title {
        font-size: 28px;
    }

    .lp-form-row {
        grid-template-columns: 1fr;
    }

    /* Reclaim horizontal room inside the card on a phone. */
    .lp-contact-form {
        padding: 20px;
    }

    .lp-sp-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   ═══ MODERN TEMPLATE (.tpl-modern) ═════════════════════════

   Ported from the Luke & Spencer design (P:\Luke-Spencer\...\prd).
   Structure and rhythm are taken literally; every colour that was
   part of *their* brand is driven off the league's own settings:

       L&S --color-primary-green  (accent rules, hovers, underline)
           → var(--league-secondary)
       L&S --color-primary-dark   (the dark band behind the cards)
           → var(--league-primary)

   The page chrome — header bar, footer, body neutrals — stays neutral
   charcoal exactly as the original does. The header there is grey/
   charcoal, NOT the brand green, and copying that is what keeps a
   league whose primary colour is a loud red from shipping a loud red
   navbar.

   Typography is a two-family system, and it is not "serif everywhere":
   Playfair Display carries the headings, but section titles and card
   titles deliberately drop to the UI sans (DM Sans), uppercase,
   wide-tracked, over a short accent rule.

   Modern is the only template on this stylesheet since migration 098
   (Bold is a self-contained document on league-v2.css), so these
   rules can restyle the shared lp- and pe- components directly.
   ═══════════════════════════════════════════════════════════ */

.tpl-modern {
    --mod-charcoal: #333333;
    /* Admin-customizable colors: --mod-heading (h1-h6 + heading classes) and
       --mod-text (body/paragraph) derive from the league's chosen colors,
       injected in :root by PublicLeagueController and defaulting to today's
       look. --mod-charcoal stays fixed for chrome (footer bg, outline buttons,
       ADA widget) so those never move with the text colors. */
    --mod-heading: var(--league-heading, var(--mod-charcoal));
    --mod-text: var(--league-text, #5a5a5a);
    --mod-bg: #ffffff;
    --mod-bg-alt: #f5f5f5;
    --mod-header: #555555;
    --mod-header-scrolled: #333333;
    --mod-header-h: 72px;
    --mod-footer-text: #e8e0d5;

    --mod-accent: var(--league-secondary, #38bdf8);
    --mod-band: var(--league-primary, #1a1a2e);

    --mod-font-heading: 'Playfair Display', Georgia, serif;
    --mod-font-body: 'DM Sans', Arial, Helvetica, sans-serif;

    --mod-sp-xs: 0.5rem;
    --mod-sp-sm: 1rem;
    --mod-sp-md: 1.5rem;
    --mod-sp-lg: 2rem;
    --mod-sp-xl: 3rem;
    --mod-sp-xxl: 4rem;

    background: var(--mod-bg);
    font-family: var(--mod-font-body);
    color: var(--mod-text);
    line-height: 1.6;
    /* The header is fixed, so the document starts below it. The landing hero
       cancels this out (negative margin) to sit flush under the header. */
    padding-top: var(--mod-header-h);
}

.tpl-modern h1,
.tpl-modern h2,
.tpl-modern h3,
.tpl-modern h4,
.tpl-modern h5,
.tpl-modern h6 {
    font-family: var(--mod-font-heading);
    font-weight: 600;
    line-height: 1.3;
    color: var(--mod-heading);
}

.tpl-modern .lp-content {
    padding: 0;
}

/* ── Header ──────────────────────────────────────────────
   Fixed charcoal bar. At scroll-top it is inset to a 1400px
   column; once scrolled it spreads to the full viewport, darkens,
   and the league logo fades in from zero width. That "spread on
   scroll" move is the original's signature and is worth keeping. */
.tpl-modern .lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--mod-header);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.4s ease;
}

.tpl-modern .lp-header.lp-header-scrolled {
    background: var(--mod-header-scrolled);
}

.tpl-modern .lp-header-inner {
    display: flex;
    align-items: center;
    gap: var(--mod-sp-sm);
    /* L&S signature: at the top the content sits in a centred 1400px column;
       on scroll it spreads to the full-width edges (see the .lp-header-scrolled
       rule below) while the logo fades in on the left. */
    max-width: 1400px;
    margin: 0 auto;
    /* Height is pinned to --mod-header-h (not left to content + padding) so the
       header is EXACTLY as tall as the body's padding-top offset. If it renders
       shorter, a strip of body background shows between the header and a
       flush-below "fit" hero. Vertical padding is zeroed for the same reason. */
    height: var(--mod-header-h);
    padding: 0 var(--mod-sp-md);
    transition: max-width 0.4s ease, padding 0.4s ease;
}

/* Scrolled state: spread to the full-width edges — logo (fades in) + Register on
   the far left, nav on the far right. Ported from L&S
   `.site-header.is-scrolled .header-inner` (max-width 1400 -> 100%, pad sm -> xl).
   Vertical padding stays 0 (the flush-below "fit" hero needs the header exactly
   --mod-header-h tall). */
.tpl-modern .lp-header-scrolled .lp-header-inner {
    max-width: 100%;
    padding: 0 var(--mod-sp-xl);
}

.tpl-modern .lp-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    /* min-width:0 so a long league name can ellipsis instead of
       forcing the flex row wider than the viewport. */
    min-width: 0;
}

.tpl-modern .lp-logo-img {
    height: 40px;
    width: auto;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-width 0.4s ease;
}

.tpl-modern .lp-header-scrolled .lp-logo-img {
    opacity: 1;
    max-width: 50px;
}

.tpl-modern .lp-logo-placeholder {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mod-accent);
    color: #fff;
    font-family: var(--mod-font-body);
    font-weight: 700;
    font-size: 1rem;
    /* Like the logo image, the initial-letter mark is hidden at the top and
       fades in on scroll (so a no-logo league still gets the L&S animation). */
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-width 0.4s ease;
}

.tpl-modern .lp-header-scrolled .lp-logo-placeholder {
    opacity: 1;
    max-width: 36px;
}

.tpl-modern .lp-league-name {
    font-family: var(--mod-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpl-modern .lp-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mod-sp-xs);
    /* The base .lp-nav is flex:1 + justify-content:center, which stretches the
       nav across the middle and centres the links. Modern wants brand on the
       left and the links grouped on the right next to the Register button, so
       stop the nav growing and let margin-left:auto push it (and the CTA) over. */
    flex: 0 1 auto;
    margin-left: auto;
}

.tpl-modern .lp-nav-link {
    position: relative;
    display: block;
    padding: var(--mod-sp-xs) var(--mod-sp-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.tpl-modern .lp-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--mod-accent);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.tpl-modern .lp-nav-link:hover::after,
.tpl-modern .lp-nav-link:focus::after {
    width: 80%;
}

/* Active nav item (current page). Desktop: accent text + the underline stays
   lit. The mobile dropdown gets its own treatment in the <=900 block. */
.tpl-modern .lp-nav-link.lp-nav-active {
    color: var(--mod-accent);
}
.tpl-modern .lp-nav-link.lp-nav-active::after {
    width: 80%;
}

.tpl-modern .lp-header-cta {
    flex-shrink: 0;
    padding: var(--mod-sp-xs) var(--mod-sp-md);
    font-family: var(--mod-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-decoration: none;
    background: var(--mod-accent);
    border: 2px solid var(--mod-accent);
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.tpl-modern .lp-header-cta:hover,
.tpl-modern .lp-header-cta:focus {
    background: transparent;
    color: #fff;
}

/* Header icon buttons (hamburger + mobile accessibility). Hidden on desktop;
   the <=900 block turns them on. .lp-mobile-only covers the in-menu Register
   item and the a11y button — anything that only exists in the mobile header. */
.tpl-modern .lp-hamburger,
.tpl-modern .lp-ada-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    /* Accent-coloured like the Luke & Spencer header icons; brighten to white
       on press/hover. */
    color: var(--mod-accent);
    cursor: pointer;
    padding: var(--mod-sp-xs);
    line-height: 1;
}

.tpl-modern .lp-hamburger:hover,
.tpl-modern .lp-ada-mobile:hover {
    color: #fff;
}

.tpl-modern .lp-mobile-only {
    display: none;
}

/* Hamburger morphs to an X when its menu is open (aria-expanded). */
.tpl-modern .lp-hamburger .lp-ham-x {
    display: none;
}
.tpl-modern .lp-hamburger[aria-expanded="true"] .lp-ham-bars {
    display: none;
}
.tpl-modern .lp-hamburger[aria-expanded="true"] .lp-ham-x {
    display: block;
}

/* ── Hero ────────────────────────────────────────────────
   Full-bleed image band. The league logo is the hero mark (the
   original sets its wordmark art here), with the tagline beneath
   as a wide-tracked slogan. Black base shows through if no hero
   image is set, and a solid bar closes the section off. */
.tpl-modern .pe-mod-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cancel the body's header offset so the image runs up behind the fixed
       header (no white strip between them), then pad the content back down so
       the title clears the header. */
    margin-top: calc(-1 * var(--mod-header-h));
    padding: calc(var(--mod-header-h) + var(--mod-sp-lg)) var(--mod-sp-md) var(--mod-sp-xxl);
    background: #000;
    background-size: cover;
    background-position: center;
    overflow: visible;
}

.tpl-modern .pe-mod-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.tpl-modern .pe-mod-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

/* "Fit" hero — show the ENTIRE uploaded image with no crop. The image is a
   responsive <img>, so it scales to the viewport width and the hero band is
   exactly as tall as the image at that width: nothing is zoomed or thrown away
   on any screen. It sits BELOW the header (no under-header pull) so the top of
   the artwork isn't hidden, and there's no darkening overlay over the design.
   Uses the compound `.pe-mod-hero.pe-mod-hero-fit` (0,3,0) so it beats the
   base AND the per-breakpoint `.pe-mod-hero` height/padding rules. */
.tpl-modern .pe-mod-hero.pe-mod-hero-fit {
    display: block;
    position: relative;
    min-height: 0;
    margin-top: 0;
    padding: 0;
    /* Whole image painted as a background (no savable <img>); the colour is the
       fallback if it fails to load. The band is sized by the hidden sizer below
       to the image's exact aspect, so cover fills it with no crop/letterbox. */
    background-color: var(--league-primary, #1a1a2e);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* Slight overlay for a touch of depth (and a smoother transition under the
   header). Kept light — the base hero overlay is 40% for text-on-photo, which
   would muddy a designed banner — so the artwork still reads clearly. It sits
   above the background image and below the title/slogan (which carry z-index:2).
   content/position/inset come from the base .pe-mod-hero::before rule. */
.tpl-modern .pe-mod-hero.pe-mod-hero-fit::before {
    background: rgba(0, 0, 0, 0.15);
}
/* Same file as the background, kept only to give the band the image's height at
   any width. Hidden from paint and from pointer/right-click (visibility:hidden
   drops it from hit-testing, so a right-click lands on the section, not an
   image — no "Save image" menu). */
.tpl-modern .pe-mod-hero-fit .pe-mod-hero-sizer {
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden;
    pointer-events: none;
}
.tpl-modern .pe-mod-hero-fit .pe-mod-hero-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.tpl-modern .pe-mod-hero-logo {
    max-width: 620px;
    width: 90%;
    margin: 0 auto;
    height: auto;
    display: block;
}

.tpl-modern .pe-mod-hero-title {
    font-family: var(--mod-font-heading);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.45);
    margin: 0;
}

.tpl-modern .pe-mod-hero-slogan {
    font-family: var(--mod-font-body);
    font-size: 1.35rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.15em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    margin-top: var(--mod-sp-md);
}

.tpl-modern .pe-mod-hero-cta {
    margin-top: var(--mod-sp-lg);
}

/* ── Section bands ───────────────────────────────────────
   The page alternates a white band and a league-coloured dark
   band, each opening with a centred title + description. */
.tpl-modern .pe-mod-section {
    padding: var(--mod-sp-xxl) var(--mod-sp-md);
}

.tpl-modern .pe-mod-light {
    background: var(--mod-bg);
}

.tpl-modern .pe-mod-tint {
    background: var(--mod-bg-alt);
}

.tpl-modern .pe-mod-dark {
    background: var(--mod-band);
    color: #fff;
}

/* White the dark band's OWN headings (the section title + intro) only — NOT
   every descendant heading. The season/event cards live on this band but are
   white cards, and a blanket `.pe-mod-dark h3` was turning their h3 titles
   white-on-white (invisible — that was the "empty" card top in the feedback). */
.tpl-modern .pe-mod-dark > .pe-container > .pe-mod-section-header .pe-mod-section-title,
.tpl-modern .pe-mod-dark > .pe-container > .pe-mod-intro {
    color: #fff;
}

.tpl-modern .pe-mod-dark .pe-mod-section-title::after {
    background: #fff;
}

.tpl-modern .pe-mod-section-header {
    text-align: center;
    margin-bottom: var(--mod-sp-xl);
}

.tpl-modern .pe-mod-section-title {
    position: relative;
    display: inline-block;
    font-family: var(--mod-font-body);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--mod-heading);
    padding-bottom: 15px;
    margin: 0;
}

.tpl-modern .pe-mod-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--mod-accent);
}

.tpl-modern .pe-mod-section-desc {
    max-width: 800px;
    margin: var(--mod-sp-md) auto 0;
    font-size: 1rem;
    line-height: 1.8;
}

.tpl-modern .pe-mod-dark .pe-mod-section-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* ── Feature carousel (league_news_items) ────────────────
   A scroll-snap carousel: the viewport is the scroll container, cards snap
   to its left edge, and --spv (slides per view, set by JS: 3/2/1) drives the
   card width via calc. Native horizontal scroll is the no-JS fallback; the
   arrows and dots are wired up in the shell script and hide when all cards fit.
   Image band on top, body below, action pinned to the bottom so a row of cards
   keeps its buttons on one line regardless of how much body copy each carries. */
.tpl-modern .pe-mod-carousel {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.tpl-modern .pe-mod-carousel-viewport {
    display: flex;
    align-items: stretch;
    gap: var(--mod-sp-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto clips vertical overflow too, which would shear the card
       drop-shadow into a hard grey line. This padding gives the shadow room to
       render inside the scroll area on every side. */
    padding: 22px 6px 34px;
}

/* Hide the scrollbar. scrollbar-width is gated behind the Firefox @supports
   check on purpose — setting it unconditionally kills ::-webkit-scrollbar on
   Chromium 121+. */
.tpl-modern .pe-mod-carousel-viewport::-webkit-scrollbar {
    display: none;
}
@supports (-moz-appearance: none) {
    .tpl-modern .pe-mod-carousel-viewport {
        scrollbar-width: none;
    }
}

.tpl-modern .pe-mod-carousel .pe-mod-feature-card {
    flex: 0 0 calc((100% - (var(--spv, 3) - 1) * var(--mod-sp-lg)) / var(--spv, 3));
    scroll-snap-align: start;
}

.tpl-modern .pe-mod-carousel-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #e2e2e2;
    background: #fff;
    color: var(--mod-charcoal);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    z-index: 2;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.tpl-modern .pe-mod-carousel-arrow:hover {
    background: var(--mod-accent);
    color: #fff;
    border-color: var(--mod-accent);
}

.tpl-modern .pe-mod-carousel-arrow[hidden] {
    display: none;
}

.tpl-modern .pe-mod-carousel-prev {
    left: -8px;
}

.tpl-modern .pe-mod-carousel-next {
    right: -8px;
}

.tpl-modern .pe-mod-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--mod-sp-lg);
}

.tpl-modern .pe-mod-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #d2d2d6;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.tpl-modern .pe-mod-carousel-dot.is-active {
    width: 26px;
    background: var(--mod-accent);
}

.tpl-modern .pe-mod-feature-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    /* Soft, light drop shadow — a gentle lift on clean white, matching the
       L&S look. Kept subtle on purpose so the shadows don't pool into a grey
       wash behind the cards. The viewport pads itself so it isn't clipped. */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tpl-modern .pe-mod-feature-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.tpl-modern .pe-mod-feature-card:hover {
    transform: translateY(-4px);
}

.tpl-modern .pe-mod-feature-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--mod-bg-alt);
}

.tpl-modern .pe-mod-feature-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--mod-sp-lg);
}

.tpl-modern .pe-mod-feature-title {
    font-family: var(--mod-font-body);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mod-band);
    margin: 0 0 var(--mod-sp-sm);
    /* Clamp to two lines so a long program name doesn't shove one card taller
       than its neighbours. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.tpl-modern .pe-mod-feature-text {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: var(--mod-sp-md);
    /* Admin-authored copy can contain a long URL or unbroken token. */
    overflow-wrap: anywhere;
    /* Truncate to a fixed number of lines so every card is the same height
       regardless of how much an admin wrote. No flex-grow here — it would
       fight -webkit-box; the button's margin-top:auto pins it to the bottom
       and align-items:stretch on the viewport equalises the card heights. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpl-modern .pe-mod-feature-body .pe-btn {
    margin-top: auto;
    align-self: center;
}

.tpl-modern .pe-mod-programs-cta {
    margin-top: var(--mod-sp-xl);
    text-align: center;
}

/* Available to any template on this sheet: keeps a heading in the
   document for screen readers and outline tools when the visible
   mark is an image (the hero logo). */
.lp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Intro paragraph on a dark band ──────────────────── */
.tpl-modern .pe-mod-intro {
    max-width: 900px;
    margin: 0 auto var(--mod-sp-xl);
    text-align: center;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* ── Contact strip ──────────────────────────────────── */
.tpl-modern .pe-mod-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--mod-sp-lg);
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.tpl-modern .pe-mod-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mod-sp-xs);
    min-width: 0;
}

.tpl-modern .pe-mod-contact-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mod-bg-alt);
    color: var(--mod-band);
    margin-bottom: var(--mod-sp-xs);
}

.tpl-modern .pe-mod-contact-value {
    font-size: 0.95rem;
    color: var(--mod-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tpl-modern .pe-mod-contact-value:hover {
    color: var(--mod-accent);
}

/* ── Buttons ─────────────────────────────────────────────
   Outline by default, filling on hover — the original's ghost
   button. .pe-btn is shared with every sub-page, so this restyle
   reaches registration, contact, season and team pages too. */
.tpl-modern .pe-btn {
    display: inline-block;
    padding: var(--mod-sp-sm) var(--mod-sp-lg);
    font-family: var(--mod-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: 2px solid var(--mod-charcoal);
    border-radius: 4px;
    background: transparent;
    color: var(--mod-charcoal);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tpl-modern .pe-btn:hover,
.tpl-modern .pe-btn:focus {
    background: var(--mod-charcoal);
    color: #fff;
}

.tpl-modern .pe-btn-primary {
    border-color: var(--league-btn-bg, var(--mod-accent));
    background: var(--league-btn-bg, var(--mod-accent));
    color: var(--league-btn-text, #fff);
}

/* Darken the button on hover (keeps the label legible for ANY custom button
   colour — the old transparent+band hover went blank once buttons could be
   recoloured). Mirrors the season-banner button hover below. */
.tpl-modern .pe-btn-primary:hover,
.tpl-modern .pe-btn-primary:focus {
    background: color-mix(in srgb, var(--league-btn-bg, var(--mod-accent)) 85%, #000);
    border-color: color-mix(in srgb, var(--league-btn-bg, var(--mod-accent)) 85%, #000);
    color: var(--league-btn-text, #fff);
}

/* Season CTA banner ("Ready to Play?") sits on the navy --league-primary band.
   Two Modern defaults break it there: the h3 heading rule paints the title
   --mod-charcoal (dark → invisible on navy), and the generic primary-button
   hover goes transparent with navy text (blank on navy). Scope both to stay
   legible on the dark band. */
.tpl-modern .lp-reg-banner-title {
    color: #fff;
    font-family: var(--mod-font-body);
}
.tpl-modern .lp-reg-banner .pe-btn-primary:hover,
.tpl-modern .lp-reg-banner .pe-btn-primary:focus {
    background: color-mix(in srgb, var(--mod-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--mod-accent) 85%, #000);
    color: #fff;
}

.tpl-modern .pe-btn-light {
    border-color: #fff;
    color: #fff;
    background: transparent;
}

.tpl-modern .pe-btn-light:hover,
.tpl-modern .pe-btn-light:focus {
    background: #fff;
    color: var(--mod-band);
}

/* ── Shared sub-page components ──────────────────────────
   Divisions, seasons, teams, registration, contact and sponsors
   all render through .pe-section / .pe-section-title / card
   classes. Pulling them onto the Modern type scale is what keeps
   the sub-pages from looking like a different website. */
.tpl-modern .pe-section {
    padding: var(--mod-sp-xxl) var(--mod-sp-md);
}

.tpl-modern .pe-section-title {
    position: relative;
    display: inline-block;
    font-family: var(--mod-font-body);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--mod-heading);
    padding-bottom: 14px;
}

.tpl-modern .pe-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 3px;
    background: var(--mod-accent);
}

/* Season / event / team cards. These render on the dark Programs band on the
   landing page AND on white sub-page backgrounds, so they're built as clean
   white cards that read on either: no coloured header strip (that used to be
   league-primary and vanished into the matching dark band), a slim accent bar
   at the top instead, and the status badge floated top-right of the body. */
.tpl-modern .pe-event-card,
.tpl-modern .lp-season-card,
.tpl-modern .lp-team-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    border: none;
    border-top: 3px solid var(--mod-accent);
    min-width: 0;
}

/* Drop the old coloured header band down to a plain badge row. The badge keeps
   its solid status colour (lp-status-open/closed), so it still reads on white. */
.tpl-modern .pe-event-card-header {
    background: transparent;
    padding: 16px 18px 0;
    min-height: 0;
    justify-content: flex-end;
}

.tpl-modern .pe-event-card-body {
    padding: 12px 20px 20px;
}

.tpl-modern .pe-event-title,
.tpl-modern .lp-season-title,
.tpl-modern .lp-team-name {
    font-family: var(--mod-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Charcoal, not the league colour — a league whose primary is pale would
       otherwise render the title unreadably light on the white card. */
    color: var(--mod-heading);
}

.tpl-modern .pe-event-details {
    border-top-color: #eee;
}

.tpl-modern .lp-view-details {
    color: var(--mod-accent);
}

/* Sits the division/type pill just under the title with a little breathing room. */
.tpl-modern .lp-season-card .lp-division-badge {
    align-self: flex-start;
    margin: 2px 0 2px;
}

/* ── Program card, "bold band" style (Robb's pick) ───────
   Scoped to .lp-season-card (season + event cards). Team cards use
   .lp-team-card and keep their own look. Header = sky accent band with the
   sport/division tag on the left and a white status chip on the right; white
   body with a full-width CTA button pinned to the bottom so a row of cards
   keeps its buttons aligned. Overrides the earlier accent-top-border look. */
.tpl-modern .lp-season-card {
    display: flex;
    flex-direction: column;
    border-top: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.tpl-modern .lp-season-card:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
/* Navy header band = the league's own primary colour (matches the dark
   Programs section, so it melts into it there and reads as a bold band on the
   white division pages). Sport tag in the league accent; status as a SOLID
   colour pill with white text — pops on the navy and stays crisp. */
.tpl-modern .lp-season-card .pe-event-card-header {
    background: var(--league-card-header, var(--league-primary, #16233f));
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    min-height: 0;
}
.tpl-modern .lp-season-card .pe-event-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mod-accent, #7dd3fc);
}
.tpl-modern .lp-season-card .pe-event-badge {
    margin-left: auto;
    background: #64748b;
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tpl-modern .lp-season-card .pe-event-badge.lp-status-open     { background: #16a34a; }
.tpl-modern .lp-season-card .pe-event-badge.lp-status-active   { background: #d97706; }
.tpl-modern .lp-season-card .pe-event-badge.lp-status-upcoming { background: #2563eb; }
.tpl-modern .lp-season-card .pe-event-badge.lp-status-full     { background: #dc2626; }
.tpl-modern .lp-season-card .pe-event-badge.lp-status-closed   { background: #64748b; }
.tpl-modern .lp-season-card .pe-event-card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-grow: 1;
}
.tpl-modern .lp-season-card .pe-event-title {
    font-size: 15px;
    line-height: 1.25;
    margin: 0;
}
.tpl-modern .lp-season-card .pe-event-dates {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}
.tpl-modern .lp-season-card .pe-event-meta {
    font-size: 15px;
    font-weight: 800;
    color: var(--mod-charcoal, #1a2233);
    margin: 0;
}
.tpl-modern .lp-season-card .pe-card-cta {
    display: block;
    text-align: center;
    margin-top: auto;
    padding: 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--mod-accent, #38bdf8);
    color: #04263a;
}
.tpl-modern .lp-season-card .pe-card-cta.is-muted {
    background: transparent;
    border: 1.5px solid #cbd5e1;
    color: #64748b;
}

.tpl-modern .lp-page-title {
    font-family: var(--mod-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mod-heading);
}

/* ── Rich text (policies page, sanitised admin HTML) ─────
   A readable long-form column. The tag set matches the sanitizer allow-list
   (h2/h3, p, ul/ol/li, strong/em/u, a). */
.tpl-modern .lp-richtext {
    max-width: 760px;
    margin: 0 auto;
    color: var(--mod-text);
    font-size: 1rem;
    line-height: 1.75;
}
.tpl-modern .lp-richtext h2 {
    font-family: var(--mod-font-body);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mod-heading);
    margin: 2em 0 0.6em;
}
.tpl-modern .lp-richtext h3 {
    font-family: var(--mod-font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mod-heading);
    margin: 1.6em 0 0.5em;
}
.tpl-modern .lp-richtext h2:first-child,
.tpl-modern .lp-richtext h3:first-child {
    margin-top: 0;
}
.tpl-modern .lp-richtext p {
    margin: 0 0 1em;
}
.tpl-modern .lp-richtext ul,
.tpl-modern .lp-richtext ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}
.tpl-modern .lp-richtext li {
    margin-bottom: 0.4em;
}
.tpl-modern .lp-richtext a {
    color: var(--mod-accent);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

/* ── Footer ──────────────────────────────────────────────
   Four columns over a charcoal band, then a social/legal row,
   then a darker copyright strip — the original's three-tier
   footer. Column content is CMS data the league already has;
   a column whose data is empty is dropped server-side. */
.tpl-modern .lp-footer {
    background: var(--mod-charcoal);
    color: var(--mod-footer-text);
    padding: 0;
}

.tpl-modern .lp-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.tpl-modern .lp-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 40px;
    padding: 50px 30px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tpl-modern .lp-footer-col {
    min-width: 0;
}

.tpl-modern .lp-footer-heading {
    font-family: var(--mod-font-body);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mod-footer-text);
    margin-bottom: 20px;
}

.tpl-modern .lp-footer-col p,
.tpl-modern .lp-footer-col address,
.tpl-modern .lp-footer-links a {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--mod-footer-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tpl-modern .lp-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Two side-by-side columns so the six quick links don't run down one long
       thin strip. Multicol balances them (3 + 3) and re-flows to whatever count
       a league's page-visibility toggles leave. */
    columns: 2;
    column-gap: 32px;
}

.tpl-modern .lp-footer-links li {
    padding: 6px 0;
    break-inside: avoid;
}

.tpl-modern .lp-footer-links a:hover,
.tpl-modern .lp-footer-links a:focus,
.tpl-modern .lp-footer-col a:hover,
.tpl-modern .lp-footer-col a:focus {
    color: var(--mod-accent);
}

.tpl-modern .lp-footer-about {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--mod-footer-text);
    opacity: 0.9;
}

.tpl-modern .lp-footer-name {
    font-family: var(--mod-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
}

.tpl-modern .lp-footer-social {
    display: flex;
    gap: 16px;
}

.tpl-modern .lp-social-icon {
    color: var(--mod-footer-text);
    transition: color 0.3s ease;
}

.tpl-modern .lp-social-icon svg {
    width: 22px;
    height: 22px;
}

.tpl-modern .lp-social-icon:hover {
    color: var(--mod-accent);
}

.tpl-modern .lp-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 20px;
    /* Same charcoal as the rest of the footer — no darker sub-bar. A thin
       hairline keeps the copyright row visually separated instead. */
    background: var(--mod-charcoal);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 30px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--mod-footer-text);
}

.tpl-modern .lp-footer-middle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 30px;
}

.tpl-modern .lp-footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
}

.tpl-modern .lp-footer-legal a {
    color: var(--mod-footer-text);
    text-decoration: none;
}

.tpl-modern .lp-footer-legal a:hover,
.tpl-modern .lp-footer-legal a:focus {
    color: var(--mod-accent);
}

.tpl-modern .lp-footer-legal span {
    color: #b0b0b0;
}

/* An empty social block would otherwise leave the legal links stranded
   in the middle of the row rather than at its end. */
.tpl-modern .lp-footer-middle:not(:has(.lp-footer-social)) .lp-footer-legal {
    margin-left: auto;
}

.tpl-modern .lp-footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--mod-sp-sm);
}

.tpl-modern .lp-footer-logo-img {
    height: 40px;
    width: auto;
}

.tpl-modern .lp-footer-logo-placeholder {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mod-accent);
    color: #fff;
    font-weight: 700;
}

.tpl-modern .lp-powered-by a {
    color: var(--mod-footer-text);
    text-decoration: none;
}

/* ── Skip link ─────────────────────────────────────────
   Off-screen until focused, then drops below the fixed header. */
.tpl-modern .lp-skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    padding: 10px 18px;
    background: var(--mod-band);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 6px;
    transition: top 0.2s ease;
}

.tpl-modern .lp-skip-link:focus {
    top: 0;
}

/* ── Scroll-to-top ─────────────────────────────────────── */
/* Back-to-top, matched to Luke & Spencer: a charcoal rounded SQUARE (not a
   blue circle) with a white up-triangle, sitting bottom-right. */
.tpl-modern .lp-scroll-top {
    width: 50px;
    height: 50px;
    bottom: 30px;
    right: 30px;
    border-radius: 12px;
    border: none;
    background: var(--mod-header);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tpl-modern .lp-scroll-top:hover {
    background: #444;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.tpl-modern .lp-scroll-top.visible:hover {
    transform: translateY(-3px);
}

@media (max-width: 480px) {
    .tpl-modern .lp-scroll-top {
        width: 44px;
        height: 44px;
        bottom: 15px;
        right: 15px;
        border-radius: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   ═══ ADA ACCESSIBILITY WIDGET ══════════════════════════════
   Side tab + flyout panel, ported from the source design.

   Dark mode is deliberately NOT among the toggles. Every other
   feature here is a filter or a text metric that works against
   any markup; a real dark mode needs a hand-written override for
   every component on every page, and a half-done one is worse
   than none. The rest stand on their own.
   ═══════════════════════════════════════════════════════════ */

.tpl-modern .ada-widget {
    /* No positioning here. The fixed/transform lives on .ada-trigger below (which
       has an OPAQUE background), so the composited layer is opaque and the browser
       keeps crisp subpixel text — a transparent transformed wrapper forced the
       coarser grayscale anti-aliasing that made the vertical label look choppy. */
    display: contents;
}

.tpl-modern .ada-trigger {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--mod-band);
    color: #fff;
    border: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    writing-mode: vertical-rl;
    font-family: var(--mod-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
}

.tpl-modern .ada-trigger:hover {
    background: var(--mod-accent);
}

.tpl-modern .ada-panel {
    position: fixed;
    /* top+bottom instead of height:100% — unambiguous full height with no
       dependence on a resolved parent height. */
    top: 0;
    bottom: 0;
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    z-index: 1101;
}

.tpl-modern .ada-panel.open {
    transform: translateX(0);
}

.tpl-modern .ada-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mod-sp-sm) var(--mod-sp-md);
    background: var(--mod-band);
    color: #fff;
    flex-shrink: 0;
}

.tpl-modern .ada-panel-header h2 {
    font-family: var(--mod-font-body);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    margin: 0;
}

.tpl-modern .ada-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.tpl-modern .ada-panel-body {
    padding: var(--mod-sp-md);
    overflow-y: auto;
    /* min-height:0 lets this flex child shrink below its content and scroll,
       instead of overflowing the panel and pushing the header off-screen. */
    flex: 1 1 auto;
    min-height: 0;
}

.tpl-modern .ada-section {
    margin-bottom: var(--mod-sp-md);
}

.tpl-modern .ada-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: var(--mod-sp-xs);
}

.tpl-modern .ada-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.tpl-modern .ada-row:last-child {
    border-bottom: none;
}

.tpl-modern .ada-label {
    font-size: 0.875rem;
    color: var(--mod-charcoal);
    min-width: 0;
}

.tpl-modern .ada-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #ccc;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tpl-modern .ada-toggle.active {
    background: var(--mod-accent);
}

.tpl-modern .ada-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.tpl-modern .ada-toggle.active::after {
    transform: translateX(20px);
}

.tpl-modern .ada-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tpl-modern .ada-slider button {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f7f7f7;
    color: var(--mod-charcoal);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.tpl-modern .ada-slider button:hover {
    background: var(--mod-accent);
    border-color: var(--mod-accent);
    color: #fff;
}

.tpl-modern .ada-slider span {
    min-width: 44px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--mod-text);
}

.tpl-modern .ada-reset {
    width: 100%;
    padding: 12px;
    margin-top: var(--mod-sp-sm);
    border: 2px solid var(--mod-charcoal);
    border-radius: 4px;
    background: transparent;
    color: var(--mod-charcoal);
    font-family: var(--mod-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.tpl-modern .ada-reset:hover {
    background: var(--mod-charcoal);
    color: #fff;
}

/* ── ADA feature classes, applied to <body> ──────────────
   Scoped to body (not .tpl-modern) because the toggles set them
   on the body element itself. */
body.ada-grayscale .lp-content,
body.ada-grayscale .lp-header,
body.ada-grayscale .lp-footer {
    filter: grayscale(100%);
}

body.ada-invert .lp-content,
body.ada-invert .lp-header,
body.ada-invert .lp-footer {
    filter: invert(100%) hue-rotate(180deg);
}

body.ada-highlight-links a {
    text-decoration: underline !important;
    outline: 2px solid #ffd400 !important;
    outline-offset: 2px;
    background: rgba(255, 212, 0, 0.18) !important;
}

body.ada-readable-font,
body.ada-readable-font h1,
body.ada-readable-font h2,
body.ada-readable-font h3,
body.ada-readable-font h4,
body.ada-readable-font p,
body.ada-readable-font a,
body.ada-readable-font span,
body.ada-readable-font li,
body.ada-readable-font button {
    font-family: 'Comic Sans MS', 'Trebuchet MS', Verdana, sans-serif !important;
    letter-spacing: 0.02em;
}

body.ada-large-cursor,
body.ada-large-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2 L6 38 L15 29 L21 43 L28 40 L22 26 L34 26 Z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important;
}

body.ada-focus-indicators *:focus {
    outline: 3px solid #2563eb !important;
    outline-offset: 2px !important;
}

body.ada-pause-animations *,
body.ada-pause-animations *::before,
body.ada-pause-animations *::after {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* ═══ Modern Responsive ═════════════════════════════════════
   Project's 3-breakpoint system: desktop 1024+, tablet 600-1023,
   mobile <600. The nav collapses at 900px rather than 1024 —
   with five league nav items plus a CTA it runs out of room
   before the tablet boundary.
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile header + dropdown menu (<=900px) ─────────────
   Ported from the Luke & Spencer header: brand on the left; an accessibility
   icon + hamburger on the right; the Register CTA and the nav links live in a
   full-width dropdown that accordions down from under the header. The desktop
   Register button and the floating accessibility side-tab are both hidden.
   Breakpoint is 900px — the inline nav (brand + 5 links + Register) is cramped
   below that. */
@media (max-width: 900px) {
    /* Active Events button anchors the left; margin-right:auto pushes the
       accessibility + hamburger icons to the right edge. When the league hides
       Active Events the button isn't rendered, so the hamburger also carries a
       margin-left:auto — the icons stay flush right either way. */
    .tpl-modern .lp-header-cta {
        margin-right: auto;
    }
    .tpl-modern .lp-hamburger {
        margin-left: auto;
    }
    /* The outer .lp-header carries 24px padding AND the inner carries 24px, so
       the icons ended up double-inset 48px from the edge on a phone (floaty,
       not flush). Zero the outer padding so a single 24px inset (from the
       inner) governs — icons sit a clean thumb's-width from the edge. */
    .tpl-modern .lp-header {
        padding-left: 0;
        padding-right: 0;
    }

    /* The initial-letter placeholder (leagues with no logo image) fades in on
       scroll just like the image, so the top of the page stays clean. */
    .tpl-modern .lp-logo-placeholder {
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        transition: opacity 0.4s ease, max-width 0.4s ease;
    }
    .tpl-modern .lp-header-scrolled .lp-logo-placeholder {
        opacity: 1;
        max-width: 40px;
    }

    /* Floating a11y side-tab off; header icons on. The Register button is now
       the left anchor of the header, so it stays visible at every width. */
    .tpl-modern .ada-widget {
        display: none;
    }
    .tpl-modern .lp-hamburger,
    .tpl-modern .lp-ada-mobile {
        display: flex;
    }

    /* The in-menu Register item (hidden on desktop, where the header button
       carries it) appears in the dropdown. */
    .tpl-modern .lp-nav .lp-mobile-only {
        display: block;
    }

    /* Full-width dropdown under the header (position:absolute against the
       relatively-positioned header-inner). max-height accordion, and
       justify-content:flex-start so the items sit at the TOP, not the bottom
       (the old drawer inherited the desktop justify-content:flex-end).
       Every property the vestigial shared `.lp-nav.open` overlay sets
       (display/position/top/bottom/background/padding/z-index) is set here
       too so nothing from that old classic-shell rule leaks in. */
    .tpl-modern .lp-nav {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        bottom: auto;
        z-index: 60;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: 0;
        background: var(--mod-header-scrolled);
        max-height: 0;
        overflow: hidden;
        /* Smooth decelerating drop. JS sets max-height to the exact content
           height so the ease maps to the real reveal (see the shell script). */
        transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
    }

    /* 80vh is the no-JS fallback; JS overrides it with the exact height inline. */
    .tpl-modern .lp-nav.open {
        max-height: 80vh;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Scoped `.tpl-modern .lp-nav .lp-nav-link` (0,3,0) so it out-orders the
       shared `.lp-nav.open .lp-nav-link` overlay rule of the same specificity. */
    .tpl-modern .lp-nav .lp-nav-link {
        padding: 16px 20px;
        text-align: center;
        font-size: 0.95rem;
        font-weight: 600;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .tpl-modern .lp-nav .lp-nav-link::after {
        display: none;
    }

    /* Current page in the dropdown: accent text, a faint accent wash, and a
       left accent bar (inset shadow, so it doesn't shift the centred text). */
    .tpl-modern .lp-nav .lp-nav-link.lp-nav-active {
        color: var(--mod-accent);
        background: rgba(56, 189, 248, 0.10);
        background: color-mix(in srgb, var(--mod-accent) 11%, transparent);
        box-shadow: inset 3px 0 0 var(--mod-accent);
    }

    /* Register reads like the other links, with just a faint accent wash so it
       registers as the CTA without shouting — the toned-down "less bold blue"
       Robb asked for, matching L&S's subtly-tinted login link. */
    .tpl-modern .lp-nav .lp-nav-cta {
        background: rgba(56, 189, 248, 0.13); /* fallback for no color-mix */
        background: color-mix(in srgb, var(--mod-accent) 15%, transparent);
    }
    .tpl-modern .lp-nav .lp-nav-cta:hover {
        background: color-mix(in srgb, var(--mod-accent) 24%, transparent);
    }
}

/* Tablet */
@media (max-width: 1023px) {
    /* Tighter edge inset than the desktop full-width xl padding — the phone/
       tablet header would otherwise sit 48px off each edge. */
    .tpl-modern .lp-header-inner {
        padding: 0 var(--mod-sp-md);
    }

    .tpl-modern .pe-mod-section,
    .tpl-modern .pe-section {
        padding: var(--mod-sp-xl) var(--mod-sp-md);
    }

    .tpl-modern .lp-footer-grid {
        gap: 28px;
        padding: 40px 24px 24px;
    }
}

/* Mobile */
@media (max-width: 599px) {
    .tpl-modern {
        --mod-header-h: 64px;
    }

    /* The shared mobile rule pins .lp-header-inner to height:56px, but Modern's
       body offset + hero pull-up use --mod-header-h (64px). The 8px difference
       left a white strip under the header on sub-pages (no hero to cover it).
       Match the header to the offset and let its height, not padding, size it. */
    .tpl-modern .lp-header-inner {
        height: var(--mod-header-h);
        padding-top: 0;
        padding-bottom: 0;
    }

    .tpl-modern .pe-mod-hero {
        min-height: 46vh;
        /* Same flush-under-header treatment as desktop, tighter spacing. */
        padding: calc(var(--mod-header-h) + var(--mod-sp-md)) var(--mod-sp-sm) var(--mod-sp-xl);
    }

    .tpl-modern .pe-mod-hero-logo {
        max-width: 240px;
    }

    .tpl-modern .pe-mod-hero-slogan {
        font-size: 1rem;
        letter-spacing: 0.1em;
    }

    .tpl-modern .pe-mod-section,
    .tpl-modern .pe-section {
        padding: var(--mod-sp-lg) var(--mod-sp-sm);
    }

    .tpl-modern .pe-mod-section-title {
        letter-spacing: 0.08em;
    }

    .tpl-modern .pe-mod-carousel-viewport {
        gap: var(--mod-sp-md);
    }

    /* Arrows would overlap a single full-width card awkwardly on a phone;
       the dots and swipe carry navigation there. */
    .tpl-modern .pe-mod-carousel-arrow {
        display: none;
    }

    .tpl-modern .pe-mod-feature-image {
        height: 160px;
    }

    .tpl-modern .lp-league-name {
        font-size: 0.75rem;
    }

    .tpl-modern .lp-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 32px 20px 20px;
    }

    .tpl-modern .lp-footer-bottom {
        flex-direction: column;
        gap: 6px;
    }

    /* Accessibility on phones lives in the header (see the <=900 block, which
       hides .ada-widget); no floating side tab down here. */
}

/* ── Footer on mobile (<900): Location beside Contact ────
   The default modern footer grid auto-fits and collapses to a single column on
   phones, stacking every block. Below 900, force two columns with the brand and
   quick-links spanning full width, so Location and Contact pair up on one row.
   End-of-file so it wins source order over the auto-fit grid at overlapping
   widths. */
@media (max-width: 900px) {
    .tpl-modern .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 24px;
    }
    .tpl-modern .lp-footer-brand,
    .tpl-modern .lp-footer-quick {
        grid-column: 1 / -1;
    }
    /* Long emails/addresses wrap instead of overflowing a narrow column. */
    .tpl-modern .lp-footer-col p,
    .tpl-modern .lp-footer-col address,
    .tpl-modern .lp-footer-col a {
        overflow-wrap: break-word;
    }
}

/* ── Accessibility statement modal (footer link) ─────────
   Native <dialog>: a centered white card over a dimmed ::backdrop; Esc and
   backdrop-click close it. Holds the platform accessibility statement so the
   footer link opens it in place instead of navigating to /accessibility. */
.lp-ally-dialog {
    /* Explicit centering: the global `* { margin: 0 }` reset kills the UA
       dialog:modal `margin: auto`, which would otherwise centre it — without
       this the modal pins to the top-left. fit-content height (capped) so it
       centres vertically too; the body scrolls if the statement is long. */
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    max-height: 85vh;
    max-width: 640px;
    width: calc(100% - 32px);
    border: none;
    border-radius: 14px;
    padding: 0;
    color: #1a2233;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.lp-ally-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
.lp-ally-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #eef1f5;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
}
.lp-ally-dialog-head h2 {
    font-family: var(--mod-font-body, 'DM Sans', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: #16233f;
}
.lp-ally-dialog-close {
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 0 4px;
}
.lp-ally-dialog-close:hover {
    color: #16233f;
}
.lp-ally-dialog-body {
    padding: 20px 24px 28px;
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.65;
}
.lp-ally-dialog-body h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 20px 0 8px;
    color: #16233f;
}
.lp-ally-dialog-body p {
    margin: 0 0 12px;
    font-size: 0.95rem;
}
.lp-ally-dialog-body ul {
    margin: 0 0 14px;
    padding-left: 22px;
}
.lp-ally-dialog-body li {
    font-size: 0.95rem;
    margin-bottom: 6px;
}
.lp-ally-dialog-body a {
    color: #0369a1;
}