/* SFSPORT360 public shell — clean replacement for the legacy marketing chrome. */

:root {
    --public-navy: #061a2c;
    --public-emerald-950: #032e28;
    --public-emerald-900: #043d33;
    --public-emerald-800: #075b48;
    --public-emerald-700: #087257;
    --public-lime: #d8ef67;
    --public-paper: #ffffff;
    --public-canvas: #f3f6f4;
    --public-ink: #10231f;
    --public-muted: #62726d;
    --public-line: #dce6e1;
    --public-banner: var(--sf-banner-bg, #0b3039);
    --public-container: 1200px;
}

body.site-body--marketing {
    min-inline-size: 0;
}

body.site-body--public-clean {
    background: var(--public-canvas);
    color: var(--public-ink);
}

body.site-body--public-clean .site-main--marketing {
    padding: 0;
}

body.site-body--public-clean :where(.container, .sf-home-container) {
    inline-size: min(calc(100% - 2.5rem), var(--public-container));
    max-inline-size: none;
    margin-inline: auto;
}

/* Header */

.public-topbar {
    position: relative;
    z-index: 1000;
    min-block-size: 72px;
    border: 0;
    border-block-end: 1px solid var(--public-line);
    background: var(--public-paper);
    color: var(--public-ink);
    box-shadow: none;
}

.public-topbar__inner {
    display: flex;
    min-block-size: 72px;
    align-items: center;
    gap: 1.25rem;
}

.public-topbar__brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .65rem;
    color: var(--public-ink);
    text-decoration: none;
}

.public-topbar__logo {
    display: grid;
    inline-size: 40px;
    block-size: 40px;
    place-items: center;
    border-radius: 11px;
}

.public-topbar__logo img {
    display: block;
    inline-size: 36px;
    block-size: 36px;
}

.public-topbar__name {
    display: inline-flex;
    align-items: center;
    font-size: .96rem;
    font-weight: 900;
    letter-spacing: 0;
}

