/* ============================================================================
   VOLT theme layer — Pembroke Termite Control
   Sits on top of assets/global.css (THEME 10 "Ironside"). Re-tokens the
   palette to the VOLT identity (near-black green #0d140f + volt lime
   #d7f542, Archivo / Space Grotesk), fixes hardcoded light-theme colors,
   and styles the new VOLT header + footer.
   ============================================================================ */

:root {
  --accent: #d7f542;
  --accent-rgb: 215, 245, 66;
  --accent-dark: #a8c72e;
  --accent-bright: #e9ff7a;
  --accent-soft: #d7f542;
  --accent-tint: #222b12;

  --navy: #16241a;
  --navy-2: #1d2f22;
  --blue: #d7f542;
  --blue-light: #202a12;
  --red: var(--accent);
  --red-dark: var(--accent-dark);
  --cream: #111b13;
  --paper: #0d140f;
  --ink: #f4f7ee;
  --muted: #a7b39f;
  --line: #2a3a2e;
  --green: #d7f542;
  --yellow: #d7f542;
  --heading: "Archivo", sans-serif;
  --body: "Space Grotesk", sans-serif;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

::selection { background: var(--accent); color: #0d140f; }

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* ---------- buttons: volt treatment ---------- */
.button {
  background: var(--accent);
  color: #0d140f;
  box-shadow: 4px 4px 0 #000;
  border-radius: 14px;
  font-weight: 800;
}
.button:hover {
  background: var(--accent-dark);
  color: #0d140f;
  box-shadow: 2px 2px 0 #000;
  transform: translate(2px, 2px);
}
.button-outline { border-color: rgba(244, 247, 238, 0.55); color: var(--ink); }
.button-outline:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #0d140f;
  transform: none;
}
.button-navy { background: #0d140f; color: var(--accent); border: 2px solid var(--accent); }
.button-navy:hover { background: var(--accent); color: #0d140f; }

/* ---------- hardcoded light-theme colors -> volt ---------- */
.section-head.light > p,
.hero-copy > p,
.inner-hero-copy > p,
.cta-copy p,
.landmark-copy p,
.brand-rail div,
.route-grid p,
.featured > p,
.rating small,
.breadcrumbs,
.case-grid figcaption span,
.price-path article:nth-child(2) p,
.related-card span { color: var(--muted); }

.hero-points,
.hero-facts span { color: var(--ink); }

.quick-strip span { color: var(--accent); }
.live-dot { background: var(--accent); }

.arrival-card b:first-child { background: var(--accent-tint); color: var(--accent); }
.promise-grid article { background: #16241a; border-color: var(--line); }
.trust-grid b { border-color: var(--accent); color: var(--accent); }
.offer-card button { border-top: 1px dashed var(--line); }
.review-card { background: #16241a; border-color: var(--line); }
.review-card blockquote { color: var(--ink); }
.map-card { background: #16241a; }

.contact-form input,
.contact-form textarea,
.contact-form select {
  background: #16241a;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted); }

/* generic safety nets for stray light surfaces / dark text */
.eyebrow { color: var(--accent); }
.tick { color: var(--accent); }

/* ============================================================================
   VOLT HEADER (sactotermitecontrol-style: utility top bar + sticky main bar)
   ============================================================================ */
.v-header { position: sticky; top: 0; z-index: 60; }

.v-topbar {
  background: var(--accent);
  color: #0d140f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v-topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  flex-wrap: wrap;
}
.v-top-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.v-dot { width: 8px; height: 8px; border-radius: 50%; background: #0d140f; display: inline-block; animation: vpulse 1.6s infinite; }
@keyframes vpulse { 50% { opacity: 0.35; } }
a.v-top-phone { font-weight: 800; letter-spacing: 0.06em; }

.v-mainbar {
  background: rgba(13, 20, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--accent);
  position: relative;
}
.v-mainbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.v-brand { display: flex; align-items: center; gap: 0.7rem; }
.v-brand img {
  height: 46px; width: auto; display: block;
  background: #fff; border-radius: 12px; padding: 4px;
}
.v-brand > span {
  font-family: var(--heading); font-weight: 900; font-size: 1.12rem;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.05;
  display: flex; flex-direction: column;
}
.v-brand > span small {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em;
  color: var(--accent); text-transform: uppercase;
}
.v-mainbar .nav-links { display: flex; gap: 1.7rem; align-items: center; }
.v-mainbar .nav-links a { padding: 0.45rem 0; }
.v-mainbar .nav-links a {
  color: var(--muted); font-weight: 700; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.v-mainbar .nav-links a:hover { color: var(--accent); }
.v-cta .button { min-height: 46px; padding: 0 1.4rem; font-size: 0.85rem; }
.v-cta .v-call { display: block; text-align: center; margin-top: 0.35rem; font-weight: 800; color: var(--ink); font-size: 0.95rem; letter-spacing: 0.03em; }
.v-cta .v-call:hover { color: var(--accent); }

.nav-toggle { display: none; }

/* ============================================================================
   VOLT FOOTER
   ============================================================================ */
.v-footer {
  background: #090f0b;
  border-top: 2px solid var(--accent);
  color: var(--muted);
  padding: 4rem 0 0;
  margin-top: 0;
}
.v-foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem; padding-bottom: 3rem;
}
.v-foot-logo {
  display: inline-block; background: #fff; border-radius: 18px;
  padding: 0.8rem 1.1rem; margin-bottom: 1.2rem;
}
.v-foot-logo img { height: 74px; width: auto; display: block; }
.v-foot-brand p { font-size: 0.94rem; max-width: 22rem; }
.v-foot-phone {
  display: inline-block; font-family: var(--heading); font-weight: 900;
  font-size: 1.5rem; color: var(--accent); margin: 0.9rem 0 0.2rem; letter-spacing: 0.02em;
}
.v-foot-mail { display: inline-block; color: var(--ink); font-weight: 600; }
.v-foot-mail:hover { color: var(--accent); }
.v-footer h3 {
  color: var(--ink); font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.14em; margin-bottom: 1.1rem; font-weight: 800;
}
.v-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.v-footer ul a { font-size: 0.94rem; }
.v-footer ul a:hover { color: var(--accent); }
.v-hours { margin-top: 1rem; font-size: 0.88rem; color: var(--accent); font-weight: 700; }
.v-foot-bottom {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.85rem;
}
.v-foot-bottom a:hover { color: var(--accent); }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 1000px) {
  .v-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .v-topbar-in { justify-content: center; text-align: center; }
  .v-cta { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: 0.6rem; cursor: pointer;
  }
  .nav-toggle span { width: 26px; height: 3px; background: var(--accent); border-radius: 2px; display: block; }
  .v-mainbar .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #0d140f; flex-direction: column; align-items: stretch;
    gap: 0; padding: 0.6rem 4vw 1.2rem; border-bottom: 2px solid var(--accent);
  }
  .v-mainbar .nav-links.open { display: flex; }
  .v-mainbar .nav-links > a { padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .v-mainbar .nav-links > a:last-child { border-bottom: 0; }
  /* mobile dropdowns: caret expands submenu in place */
  .v-mainbar .v-drop { display: block; border-bottom: 1px solid var(--line); }
  .v-mainbar .v-drop > a { display: inline-block; padding: 0.85rem 0.2rem; font-size: 1rem; }
  .v-mainbar .v-caret { float: right; padding: 1.05rem 0.5rem; }
  .v-mainbar .v-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: none; min-width: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; padding: 0 0 0.5rem 1rem;
  }
  .v-mainbar .v-drop.open .v-menu { display: block; transform: none; }
  .v-mainbar .nav-links .v-menu a { padding: 0.6rem 0.2rem; font-size: 0.95rem; }
}
@media (max-width: 600px) {
  .v-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .v-brand > span { font-size: 1rem; }
}

/* ============================================================================
   CONTRAST REMAP — every light-on-dark / dark-on-light text fixed for VOLT.
   In the old theme --paper was white (used as light text) and --navy was dark
   blue (used as dark text). In VOLT both are dark surfaces, so text using
   them must become ink — except on volt-lime surfaces where dark text is
   correct (buttons, badges, quick-strip, newsletter section).
   ============================================================================ */

/* was white text -> ink */
.section-head.light h2,
.hero,
.hero-copy h1,
.image-stack-note,
.service-row-index,
.offers,
.offers h2,
.why-score,
.route-section,
.route-section h2,
.route-grid h3,
.compare-card.featured,
.featured h3,
.reviews-section,
.reviews-header h2,
.rating strong,
.review-card footer > b,
.map-note,
.gallery-grid figcaption,
.cta-band,
.cta-copy h2,
.inner-hero,
.inner-hero h1,
.content-media-note,
.dark-panel,
.dark-panel h3,
.state-block-label,
.case-grid figcaption,
.case-grid figcaption strong,
.price-path article:nth-child(2),
.price-path article:nth-child(2) h3,
.related-card h3,
.landmark-copy,
.landmark-copy h2,
.newsletter button { color: var(--ink); }

/* was dark-navy text -> ink */
h4,
.skip-link,
.trust-grid strong,
.promise-grid strong,
.service-tags span,
.offer-card strong,
.offer-card button b,
.reason-list strong,
.review-card footer strong,
.city-list li,
.faq-list summary,
.contact-details strong,
.contact-form label,
.stat-row strong,
.mini-list li,
.zip-wall span,
.arrival-card { color: var(--ink); }

/* links pop in volt */
.text-link { color: var(--accent); }

/* faq +/- marker in volt */
.faq-list summary::after { color: var(--accent); }

/* volt-lime surfaces keep dark text (already correct via swap) */
.button,
.sticky-call,
.newsletter,
.newsletter h2,
.featured .compare-icon,
.route-grid article > b,
.problem-grid span,
.map-pin,
.quick-strip,
.detail-card b,
.service-more { color: #0d140f; }

/* ============================================================================
   STRICT RULE: no two consecutive sections share a background.
   Page-scoped fixes for the three pages where the default token alternation
   would repeat (verified per page, Oct 2026).
   ============================================================================ */
body[data-page="about"] .why-section { background: var(--cream); }
body[data-page="locations"] .trust-rail { background: var(--paper); }
body[data-page="services"] .trust-rail { background: var(--paper); }

/* owner byline (privacy page) */
.v-owner-line {
  font-size: 1.12rem; font-weight: 700; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 1rem; margin: 0 0 2.2rem;
}

/* ============================================================================
   Header dropdowns (Services / Areas)
   ============================================================================ */
.v-drop { position: relative; display: flex; align-items: center; }
.v-caret {
  background: none; border: 0; cursor: pointer; padding: 0.5rem 0.15rem;
  color: var(--muted); display: inline-flex; align-items: center; line-height: 0;
}
.v-caret:hover { color: var(--accent); }
.v-caret svg { transition: transform 0.18s ease; }
.v-drop.open .v-caret svg { transform: rotate(180deg); }
.v-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 6px);
  min-width: 248px; background: #16241a;
  border: 2px solid var(--line); border-radius: 14px;
  padding: 0.45rem; z-index: 70;
  opacity: 0; visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.v-drop:hover .v-menu,
.v-drop:focus-within .v-menu,
.v-drop.open .v-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.v-mainbar .nav-links .v-menu a {
  display: block; padding: 0.72rem 0.95rem; border-radius: 9px;
  color: var(--ink); font-size: 0.9rem; font-weight: 600;
  text-transform: none; letter-spacing: 0.01em; white-space: nowrap;
}
.v-mainbar .nav-links .v-menu a::after { display: none; }
.v-mainbar .nav-links .v-menu a:hover { background: #1d2f22; color: var(--accent); }