/*
Theme Name: chronosito
Description: description
Version: 1.0
*/


/* ============================================
   1. CSS Variables & Reset
   ============================================ */
:root {
  --accent-primary: #1B4D3E;
  --accent-secondary: #C4A35A;
  --accent-hover: #164033;
  --gold-hover: #B8943A;
  --bg: #FAFBFC;
  --surface: #FFFFFF;
  --header-bg: #FFFFFF;
  --text-primary: #1A2332;
  --text-secondary: #5A6B7D;
  --border: #E2E6EB;
  --muted-bg: #F0F2F5;
  --divider: #D1D7DF;

  --h1: clamp(2rem, 4vw, 2.75rem);
  --h2: clamp(1.5rem, 3vw, 2rem);
  --h3: clamp(1.25rem, 2.5vw, 1.5rem);
  --h4: clamp(1.05rem, 2vw, 1.2rem);
  --body: clamp(1rem, 1.8vw, 1.125rem);
  --body-sm: 0.875rem;
  --caption: 0.8125rem;
  --mono: 0.9375rem;

  --lh-heading: 1.25;
  --lh-body: 1.7;
  --lh-mono: 1.5;

  --content-width: 740px;
  --content-wide: 960px;
  --section-gap: 3.5rem;

  --danger: #C0392B;
  --success: #27AE60;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Top accent bar */
body::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--accent-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ============================================
   2. General Typography
   ============================================ */
h1, h2, h3, h4 {
  font-family: 'Instrument Sans', sans-serif;
  line-height: var(--lh-heading);
  color: var(--text-primary);
  text-align: left;
}

h1 { overflow-wrap: break-word; font-weight: 700; font-size: var(--h1); }
h2 {
  font-weight: 700;
  font-size: var(--h2);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  scroll-margin-top: 2rem;
}
h3 {
  font-weight: 600;
  font-size: var(--h3);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 2rem;
}
h4 {
  font-weight: 600;
  font-size: var(--h4);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

p { margin-bottom: 1.5em; text-align: left; }
blockquote { margin-bottom: 1.5em; padding-left: 1.25rem; border-left: 3px solid var(--border); font-style: italic; color: var(--text-secondary); }
strong { font-weight: 600; }
em { font-style: italic; }

ul, ol { margin-bottom: 1.5em; padding-left: 1.5em; text-align: left; }
li { margin-bottom: 0.5em; }

figure { margin: 1.5em auto; }
figure img { display: block; max-width: 100%; height: auto; }
figcaption { text-align: center; font-size: var(--caption); color: var(--text-secondary); margin-top: 0.5rem; }

a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
a:hover { color: var(--accent-hover); }
a:focus { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.mono { font-family: 'JetBrains Mono', monospace; font-size: var(--mono); line-height: var(--lh-mono); }

/* ============================================
   3. Tables
   ============================================ */
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: var(--body-sm); }
thead { background: var(--accent-primary); color: #fff; }
thead th { font-family: 'Instrument Sans', sans-serif; font-weight: 600; padding: 0.75rem 1rem; text-align: left; }
tbody tr:nth-child(even) { background: var(--muted-bg); }
tbody td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); }
.group-table tbody tr.qualified { background: rgba(27,77,62,0.07); font-weight: 600; }

/* ============================================
   4. Layout — Sections
   ============================================ */
[data-content] {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

[data-content] + [data-content] {
  margin-top: var(--section-gap);
}

.table-wrap { overflow-x: auto; }

/* ============================================
   5. Header
   ============================================ */
.site-header {
  background: var(--header-bg);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-wide);
  margin: 0 auto;
}

.custom-logo {
  display: block;
  width: 200px;
  height: auto;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--caption);
}

.header-trust {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.header-date {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--muted-bg);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
}

/* ============================================
   6. Hero Section
   ============================================ */
[data-content="hero"] {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
}

[data-content="hero"] > * {
  position: relative;
  z-index: 1;
}

[data-content="hero"] h1 {
  text-align: center;
  max-width: var(--content-width);
  margin: 0.75rem auto 0;
  padding: 0 1.25rem;
}

.hero-byline {
  font-family: 'Instrument Sans', sans-serif;
  font-size: var(--caption);
  color: var(--text-secondary);
  text-align: center;
  margin-top: 0.75rem;
  letter-spacing: 0.02em;
}

.hero-desc {
  max-width: var(--content-width);
  margin: 1rem auto 0;
  color: var(--text-secondary);
  font-size: var(--body-sm);
  text-align: center;
  padding: 0 1.25rem;
  line-height: 1.6;
}

.hero-figure {
  margin: 1.5rem auto 0;
  max-width: var(--content-width);
  padding: 0 1.25rem;
}

.hero-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}

.hero-cta {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: var(--body-sm);
  color: var(--surface);
  background: var(--accent-primary);
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.hero-cta:hover { background: var(--accent-hover); color: var(--surface); transform: translateY(-1px); }
.hero-cta:focus { outline: 2px solid var(--accent-secondary); outline-offset: 2px; color: var(--surface); }

/* ============================================
   7. Components
   ============================================ */

/* --- TL;DR --- */
.tldr {
  background: var(--muted-bg);
  border-left: 4px solid var(--accent-secondary);
  padding: 1.25rem 1.5rem;
  border-radius: 0 8px 8px 0;
}

.tldr h2 {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--accent-primary);
}

