/**
 * WORKING Navigation Dropdowns
 * Desktop: hover dropdowns. Mobile: tap-to-open inside the slide-in panel.
 * Aligned to the theme's 768px mobile breakpoint to avoid conflicts.
 */

/* ============================================
   DESKTOP (above 768px)
   Desktop dropdown styling is fully handled by mega-menu.css.
   Here we only ensure containers don't clip the panels.
   ============================================ */
@media (min-width: 769px) {
	.site-header,
	.site-header__container,
	.main-nav,
	.main-nav__list {
		overflow: visible !important;
	}
}


/* ============================================
   MOBILE ONLY (768px and below)
   Submenus live INSIDE the white slide-in panel.
   Hidden until the parent is tapped (.open class).
   ============================================ */
@media (max-width: 768px) {

	/* ===== BULLETPROOF MOBILE DRAWER VISIBILITY ===== */
	/* Make sure the drawer and its items are always visible when open */
	.main-nav.is-open {
		display: flex !important;
		background: #ffffff !important;
		z-index: 9999 !important;
	}

	.main-nav.is-open .main-nav__list {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		background: #ffffff !important;
	}

	/* Top-level items - always visible, dark text on white */
	.main-nav__list > li {
		display: block !important;
		width: 100% !important;
		position: static !important;
		background: #ffffff;
	}

	.main-nav__list > li > a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 1rem 1.5rem !important;
		font-size: 1rem !important;
		font-weight: 600 !important;
		color: #14241f !important;     /* dark, always readable */
		background: #ffffff !important;
		opacity: 1 !important;
		visibility: visible !important;
		white-space: normal !important;
	}

	.main-nav__list > li > a:hover,
	.main-nav__list > li > a:active {
		background: #f2f8f6 !important;
		color: #0c5a50 !important;
	}

	/* Kill any desktop icon/swatch pseudo-elements on mobile to avoid clutter */
	.main-nav__list > li > ul > li > a::before,
	.main-nav__list > li > .sub-menu > li > a::before {
		display: none !important;
	}

	/* Submenu sits in normal flow inside the panel, light grey bg so it's visible */
	.main-nav__list li ul,
	.main-nav__list li .sub-menu {
		display: none;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto;
		list-style: none;
		margin: 0;
		padding: 0;
		background: #f3f6f5;          /* visible background behind submenu text */
		border: none;
		border-radius: 0;
		box-shadow: none;
		min-width: 100%;
		max-width: 100% !important;
		width: 100% !important;
		grid-template-columns: 1fr !important;  /* override desktop mega grid */
	}

	/* Reveal submenu when parent has .open (added by JS on tap) */
	.main-nav__list li.open > ul,
	.main-nav__list li.open > .sub-menu {
		display: block !important;
	}

	/* Submenu links - clear contrast on the grey background */
	.main-nav__list li ul li,
	.main-nav__list li .sub-menu li {
		list-style: none;
		width: 100% !important;
		border-bottom: 1px solid #e3e9e7;
		position: static !important;
	}

	.main-nav__list li ul li a,
	.main-nav__list li .sub-menu li a {
		display: block !important;
		padding: 0.85rem 1.5rem 0.85rem 2.5rem !important;  /* indent children */
		font-size: 0.95rem !important;
		font-weight: 500 !important;
		color: #1a1a1a !important;               /* dark text, always readable */
		background: transparent !important;
		white-space: normal !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.main-nav__list li ul li a:hover,
	.main-nav__list li ul li a:active {
		background: #e7efed !important;
		color: #0c5a50 !important;
	}

	/* Third level - indent a bit more */
	.main-nav__list li ul ul li a,
	.main-nav__list li .sub-menu .sub-menu li a {
		padding-left: 3.25rem !important;
		font-size: 0.9rem !important;
	}

	/* Dropdown arrow on parents in mobile (pointing down, flips when open) */
	.main-nav__list .menu-item-has-children > a {
		position: relative;
	}

	.main-nav__list .menu-item-has-children > a::after {
		content: '' !important;
		position: relative;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid currentColor;
		border-bottom: none;
		margin-left: 8px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	.main-nav__list .menu-item-has-children.open > a::after {
		transform: rotate(180deg);
	}
}