/* ============================================================
   style.css — MakeSomeCashOnline
   Brand overrides + components for bonus tracker UI.
   Loads after base.css.
============================================================ */

/* Brand palette — teal-green primary, warm yellow accent */
:root {
  --brand-primary: #0d9488;       /* teal-600 */
  --brand-primary-dark: #0f766e;  /* teal-700 */
  --brand-accent: #eab308;        /* yellow-500 */
  --brand-accent-dark: #ca8a04;   /* yellow-600 */
  --ink: #1a1a1a;
  --ink-muted: #555;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --bg-soft: #f8fafc;
  --bg-card: #ffffff;
  --bg-result: #ecfdf5;           /* emerald-50, money-positive */
  --bg-warn: #fffbeb;
  --positive: #047857;            /* emerald-700 */
  --negative: #b91c1c;            /* red-700 */
}

/* Brand overrides (replace base.css blue) */
a { color: var(--brand-primary); }
a:hover, a:focus { color: var(--brand-primary-dark); }
:focus-visible { outline-color: var(--brand-primary); }

input:focus, select:focus, textarea:focus {
  border-color: var(--brand-primary);
  outline-color: var(--brand-primary);
}

button, .btn {
  background: var(--brand-primary);
}
button:hover, .btn:hover, button:focus, .btn:focus {
  background: var(--brand-primary-dark);
}

.btn-accent {
  background: var(--brand-accent);
  color: #1a1a1a;
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--brand-accent-dark);
  color: #1a1a1a;
}

.btn-secondary {
  background: #fff;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--bg-result);
}

/* Header / nav */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0.875rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand:hover, .brand:focus { color: var(--brand-primary-dark); }
.brand-dot { color: var(--brand-accent); }

.site-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}
.site-nav a:hover, .site-nav a:focus {
  color: var(--brand-primary);
}

/* FTC disclosure — required above fold on every page (YMYL) */
.ftc-banner {
  background: var(--bg-warn);
  border-bottom: 1px solid #fde68a;
  padding: 0.625rem 0;
  font-size: 0.8125rem;
  color: #78350f;
  text-align: center;
}
.ftc-banner a {
  color: #78350f;
  font-weight: 600;
  text-decoration: underline;
}

/* Hero */
.hero {
  padding: 3rem 0 2rem;
  background: linear-gradient(180deg, var(--bg-result) 0%, #fff 100%);
}
.hero h1 {
  max-width: 800px;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hero .lede {
  max-width: 720px;
  font-size: 1.125rem;
  color: var(--ink-muted);
  margin-top: 0.5rem;
}
.hero .updated-stamp {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.625rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
@media (min-width: 768px) {
  .hero h1 { font-size: 2.75rem; }
}

/* Sections */
.section {
  padding: 2.5rem 0;
}
.section-tight {
  padding: 1.5rem 0;
}
.section-soft {
  background: var(--bg-soft);
}

/* Filter bar */
.filter-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .filter-bar {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: end;
  }
}
.filter-bar label {
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-bar select,
.filter-bar input {
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.filter-chip[aria-pressed="true"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.filter-chip:hover { border-color: var(--brand-primary); }

/* Bonus table */
.bonus-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.bonus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.bonus-table thead th {
  text-align: left;
  padding: 0.75rem 0.875rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.bonus-table thead th[aria-sort="ascending"]::after { content: " ▲"; color: var(--brand-primary); }
.bonus-table thead th[aria-sort="descending"]::after { content: " ▼"; color: var(--brand-primary); }
.bonus-table thead th.not-sortable { cursor: default; }
.bonus-table tbody td {
  padding: 0.875rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.bonus-table tbody tr:hover { background: var(--bg-soft); }
.bonus-table .program {
  font-weight: 700;
  color: var(--ink);
}
.bonus-table .program-sub {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 0.125rem;
}
.bonus-table .bonus-amount {
  font-weight: 700;
  color: var(--positive);
  white-space: nowrap;
}
.bonus-table .apr {
  font-weight: 700;
  white-space: nowrap;
}
.bonus-table .apr-good { color: var(--positive); }
.bonus-table .apr-meh { color: #a16207; }
.bonus-table .apr-bad { color: var(--negative); }
.bonus-table .cta-cell { white-space: nowrap; }
.bonus-table .cta-btn {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.875rem;
}
.bonus-table .cta-btn:hover, .bonus-table .cta-btn:focus { background: var(--brand-primary-dark); color: #fff; }

/* Category badges */
.cat-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cat-trading { background: #dbeafe; color: #1d4ed8; }
.cat-bank    { background: #d1fae5; color: #065f46; }
.cat-cashback{ background: #fef3c7; color: #92400e; }
.cat-crypto  { background: #ede9fe; color: #5b21b6; }
.cat-survey  { background: #fce7f3; color: #9d174d; }
.cat-gig     { background: #ffedd5; color: #9a3412; }

.results-meta {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.no-results {
  padding: 2rem;
  text-align: center;
  color: var(--ink-muted);
  background: #fff;
}

/* Effective-APR calculator widget */
.calc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  .calc-card { padding: 1.75rem; }
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
@media (min-width: 640px) {
  .calc-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.calc-result-block {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--bg-result);
  border: 1px solid #a7f3d0;
  border-radius: 6px;
}
.calc-result-block .apr-headline {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--positive);
  line-height: 1;
}
.calc-result-block .apr-sub {
  margin-top: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
.verdict {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 4px;
  font-weight: 600;
}
.verdict-good { background: #d1fae5; color: #065f46; }
.verdict-meh  { background: #fef3c7; color: #92400e; }
.verdict-bad  { background: #fee2e2; color: #991b1b; }

/* Honest-math panel */
.honest-math {
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-accent);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  color: var(--ink);
}
.honest-math strong { color: var(--brand-primary-dark); }

/* FAQ — extends base.css .faq */
.faq h2 { margin-bottom: 1rem; }

/* Affiliate disclosure callouts */
.disclosure-callout {
  background: var(--bg-warn);
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 0.875rem 1rem;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  color: #78350f;
}

/* Author byline (E-E-A-T signal) */
.byline {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0.75rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.byline strong { color: var(--ink); }

/* Utility */
.muted { color: var(--ink-muted); }
.small { font-size: 0.875rem; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }