/* Kisure Sports FE852 — resolved Match Centre team palette + footer social hardening.
 * Match Centre uses --ks-home-team-color / --ks-away-team-color as the single
 * display-palette authority. Those variables already enforce home-primary priority
 * and away distinctness in match.blade.php. This CSS must not fall back to raw
 * accent colours or depend on a historical saved-logo-colors version marker. */

/* -------------------------------------------------------------------------
   MATCH CENTRE TEAM IDENTITY
   The --ks-*-team-color variables are populated from Data Engine's stored
   logo-extracted colors. Solid identity strokes use the exact primary value;
   only background washes use color-mix.
   ------------------------------------------------------------------------- */
.football-page--team-themed .article-match-scoreboard {
    box-shadow:
        inset 4px 0 0 var(--ks-home-team-color),
        inset -4px 0 0 var(--ks-away-team-color) !important;
}

.football-page--team-themed .article-match-scoreboard__team--home:hover,
.football-page--team-themed .article-match-scoreboard__crest--home:hover,
.football-page--team-themed .article-match-scoreboard__support-col--home a:hover {
    color: var(--ks-home-team-color) !important;
}
.football-page--team-themed .article-match-scoreboard__team--away:hover,
.football-page--team-themed .article-match-scoreboard__crest--away:hover,
.football-page--team-themed .article-match-scoreboard__support-col--away a:hover {
    color: var(--ks-away-team-color) !important;
}

.football-page--team-themed .article-match-scoreboard__crest--home img {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ks-home-team-color) 30%, transparent)) !important;
}
.football-page--team-themed .article-match-scoreboard__crest--away img {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ks-away-team-color) 30%, transparent)) !important;
}