.tldr ul { margin-bottom: 0; }
.tldr li { margin-bottom: 0.35em; font-size: var(--body-sm); }
.tldr p { font-size: var(--body-sm); }

/* --- Info Box --- */
.info-box {
  border-left: 4px solid var(--accent-primary);
  background: var(--muted-bg);
  padding: 1.25rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.info-box p { text-align: left; color: var(--text-primary); }
.info-box p:last-child { margin-bottom: 0; }

/* --- Callout --- */
.callout {
  background: var(--accent-primary);
  color: #fff;
  padding: 1.5rem 1.25rem;
  border-radius: 8px;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  box-shadow: 0 2px 8px rgba(27,77,62,0.15);
}
.callout p { text-align: left; color: #fff; }
.callout strong, .callout .gold { color: var(--accent-secondary); }
.callout p:last-child { margin-bottom: 0; }

/* --- Key Takeaway --- */
.key-takeaway {
  border-top: 2px solid var(--accent-secondary);
  padding-top: 1rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.key-takeaway p {
  text-align: left;
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}
.key-takeaway p:last-child { margin-bottom: 0; }

/* --- Fun Fact --- */
.fun-fact {
  position: relative;
  padding-left: 1.5rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.fun-fact::before {
  content: '\2014';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-secondary);
  font-weight: 700;
}
.fun-fact p {
  text-align: left;
  font-style: italic;
  color: var(--text-secondary);
  font-size: var(--body-sm);
}
.fun-fact p:last-child { margin-bottom: 0; }

/* --- Glossary Term --- */
.glossary-term {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 1em;
  margin-bottom: 1.5em;
}
.glossary-term strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--mono);
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-secondary);
  flex-shrink: 0;
}
.glossary-term p {
  text-align: left;
  color: var(--text-secondary);
  font-size: var(--body-sm);
  margin-bottom: 0;
}

/* --- Odds Display --- */
.odds-display {
  background: var(--text-primary);
  color: var(--accent-secondary);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--mono);
  line-height: var(--lh-mono);
}
.odds-display .label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: var(--caption);
  color: #8a94a0;
  display: block;
  margin-bottom: 0.25rem;
}
.odds-display .value { font-size: 1.25rem; font-weight: 500; }
.odds-display p { text-align: center; color: var(--accent-secondary); margin-bottom: 0; }

/* --- Match Card --- */
.match-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.match-card .teams {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: var(--body);
  color: var(--text-primary);
}
.match-card .meta { font-size: var(--caption); color: var(--text-secondary); }

/* --- Card Grid --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.card-grid > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.card-grid p { text-align: left; color: var(--text-primary); }
.card-grid p:last-child { margin-bottom: 0; }

/* --- Comparison --- */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.comparison > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.comparison p { text-align: left; color: var(--text-primary); }
.comparison h4 { margin-top: 0; }
.comparison p:last-child { margin-bottom: 0; }

/* --- Dos and Donts --- */
.dos-donts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.dos-donts > div { padding: 1rem; border-radius: 8px; }
.dos-donts > div:first-child { border-left: 4px solid var(--success); background: rgba(39,174,96,0.04); }
.dos-donts > div:last-child { border-left: 4px solid var(--danger); background: rgba(192,57,43,0.04); }
.dos-donts h4 { margin-top: 0; }
.dos-donts h4:first-child { color: var(--success); }
.dos-donts > div:last-child h4 { color: var(--danger); }
.dos-donts p { text-align: left; color: var(--text-primary); }
.dos-donts li { text-align: left; color: var(--text-primary); }

/* --- Pre-bet Checklist --- */
.pre-bet-checklist {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.pre-bet-checklist h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-primary);
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.pre-bet-checklist ul {
  list-style: none;
  padding-left: 1.5rem;
  border-left: 2px solid var(--border);
}
.pre-bet-checklist li {
  position: relative;
  padding-left: 0.25rem;
  margin-bottom: 0.75em;
  text-align: left;
  color: var(--text-primary);
}
.pre-bet-checklist li::before {
  content: '\2610';
  position: absolute;
  left: -1.5rem;
  color: var(--accent-primary);
  background: var(--bg);
  padding: 0 2px;
  font-size: 0.875rem;
}

/* --- At a Glance --- */
.at-a-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.at-a-glance > div {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
}
.at-a-glance > div:last-child { border-right: none; }
.at-a-glance h4 {
  font-size: clamp(1.1rem, 2vw, 1.375rem);
  margin-top: 0;
  margin-bottom: 0.25rem;
  color: var(--accent-primary);
}
.at-a-glance p { text-align: left; font-size: var(--body-sm); color: var(--text-secondary); margin-bottom: 0; }

