/* AB Holiday Lighting — shared site chrome (banner, nav, buttons, footer, badges, FAQ) */
@import './styles.css';

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

section.band { padding: var(--section-y-desktop) 0; }
@media (max-width: 640px) { section.band { padding: var(--section-y-mobile) 0; } }
.alt { background: var(--surface-alt); }
.eyebrow-c { display: block; margin-bottom: 14px; }
.sect-lead { font-size: 17px; line-height: 1.65; color: var(--text-secondary); max-width: 62ch; margin: 16px 0 0; }
.center { text-align: center; }
.center .sect-lead { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 26px; border-radius: var(--radius-button); font: 600 15px var(--font-body); letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent; transition: all var(--duration-button) var(--ease-standard); text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--gold-500); color: var(--night-900); box-shadow: 0 2px 10px rgba(0,0,0,0.3), var(--glow-warm-soft); }
.btn-primary:hover { background: var(--gold-600); box-shadow: 0 4px 16px rgba(0,0,0,0.35), var(--glow-button-hover); color: var(--night-900); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.btn-secondary { border-width: 1.5px; border-color: var(--glow-300); color: var(--glow-100); background: transparent; }
.btn-secondary:hover { border-color: var(--gold-500); color: var(--glow-300); background: rgba(231, 217, 174, 0.08); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(1px); }
.btn-lg { min-height: 56px; padding: 18px 34px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 40px; }
.phone-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 26px; border-radius: var(--radius-button); font: 600 15px var(--font-body); color: var(--glow-100); border: 1px solid var(--glow-300); text-decoration: none; transition: all var(--duration-button) var(--ease-standard); white-space: nowrap; }
.phone-link:hover { border-color: var(--gold-500); color: var(--glow-300); }
.phone-link.btn-lg { min-height: 56px; padding: 18px 34px; font-size: 17px; }

/* ---------- main header (sticky, non-negotiable, every page) ---------- */
header.nav { position: sticky; top: 0; z-index: 100; background: var(--night-900); border-bottom: 1px solid rgba(53,53,58,0.5); }
.nav-in { max-width: var(--content-max); margin: 0 auto; padding: 0 28px; height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; transition: height 200ms var(--ease-standard); }
.logo { display: flex; align-items: center; line-height: 1; text-decoration: none; flex: none; justify-self: start; }
.logo img { height: 54px; width: auto; display: block; mix-blend-mode: lighten; transition: height 200ms var(--ease-standard); }
.logo .mark { font: 700 10px var(--font-body); letter-spacing: 0.22em; color: var(--gold-500); text-transform: uppercase; }
.logo .word { font: 600 21px var(--font-display); color: var(--glow-100); letter-spacing: 0.01em; }
nav.links { display: flex; gap: 16px; justify-self: center; align-items: center; }
nav.links a { font: 500 14px var(--font-body); color: var(--text-secondary); display: inline-flex; align-items: center; }
nav.links a:hover, nav.links a.active { color: var(--glow-300); }
nav.links a:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 16px; background: var(--border-default); opacity: 0.7; }
.nav-cta { display: flex; align-items: center; gap: 20px; flex: none; justify-self: end; }
.nav-phone { display: flex; align-items: center; gap: 8px; color: var(--glow-300); font: 600 14px var(--font-body); text-decoration: none; white-space: nowrap; }
.nav-phone:hover { color: var(--gold-500); }
.nav-phone svg { flex: none; }
@media (max-width: 1080px) { .nav-phone span { display: none; } }

/* Scrolled state: slim bar — logo stays (smaller), nav links hidden, phone + CTA stay */
header.nav.is-compact .nav-in { height: 60px; }
header.nav.is-compact .logo img { height: 38px; }
header.nav.is-compact nav.links { display: none; }

