/*
Theme Name: 352 Electric
Theme URI: https://352electric.com
Author: APEX Digital Engineering
Author URI: https://352electric.com
Description: Custom theme for 352 Electric — Gainesville, FL licensed electrical contractor. Static, fast, no page-builder. Built to match the 352 Electric brand design.
Version: 1.4.2
License: GNU General Public License v2 or later
Text Domain: 352-electric
*/

/*
  The full site design lives in assets/app.css (enqueued in functions.php).
  This file only carries the WordPress theme header (required) plus a couple
  of progressive-enhancement safety rules.
*/

/* If JavaScript is off, never hide the scroll-reveal content. */
html.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* Keep the WordPress admin bar from covering the sticky nav for logged-in editors. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

/* ───────── Services mega-dropdown nav ───────── */
.nav-links{align-items:center}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a{display:inline-flex;align-items:center;gap:6px}
.nav-caret{width:11px;height:11px;transition:transform .2s;flex:0 0 11px}
.nav-item:hover .nav-caret{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:0;background:var(--charcoal);border:1px solid #3a3a3a;border-top:3px solid var(--yellow);border-radius:0 0 12px 12px;padding:30px 34px;display:grid;grid-template-columns:1.6fr 1fr;gap:8px 44px;width:720px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .16s ease, transform .16s ease;box-shadow:0 30px 60px rgba(0,0,0,.45);z-index:60}
.nav-item:hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega-group h6{font-family:var(--condensed);font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--yellow);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #3a3a3a}
.mega-links{display:grid;gap:1px}
.mega-group.residential .mega-links{grid-template-columns:1fr 1fr;gap:1px 22px}
.mega-links a{display:block;padding:7px 10px;border-radius:6px;font-family:var(--condensed);font-weight:500;letter-spacing:.03em;font-size:14px;color:#E4E4E0;text-transform:none}
.mega-links a:hover{background:rgba(245,200,0,.12);color:var(--yellow)}
.mega-links a.all{color:var(--yellow);font-weight:700;display:flex;align-items:center;gap:6px;margin-top:6px;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px}
@media(max-width:980px){.mega{display:none}}

/* ───────── Service-page prose H2 (full brief copy) ───────── */
.prose h2{font-family:var(--display);font-size:42px;letter-spacing:.01em;line-height:1.02;margin:40px 0 14px;color:var(--black)}
.prose h2:first-child{margin-top:0}

/* ───────── FAQ accordion (native <details>, no JS) ───────── */
.faq-head{text-align:center;max-width:680px;margin:0 auto 48px}
.faq-head .sec-eyebrow{justify-content:center}
.faq-head .sec-title{margin-bottom:0}
.faq-wrap{max-width:880px;margin:0 auto;border-top:1px solid #D7D5CF}
details.faq-item{border-bottom:1px solid #D7D5CF}
details.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:26px 6px;font-family:var(--condensed);font-weight:700;font-size:21px;letter-spacing:.01em;color:var(--black);line-height:1.25;transition:color .15s}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary:hover{color:var(--yellow-dark)}
.faq-pm{flex:0 0 30px;width:30px;height:30px;border:2px solid #D7D5CF;border-radius:50%;position:relative;transition:all .2s}
details.faq-item summary:hover .faq-pm,details.faq-item[open] .faq-pm{border-color:var(--yellow);background:var(--yellow)}
.faq-pm::before,.faq-pm::after{content:"";position:absolute;background:var(--black);border-radius:2px;top:50%;left:50%;transition:transform .2s}
.faq-pm::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.faq-pm::after{width:2px;height:12px;transform:translate(-50%,-50%)}
details.faq-item[open] .faq-pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a-inner{padding:0 60px 28px 6px;font-size:17px;line-height:1.65;color:#4A4A47}

/* ───────── Pull-quote callout (About page) ───────── */
.callout{background:var(--black);color:#fff;padding:40px 48px;border-radius:12px;border-left:5px solid var(--yellow);margin:32px 0;font-size:19px;line-height:1.55;font-weight:500;max-width:760px;position:relative}
.callout::before{content:"⚡";position:absolute;top:-18px;right:32px;background:var(--yellow);color:var(--black);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}