/**
 * Footer Nav Accordion Styles
 * Layout only — open/close state is driven entirely by JS inline styles
 * so WP's reactive bindings can never override it.
 */

/* -------------------------------------------------------
   Parent item row: link + chevron on one line, submenu
   wraps to a full-width row beneath them
   ------------------------------------------------------- */

/* Make the nav and its item list full-width so children have a width to fill */
nav.wp-block-navigation.is-vertical,
nav.wp-block-navigation.is-vertical > ul.wp-block-navigation__container {
    width: 100% !important;
}

/* Each submenu item spans the full nav width so chevrons align on the right */
nav.wp-block-navigation.is-vertical li.has-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
}

nav.wp-block-navigation.is-vertical li.has-child > a.wp-block-navigation-item__content {
    /* Grow to fill the row so the chevron is pushed to the far right */
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

nav.wp-block-navigation.is-vertical li.has-child > button.wp-block-navigation-submenu__toggle {
    flex: 0 0 auto !important;
    cursor: pointer !important;
    /* transition set inline by JS so it survives reactive resets */
}

/* -------------------------------------------------------
   Submenu: pulled out of absolute flow, full-width,
   closed by default. JS sets max-height inline to open.
   ------------------------------------------------------- */

nav.wp-block-navigation.is-vertical li.has-child > ul.wp-block-navigation__submenu-container {
    flex: 0 0 100% !important;
    width: 100% !important;
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    /* max-height transition — JS sets max-height inline */
    transition: max-height 0.3s ease !important;
    max-height: 0; /* closed by default; JS overrides with inline style */

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
}

/* Indent child items */
nav.wp-block-navigation.is-vertical li.has-child > ul.wp-block-navigation__submenu-container li {
    padding-left: 0.75em !important;
}

/* -------------------------------------------------------
   Kill WP's hover/focus-within CSS that would reveal the
   submenu — we block the events in JS too, but belt+suspenders
   ------------------------------------------------------- */

nav.wp-block-navigation.is-vertical li.has-child:hover > ul.wp-block-navigation__submenu-container,
nav.wp-block-navigation.is-vertical li.has-child:focus-within > ul.wp-block-navigation__submenu-container {
    /* Force max-height:0 so WP's own hover CSS (and :hover that persists
       after a tap on mobile) can never reveal the submenu.
       JS uses setProperty(..., 'important') to override this when opening. */
    max-height: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}