/**
 * Navigation — Almutaheda Pack
 *
 * Covers:
 *   .alm-nav-primary   — desktop horizontal nav with one-level dropdowns
 *   .alm-nav-drawer    — mobile off-canvas panel
 *   .alm-nav-overlay   — backdrop behind the drawer
 *
 * Architecture notes:
 *   - Dropdowns are CSS-only by default (hover + focus-within).
 *   - JS enhances with keyboard support and click-outside closing.
 *   - No JS = dropdowns still accessible via keyboard focus-within.
 *   - RTL: logical properties throughout.
 *
 * Depends on: tokens.css, base.css, buttons.css
 */

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP PRIMARY NAV
   ══════════════════════════════════════════════════════════════════ */

.alm-nav-primary {
	display:     flex;
	align-items: center;
	flex:        1;
}

/* Top-level <ul> */
.alm-nav-primary > ul,
.alm-nav-primary .menu {
	display:     flex;
	align-items: center;
	gap:         var(--alm-space-1);
	list-style:  none;
	margin:      0;
	padding:     0;
}

/* Top-level <li> */
.alm-nav-primary > ul > li,
.alm-nav-primary .menu > li {
	position: relative;
}

/* Top-level link / button */
.alm-nav-primary > ul > li > a,
.alm-nav-primary .menu > li > a,
.alm-nav-link {
	display:          flex;
	align-items:      center;
	gap:              var(--alm-space-1-5);
	padding-block:    var(--alm-space-2-5);
	padding-inline:   var(--alm-space-3);
	font-size:        var(--alm-text-base);
	font-weight:      var(--alm-weight-medium);
	color:            var(--alm-color-text-primary);
	text-decoration:  none;
	border-radius:    var(--alm-radius-md);
	white-space:      nowrap;
	border:           none;
	background:       none;
	cursor:           pointer;
	transition:       background-color var(--alm-duration-fast) var(--alm-easing-standard),
	                  color            var(--alm-duration-fast) var(--alm-easing-standard);
}

.alm-nav-primary > ul > li > a:hover,
.alm-nav-primary .menu > li > a:hover,
.alm-nav-link:hover {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
}

/* Active / current page */
.alm-nav-primary .current-menu-item > a,
.alm-nav-primary .current-page-ancestor > a,
.alm-nav-primary .current-menu-ancestor > a {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
	font-weight:      var(--alm-weight-semibold);
}

/* Focus ring */
.alm-nav-primary > ul > li > a:focus-visible,
.alm-nav-link:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

/* Chevron for items with children */
.alm-nav-link__chevron {
	width:      0.875rem;
	height:     0.875rem;
	flex-shrink:0;
	transition: transform var(--alm-duration-base) var(--alm-easing-standard);
}

/* Rotate chevron when dropdown is open */
.alm-nav-primary > ul > li.is-open > a .alm-nav-link__chevron,
.alm-nav-primary > ul > li:focus-within > a .alm-nav-link__chevron {
	transform: rotate(180deg);
}

/* ─── Category trigger ───────────────────────────────────────────── */

.alm-nav-category-trigger {
	background-color: var(--alm-color-navy-primary);
	color:            var(--alm-color-white) !important;
	border-radius:    var(--alm-radius-md);
	gap:              var(--alm-space-2);
}

.alm-nav-category-trigger:hover {
	background-color: var(--alm-color-navy-primary-90) !important;
	color:            var(--alm-color-white) !important;
}

.alm-nav-category-trigger:focus-visible {
	outline-color: var(--alm-color-sand) !important;
}

/* ─── One-level dropdown ─────────────────────────────────────────── */

/* WP outputs .sub-menu; we also style .alm-dropdown */
.alm-nav-primary .sub-menu,
.alm-dropdown {
	position:         absolute;
	inset-block-start:calc(100% + var(--alm-space-1));
	inset-inline-start:0;
	min-width:        220px;
	background:       var(--alm-color-white);
	border:           var(--alm-border-standard);
	border-radius:    var(--alm-radius-lg);
	box-shadow:       var(--alm-shadow-lg);
	padding-block:    var(--alm-space-2);
	list-style:       none;
	margin:           0;
	z-index:          var(--alm-z-dropdown);

	/* Hidden by default */
	opacity:          0;
	pointer-events:   none;
	transform:        translateY(-4px);
	transition:       opacity   var(--alm-duration-base) var(--alm-easing-standard),
	                  transform var(--alm-duration-base) var(--alm-easing-standard);
}

