/* ════════════════════════════════════════════════════════════════════
   BLACKJACK ODDS TRAINER — content pages (chart, odds, guides)
   Builds on styles.css design tokens.
   ════════════════════════════════════════════════════════════════════ */

body.page { display: block; }
/* neutralize the app's main-grid/flex layout on content pages */
body.page main {
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.page .top { position: sticky; }
.page .brand { text-decoration: none; color: inherit; }

.page-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-nav a {
  color: var(--cream-dim); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 7px 11px; border-radius: 9px; transition: all .15s;
}
.page-nav a:hover { color: var(--gold-bright); background: rgba(201,165,87,.08); }
.page-nav a.active { color: var(--gold-bright); }
.page-nav .nav-cta {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--ink); font-family: var(--font-display); font-weight: 700;
}
.page-nav .nav-cta:hover {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  filter: brightness(1.08);
}

body.page main.content { max-width: 880px !important; margin: 0 auto; padding: clamp(18px, 4vw, 40px) clamp(14px, 4vw, 28px) 40px !important; }
body.page main.content-wide { max-width: 1020px !important; }
.content { max-width: 880px; margin: 0 auto; }

/* article typography */
.eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.content h1 {
  font-family: var(--font-display); font-weight: 800; line-height: 1.12;
  font-size: clamp(28px, 5.4vw, 42px); margin: 10px 0 14px; color: var(--cream);
}
.content h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3.6vw, 26px);
  margin: 38px 0 12px; color: var(--gold-bright);
}
.content h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 24px 0 8px; color: var(--cream); }
.content p, .content li { font-size: 16px; line-height: 1.65; color: var(--cream-dim); }
.content p { margin: 0 0 14px; }
.content ul, .content ol { margin: 0 0 16px 22px; }
.content li { margin-bottom: 7px; }
.content strong, .content b { color: var(--cream); }
.content a { color: var(--gold-bright); }
.lead { font-size: 18px; color: var(--cream); }

/* the answer-first box */
.answer-box {
  background: linear-gradient(90deg, rgba(201,165,87,.14), rgba(201,165,87,.04));
  border: 1px solid rgba(201,165,87,.35); border-left: 4px solid var(--gold);
  border-radius: 12px; padding: 16px 18px; margin: 20px 0 26px;
}
.answer-box .answer-label { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); font-weight: 800; display: block; margin-bottom: 6px; }
.answer-box p { margin: 0; font-size: 17px; color: var(--cream); }

/* data tables */
.data-table-wrap { overflow-x: auto; margin: 18px 0 24px; border-radius: 12px; border: 1px solid rgba(201,165,87,.25); }
table.data {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  background: var(--bg-2); min-width: 480px;
}
table.data th {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(201,165,87,.3);
  background: rgba(201,165,87,.07);
}
table.data td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--cream-dim); }
table.data tr:last-child td { border-bottom: none; }
table.data td:first-child, table.data th:first-child { font-weight: 700; color: var(--cream); }
table.data .num { font-family: var(--font-mono); }
table.data .hi { color: var(--gold-bright); font-weight: 700; }
table.data .good { color: var(--green-pos); }
table.data .bad { color: var(--red-neg); }

/* inline bar viz inside tables */
.bar-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.bar-track { flex: 1; height: 10px; background: rgba(255,255,255,.07); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #8c3a32, var(--red-neg)); }
.bar-fill.gold { background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.bar-val { font-family: var(--font-mono); font-weight: 600; color: var(--cream); min-width: 52px; text-align: right; }

/* strategy chart blocks (reuses .chart styles from styles.css) */
.chart-block { margin: 22px 0; }
.chart-block h3 { margin-top: 0; }
.chart-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(201,165,87,.25); background: var(--bg-2); padding: 14px; }
.chart-scroll .chart { min-width: 420px; }
.chart-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.toggle-group { display: flex; border: 1px solid rgba(201,165,87,.4); border-radius: 10px; overflow: hidden; }
.toggle-group button {
  padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--cream-dim);
  background: transparent; transition: all .15s;
}
.toggle-group button.active { background: rgba(201,165,87,.18); color: var(--gold-bright); }
.print-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; font-size: 13px; font-weight: 700; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18); color: var(--cream-dim); transition: all .15s;
}
.print-btn:hover { color: var(--gold-bright); border-color: rgba(201,165,87,.5); }

