/* Eventra.Run brand layer (phase 1). Loaded AFTER styles.css.
   Source: Figma "EventraRun.com" brand page (colours node 24:83, typography 24:85).
   Telegram's own theme still drives backgrounds, cards and text (so dark mode keeps working);
   the brand drives header, buttons, links, chips and accents.

   Contrast rules (measured, WCAG ratios):
   - Light mode: Deep Blue on white 13.1 (text, links, buttons with white text 13.1).
     Orange on white is only 2.8 and Sky Blue on white 2.7 -> never used as text or icon colour on light surfaces;
     Orange is used as a FILL with Deep Blue text (4.6) or on Deep Blue.
   - Dark mode: Sky Blue on #212121 is 5.9 and Orange on #212121 is 5.7 -> allowed as text/accent;
     buttons are Sky Blue with dark text (5.9) because white on Sky Blue is only 2.7. */

@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans Khmer'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/noto-sans-khmer-khmer-400-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Khmer'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/noto-sans-khmer-khmer-500-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Khmer'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/noto-sans-khmer-khmer-600-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Khmer'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/noto-sans-khmer-khmer-700-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }

:root {
  --brand-deep: #0B2D6B;
  --brand-orange: #FF6B3D;
  --brand-sky: #00A3FF;
  --brand-light: #F4F6FA;
  --brand-charcoal: #1F2937;

  /* accent used for links, active chips, prices (light mode: Deep Blue) */
  --accent: var(--brand-deep);
  --accent-text: #ffffff;           /* text on an accent fill */
  --fill-orange: var(--brand-orange);
  --fill-orange-text: var(--brand-deep);

  /* brand overrides the Telegram link/button colours (surfaces and text stay Telegram's) */
  --tg-link: var(--accent);
  --tg-button: var(--accent);
  --tg-button-text: var(--accent-text);
  --tg-secondary-button: color-mix(in srgb, var(--brand-deep) 10%, var(--tg-card));
  --tg-secondary-button-text: var(--brand-deep);
  --font: 'Poppins', 'Noto Sans Khmer', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --tg-header-bg: var(--brand-deep);
}

