@import url("tokens.css");

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--space-2); font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-2); }
ul, ol { margin: 0 0 var(--space-2); padding-left: 1.2em; }
li { margin-bottom: 0.4em; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); }
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-accent);
  color: var(--color-text-on-light); padding: 0.75em 1em; z-index: 1000;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--color-black);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.utility-bar {
  background: var(--gradient-neon);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  padding: 0.4em var(--space-2);
}
.brand-verse-bar { padding: 0.35em var(--space-2); }
.brand-verse-bar .container { padding: 0; }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.brand { display: flex; align-items: center; gap: 0.6em; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-text); min-width: 0; }
.brand-logo { height: 48px; width: auto; flex: none; }
.brand-text { white-space: nowrap; }
.brand:hover { text-decoration: none; color: var(--color-primary-light); }
@media (max-width: 880px) {
  .brand-logo { height: 56px; }
}
@media (max-width: 480px) {
  /* Logo alone reads "Hanson Variety Solutions" (wordmark + heartbeat) — drop the redundant
     text label on the narrowest screens so the logo can run large without crowding the
     hamburger/Call button, per Tyler's request. Height trimmed from 64px (Tyler: header/menu
     pill was too tall on his phone) while staying clearly readable. */
  .brand-logo { height: 44px; }
  .brand-text { display: none; }
  .site-header .container { padding-top: 0.5em; padding-bottom: 0.5em; gap: var(--space-2); }
  .header-call-icon { width: 40px; height: 40px; font-size: 1.05rem; }
  .nav-toggle { padding: 0.4em 0.6em; font-size: 0.85rem; min-height: 40px; gap: 0.3em; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: 0.5em 0.7em;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Groups the call icon + hamburger so they stay adjacent on mobile; on wide screens this
   collapses to nothing (display:contents) so it doesn't add an extra flex item/gap next to
   .brand and .main-nav in .site-header .container's space-between layout. */
.header-actions { display: contents; }

/* Always-visible mobile call affordance: a small tel: icon button next to Menu, since the fixed
   bottom call/text bar was removed sitewide and the full "Call ..." button only lives inside the
   collapsible nav drawer otherwise (one tap too many for "I just want to call"). Hidden on wide
   screens where .header-cta in the nav is already visible without opening anything. */
.header-call-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius);
  background: var(--color-cyan);
  color: var(--color-btn-text);
  font-size: 1.2rem;
  text-decoration: none;
}
.header-call-icon:hover { background: var(--color-cyan-bright); text-decoration: none; }

.main-nav { display: flex; align-items: center; gap: var(--space-3); }
.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.main-nav a { color: var(--color-text); font-weight: 600; font-size: 0.92rem; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-primary-light); text-decoration: none; }
.has-dropdown { position: relative; }
.dropdown {
  display: none;
  list-style: none;
  margin: 0;
  position: absolute; left: 0; top: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-box);
  padding: var(--space-1);
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--shadow-card);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 0.45em 0.6em; border-radius: 4px; font-weight: 500; }
.dropdown a:hover { background: var(--color-bg-alt); text-decoration: none; }

