/* ============================================================
   ASTRA MOBILE OFF-CANVAS MENU — FIX v3
   
   KEY CHANGES FROM v2:
   - Removed ALL background-color overrides on the drawer itself
     (Astra's customizer controls that — navy blue is intentional)
   - All text colors are now light to read on dark backgrounds
   - Removed border-bottom lines that looked bad on dark bg
   - Sub-menus get a slightly darker overlay, not white
   - Left-aligned sub-menu items (was center-justified)
   - Caret targets BOTH the HFB span.dropdown-menu-toggle
     AND the standalone button.ast-menu-toggle
   - Removed justify-content: space-between from links
     (was pushing text left and caret right awkwardly)

   Brand accent: #c0392b (TaxWatch red)
   ============================================================ */

/* ----------------------------------------------------------
   0. FOCUS RING FIXES
      Astra's global input:focus rule bleeds a dotted border onto
      the hamburger trigger and the close button. Kill it cleanly
      without nuking keyboard accessibility (we add a clean
      box-shadow focus ring instead).
   ---------------------------------------------------------- */

/* Hamburger trigger button */
body [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus,
body [data-section="section-header-mobile-trigger"] .ast-button-wrap button:focus,
body .ast-mobile-menu-trigger-minimal:focus,
body .main-header-menu-toggle:focus,
body .ast-mobile-header-wrap .ast-button-wrap button:focus {
  outline: none !important;
  border: none !important;
  border-style: none !important;
  box-shadow: none !important;
}

/* Close (×) button inside the popup */
body #ast-mobile-popup .ast-mobile-popup-close:focus,
body #ast-mobile-popup button:focus,
body #ast-mobile-popup .ast-menu-toggle:focus {
  outline: none !important;
  border: none !important;
  border-style: none !important;
  box-shadow: none !important;
}

/* Keyboard-only users: restore a visible but clean focus ring
   using :focus-visible so mouse clicks don't trigger it */
body [data-section="section-header-mobile-trigger"] .ast-button-wrap button:focus-visible,
body .ast-mobile-menu-trigger-minimal:focus-visible {
  outline: 2px solid #c0392b !important;
  outline-offset: 2px !important;
  border-style: none !important;
}

body #ast-mobile-popup button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6) !important;
  outline-offset: 2px !important;
  border-style: none !important;
}

/* ----------------------------------------------------------
   1. OVERLAY
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-mobile-popup-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ----------------------------------------------------------
   2. DRAWER — let Astra's customizer color show through.
      We only fix structure, not background.
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-mobile-popup-drawer {
  box-shadow: 6px 0 40px rgba(0,0,0,0.35) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ----------------------------------------------------------
   3. INNER / CONTENT WRAPPERS — reset extra padding
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-mobile-popup-inner {
  padding: 0 !important;
}

body #ast-mobile-popup .ast-mobile-popup-content {
  padding: 0 !important;
}

/* ----------------------------------------------------------
   4. TOP-LEVEL NAV <ul> reset
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-nav-menu,
body #ast-mobile-popup #ast-hf-mobile-menu {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ----------------------------------------------------------
   5. TOP-LEVEL <li>
      - No extra margin/padding
      - Subtle separator that works on dark backgrounds
      - Staggered slide-in animation
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-nav-menu > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  opacity: 0;
  transform: translateX(-10px);
  animation: ftw-slidein 0.28s cubic-bezier(0.4,0,0.2,1) forwards;
}

body #ast-mobile-popup .ast-nav-menu > li:last-child {
  border-bottom: none !important;
}

body #ast-mobile-popup .ast-nav-menu > li:nth-child(1)  { animation-delay: 0.04s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(2)  { animation-delay: 0.08s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(3)  { animation-delay: 0.12s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(4)  { animation-delay: 0.16s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(5)  { animation-delay: 0.20s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(6)  { animation-delay: 0.24s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(7)  { animation-delay: 0.28s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(8)  { animation-delay: 0.32s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(9)  { animation-delay: 0.36s; }
body #ast-mobile-popup .ast-nav-menu > li:nth-child(10) { animation-delay: 0.40s; }

@keyframes ftw-slidein {
  to { opacity: 1; transform: translateX(0); }
}

/* ----------------------------------------------------------
   6. ALL MENU LINKS — light text for dark drawer bg
      Left-aligned, NOT space-between.
      Padding-right reserves space for the caret button.
   ---------------------------------------------------------- */
