/* ==========================================================================
   "Electric" skin — opt-in per site (sites.json skin: "electric").
   Every rule is scoped to body[data-skin="electric"], so sites without the
   skin (e.g. the fire-door site) are unaffected even if this file is present.
   Identity: light, technical, compliance-led. Pale drafting-grid grounds,
   ink headlines, electric-blue actions, cyan "live" accents. The opposite of
   the dark navy + amber + green fire-door look.
   ========================================================================== */
body[data-skin="electric"] {
  --e-blue: 37 99 235;      /* electric blue — primary actions */
  --e-blue-dk: 30 58 138;   /* deep blue — headings accents */
  --e-cyan: 6 182 212;      /* live / accent */
  --e-ink: 15 23 42;        /* headline ink */
  --e-body: 51 65 85;
  --e-mute: 100 116 139;
  --e-pale: 239 246 255;    /* pale blue ground */
  --e-line: 219 228 240;
  --e-grid: linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  color: rgb(var(--e-body));
}

/* ---------- Header ---------- */
body[data-skin="electric"] header .bg-gray-900,
body[data-skin="electric"] .bg-gray-900.text-gray-300.text-xs {
  background: rgb(var(--e-blue)) !important; color: #fff !important;
}
body[data-skin="electric"] header { box-shadow: 0 1px 0 rgb(var(--e-line)); }
body[data-skin="electric"] header .bg-brand-primary.rounded-lg.w-9 { background: rgb(var(--e-ink)); border-radius: 0.6rem; }
body[data-skin="electric"] header a.bg-brand-primary,
body[data-skin="electric"] header .bg-brand-primary.text-white {
  background: rgb(var(--e-blue)); border-radius: 999px;
}
body[data-skin="electric"] header a.bg-brand-primary:hover { background: rgb(var(--e-blue-dk)); }
body[data-skin="electric"] header nav a:hover,
body[data-skin="electric"] header .hover\:text-brand-primary:hover { color: rgb(var(--e-blue)); border-color: rgb(var(--e-cyan)); }

/* ---------- Breadcrumbs ---------- */
body[data-skin="electric"] nav[aria-label="Breadcrumb"] { background: rgb(var(--e-pale)); border-bottom: 1px solid rgb(var(--e-line)); }

/* ---------- Hero (HeroElectric) ---------- */
body[data-skin="electric"] .ehero {
  background-color: rgb(var(--e-pale));
  background-image: var(--e-grid);
  background-size: 28px 28px;
  border-bottom: 1px solid rgb(var(--e-line));
  padding: 2.25rem 1rem 2.5rem;
}
@media (min-width: 768px) { body[data-skin="electric"] .ehero { padding: 3.5rem 1rem; } }
body[data-skin="electric"] .ehero-wrap { margin: 0 auto; }
body[data-skin="electric"] .ehero-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { body[data-skin="electric"] .ehero-grid { grid-template-columns: 1.45fr 1fr; gap: 3rem; } }
body[data-skin="electric"] .ehero-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--e-blue)); margin-bottom: .75rem;
}
body[data-skin="electric"] .ehero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; padding: 0; list-style: none; }
body[data-skin="electric"] .ehero-chips li {
  display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid rgb(var(--e-line));
  border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; font-weight: 600; color: rgb(var(--e-ink));
}
body[data-skin="electric"] .ehero-tick { color: rgb(var(--e-cyan)); }
body[data-skin="electric"] .ehero-h1 {
  font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--e-ink));
  font-size: 2.1rem; line-height: 1.08; margin-bottom: .9rem;
}
@media (min-width: 768px) { body[data-skin="electric"] .ehero-h1 { font-size: 3.15rem; } }
body[data-skin="electric"] .ehero-lead { font-size: 1.15rem; font-weight: 600; color: rgb(var(--e-blue-dk)); line-height: 1.45; margin-bottom: .9rem; max-width: 42rem; }
@media (min-width: 768px) { body[data-skin="electric"] .ehero-lead { font-size: 1.3rem; } }
body[data-skin="electric"] .ehero-sub { font-size: 1.02rem; color: rgb(var(--e-body)); line-height: 1.65; margin-bottom: 1.25rem; max-width: 42rem; }
body[data-skin="electric"] .ehero-alert {
  display: inline-block; background: #fff7ed; border: 1px solid #fdba74; border-left: 4px solid #ea580c; color: #7c2d12;
  font-weight: 600; border-radius: .5rem; padding: .6rem .9rem; margin-bottom: 1rem;
}
body[data-skin="electric"] .ehero-bullets { display: grid; gap: .55rem 1.5rem; margin: 0 0 1.6rem; padding: 0; list-style: none; max-width: 44rem; }
@media (min-width: 640px) { body[data-skin="electric"] .ehero-bullets { grid-template-columns: 1fr 1fr; } }
body[data-skin="electric"] .ehero-bullets li { display: flex; gap: .55rem; align-items: flex-start; color: rgb(var(--e-ink)); font-weight: 500; line-height: 1.35; }
body[data-skin="electric"] .ehero-bullets li svg { margin-top: .15rem; }
body[data-skin="electric"] .ehero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
body[data-skin="electric"] .ehero-small { margin-top: 1rem; font-size: .88rem; color: rgb(var(--e-mute)); }
body[data-skin="electric"] .ehero--dir .ehero-small { margin: 0 0 1.25rem; }
body[data-skin="electric"] .ehero-small strong { color: rgb(var(--e-body)); }

