/**
 * simplydwell/nav-menu — responsive navigation bar driven by a WP menu (Figma).
 *
 * Two colour styles are expressed purely through CSS custom properties on the root,
 * so adding a third variant means one more `.sd-navbar--<name>` rule — no markup or
 * PHP change:
 *   .sd-navbar--light  light text (#FAF8F5) for dark backgrounds (Figma style 1)
 *   .sd-navbar--dark   dark  text (#1F242E) for light backgrounds (Figma style 2)
 * The pill button (last menu item) is brand orange in both.
 *
 * Layout: horizontal bar on desktop with hover/focus dropdowns; collapses to a
 * hamburger + slide-out drawer at <= 1024px (see view.js for the toggling).
 */
.sd-navbar {
	--sd-nav-color: #faf8f5;
	--sd-nav-color-hover: #d46f35;
	--sd-nav-btn-bg: #d46f35;
	--sd-nav-btn-bg-hover: #b85a26;
	--sd-nav-btn-color: #fff;
	--sd-nav-surface: #1f242e;
	--sd-nav-gap: 16px;
	box-sizing: border-box;
	width: 100%;
}

.sd-navbar--dark {
	--sd-nav-color: #1f242e;
	--sd-nav-surface: #faf8f5;
}

.sd-navbar *,
.sd-navbar *::before,
.sd-navbar *::after {
	box-sizing: border-box;
}

.sd-navbar__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 24px, 5vw, 93px );
	margin: 0 auto;
	max-width: 1440px;
	min-height: fit-content;
	/* padding: 24px clamp( 20px, 6vw, 120px ); */
}

/* ── Logo ───────────────────────────────────────────────────────────────────── */
.sd-navbar__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.sd-navbar__logo img,
.sd-navbar__logo .custom-logo {
	display: block;
	width: auto;
	height: 29px;
	max-height: 36px;
}

.sd-navbar__logo-text {
	font-family: 'Lexend', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	color: var( --sd-nav-color );
}

/* ── Desktop menu ───────────────────────────────────────────────────────────── */
.sd-navbar__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.sd-navbar__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-navbar__item {
	position: relative;
	display: flex;
	align-items: center;
}

.sd-navbar__link {
	display: inline-flex;
	align-items: center;
	font-family: 'Lexend', sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	text-decoration: none;
	white-space: nowrap;
	color: var( --sd-nav-color );
	transition: color 0.15s ease;
}

.sd-navbar__link:hover,
.sd-navbar__link:focus-visible,
.sd-navbar__item--has-children:hover > .sd-navbar__link,
.sd-navbar__item:focus-within > .sd-navbar__link {
	color: var( --sd-nav-color-hover );
}

/* Caret toggle on parent items. On desktop it is a non-interactive indicator (the
   hover/focus reveals the dropdown); it becomes a real tap target in the drawer. */
.sd-navbar__toggle {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: default;
	color: var( --sd-nav-color );
	pointer-events: none;
}

.sd-navbar__caret {
	transition: transform 0.2s ease;
}

.sd-navbar__item--has-children:hover .sd-navbar__caret,
.sd-navbar__item--has-children:focus-within .sd-navbar__caret {
	transform: rotate( 180deg );
	color: var( --sd-nav-color-hover );
}

