/*
 * Coastal Supply — Mobile popup menu styles.
 *
 * Astra's hamburger trigger opens #ast-mobile-popup (.ast-mobile-popup-drawer).
 * Inside it, the primary menu is rendered by wp_nav_menu (we redirect the
 * mobile_menu theme location to primary via a PHP filter in functions.php).
 *
 * Sub-menu accordion: Astra's own frontend.js already toggles
 * .ast-submenu-expanded on the parent <li> and shows/hides .sub-menu via
 * inline style. We only need CSS — no custom JS required for the toggle logic.
 *
 * The toggle button (.dropdown-menu-toggle) is a <span> injected by Astra
 * into every menu item that has children. We replace its arrow SVG with a
 * + / − character using ::after and hide the SVG via CSS.
 */

/* ── Menu item row layout ────────────────────────────────────────────────── */

.ast-mobile-popup-drawer .main-navigation ul,
.ast-mobile-popup-drawer .main-navigation ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ast-mobile-popup-drawer .main-navigation > ul > li,
.ast-mobile-popup-drawer .main-navigation ul .sub-menu > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid #e5e7eb;
}

/* Link fills the row; toggle sits on the right */
.ast-mobile-popup-drawer .main-navigation > ul > li > .menu-link,
.ast-mobile-popup-drawer .main-navigation ul .sub-menu > li > .menu-link {
	flex: 1 1 auto;
	padding: 14px 0 14px 20px;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: #1f2937;
	text-decoration: none;
	line-height: 1.3;
}

.ast-mobile-popup-drawer .main-navigation ul .sub-menu > li > .menu-link {
	font-weight: 400;
	padding-left: 36px;
}

.ast-mobile-popup-drawer .main-navigation > ul > li > .menu-link:hover,
.ast-mobile-popup-drawer .main-navigation ul .sub-menu > li > .menu-link:hover {
	color: #2c2c75;
}

/* ── Toggle button (+/−) ─────────────────────────────────────────────────── */

.ast-mobile-popup-drawer .dropdown-menu-toggle,
.ast-mobile-popup-drawer .ast-menu-toggle {
	flex-shrink: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: 8px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	cursor: pointer;
	color: #2c2c75;
	border-radius: 4px;
	transition: background-color 120ms ease;
}

.ast-mobile-popup-drawer .dropdown-menu-toggle:hover,
.ast-mobile-popup-drawer .ast-menu-toggle:hover {
	background-color: #f3f4f6 !important;
}

.ast-menu-toggle:focus,
.dropdown-menu-toggle:focus {
	outline: none;
}

/* Hide Astra's SVG arrow — replaced by ::after content */
.ast-mobile-popup-drawer .dropdown-menu-toggle .ast-svg-iconset,
.ast-mobile-popup-drawer .ast-menu-toggle .ast-svg-iconset,
.ast-mobile-popup-drawer .dropdown-menu-toggle svg,
.ast-mobile-popup-drawer .ast-menu-toggle svg {
	display: none !important;
}

/* Also suppress the ::before pseudo-element that Astra's dynamic CSS uses
 * for the chevron direction (border-based arrow). */
.ast-mobile-popup-drawer .dropdown-menu-toggle::before,
.ast-mobile-popup-drawer .ast-menu-toggle::before {
	display: none !important;
}

/* + icon by default */
.ast-mobile-popup-drawer .dropdown-menu-toggle::after,
.ast-mobile-popup-drawer .ast-menu-toggle::after {
	content: '+';
	display: block;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: #2c2c75;
}

/* − icon when sub-menu is expanded */
.ast-mobile-popup-drawer .ast-submenu-expanded > .dropdown-menu-toggle::after,
.ast-mobile-popup-drawer .ast-submenu-expanded > .ast-menu-toggle::after,
.ast-mobile-popup-drawer .dropdown-menu-toggle[aria-expanded="true"]::after,
.ast-mobile-popup-drawer .ast-menu-toggle[aria-expanded="true"]::after {
	content: '\2212'; /* U+2212 MINUS SIGN */
}

/* ── Sub-menu container ──────────────────────────────────────────────────── */

/* Takes full row width below the parent link */
.ast-mobile-popup-drawer .sub-menu {
	width: 100%;
	flex: 0 0 100%;
	background-color: #f9fafb;
	padding: 0;
	margin: 0;
}

/* Astra sets display via inline style; this is a fallback for initial state */
.ast-mobile-popup-drawer .sub-menu:not([style]) {
	display: none;
}

/* ── Popup header / close button ─────────────────────────────────────────── */

.ast-mobile-popup-drawer .ast-mobile-popup-header {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	justify-content: flex-end;
}

.ast-mobile-popup-drawer #menu-toggle-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	color: #4b5563;
	border-radius: 4px;
	padding: 0;
}

.ast-mobile-popup-drawer #menu-toggle-close:hover {
	background-color: #f3f4f6;
}

/* ── Popup drawer sizing ─────────────────────────────────────────────────── */

/* Ensure the popup spans full width on mobile */
#ast-mobile-popup.ast-mobile-popup-full-width {
	max-width: 100vw;
}

.ast-mobile-popup-inner {
	overflow-y: auto;
}