/**
 * Temiz Wear Navigation Component
 *
 * Provides accessible, mobile-first navigation styling for primary,
 * header, footer, mobile and nested WordPress navigation menus.
 *
 * @package TemizWear
 */

/* ==========================================================================
   Navigation Wrapper
   ========================================================================== */

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) {
	--navigation-color: #1c1c1a;
	--navigation-hover-color: #2e1a24;
	--navigation-accent-color: #a8823d;
	--navigation-surface-color: #f5efe3;
	--navigation-submenu-surface: #ffffff;
	--navigation-border-color: rgb(46 26 36 / 16%);
	--navigation-focus-color: #a8823d;
	--navigation-transition-duration: 160ms;
	--navigation-transition-timing: ease-out;
	--navigation-link-block-padding: 0.75rem;
	--navigation-link-inline-padding: 0;
	--navigation-item-gap: 0.25rem;
	--navigation-submenu-min-width: 13rem;

	position: relative;
	color: var(--navigation-color);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) nav {
	width: 100%;
}

/* ==========================================================================
   Menu List
   ========================================================================== */

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) :where(.menu, .sub-menu) {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	list-style: none;
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) > :where(.menu, nav > .menu) {
	display: flex;
	flex-direction: column;
	gap: var(--navigation-item-gap);
	width: 100%;
}

