/* Shared Football24 surfaces for public pages and administration. */
:where(.public-site, .admin-body) {
    --f24-on-brand: var(--ui-brand-text, #fff);
    --f24-brand-line: color-mix(in srgb, var(--f24-on-brand) 25%, transparent);
    --f24-tint: color-mix(in srgb, var(--nav) 5%, var(--panel));
}

.site-skip-link {
    position: fixed;
    z-index: 110;
    top: 12px;
    left: 12px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--ui-button-radius);
    background: var(--panel);
    color: var(--text);
    transform: translateY(calc(-100% - 24px));
}
.site-skip-link:focus { transform: none; }
.strip-favorite { color: var(--ui-link); font-weight: 900; }
#main-content:focus { outline: none; }

.f24-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--ui-card-radius);
    background: var(--nav);
    color: var(--f24-on-brand);
    --ui-focus: var(--ui-focus-on-brand, var(--f24-on-brand));
}
.f24-band-pitch::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 12% 3% 12% auto;
    width: min(36%, 300px);
    border: 1px solid var(--f24-brand-line);
    background:
        radial-gradient(circle closest-side, transparent 44%, var(--f24-brand-line) 45%, transparent 47%),
        linear-gradient(90deg, transparent calc(50% - .5px), var(--f24-brand-line) 50%, transparent calc(50% + .5px));
    opacity: .55;
    pointer-events: none;
}

