/* ======= OFFCANVAS MENU BASE STYLES ======= */
.offcanvas-content {
    position: fixed;
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    z-index: 9999;

}


/* ======= DIFFERENT OFFCANVAS ANIMATIONS ======= */

/* Slide from Right */
.offcanvas-right {
    width: 100%;
    max-width: 300px;
    top: 0;
    right: 0;
    transform: translateX(100%); /* Start hidden */
    margin:0;
}

.offcanvas-content.offcanvas-right .wp-block-group.canvas-container {   min-height: 100vh; }


body.offcanvas-open .offcanvas-right {
    transform: translateX(0);
}

body.admin-bar.offcanvas-open .offcanvas-right, body.admin-bar .offcanvas-right { 
    top:32px;
 }

/* Slide from Left */
.offcanvas-left {
    width: 100%;
    max-width: 300px;

    top: 0;
    left: 0;
    transform: translateX(-100%); /* Start hidden */
}

.offcanvas-content.offcanvas-left .wp-block-group:first-child {  min-height: 100vh; }


body.offcanvas-open .offcanvas-left {
    transform: translateX(0);
}

/* Slide from Top */
.offcanvas-top {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%); /* Start hidden */
}
body.offcanvas-open .offcanvas-top {
    transform: translateY(0);
}

/* Slide from Bottom */
.offcanvas-bottom {
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%); /* Start hidden */
}
body.offcanvas-open .offcanvas-bottom {
    transform: translateY(0);
}



.site-offcanvas-inner { min-height:100vh; }

/* ======= SUB-MENUS INSIDE THE DRAWER — ACCORDION, NOT FLY-OUT =======
   The drawer nav is a plain vertical navigation, so WP core applies its
   DESKTOP submenu CSS: absolutely-positioned containers, third level flying
   out to left:100% (off the drawer edge), nested item content indented, and
   nested arrows rotated -90°. Flatten every level into an in-flow accordion:
   containers static + full-width, every level flush left, arrows a fixed gap
   after the label in hover and click modes alike. Open/close still rides
   core's visibility/height mechanics (hover, focus-within, or aria-expanded
   from the submenu toggle button). Mirrors the .oi-offcanvas-panel ruleset
   in navigation-extensions/mobile-menu.css. */

.offcanvas-content .wp-block-navigation .wp-block-navigation-item.has-child {
    width: 100%;
    flex-wrap: wrap;
}

.offcanvas-content .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    position: static !important;
    width: 100%;
    flex-basis: 100%;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Kill core's hover-bridge pseudo (only useful on absolute fly-outs). */
.offcanvas-content .wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
    display: none !important;
}

/* Every level aligns to the same left edge — no per-level indent. */
.offcanvas-content .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.4em 0 !important;
}

/* Arrow: fixed 12px glyph, fixed gap after the label at every level.
   Overrides core's click-mode -0.6em pull and the margin-left:auto that
   shoves nested arrows to the far right. */
.offcanvas-content .wp-block-navigation .wp-block-navigation__submenu-icon {
    width: 12px;
    height: 12px;
    margin-left: 0.35em !important;
    margin-right: 0 !important;
    flex-shrink: 0;
}
.offcanvas-content .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    width: 12px;
    height: 12px;
}
.offcanvas-content .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
    padding-right: 0;
}

/* Hover mode renders the arrow as its own <button>: give it a ≥24px tap
   target while keeping the 12px glyph centered. */
.offcanvas-content .wp-block-navigation button.wp-block-navigation__submenu-icon {
    width: auto;
    height: auto;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.15em !important;
}

/* Nested arrows: core rotates them -90° (desktop fly-out) at ≥782px. In the
   accordion they behave like the top level: point down, flip when expanded. */
@media ( min-width: 782px ) {
    .offcanvas-content .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
        transform: rotate(0deg);
    }
    .offcanvas-content .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
    .offcanvas-content .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
        transform: rotate(180deg);
    }
}

/* ======= CLOSE BUTTON INSIDE OFFCANVAS ======= */



/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
    .offcanvas-content {
        transition: none;
    }
}

/* Default: Hide the navigation and show the burger in mobile */
.visibility-mobile .wp-block-navigation {
    display: none;
}

.visibility-mobile .hamburger-menu-button {
    display: block;
}

/* Show navigation and hide the burger in desktop */
@media (min-width: 768px) {
    .visibility-mobile .wp-block-navigation {
        display: flex; /* or block depending on your design */
    }
    
    .visibility-mobile .hamburger-menu-button {
        display: none;
    }
}