.public-topbar__nav {
    position: static;
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.public-topbar__links,
.public-topbar__actions,
.public-topbar__preferences {
    display: flex;
    align-items: center;
}

.public-topbar__links {
    min-inline-size: 0;
    gap: .18rem;
    padding: .28rem;
    border: 1px solid var(--public-line);
    border-radius: 13px;
    background: var(--public-canvas);
}

.public-topbar__link {
    display: inline-flex;
    min-block-size: 38px;
    align-items: center;
    justify-content: center;
    padding-inline: .85rem;
    border-radius: 9px;
    color: var(--public-muted);
    font-size: .78rem;
    font-weight: 790;
    text-decoration: none;
    white-space: nowrap;
}

.public-topbar__link:is(:hover, :focus-visible),
.public-topbar__link.is-active {
    background: var(--public-paper);
    color: var(--public-emerald-700);
}

.public-topbar__actions {
    flex: 0 0 auto;
    gap: .45rem;
}

.public-topbar__details {
    position: relative;
}

.public-topbar__details > summary,
.public-topbar__signin,
.public-topbar__logout button {
    display: inline-flex;
    min-block-size: 40px;
    align-items: center;
    justify-content: center;
    padding-inline: .8rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--public-ink);
    font: inherit;
    font-size: .77rem;
    font-weight: 820;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.public-topbar__details > summary::-webkit-details-marker {
    display: none;
}

.public-topbar__more > summary {
    color: var(--public-muted);
}

.public-topbar__signin,
.public-topbar__logout button {
    border-color: var(--public-line);
}

.public-topbar__join > summary {
    background: var(--public-emerald-900);
    color: #fff;
}

.public-topbar__details[open] > summary,
.public-topbar__signin:is(:hover, :focus-visible),
.public-topbar__logout button:is(:hover, :focus-visible) {
    border-color: var(--public-emerald-700);
    color: var(--public-emerald-700);
}

.public-topbar__join[open] > summary {
    color: #fff;
}

.public-topbar__dropdown {
    position: absolute;
    inset-block-start: calc(100% + .65rem);
    inset-inline-end: 0;
    z-index: 40;
    display: grid;
    inline-size: 190px;
    gap: .18rem;
    padding: .45rem;
    border: 1px solid var(--public-line);
    border-radius: 12px;
    background: var(--public-paper);
    box-shadow: 0 16px 36px rgba(4, 30, 25, .13);
}

.public-topbar__dropdown a {
    display: grid;
    gap: .12rem;
    padding: .65rem .7rem;
    border-radius: 8px;
    color: var(--public-ink);
    font-size: .76rem;
    font-weight: 760;
    text-decoration: none;
}

.public-topbar__dropdown a:is(:hover, :focus-visible) {
    background: var(--public-canvas);
    color: var(--public-emerald-700);
}

.public-topbar__join-panel {
    inline-size: 260px;
}

.public-topbar__join-panel span,
.public-topbar__join-panel small {
    color: var(--public-muted);
    font-size: .67rem;
    font-weight: 500;
    line-height: 1.45;
}

.public-topbar__account {
    display: grid;
    max-inline-size: 170px;
    gap: .05rem;
    padding-inline: .35rem;
}

.public-topbar__account strong,
.public-topbar__account small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-topbar__account strong {
    color: var(--public-ink);
    font-size: .74rem;
}

.public-topbar__account small {
    color: var(--public-muted);
    font-size: .62rem;
}

.public-topbar__logout {
    margin: 0;
}

.public-topbar__preferences {
    gap: .35rem;
}

.public-topbar__theme,
.public-topbar__preferences .lang-toggle {
    min-inline-size: 40px;
    block-size: 40px;
    padding: .45rem;
    border: 1px solid var(--public-line);
    border-radius: 10px;
    background: var(--public-paper);
    color: var(--public-muted);
    box-shadow: none;
}

.public-topbar__preferences .lang-toggle__text {
    display: none;
}

.public-topbar__menu {
    display: none;
}

.public-topbar__mobile-preferences {
    display: none;
}

/* Shared section-banner language */

body.site-body--public-clean :where(.sf-home-hero, .sf-discovery-hero, .sf-venue-hero, .family-login) {
    --public-banner-copy: #ffffff;
    --public-banner-muted: rgba(255, 255, 255, .76);
    --public-banner-accent: var(--public-lime);
    background: var(--public-banner);
    color: var(--public-banner-copy);
}

body.site-body--marketing .sf-public-banner {
    background: var(--public-banner);
    color: var(--public-banner-copy, #ffffff);
}

body.site-body--marketing :where(.mkt-about-page__banner, .mkt-contact-page__banner, .mkt-faq-page__hero).sf-public-banner {
    border: 0;
    background: var(--public-banner);
    color: #ffffff;
}

body.site-body--marketing :where(.mkt-about-page__banner, .mkt-contact-page__banner, .mkt-faq-page__hero).sf-public-banner :where(h1, h2) {
    max-inline-size: 20ch;
    color: #ffffff;
    font-size: clamp(1.85rem, 4vw, 2.65rem);
    line-height: 1.22;
    letter-spacing: 0;
}

body.site-body--marketing :where(.mkt-about-page__banner, .mkt-contact-page__banner, .mkt-faq-page__hero).sf-public-banner :where(p, .mkt-about-page__intro, .mkt-contact-page__intro) {
    max-inline-size: 44rem;
    color: rgba(255, 255, 255, .74);
}

body.site-body--marketing :where(.mkt-about-page__banner, .mkt-contact-page__banner, .mkt-faq-page__hero).sf-public-banner :where(.mkt-about-page__back, .mkt-contact-page__back, .mkt-faq-page__back) {
    color: rgba(255, 255, 255, .72);
}

body.site-body--marketing :where(.mkt-about-page__banner, .mkt-contact-page__banner, .mkt-faq-page__hero).sf-public-banner :where(.mkt-about-page__eyebrow, .mkt-contact-page__eyebrow, .mkt-faq-page__eyebrow) {
    border-color: rgba(216, 239, 103, .34);
    background: rgba(216, 239, 103, .1);
    color: var(--public-lime);
}

body.site-body--public-clean :where(.sf-home-hero, .sf-discovery-hero, .sf-venue-hero, .family-login) :where(h1, h2) {
    max-inline-size: 18ch;
    color: var(--public-banner-copy);
    letter-spacing: 0;
}

body.site-body--public-clean :where(.sf-home-hero, .sf-discovery-hero, .sf-venue-hero, .family-login) :where(p, small) {
    color: var(--public-banner-muted);
}

/* Entity picker */

.public-entity-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    place-items: center;
    padding: 1rem;
}

.public-entity-modal.is-open {
    display: grid;
}

.public-entity-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 16, 13, .72);
}

