/**
 * Mobile Menu Fix - Reuse Desktop Menu Structure
 *
 * This CSS file makes the mobile menu reuse the desktop menu structure
 * but with vertical styling instead of creating a separate mobile panel.
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ============================================
   MOBILE MENU STYLES (< 1031px)
   ============================================ */

@media (max-width: 64.375rem) { /* 1030px */

	/* Hide the separate mobile panel - we won't use it */
	.elcogen-header-block__mobile-panel {
	}

	/* Desktop navigation wrapper - hidden by default on mobile */
	.elcogen-header-block__nav-wrapper--desktop {
		display: none;
		position: fixed;
		top: 4rem; /* Below header (88px) */
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--elcogen-neutral-100, #ffffff);
		z-index: 9998;
		overflow-y: auto;
		padding: 1rem;
		animation: slideDown 0.3s ease-out;
	}

	/* Show navigation when mobile menu is open */
	.mobile-menu-open .elcogen-header-block__nav-wrapper--desktop {
		display: block;
	}

	/* Main navigation list - vertical stack on mobile */
	.elcogen-header-block__nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	/* Navigation items - full width on mobile */
	.elcogen-header-block__nav-item {
		width: 100%;
		margin: 0;
	}

	/* Navigation links - adjust for mobile */
	.elcogen-header-block__nav-link {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var(--elcogen-nav-item-padding-y, 0.5rem) var(--elcogen-nav-item-padding-x, 1rem);
		font-size: 1.125rem; /* 18px */
		line-height: 1.75rem; /* 28px */
		background-color: var(--elcogen-nav-item-bg-default, transparent);
		border: var(--elcogen-nav-item-border-width, 2px) solid var(--elcogen-nav-item-border-default, transparent);
		border-radius: var(--elcogen-radius-05, 360px); /* Keep pill shape */
		margin: 0.25rem 0; /* Small vertical gap */
	}

	/* Hover effects for mobile navigation */
	.elcogen-header-block__nav-link:hover {
		background-color: var(--elcogen-nav-item-bg-hover, #0c28c4);
		border-color: var(--elcogen-nav-item-border-hover, #0c28c4);
		color: var(--elcogen-nav-item-text-hover, #ffffff);
	}

	/* Active/open state for dropdown items */
	.elcogen-header-block__nav-item.is-open > .elcogen-header-block__nav-link,
	.elcogen-header-block__nav-link[aria-expanded="true"] {
		background-color: var(--elcogen-nav-item-bg-hover, #0c28c4);
		border-color: var(--elcogen-nav-item-border-hover, #0c28c4);
		color: var(--elcogen-nav-item-text-hover, #ffffff);
	}

	/* Dropdown icon */
	.elcogen-header-block__dropdown-icon {
		margin-left: auto;
		transition: transform 0.3s ease;
	}

	/* Rotate icon when dropdown is open */
	.elcogen-header-block__nav-item.is-open .elcogen-header-block__dropdown-icon,
	.elcogen-header-block__nav-link[aria-expanded="true"] .elcogen-header-block__dropdown-icon {
		transform: rotate(180deg);
	}

	/* ============================================
	   MOBILE DROPDOWN SUBMENU
	   ============================================ */

	/* Submenu Container - handles accordion expand/collapse */
	.elcogen-header-block__submenu-container {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	/* Show submenu container when parent is open */
	.elcogen-header-block__nav-item.is-open > .elcogen-header-block__submenu-container {
		max-height: 100rem; /* Large enough for content */
	}

	/* Submenu Wrapper - provides background and padding */
	.elcogen-header-block__submenu-wrapper {
		background-color: var(--elcogen-nav-submenu-bg-level2, #e6f9ff);
		border-radius: var(--elcogen-nav-submenu-corner-radius-panel, 1rem); /* 16px */
		padding: 1rem; /* 16px */
	}

	/* Submenu - vertical dropdown on mobile */
	.elcogen-header-block__submenu {
		position: static; /* Remove absolute positioning */
		width: 100%; /* Full width of wrapper */
		margin: 0;
		padding: 0;
		background-color: transparent; /* Background handled by wrapper */
		border-radius: 0;
		box-shadow: none; /* Remove shadow on mobile */
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none; /* Remove transitions for mobile */
		display: flex; /* Always flex when visible */
		flex-direction: column;
		gap: 0.5rem; /* 8px gap between items */
	}

	/* Submenu items */
	.elcogen-header-block__submenu .elcogen-header-block__nav-item {
		width: 100%;
	}

	/* Submenu links */
	.elcogen-header-block__submenu .elcogen-header-block__nav-link {
		padding: 0.75rem 1.5rem; /* 12px 24px */
		margin: 0;
		background-color: var(--elcogen-nav-submenu-item-bg-default, transparent);
		border: 0;
		border-radius: var(--elcogen-nav-submenu-item-corner-radius, 360px); /* Pill shape */
		color: var(--elcogen-nav-submenu-item-text-default, #131317);
		font-size: 1rem; /* 16px - slightly smaller for submenu */
		line-height: 1.5rem; /* 24px */
	}

	/* Arrow icon for submenu links */
	.elcogen-header-block__submenu .elcogen-header-block__nav-link::after {
		content: '';
		display: block;
		width: 1.25rem; /* 20px - slightly smaller */
		height: 1.25rem; /* 20px */
		margin-left: auto;
		flex-shrink: 0;
		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='%23131317' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	/* Submenu link hover/focus states */
	.elcogen-header-block__submenu .elcogen-header-block__nav-link:hover,
	.elcogen-header-block__submenu .elcogen-header-block__nav-link:focus {
		background-color: var(--elcogen-nav-submenu-item-bg-hover, rgba(0, 0, 0, 0.05));
	}

	/* ============================================
	   MOBILE CTA BUTTON
	   ============================================ */

	/* Hide the hardcoded fallback CTA div — the real Get in Touch is the nav menu item */
	.elcogen-header-block__mobile-cta {
		display: none;
	}

	/* ============================================
	   ANIMATIONS
	   ============================================ */

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-1rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes expandDown {
		from {
			opacity: 0;
			max-height: 0;
		}
		to {
			opacity: 1;
			max-height: 100rem; /* Large value for smooth animation */
		}
	}

	/* ============================================
	   BODY SCROLL LOCK
	   ============================================ */

	/* Prevent body scroll when mobile menu is open */
	body.mobile-menu-open {
		overflow: hidden;
		position: fixed;
		width: 100%;
	}
}

/* ============================================
   RESPONSIVE ADJUSTMENTS FOR SMALLER SCREENS
   ============================================ */

@media (max-width: 30rem) { /* 480px */
	/* Adjust top position for smaller header on mobile */
	.elcogen-header-block__nav-wrapper--desktop {
		top: 4rem; /* 64px - matches smaller mobile header */
	}

	/* Slightly reduce padding on very small screens */
	.elcogen-header-block__nav-wrapper--desktop {
		padding: 0.75rem;
	}

	.elcogen-header-block__nav-link {
		padding: 0.625rem 0.875rem; /* 10px 14px */
		font-size: 1rem; /* 16px */
	}

	.elcogen-header-block__submenu {
		padding: 0.75rem;
		margin-left: 0.375rem;
	}

	.elcogen-header-block__submenu .elcogen-header-block__nav-link {
		padding: 0.625rem 1.25rem; /* 10px 20px */
		font-size: 0.9375rem; /* 15px */
	}
}