/* --- Worked Example --- */
.worked-example {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.worked-example p { text-align: left; color: var(--text-primary); }
.worked-example .mono, .worked-example code {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--mono);
  color: var(--accent-primary);
}
.worked-example hr {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 1rem 0;
}
.worked-example .result {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--accent-secondary);
}
.worked-example p:last-child { margin-bottom: 0; }

/* --- Section Bridge --- */
.section-bridge {
  text-align: center;
  font-style: italic;
  color: var(--text-secondary);
  font-size: var(--body-sm);
  margin-top: 2rem;
  position: relative;
  padding: 0 2rem;
}
.section-bridge::before,
.section-bridge::after {
  content: '\00B7\00B7\00B7';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--divider);
  letter-spacing: 0.25em;
  font-style: normal;
}
.section-bridge::before { left: 0; }
.section-bridge::after { right: 0; }
.section-bridge p { margin-bottom: 0; }

/* --- Author Bio --- */
.author-bio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* --- Author Card --- */
.author-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.author-card .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.author-card .info { font-size: var(--body-sm); }
.author-card .info p { text-align: left; color: var(--text-primary); }
.author-card .name { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: var(--body); display: block; color: var(--text-primary); }
.author-card .role { color: var(--text-secondary); display: block; }

/* ============================================
   8. TOC (Vertical List)
   ============================================ */
[data-content="toc"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.toc-title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  cursor: pointer;
  list-style: none;
}
.toc-title::marker { content: ''; }
.toc-title::-webkit-details-marker { display: none; }
.toc-title::after { content: ' +'; font-weight: 400; }
details[open] > .toc-title::after { content: ' −'; }

.toc-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  column-count: 2;
  column-gap: 2rem;
}

.toc-list > li {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}

.toc-list > li > a {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: var(--body-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.toc-list > li > a:hover { color: var(--accent-primary); }

.toc-sublist {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.35rem;
  margin-bottom: 0;
}
.toc-sublist li { margin-bottom: 0.3rem; }
.toc-sublist a {
  font-size: var(--caption);
  color: var(--text-secondary);
  text-decoration: none;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
}
.toc-sublist a:hover { color: var(--accent-primary); }

/* ============================================
   9. FAQ
   ============================================ */
details {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

details summary {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: var(--body);
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
details summary:hover { color: var(--accent-primary); }
details summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--accent-primary);
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.2s ease;
}
details[open] summary::after { content: '\2212'; }
details summary::-webkit-details-marker { display: none; }

/* Animated reveal via ::details-content */
@supports selector(::details-content) {
  details { interpolate-size: allow-keywords; }
  ::details-content {
    opacity: 0;
    block-size: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, block-size 0.35s ease, content-visibility 0.35s ease allow-discrete;
  }
  details[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

/* Fallback */
@supports not selector(::details-content) {
  details[open] > *:not(summary) {
    animation: faqFadeIn 0.3s ease forwards;
  }
  @keyframes faqFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

details div { padding: 0 0 1rem; }
details div p { text-align: left; }
details div p:last-child { margin-bottom: 0; }

/* ============================================
   10. Back to Top / Start Reading
   ============================================ */
.btn-secondary {
  display: inline-block;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: var(--body-sm);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover { background: var(--accent-primary); color: #fff; }
.btn-secondary:focus { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }

.back-to-top-wrap {
  text-align: center;
  margin-top: var(--section-gap);
  padding-bottom: 2rem;
}

/* ============================================
   11. Footer
   ============================================ */
.site-footer {
  background: var(--text-primary);
  color: #B0B8C4;
  padding: 3rem 1.25rem 0;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.footer-grid {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.footer-col h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.footer-col p { color: #8a94a0; font-size: 0.75rem; margin-bottom: 0.75em; text-align: left; }
.footer-col ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.footer-col li { margin-bottom: 0.4em; }
.footer-col a { color: #B0B8C4; text-decoration: none; font-size: 0.75rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--accent-secondary); }

.footer-bottom {
  max-width: var(--content-wide);
  margin: 2rem auto 0;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 0.6875rem;
  color: #6b7785;
}

.footer-logo img {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 0.75rem;
  filter: brightness(10);
}

/* ============================================
   12. Responsive
   ============================================ */
@media (max-width: 768px) {
  [data-content] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .site-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .toc-list { column-count: 1; }

  .card-grid,
  .comparison,
  .dos-donts { grid-template-columns: 1fr; }

  .at-a-glance {
    grid-template-columns: 1fr;
  }
  .at-a-glance > div {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .at-a-glance > div:last-child { border-bottom: none; }

  .glossary-term { flex-direction: column; gap: 4px; }

  .match-card { flex-direction: column; align-items: flex-start; }

  .author-card { flex-direction: column; text-align: center; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .hero-cta { font-size: 0.8125rem; padding: 0.5rem 1.25rem; }

  .odds-display { font-size: var(--body-sm); }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .custom-logo { width: 160px; }
}


/* ============================================
   Content Images — Spámaður HM
   ============================================ */

.content-image {
  margin: 2rem 0;
  padding: 0;
}

.content-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .content-image {
    margin: 1.5rem 0;
  }
}