/* ---------- Buttons ---------- */
body[data-skin="electric"] .ebtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: 1.05rem;
  border-radius: 999px; padding: .95rem 1.6rem; transition: background .15s, color .15s, border-color .15s; text-decoration: none;
}
body[data-skin="electric"] .ebtn--primary { background: rgb(var(--e-blue)); color: #fff; box-shadow: 0 8px 20px -8px rgba(37,99,235,.6); }
body[data-skin="electric"] .ebtn--primary:hover { background: rgb(var(--e-blue-dk)); }
body[data-skin="electric"] .ebtn--ghost { background: #fff; color: rgb(var(--e-blue-dk)); border: 2px solid rgb(var(--e-blue)); }
body[data-skin="electric"] .ebtn--ghost:hover { background: rgb(var(--e-pale)); }
body[data-skin="electric"] .ebtn--block { width: 100%; margin-top: 1rem; }

/* ---------- Price card ---------- */
body[data-skin="electric"] .eprice {
  background: #fff; border: 1px solid rgb(var(--e-line)); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 20px 40px -24px rgba(15,23,42,.35); padding: 0 1.25rem 1.25rem;
}
body[data-skin="electric"] .eprice-head {
  display: flex; align-items: center; gap: .45rem; margin: 0 -1.25rem 1rem; padding: .8rem 1.25rem;
  background: rgb(var(--e-ink)); color: #fff; font-weight: 700; letter-spacing: .01em;
}
body[data-skin="electric"] .eprice-head svg { color: rgb(var(--e-cyan)); }
body[data-skin="electric"] .eprice-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
body[data-skin="electric"] .eprice-table th { text-align: left; font-weight: 500; color: rgb(var(--e-body)); padding: .55rem 0; border-bottom: 1px dashed rgb(var(--e-line)); }
body[data-skin="electric"] .eprice-table td { text-align: right; font-weight: 700; color: rgb(var(--e-ink)); padding: .55rem 0; border-bottom: 1px dashed rgb(var(--e-line)); white-space: nowrap; }
body[data-skin="electric"] .eprice-note { font-size: .82rem; color: rgb(var(--e-mute)); margin-top: .7rem; }
body[data-skin="electric"] .eprice-points { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .4rem; }
body[data-skin="electric"] .eprice-points li { display: flex; gap: .45rem; align-items: flex-start; font-size: .9rem; color: rgb(var(--e-ink)); font-weight: 500; }

/* ---------- Section headings & body ---------- */
body[data-skin="electric"] .content-section h2,
body[data-skin="electric"] .prose h2 {
  font-family: var(--font-heading); letter-spacing: -0.015em; color: rgb(var(--e-ink));
  border-bottom: none !important; padding-left: .85rem; border-left: 4px solid rgb(var(--e-cyan));
}
body[data-skin="electric"] .prose h3 { color: rgb(var(--e-blue-dk)); }
body[data-skin="electric"] .prose a { color: rgb(var(--e-blue)); text-decoration-color: rgba(37,99,235,.35); }

/* section banding: alternate pale/white instead of grey */
body[data-skin="electric"] .bg-gray-50 { background-color: rgb(var(--e-pale)) !important; }
body[data-skin="electric"] .bg-gray-50\/60 { background-color: rgba(239,246,255,.7) !important; }

/* ---------- Cards (services / problems) ---------- */
body[data-skin="electric"] .content-section .grid > div.rounded-xl,
body[data-skin="electric"] .content-section .grid > article,
body[data-skin="electric"] .content-section .grid > div[class*="border"] {
  border-color: rgb(var(--e-line)) !important; border-top: 3px solid rgb(var(--e-blue)) !important; border-radius: .9rem;
  box-shadow: 0 10px 24px -18px rgba(15,23,42,.35);
}
body[data-skin="electric"] .content-section .grid .bg-brand-light { background: rgb(var(--e-pale)); color: rgb(var(--e-blue)); }

/* ---------- At-a-glance & tables ---------- */
body[data-skin="electric"] .rounded-xl.border.border-gray-200 .bg-gray-50 { background: rgb(var(--e-ink)) !important; }
body[data-skin="electric"] .rounded-xl.border.border-gray-200 .bg-gray-50 h2 { color: #fff; border: none; padding: 0; }

/* ---------- FAQ ---------- */
body[data-skin="electric"] details.group { border-radius: .8rem; border-color: rgb(var(--e-line)); }
body[data-skin="electric"] details.group[open] { border-color: rgb(var(--e-blue)); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
body[data-skin="electric"] details.group summary svg { color: rgb(var(--e-cyan)); }

/* ---------- Area chips ---------- */
body[data-skin="electric"] .content-section a.inline-flex.rounded-full,
body[data-skin="electric"] .content-section .flex-wrap > a {
  background: #fff !important; border-color: rgb(var(--e-line)) !important; border-radius: 999px;
}
body[data-skin="electric"] .content-section .flex-wrap > a:hover { border-color: rgb(var(--e-blue)) !important; background: rgb(var(--e-pale)) !important; }

/* ---------- Mid CTA: light panel with blue rule ---------- */
body[data-skin="electric"] section.bg-brand-light.border-l-4 {
  background: #fff !important; border-left: none !important; border-top: 1px solid rgb(var(--e-line)); border-bottom: 1px solid rgb(var(--e-line));
  background-image: var(--e-grid) !important; background-size: 28px 28px !important;
}
body[data-skin="electric"] section.bg-brand-light.border-l-4 .max-w-3xl {
  background: #fff; border: 1px solid rgb(var(--e-line)); border-left: 5px solid rgb(var(--e-blue)); border-radius: 1rem; padding: 1.75rem;
  box-shadow: 0 16px 36px -26px rgba(15,23,42,.45);
}

/* ---------- End CTA: electric blue band (not dark navy) ---------- */
body[data-skin="electric"] section.bg-gray-900 {
  background: linear-gradient(135deg, rgb(var(--e-blue)) 0%, rgb(var(--e-blue-dk)) 100%) !important;
}
body[data-skin="electric"] section.bg-gray-900 .prose-p\:text-gray-300 p { color: #e0e7ff !important; }

/* buttons inside CTA components */
body[data-skin="electric"] section a.bg-brand-primary,
body[data-skin="electric"] section a.bg-amber-400,
body[data-skin="electric"] section a.bg-hero-cta {
  background: rgb(var(--e-blue)) !important; color: #fff !important; border-radius: 999px !important;
}
body[data-skin="electric"] section.bg-gray-900 a.bg-brand-primary,
body[data-skin="electric"] section.bg-gray-900 a.bg-amber-400,
body[data-skin="electric"] section.bg-gray-900 a.bg-hero-cta {
  background: #fff !important; color: rgb(var(--e-blue-dk)) !important;
}

/* ---------- Footer: light, not dark ---------- */
body[data-skin="electric"] footer.bg-gray-900,
body[data-skin="electric"] footer .bg-gray-900 {
  background: #fff !important; color: rgb(var(--e-body)) !important; border-top: 4px solid rgb(var(--e-blue));
  background-image: var(--e-grid) !important; background-size: 28px 28px !important;
}
body[data-skin="electric"] footer .text-white { color: rgb(var(--e-ink)) !important; }
body[data-skin="electric"] footer .text-gray-400,
body[data-skin="electric"] footer .text-gray-300 { color: rgb(var(--e-body)) !important; }
body[data-skin="electric"] footer a:hover { color: rgb(var(--e-blue)) !important; }
body[data-skin="electric"] footer .border-gray-800 { border-color: rgb(var(--e-line)) !important; }

/* ---------- Mobile sticky call bar ---------- */
body[data-skin="electric"] .fixed.bottom-0 a,
body[data-skin="electric"] .fixed.bottom-0 { background: rgb(var(--e-blue)) !important; }