/* ============================================================
   Alliant Restoration & Construction Group
   Theme: ThePriceCo "Luxury Minimalist" visual language —
   Georgia serif + Arial UI, gold (#c9a646) accents —
   adapted LIGHTER / less-black: cream-dominant surfaces,
   charcoal text, soft-charcoal (not pure black) dark bands.
   ============================================================ */

:root {
  --paper:      #f3f0e8;   /* warm cream — dominant background */
  --paper-dark: #ece8dd;   /* alt cream section */
  --white:      #ffffff;   /* cards */
  --ink:        #1f242b;   /* charcoal headings/text */
  --ink-soft:   #5b5f66;   /* muted body */
  --gold:       #c9a646;   /* brand gold accent */
  --gold-deep:  #9c7a2a;   /* gold for small text/links on light (contrast) */
  --gold-light: #e8c85c;
  --char:       #1e252d;   /* soft charcoal — dark nav/band/footer (NOT black) */
  --char-deep:  #161a20;
  --border:     rgba(31,36,43,.12);
  --border-gold:rgba(201,166,70,.45);
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
}

/* Georgia serif as the default "ThePriceCo feel"; Arial for UI labels */
.font-serif { font-family: Georgia, Cambria, "Times New Roman", serif; }
.font-ui    { font-family: Arial, system-ui, -apple-system, sans-serif; }

/* ── Kicker / eyebrow (Arial, uppercase, gold) ─────────────────────── */
.kicker {
  font-family: Arial, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-block;
}
.kicker-on-dark { color: var(--gold); }

/* ── Nav ───────────────────────────────────────────────────────────── */
#navbar { transition: background-color .3s ease, box-shadow .3s ease; }
.nav-scrolled {
  background-color: rgba(30,37,45,0.98) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.22);
}
.nav-active { color: var(--gold) !important; }

/* ── Gold underline accent ─────────────────────────────────────────── */
.gold-underline::after {
  content: ''; display: block; width: 56px; height: 2px;
  background: var(--gold); margin-top: 14px;
}
.gold-underline-center::after {
  content: ''; display: block; width: 56px; height: 2px;
  background: var(--gold); margin: 14px auto 0;
}

/* ── Page hero (inner pages) — light cream banner ──────────────────── */
.page-hero {
  background-color: var(--paper-dark);
  background-image: radial-gradient(ellipse at 80% 20%, rgba(201,166,70,0.10) 0%, transparent 55%);
  border-bottom: 1px solid var(--border);
}

/* Home hero — cream with subtle gold wash */
.hero-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 75% 35%, rgba(201,166,70,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 12% 90%, rgba(201,166,70,0.06) 0%, transparent 50%);
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(31,36,43,0.10);
  border-color: var(--border-gold);
}

/* Brand card (three-brand marketing) */
.brand-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  transition: transform .2s ease, box-shadow .2s ease;
}
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(31,36,43,0.10); }
.brand-card.is-current { background: var(--char); border-top-color: var(--gold-light); }

/* Vendor network */
.vendor-category {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.vendor-category-line {
  display: block;
  width: 38px;
  height: 2px;
  background: var(--gold);
}
.vendor-category h3 {
  font-family: Arial, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.vendor-card {
  display: flex;
  min-height: 214px;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--paper);
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vendor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(31,36,43,0.10);
  border-color: var(--border-gold);
}
.vendor-card.needs-review {
  border-top-color: var(--char);
}
.vendor-card h4 {
  font-family: Arial, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.vendor-card p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.vendor-meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-family: Arial, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}
.vendor-status {
  align-self: flex-start;
  border-radius: 999px;
  padding: 5px 9px;
  font-family: Arial, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vendor-status.verified {
  background: rgba(201,166,70,.16);
  color: var(--gold-deep);
}
.vendor-status.review {
  background: rgba(30,37,45,.10);
  color: var(--char);
}

/* ── Buttons (Arial, uppercase, tracked) ───────────────────────────── */
.btn-primary {
  font-family: Arial, system-ui, sans-serif;
  background-color: var(--gold);
  color: var(--char);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: background-color .2s ease, transform .15s ease;
}
.btn-primary:hover { background-color: var(--gold-light); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-gold {
  font-family: Arial, system-ui, sans-serif;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.btn-outline-gold:hover { background-color: var(--gold); color: var(--char); transform: translateY(-1px); }
/* On dark bands, outline button text should be gold-light for contrast */
.on-dark .btn-outline-gold { color: var(--gold-light); border-color: var(--gold); }
.on-dark .btn-outline-gold:hover { color: var(--char); background: var(--gold); }

/* ── Forms ─────────────────────────────────────────────────────────── */
input, select, textarea { font-family: Arial, system-ui, sans-serif; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,166,70,0.18);
}

/* ── Mobile menu ───────────────────────────────────────────────────── */
#mobile-menu { display: none; }
#mobile-menu.open { display: flex; }

/* ── FAQ accordion ─────────────────────────────────────────────────── */
.faq-item .faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-answer { max-height: 640px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .25s ease; }

/* ── Scroll reveal ─────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }