/* ── HitHard Guide Enhanced Theme ── */
/* Injected into all guides for a more vivid, engaging reading experience */

/* Body & page layout */
body { background: #eef1f8; }

.page {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 28px rgba(0,0,0,.08);
  margin: 24px auto;
  border-top: none !important;
}
.page + .page { border-top: none !important; }

/* Section label — pill badge instead of plain text */
.sec-label {
  display: inline-block;
  background: linear-gradient(135deg, #f5600a, #ff8c42);
  color: #fff !important;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 99px;
  margin-bottom: 12px;
}

/* Section accent line — two-tone gradient */
.sec-line {
  width: 52px;
  height: 4px;
  background: linear-gradient(90deg, #f5600a 40%, #22c55e 100%);
  border-radius: 3px;
  margin-bottom: 22px;
}

/* Cards — rotating accent colors per child */
.card {
  background: #fff;
  border-radius: 14px;
  border-left: none !important;
  border-top: 4px solid #f5600a;
  box-shadow: 0 3px 14px rgba(0,0,0,.09);
  padding: 20px 18px;
  transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.13); }
.card:nth-child(2n) { border-top-color: #22c55e; }
.card:nth-child(3n) { border-top-color: #3b82f6; }
.card:nth-child(4n) { border-top-color: #a855f7; }
.card:nth-child(5n) { border-top-color: #f59e0b; }
.card-title { font-size: 1rem; }

/* Callout boxes — vivid left border + tinted bg */
.callout {
  background: linear-gradient(135deg, #fff8f2, #fff0e6) !important;
  border-left: 5px solid #f5600a !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: 0 2px 10px rgba(245,96,10,.1);
}
.callout-head { color: #e04d00 !important; }
.callout-green,
.green-bar { background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important; border-left: 5px solid #22c55e !important; border-radius: 0 14px 14px 0 !important; }

/* Tip / Warn boxes */
.tip, .tip-box {
  background: linear-gradient(135deg, #eff8ff, #dbeafe) !important;
  border-left: 5px solid #3b82f6 !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.1);
}
.warn, .warn-card, .warning-box, .warning-bar {
  background: linear-gradient(135deg, #fff5f5, #fee2e2) !important;
  border-left: 5px solid #ef4444 !important;
  border-radius: 0 14px 14px 0 !important;
}
.warn strong, .warn-title { color: #dc2626 !important; }
.tip strong { color: #1d4ed8 !important; }

/* Drill boxes — green theme */
.drill-box, .drill-block, .drill-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border: 2px solid #22c55e !important;
  border-radius: 14px !important;
}
.drill-title, .drill-name { color: #15803d !important; }

/* Tables — gradient header + hover rows */
table { border-radius: 14px; overflow: hidden; box-shadow: 0 3px 14px rgba(0,0,0,.07); }
th {
  background: linear-gradient(135deg, #0d1b2a, #1a3a5c) !important;
  color: #fff !important;
  padding: 12px 14px;
  font-size: .83rem;
}
td { padding: 10px 14px; }
tr:nth-child(even) td { background: #f6f8ff !important; }
tr:hover td { background: #fff3ee !important; transition: background .12s; }

/* Highlight bar — richer gradient */
.hi-bar {
  background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(13,27,42,.2);
}
.hi-text strong { color: #f5600a !important; }

/* Step numbers — gradient circles */
.step-num {
  background: linear-gradient(135deg, #f5600a, #ff8c42) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: 700;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(245,96,10,.3);
}

/* Stat boxes — dark card with orange number */
.stat-box, .stat-tile {
  background: linear-gradient(135deg, #0d1b2a, #1a3a5c) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 14px rgba(13,27,42,.2);
}
.stat-n, .stat-box-n, .stat-tile-n { color: #f5600a !important; }
.stat-l, .stat-box-l, .stat-tile-l { color: rgba(255,255,255,.5) !important; }

/* Checklist — green ticks */
ul.check li::before { color: #22c55e !important; font-size: 1rem; font-weight: 800; }
ul.check li { border-bottom-color: #f0f4f8 !important; }

/* Phase blocks */
.phase-block { border-radius: 14px !important; overflow: hidden; box-shadow: 0 3px 14px rgba(0,0,0,.07); }
.phase-header { background: linear-gradient(135deg, #0d1b2a, #1a3a5c) !important; }

/* Timeline rows */
.timeline-head { background: linear-gradient(135deg, #f5600a, #ff8c42) !important; color: #fff; border-radius: 8px; padding: 10px 14px; }

/* TOC styling */
.toc-num { color: #f5600a !important; font-weight: 700; }
.toc-item { border-bottom: 1px dashed #e2e8f0; padding: 8px 0; }
.toc-item:hover .toc-name { color: #f5600a; }

/* Supplement cards */
.supp-card { border-radius: 14px !important; border-width: 2px !important; }
.supp-card:nth-child(odd) { border-color: #f5600a !important; }
.supp-card:nth-child(even) { border-color: #22c55e !important; }
.supp-dose { color: #f5600a !important; }

/* Verdict badges */
.supp-verdict.verdict-works { background: #dcfce7 !important; color: #15803d !important; border-radius: 99px; padding: 2px 10px; font-size: .68rem; font-weight: 700; }
.supp-verdict.verdict-waste { background: #fef9c3 !important; color: #a16207 !important; border-radius: 99px; padding: 2px 10px; font-size: .68rem; font-weight: 700; }
.supp-verdict.verdict-risky { background: #fee2e2 !important; color: #dc2626 !important; border-radius: 99px; padding: 2px 10px; font-size: .68rem; font-weight: 700; }

/* Dot lists — color by modifier */
.dot-list.green li::marker { color: #22c55e; }
.dot-list.blue li::marker { color: #3b82f6; }
.dot-list.red li::marker { color: #ef4444; }
.dot-list.purple li::marker { color: #a855f7; }
.dot-list.teal li::marker { color: #14b8a6; }
.dot-list.sky li::marker { color: #38bdf8; }
.dot-list.pink li::marker { color: #ec4899; }

/* Two-col boxes */
.compare-box, .vs-block { border-radius: 14px !important; overflow: hidden; }
.vs-head { background: linear-gradient(135deg, #0d1b2a, #1a3a5c) !important; color: #fff !important; }

/* Reframe blocks */
.reframe-from { background: #fee2e2 !important; border-radius: 10px; padding: 12px 16px; }
.reframe-to { background: #dcfce7 !important; border-radius: 10px; padding: 12px 16px; }
.reframe-arrow { color: #f5600a; font-size: 1.4rem; text-align: center; }

/* Disclaimer box */
.disclaimer-box {
  background: linear-gradient(135deg, #fff8f2, #fff0e6) !important;
  border: 2px solid #f5600a !important;
  border-radius: 14px !important;
}
.disclaimer-head { color: #f5600a !important; }

/* Journal prompts */
.journal-prompt { background: linear-gradient(135deg, #f0f9ff, #dbeafe) !important; border-left: 4px solid #3b82f6 !important; border-radius: 0 12px 12px 0 !important; padding: 14px 18px; }
.jp-label { color: #2563eb !important; font-weight: 700; }

/* Week / month cards */
.week-block, .month-card, .day-card { border-radius: 12px !important; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.week-label, .day-badge { background: linear-gradient(135deg, #f5600a, #ff8c42) !important; color: #fff !important; border-radius: 8px; padding: 4px 10px; font-size: .72rem; font-weight: 700; }

/* Protocol box */
.protocol-box { border-radius: 14px !important; overflow: hidden; }
.protocol-label { background: linear-gradient(135deg, #0d1b2a, #1a3a5c) !important; color: #fff !important; }

/* Script blocks */
.script-block { border-radius: 12px; overflow: hidden; }
.script-trigger { background: #fee2e2 !important; border-radius: 10px; padding: 10px 14px; }
.script-response { background: #dcfce7 !important; border-radius: 10px; padding: 10px 14px; }

/* Upsell / CTA boxes */
.upsell-box, .cta-section, .cta-inner { border-radius: 16px !important; }

/* Intro boxes */
.intro-box, .intro-card { border-radius: 14px !important; box-shadow: 0 3px 14px rgba(0,0,0,.07); }

/* Hi-bar variations */
.green-bar {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border: 2px solid #22c55e !important;
  border-radius: 12px !important;
  padding: 16px 20px;
}

/* Doc footer */
.doc-footer {
  background: #fff;
  border-top: 3px solid #f5600a !important;
  border-radius: 0 0 18px 18px;
  max-width: 800px;
  margin: 0 auto 32px;
}
.doc-footer strong { color: #f5600a !important; }

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f5600a !important;
  font-weight: 600;
  font-size: .8rem;
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover { text-decoration: underline; }

/* Checklist page styling */
.checklist-grid { gap: 16px; }
.cl-box { border-radius: 14px !important; box-shadow: 0 3px 14px rgba(0,0,0,.07); }
.cl-item::before { color: #22c55e !important; }

/* Sticky bar — already dark, just polish */
.buy-bar, .sticky-bar {
  background: linear-gradient(135deg, #0a1520 0%, #0d1b2a 100%) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35) !important;
}
.buy-bar a, .sticky-btn, .buy-bar-btn {
  background: linear-gradient(135deg, #f5600a, #ff8c42) !important;
  border-radius: 99px !important;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(245,96,10,.4);
}
.buy-bar-price, .sticky-bar-price { color: #f5600a !important; }

/* Print overrides — keep clean for PDF */
@media print {
  body { background: #fff !important; }
  .page { border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
  .doc-footer { border-radius: 0 !important; }
  .buy-bar, .sticky-bar { display: none !important; }
}

/* Mobile polish */
@media (max-width: 640px) {
  .page { margin: 10px !important; padding: 24px 18px !important; border-radius: 12px !important; }
  .card-grid { grid-template-columns: 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; }
}

/* ── Mobile input zoom guard ──────────────────────────────────
   Applies to every field in every guide, including lead-capture forms
   written inline in individual guide files. iOS Safari zooms the page
   on focus below 16px and does not zoom back out. */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="search"],
  input:not([type]), select, textarea {
    font-size: 16px !important;
  }
}

/* ---- Table of contents (canonical layout, shared by all guides) ---- */
.toc-page { padding: 52px 56px; max-width: 780px; margin: 0 auto; }
.toc-title { font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 700; color: #0d1b2a; margin-bottom: 6px; }
.toc-line { width: 40px; height: 3px; background: #f5600a; border-radius: 2px; margin-bottom: 28px; }
.toc-name { font-family: 'Oswald', sans-serif; font-size: .95rem; font-weight: 600; color: #0d1b2a; flex: 1; }
.toc-desc { font-size: .78rem; color: #718096; margin-top: 1px; }
.toc-num { font-family: 'Oswald', sans-serif; font-size: 1rem; width: 28px; flex-shrink: 0; }
.toc-item { display: flex; align-items: center; gap: 14px; }
@media (max-width: 600px) { .toc-page { padding: 32px 20px; } }