/*
 * Aulenders theme on Bootstrap 5.3
 * Brand (from legacy site): crimson #c10841 (logo), orange #f89406.
 * Contrast: white on crimson 9.7:1, dark text on orange 7.3:1 (WCAG AA).
 * Orange is never used as text/background with white text.
 */
:root {
  --brand-crimson: #c10841;
  --brand-crimson-dark: #9c0635;
  --brand-crimson-soft: #fbe9ef;
  --brand-orange: #f89406;
  --brand-orange-dark: #d97a00;
  --brand-orange-soft: #fff4e5;
  --brand-ink: #1e1e1e;
  --brand-muted: #555b61;
  --brand-surface: #f7f7f7;

  --bs-primary: var(--brand-crimson);
  --bs-primary-rgb: 193, 8, 65;
  --bs-body-color: var(--brand-ink);
  --bs-secondary-color: var(--brand-muted);
  --bs-link-color: var(--brand-crimson);
  --bs-link-color-rgb: 193, 8, 65;
  --bs-link-hover-color: var(--brand-crimson-dark);
  --bs-link-hover-color-rgb: 156, 6, 53;
  --bs-border-radius: .5rem;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.01em; font-weight: 700; }
.text-muted, .text-secondary { color: var(--brand-muted) !important; }

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-crimson);
  --bs-btn-border-color: var(--brand-crimson);
  --bs-btn-hover-bg: var(--brand-crimson-dark);
  --bs-btn-hover-border-color: var(--brand-crimson-dark);
  --bs-btn-active-bg: var(--brand-crimson-dark);
  --bs-btn-active-border-color: var(--brand-crimson-dark);
  --bs-btn-disabled-bg: var(--brand-crimson);
  --bs-btn-disabled-border-color: var(--brand-crimson);
  --bs-btn-focus-shadow-rgb: 193, 8, 65;
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-crimson);
  --bs-btn-border-color: var(--brand-crimson);
  --bs-btn-hover-bg: var(--brand-crimson);
  --bs-btn-hover-border-color: var(--brand-crimson);
  --bs-btn-active-bg: var(--brand-crimson-dark);
  --bs-btn-active-border-color: var(--brand-crimson-dark);
  --bs-btn-focus-shadow-rgb: 193, 8, 65;
  font-weight: 600;
}
.btn-accent {
  --bs-btn-color: var(--brand-ink);
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-hover-bg: var(--brand-orange-dark);
  --bs-btn-hover-border-color: var(--brand-orange-dark);
  --bs-btn-active-color: var(--brand-ink);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  --bs-btn-focus-shadow-rgb: 248, 148, 6;
  font-weight: 600;
}
.btn:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }

/* Header */
.site-logo { height: 44px; width: auto; }
.site-header .nav-link { color: var(--brand-ink); font-weight: 500; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--brand-crimson); }

/* Hero */
.hero {
  background:
    radial-gradient(60rem 30rem at 100% 0, var(--brand-crimson-soft), transparent 60%),
    radial-gradient(40rem 25rem at 0 100%, var(--brand-orange-soft), transparent 60%),
    #fff;
}
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; }
.hero h1 .accent { color: var(--brand-crimson); }
.hero .lead { color: var(--brand-muted); max-width: 36rem; }
.trust-list li { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; }
.trust-list i { color: var(--brand-crimson); }

/* Preview card in hero */
.preview-card { border: 0; box-shadow: 0 1rem 2.5rem rgba(30, 30, 30, .08); }
.preview-card .meta { font-size: .875rem; color: var(--brand-muted); }
.resp-card {
  background: var(--brand-surface);
  border-left: 4px solid var(--brand-orange);
  border-radius: .5rem;
}
.resp-badge {
  background: var(--brand-orange-soft);
  color: #7a4300;
  font-weight: 600;
  border: 1px solid #f5c98a;
}
.contact-hidden { color: var(--brand-muted); font-size: .875rem; }

/* Sections */
.section { padding: 4rem 0; }
.section-alt { background: var(--brand-surface); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700;
  color: var(--brand-crimson);
}
.step-num {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-crimson); color: #fff; font-weight: 700;
}
.feature-icon {
  width: 3rem; height: 3rem; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-crimson-soft); color: var(--brand-crimson); font-size: 1.4rem;
}

/* Comparison table */
.compare th[scope="col"]:last-child, .compare td:last-child { background: var(--brand-crimson-soft); }
.compare td:last-child { font-weight: 600; }
.compare .bi-check-circle-fill { color: var(--brand-crimson); }
.compare .bi-x-circle { color: var(--brand-muted); }

/* Step-by-step posting form */
.step { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
.step legend { float: none; }
.js-steps .step { display: none; margin-bottom: 0; }
.js-steps .step.active { display: block; animation: stepIn .18s ease-out; }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.choice-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid-1 { grid-template-columns: 1fr; }
.choice { padding: .85rem .75rem; border-radius: .75rem; font-weight: 500; text-align: center; line-height: 1.25;
  display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 3.25rem; }
.choice-sm .choice { padding: .5rem; min-height: 0; font-size: .875rem; }
.btn-check:checked + .choice { box-shadow: 0 0 0 .2rem rgba(193, 8, 65, .2); }
.step-progress .progress-bar { background-color: var(--brand-crimson); transition: width .25s ease; }
@media (min-width: 576px) { .choice-grid:not(.choice-grid-1):not(.choice-grid-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Filter chips: swipe on mobile, wrap on desktop */
.chip-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .btn { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 768px) { .chip-row { flex-wrap: wrap; overflow-x: visible; } }

/* Request cards */
.request-card { transition: box-shadow .15s, transform .15s; }
.request-card:hover { box-shadow: 0 .5rem 1.5rem rgba(30, 30, 30, .08); transform: translateY(-2px); }
.request-card .amount { color: var(--brand-crimson); font-weight: 700; font-size: 1.25rem; }

/* Advertiser band */
.advertiser-band { background: var(--brand-ink); color: #f1f1f1; }
.advertiser-band .price { color: var(--brand-orange); font-weight: 800; }

/* FAQ */
.accordion-button:not(.collapsed) { color: var(--brand-crimson); background: var(--brand-crimson-soft); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(193, 8, 65, .2); }

/* Account / auth forms */
.auth-wrap { max-width: 440px; margin: 3rem auto; }
.auth-card { border: 0; box-shadow: 0 .75rem 2rem rgba(30, 30, 30, .08); }
.code-input { font-size: 1.75rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.form-label { font-weight: 600; }

/* Footer */
.site-footer { background: #232323; color: #cfcfcf; }
.site-footer a { color: #e6e6e6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer hr { border-color: #444; }
.site-logo-footer { height: 40px; width: auto; }