@media (max-width: 900px) {
  nav.links { display: none; }
  header.nav.is-compact .nav-in { height: 64px; }
}
/* ---------- badge / trust row ---------- */
.badges { border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); background: var(--surface-alt); }
@media (max-width: 900px) { .badges { display: none; } }
.badges-in { max-width: var(--content-max); margin: 0 auto; padding: 24px 32px; display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.badges-in .badge { display: flex; align-items: center; gap: 8px; font: 600 13px var(--font-body); color: var(--text-secondary); text-align: center; white-space: nowrap; }
.badges-in .badge .stars { color: var(--gold-500); letter-spacing: 2px; }
.badges-in .dot { display: inline-block; width: 1px; height: 20px; background: var(--gold-500); opacity: 0.6; font-size: 0; line-height: 0; flex: none; }
@media (max-width: 560px) {
  .badges-in { padding: 16px 20px; gap: 10px 16px; }
  .badges-in .dot { height: 14px; }
  .badges-in .badge { justify-content: center; }
}

/* ---------- reviews ---------- */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.rev { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.rev .st { color: var(--gold-500); letter-spacing: 3px; font-size: 12px; display: block; text-align: center; }
.rev p { font: 400 13.5px/1.55 var(--font-body); color: var(--text-secondary); margin: 0; text-align: center; }
.rev .who { display: flex; align-items: center; gap: 10px; margin-top: auto; justify-content: center; }
.rev .av { width: 30px; height: 30px; border-radius: 50%; background: var(--night-500); color: var(--glow-300); display: inline-flex; align-items: center; justify-content: center; font: 600 12px var(--font-body); flex: none; }
.rev .nm { font: 600 13px var(--font-body); color: var(--text-primary); display: block; }
.rev .mt { font: 400 11px var(--font-body); color: var(--text-muted); }
@media (max-width: 900px) { .rev-grid { grid-template-columns: 1fr; } }

/* ---------- placeholder photo blocks ---------- */
.ph { border-radius: var(--radius-photo); border: 1px dashed var(--night-500); background: linear-gradient(160deg, #17130a, #0c0c0d); box-shadow: var(--photo-vignette); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; }
.ph b { font: 600 10px var(--font-body); letter-spacing: 0.1em; color: var(--glow-300); }
.ph span { font: 400 11px/1.5 var(--font-body); color: var(--text-muted); max-width: 240px; }
.photo { border-radius: var(--radius-photo); border: 1px solid var(--border-default); box-shadow: var(--photo-vignette); object-fit: cover; display: block; width: 100%; height: 100%; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 760px; margin: 40px auto 0; }
.fq { border-bottom: 1px solid var(--border-default); }
.fq button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border: none; cursor: pointer; text-align: left; padding: 20px 4px; min-height: 48px; }
.fq button span { font: 600 17px var(--font-display); color: var(--text-primary); }
.fq button i { color: var(--glow-300); font-style: normal; transition: transform 200ms var(--ease-standard); flex: none; }
.fq.open button i { transform: rotate(45deg); }
.fq .ans { display: none; font: 400 15px/1.7 var(--font-body); color: var(--text-secondary); margin: 0 4px 22px; }
.fq.open .ans { display: block; }

/* ---------- final CTA band ---------- */
.final { position: relative; overflow: hidden; text-align: center; padding: 140px 0; background: linear-gradient(180deg, var(--night-900), var(--night-700)); }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 100%, rgba(201,162,75,0.12), transparent 70%); }
.final h2 { font-size: 46px; color: var(--glow-100); position: relative; }
.final p { color: var(--text-secondary); font: 400 18px var(--font-body); margin: 18px 0 0; position: relative; }
.final .cta-row { justify-content: center; position: relative; }
@media (max-width: 640px) { .final h2 { font-size: 32px; } .final { padding: 88px 0; } }

/* ---------- footer ---------- */
footer.site-foot { border-top: 1px solid var(--border-default); padding: 56px 0 100px; }
.foot { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; font: 400 13px/1.9 var(--font-body); color: var(--text-muted); }
.foot a { color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.foot a svg { flex: none; opacity: 0.85; }
.foot b { font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--glow-300); display: block; margin-bottom: 8px; }
.scope-note { max-width: var(--content-max); margin: 28px auto 0; padding: 0 32px; font: 400 12px/1.6 var(--font-body); color: var(--text-muted); }
@media (max-width: 640px) { .scope-note { padding: 0 20px; } }

/* ---------- fade-up on entry ---------- */
.rise { opacity: 1; transform: none; }
.rise.pre { opacity: 0; transform: translateY(var(--rise-distance)); transition: opacity var(--duration-section) var(--ease-standard), transform var(--duration-section) var(--ease-standard); }
.rise.pre.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise.pre { opacity: 1; transform: none; } }

/* ---------- sticky mobile CTA bar ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(10,10,11,0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--border-default); }
.sticky-cta .btn-primary { flex: 1; }
.sticky-cta .call { width: 52px; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--glow-300); border-radius: var(--radius-button); color: var(--glow-100); flex: none; }
@media (max-width: 900px) { .sticky-cta { display: flex; } body { padding-bottom: 76px; } }

/* future: promo pop-up mount point (v1.5 — not built) */
#promo-mount { display: none; }

/* Visually hidden anti-spam field */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none;}