/* ============================================================
   sanam-luang — DooFootball single-column long-form theme.
   SUIT Pascal-block class naming. Vanilla CSS. No utilities.
   Primary locale th-TH; ms-MY thin secondary.
   ============================================================ */

/* Self-hosted Thai fonts. Kanit (display, 300/500/700) +
   Sarabun (body, 400/700). Thai + Latin subsets only.
   Each woff2 is ~10KB — total ~85KB across all weights. */
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-thai-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-thai-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-thai-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/sarabun-thai-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/sarabun-thai-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/sarabun-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/sarabun-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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+FEFF, U+FFFD;
}

:root {
  /* Cool slate palette (per design axis 3) */
  --bg: #f1f5f9;
  --card: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --accent: #0ea5e9;
  --accent-deep: #0369a1;
  --rule: #cbd5e1;
  --warn: #f59e0b;

  /* Type stacks */
  --font-display: 'Kanit', 'IBM Plex Sans Thai', 'Noto Sans Thai', system-ui, sans-serif;
  --font-body: 'Sarabun', 'IBM Plex Sans Thai Looped', 'Noto Sans Thai', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Layout — single-column long-form (axis 1) */
  --col-main: 760px;
  --page-pad: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7; /* Thai needs slightly more leading than Latin */
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Thai-aware line breaking on narrow viewports.
   auto-phrase: Chromium 119+, Safari 17+. Falls back to default. */
body, p, h1, h2, h3 {
  word-break: auto-phrase;
  line-break: strict;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-deep); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 16px;
}
h1 { font-size: 42px; line-height: 1.15; font-weight: 700; }
h2 { font-size: 28px; line-height: 1.25; font-weight: 600; margin-top: 32px; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin-top: 24px; }

p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 24px; }
li { margin-bottom: 6px; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}

img { max-width: 100%; height: auto; }

/* ====== Huaduang (masthead) ====== */
.Huaduang {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.Huaduang-inner {
  max-width: var(--col-main);
  margin: 0 auto;
  padding: 18px var(--page-pad);
}
.Huaduang-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.Huaduang-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.Huaduang-title:hover { color: var(--accent-deep); }
.Huaduang-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  flex: 1 1 auto;
  text-align: right;
  min-width: 200px;
}
.Huaduang-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.Huaduang-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Huaduang-nav-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.Huaduang-nav-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.Huaduang-nav-linkCurrent { color: var(--accent-deep); border-bottom-color: var(--accent); }
.Huaduang-disclaimer {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.Huaduang-prakaht {
  margin: 12px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

/* ====== Hero (plain typographic) ====== */
.Hero {
  text-align: center;
  padding: 56px var(--page-pad) 32px;
  max-width: var(--col-main);
  margin: 0 auto;
}
.Hero-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.Hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}
.Hero-subtitle {
  font-family: var(--font-body);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.Hero-byline {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.Hero-rule {
  width: 80px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

/* ====== Body / Article (single-column long-form) ====== */
.Page-main {
  max-width: var(--col-main);
  margin: 0 auto;
  padding: 28px var(--page-pad) 64px;
}
.Article-header { margin-bottom: 28px; }
.Article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}
.Article-deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.Article-prose {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.Article-prose h2 { color: var(--ink); font-weight: 600; }
.Article-prose h3 { color: var(--ink); font-weight: 600; }
.Article-prose a { color: var(--accent); }
.Article-prose-legal { font-size: 15px; }

/* ====== Breadcrumb (thang-doen) ====== */
.Thang-doen {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.Thang-doen a { color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--rule); }
.Thang-doen a:hover { color: var(--accent-deep); }
.Thang-doen-sep { margin: 0 6px; color: var(--ink-3); }

/* ====== Byline (nakkhian) ====== */
.Byline {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.Byline-author { font-weight: 700; color: var(--ink-2); }

/* ====== Schedule (widget host) ====== */
.Schedule { margin: 36px 0; }
.Schedule-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.Taraang-bola { display: block; background: var(--card); border: 1px solid var(--rule); padding: 16px; border-radius: 0; }
.Taraang-bola-fallback h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.Taraang-bola-fixtures { list-style: none; margin: 0; padding: 0; }
.Taraang-bola-fixture { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--rule); font-size: 14px; }
.Taraang-bola-fixture time { font-family: var(--font-mono); color: var(--ink-3); }
.Taraang-bola-match { color: var(--ink); }
.Taraang-bola-league { color: var(--ink-3); font-size: 12px; }

/* ====== Competitions ====== */
.Competitions { margin: 36px 0; }
.Competitions-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.Competitions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.Competitions-link {
  display: block;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-family: var(--font-body);
}
.Competitions-link:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ====== Broadcaster pills ====== */
.Broadcasters { margin: 36px 0; }
.Broadcasters-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.Broadcasters-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.Broadcaster-pill {
  display: inline-block;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: 0;
}

/* ====== "More from the desk" ====== */
.More-from-desk { margin: 36px 0; }
.More-from-desk-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.More-from-desk-list { list-style: none; margin: 0; padding: 0; }
.More-from-desk-item { padding: 8px 0; border-bottom: 1px dotted var(--rule); font-size: 15px; }

/* ====== Panphan-time (last-updated stamp) ====== */
.Panphan-time {
  margin: 36px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* ====== Thaikan (footer) ====== */
.Thaikan {
  background: var(--card);
  border-top: 1px solid var(--rule);
  margin-top: 64px;
}
.Thaikan-inner {
  max-width: var(--col-main);
  margin: 0 auto;
  padding: 28px var(--page-pad);
}
.Thaikan-masthead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 10px;
}
.Prakaht {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
  line-height: 1.7;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.Thaikan-links {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}
.Thaikan-links a { color: var(--ink-2); text-decoration: none; }
.Thaikan-links a:hover { color: var(--accent-deep); }
.Thaikan-copy { font-size: 12px; color: var(--ink-3); margin: 0; }

/* ====== Body kind variants ====== */
.Body-home .Page-main { padding-top: 12px; }

/* ====== Responsive ====== */
@media (max-width: 640px) {
  h1, .Hero-title, .Article-title { font-size: 30px; }
  .Hero { padding: 32px var(--page-pad) 24px; }
  .Huaduang-tagline { text-align: left; }
  .Huaduang-disclaimer { display: none; }
}