/*
 * Atelier Backstage: visual layer on Astra's native responsive navigation.
 * The native Astra toggle, menu items and accessibility behavior remain intact.
 */
body.ast-header-break-point { --ab-menu-top: 0px; }
body.admin-bar.ast-header-break-point { --ab-menu-top: 46px; }
@media (min-width: 783px) {
  body.admin-bar.ast-header-break-point { --ab-menu-top: 32px; }
}

body.ast-header-break-point #ast-mobile-header .ast-mobile-header-content {
  position: fixed !important;
  inset: var(--ab-menu-top) 0 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(100vh - var(--ab-menu-top)) !important;
  height: calc(100dvh - var(--ab-menu-top)) !important;
  margin: 0 !important;
  padding: max(90px, env(safe-area-inset-top)) var(--ab-menu-pad) max(40px, env(safe-area-inset-bottom)) !important;
  background: var(--ab-menu-violett) !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  z-index: 100000 !important;
}
/* Astra's menu button controls whether the full-screen layer is open. */
body.ast-header-break-point #ast-mobile-header:has(.main-header-menu-toggle[aria-expanded="true"]) .ast-mobile-header-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: var(--ab-menu-justify) !important;
  align-items: stretch !important;
}
body.ast-header-break-point #ast-mobile-header .ast-builder-menu-mobile,
body.ast-header-break-point #ast-mobile-header .main-header-bar-navigation,
body.ast-header-break-point #ast-mobile-header .main-navigation,
body.ast-header-break-point #ast-mobile-header .ast-nav-menu,
body.ast-header-break-point #ast-mobile-header .main-header-menu {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu,
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu li,
body.ast-header-break-point #ast-mobile-header .main-header-menu li {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .menu-link,
body.ast-header-break-point #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
  display: block !important;
  height: auto !important;
  padding: var(--ab-menu-link-pad) 0 !important;
  font-family: var(--ab-menu-font) !important;
  font-size: clamp(24px, 7vw, var(--ab-menu-size)) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
  text-align: left !important;
  color: var(--ab-menu-text) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
body.ast-header-break-point #ast-mobile-header .sub-menu {
  position: static !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
}
body.ast-header-break-point #ast-mobile-header .sub-menu .menu-link {
  padding: 10px 0 10px 22px !important;
  font-size: clamp(18px, 5vw, calc(var(--ab-menu-size) * .78)) !important;
}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .menu-link[aria-current="page"],
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .current-menu-item > .menu-link {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 8px !important;
}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .menu-link:hover,
body.ast-header-break-point #ast-mobile-header .main-header-menu .menu-link:hover {
  color: var(--ab-menu-hover-text) !important;
  opacity: .8;
}
body.ast-header-break-point #ast-mobile-header .menu-link:focus-visible,
body.ast-header-break-point #ast-mobile-header .ast-menu-toggle:focus-visible {
  outline: 2px solid var(--ab-menu-text) !important;
  outline-offset: 4px !important;
}
body.ast-header-break-point #ast-mobile-header .ast-menu-toggle {
  color: var(--ab-menu-text) !important;
  background: transparent !important;
}
/* Keep Astra's own close-icon and button; never invent an overlay close control. */
body.ast-header-break-point #ast-mobile-header .main-header-menu-toggle[aria-expanded="true"] {
  position: fixed !important;
  top: calc(var(--ab-menu-top) + 18px) !important;
  right: 20px !important;
  z-index: 100002 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 10px !important;
  margin: 0 !important;
  color: var(--ab-menu-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.ast-header-break-point #ast-mobile-header .main-header-menu-toggle[aria-expanded="true"] svg {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
  stroke: currentColor;
}
body.ast-header-break-point:has(#ast-mobile-header .main-header-menu-toggle[aria-expanded="true"]) #masthead {
  position: relative;
  z-index: 100001 !important;
}
html:has(body.ast-header-break-point #ast-mobile-header .main-header-menu-toggle[aria-expanded="true"]),
body.ast-header-break-point:has(#ast-mobile-header .main-header-menu-toggle[aria-expanded="true"]) {
  overflow: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
  body.ast-header-break-point #ast-mobile-header .menu-link { transition: none !important; }
}

/* v1.1: mobile accordion submenus, independent from the main menu typography */
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-has-sub {position:relative!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-sub-toggle {position:absolute!important;top:10px!important;right:0!important;width:48px!important;height:50px!important;min-height:48px!important;background:transparent!important;border:1px solid rgba(255,255,255,.45)!important;border-radius:12px!important;color:var(--ab-menu-text,#fff)!important;cursor:pointer;z-index:2;display:flex!important;align-items:center;justify-content:center;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-sub-toggle span {font-size:30px!important;line-height:1;transition:transform .18s;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-sub-toggle[aria-expanded="true"] span {transform:rotate(180deg);}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-has-sub > .menu-link {padding-right:60px!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu,
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu[hidden] {display:none!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu.is-open {position:static!important;display:flex!important;flex-direction:column!important;gap:5px!important;padding:9px!important;margin:0 0 16px!important;width:100%!important;background:var(--ab-m-sub-bg,#fbfaf7)!important;border:0!important;border-radius:var(--ab-m-sub-radius,14px)!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;transform:none!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu > .ab-subitem {padding:0!important;margin:0!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu .ab-sub-link {box-sizing:border-box!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;min-height:44px!important;padding:12px 14px!important;border:0!important;border-radius:var(--ab-sub-item-radius-custom,8px)!important;background:var(--ab-sub-item-bg,transparent)!important;color:var(--ab-sub-item-text,var(--ab-m-sub-text,#80399c))!important;font-family:var(--ab-sub-item-font,var(--ab-sub-font,inherit))!important;font-size:var(--ab-sub-item-size,var(--ab-m-sub-size,18px))!important;font-weight:var(--ab-sub-item-weight,500)!important;text-decoration:none!important;opacity:1!important;line-height:1.35!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu .ab-sub-link:hover,
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu .ab-sub-link:focus-visible,
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .ab-mobile-submenu .ab-sub-link[aria-current="page"] {background:var(--ab-sub-item-hover-bg,var(--ab-m-sub-hover-bg,#eee6f3))!important;color:var(--ab-sub-item-hover-text,var(--ab-m-sub-hover-text,#80399c))!important;}
/* Astra default child menus (when using existing WordPress menu rather than sync) */
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .sub-menu:not(.ab-mobile-submenu) {background:var(--ab-m-sub-bg,#fbfaf7)!important;border-radius:var(--ab-m-sub-radius,14px)!important;overflow:hidden!important;margin:0 0 12px!important;padding:8px!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .sub-menu:not(.ab-mobile-submenu) .menu-link {color:var(--ab-m-sub-text,#80399c)!important;font-size:var(--ab-m-sub-size,18px)!important;padding:10px 12px!important;line-height:1.3!important;}
body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .sub-menu:not(.ab-mobile-submenu) .menu-link:hover {background:var(--ab-m-sub-hover-bg,#eee6f3)!important;color:var(--ab-m-sub-hover-text,#80399c)!important;}
