/* Static-site responsive nav fixes
   - Override Elementor's JS-baked inline width on sticky header
   - Reduce desktop menu item padding so 8 items fit on one line
   - Make hamburger visible on tablet/mobile
   - Wire dropdown menu open/close states */

/* GoHighLevel form/booking iframes sit at the top of their hero column and
   slip under the fixed nav. Apply the same 100px top / 80px bottom margin to
   the column wrapper that the original Elementor design uses. */
.elementor-column:has(iframe[src*="go.belovedbuiltaz.com/widget/form"]) > .elementor-element-populated,
.elementor-column:has(iframe[src*="go.belovedbuiltaz.com/widget/booking"]) > .elementor-element-populated {
  margin: 100px 0 80px 0 !important;
}

/* 1) Sticky header should always span the viewport, not the captured width */
.elementor-location-header .elementor-sticky--active,
.elementor-sticky--active {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* When the page is scrolled past the hero, the sticky header gets a solid
   white background and dark text so it remains readable over body content. */
.elementor-sticky--active.ssn-scrolled {
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: background-color .2s ease;
}
/* Scoped to the main horizontal nav only — NOT the mobile/tablet dropdown,
   which has its own dark background and needs white text regardless of scroll. */
.elementor-sticky--active.ssn-scrolled .elementor-nav-menu--main .elementor-item,
.elementor-sticky--active.ssn-scrolled .elementor-nav-menu--main a {
  color: #122836 !important;
}
.elementor-sticky--active.ssn-scrolled .elementor-nav-menu--main .elementor-item:hover,
.elementor-sticky--active.ssn-scrolled .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: #ed5b25 !important;
}
.elementor-sticky--active.ssn-scrolled .elementor-menu-toggle {
  color: #122836 !important;
}

/* 2) Desktop: keep the 8-item menu on one line WITHOUT running under the
   "Discovery Call" button.
   The header is three Elementor columns (logo | nav | CTA) and the CTA column
   is deliberately pulled left with `margin-left:-23%`, so the usable nav width
   is (CTA button left edge − nav column left edge), not the nav column width:

       viewport   1025  1100  1200  1280  1366  1440  1600  1920
       usable px   411   441   481   513   548   577   642   770

   A flat 15px/10px menu measures ~588px, which is why "Our Work" and "Contact"
   were rendering underneath the button at every width below ~1600px. Scale the
   type and padding per breakpoint so the row always fits its usable space. */