/* Open via CSS focus-within (no-JS baseline) and JS .is-open class */
.alm-nav-primary > ul > li:hover > .sub-menu,
.alm-nav-primary > ul > li:focus-within > .sub-menu,
.alm-nav-primary > ul > li.is-open > .sub-menu,
.alm-dropdown.is-open {
	opacity:        1;
	pointer-events: auto;
	transform:      translateY(0);
}

/* Dropdown items */
.alm-nav-primary .sub-menu li,
.alm-dropdown li {
	margin: 0;
}

.alm-nav-primary .sub-menu a,
.alm-dropdown a {
	display:         block;
	padding-block:   var(--alm-space-2-5);
	padding-inline:  var(--alm-space-4);
	color:           var(--alm-color-text-primary);
	text-decoration: none;
	font-size:       var(--alm-text-sm);
	white-space:     nowrap;
	transition:      background-color var(--alm-duration-fast) var(--alm-easing-standard);
}

.alm-nav-primary .sub-menu a:hover,
.alm-dropdown a:hover {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
}

.alm-nav-primary .sub-menu a:focus-visible,
.alm-dropdown a:focus-visible {
	outline:          var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset:  -2px;
}

/* Dropdown separator */
.alm-nav-primary .sub-menu .menu-item-separator,
.alm-dropdown__separator {
	height:      1px;
	background:  var(--alm-color-border);
	margin-block:var(--alm-space-2);
	margin-inline: var(--alm-space-4);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE OFF-CANVAS DRAWER
   ══════════════════════════════════════════════════════════════════ */

/* Backdrop overlay */
.alm-nav-overlay {
	position:   fixed;
	inset:      0;
	background: var(--alm-color-surface-overlay);
	z-index:    calc(var(--alm-z-modal) - 1);
	opacity:    0;
	pointer-events: none;
	transition: opacity var(--alm-duration-slow) var(--alm-easing-standard);
}

.alm-nav-overlay.is-visible {
	opacity:        1;
	pointer-events: auto;
}

/* Drawer panel */
.alm-nav-drawer {
	position:      fixed;
	inset-block:   0;
	inset-inline-start: -100%; /* off-screen to the start side */
	width:         min(320px, 88vw);
	background:    var(--alm-color-white);
	z-index:       var(--alm-z-modal);
	display:       flex;
	flex-direction:column;
	overflow-y:    auto;
	overflow-x:    hidden;
	overscroll-behavior: contain;
	transition:    inset-inline-start var(--alm-duration-slow) var(--alm-easing-standard);
	box-shadow:    var(--alm-shadow-xl);
}

/* RTL: drawer slides in from inline-end */
[dir="rtl"] .alm-nav-drawer {
	inset-inline-start: auto;
	inset-inline-end:   -100%;
	transition:         inset-inline-end var(--alm-duration-slow) var(--alm-easing-standard);
}

.alm-nav-drawer.is-open {
	inset-inline-start: 0;
}

[dir="rtl"] .alm-nav-drawer.is-open {
	inset-inline-end: 0;
}

/* Drawer header row */
.alm-nav-drawer__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         var(--alm-space-4) var(--alm-space-5);
	border-bottom:   var(--alm-border-standard);
	flex-shrink:     0;
}

.alm-nav-drawer__logo {
	font-size:   var(--alm-text-md);
	font-weight: var(--alm-weight-bold);
	color:       var(--alm-color-navy-primary);
	text-decoration: none;
}

.alm-nav-drawer__close {
	width:     2.5rem;
	height:    2.5rem;
	display:   flex;
	align-items:   center;
	justify-content:center;
	border:    none;
	background:transparent;
	color:     var(--alm-color-text-primary);
	border-radius: var(--alm-radius-md);
	cursor:    pointer;
	transition:background-color var(--alm-duration-fast) var(--alm-easing-standard);
}

.alm-nav-drawer__close:hover {
	background-color: var(--alm-color-navy-primary-10);
}

.alm-nav-drawer__close:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

