/* ============================================================
   World Cup 2026 — ONLY the extra styles on top of oleball-light.css.
   The WC pages load oleball-light.css first (same nav/header/look as the
   homepage), then this file for the trophy nav-link + hero + stage bar.
   Do NOT paste oleball-light.css in here — it's loaded separately.
   ============================================================ */

/* ---- Highlighted nav link (gold gimmick box) ---- */
.wc-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    color: #855b07 !important;
    background:#f6f4ea;
    box-shadow: 0 2px 13px rgba(240, 169, 27, .85);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.wc-nav-link:hover { filter: brightness(1.05); }

.wc-nav-icon {
    width: 18px;
    height: 25px;
    object-fit: contain;
    display: block;
}

/* ---- Full-width centered page (no sidebars / ads) ---- */
/* body is `display:flex; flex-direction:column`, so `margin:auto` alone would make
   this shrink to content width (small bar on empty stages). width:100% keeps the
   bar the SAME size on every stage regardless of how many matches are shown. */
.wc-page {
    width: 100%;
    max-width: 1080px;
    margin: 22px auto 60px;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ---- Hero / stage bar (bigger now that it spans full width) ---- */
.wc-hero {
    position: relative;
    border-radius: 18px;
    padding: 30px 34px 34px;
    margin-bottom: 18px;
    color: #fff;
    background:
        radial-gradient(1400px 240px at 20% 0%, rgba(255, 215, 106, .25), transparent 60%),
        linear-gradient(90deg, #5a0f12, #0b1f3a 45%, #123a1c 75%, #5a0f12);
    overflow: hidden;
}

.wc-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wc-hero__title { display: flex; align-items: center; gap: 16px; }
.wc-hero__title img { width: 64px; height: 94px; object-fit: contain; }
.wc-hero__title h1 { margin: 0; font-size: 2rem; color: #fff; line-height: 1.1; }
.wc-badge { display: inline-block; margin-top: 6px; padding: 3px 14px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; font-size: .85rem; }

/* ---- Countdown ---- */
.wc-countdown {
    display: inline-flex; align-items: baseline; gap: 8px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 10px 18px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.25rem;
}
.wc-countdown .lbl { font-size: .7rem; opacity: .7; margin-left: 1px; font-weight: 600; }
.wc-countdown.is-finished { opacity: 0; pointer-events: none; }

/* ---- Progress / stage tabs (bigger dots, thicker rail) ---- */
/* NOTE: oleball-light.css has a global `nav { margin-left:-202px; padding:6px 10px }`
   and `nav a { padding:8px 10px }` + an underline ::after. Because .wc-stages is a
   <nav> with <a> children, we must explicitly reset those here, or the whole bar
   shifts left and the first "Group" node gets clipped by the hero. */
.wc-stages {
    display: flex; align-items: flex-start;
    gap: 0;
    margin: 38px 0 0;          /* kill inherited margin-left:-202px */
    padding: 0;                /* kill inherited nav padding */
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
/* grey rail spans from the first dot centre to the last dot centre */
.wc-stages::before {
    content: ""; position: absolute;
    left: var(--wc-rail-left, 7%); right: var(--wc-rail-right, 7%);
    top: 11px; height: 5px;
    background: rgba(255,255,255,.25); border-radius: 5px;
}
/* gold "progress" fill from the first dot up to the selected stage's dot */
.wc-stages::after {
    content: ""; position: absolute;
    left: var(--wc-rail-left, 7%);
    width: var(--wc-fill-w, 0%);
    top: 11px; height: 5px;
    background: linear-gradient(90deg, #ffd76a, #f0a91b);
    border-radius: 5px;
    transition: width .25s ease;
}
.wc-stage {
    flex: 1 1 0; min-width: 0; text-align: center; position: relative; z-index: 1;
    color: rgba(255,255,255,.78); text-decoration: none; font-size: .95rem; font-weight: 600;
    padding: 0;                /* kill inherited nav a padding (8px 10px) */
    border-radius: 0;
}
/* kill the inherited nav a hover/active underline on the stage links */
.wc-stages a::after { content: none !important; display: none !important; }
.wc-stages a:hover { background: transparent; }
.wc-stage__label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
/* full labels on desktop, short codes on mobile (so nothing truncates) */
.wc-stage__label--short { display: none; }
.wc-stage .dot {
    display: block;            /* span is inline by default -> width/height ignored -> looked like an oval */
    width: 24px; height: 24px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #d9d9d9; border: 4px solid rgba(255,255,255,.6);
    margin: 0 auto 10px; transition: transform .15s ease;
}
.wc-stage:hover .dot { transform: scale(1.18); }
.wc-stage.is-current .dot { background: #ffd76a; border-color: #fff; box-shadow: 0 0 0 5px rgba(255,215,106,.35); }
.wc-stage.is-selected { color: #fff; font-weight: 800; }
.wc-stage.is-selected .dot { background: #fff; }

/* ---- Group sub-tabs (group stage only) ---- */
.wc-grouptabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 12px; }
.wc-grouptab {
    border: 1px solid #ddd; background: #f6f6f6; color: #333;
    border-radius: 999px; padding: 7px 16px; font-weight: 700; cursor: pointer;
    font-size: .9rem; line-height: 1;
}
.wc-grouptab:hover { border-color: #f0a91b; }
.wc-grouptab.active {
    background: linear-gradient(135deg, #ffd76a, #f0a91b);
    border-color: #f0a91b; color: #1a1300;
}

/* ---- Match list ---- */
.wc-group { margin-top: 14px; }
.wc-group__title {
    font-size: 1.05rem; font-weight: 800; margin: 14px 0 10px;
    padding-bottom: 6px; border-bottom: 2px solid #f0a91b;
}

/* date | home(name+logo) | center | away(logo+name) */
.wc-match {
    display: grid;
    grid-template-columns: 120px 1fr 72px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    background: #fff;
}
.wc-match:hover { border-color: #f0a91b; box-shadow: 0 2px 10px rgba(0,0,0,.06); }

.wc-match__time { color: #888; font-size: .85rem; }
.wc-match__home { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-weight: 600; text-align: right; }
.wc-match__away { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-weight: 600; }
.wc-match__logo { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.wc-match__center { text-align: center; font-weight: 800; color: #666; }
.wc-match__center.wc-match__live { color: #d11; }

.wc-empty { margin-top: 24px; text-align: center; color: #888; padding: 40px 0; }

/* Dark theme: cards + tabs follow the site's dark surface */
[data-theme="dark"] .wc-match { background: #1c1f26; border-color: #2c313b; }
[data-theme="dark"] .wc-match:hover { border-color: #f0a91b; }
[data-theme="dark"] .wc-grouptab { background: #20242c; border-color: #2c313b; color: #d6d6d6; }

@media (max-width: 700px) {
    .wc-hero { padding: 22px 18px 26px; }
    .wc-hero__title h1 { font-size: 1.35rem; }
    .wc-hero__title img { width: 48px; height: 48px; }
    .wc-countdown { font-size: 1rem; padding: 8px 12px; }
    .wc-stage { font-size: .8rem; }
    .wc-stage .dot { width: 18px; height: 18px; border-width: 3px; }
    .wc-stage__label--full { display: none; }
    .wc-stage__label--short { display: block; }
    .wc-match { grid-template-columns: 64px 1fr 56px 1fr; padding: 10px; gap: 6px; }
    .wc-match__time { font-size: .72rem; }
    .wc-match__logo { width: 20px; height: 20px; }
    .wc-match__home, .wc-match__away { font-size: .85rem; }
}