@media (min-width: 1200px) {
  .elementor-nav-menu {
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .elementor-nav-menu > li > .elementor-item,
  .elementor-nav-menu .elementor-item {
    white-space: nowrap;
  }
}

/* The header's CTA column carries `margin-left:-23%` from the original
   Elementor design, which drags the "Discovery Call" button back across the
   nav column and on top of the last two menu items. Let the column sit in its
   own track on desktop; the hamburger owns everything below 1200px. */
@media (min-width: 1200px) {
  .elementor-location-header .elementor-column:has(> .elementor-widget-wrap .cta-btn) > .elementor-element-populated {
    margin-left: 0 !important;
    --e-column-margin-left: 0 !important;
  }
}

/* Measured menu widths (8 items, one line):
     11px/5px → 508px   12px/6px → 561px   13px/7px → 614px   15px/10px → 736px
   Usable width is (CTA column left edge − nav column left edge), which the
   `.cta-btn` un-pull above restores to the full nav column. Step the type up
   only where the row demonstrably clears the button. */
@media (min-width: 1200px) and (max-width: 1365px) {
  .elementor-nav-menu--main .elementor-item {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 11px !important;
  }
}

@media (min-width: 1366px) and (max-width: 1699px) {
  .elementor-nav-menu--main .elementor-item {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 1700px) and (max-width: 1919px) {
  .elementor-nav-menu--main .elementor-item {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 1920px) {
  .elementor-nav-menu--main .elementor-item {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 15px !important;
  }
}

/* Tablet-specific override: pin the dropdown 89px from top */
@media (min-width: 768px) and (max-width: 1199px) {
  nav.elementor-nav-menu--dropdown,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    --ssn-header-h: 89px !important;
    top: 89px !important;
    margin-top: 1px !important;
  }
}

/* 3) Tablet/Mobile: make hamburger visible + dropdown work */
@media (max-width: 1199px) {
  /* Elementor only hides the horizontal nav at its own 1024px tablet
     breakpoint. We hand over to the hamburger at 1199px, so the 1025–1199px
     band has to be hidden here or both navs render at once. */
  .elementor-location-header nav.elementor-nav-menu--main,
  .elementor-location-header .elementor-nav-menu--main.elementor-nav-menu__container {
    display: none !important;
  }
  .elementor-menu-toggle {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    font-size: 22px !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    align-items: center;
    justify-content: center;
  }
  .elementor-menu-toggle .elementor-menu-toggle__icon-open,
  .elementor-menu-toggle .elementor-menu-toggle__icon-close {
    width: 22px;
    height: 22px;
    color: inherit;
  }
  .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon-open { display: none; }
  .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon-close { display: none; }
  /* Outer mobile dropdown nav appears below the header when active.
     Use fixed positioning so it spans the full viewport regardless of which
     column inside the header it is anchored to in markup. */
  /* Boost specificity to beat Elementor's `.elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active+.elementor-nav-menu__container` rule */
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
  nav.elementor-nav-menu--dropdown {
    display: none !important;
    /* Break out of any narrow parent column — fixed + 100vw spans the viewport */
    position: fixed !important;
    top: var(--ssn-header-h, 100px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    /* Scroll if the menu is taller than 70% of the screen */
    max-height: 70vh !important;
    overflow-y: auto !important;
    background: #122836 !important;
    background-color: #122836 !important;
    z-index: 9998 !important;
    /* Generous padding so items aren't cramped */
    padding: 15px 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    /* Cancel Elementor's scaleY animation that can hide content */
    transform: none !important;
    animation: none !important;
  }
  nav.elementor-nav-menu--dropdown.ssn-open {
    display: block !important;
  }
  nav.elementor-nav-menu--dropdown ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav.elementor-nav-menu--dropdown li {
    list-style: none;
    margin: 0;
    width: 100%;
  }
  nav.elementor-nav-menu--dropdown .elementor-item {
    display: block !important;
    /* 30px sides, larger font so items aren't cramped */
    padding: 12px 30px !important;
    font-size: 17px !important;
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
    white-space: normal !important;
    border: none !important;
  }
  nav.elementor-nav-menu--dropdown .elementor-item:hover,
  nav.elementor-nav-menu--dropdown .elementor-item:focus {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }
  /* Submenu styling: hidden by default, shown when parent has .sub-menu-open */
  nav.elementor-nav-menu--dropdown ul.sub-menu {
    list-style: none;
    padding: 0 0 0 16px !important;
    margin: 0 !important;
    display: none !important;
    position: static !important;
    background: rgba(0,0,0,.15) !important;
    box-shadow: none !important;
    width: auto !important;
  }
  nav.elementor-nav-menu--dropdown li.sub-menu-open > ul.sub-menu {
    display: block !important;
  }
  nav.elementor-nav-menu--dropdown ul.sub-menu a,
  nav.elementor-nav-menu--dropdown ul.sub-menu .elementor-sub-item {
    display: block !important;
    padding: 10px 24px 10px 36px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.85) !important;
    background: transparent !important;
    text-align: left !important;
    text-decoration: none !important;
  }
  nav.elementor-nav-menu--dropdown ul.sub-menu a:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
  }
  /* Show the SmartMenus caret icon inline next to the parent text, not on a new line */
  nav.elementor-nav-menu--dropdown li.menu-item-has-children > a .sub-arrow {
    display: inline-block !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    transition: transform .2s ease;
    font-size: 0.85em;
    line-height: 1;
  }
  nav.elementor-nav-menu--dropdown li.menu-item-has-children > a .sub-arrow i {
    display: inline-block !important;
    color: inherit !important;
    vertical-align: middle !important;
  }
  /* Rotate when submenu is open */
  nav.elementor-nav-menu--dropdown li.sub-menu-open.menu-item-has-children > a .sub-arrow {
    transform: rotate(180deg);
  }
}

/* Blog single-post pages don't have a hero image behind the nav, so white nav text
   sat on white body. Paint the header navy to match the live site. */
body.single-post header.elementor-location-header > section:not(.ssn-scrolled),
body.single-post header.elementor-location-header .elementor-sticky:not(.ssn-scrolled) {
  background-color: #122836 !important;
  background-image: none !important;
}
body.single-post .elementor-sticky:not(.ssn-scrolled) .elementor-nav-menu--main .elementor-item,
body.single-post .elementor-sticky:not(.ssn-scrolled) .elementor-nav-menu--main a {
  color: #ffffff !important;
}
body.single-post .elementor-sticky:not(.ssn-scrolled) .elementor-nav-menu--main .elementor-item:hover,
body.single-post .elementor-sticky:not(.ssn-scrolled) .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: #ed5b25 !important;
}
body.single-post .elementor-sticky:not(.ssn-scrolled) .elementor-menu-toggle {
  color: #ffffff !important;
}
/* Elementor's reveal animation leaves header widgets at opacity:0 because the
   animating JS was stripped during capture. Force them visible on blog posts. */
body.single-post header.elementor-location-header .elementor-widget,
body.single-post header.elementor-location-header .elementor-invisible {
  opacity: 1 !important;
}

/* === Desktop hover dropdown for the main horizontal nav ===
   The homepage-type pages ship this inline; the gallery/project/blog pages do
   not, so their "About" / "Services" submenus never appeared on hover. Shared
   here so every page gets working desktop dropdowns. Scoped to the desktop
   breakpoint (>=1025px) where the horizontal main nav is shown. */
@media (min-width: 1200px) {
  .elementor-nav-menu--main .menu-item-has-children { position: relative; }
  .elementor-nav-menu--main .menu-item-has-children > .sub-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu {
    display: block !important;
  }
  /* Nested submenus (flyout right) */
  .elementor-nav-menu--main .sub-menu .menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
  }
  .elementor-nav-menu--main .sub-menu li { display: block !important; width: 100%; }
  .elementor-nav-menu--main .sub-menu a {
    padding: 10px 20px !important;
    white-space: nowrap;
    display: block !important;
    color: #122836 !important;
  }
  .elementor-nav-menu--main .sub-menu a:hover {
    background: #f5f5f5;
    color: #ed5b25 !important;
  }
}