body.public-site main :is(.page-title, .section-heading h2) {
    border-inline-start: 0;
    padding-inline-start: 0;
}
body.public-site main .page-title {
    font-size: clamp(1.8rem, 4vw, 3.25rem);
    letter-spacing: -.045em;
    line-height: 1.1;
}
body.public-site main .page-heading.f24-band,
body.public-site main .games-page-heading.f24-band {
    margin: clamp(14px, 2.5vw, 30px) 0 clamp(18px, 3vw, 30px);
    padding: clamp(19px, 3vw, 36px);
    gap: 10px 20px;
}
body.public-site main .page-heading.f24-band .page-title,
body.public-site main .games-page-heading.f24-band > p { color: inherit; }
.page-heading.f24-band .page-heading-actions { gap: 8px; }
body.public-site main .page-heading.f24-band .page-heading-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--f24-brand-line);
    border-radius: var(--ui-button-radius);
    color: inherit;
    text-decoration: none;
}
body.public-site main .page-heading.f24-band .page-heading-actions a:hover {
    background: color-mix(in srgb, var(--f24-on-brand) 9%, transparent);
    text-decoration: underline;
}
body.public-site main .section-heading { align-items: baseline; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
body.public-site main .section-heading h2 { font-size: clamp(1.35rem, 2.8vw, 2rem); }
body.public-site main .section-heading > a { color: var(--nav); }

body.public-site .masthead { border-bottom: 1px solid color-mix(in srgb, var(--lime) 30%, var(--line)); }
body.public-site .site-topbar .topbar-profile[aria-current] { box-shadow: inset 0 -2px var(--lime); }
.public-site .story:not(.lead):not(.small), .public-site .latest, .public-site .video-card { box-shadow: none; }
body.public-site .latest { padding: clamp(15px, 2.5vw, 23px); }
body.public-site .latest h2 { margin-bottom: 9px; font-size: clamp(1.05rem, 2vw, 1.3rem); }
body.public-site .latest li a { min-height: 44px; align-items: baseline; }
.f24-article-heading { padding-block: 4px 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
body.public-site main .f24-article-heading .page-title {
    margin-block: 14px 10px;
    color: var(--text);
    font-size: clamp(1.85rem, 4.2vw, 3.45rem);
}
.f24-article-heading .article-meta { margin: 0; }
.public-site .article-hero { border-radius: var(--ui-card-radius); }
.public-site .article-copy > p { line-height: 1.75; }

body.public-site .video-feature {
    background: var(--nav);
    border-color: transparent;
    color: var(--f24-on-brand);
    --ui-focus: var(--ui-focus-on-brand);
}
body.public-site .video-feature :is(.video-feature-meta, time) { color: inherit; }
body.public-site .video-card-picture > span {
    background: var(--lime);
    color: var(--ui-accent-text);
}

body.public-site .profile-hero.f24-band,
body.public-site .match-scoreboard.f24-band {
    border: 1px solid transparent;
    border-radius: var(--ui-card-radius);
    background: var(--nav);
    color: var(--f24-on-brand);
    box-shadow: none;
}
body.public-site .profile-hero.f24-band :is(.page-title, .profile-kicker, .profile-identity p, .profile-identity a, .team-hero-form small),
body.public-site .match-scoreboard.f24-band :is(.match-team-label, .match-team-profile, .fixture-center strong, .fixture-center time, .match-minute),
body.public-site .match-scoreboard.f24-band:not(.is-live) .fixture-status {
    color: inherit;
}
body.public-site .profile-hero.f24-band :is(.account-hero-tags span, .account-hero-link) {
    border-color: var(--f24-brand-line);
    background: color-mix(in srgb, var(--f24-on-brand) 8%, transparent);
    color: inherit;
}
body.public-site .match-scoreboard.f24-band .fixture-status { border: 1px solid var(--f24-brand-line); }
body.public-site .auth-benefits.f24-band :is(.auth-eyebrow, .auth-intro, .auth-prize-label, .auth-prize p, .auth-benefit-list p) { color: inherit; }
body.public-site .auth-benefits.f24-band .auth-prize { border-color: var(--f24-brand-line); }
body.public-site .auth-benefits.f24-band .auth-prize a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: var(--ui-button-radius);
    background: var(--lime);
    color: var(--ui-accent-text);
}
body.public-site .auth-benefits.f24-band .auth-benefit-list li > span {
    border-radius: 4px;
    padding: 2px 5px;
    background: var(--lime);
    color: var(--ui-accent-text);
}

body.public-site main :is(.games-table, .league-table, .league-hub-table, .team-table, .match-stats, .italy-table) td,
body.public-site main :is(.league-hub-match-score, .fixture-center) {
    font-variant-numeric: tabular-nums;
}
body.public-site .site-footer {
    padding: clamp(20px, 3vw, 34px) 0;
    background: var(--nav);
    color: var(--f24-on-brand);
    border-top: 1px solid var(--line);
    --ui-focus: var(--ui-focus-on-brand);
    --ui-link-hover: var(--f24-on-brand);
}
.site-footer .site-footer-inner, .site-footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.site-footer .site-footer-legal { flex-basis:100%; padding-top:8px; border-top:1px solid var(--f24-brand-line); }
.site-footer .footer-brand {
    width: 164px;
    padding: 6px 8px;
    border-radius: var(--ui-button-radius);
    background: #fff;
}
body.public-site .site-footer .site-footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-size: .86rem;
    font-weight: 700;
}
body.public-site .site-footer .site-footer-nav a:hover { text-decoration: underline; }

body.admin-body .admin-heading.f24-band {
    padding: clamp(16px, 3vw, 30px);
    border: 1px solid transparent;
    border-radius: var(--ui-card-radius);
    background: var(--nav);
    color: var(--f24-on-brand);
}
.admin-heading.f24-band :is(.admin-eyebrow, p, a) { color: inherit; }
.admin-body .admin-heading.f24-band .admin-actions .admin-button {
    background: color-mix(in srgb, var(--f24-on-brand) 9%, transparent);
    color: inherit;
    border-color: var(--f24-brand-line);
}
.admin-body .admin-heading.f24-band .admin-actions .admin-button:hover { text-decoration: underline; }
body.admin-body .admin-heading.f24-band h1 { font-size: clamp(1.55rem, 3vw, 2.35rem); }
body.admin-body { background: var(--bg); color: var(--text); }
.admin-body .admin-module-grid a { text-decoration: none; }
.admin-body .admin-module-grid a:hover { background: var(--f24-tint); }
.admin-body .admin-module-grid a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.admin-body .admin-menu-toggle { color: var(--text); border-color: var(--line); }

