/* ============================================================================
   public/refresh.css — 2026 BRAND REFRESH (public pages only)
   Visual alignment with the new homepage. No logic/markup/JS changes.
   Loaded AFTER theme.css; the public pages run in the light theme.
   Admin & scorer do NOT load this file, so they are unaffected.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

/* ---- Palette + type: match the homepage (Desjardins green / orange) ------- */
:root[data-theme="light"]{
  --brand:#0f5a2a; --brand-2:#2a9d4e; --brand-3:#127a37;
  --accent:#ff8c00; --accent-2:#ffa733;
  --bg:#f5f7f4; --bg-2:#eef1ec; --surface:#ffffff; --surface-2:#f6f8f5; --surface-3:#eef2ec;
  --line:#e3e8e3; --line-2:#d5ddd6;
  --text:#14201a; --text-dim:#3c4a42; --text-mut:#6b7a70;
  --font:'Barlow',system-ui,-apple-system,sans-serif;
  --r-sm:9px; --r-md:13px; --r-lg:18px;
}
body{font-family:var(--font)}

/* ---- Header: dark green, blur, thin border, soft shadow, real logo -------- */
.appbar{background:linear-gradient(90deg,#0a3f1d 0%,#0f5a2a 100%)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 8px 26px -16px rgba(0,0,0,.55)}
.appbar-inner{height:74px;gap:20px;position:relative}
/* brand text/logo removed from the header — menu is centered instead */
.appbar .brand{display:none}
.appbar .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.appbar .nav a{color:#eafff0;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.appbar .nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.appbar .nav a.active{background:rgba(255,255,255,.16);color:#fff}
.appbar .sync{color:#cfe9d5}
.appbar .sync.off .dot{background:#ffb4b4}
.appbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.appbar .btn.ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
/* one consistent light brand — hide the theme toggle */
.appbar button[aria-label="Thème"]{display:none}
@media(max-width:860px){ .appbar .b-logo{height:48px} }
@media(max-width:520px){ .appbar .b-logo{height:42px} }

/* ---- Mobile tab bar: match the header ------------------------------------- */
.tabbar{background:linear-gradient(0deg,#0a3f1d,#0f5a2a);border-top:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.tabbar a{color:#bfe0c7}
.tabbar a.active{color:#fff}

/* ---- Typography rhythm ---------------------------------------------------- */
.eyebrow{letter-spacing:.26em}
.sec-title,.display{letter-spacing:-.005em}

/* ---- Buttons: homepage language ------------------------------------------- */
.btn{border-radius:9px}
.btn.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#241400;border-color:var(--accent);box-shadow:0 6px 16px -9px var(--accent)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.accent{color:#241400}

/* ---- Cards: larger radius, lighter shadow, more air ----------------------- */
.card{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:0 12px 32px -20px rgba(18,40,25,.22)}
.card.hover:hover{transform:translateY(-3px);box-shadow:0 18px 42px -20px rgba(18,40,25,.28)}
.card.pad{padding:20px}
.stat{border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 26px -20px rgba(18,40,25,.2)}
.stat .s-num{font-family:var(--display)}
.match{border-radius:14px}
.match.hover:hover{box-shadow:0 14px 34px -20px rgba(18,40,25,.24)}
.news-item,.news-card{border-radius:14px}

/* ---- Tables: readability + subtle brand ----------------------------------- */
.table-wrap{border-radius:var(--r-lg)}
.tbl thead th{background:var(--surface-2);color:var(--brand);border-bottom:2px solid var(--brand);letter-spacing:.09em;padding:13px 14px}
.tbl tbody td{padding:14px 14px}
.tbl tbody tr:nth-child(even){background:#f4f7f2}
.tbl tbody tr:hover{background:#eaf3ea}
.tbl tbody tr.top1 .rank{color:var(--accent)}
.tbl .pts{color:var(--brand)}
.tbl .team-name a:hover{color:var(--brand)}
.qual-line td{border-bottom:2px dashed var(--accent)!important}
/* orange highlight for a selected/active row (used by any .sel state) */
.tbl tbody tr.sel,.tbl tbody tr[aria-selected="true"]{background:#fff4e6;box-shadow:inset 3px 0 0 var(--accent)}

/* ---- Category pills / tabs (schedule, standings, teams) ------------------- */
.cat-tab.active,.ct.active{background:var(--brand);border-color:var(--brand)}
.daypill.on,.quick button.active{background:var(--brand);border-color:var(--brand)}

/* ---- Subtle branded accents ---------------------------------------------- */
.day-head h3,.arena-h{position:relative}
.eyebrow::after{content:none}
hr.divider,.divider{background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ---- Motion: keep it very subtle ----------------------------------------- */
.reveal{animation-duration:.4s}
@media(prefers-reduced-motion:reduce){.reveal,.card.hover:hover{animation:none;transform:none}}