/* =========================================================
   AquaVolt Electrical Co. — Custom Design System
   Palette:
   --avc-navy:   #0B2027  (deep desert-night navy, header/footer)
   --avc-teal:   #0E7C86  (pool water teal, primary)
   --avc-teal-l: #14A5B0  (lighter teal, hovers/gradients)
   --avc-copper: #C1751F  (copper wire accent)
   --avc-copper-l:#E0993C (light copper, hovers)
   --avc-sand:   #F6F1E7  (desert sand, alt section bg)
   --avc-ink:    #10222A  (body text)
   ========================================================= */

:root{
  --avc-navy:#0B2027;
  --avc-navy-2:#0F2C35;
  --avc-teal:#0E7C86;
  --avc-teal-l:#14A5B0;
  --avc-copper:#C1751F;
  --avc-copper-l:#E0993C;
  --avc-sand:#F6F1E7;
  --avc-ink:#10222A;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  color:var(--avc-ink);
  background:#ffffff;
}

.font-display{
  font-family:'Space Grotesk', 'Inter', sans-serif;
}

.font-mono-data{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing:.02em;
}

/* ---- Signature element: the circuit trace ----
   A copper "wire" line with a node dot that runs behind/between
   sections, echoing a wiring schematic. Used sparingly. */
.circuit-trace{
  position:relative;
}
.circuit-trace::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:100%;
  background:repeating-linear-gradient(
    to bottom,
    var(--avc-copper) 0px,
    var(--avc-copper) 8px,
    transparent 8px,
    transparent 16px
  );
  opacity:.35;
  transform:translateX(-50%);
}

.circuit-node{
  width:14px;height:14px;border-radius:50%;
  background:var(--avc-copper);
  box-shadow:0 0 0 6px rgba(193,117,31,.15), 0 0 18px rgba(193,117,31,.55);
}

.circuit-divider{
  height:3px;
  background:linear-gradient(90deg, transparent, var(--avc-copper) 20%, var(--avc-copper) 80%, transparent);
  opacity:.6;
}

.bg-navy{background-color:var(--avc-navy);}
.bg-navy-2{background-color:var(--avc-navy-2);}
.bg-teal{background-color:var(--avc-teal);}
.bg-sand{background-color:var(--avc-sand);}
.text-teal{color:var(--avc-teal);}
.text-copper{color:var(--avc-copper);}
.text-navy{color:var(--avc-navy);}
.border-copper{border-color:var(--avc-copper);}

.btn-copper{
  background:linear-gradient(135deg, var(--avc-copper) 0%, var(--avc-copper-l) 100%);
  color:#1a0f00;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 20px rgba(193,117,31,.35);
}
.btn-copper:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(193,117,31,.5);
}

.btn-teal-outline{
  border:2px solid var(--avc-teal-l);
  color:#ffffff;
  transition:all .18s ease;
}
.btn-teal-outline:hover{
  background:var(--avc-teal-l);
  color:var(--avc-navy);
}

.card-hover{
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,32,39,.12);
}

.hero-glow{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(20,165,176,.35), transparent 60%),
    radial-gradient(800px 400px at 0% 110%, rgba(193,117,31,.25), transparent 60%),
    linear-gradient(180deg, var(--avc-navy) 0%, var(--avc-navy-2) 100%);
}

.chip{
  background:rgba(20,165,176,.12);
  border:1px solid rgba(20,165,176,.4);
  color:var(--avc-teal-l);
}

.faq-item summary{cursor:pointer;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-icon{transition:transform .2s ease;}

.skip-link:focus{
  transform:translateY(0);
}
.skip-link{
  transform:translateY(-150%);
  transition:transform .15s ease;
}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--avc-copper-l);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* Explicit fallbacks for custom-brand-color opacity utilities
   (Tailwind's CDN build only knows its own palette, not our CSS vars,
   so these literal class names are defined by hand here). */
.bg-teal\/10{background-color:rgba(14,124,134,.10);}
.bg-teal\/20{background-color:rgba(14,124,134,.20);}
.border-copper\/40{border-color:rgba(193,117,31,.40);}
.border-teal-l\/50{border-color:rgba(20,165,176,.50);}
.text-copper-l{color:var(--avc-copper-l);}
.hover\:text-copper-l:hover{color:var(--avc-copper-l);}

.nav-link{position:relative;}
.nav-link::after{
  content:"";
  position:absolute;left:0;bottom:-4px;
  width:0;height:2px;background:var(--avc-copper-l);
  transition:width .2s ease;
}
.nav-link:hover::after{width:100%;}