/* === Mobile homepage hero fix (AEL Sentinel image) ===
   The hero image is 2.36:1 landscape, but the section becomes tall and narrow
   on phones, so 'cover' crops out the AEL container and doors.
   On mobile, render the full image at the top in 'contain' mode and stack the
   headline + supporting text below it instead of overlapping. */
@media (max-width: 767px) {
  /* Background: show full image at top, dark fill underneath */
  .elementor-6 .elementor-element.elementor-element-cc066b4:not(.elementor-motion-effects-element-type-background),
  .elementor-6 .elementor-element.elementor-element-cc066b4 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #1a1a1a !important;
  }
  /* Compact section: don't force a tall min-height */
  .elementor-6 .elementor-element.elementor-element-cc066b4 {
    min-height: auto !important;
  }
  /* Push the text content below the image area (image is ~42.4vw tall) */
  .elementor-6 .elementor-element.elementor-element-cc066b4 > .e-con-inner {
    padding-top: calc(42.4vw + 1.5rem) !important;
    padding-bottom: 2.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    margin-top: 0 !important;
  }
  /* Soften the dark overlay so it doesn't double-up with the dark fill */
  .elementor-6 .elementor-element.elementor-element-cc066b4 > .elementor-background-overlay {
    opacity: 0.25 !important;
  }
  /* Scale the hero headline so words don't break mid-word on narrow phones */
  .elementor-6 .elementor-element.elementor-element-cc066b4 h1,
  .elementor-6 .elementor-element.elementor-element-cc066b4 h2 {
    font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* === Mobile menu fix v2: open drawer directly into a clean, readable accordion menu ===
   - Hide the redundant inner hamburger toggle that the Elementor Nav widget renders
     inside the off-canvas drawer.
   - Force the top-level menu list to render expanded.
   - Keep sub-menus COLLAPSED by default; user taps a parent to expand it (accordion).
   - Override the Elementor Nav widget's white text (designed for dark dropdown bg)
     with the dark green AEL brand color so items are readable on the white drawer. */

/* Hide the redundant inner hamburger toggle */
.e-off-canvas .elementor-widget-nav-menu .elementor-menu-toggle {
  display: none !important;
}

/* Force the main nav and top-level menu list to render expanded */
.e-off-canvas .elementor-widget-nav-menu nav.elementor-nav-menu--main {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu {
  display: block !important;
}
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu > li {
  display: block !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Sub-menus are COLLAPSED by default; only shown when their parent LI has class
   .elementor-active (added by Elementor when the user taps the parent). */
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu .sub-menu,
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
  display: none !important;
  position: static !important;
  box-shadow: none !important;
  background: rgba(0,0,0,0.03) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu li.elementor-active > .sub-menu,
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu li.elementor-active > .elementor-nav-menu--dropdown,
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu li.menu-item-has-children.is-open > .sub-menu,
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu li.menu-item-has-children.is-open > .elementor-nav-menu--dropdown {
  display: block !important;
}

/* === Readability: dark text on light drawer === */
/* Top-level item text */
.e-off-canvas .elementor-widget-nav-menu a.elementor-item,
.e-off-canvas .elementor-widget-nav-menu a.menu-link {
  color: #1f3a1f !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
}
/* Active / current item gets the brand green */
.e-off-canvas .elementor-widget-nav-menu a.elementor-item-active,
.e-off-canvas .elementor-widget-nav-menu .current-menu-item > a.elementor-item {
  color: #5a8a2a !important;
}
/* Sub-menu items: slightly indented + lighter weight */
.e-off-canvas .elementor-widget-nav-menu .sub-menu a.elementor-item,
.e-off-canvas .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item {
  color: #2c4a2c !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  padding-left: 36px !important;
}
.e-off-canvas .elementor-widget-nav-menu .sub-menu .sub-menu a.elementor-item {
  padding-left: 52px !important;
  font-size: 14px !important;
}

/* Dropdown chevron: rotate when expanded */
.e-off-canvas .elementor-widget-nav-menu .sub-arrow,
.e-off-canvas .elementor-widget-nav-menu .dropdown-menu-toggle {
  display: inline-block !important;
  transition: transform 0.2s ease !important;
  color: #1f3a1f !important;
}
.e-off-canvas .elementor-widget-nav-menu li.elementor-active > a .sub-arrow,
.e-off-canvas .elementor-widget-nav-menu li.menu-item-has-children.is-open > a .sub-arrow,
.e-off-canvas .elementor-widget-nav-menu li.menu-item-has-children.is-open > a .dropdown-menu-toggle {
  transform: rotate(180deg) !important;
}