/* dark mode: browser dark, or Telegram dark (class set by app.js) */
@media (prefers-color-scheme: dark) {
  :root:not(.tg) { --tg-hint: #a3a3a9; --accent: var(--brand-sky); --accent-text: #1a1a1a; --fill-orange-text: #1a1a1a;
    --tg-link: var(--brand-sky); --tg-button: var(--brand-sky); --tg-button-text: #1a1a1a;
    --tg-secondary-button: #12354f; --tg-secondary-button-text: var(--brand-sky); --tg-header-bg: #0a1e45; }
}
:root.tg-dark { --accent: var(--brand-sky); --accent-text: #1a1a1a; --fill-orange-text: #1a1a1a;
  --tg-link: var(--brand-sky); --tg-button: var(--brand-sky); --tg-button-text: #1a1a1a;
  --tg-secondary-button: color-mix(in srgb, var(--brand-sky) 18%, var(--tg-card)); --tg-secondary-button-text: var(--brand-sky); --tg-header-bg: #0a1e45; }

html[lang="km"] body, .khmer { font-family: 'Noto Sans Khmer', 'Poppins', system-ui, sans-serif; }
html[lang="km"] body { line-height: 1.55; }   /* Khmer stacked marks need more room */

/* Header: brand bar with the white wordmark */
.dhdr { background: var(--tg-header-bg); border-bottom: 0; color: #fff; }
.dhdr .stats { color: rgba(255,255,255,.82); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.wordmark .logo { width: 34px; height: 28px; flex-shrink: 0; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px 3px; box-sizing: border-box; }  /* white tile: the navy shoe needs a light ground on the Deep Blue header */
.wordmark .a { color: #fff; } .wordmark .b { color: var(--brand-orange); }  /* logotype: exempt from text contrast, 5.9 on the header anyway */
.langtoggle { background: rgba(255,255,255,.14); }
.langtoggle span { color: rgba(255,255,255,.85); }
.langtoggle span.on { background: #fff; color: var(--brand-deep); }
.dhdr .search-bar { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.dhdr .search-bar input { color: #fff; } .dhdr .search-bar input::placeholder { color: rgba(255,255,255,.75); }
.dhdr .pill-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
.dhdr .pill-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--brand-deep); }
.dhdr .pill-chip .count { background: var(--brand-orange); color: var(--brand-deep); }

/* Browser-only top bar */
.topbar { background: var(--tg-header-bg); border-bottom: 0; }
.topbar .back, .topbar .brand { color: #fff; }

/* Accents */
.pill-chip[aria-pressed="true"] { color: var(--accent-text); }
.langtoggle span.on { color: var(--brand-deep); }
.rl-price, .eb-price .now { color: var(--accent); }
.price-tier.active { border-left-color: var(--brand-orange); }
.segment[aria-pressed="true"] { color: var(--tg-text); box-shadow: inset 0 -2px 0 var(--brand-orange), 0 1px 3px rgba(0,0,0,.12); }
.main-button { background: var(--tg-button); color: var(--tg-button-text); border-radius: 12px; }
.fill-orange, .eb-img .badge.hot { background: var(--fill-orange); color: var(--fill-orange-text); }
.tg-switch[aria-checked="true"] { background: var(--accent); }
.range-box input { accent-color: var(--accent); }
:focus-visible { outline-color: var(--accent); }
.noimg { background: linear-gradient(135deg, var(--brand-deep), color-mix(in srgb, var(--brand-sky) 55%, var(--brand-deep))); color: #fff; }
.noimg .ico { opacity: .9; }

/* ---------- brand icon set (replaces emoji): navy outline, orange accent ---------- */
:root { --ic: var(--brand-deep); }
@media (prefers-color-scheme: dark) { :root:not(.tg) { --ic: #ffffff; } }
:root.tg-dark { --ic: #ffffff; }
.bi { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--ic); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.bi .fo { fill: var(--brand-orange); stroke: var(--brand-orange); }          /* orange fill (pin, header, medal) */
.bi .wh { fill: #fff; stroke: none; }                                       /* white hole in the pin / medal */
.bi .ow { stroke: var(--brand-orange); }                                    /* orange accent stroke */
.bi .dot { fill: var(--ic); stroke: none; } .bi .dot.ac { fill: var(--brand-orange); }
.inset-row .emo { display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
.cat-stats .e { display: flex; justify-content: center; font-size: 0; margin-bottom: 4px; }
.cat-stats .e .bi { width: 24px; height: 24px; }
.race-kit-item .e { display: flex; justify-content: center; font-size: 0; }
.race-kit-item .e .bi { width: 26px; height: 26px; }
.cicon .bi { width: 22px; height: 22px; }
.rl-place { display: flex; align-items: center; gap: 4px; }
.rl-place .bi { width: 14px; height: 14px; }

/* ---------- language toggle: active = orange, inactive = white on the Deep Blue header ---------- */
.langtoggle { background: rgba(255,255,255,.16); padding: 2px; border-radius: 10px; gap: 2px; }
.langtoggle span { color: #fff; border-radius: 8px; padding: 5px 11px; font-weight: 600; transition: background .15s, color .15s; }
.langtoggle span.on { background: var(--brand-orange); color: var(--brand-deep); font-weight: 700; }

/* ---------- status / type labels ---------- */
.badge { font-weight: 600; letter-spacing: .1px; }
.badge-open { background: var(--brand-deep); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }          /* Open: Deep Blue fill, white text (13:1) */
.badge-closed { background: var(--brand-orange); color: var(--brand-deep); }                                  /* Closed: orange fill, Deep Blue text (4.6) */
.eb-img .badge.urgent { background: var(--brand-orange); color: #fff; font-weight: 700; }                       /* Ends today: orange fill, white text (brand request; 2.8:1, bold) */
.badge-urgency { background: var(--brand-charcoal); color: #fff; }                                           /* Sold out / Postponed / Cancelled */
.badge-blue { background: color-mix(in srgb, var(--brand-sky) 16%, var(--tg-card)); color: var(--brand-deep); } /* Virtual, type, Coming soon */
.badge-grey { background: var(--tg-secondary-bg); color: var(--tg-hint); }                                  /* Closed, Finished, edition */
:root.tg-dark .badge-urgency { background: #374151; }
:root.tg-dark .badge-blue { background: color-mix(in srgb, var(--brand-sky) 24%, var(--tg-card)); color: #bfe6ff; }
@media (prefers-color-scheme: dark) {
  :root:not(.tg) .badge-urgency { background: #374151; }
  :root:not(.tg) .badge-blue { background: color-mix(in srgb, var(--brand-sky) 24%, var(--tg-card)); color: #bfe6ff; }
}

/* off-brand brown (#a8420a) -> Deep Blue on light; orange is allowed as text only on dark surfaces */
.sec-title.urgent, .date-block-month { color: var(--accent); }
:root.tg-dark .sec-title.urgent, :root.tg-dark .date-block-month { color: var(--brand-orange); }
@media (prefers-color-scheme: dark) { :root:not(.tg) .sec-title.urgent, :root:not(.tg) .date-block-month { color: var(--brand-orange); } }