/* 
 * MOBILE NAVIGATION ACCORDION STYLES
 * -----------------------------------------------------------------------------
 * These styles format the WordPress Navigation Block mobile overlay into 
 * an accordion-style menu.
 */

:root {
	/* COLORS - Inherit or match your brand palette */
	--nav-mobile-bg: var(--color-light1); /* WHA White */
	--nav-mobile-text: var(--color-medium1); /* WHA Dark Blue */
	--nav-mobile-accent: var(--color-primary); /* WHA Light Blue */
	--nav-mobile-border: var(--color-light1);

	/* TYPOGRAPHY */
	--nav-mobile-font-family: var(--font-primary, inherit);
	--nav-mobile-font-size: 18px;
	--nav-mobile-submenu-font-size: 16px;
	--nav-mobile-weight: 500;

	/* SPACING */
	--nav-mobile-padding: 1rem;
	--nav-mobile-indent: 20px;
	--nav-mobile-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --nav-mobile-gap: 4px;

    --nav-mobile-main-size: 56px !important;
}

/* 
 * DESKTOP NAVIGATION WRAPPING
 * -----------------------------------------------------------------------------
 * These styles allow the main navigation to drop below the logo and center 
 * itself automatically when the screen becomes too narrow for a single line,
 * but before the mobile menu triggers.
 */
#header, 
.site-header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* Keep logo left-aligned */
    align-items: center !important;
    row-gap: 15px; /* Vertical space when wrapped */
}

/* Ensure the logo and nav components behave correctly when wrapping */
#header > .wp-block-group,
#header > .wp-block-navigation,
.site-header > .wp-block-group,
.site-header > .wp-block-navigation {
    flex-shrink: 0;
}

/* Make the navigation grow to fill the remaining space so it can center its links */
.wp-block-navigation {
    flex-grow: 1 !important;
}

/* Center the navigation links specifically */
.wp-block-navigation .wp-block-navigation__container {
    justify-content: center !important;
}

/* 
 * ONLY APPLY TO MOBILE OVERLAY
 * We use the and .is-menu-open classes to ensure desktop horizontal navigation is untouched.
 */
@media (max-width: 768px) {

    .wp-block-navigation {
        gap: 0px !important;
    }

    .wp-block-navigation-item__content::before{
        margin-top: -4px !important;
    }

	/* Target the mobile menu container when it is open */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 0 !important;
		background-color: var(--nav-mobile-bg) !important;
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 99999;
	}

	/* Ensure the inner container takes full width and handles spacing ONLY when open */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block !important;
		padding-top: 80px !important; /* Space for the close button */
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Remove default list styling and margins */
	.wp-block-navigation__responsive-container.is-menu-open ul {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		width: 100% !important;
	}

	/* List Items (Rows) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not([hidden]):not([style*="display:none"]):not([style*="display: none"]):not(.is-hidden):not(.wpc-hidden):not(.logged-out-only) {
		display: flex !important; /* Use flex to put button next to link */
		flex-direction: row !important; /* Ensure children are side-by-side */
		flex-wrap: wrap; 
		width: 100% !important;
		margin: 0 !important;
		padding: 0px 0px 0px 15px !important; /* Padding around the row items */
		align-items: center !important; /* Center items vertically */
		column-gap: var(--nav-mobile-gap); /* Space between anchor and button */
	}

	/* Specific fix for submenu containers which might have different defaults */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center !important;
	}

	/* Links & Top-Level Content Wrapper */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center;
		padding: 1rem !important; /* Adjusted padding within the bordered box */
		color: var(--nav-mobile-text) !important;
		font-family: var(--nav-mobile-font-family);
		font-size: var(--nav-mobile-font-size);
		font-weight: var(--nav-mobile-weight);
		text-decoration: none !important;
		transition: all var(--nav-mobile-transition);
		flex: 1; /* Grow to fill space */
		text-align: left !important;
		justify-content: flex-start !important;
		position: relative;
		overflow: hidden;
		border: 2px solid var(--color-light2) !important; /* Grey border around link */
		border-radius: 8px !important; /* Rounded corners */
		background: #ffffff !important;
		height: var(--nav-mobile-main-size) !important; /* Fixed height for consistency */
        margin:2px 0 !important; /* Vertical spacing between items */
	}

	/* Prevent the anchor from covering the toggle button area */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		display: none !important;
	}

    .wp-block-navigation__responsive-dialog{
        padding-right: 15px !important;
    }

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		border: 2px solid var(--nav-mobile-accent) !important;
	}

    .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding-top: var(--nav-mobile-main-padding) !important;
        padding-bottom: var(--nav-mobile-main-padding) !important;
	}

	/* Submenu Toggle Button (The Arrow) 
	 * Positioned to the far right of the row
	 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: flex !important; 
		visibility: visible !important;
		background: #ffffff !important;
		border: 2px solid var(--color-light2) !important; /* Grey border matching sibling */
		border-radius: 8px !important; /* Rounded corners */
		padding: 0;
		margin: 0 !important; /* Margin replaced by parent gap */
		width: var(--nav-mobile-main-size) !important; /* Match height for square button */
		height: var(--nav-mobile-main-size) !important; /* Match parent height */
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
		z-index: 99 !important; 
		transition: all var(--nav-mobile-transition);
		flex-shrink: 0; /* Don't squash */
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover {
		border-color: var(--nav-mobile-accent) !important;
	}

	/* Caret Arrow via CSS */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::before {
		content: '';
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--nav-mobile-accent);
		border-bottom: 2px solid var(--nav-mobile-accent);
		transform: rotate(45deg);
		transition: transform var(--nav-mobile-transition);
		display: block;
		pointer-events: none;
	}

	/* Hide default WordPress SVGs in mobile view */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		display: none !important;
	}

	/* Rotate arrow when menu is expanded */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]::before {
		transform: rotate(-135deg); 
		margin-top: 6px;
	}

	/* --- ACCORDION FUNCTIONALITY --- */

	/* Hide any UL that is a child of a navigation item (Submenus) by default */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > ul {
		display: block !important;
		width: 100% !important; /* Force to its own row in the flex container */
		max-height: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
		opacity: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		transition: max-height var(--nav-mobile-transition), opacity var(--nav-mobile-transition), visibility var(--nav-mobile-transition);
	}

	/* Show submenu when toggle is expanded */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) > ul,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has([aria-expanded="true"]) > ul {
		max-height: 2000px !important; 
		visibility: visible !important;
		opacity: 1 !important;
		padding: 4px 0 10px 0 !important; /* Top and bottom padding for the WHOLE submenu block */
        box-shadow: none !important;
	}

	/* Submenu items styling */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: none !important; /* Remove bottom border from submenu items */
		margin: 0 !important;
		padding: 3px 0 3px 30px !important; /* Reduced vertical padding, added indentation */
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		border: 2px solid var(--color-light2) !important; /* Restore 2px border */
		border-radius: 8px !important; /* Restore radius */
		font-size: var(--nav-mobile-submenu-font-size);
		font-weight: 500;
		height: 46px !important; /* Slightly smaller for sub-items */
		transition: all var(--nav-mobile-transition);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		border-color: var(--nav-mobile-accent) !important;
	}

	/* Close button position */
	.wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 25px;
		right: 25px;
		color: var(--nav-mobile-text) !important;
		z-index: 10;
	}

    /* Hide logged-out items in mobile menu */
    .wp-block-navigation__responsive-container.is-menu-open .logged-out-only {
        display: none !important;
    }
}