/* ==========================================================================
   Mobile navigation layer
   Full-screen overlay and accordion groups for mobile navigation.
   ========================================================================== */

body.has-menu-open {
  overflow: hidden;
}

.site-mobile-nav {
  --btn-color: var(--wp--preset--color--off-white);
  --focus-ring-color: var(--wp--preset--color--off-white);
  position: fixed;
  inset: 0;
  z-index: var(--nav-z-index);
  color: var(--wp--preset--color--off-white);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--nav-menu-transition),
    visibility var(--nav-menu-transition);
}

.site-mobile-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--warm-brown);
}

.site-mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.site-mobile-nav a {
  --link-current-color: currentColor;
  --link-current-decoration-color: color-mix(in srgb, currentColor 56%, transparent);
  --link-current-decoration-color-hover: color-mix(in srgb, currentColor 36%, transparent);
  --link-current-decoration-color-clean-hover: var(--link-current-decoration-color-hover);
  --link-current-hover-opacity: var(--link-hover-opacity-light);
}

.site-mobile-nav .menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding-top: calc(var(--nav-logo-size) + (2 * var(--nav-padding-y)) + var(--s-8));
  padding-bottom: var(--s-32);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.site-mobile-nav a.hub {
  --link-current-size: 1.5em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}

.site-mobile-nav .nav-icon {
  display: inline-flex;
  width: 0.72em;
  height: 0.72em;
  flex: 0 0 auto;
}

.site-mobile-nav .nav-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.site-mobile-nav .group .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-12) 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.site-mobile-nav .group .header a.hub {
  flex: 1 1 auto;
  min-width: 0;
}

/* Sizing/layout comes from .btn.icon. Only extend the .btn transition
   list so the chevron rotation (.is-expanded) animates. */
.site-mobile-nav .group [data-accordion-trigger] {
  transition:
    var(--btn-transition),
    transform 0.3s ease;
}

.site-mobile-nav .group.is-expanded [data-accordion-trigger] {
  transform: rotate(180deg);
}

.site-mobile-nav .group .body {
  box-sizing: border-box;
  height: 0;
  padding: 0;
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.site-mobile-nav .group .body .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-12) 0;
}

.site-mobile-nav .group .body .branch {
  display: grid;
  gap: var(--s-8);
}

.site-mobile-nav .group .body .branch-links {
  display: grid;
  gap: var(--s-8);
  padding-left: var(--s-16);
  margin: var(--s-8) 0;
  border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.site-mobile-nav .group .body a,
.site-mobile-nav .group .body .branch {
  align-self: flex-start;
}

.site-mobile-nav .menu a.lg.clean {
  font-weight: 400;
}

.site-mobile-nav .menu > .actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: var(--s-16);
  margin-top: var(--s-72);
}

/* --breakpoint-md: 40rem; */
@media (min-width: 40rem) {
  .site-mobile-nav .menu > .actions {
    flex-direction: row;
    align-items: flex-end;
  }
  .site-mobile-nav .menu > .actions .btn {
    flex: 1;
  }
}

@media (min-width: 64rem) {
  .site-mobile-nav {
    display: none;
  }
}

/* === WP Admin Bar offset (logged-in only) === */

body.admin-bar .site-mobile-nav {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-mobile-nav {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
}