.public-entity-modal__card {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 520px);
    padding: 1.6rem;
    border: 1px solid var(--public-line);
    border-radius: 18px;
    background: var(--public-paper);
    color: var(--public-ink);
    box-shadow: 0 24px 60px rgba(2, 24, 19, .2);
}

.public-entity-modal__close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    inline-size: 40px;
    block-size: 40px;
    place-items: center;
    border: 1px solid var(--public-line);
    border-radius: 10px;
    background: var(--public-paper);
    color: var(--public-ink);
    cursor: pointer;
}

.public-entity-modal__close svg {
    inline-size: 18px;
    block-size: 18px;
}

.public-entity-modal__eyebrow {
    color: var(--public-emerald-700);
    font-size: .72rem;
    font-weight: 850;
}

.public-entity-modal__card h2 {
    margin: .45rem 0 0;
    color: var(--public-ink);
    font-size: clamp(1.55rem, 4vw, 2rem);
    letter-spacing: 0;
}

.public-entity-modal__card > p {
    margin: .45rem 0 0;
    color: var(--public-muted);
    font-size: .82rem;
}

.public-entity-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-block-start: 1.25rem;
}

.public-entity-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid var(--public-line);
    border-radius: 12px;
    color: var(--public-ink);
    text-decoration: none;
}

.public-entity-option:is(:hover, :focus-visible) {
    border-color: var(--public-emerald-700);
}

.public-entity-option__icon {
    display: grid;
    inline-size: 38px;
    block-size: 38px;
    place-items: center;
    border-radius: 10px;
    background: #e6f3ee;
    color: var(--public-emerald-700);
}

.public-entity-option__icon svg {
    inline-size: 20px;
    block-size: 20px;
}

.public-entity-option > span:last-child {
    display: grid;
    gap: .15rem;
}

.public-entity-option strong {
    font-size: .82rem;
}

.public-entity-option small {
    color: var(--public-muted);
    font-size: .67rem;
    line-height: 1.45;
}

/* Footer */

.site-body--marketing .site-footer.public-footer {
    border: 0;
    background: var(--public-banner);
    color: rgba(255, 255, 255, .7);
}

.public-footer__inner {
    padding-block: 2.35rem 1.4rem;
}

.public-footer__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.public-footer__brand {
    display: grid;
    max-inline-size: 330px;
    gap: .55rem;
}

.public-footer__brand .brand-wordmark {
    color: #fff;
}

:root[data-theme="light"] body.site-body--marketing .public-footer :where(.brand-wordmark__sf, .brand-wordmark__sport) {
    color: #ffffff;
}

.public-footer__brand p {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: .76rem;
}

.public-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
}

.public-footer__links a {
    display: inline-flex;
    min-block-size: 32px;
    align-items: center;
    color: rgba(255, 255, 255, .76);
    font-size: .74rem;
    font-weight: 720;
    text-decoration: none;
}

.public-footer__links a:is(:hover, :focus-visible) {
    color: var(--public-lime);
}

.public-footer__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 1.7rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid rgba(255, 255, 255, .12);
}

.public-footer__meta p {
    margin: 0;
    color: rgba(255, 255, 255, .52);
    font-size: .64rem;
}

.public-footer__meta .brand-wordmark {
    color: #fff;
}