/* Keep shared chrome and the editorial surfaces on the active club palette. */
html[data-site-skin="club"] body.public-site :is(.site-topbar, .masthead, .site-footer) {
    background: var(--club-brand);
    color: var(--club-on-brand);
    border-color: var(--f24-brand-line);
    --ui-focus-on-brand: var(--club-on-brand);
}
html[data-site-skin="club"] body.public-site .site-topbar .topbar-profile[aria-current] {
    color: inherit;
    box-shadow: inset 0 -2px var(--club-on-brand);
}
html[data-site-skin="club"] body.public-site .masthead .league-menu[open] > summary {
    color: var(--club-on-brand);
}
html[data-site-skin="club"] body.public-site .masthead :is(.links > a[aria-current], .league-menu[data-active] > summary) {
    border-bottom-color: var(--club-on-brand);
}
html[data-site-skin="club"] body.public-site .masthead :is(.navigation-search-toggle, .menu-toggle, .links > a, .league-menu > summary):focus-visible {
    outline-color: var(--club-on-brand) !important;
}
html[data-site-skin="club"] body.public-site .masthead .league-menu ul {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--club-hero-end) 15%, transparent);
}
.site-club-logo { display: none; }
.site-club-logo svg { display: block; width: 100%; height: auto; }
html[data-site-skin="club"] :is(.brand, .footer-brand):has(.site-club-logo) > img { display: none; }
html[data-site-skin="club"] .site-club-logo {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 5px;
    --f24-logo-ink: var(--club-hero-end);
}
html[data-site-skin="club"] .navigation-backdrop {
    background: color-mix(in srgb, var(--club-hero-end) 45%, transparent);
}
@media (max-width: 1300px) {
    html[data-site-skin="club"] .masthead .navigation {
        background: var(--club-brand);
        color: var(--club-on-brand);
    }
    html[data-site-skin="club"] body.public-site .masthead .league-menu ul { box-shadow: none; }
    html[data-site-skin="club"] .masthead .league-menu li a:is(:hover, [aria-current]) { color: inherit; }
    html[data-site-skin="club"] body.public-site .navigation-search button {
        background: var(--club-hero-end);
        color: var(--club-on-brand);
    }
    html[data-site-skin="club"] .recommendation-image { border-color: var(--line); }
    html[data-site-skin="club"] .recommendation-fallback { color: var(--nav); }
}

html[data-site-skin="club"] body.public-site .score-strip { background: var(--f24-tint); color: var(--text); }
html[data-site-skin="club"] body.public-site .strip-date { background: var(--line); color: var(--text); }
html[data-site-skin="club"] body.public-site :is(.strip-all, .strip-controls button:not(:disabled)) { color: var(--ui-link); }
html[data-site-skin="club"] body.public-site .strip-controls button { border-color: var(--line); }
html[data-site-skin="club"] body.public-site :is(.lead, .small)::after {
    background: linear-gradient(180deg, transparent 12%, color-mix(in srgb, var(--club-hero-end) 94%, transparent) 87%);
}

html[data-site-skin="club"] body.public-site :is(.legends-home, .legends-hero, .great-match-story-board, .great-match-article-board) {
    background: var(--club-hero-end);
    color: var(--club-on-brand);
    border-color: var(--f24-brand-line);
    --legend-soft: var(--club-hero-muted);
}
html[data-site-skin="club"] body.public-site .legends-orbit::after,
html[data-site-skin="club"] body.public-site :is(.legend-portrait, .legends-art-caption, .legend-story-image, .legend-story-image > span) {
    background: var(--club-hero-end);
}
html[data-site-skin="club"] body.public-site .legends-art-caption { box-shadow: 0 9px 30px #0005; }
html[data-site-skin="club"] body.public-site .legend-portrait { border-color: var(--line); }
html[data-site-skin="club"] body.public-site .great-match-card .great-match-badge { background: var(--bg); outline-color: var(--line); }
html[data-site-skin="club"] body.public-site .great-match-card .legend-initials { color: var(--nav); }
html[data-site-skin="club"] body.public-site :is(.legends-hero-art, .great-match-hero-board) {
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--club-brand) 35%, transparent), transparent 70%);
}
html[data-site-skin="club"] body.public-site :is(.legends-hero-intro, .legends-hero-footnote, .legends-art-caption > span, .great-match-venue, .great-matches-home-list time, .great-match-article-board > p:last-child) {
    color: var(--club-hero-muted);
}
html[data-site-skin="club"] body.public-site :is(.great-matches-home, .great-match-hero-board, .great-match-story-board) .great-match-note {
    color: var(--club-hero-muted);
}

