/* 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 */

/* 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: tighten menu item spacing so the row fits on one line */
@media (min-width: 1025px) {
  .elementor-nav-menu > li > .elementor-item,
  .elementor-nav-menu .elementor-item {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 15px;
    white-space: nowrap;
  }
  .elementor-nav-menu {
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  /* Desktop nested-submenu flyout: child menu of a child menu opens to the
     RIGHT of its parent item, not below it.
     Targets: any ul.sub-menu that is itself inside another ul.sub-menu. */
  nav.elementor-nav-menu--main ul.sub-menu ul.sub-menu,
  nav.elementor-nav-menu--main ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    min-width: 220px;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    border-radius: 4px !important;
    z-index: 100;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
  }
  /* Parent of nested submenu needs position:relative so the absolute child
     anchors correctly */
  nav.elementor-nav-menu--main ul.sub-menu li.menu-item-has-children {
    position: relative;
  }
  /* Show flyout on hover of its parent li (or hover on the flyout itself,
     so the user can move their cursor INTO it without it closing) */
  nav.elementor-nav-menu--main ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu,
  nav.elementor-nav-menu--main ul.sub-menu li.menu-item-has-children:focus-within > ul.sub-menu {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Flyout items: white bg, subtle hover */
  nav.elementor-nav-menu--main ul.sub-menu ul.sub-menu li {
    list-style: none;
    margin: 0;
    width: 100%;
  }
  nav.elementor-nav-menu--main ul.sub-menu ul.sub-menu .elementor-sub-item,
  nav.elementor-nav-menu--main ul.sub-menu ul.sub-menu a {
    display: block !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    color: #111 !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color .12s ease, color .12s ease;
  }
  nav.elementor-nav-menu--main ul.sub-menu ul.sub-menu .elementor-sub-item:hover,
  nav.elementor-nav-menu--main ul.sub-menu ul.sub-menu a:hover {
    background: #f5f5f5 !important;
    color: #d97706 !important; /* gold accent matching brand */
  }

  /* Make the parent anchor fill the LI so the flyout sits flush with the
     visible button edge (no gap) and the caret can vertical-align with text */
  nav.elementor-nav-menu--main ul.sub-menu li.menu-item-has-children > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  nav.elementor-nav-menu--main ul.sub-menu li.menu-item-has-children > a .sub-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: none !important; /* reset; rotation is only on the inner icon */
    font-size: 12px;
  }
  /* Rotate ONLY the inner icon (-90deg) so the caret points right.
     Rotating both span+icon would double-rotate to point up. */
  nav.elementor-nav-menu--main ul.sub-menu li.menu-item-has-children > a .sub-arrow i {
    display: inline-block !important;
    transform: rotate(-90deg) !important;
    transition: transform .15s ease;
    line-height: 1 !important;
  }
}

/* Tablet-specific override: pin the dropdown 89px from top */
@media (min-width: 768px) and (max-width: 1024px) {
  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: 1024px) {
  .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);
  }
}