/* --- Responsive Mobile Menu Styles --- */

.nav-buttons {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* --- Default State (Desktop) --- */
.mobile-menu-toggle,
#mobile-menu-container {
	display: none;
}

.header-cta-button .btn-icon {
	display: none;
	/* Hide icon on desktop by default */
}


/* --- Mobile State (When to show the hamburger) --- */
@media (max-width: 992px) {

	.nav-buttons {
		gap: 0;
	}

	.main-navigation,
	.header-cta-button .btn-text {
		display: none;
		/* Hide desktop menu and CTA text */
	}

	.mobile-menu-toggle,
	.header-cta-button .btn-icon {
		display: block;
		/* Show hamburger and CTA icon */
	}

	/* Style the CTA button as a square icon holder */
	.header-cta-button {
		padding: 12px;
		--parent-bg: var(--light-beige);
		margin: 5px;
		min-width: 70px;
	}

	.btn-icon {
		width: 24px;
		height: 24px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
		background-size: contain;
		margin: auto;
	}

	/* Hamburger Toggle Button */
	.mobile-menu-toggle {
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.hamburger-box {
		width: 28px;
		height: 24px;
		display: inline-block;
		position: relative;
		top: 1px;
	}

	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		width: 100%;
		height: 2px;
		background-color: var(--dark-text);
		border-radius: 2px;
		position: absolute;
		transition: transform 0.25s ease-in-out;
	}

	.hamburger-inner {
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}

	.hamburger-inner::before,
	.hamburger-inner::after {
		content: '';
	}

	.hamburger-inner::before {
		top: -10px;
		left: 0;
	}

	.hamburger-inner::after {
		bottom: -10px;
		left: 0;
	}

	/* Hamburger to "X" Animation */
	.mobile-menu-toggle.is-active .hamburger-inner {
		background-color: transparent;
		/* Make the middle bar invisible */
	}

	/* 2. Rotate the top line down 45 degrees */
	.mobile-menu-toggle.is-active .hamburger-inner::before {
		top: 0;
		transform: rotate(45deg);
	}

	/* 3. Rotate the bottom line up 45 degrees */
	.mobile-menu-toggle.is-active .hamburger-inner::after {
		bottom: 0;
		transform: rotate(-45deg);
	}

	/* --- Mobile Menu Open State --- */
	body.mobile-menu-is-open {
		overflow: hidden;
		/* Prevent scrolling of the page behind the menu */
	}

	#mobile-menu-container {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--light-sand);
		z-index: 998;
		/* Just below the header */
		padding-top: 80px;
		/* Space for the header */
		overflow-y: auto;
		text-align: center;
		transform: translateY(-100%);
		transition: transform 0.4s ease-in-out;
	}

	body.mobile-menu-is-open #mobile-menu-container {
		transform: translateY(0);
	}

	.mobile-navigation ul {
		list-style: none;
		padding: 0;
		margin: 0 15px;
	}

	.mobile-navigation li {
		position: relative;
	}

	.mobile-navigation li a {
		display: block;
		padding: 20px;
		color: var(--dark-text);
		font-weight: bold;
		text-decoration: none;
		text-align: right;
	}

	li.menu-item-has-children a {
		padding-right: 65px;
	}

	/* Sub-menu styling for mobile */
	.mobile-navigation .sub-menu {
		background-color: #f0f0f0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease-in-out;
	}

	.mobile-navigation .sub-menu a {
		font-weight: normal;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Sub-menu toggle button */
	.submenu-toggle {
		position: absolute;
		right: 0;
		top: 0;
		width: 66px;
		/* Match link padding height */
		height: 66px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 20px;
	}

	.submenu-toggle .arrow-down {
		display: block;
		width: 12px;
		height: 12px;
		border-left: 2px solid var(--dark-text);
		border-bottom: 2px solid var(--dark-text);
		transform: rotate(-45deg);
		transition: transform 0.3s ease;
	}

	/* Arrow animation when submenu is open */
	.menu-item-has-children.submenu-is-open>.submenu-toggle .arrow-down {
		transform: rotate(135deg);
	}
}