/* ==========================================================================
   Menu Items
   ========================================================================== */

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .menu-item {
	position: relative;
	min-width: 0;
	margin: 0;
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .menu-item-has-children {
	position: relative;
}

/* ==========================================================================
   Menu Links
   ========================================================================== */

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .menu-item > a {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 2.75rem;
	padding-block: var(--navigation-link-block-padding);
	padding-inline: var(--navigation-link-inline-padding);
	color: inherit;
	font-weight: 500;
	line-height: 1.35;
	text-align: start;
	text-decoration: none;
	text-underline-offset: 0.25em;
	overflow-wrap: anywhere;
	transition:
		color var(--navigation-transition-duration)
			var(--navigation-transition-timing),
		background-color var(--navigation-transition-duration)
			var(--navigation-transition-timing),
		border-color var(--navigation-transition-duration)
			var(--navigation-transition-timing);
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .menu-item > a:visited {
	color: inherit;
}

/* ==========================================================================
   Current Menu Item
   ========================================================================== */

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) :where(
	.current-menu-item,
	.current-menu-ancestor,
	.current-menu-parent,
	.current_page_item,
	.current_page_ancestor,
	.current_page_parent
) > a {
	color: var(--navigation-hover-color);
	font-weight: 600;
}

:where(
	.primary-navigation,
	.header-navigation
) :where(
	.current-menu-item,
	.current-menu-ancestor,
	.current-menu-parent,
	.current_page_item,
	.current_page_ancestor,
	.current_page_parent
) > a::after {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.35rem;
	height: 0.125rem;
	background-color: var(--navigation-accent-color);
	border-radius: 999px;
	content: "";
	transform: scaleX(1);
	transform-origin: center;
}

/* ==========================================================================
   Hover and Focus
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	:where(
		.primary-navigation,
		.header-navigation,
		.footer-navigation,
		.mobile-navigation
	) .menu-item > a:hover {
		color: var(--navigation-hover-color);
		text-decoration: none;
	}
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .menu-item > a:focus {
	outline: none;
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .menu-item > a:focus-visible {
	color: var(--navigation-hover-color);
	border-radius: 0.25rem;
	outline: 0.1875rem solid var(--navigation-focus-color);
	outline-offset: 0.1875rem;
	text-decoration: none;
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .menu-item > a:active {
	color: var(--navigation-accent-color);
}

/* ==========================================================================
   Sub Menu
   ========================================================================== */

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-inline-start: 1rem;
	border-inline-start: 0.0625rem solid var(--navigation-border-color);
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .sub-menu .menu-item > a {
	min-height: 2.5rem;
	padding-block: 0.625rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

:where(
	.primary-navigation,
	.header-navigation,
	.footer-navigation,
	.mobile-navigation
) .sub-menu :where(
	.current-menu-item,
	.current-menu-ancestor,
	.current-menu-parent,
	.current_page_item,
	.current_page_ancestor,
	.current_page_parent
) > a {
	color: var(--navigation-hover-color);
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */

.mobile-navigation {
	width: 100%;
	background-color: var(--navigation-surface-color);
}

.mobile-navigation > :where(.menu, nav > .menu) {
	gap: 0;
}

.mobile-navigation .menu-item {
	border-block-end: 0.0625rem solid var(--navigation-border-color);
}

.mobile-navigation .menu-item:last-child {
	border-block-end: 0;
}

.mobile-navigation .menu-item > a {
	padding-inline: 1rem;
}

.mobile-navigation .sub-menu {
	padding-inline-start: 1rem;
	margin-inline: 1rem;
	border-inline-start-color: var(--navigation-accent-color);
}

.mobile-navigation .sub-menu .menu-item {
	border-block-end: 0;
}

.mobile-navigation :where(
	.current-menu-item,
	.current-menu-ancestor,
	.current-menu-parent,
	.current_page_item,
	.current_page_ancestor,
	.current_page_parent
) > a {
	background-color: rgb(168 130 61 / 10%);
}

/* ==========================================================================
   Footer Navigation
   ========================================================================== */

.footer-navigation {
	--navigation-color: #f5efe3;
	--navigation-hover-color: #ffffff;
	--navigation-border-color: rgb(245 239 227 / 22%);
}

.footer-navigation > :where(.menu, nav > .menu) {
	gap: 0.125rem;
}

.footer-navigation .menu-item > a {
	min-height: 2.5rem;
	padding-block: 0.5rem;
	font-weight: 400;
}

.footer-navigation :where(
	.current-menu-item,
	.current-menu-ancestor,
	.current-menu-parent,
	.current_page_item,
	.current_page_ancestor,
	.current_page_parent
) > a {
	color: var(--navigation-accent-color);
}

.footer-navigation .sub-menu {
	border-inline-start-color: var(--navigation-border-color);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 48rem) {
	:where(
		.primary-navigation,
		.header-navigation
	) {
		--navigation-link-block-padding: 1rem;
		--navigation-link-inline-padding: 0.625rem;
		--navigation-item-gap: 0.25rem;
	}

	:where(
		.primary-navigation,
		.header-navigation
	) > :where(.menu, nav > .menu) {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: auto;
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .menu-item > a {
		width: auto;
		white-space: nowrap;
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .menu-item-has-children > .sub-menu {
		position: absolute;
		z-index: 30;
		inset-block-start: calc(100% - 0.25rem);
		inset-inline-start: 0;
		display: flex;
		min-width: var(--navigation-submenu-min-width);
		padding: 0.5rem;
		margin: 0;
		background-color: var(--navigation-submenu-surface);
		border: 0.0625rem solid var(--navigation-border-color);
		border-radius: 0.375rem;
		box-shadow:
			0 0.5rem 1.5rem rgb(28 28 26 / 10%),
			0 0.125rem 0.375rem rgb(28 28 26 / 8%);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.375rem);
		pointer-events: none;
		transition:
			opacity var(--navigation-transition-duration)
				var(--navigation-transition-timing),
			transform var(--navigation-transition-duration)
				var(--navigation-transition-timing),
			visibility 0s linear var(--navigation-transition-duration);
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .menu-item-has-children:hover > .sub-menu,
	:where(
		.primary-navigation,
		.header-navigation
	) .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition-delay: 0s;
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .sub-menu .menu-item {
		width: 100%;
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .sub-menu .menu-item > a {
		width: 100%;
		padding: 0.75rem;
		border-radius: 0.25rem;
		white-space: normal;
	}

	@media (hover: hover) and (pointer: fine) {
		:where(
			.primary-navigation,
			.header-navigation
		) .sub-menu .menu-item > a:hover {
			background-color: rgb(46 26 36 / 6%);
		}
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .sub-menu .menu-item > a:focus-visible {
		background-color: rgb(46 26 36 / 6%);
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .sub-menu :where(
		.current-menu-item,
		.current-menu-ancestor,
		.current-menu-parent,
		.current_page_item,
		.current_page_ancestor,
		.current_page_parent
	) > a {
		background-color: rgb(168 130 61 / 10%);
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .sub-menu :where(
		.current-menu-item,
		.current-menu-ancestor,
		.current-menu-parent,
		.current_page_item,
		.current_page_ancestor,
		.current_page_parent
	) > a::after {
		content: none;
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .sub-menu .menu-item-has-children > .sub-menu {
		inset-block-start: -0.5rem;
		inset-inline-start: calc(100% + 0.25rem);
	}

	.footer-navigation > :where(.menu, nav > .menu) {
		flex-flow: row wrap;
		align-items: center;
		gap: 0.5rem 1.5rem;
	}

	.footer-navigation .menu-item > a {
		width: auto;
	}
}

@media screen and (min-width: 64rem) {
	:where(
		.primary-navigation,
		.header-navigation
	) {
		--navigation-link-inline-padding: 0.875rem;
		--navigation-item-gap: 0.375rem;
		--navigation-submenu-min-width: 15rem;
	}

	:where(
		.primary-navigation,
		.header-navigation
	) .menu-item > a {
		letter-spacing: 0.01em;
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:where(
		.primary-navigation,
		.header-navigation,
		.footer-navigation,
		.mobile-navigation
	) .menu-item > a,
	:where(
		.primary-navigation,
		.header-navigation
	) .menu-item-has-children > .sub-menu {
		transition-duration: 0.01ms;
	}
}