body .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link,
body .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > a,
body #ast-mobile-popup .ast-nav-menu .menu-item > .menu-link,
body #ast-mobile-popup .ast-nav-menu .menu-item > a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* LEFT-aligned text */
  gap: 0 !important;
  padding: 14px 56px 14px 20px !important;  /* right pad = caret zone */
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  color: rgba(255,255,255,0.92) !important; /* light on dark bg */
  text-decoration: none !important;
  text-transform: none !important;
  background: transparent !important;
  border-bottom: none !important;           /* no lines on links; <li> handles separator */
  position: relative !important;
  overflow: hidden !important;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover */
body .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link:hover,
body .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > a:hover,
body #ast-mobile-popup .ast-nav-menu .menu-item > .menu-link:hover,
body #ast-mobile-popup .ast-nav-menu .menu-item > a:hover {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.08) !important;
  padding-left: 26px !important;
}

/* Current / active */
body #ast-mobile-popup .ast-nav-menu .current-menu-item > .menu-link,
body #ast-mobile-popup .ast-nav-menu .current-menu-item > a,
body #ast-mobile-popup .ast-nav-menu .current-menu-ancestor > .menu-link,
body #ast-mobile-popup .ast-nav-menu .current-menu-ancestor > a {
  color: #ffffff !important;
  font-weight: 700 !important;
  background-color: rgba(192, 57, 43, 0.25) !important;
}

/* Left accent bar */
body #ast-mobile-popup .ast-nav-menu .menu-item > a::before,
body #ast-mobile-popup .ast-nav-menu .menu-item > .menu-link::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 18% !important;
  height: 64% !important;
  width: 3px !important;
  background: #c0392b !important;
  border-radius: 0 3px 3px 0 !important;
  transform: scaleY(0) !important;
  transform-origin: center !important;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}

body #ast-mobile-popup .ast-nav-menu .menu-item > a:hover::before,
body #ast-mobile-popup .ast-nav-menu .menu-item > .menu-link:hover::before,
body #ast-mobile-popup .ast-nav-menu .current-menu-item > a::before,
body #ast-mobile-popup .ast-nav-menu .current-menu-item > .menu-link::before {
  transform: scaleY(1) !important;
}

/* ----------------------------------------------------------
   7. HFB INLINE DROPDOWN ARROW SPAN
      Astra HFB puts a <span role="button" class="dropdown-menu-toggle
      ast-header-navigation-arrow"> INSIDE the <a>.
      Hide it completely — the external button.ast-menu-toggle
      is our sole caret. Use every known selector variant.
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-nav-menu .dropdown-menu-toggle,
body #ast-mobile-popup .ast-nav-menu .ast-header-navigation-arrow,
body #ast-mobile-popup .ast-nav-menu a > span[role="button"],
body #ast-mobile-popup .ast-nav-menu .menu-link > span {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ----------------------------------------------------------
   8. EXTERNAL CARET BUTTON (button.ast-menu-toggle)

   CRITICAL FIX: height must be exactly the link row height,
   NOT 100% of the <li> — when the sub-menu expands the <li>
   grows and 100% would move the caret down to the middle.
   We use a fixed height that matches the link padding instead.
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-nav-menu li.menu-item-has-children {
  position: relative !important;
}

body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle {
  all: unset !important;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 0 !important;               /* always anchored to top of <li> */
  right: 0 !important;
  width: 52px !important;
  height: 48px !important;         /* fixed — matches link row, never grows */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.5) !important;
  border-left: 1px solid rgba(255,255,255,0.1) !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  z-index: 2 !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle:hover {
  color: rgba(255,255,255,0.9) !important;
  background-color: rgba(255,255,255,0.08) !important;
}

