/* =========================================================================
   All Drain Solutions — site overrides
   Added for: (1) Services nav dropdown (desktop hover + mobile accordion)
   and (2) standalone contact forms posting to the Azure Function.
   The Breakdance builder JS that toggled these states was removed when the
   site was exported to static HTML, so we re-enable them here.
   ========================================================================= */

/* ---- Mobile menu panel: fully reveal when open (Breakdance only set visibility) ---- */
.breakdance-menu--fullscreen.breakdance-responsive-menu--open .breakdance-menu-list {
  opacity: 1 !important;
  pointer-events: auto !important;
  /* Each exported page baked in a stale --mobile-offset-x captured from
     whatever viewport width SingleFile happened to use, which otherwise
     leaves the panel shoved off-screen (e.g. left: -956px) permanently. */
  left: 0 !important;
}

/* ---- Mobile menu panel styling: match the dropdown (black bg, white text) ----
   The top-level mobile menu links use Breakdance defaults (white bg, red
   text, medium weight). Override to match the Services dropdown panel:
   black background, white Verdana bold text. Scoped to the fullscreen
   mobile menu only so the desktop nav bar is untouched. */
@media (max-width: 1024px) {
  .breakdance-menu--fullscreen .breakdance-menu-list {
    background: #000 !important;
  }
  .breakdance-menu--fullscreen .breakdance-menu-list > li > .breakdance-menu-link,
  .breakdance-menu--fullscreen .breakdance-menu-list > li > .breakdance-dropdown-toggle > .breakdance-menu-link {
    color: #fff !important;
    font-family: Verdana, Geneva, sans-serif !important;
    font-weight: 700 !important;
  }
  .breakdance-menu--fullscreen .breakdance-menu-list > li > .breakdance-menu-link:hover,
  .breakdance-menu--fullscreen .breakdance-menu-list > li > .breakdance-dropdown-toggle > .breakdance-menu-link:hover {
    background: #222 !important;
  }
  /* Close button and hamburger toggle also get white text on black */
  .breakdance-menu--fullscreen .breakdance-menu-close-button {
    color: #fff !important;
  }
}

/* ---- Mobile accordion submenu: reveal when toggled open ----
   This menu instance uses Breakdance's "dropdown" (absolute-overlay) mode,
   not its "accordion" (in-flow) mode, so the floater panel is still
   position:absolute — on mobile that makes it overlay on top of the rest of
   the menu list instead of pushing the other links down, hiding the
   submenu behind whatever sits below Services. Force it back into normal
   flow when the mobile accordion is toggled open.

   IMPORTANT: scoped to max-width:1024px because .breakdance-menu--collapse
   is on the nav at ALL viewport sizes (it's a Breakdance builder class, not
   a mobile-only one). Without this media-query guard the position:static
   override would also apply on desktop, making the dropdown flow in-place
   inside the header instead of floating below it as an overlay. */
@media (max-width: 1024px) {
  .breakdance-menu--collapse .breakdance-dropdown--open .breakdance-dropdown-floater {
    position: static !important;
    transform: none !important;
  }
  .breakdance-menu--collapse .breakdance-dropdown-links.is-visible {
    height: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
}

/* ---- Services dropdown panel styling (desktop + mobile) ----
   Both the desktop hover overlay and the mobile accordion panel use the
   same .breakdance-dropdown-links container. Override the Breakdance
   defaults (transparent bg, red text, normal weight) with a uniform
   black background, white Verdana bold text. */
.breakdance-dropdown-floater {
  background: #000 !important;
}
.breakdance-dropdown-links {
  background: #000 !important;
}
.breakdance-dropdown-links .breakdance-dropdown-link,
.breakdance-dropdown-links .menu-item-link {
  color: #fff !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-weight: 700 !important;
}
.breakdance-dropdown-links .breakdance-dropdown-link:hover,
.breakdance-dropdown-links .menu-item-link:hover {
  background: #222 !important;
}

/* ---- Dropdown caret rotation feedback ---- */
.breakdance-dropdown--open > .breakdance-dropdown-toggle .breakdance-menu-link-arrow {
  transform: rotate(180deg);
}

/* ---- Backdrop overlay behind the mobile menu (injected by site.js) ----
   The overlay is appended to <body>, a sibling of the page's <header>
   (which is itself position:relative with z-index:999, making it its own
   stacking context). The menu panel's z-index:1000 only wins inside that
   header's context — against the header itself, in the root stacking
   context, the overlay must be strictly lower or it paints over the whole
   header (menu panel included) because it comes later in DOM order. */
.ads-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ads-menu-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================================
   Contact form (replaces JetFormBuilder). Keeps jet-form-builder classes so
   the original Breakdance form styling still applies.
   ========================================================================= */
.ads-form-message {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: .95rem;
  display: none;
}
.ads-form-message.is-success {
  display: block;
  border: 1px solid #2e7d32;
  background: #e8f5e9;
  color: #1b5e20;
}
.ads-form-message.is-error {
  display: block;
  border: 1px solid #c62828;
  background: #ffebee;
  color: #b71c1c;
}
.ads-contact-form.is-loading {
  opacity: .6;
  pointer-events: none;
}
/* Honeypot field — hidden from real users, visible to bots */
.ads-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}