/* Dropdown */
.sd-navbar__submenu {
	position: absolute;
	top: 30px;
	left: 0;
	z-index: 20;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var( --sd-nav-surface );
	border-radius: 0px;
	box-shadow: 0 12px 32px rgba( 31, 36, 46, 0.18 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.sd-navbar--dark .sd-navbar__submenu {
	box-shadow: 0 12px 32px rgba( 31, 36, 46, 0.12 );
	border: 1px solid rgba( 31, 36, 46, 0.08 );
}

.sd-navbar__item--has-children:hover > .sd-navbar__submenu,
.sd-navbar__item--has-children:focus-within > .sd-navbar__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.sd-navbar__sublink {
	display: block;
	padding: 8px 20px;
	font-family: 'Lexend', sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
	text-decoration: none;
	/* Submenu sits on the surface colour, so flip the text to contrast it. */
	color: var( --sd-nav-color );
	transition: color 0.15s ease;
}

.sd-navbar--light .sd-navbar__sublink {
	color: #faf8f5;
}

.sd-navbar--dark .sd-navbar__sublink {
	color: #1f242e;
}

.sd-navbar__sublink:hover,
.sd-navbar__sublink:focus-visible {
	color: var( --sd-nav-color-hover );
}

/* ── Button (last menu item) ────────────────────────────────────────────────── */
.sd-navbar__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 36px;
	padding: 8px 16px;
	font-family: 'Lexend', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	color: var( --sd-nav-btn-color );
	background: var( --sd-nav-btn-bg );
	border-radius: 20px;
	transition: background-color 0.15s ease;
}

.sd-navbar__button:hover,
.sd-navbar__button:focus-visible {
	background: var( --sd-nav-btn-bg-hover );
	color: var( --sd-nav-btn-color );
}

/* ── Hamburger (hidden on desktop) ──────────────────────────────────────────── */
.sd-navbar__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.sd-navbar__burger-bar {
	display: block;
	width: 24px;
	height: 2.5px;
	border-radius: 2px;
	background: var( --sd-nav-color );
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ── Drawer (tablet / mobile) ───────────────────────────────────────────────── */
.sd-navbar__overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba( 31, 36, 46, 0.5 );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.sd-navbar__overlay.is-open {
	opacity: 1;
}

.sd-navbar__drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	width: min( 360px, 86vw );
	height: 100vh;
	padding: 20px clamp( 20px, 6vw, 32px ) 32px;
	overflow-y: auto;
	background: var( --sd-nav-surface );
	box-shadow: -12px 0 32px rgba( 31, 36, 46, 0.2 );
	transform: translateX( 100% );
	transition: transform 0.28s ease;
}

.sd-navbar__drawer.is-open {
	transform: translateX( 0 );
}

.sd-navbar__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.25 );
}

.sd-navbar__drawer-close {
	display: inline-flex;
	padding: 6px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var( --sd-nav-color );
}

.sd-drawer-menu__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.sd-drawer-menu__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.sd-drawer-menu__link {
	flex: 1 1 auto;
	display: block;
	padding: 12px 0;
	font-family: 'Lexend', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	color: var( --sd-nav-color );
}

.sd-drawer-menu__link:hover,
.sd-drawer-menu__link:focus-visible {
	color: var( --sd-nav-color-hover );
}

.sd-drawer-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var( --sd-nav-color );
}

.sd-drawer-menu__toggle .sd-drawer-menu__caret {
	transition: transform 0.2s ease;
}

.sd-drawer-menu__toggle[aria-expanded="true"] .sd-drawer-menu__caret {
	transform: rotate( 180deg );
}

/* Drawer submenu accordion — collapsed by default, opened by the toggle. */
.sd-drawer-menu__submenu {
	flex: 1 0 100%;
	margin: 0;
	padding: 0 0 0 12px;
	list-style: none;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
}

.sd-drawer-menu__submenu.is-open {
	max-height: 600px;
}

.sd-drawer-menu__sublink {
	display: block;
	padding: 10px 0;
	font-family: 'Lexend', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	color: var( --sd-nav-color );
	opacity: 0.85;
}

.sd-drawer-menu__sublink:hover,
.sd-drawer-menu__sublink:focus-visible {
	color: var( --sd-nav-color-hover );
	opacity: 1;
}

/* Drawer button (last item) spans full width. */
.sd-drawer-menu__item--button {
	margin-top: 16px;
}

.sd-drawer-menu__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	font-family: 'Lexend', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	color: var( --sd-nav-btn-color );
	background: var( --sd-nav-btn-bg );
	border-radius: 20px;
	transition: background-color 0.15s ease;
}

.sd-drawer-menu__button:hover,
.sd-drawer-menu__button:focus-visible {
	background: var( --sd-nav-btn-bg-hover );
	color: var( --sd-nav-btn-color );
}

.sd-navbar__notice {
	margin: 0;
	padding: 16px clamp( 20px, 6vw, 120px );
	font-family: 'Lexend', sans-serif;
	font-size: 14px;
	color: #888;
}

/* Lock background scroll while the drawer is open (toggled by view.js on <html>). */
.sd-navbar-drawer-open,
.sd-navbar-drawer-open body {
	overflow: hidden;
}

/* ── Breakpoint: collapse to hamburger on tablet & mobile ───────────────────── */
@media ( max-width: 1024px ) {
	.sd-navbar__nav {
		display: none;
	}
	.sd-navbar__burger {
		display: flex;
	}
}

/* Keep the drawer/overlay out of the layout when JS hasn't opened them (the [hidden]
   attribute handles the no-JS case; these guard against FOUC on desktop). */
@media ( min-width: 1025px ) {
	.sd-navbar__drawer,
	.sd-navbar__overlay {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sd-navbar__submenu,
	.sd-navbar__drawer,
	.sd-navbar__overlay,
	.sd-navbar__caret,
	.sd-drawer-menu__submenu {
		transition: none;
	}
}