.header-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: var(--color-cyan);
  color: var(--color-btn-text);
  padding: 0.6em 1.1em;
  border-radius: var(--radius);
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
.header-cta:hover { background: var(--color-cyan-bright); text-decoration: none; color: var(--color-btn-text); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .4em; }
  .header-actions { display: flex; align-items: center; gap: 0.5em; }
  .header-call-icon { display: inline-flex; }
  .main-nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--gradient-neon);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column; align-items: stretch;
    padding: var(--space-2) var(--space-3) var(--space-3);
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--color-border); }
  .main-nav a { display: block; padding: 0.8em 0.2em; }
  .dropdown { position: static; display: block; border: 0; background: none; box-shadow: none; padding-left: var(--space-2); max-height: none; }
  .has-dropdown .dropdown { display: none; }
  .has-dropdown.is-open .dropdown { display: block; }
  .header-cta { margin-top: var(--space-2); width: 100%; justify-content: center; text-align: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
  padding: 0.75em 1.5em;
  border-radius: var(--radius);
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); text-decoration: none; color: var(--color-btn-text); }
.btn { color: var(--color-btn-text); }
.btn-outline { background: var(--color-cyan); border-color: var(--color-cyan); color: var(--color-btn-text); }
.btn-outline:hover { background: var(--color-cyan-bright); border-color: var(--color-cyan-bright); color: var(--color-btn-text); }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-light); }
.btn-accent:hover { filter: brightness(0.92); color: var(--color-text-on-light); }
.btn-lg { padding: 1em 2em; font-size: 1.1rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  padding: var(--space-7) 0 var(--space-6);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.82)), var(--color-black) center/cover no-repeat;
}
.hero.has-image { background-image: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.88)), var(--hero-image, none); background-size: cover; background-position: center; }
.hero-inner { max-width: 720px; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-cyan-bright); font-weight: 700; font-size: 0.85rem; margin-bottom: var(--space-2); }
.hero p.lede { font-size: 1.15rem; color: #e9e9f2; max-width: 60ch; }
.hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* ---------- Sections ---------- */
.section { padding: var(--space-6) 0; background: var(--color-black); }
.section-alt { background: var(--color-navy-footer); }
.section-header { max-width: 70ch; margin-bottom: var(--space-4); }
.section-header p { color: var(--color-text-muted); }

/* Plain on-page <h1> for hero:false pages (FAQ, Privacy) — no image/CTAs, just the heading the
   page actually needs (one visible, semantic h1 per page). */
.section-plain-heading { padding-bottom: var(--space-3); }
.section-plain-heading h1 { margin-bottom: 0.3em; }
.lede-plain { color: var(--color-text-muted); max-width: 60ch; margin: 0; }

/* Diagonal magenta -> purple -> cyan gradient "highlight" panel, per DESIGN.md */
.section-gradient {
  background: var(--gradient-neon);
  color: var(--color-white);
}
.section-gradient .section-header,
.section-gradient p { color: var(--color-white); }
.section-gradient h2, .section-gradient h1 {
  border-left: 4px solid var(--color-white);
  padding-left: var(--space-2);
}
.section-gradient a { color: var(--color-white); text-decoration: underline; font-weight: 700; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  background: var(--color-black);
  border: 2px solid var(--color-cyan);
  border-radius: var(--radius-box);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
/* Neon border cycles cyan -> magenta -> green down a grid, matching the old site's card boxes */
.grid-3 .card:nth-of-type(3n+2), .grid-2 .card:nth-of-type(3n+2) { border-color: var(--color-magenta); }
.grid-3 .card:nth-of-type(3n+3), .grid-2 .card:nth-of-type(3n+3) { border-color: var(--color-green); }
.card h3 { color: var(--color-cyan-bright); }
.card img { border-radius: 4px; margin-bottom: var(--space-2); aspect-ratio: 4/3; object-fit: cover; }

.service-card { display: flex; flex-direction: column; gap: 0.4em; }

/* Generic bordered content box (sections[].container === true) — same cycling neon border */
.neon-box {
  border: 2px solid var(--color-cyan);
  border-radius: var(--radius-box);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-black);
}
.neon-box:nth-of-type(3n+2) { border-color: var(--color-magenta); }
.neon-box:nth-of-type(3n+3) { border-color: var(--color-green); }
.neon-box h2, .neon-box h3 { color: var(--color-white); }

/* ---------- Testimonials ---------- */
.testimonial { background: var(--color-black); border: 2px solid var(--color-magenta); border-radius: var(--radius-box); padding: var(--space-3); }
.testimonial:nth-of-type(3n+2) { border-color: var(--color-green); }
.testimonial:nth-of-type(3n+3) { border-color: var(--color-cyan); }
.testimonial .stars { color: var(--color-green); letter-spacing: 0.1em; margin-bottom: 0.4em; }
.testimonial cite { display: block; margin-top: var(--space-2); font-style: normal; font-weight: 700; color: var(--color-text-muted); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
.faq-item summary { cursor: pointer; font-weight: 700; font-family: var(--font-heading); font-size: 1.05rem; padding-right: 1.5em; position: relative; color: var(--color-white); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.3rem; color: var(--color-cyan); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: var(--space-2); color: var(--color-text-muted); }

/* ---------- Photo strips / inline section images ---------- */
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.photo-strip img { border-radius: var(--radius-box); border: 2px solid var(--color-cyan); aspect-ratio: 3/2; object-fit: cover; }
.section-image { border-radius: var(--radius-box); border: 2px solid var(--color-cyan); aspect-ratio: 4/3; object-fit: cover; }

/* ---------- Misc content bits ---------- */
.reviews-strip { text-align: center; font-weight: 700; color: var(--color-accent); font-size: 1.05rem; }
.post-date { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: var(--space-2); }

/* ---------- Amazon Associates ---------- */
.amazon-disclosure { color: var(--color-text-muted); font-size: 0.8rem; font-style: italic; }
.amazon-disclosure-top { margin: 0 0 var(--space-3); padding: 0.6em 0.9em; border-left: 3px solid var(--color-cyan); background: rgba(20,200,245,0.06); font-style: normal; }
.footer-bottom .amazon-disclosure { font-size: 0.78rem; }
.amazon-tools-box {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-green);
  border-radius: var(--radius-box);
  background: rgba(53, 234, 10, 0.05);
}
.amazon-tools-box h2 { margin-top: 0; color: var(--color-white); font-size: 1.2rem; }
.amazon-tools-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: 0.8em; }
.amazon-tools-list li {
  margin: 0;
  padding: 0.8em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-box);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.amazon-tool-label { color: var(--color-white); font-weight: 600; }