html[data-site-skin="club"] body.public-site :is(.video-card-picture, .video-card-picture small, .video-nojs) { background: var(--club-hero-end); }
html[data-site-skin="club"] body.public-site :is(.video-play-icon, .video-category) { color: var(--club-hero-end); }
html[data-site-skin="club"] body.public-site :is(.video-play small, .video-channel, .video-player-note) { color: var(--club-hero-muted); }
html[data-site-skin="club"] body.public-site .video-youtube-link { border-color: var(--f24-brand-line); }
html[data-site-skin="club"] body.public-site :is(.odds-value, .f24-poll-message) { background: var(--f24-tint); color: var(--text); }
html[data-site-skin="club"] body.public-site :is(.league-hub-badge, .results-league-icon, .f24-poll-message a) { color: var(--nav); }
html[data-site-skin="club"] body.public-site .directory-mark { color: var(--nav) !important; border-color: var(--line); }
html[data-site-skin="club"] body.public-site :is(.f24-poll-bonus, .player-winner) { color: var(--ui-accent-text); }
html[data-site-skin="club"] body.public-site .f24-poll-option:is(:has(input:checked), .is-selected) { border-color: var(--lime); }
html[data-site-skin="club"] body.public-site .f24-poll-option:has(input:focus-visible) { outline-color: var(--ui-focus); }
html[data-site-skin="club"] body.public-site .f24-poll meter::-webkit-meter-bar { background: var(--line); }
html[data-site-skin="club"] body.public-site .f24-poll meter::-webkit-meter-optimum-value { background: var(--lime); }
html[data-site-skin="club"] body.public-site #privacy-settings [data-reopen] { background: var(--club-brand); color: var(--club-on-brand); }
html[data-site-skin="club"] body.public-site #privacy-settings [data-reopen]:hover { background: var(--club-hero-end); }

html[data-site-skin="club"] .regional-map-board {
    background-image: radial-gradient(color-mix(in srgb, var(--nav) 10%, transparent) .8px, transparent .8px);
}
html[data-site-skin="club"] .regional-map [data-region] {
    --region-strength: 24%;
    --map-fill: color-mix(in srgb, var(--nav) var(--region-strength), var(--panel));
    --map-hover: var(--line);
}
html[data-site-skin="club"] .regional-map [data-region="northeast"] { --region-strength: 16%; }
html[data-site-skin="club"] .regional-map [data-region="southwest"] { --region-strength: 32%; }
html[data-site-skin="club"] .regional-map [data-region="southeast"] { --region-strength: 8%; }
html[data-site-skin="club"] .regional-map-legend [data-region] i { background: var(--map-fill); border-color: var(--line); }
html[data-site-skin="club"] .regional-map-panel-meta span { color: var(--muted); }
html[data-site-skin="club"] .regional-map-competitions a:hover { border-color: var(--nav); }
html[data-site-skin="club"] .regional-map-district { color: var(--text); }
html[data-site-skin="club"] :is(.regional-map-label, .regional-map-count) { fill: var(--text); }
html[data-site-skin="club"] .regional-map-district:hover .regional-map-area { stroke: var(--nav); }
html[data-site-skin="club"] .regional-map-district.is-selected .regional-map-area {
    fill: var(--club-brand);
    stroke: var(--club-on-brand);
    filter: none;
}
html[data-site-skin="club"] .regional-map-district.is-selected :is(.regional-map-label, .regional-map-count) {
    fill: var(--club-on-brand);
    stroke: var(--club-brand);
}

@media (max-width: 560px) {
    .f24-band-pitch::before { width: 39%; opacity: .35; }
    .site-footer-nav { gap: 2px 15px; }
    .site-footer .site-footer-inner { display: grid; }
}