/* Drawer navigation body */
.alm-nav-drawer__body {
	flex:       1;
	overflow-y: auto;
	padding:    var(--alm-space-4) 0;
}

/* Drawer menu list */
.alm-nav-drawer__menu {
	list-style:  none;
	margin:      0;
	padding:     0;
}

.alm-nav-drawer__menu li {
	margin: 0;
}

.alm-nav-drawer__menu a,
.alm-nav-drawer__item-btn {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	padding-block:    var(--alm-space-3-5, 0.875rem);
	padding-inline:   var(--alm-space-5);
	color:            var(--alm-color-text-primary);
	text-decoration:  none;
	font-size:        var(--alm-text-base);
	font-weight:      var(--alm-weight-medium);
	border:           none;
	background:       none;
	width:            100%;
	text-align:       start;
	cursor:           pointer;
	transition:       background-color var(--alm-duration-fast) var(--alm-easing-standard);
}

.alm-nav-drawer__menu a:hover,
.alm-nav-drawer__item-btn:hover {
	background-color: var(--alm-color-navy-primary-10);
}

.alm-nav-drawer__menu a:focus-visible,
.alm-nav-drawer__item-btn:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: -2px;
}

/* Current page highlight */
.alm-nav-drawer__menu .current-menu-item > a {
	color:       var(--alm-color-navy-primary);
	font-weight: var(--alm-weight-semibold);
	background:  var(--alm-color-navy-primary-10);
}

/* Expandable sub-level */
.alm-nav-drawer__sub {
	list-style:      none;
	margin:          0;
	padding-inline-start: var(--alm-space-4);
	padding-block:   var(--alm-space-1);
	background:      var(--alm-color-surface-subtle);
	overflow:        hidden;
	max-height:      0;
	transition:      max-height var(--alm-duration-slow) var(--alm-easing-standard);
}

.alm-nav-drawer__sub.is-open {
	max-height: 800px; /* large enough for any realistic menu */
}

.alm-nav-drawer__sub a {
	font-size: var(--alm-text-sm);
	padding-block: var(--alm-space-2-5);
}

/* Drawer divider */
.alm-nav-drawer__divider {
	height:        1px;
	background:    var(--alm-color-border);
	margin-block:  var(--alm-space-3);
	margin-inline: var(--alm-space-5);
}

/* Drawer footer actions (WhatsApp CTA) */
.alm-nav-drawer__footer {
	padding:      var(--alm-space-5);
	border-top:   var(--alm-border-standard);
	flex-shrink:  0;
}

/* Chevron in drawer expand buttons */
.alm-drawer-chevron {
	width:      1rem;
	height:     1rem;
	flex-shrink:0;
	transition: transform var(--alm-duration-base) var(--alm-easing-standard);
}

.alm-nav-drawer__item-btn[aria-expanded="true"] .alm-drawer-chevron {
	transform: rotate(180deg);
}

/*
 * Two-sibling layout: parent link + toggle button sit side-by-side.
 * Used when a parent menu item has a real destination URL.
 * The link gets all available width; the button is icon-sized (44px min).
 */
.alm-nav-drawer__item-row {
	display:     flex;
	align-items: stretch;
}

.alm-nav-drawer__item-link {
	flex:            1;
	display:         flex;
	align-items:     center;
	padding-block:   var(--alm-space-3-5, 0.875rem);
	padding-inline:  var(--alm-space-5);
	color:           var(--alm-color-text-primary);
	text-decoration: none;
	font-size:       var(--alm-text-base);
	font-weight:     var(--alm-weight-medium);
	min-height:      2.75rem; /* 44px touch target */
	transition:      background-color var(--alm-duration-fast) var(--alm-easing-standard);
}

.alm-nav-drawer__item-link:hover {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
}

.alm-nav-drawer__item-link:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: -2px;
}

/*
 * Toggle button in split layout only (--split = parent item with real URL).
 * Scoped to --split so the no-URL full-label button is unaffected.
 */
.alm-nav-drawer__item-row--split .alm-nav-drawer__item-btn {
	flex:                0 0 auto;
	width:               3rem;   /* 48px — exceeds 44px minimum touch target */
	min-height:          2.75rem;
	padding:             0;
	justify-content:     center;
	border-inline-start: 1px solid var(--alm-color-border);
	border-radius:       0;
}