/* Its own block-level button, full width, so "Check price on Amazon" always has the whole card's
   width to sit on one line instead of fighting the product label for space in one flex row. */
.amazon-tool-btn { display: flex; width: 100%; justify-content: center; min-height: 44px; }
.amazon-tools-box .amazon-disclosure { margin: 0; }

/* ---------- Ad/affiliate separation ---------- */
.ad-separator-block {
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.ad-separator-block h3 { margin: 0 0 0.3em; color: var(--color-cyan-bright); font-size: 1rem; }
.ad-separator-block p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }
.brand-verse { text-align: center; font-style: italic; color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: var(--space-4); }
.brand-verse-bar .brand-verse { color: var(--color-white); margin: 0; font-size: 0.78rem; font-weight: 600; }
.licensed-line { font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- Contact form ---------- */
.contact-form { background: var(--color-navy-footer); border: 2px solid var(--color-cyan); border-radius: var(--radius-box); padding: var(--space-4); }
.contact-prompt { margin: 0; font-size: 1.1rem; text-align: center; }
.form-row { margin-bottom: var(--space-2); }
.form-row label { display: block; font-weight: 600; margin-bottom: 0.35em; color: var(--color-white); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-on-light);
  font: inherit;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--color-cyan); outline: 2px solid var(--color-cyan); outline-offset: 1px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.preview-note {
  background: var(--color-black);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-box);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.95rem;
  color: var(--color-white);
}
.contact-quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.contact-quick-actions .btn { flex: 1 1 220px; }
.form-after-line { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-2); }
[data-preview-submit] { opacity: 0.6; cursor: not-allowed; }

/* ---------- Trust / license strip ---------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; color: var(--color-text-muted); font-size: 0.9rem; }
.trust-strip strong { color: var(--color-text); }


/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--color-navy-footer);
  background-image:
    repeating-linear-gradient(0deg, rgba(20,200,245,0.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20,200,245,0.06) 0 1px, transparent 1px 64px);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: var(--space-6) 0 var(--space-4);
  font-size: 0.92rem;
}
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--space-4); }
.footer-grid h4 { color: var(--color-text); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.4em; }
.footer-grid a { color: var(--color-text-muted); }
.footer-grid a:hover { color: var(--color-primary-light); }
.footer-bottom { border-top: 1px solid var(--color-border); padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.breadcrumbs { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.breadcrumbs a { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Inline SVG icons inherit the button text color (emoji rendered red on Samsung). */
.ico { display:inline-block; vertical-align:-0.125em; margin-right:.35em; flex-shrink:0; }
.header-call-icon .ico { margin-right:0; width:1.25em; height:1.25em; }