/* Hide Astra's SVG — we draw our own chevron */
body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle svg,
body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle .ast-icon,
body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle span {
  display: none !important;
}

/* CSS chevron via ::after only — no ::before interference */
body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle::before {
  display: none !important;
  content: none !important;
}

body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) translateY(-3px) !important;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), color 0.2s ease !important;
  flex-shrink: 0 !important;
}

/* Open state — rotate to upward-pointing chevron */
body #ast-mobile-popup .ast-nav-menu .ast-menu-toggle[aria-expanded="true"]::after,
body #ast-mobile-popup .ast-nav-menu li.ast-submenu-expanded > .ast-menu-toggle::after {
  transform: rotate(-135deg) translateY(3px) !important;
  color: #c0392b !important;
}

/* Sub-menu level carets — same fixed height */
body #ast-mobile-popup .ast-nav-menu .sub-menu .ast-menu-toggle {
  height: 40px !important;
}

/* ----------------------------------------------------------
   9. SUB-MENU <ul>
      Slightly darker than the drawer to show depth.
      Uses max-height animation (JS adds .ast-submenu-open).
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-nav-menu .sub-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(0,0,0,0.2) !important;  /* dark overlay, not white */
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  display: block !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 0.32s ease, opacity 0.25s ease !important;
}

/* Open */
body #ast-mobile-popup .ast-nav-menu .sub-menu.ast-submenu-open,
body #ast-mobile-popup .ast-nav-menu li.ast-submenu-expanded > .sub-menu {
  max-height: 2000px !important;
  opacity: 1 !important;
}

/* Sub-menu <li> */
body #ast-mobile-popup .ast-nav-menu .sub-menu > li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  position: relative !important;
}

body #ast-mobile-popup .ast-nav-menu .sub-menu > li:last-child {
  border-bottom: none !important;
}

/* Sub-menu links */
body .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu .menu-item > .menu-link,
body .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu .menu-item > a,
body #ast-mobile-popup .ast-nav-menu .sub-menu .menu-item > .menu-link,
body #ast-mobile-popup .ast-nav-menu .sub-menu .menu-item > a {
  padding: 11px 52px 11px 36px !important;  /* indented left */
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.72) !important;
  background: transparent !important;
  border-bottom: none !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

body #ast-mobile-popup .ast-nav-menu .sub-menu .menu-item > a:hover,
body #ast-mobile-popup .ast-nav-menu .sub-menu .menu-item > .menu-link:hover {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.07) !important;
  padding-left: 42px !important;
}

/* Sub-menu accent bar offset */
body #ast-mobile-popup .ast-nav-menu .sub-menu .menu-item > a::before,
body #ast-mobile-popup .ast-nav-menu .sub-menu .menu-item > .menu-link::before {
  left: 20px !important;
}

/* 3rd-level */
body #ast-mobile-popup .ast-nav-menu .sub-menu .sub-menu .menu-item > a,
body #ast-mobile-popup .ast-nav-menu .sub-menu .sub-menu .menu-item > .menu-link {
  padding-left: 50px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
}

/* Sub-menu caret is handled in Section 8 above */

/* ----------------------------------------------------------
   10. RIPPLE (JS injects span.ftw-ripple)
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-nav-menu a .ftw-ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  pointer-events: none !important;
  transform: scale(0) !important;
  animation: ftw-ripple 0.5s ease-out forwards !important;
}

@keyframes ftw-ripple {
  to { transform: scale(5); opacity: 0; }
}

/* ----------------------------------------------------------
   11. SCROLLBAR
   ---------------------------------------------------------- */
body #ast-mobile-popup .ast-mobile-popup-drawer::-webkit-scrollbar {
  width: 3px !important;
}
body #ast-mobile-popup .ast-mobile-popup-drawer::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2) !important;
  border-radius: 3px !important;
}