/* Shared federation design layer. Presets change composition as well as color. */
body.cfs-site {
    font-family: var(--cfs-body-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.cfs-site h1,
.cfs-site h2,
.cfs-site h3,
.cfs-site h4,
.cfs-site .cfs-heading,
.cfs-site [class*="__title"] {
    font-family: var(--cfs-heading-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.cfs-site :where(.cfs-card, [class*="-card"], [class*="__card"], input, select, textarea) {
    border-radius: var(--cfs-radius, 8px);
}

.cfs-site :where(.cfs-button, button, [class*="__button"], [class*="-button"]) {
    border-radius: max(4px, calc(var(--cfs-radius, 8px) * .7));
}

/* Heritage — editorial federation identity. */
body.cfs-design-heritage .cfs-header {
    border-top: 4px solid var(--cfs-yellow);
}

body.cfs-design-heritage .cfs-home-hero::after,
body.cfs-design-heritage .cfs-event-hero::after,
body.cfs-design-heritage .cfs-ratings-hero::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--cfs-navy) 94%, transparent) 0%, color-mix(in srgb, var(--cfs-navy) 74%, transparent) 52%, color-mix(in srgb, var(--cfs-navy) 30%, transparent) 100%);
}

body.cfs-design-heritage .cfs-home-hero__title,
body.cfs-design-heritage .cfs-home-section-heading h2 {
    letter-spacing: -.035em;
}

body.cfs-design-heritage .cfs-home-quicklinks {
    border-top: 3px solid var(--cfs-yellow);
}

body.cfs-design-heritage :where(.cfs-home-event-card, .cfs-home-story-card, .cfs-player-card) {
    border-bottom: 3px solid color-mix(in srgb, var(--cfs-yellow) 72%, white);
}

/* Modern Arena — dark, energetic, and digital-first. */
body.cfs-design-arena {
    background: #f8fafc;
}

body.cfs-design-arena .cfs-header {
    border-color: color-mix(in srgb, var(--cfs-yellow) 35%, transparent);
    background: var(--cfs-navy);
    color: #fff;
}

body.cfs-design-arena .cfs-header a,
body.cfs-design-arena .cfs-header button {
    color: #fff;
}

body.cfs-design-arena .cfs-home-hero,
body.cfs-design-arena .cfs-home-hero-slide {
    min-height: clamp(600px, 78vh, 860px);
}

body.cfs-design-arena .cfs-home-hero::after {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--cfs-navy) 98%, transparent), color-mix(in srgb, var(--cfs-navy) 62%, transparent)),
        repeating-linear-gradient(135deg, transparent 0 24px, color-mix(in srgb, var(--cfs-blue) 15%, transparent) 24px 25px);
}

body.cfs-design-arena .cfs-home-hero__content {
    max-width: 780px;
}

body.cfs-design-arena .cfs-home-hero__title {
    max-width: 12ch;
    font-size: clamp(50px, 7vw, 94px);
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .94;
    text-transform: uppercase;
}

body.cfs-design-arena .cfs-home-hero__rule {
    width: 92px;
    background: var(--cfs-yellow);
    box-shadow: 32px 0 0 var(--cfs-blue);
}

body.cfs-design-arena .cfs-home-quicklinks-wrap {
    background: var(--cfs-navy);
}

body.cfs-design-arena .cfs-home-quicklinks {
    transform: translateY(-26px);
    border: 1px solid color-mix(in srgb, var(--cfs-blue) 35%, transparent);
    background: color-mix(in srgb, var(--cfs-navy) 90%, white);
    box-shadow: 0 24px 70px rgba(2, 6, 23, .28);
}

body.cfs-design-arena .cfs-home-quicklink,
body.cfs-design-arena .cfs-home-quicklink strong {
    color: #fff;
}

body.cfs-design-arena .cfs-home-quicklink span {
    color: #cbd5e1;
}

body.cfs-design-arena :where(.cfs-home-event-card, .cfs-home-story-card, .cfs-player-card) {
    overflow: hidden;
    border: 0;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .11);
    transition: transform .2s ease, box-shadow .2s ease;
}

body.cfs-design-arena :where(.cfs-home-event-card, .cfs-home-story-card, .cfs-player-card):hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 65px rgba(15, 23, 42, .18);
}

body.cfs-design-arena :where(.cfs-home-section-heading h2, .cfs-ratings-main h2) {
    font-weight: 900;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

/* National Momentum — warm, inclusive, and highly rounded. */
body.cfs-design-momentum {
    background: color-mix(in srgb, var(--cfs-surface) 36%, white);
}

body.cfs-design-momentum .cfs-header {
    margin: 12px auto 0;
    width: min(calc(100% - 24px), calc(var(--cfs-content-width) + 48px));
    border: 1px solid color-mix(in srgb, var(--cfs-blue) 16%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, white 94%, transparent);
    box-shadow: 0 16px 45px color-mix(in srgb, var(--cfs-navy) 10%, transparent);
}

body.cfs-design-momentum.admin-bar .cfs-header--sticky {
    top: 44px;
}

body.cfs-design-momentum .cfs-home-hero,
body.cfs-design-momentum .cfs-home-hero-slide {
    margin: 14px auto 0;
    width: min(calc(100% - 24px), 1500px);
    min-height: clamp(560px, 72vh, 780px);
    overflow: hidden;
    border-radius: clamp(24px, 4vw, 52px);
}

body.cfs-design-momentum .cfs-home-hero::after {
    background:
        radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--cfs-yellow) 40%, transparent), transparent 24%),
        linear-gradient(110deg, color-mix(in srgb, var(--cfs-navy) 95%, transparent), color-mix(in srgb, var(--cfs-blue) 65%, transparent));
}

body.cfs-design-momentum .cfs-home-hero__content {
    padding: clamp(26px, 5vw, 58px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: calc(var(--cfs-radius) * 1.4);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
}

body.cfs-design-momentum .cfs-home-hero__title {
    font-size: clamp(45px, 6vw, 78px);
    letter-spacing: -.055em;
}

body.cfs-design-momentum .cfs-home-quicklinks {
    gap: 10px;
    padding-block: 10px;
    border-radius: calc(var(--cfs-radius) * 1.3);
    background: #fff;
    box-shadow: 0 20px 55px color-mix(in srgb, var(--cfs-navy) 12%, transparent);
}

body.cfs-design-momentum .cfs-home-quicklink {
    border-radius: var(--cfs-radius);
}

body.cfs-design-momentum .cfs-home-quicklink:hover {
    background: var(--cfs-surface);
}

body.cfs-design-momentum :where(.cfs-home-event-card, .cfs-home-story-card, .cfs-player-card) {
    overflow: hidden;
    border: 0;
    box-shadow: 0 16px 44px color-mix(in srgb, var(--cfs-navy) 10%, transparent);
}

body.cfs-design-momentum .cfs-section--navy,
body.cfs-design-momentum .cfs-home-cta {
    background: linear-gradient(135deg, var(--cfs-navy), var(--cfs-blue));
}

@media (max-width: 782px) {
    body.cfs-design-momentum .cfs-header {
        width: calc(100% - 16px);
        border-radius: 22px;
    }

    body.cfs-design-momentum .cfs-home-hero,
    body.cfs-design-momentum .cfs-home-hero-slide {
        width: calc(100% - 16px);
        border-radius: 28px;
    }
}