/* Zappy Electric Co. — brand CSS hooks
   Only for effects Elementor's UI cannot express. Everything else is set on
   the widget itself. Containers are targeted by element-ID PREFIX so one rule
   covers every instance (Elementor containers ignore the CSS Classes field).
*/

:root{
  --z-navy:#0F2540; --z-navy700:#1E4064; --z-amber:#F5A623; --z-amber-dk:#D98A0B;
  --z-amber-soft:#FEF3E0; --z-gray:#F1F4F7; --z-border:#DFE5EC; --z-body:#4A5A6E;
  --z-muted:#93A1B3; --z-on-navy:#C3D0E0;
  --z-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. Diagonal safety stripe (repeating-linear-gradient) ---------- */
[id^="zstripe"]{
  height:7px !important; min-height:7px !important; padding:0 !important;
  background-image:repeating-linear-gradient(-45deg,var(--z-amber) 0 18px,var(--z-navy) 18px 36px) !important;
  background-size:auto !important;
}

/* ---------- 2. Card: hover lift + amber top-border reveal ---------- */
[id^="zcard"]{
  position:relative; overflow:hidden;
  transition:transform .25s var(--z-ease),box-shadow .25s var(--z-ease),border-color .25s var(--z-ease);
}
[id^="zcard"]::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--z-amber); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--z-ease); z-index:2;
}
[id^="zcard"]:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(15,37,64,.09);
  border-color:transparent !important;
}
[id^="zcard"]:hover::before{ transform:scaleX(1); }

/* Icon swaps navy->amber as the card is hovered */
[id^="zcard"] .elementor-icon,
[id^="zcard"] .xpro-icon-box-icon{ transition:background-color .25s var(--z-ease),color .25s var(--z-ease); }
[id^="zcard"]:hover .elementor-icon{ background-color:var(--z-amber) !important; color:var(--z-navy) !important; }
[id^="zcard"]:hover .elementor-icon svg{ fill:var(--z-navy) !important; }

/* ---------- 3. Image zoom inside a hovered card / frame ---------- */
[id^="zimg"] img{ transition:transform .5s var(--z-ease); will-change:transform; }
[id^="zimg"]:hover img,
[id^="zcard"]:hover [id^="zimg"] img{ transform:scale(1.05); }

/* ---------- 4. Media frame: amber offset block behind the image ---------- */
[id^="zaccent"]{ position:relative; }
[id^="zaccent"]::before{
  content:""; position:absolute; left:-18px; bottom:-18px;
  width:46%; height:58%; background:var(--z-amber); border-radius:16px; z-index:0;
}
[id^="zaccent"] > *{ position:relative; z-index:1; }
@media (max-width:1024px){ [id^="zaccent"]::before{ display:none; } }

/* ---------- 4b. Hero headline accent ---------- */
.elementor-heading-title em{ font-style:normal; color:var(--z-amber); }

/* ---------- 5. Eyebrow: leading amber dash ---------- */
[id^="zeyebrow"] .elementor-heading-title::before,
.z-eyebrow .elementor-heading-title::before{
  content:""; display:inline-block; width:28px; height:3px;
  background:var(--z-amber); border-radius:2px;
  vertical-align:middle; margin-right:10px; margin-bottom:3px;
}

/* ---------- 6. Consistent card image cropping ---------- */
[id^="zimg"] img,
.z-cover img{ object-fit:cover !important; width:100% !important; display:block; }

/* ---------- 7. Buttons: lift on hover ---------- */
.elementor-button{ transition:transform .18s var(--z-ease),background-color .18s var(--z-ease),color .18s var(--z-ease),box-shadow .18s var(--z-ease) !important; }
.elementor-button:hover{ transform:translateY(-2px); }

/* ---------- 8. Town chips ---------- */
[id^="ztown"] .elementor-button{ box-shadow:none !important; }