/* Current-page and ancestor highlight for the split parent link */
.alm-nav-drawer__menu .current-menu-item .alm-nav-drawer__item-link,
.alm-nav-drawer__menu .current-menu-ancestor .alm-nav-drawer__item-link {
	color:       var(--alm-color-navy-primary);
	font-weight: var(--alm-weight-semibold);
	background:  var(--alm-color-navy-primary-10);
}


/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION REDESIGN — PREMIUM COMMERCE 2026
   ══════════════════════════════════════════════════════════════════ */

.alm-nav-primary {
	justify-content: center;
}

.alm-nav-primary > ul,
.alm-nav-primary .menu {
	gap: 0;
}

.alm-nav-primary > ul > li > a,
.alm-nav-primary .menu > li > a,
.alm-nav-link {
	min-height: 2.75rem;
	padding-inline: clamp(0.65rem, 1vw, 1rem);
	border-radius: var(--alm-radius-lg);
	font-size: var(--alm-text-sm);
}

.alm-nav-primary .current-menu-item > a,
.alm-nav-primary .current-page-ancestor > a,
.alm-nav-primary .current-menu-ancestor > a {
	background: transparent;
	box-shadow: inset 0 -2px 0 var(--alm-color-sand);
	border-radius: 0;
}

.alm-nav-category-trigger {
	padding-inline: var(--alm-space-4);
	background:
		linear-gradient(135deg, var(--alm-color-navy-primary), var(--alm-color-navy-secondary));
	box-shadow: 0 8px 18px rgba(14, 34, 58, 0.14);
}

.alm-nav-primary .sub-menu,
.alm-dropdown {
	min-width: 15rem;
	border-color: rgba(14, 34, 58, 0.10);
	border-radius: var(--alm-radius-xl);
	box-shadow: var(--alm-shadow-xl);
	padding: var(--alm-space-2);
}

.alm-nav-primary .sub-menu a,
.alm-dropdown a {
	border-radius: var(--alm-radius-md);
}

.alm-nav-overlay {
	background: rgba(14, 34, 58, 0.64);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.alm-nav-drawer {
	width: min(23rem, 92vw);
	background: var(--alm-color-surface-page);
	border-inline-start: 1px solid rgba(14, 34, 58, 0.08);
}

.alm-nav-drawer__header {
	min-height: 4.75rem;
	background: var(--alm-color-white);
}

.alm-nav-drawer__logo .custom-logo-link {
	display: flex;
	align-items: center;
}

.alm-nav-drawer__logo img,
.alm-nav-drawer__logo .custom-logo {
	height: 2.75rem;
	width: auto;
	max-width: 10rem;
	object-fit: contain;
}

.alm-nav-drawer__close {
	border: 1px solid var(--alm-color-border);
	background: var(--alm-color-surface-subtle);
}

.alm-nav-drawer__trust {
	padding: var(--alm-space-3) var(--alm-space-5);
	background: var(--alm-color-sand-light);
	color: var(--alm-color-navy-primary);
	font-size: var(--alm-text-sm);
	font-weight: var(--alm-weight-semibold);
	border-bottom: 1px solid rgba(199, 154, 86, 0.25);
}

.alm-nav-drawer__body {
	padding-block: var(--alm-space-3);
}

.alm-nav-drawer__menu a,
.alm-nav-drawer__item-btn {
	min-height: 3rem;
	border-radius: var(--alm-radius-lg);
	margin-inline: var(--alm-space-3);
	padding-inline: var(--alm-space-4);
}

.alm-nav-drawer__menu a:hover,
.alm-nav-drawer__menu a:focus-visible,
.alm-nav-drawer__item-btn:hover,
.alm-nav-drawer__item-btn:focus-visible {
	background: var(--alm-color-navy-primary-10);
}

.alm-nav-drawer__footer {
	background: var(--alm-color-white);
	border-top: 1px solid var(--alm-color-border);
	padding: var(--alm-space-4);
}

@media (max-width: 63.99rem) {
	.alm-nav-primary {
		display: none;
	}
}

@media (min-width: 64rem) {
	.alm-mobile-toggle {
		display: none;
	}
}