/* ============================================================
   Positive Electrical & Solar - 2026 homepage design
   Environment patches.

   companion.css is the design layer. This file is the short list of
   things the HOST page does that the design has to neutralise, kept
   separate so a design change never has to reason about them.

   Everything here is scoped to body.pe-dev-homepage, which both
   dev-homepage.php and home-2026.php emit, so the rest of the site keeps
   all of it.

   Loaded after companion.css and refinements.css by both templates.
   ============================================================ */

/* Two elements are appended to every page by things other than the theme
   stylesheet, so dequeuing theme CSS does not remove them:

   .fx-callbar  a fixed "CALL US" bar injected with its own inline <style>
                (z-index 999999). It lands on top of the design's own
                mobile CTA bar.
   .modal       the theme's Bootstrap quote modal. Bootstrap normally hides
                it with .modal{display:none}; we dequeue Bootstrap, so it
                renders as 326px of stray content at the foot of the page.

   The modal selector is a DESCENDANT selector, not a child one. It was
   "body.pe-dev-homepage > .modal" while this only ran on the dev page, where
   the theme prints the modal as a direct child of <body>. On the real
   homepage the theme nests it about three levels deeper, so the child
   selector stopped matching and the modal rendered in full. Nothing in the
   design uses .modal, so matching it at any depth is safe. */
body.pe-dev-homepage .fx-callbar,
body.pe-dev-homepage .modal { display: none !important; }

/* WP Armour prints an admin-only notice inside every form ("This form has a
   honeypot trap enabled...") with an "Act as Spam Bot" button. Logged-out
   visitors never see it, but it sits in the middle of the quote card for
   anyone reviewing the page while signed in.

   The class is .wpa-test-msg, from the plugin's own includes/css/wpa.css,
   with span.wpa-button for the button. The previous rule here matched
   .elementor-form, which stopped working the moment the quote form became
   Contact Form 7 rather than an Elementor widget.

   The honeypot field itself is left alone: the plugin already parks it
   off-screen at 1x1 with .altEmail_container, and hiding it outright would
   defeat the trap. */
body.pe-dev-homepage .wpa-test-msg,
body.pe-dev-homepage span.wpa-button { display: none !important; }

/* The mobile nav CTA used to be hidden here because showing it wrapped the nav
   onto a second row. The mockup keeps it, and the wrap had a different cause
   (the nav-menu widget growing to fill the row), so the button is back and the
   row is fixed in refinements.css instead. */

/* ============================================================
   Page preloader
   ============================================================
   The theme prints a preloader (three animated bolts over the logo on white)
   from header.php, styled in the parent theme's style.css and cleared by the
   theme's bundle JS. home-2026.php calls neither get_header() nor the theme's
   assets, so the homepage lost it. These are the parent theme's own rules,
   lifted verbatim so it looks identical, with the brand green from the
   customizer's inline override rather than the theme default orange.

   TWO INDEPENDENT WAYS OUT, on purpose. A preloader that never clears leaves
   the homepage blank, which is far worse than having no preloader at all:

     1. companion.js adds .loader-off on window load.
     2. this stylesheet hides it at 5s via an animation, with no JS involved.

   So if the JS fails, is blocked, or an asset hangs, the page still appears.
   ============================================================ */
body.pe-dev-homepage #loader-wrapper {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10000000; background-color: #fff;
  animation: ped-preloader-failsafe 0s 5s forwards;
}
body.pe-dev-homepage #loader-wrapper.loader-off { display: none !important; }
@keyframes ped-preloader-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }

body.pe-dev-homepage #loader {
  display: block; margin: -50px 0 0 -150px; height: 100px; width: 300px;
  position: relative; top: 50%; left: 50%;
}
body.pe-dev-homepage .loader {
  text-align: center; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 25px; line-height: 100px; margin: 0 auto;
}
body.pe-dev-homepage .loader .bolt {
  width: 0; height: 0; border: 15px solid transparent; position: absolute;
  margin-top: -100px; margin-left: 43%;
  border-bottom: 55px solid var(--ped-green, #8ac541);
}
body.pe-dev-homepage .loader .other { width: 0; height: 0; border: 11px solid transparent; margin-top: 40px; }
body.pe-dev-homepage .loader .one {
  margin-left: 0; transform: rotateZ(-25deg) translateY(7px);
  animation: ped-boltb .5s linear infinite;
}
body.pe-dev-homepage .loader .three {
  margin-left: 84%; transform: rotateZ(25deg) translateY(0);
  animation: ped-boltb .5s linear infinite;
}
body.pe-dev-homepage .loader .one .other,
body.pe-dev-homepage .loader .three .other {
  border-top: 55px solid var(--ped-green, #8ac541);
  animation: ped-boltt .5s linear infinite;
}
body.pe-dev-homepage .loader .two {
  border-bottom: 55px solid #fefefe; transform: translateY(-7px);
  animation: ped-boltb-slow .7s linear infinite;
}
body.pe-dev-homepage .loader .two .other {
  border-top: 55px solid #fefefe;
  animation: ped-boltt-slow .7s linear infinite;
}
body.pe-dev-homepage .loader img { margin-top: 50px; }

/* The theme's whiteb/whitet/orangeb/oranget, renamed so nothing collides. */
@keyframes ped-boltb { to { border-bottom-color: #fefefe; } }
@keyframes ped-boltt { to { border-top-color: #fefefe; } }
@keyframes ped-boltb-slow { to { border-bottom-color: var(--ped-green, #8ac541); } }
@keyframes ped-boltt-slow { to { border-top-color: var(--ped-green, #8ac541); } }

@media (prefers-reduced-motion: reduce) {
  body.pe-dev-homepage .loader .bolt,
  body.pe-dev-homepage .loader .other { animation: none !important; }
}