/* ---------- 9. Accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.elementor-button:focus-visible{
  outline:3px solid var(--z-amber) !important; outline-offset:3px !important;
}

/* ---------- 10. WPForms — match the site's form styling ---------- */
.wpforms-container .wpforms-field-label{
  font-family:Montserrat,sans-serif !important; font-weight:600 !important;
  font-size:14px !important; color:var(--z-navy) !important; margin-bottom:7px !important;
}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container select,
.wpforms-container textarea{
  font-family:Inter,sans-serif !important; font-size:16px !important;
  color:var(--z-navy) !important; background:#fff !important;
  border:1.5px solid var(--z-border) !important; border-radius:8px !important;
  padding:14px 16px !important; width:100% !important; max-width:100% !important;
  transition:border-color .2s var(--z-ease),box-shadow .2s var(--z-ease) !important;
}
.wpforms-container textarea{ min-height:128px !important; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{
  border-color:var(--z-amber) !important; outline:none !important;
  box-shadow:0 0 0 4px rgba(245,166,35,.16) !important;
}
.wpforms-container .wpforms-required-label{ color:var(--z-amber-dk) !important; }
.wpforms-container button[type=submit]{
  font-family:Montserrat,sans-serif !important; font-weight:700 !important;
  font-size:15px !important; letter-spacing:.2px !important;
  background:var(--z-amber) !important; color:var(--z-navy) !important;
  border:0 !important; border-radius:8px !important;
  padding:17px 32px !important; width:100% !important;
  box-shadow:0 6px 18px rgba(245,166,35,.34) !important;
  transition:transform .18s var(--z-ease),background-color .18s var(--z-ease) !important;
}
.wpforms-container button[type=submit]:hover{
  background:var(--z-amber-dk) !important; transform:translateY(-2px);
}
.wpforms-confirmation-container-full{
  background:var(--z-amber-soft) !important; border:0 !important;
  border-left:5px solid var(--z-amber) !important; border-radius:10px !important;
  color:var(--z-navy) !important;
}

/* ---------- 10b. Header: keep the nav on one line ---------- */
#zheader .xpro-elementor-navigation-menu > li > a,
#zheader .xpro-menu-item-title,
#zheader nav a{ font-size:14.5px !important; padding-left:11px !important; padding-right:11px !important; white-space:nowrap; }
@media (max-width:1300px){
  #zheader .xpro-elementor-navigation-menu > li > a{ font-size:13.5px !important; padding-left:8px !important; padding-right:8px !important; }
}

/* ---------- 10c. Header responsive tidy-up ---------- */
@media (max-width:1024px){
  .z-header-phone{ display:none !important; }
  #zheader .e-con-inner{ gap:0 !important; }
}
@media (max-width:767px){
  .z-topbar-right{ display:none !important; }
  .z-topbar-right + *{ margin-top:0 !important; }
}
@media (max-width:600px){
  #zheader .elementor-button{ padding:11px 16px !important; font-size:13px !important; }
}

/* ---------- 10d. Sticky header (matches the static build) ---------- */
.xpro-theme-builder-header{
  position:sticky !important; top:0; z-index:999;
  transition:box-shadow .25s var(--z-ease);
}
.admin-bar .xpro-theme-builder-header{ top:32px; }
@media (max-width:782px){ .admin-bar .xpro-theme-builder-header{ top:46px; } }
.xpro-theme-builder-header #zheader{ box-shadow:0 6px 24px rgba(15,37,64,.09); }

/* ---------- 11. Xpro nav: brand colours (defaults are generic blue) ---------- */
.xpro-elementor-navigation-menu a,
.xpro-menu-item-title,
.xpro-elementor-nav-menu a{
  font-family:Montserrat,sans-serif !important; font-weight:600 !important;
  color:var(--z-navy) !important;
}
.xpro-elementor-navigation-menu a:hover,
.xpro-elementor-navigation-menu li.current-menu-item > a{
  color:var(--z-amber-dk) !important;
}

/* ---------- 12. Astra resets so Elementor owns the page ---------- */
.ast-container,.site-content .ast-container{ max-width:100% !important; padding:0 !important; }
.entry-content > .elementor{ margin:0 !important; }
#primary{ margin:0 !important; padding:0 !important; }

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [id^="zcard"],[id^="zimg"] img,.elementor-button{ transition:none !important; }
  [id^="zcard"]:hover,.elementor-button:hover{ transform:none !important; }
  [id^="zimg"]:hover img{ transform:none !important; }
}