/* Momentum home is always above the baseline, away always below it. */
.football-page--team-themed .football-momentum-legend .is-home i,
.football-page--team-themed .football-match-stats-legend .is-home > i,
.football-page--team-themed .football-match-stat-bar i {
    background: var(--ks-home-team-color) !important;
}
.football-page--team-themed .football-momentum-legend .is-away i,
.football-page--team-themed .football-match-stats-legend .is-away > i,
.football-page--team-themed .football-match-stat-bar b {
    background: var(--ks-away-team-color) !important;
}
.football-page--team-themed .football-momentum-liquid__area.is-home {
    stroke: var(--ks-home-team-color) !important;
}
.football-page--team-themed .football-momentum-liquid__area.is-away {
    stroke: var(--ks-away-team-color) !important;
}
.football-page--team-themed [id^="kisureMomentumHome"] stop {
    stop-color: var(--ks-home-team-color) !important;
}
.football-page--team-themed [id^="kisureMomentumAway"] stop {
    stop-color: var(--ks-away-team-color) !important;
}
.football-page--team-themed .football-momentum-liquid {
    background: color-mix(in srgb, var(--ks-home-team-color) 10%, var(--surface, #fff)) !important;
}
.football-page--team-themed .football-match-stat-row__value--home {
    color: color-mix(in srgb, var(--ks-home-team-color) 72%, #111827) !important;
}
.football-page--team-themed .football-match-stat-row__value--away {
    color: color-mix(in srgb, var(--ks-away-team-color) 72%, #111827) !important;
}
.football-page--team-themed .football-commentary-card.is-home-team {
    border-inline-start-color: var(--ks-home-team-color) !important;
    background: color-mix(in srgb, var(--ks-home-team-color) 9%, var(--surface, #fff)) !important;
}
.football-page--team-themed .football-commentary-card.is-away-team {
    border-inline-start-color: var(--ks-away-team-color) !important;
    background: color-mix(in srgb, var(--ks-away-team-color) 9%, var(--surface, #fff)) !important;
}
.football-page--team-themed .football-commentary-card.is-home-team .football-commentary-person strong,
.football-page--team-themed .football-commentary-card.is-home-team .football-commentary-card__score {
    color: color-mix(in srgb, var(--ks-home-team-color) 72%, #111827) !important;
}
.football-page--team-themed .football-commentary-card.is-away-team .football-commentary-person strong,
.football-page--team-themed .football-commentary-card.is-away-team .football-commentary-card__score {
    color: color-mix(in srgb, var(--ks-away-team-color) 72%, #111827) !important;
}

/* Give major Match Centre sections the same exact two-club edge identity. */
.football-page--team-themed .football-section--commentary,
.football-page--team-themed .football-section--momentum,
.football-page--team-themed .football-section--match-stats-inline,
.football-page--team-themed .football-section--match-lineups {
    box-shadow:
        inset 3px 0 0 var(--ks-home-team-color),
        inset -3px 0 0 var(--ks-away-team-color);
}


/* FE852: lineups and history use the same resolved pair as Momentum. The pitch
   stays football-green; identity chrome (cards, side badges and edges) carries
   the two club colours so HOME/AWAY cannot collapse to the same generic teal. */
.football-page--team-themed #lineups .football-lineup-card--home {
    border-color: color-mix(in srgb, var(--ks-home-team-color) 40%, var(--border, #d9e2ea)) !important;
    box-shadow: inset 3px 0 0 var(--ks-home-team-color) !important;
}
.football-page--team-themed #lineups .football-lineup-card--away {
    border-color: color-mix(in srgb, var(--ks-away-team-color) 40%, var(--border, #d9e2ea)) !important;
    box-shadow: inset -3px 0 0 var(--ks-away-team-color) !important;
}
.football-page--team-themed #lineups .football-lineup-side--home {
    border-color: color-mix(in srgb, var(--ks-home-team-color) 48%, transparent) !important;
    background: color-mix(in srgb, var(--ks-home-team-color) 12%, var(--surface, #fff)) !important;
    color: color-mix(in srgb, var(--ks-home-team-color) 76%, #111827) !important;
}
.football-page--team-themed #lineups .football-lineup-side--away {
    border-color: color-mix(in srgb, var(--ks-away-team-color) 48%, transparent) !important;
    background: color-mix(in srgb, var(--ks-away-team-color) 12%, var(--surface, #fff)) !important;
    color: color-mix(in srgb, var(--ks-away-team-color) 76%, #111827) !important;
}
.football-page--team-themed #lineups .football-lineup-card--home .football-lineup-card__crest {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ks-home-team-color) 34%, transparent) !important;
}
.football-page--team-themed #lineups .football-lineup-card--away .football-lineup-card__crest {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ks-away-team-color) 34%, transparent) !important;
}
.football-page--team-themed .football-match-history-team-v618.is-home {
    box-shadow: inset 3px 0 0 var(--ks-home-team-color) !important;
}
.football-page--team-themed .football-match-history-team-v618.is-away {
    box-shadow: inset -3px 0 0 var(--ks-away-team-color) !important;
}
html[data-theme="dark"] .football-page--team-themed .football-commentary-card.is-home-team,
body.dark-mode .football-page--team-themed .football-commentary-card.is-home-team {
    background: color-mix(in srgb, var(--ks-home-team-color) 17%, #0b1528) !important;
}
html[data-theme="dark"] .football-page--team-themed .football-commentary-card.is-away-team,
body.dark-mode .football-page--team-themed .football-commentary-card.is-away-team {
    background: color-mix(in srgb, var(--ks-away-team-color) 17%, #0b1528) !important;
}


html[data-theme="dark"] .football-page--team-themed #lineups .football-lineup-side--home,
body.dark-mode .football-page--team-themed #lineups .football-lineup-side--home {
    background: color-mix(in srgb, var(--ks-home-team-color) 20%, #1c1c1c) !important;
    border-color: color-mix(in srgb, var(--ks-home-team-color) 48%, #303030) !important;
    color: color-mix(in srgb, var(--ks-home-team-color) 58%, white) !important;
}
html[data-theme="dark"] .football-page--team-themed #lineups .football-lineup-side--away,
body.dark-mode .football-page--team-themed #lineups .football-lineup-side--away {
    background: color-mix(in srgb, var(--ks-away-team-color) 20%, #1c1c1c) !important;
    border-color: color-mix(in srgb, var(--ks-away-team-color) 48%, #303030) !important;
    color: color-mix(in srgb, var(--ks-away-team-color) 58%, white) !important;
}
/* -------------------------------------------------------------------------
   FOOTER SOCIALS
   Explicit sizing/currentColor rules protect the inline SVGs from global icon,
   Bootstrap and mobile overrides. They remain visible and tappable at all sizes.
   ------------------------------------------------------------------------- */
.footer-socials {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .55rem !important;
    min-width: 0;
}
.footer-socials .footer-socials__link {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 2.75rem !important;
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    color: var(--text, #122033) !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.footer-socials .footer-socials__link:hover,
.footer-socials .footer-socials__link:focus-visible {
    background: color-mix(in srgb, var(--primary-strong, #0e8f8b) 10%, var(--surface, #fff)) !important;
    border-color: color-mix(in srgb, var(--primary-strong, #0e8f8b) 35%, var(--border)) !important;
    color: var(--primary-strong, #0e8f8b) !important;
}
.footer-socials .footer-socials__glyph {
    display: block !important;
    flex: none !important;
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    max-width: 1.35rem !important;
    height: 1.35rem !important;
    min-height: 1.35rem !important;
    max-height: 1.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.footer-socials .footer-socials__glyph path[fill="currentColor"],
.footer-socials .footer-socials__glyph circle[fill="currentColor"] {
    fill: currentColor !important;
}
.footer-socials .footer-socials__glyph path[stroke="currentColor"],
.footer-socials .footer-socials__glyph rect[stroke="currentColor"],
.footer-socials .footer-socials__glyph circle[stroke="currentColor"] {
    stroke: currentColor !important;
}
html[data-theme="dark"] .footer-socials .footer-socials__link,
body.dark-mode .footer-socials .footer-socials__link {
    color: #e8f0fb !important;
}

@media (max-width: 640px) {
    .footer-panel__brand .footer-socials {
        width: 100% !important;
        gap: .5rem !important;
    }
    .footer-socials .footer-socials__link {
        flex-basis: 2.65rem !important;
        width: 2.65rem !important;
        min-width: 2.65rem !important;
        height: 2.65rem !important;
        min-height: 2.65rem !important;
    }
    .footer-socials .footer-socials__glyph {
        width: 1.28rem !important;
        min-width: 1.28rem !important;
        max-width: 1.28rem !important;
        height: 1.28rem !important;
        min-height: 1.28rem !important;
        max-height: 1.28rem !important;
    }
}