/* Mobile bottom navigation */

.public-mobile-nav {
    display: none;
}

@media (max-width: 1080px) {
    .public-topbar__inner {
        gap: .75rem;
    }

    .public-topbar__link,
    .public-topbar__details > summary,
    .public-topbar__signin,
    .public-topbar__logout button {
        padding-inline: .62rem;
        font-size: .72rem;
    }

    .public-topbar__name {
        display: none;
    }
}

@media (max-width: 880px) {
    body.site-body--marketing {
        padding-block-end: 0;
        padding-bottom: 0;
    }

    body.site-body--marketing.topbar-nav-open {
        overflow: hidden;
    }

    .public-topbar,
    .public-topbar__inner {
        min-block-size: 62px;
    }

    .public-topbar__inner {
        justify-content: space-between;
    }

    .public-topbar__logo,
    .public-topbar__logo img {
        inline-size: 34px;
        block-size: 34px;
    }

    .public-topbar__name {
        display: inline-flex;
        font-size: .8rem;
    }

    .public-topbar__menu {
        display: inline-flex;
        min-block-size: 40px;
        align-items: center;
        gap: .5rem;
        padding-inline: .75rem;
        border: 1px solid var(--public-line);
        border-radius: 10px;
        background: var(--public-paper);
        color: var(--public-ink);
        font: inherit;
        font-size: .72rem;
        font-weight: 800;
    }

    .public-topbar__mobile-preferences {
        display: flex;
        margin-inline-start: auto;
    }

    .public-topbar__mobile-preferences .public-topbar__theme {
        display: inline-grid;
        place-items: center;
    }

    .public-topbar__menu-icon {
        display: grid;
        inline-size: 16px;
        gap: 3px;
    }

    .public-topbar__menu-icon i {
        display: block;
        block-size: 1.5px;
        border-radius: 2px;
        background: currentColor;
    }

    .public-topbar__nav {
        position: absolute;
        inset-block-start: calc(100% + 1px);
        inset-inline: .75rem;
        display: none;
        max-block-size: calc(100dvh - 82px);
        align-items: stretch;
        flex-direction: column;
        gap: .85rem;
        padding: .85rem;
        overflow-y: auto;
        border: 1px solid var(--public-line);
        border-radius: 14px;
        background: var(--public-paper);
        box-shadow: 0 20px 44px rgba(4, 30, 25, .18);
    }

    .public-topbar__nav.is-open {
        display: flex;
    }

    .public-topbar__links,
    .public-topbar__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .public-topbar__links {
        padding: .35rem;
    }

    .public-topbar__link,
    .public-topbar__details > summary,
    .public-topbar__signin,
    .public-topbar__logout button {
        inline-size: 100%;
        min-block-size: 44px;
        justify-content: flex-start;
        padding-inline: .85rem;
    }

    .public-topbar__join > summary {
        justify-content: center;
    }

    .public-topbar__dropdown {
        position: static;
        inline-size: 100%;
        margin-block-start: .35rem;
        box-shadow: none;
    }

    .public-topbar__account {
        max-inline-size: none;
        padding: .55rem .75rem;
        border: 1px solid var(--public-line);
        border-radius: 10px;
    }

    .public-topbar__preferences {
        justify-content: flex-start;
    }

    .public-footer__main,
    .public-footer__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    body.site-body--marketing .public-mobile-nav {
        display: none !important;
    }
}

@media (max-width: 560px) {
    body.site-body--public-clean :where(.container, .sf-home-container) {
        inline-size: min(calc(100% - 1.25rem), var(--public-container));
    }

    .public-topbar__name {
        display: none;
    }

    .public-entity-modal__card {
        padding: 1.25rem;
    }

    .public-entity-modal__grid {
        grid-template-columns: 1fr;
    }

    .public-footer__inner {
        padding-block: 2rem 1.2rem;
    }

    .public-footer__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-topbar *,
    .public-entity-modal * {
        scroll-behavior: auto;
        transition-duration: .01ms !important;
    }
}