/* CTA banner */
.cta-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: radial-gradient(120% 120% at 50% 0%, var(--felt) 0%, var(--felt-deep) 90%);
  border: 1px solid rgba(201,165,87,.4); border-radius: 16px;
  padding: 20px 22px; margin: 34px 0;
}
.cta-banner .cta-text h3 { margin: 0 0 4px; font-family: var(--font-display); color: var(--cream); font-size: 19px; }
.cta-banner .cta-text p { margin: 0; font-size: 14px; }
.cta-banner .deal-btn { white-space: nowrap; text-decoration: none; display: inline-block; }
/* .content a turns links gold — but gold buttons need their dark ink text back */
.content a.deal-btn, .cta-banner a.deal-btn { color: var(--ink); }

/* FAQ */
.faq { margin: 20px 0; }
.faq details {
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 0 18px; margin-bottom: 10px; background: var(--bg-2);
}
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--cream); font-size: 15.5px;
  padding: 15px 0; list-style: none; position: relative; padding-right: 28px;
}
.faq summary::after { content: '+'; position: absolute; right: 2px; top: 12px; font-size: 20px; color: var(--gold); }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding-bottom: 15px; margin: 0; font-size: 14.5px; }

/* related links */
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
.related a {
  display: block; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: var(--bg-2); border: 1px solid rgba(255,255,255,.09); transition: border-color .15s;
}
.related a:hover { border-color: rgba(201,165,87,.5); }
.related a b { display: block; color: var(--cream); font-size: 14.5px; margin-bottom: 3px; }
.related a span { font-size: 12.5px; color: var(--cream-dim); }

/* footer */
.site-footer {
  border-top: 1px solid rgba(201,165,87,.2); margin-top: 30px;
  padding: 26px clamp(14px, 4vw, 28px) 34px;
}
.footer-inner { max-width: 880px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
.footer-col h4 { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.footer-col a { display: block; color: var(--cream-dim); text-decoration: none; font-size: 13.5px; margin-bottom: 7px; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-note { width: 100%; font-size: 12px; color: rgba(244,237,219,.45); margin-top: 6px; }

/* homepage SEO section */
.home-content { grid-column: 1 / -1; margin-top: 26px; }
.home-content .inner { max-width: 880px; margin: 0 auto; }

/* ── print: the casino cheat sheet ── */
@media print {
  @page { margin: 10mm; }
  body { background: #fff !important; color: #000 !important; }
  body::after { display: none !important; }
  .top, .page-nav, .chart-controls, .cta-banner, .faq, .site-footer, .no-print, .related { display: none !important; }
  .content { padding: 0; max-width: none; }
  .content h1 { color: #000; font-size: 19pt; margin: 0 0 4pt; }
  .content h2, .content h3 { color: #000; margin: 8pt 0 4pt; }
  .content p, .content li { color: #222; font-size: 9.5pt; line-height: 1.4; }
  .print-only { display: block !important; }
  .chart-scroll { border: none; background: none; padding: 0; overflow: visible; }
  .chart-block { margin: 6pt 0; break-inside: avoid; }
  .chart, table.data { min-width: 0 !important; }
  .chart th { color: #000 !important; }
  .chart td, .lg, .count-chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .chart td { font-size: 8.5pt; padding: 3pt 2pt; }
  .chart-legend { display: flex !important; color: #000 !important; margin-top: 6pt; }
  .chart-legend span { color: #222 !important; font-size: 8pt; }
  .data-table-wrap { border: 1px solid #999; }
  table.data { background: #fff; }
  table.data th { color: #000; background: #eee; border-color: #999; }
  table.data td { color: #222; border-color: #ddd; }
  table.data td:first-child { color: #000; }
  .bar-track { background: #eee; }
  .bar-val { color: #000; }
}
.print-only { display: none; }

@media (max-width: 560px) {
  .page-nav a { font-size: 12px; padding: 6px 8px; }
}