/* Simply Select header — desktop mega menu + mobile shell.
   Mobile drawer styling lives in mmenu-light.css (vendor).

   Markup contract: each parent <li> contains an <a> and a single <ul> as
   direct child. That <ul> doubles as the desktop mega panel AND the mmenu
   light submenu (mmenu walks <ul>s that are direct children of <li>). */

:root {
	--ss-header-h:        90px;
	--ss-header-bg:       #ffffff;
	--ss-text:            #1a1a1a;
	--ss-text-muted:      #555;
	--ss-accent:          #b87a52;
	--ss-rule:            #e6e6e6;
	--ss-tab-active-bg:   #f3f0ec;
	--ss-shadow:          0 12px 30px rgba(0, 0, 0, 0.08);
	--ss-mega-pad:        2.25rem;
	--ss-mega-pad-y:      2rem;
	--ss-tab-w:           260px;
	--ss-trans:           180ms ease;
	--ss-close-delay:     250ms;
	--ss-uppercase-ls:    0.08em;
	--ss-pad-x:           clamp(1rem, 4vw, 2.5rem);
	--ss-mega-h:          min(820px, calc(100vh - var(--ss-header-h) - 1rem));
	--ss-mega-max-w:      1400px;
}

@media (prefers-reduced-motion: reduce) {
	:root { --ss-trans: 0ms; }
}

/* During window resize the breakpoint can flip mid-drag and trigger transitions
   that flash the mega panels into view. The JS resize-guard sets this class for
   ~200ms after the last resize event; kill animations and force the panel
   hidden so nothing leaks across the breakpoint change. */
.ss-resizing .ss-header *,
.ss-resizing .ss-mega,
.ss-resizing .ss-region__panel {
	transition: none !important;
	animation: none !important;
}
.ss-resizing .ss-mega {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Logged-in admins see the WP admin bar; push the mmenu drawer below it so
   the back-arrow / title bar stays visible. */
body.admin-bar .mm-ocd { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .mm-ocd { top: 46px; }
}

/* ---------- Skip link ---------- */
.ss-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #000;
	color: #fff;
	padding: .75rem 1rem;
	z-index: 10000;
}
.ss-skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header shell ---------- */
.ss-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ss-header-bg);
	height: var(--ss-header-h);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	padding: 0 var(--ss-pad-x);
	border-bottom: 1px solid var(--ss-rule);
}

.ss-logo {
	display: inline-flex;
	align-items: center;
	color: var(--ss-text);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: var(--ss-uppercase-ls);
	text-transform: uppercase;
}
.ss-logo img,
.ss-logo svg { height: 38px; width: auto; display: block; }

.ss-cta {
	display: inline-flex;
	align-items: center;
	padding: .7rem 1.25rem;
	background: var(--ss-text);
	color: #fff;
	text-decoration: none;
	font-size: .8125rem;
	letter-spacing: var(--ss-uppercase-ls);
	text-transform: uppercase;
	transition: background var(--ss-trans), color var(--ss-trans);
}
.ss-cta:hover,
.ss-cta:focus-visible { background: var(--ss-accent); color: #fff; }

/* ---------- Burger (mobile only) ---------- */
.ss-burger {
	display: none;
	background: none;
	border: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	color: var(--ss-text);
}
.ss-burger svg { width: 26px; height: 26px; display: block; margin: auto; }
.ss-burger svg path {
	transform-box: view-box;
	transform-origin: center;
	transition: transform .25s ease, opacity .15s ease;
}
body.mm-ocd-opened .ss-burger .ss-burger__top {
	transform: rotate(45deg) translateY(6px);
}
body.mm-ocd-opened .ss-burger .ss-burger__mid {
	opacity: 0;
}
body.mm-ocd-opened .ss-burger .ss-burger__bot {
	transform: rotate(-45deg) translateY(-6px);
}

/* ---------- Primary nav (desktop) ---------- */
.ss-nav {
	justify-self: center;
}
.ss-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	align-items: center;
}

.ss-item { position: static; }
.ss-link {
	display: inline-flex;
	align-items: center;
	height: var(--ss-header-h);
	color: var(--ss-text);
	text-decoration: none;
	font-size: .8125rem;
	letter-spacing: var(--ss-uppercase-ls);
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: border-color var(--ss-trans), color var(--ss-trans);
}
button.ss-link {
	background: none;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	padding: 0;
	font: inherit;
	font-size: .8125rem;
	letter-spacing: var(--ss-uppercase-ls);
	text-transform: uppercase;
	cursor: pointer;
}
.ss-item:hover > .ss-link,
.ss-item:focus-within > .ss-link {
	border-bottom-color: var(--ss-accent);
	color: var(--ss-accent);
}

/* Dropdown chevron — sits to the right of the trigger text, inherits
   color via currentColor, and flips when the panel is open. Hidden in
   the mobile drawer (mmenu adds its own chevron there). */
.ss-chevron {
	width: .65em;
	height: .325em;
	margin-left: .45em;
	vertical-align: 1px;
	transition: transform var(--ss-trans);
}
.ss-link[aria-expanded="true"] .ss-chevron {
	transform: rotate(180deg);
}

/* Zero-specificity list reset for nested <ul>s inside the mega so mmenu's
   per-UL padding-right (sliding-panel offset, specificity 0,1,1) keeps winning
   in the drawer. */
:where(.ss-mega ul) { list-style: none; margin: 0; padding: 0; }

/* ---------- Desktop mega menu ----------
   Scoped to (min-width: 1200px) so the panel-show-on-hover behavior never fires
   in mobile mode. Without this, a mouse pointer at a narrow viewport would
   trigger :hover and try to position the desktop mega panel inside mmenu's
   off-canvas DOM, producing a broken stacked layout. */
@media (min-width: 1200px) {
	/* Mega menu panel (the parent <ul> directly under .ss-item).
	   Centered, capped at --ss-mega-max-w. left:50% + translateX(-50%) keeps it
	   horizontally centered relative to the header. translateY animates state. */
	.ss-mega {
		position: absolute;
		left: 50%;
		top: 100%;
		width: 100%;
		max-width: var(--ss-mega-max-w);
		background: #fff;
		box-shadow: var(--ss-shadow);
		border-top: 1px solid var(--ss-rule);
		list-style: none;
		margin: 0;
		padding: var(--ss-mega-pad-y) var(--ss-mega-pad);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -6px);
		/* Close-delay for hover intent: when the pointer leaves, wait
		   --ss-close-delay before fading out. If the user re-enters (e.g. crosses
		   into the mega panel), the :hover rule below resets the delay to 0
		   and the close animation never starts.
		   We rely on `visibility` (not pointer-events) to gate interactivity —
		   pointer-events flips instantly on rule changes, which would yank the
		   panel out from under the cursor before the delay could matter. */
		transition:
			opacity var(--ss-trans) var(--ss-close-delay),
			transform var(--ss-trans) var(--ss-close-delay),
			visibility var(--ss-trans) var(--ss-close-delay);
	}

	.ss-item--has-mega:hover > .ss-mega,
	.ss-item--has-mega.is-open > .ss-mega {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition-delay: 0ms;
	}

	.ss-mega a {
		color: var(--ss-text);
		text-decoration: none;
		font-size: .8125rem;
		font-weight: 500;
		letter-spacing: var(--ss-uppercase-ls);
		text-transform: uppercase;
		display: inline-block;
		padding: .25rem 0;
		transition: color var(--ss-trans);
	}
	.ss-mega a:hover,
	.ss-mega a:focus-visible { color: var(--ss-accent); }

	/* Services mega */
	.ss-mega--services {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 2.5rem;
	}
	.ss-mega--services > .ss-mega__col { min-width: 0; }
	.ss-mega--services .ss-mega__heading {
		display: block;
		/*font-size: .75rem;*/
		letter-spacing: var(--ss-uppercase-ls);
		text-transform: uppercase;
		color: var(--ss-accent);
		text-decoration: none;
		font-weight: 700;
		margin-bottom: .75rem;
		padding-bottom: .5rem;
		border-bottom: 1px solid var(--ss-rule);
	}
	.ss-mega--services .ss-mega__col li { margin: .35rem 0; }

	/* Destinations mega (tab style).
	   The .ss-mega--destinations <ul> IS the regions list. Region <li>s flow on
	   the left to form the tab rail (each fixed-width); each region's nested
	   <ul.ss-region__panel> is absolutely positioned to the right of the rail. */
	.ss-mega--destinations {
		padding: 0;
		min-height: var(--ss-mega-h);
		box-sizing: border-box;
		/* Carry the base .ss-mega transitions forward and add min-height so the
		   JS-driven height sync animates smoothly when switching regions.
		   A plain `transition: min-height` here would discard the inherited
		   opacity/transform/visibility entries from the .ss-mega rule. */
		transition:
			opacity var(--ss-trans) var(--ss-close-delay),
			transform var(--ss-trans) var(--ss-close-delay),
			visibility var(--ss-trans) var(--ss-close-delay),
			min-height 250ms ease;
	}
	.ss-mega--destinations > .ss-region {
		display: block;
		width: calc(var(--ss-tab-w) + var(--ss-pad-x));
		padding-left: var(--ss-pad-x);
		padding-right: 1rem;
		box-sizing: border-box;
	}
	.ss-mega--destinations > .ss-region:first-child { padding-top: var(--ss-mega-pad-y); }
	.ss-mega--destinations > .ss-region:last-child  { padding-bottom: var(--ss-mega-pad-y); }

	/* Vertical divider between rail and panel */
	.ss-mega--destinations::after {
		content: '';
		position: absolute;
		left: calc(var(--ss-tab-w) + var(--ss-pad-x));
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--ss-rule);
	}

	/* Higher specificity overrides .ss-mega a baseline. */
	.ss-mega--destinations a.ss-region__tab {
		display: block;
		padding: .65rem 0.5rem;
		font-size: .8125rem;
		font-weight: 600;
		color: var(--ss-text);
		text-decoration: none;
		letter-spacing: var(--ss-uppercase-ls);
		text-transform: uppercase;
		border-radius: 3px;
		transition: background var(--ss-trans), color var(--ss-trans);
	}
	.ss-region.is-active > .ss-region__tab {
		background: var(--ss-tab-active-bg);
		color: var(--ss-text);
	}

	/* Panels stack absolutely in the right column; only .is-active shows.
	   No height constraint — any fixed height (bottom:0, height, max-height)
	   forces multi-column overflow to go horizontal (the right-edge cutoff).
	   Without it, the browser balances content across the columns the panel
	   width affords and the panel grows naturally to fit. break-inside:avoid
	   on .ss-country (below) keeps countries intact across column breaks. */
	.ss-region__panel {
		display: none;
		position: absolute;
		left: calc(var(--ss-tab-w) + var(--ss-pad-x) + 1px);
		right: var(--ss-pad-x);
		top: 0;
		padding: var(--ss-mega-pad-y) var(--ss-mega-pad);
		column-width: 175px;
		column-gap: 2rem;
		box-sizing: border-box;
	}
	.ss-region.is-active > .ss-region__panel { display: block; }

	/* Country block — keep together, never split across columns */
	.ss-country {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: .25rem;
		padding-bottom: .25rem;
		border-bottom: 1px solid var(--ss-rule);
	}
	.ss-country:last-child { border-bottom: 0; }

	/* Higher specificity overrides .ss-mega a baseline. */
	.ss-mega--destinations a.ss-country__heading {
		display: block;
		font-size: .8125rem;
		font-weight: 700;
		color: var(--ss-accent);
		text-transform: uppercase;
		letter-spacing: var(--ss-uppercase-ls);
		margin-bottom: 0;
	}
	.ss-mega--destinations a.ss-country__heading:hover,
	.ss-mega--destinations a.ss-country__heading:focus-visible {
		color: var(--ss-text);
	}
	.ss-country__cities { margin: 0; padding: 0; }
	.ss-country__cities li { margin: 0 0; }
	.ss-mega--destinations .ss-country__cities a {
		font-size: .8125rem;
		color: var(--ss-text-muted);
		letter-spacing: var(--ss-uppercase-ls);
		text-transform: uppercase;
		padding: 0 0;
		line-height: 1.1;

		&:hover{
			color: var(--ss-accent);
		}
	}
}

/* ---------- Mobile (<1200px) — hand off to mmenu ---------- */
@media (max-width: 1199px) {
	.ss-header {
		/* Logo grows to fill, burger pinned right; CTA is hidden in the drawer. */
		grid-template-columns: 1fr auto;
	}
	/* Hide desktop nav layout; mmenu will move #ss-nav into an off-canvas drawer. */
	.ss-nav {
		position: absolute;
		left: -9999px;
	}
	.ss-burger { display: flex; }

	/* When mmenu has activated, restore nav to flow inside the drawer. */
	.mm-ocd .ss-nav {
		position: static;
		left: auto;
	}
	/* Inside the drawer, strip just enough desktop styling to let mmenu drive
	   layout. Critically, do NOT touch position, left/top/right/bottom,
	   display, padding, or width on .ss-mega — mmenu sets
	   `position: fixed; left: 100%; width: calc(100% + 30%); padding-right: 30%`
	   to make sliding panels work. Overriding any of those breaks drill-in
	   or makes chevrons render off the drawer's right edge. */
	.mm-ocd .ss-mega,
	.mm-ocd .ss-region__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		box-shadow: none;
		border-top: 0;
		min-height: 0;
		columns: auto;
		column-width: auto;
		column-count: auto;
		column-gap: 0;
		column-fill: auto;
		grid-template-columns: none;
	}
	.mm-ocd .ss-mega--destinations::after,
	.mm-ocd .ss-mega--services::before { display: none; }
	.mm-ocd .ss-region.is-active > .ss-region__tab { background: transparent; }
	.mm-ocd .ss-country { border-bottom: 0; padding: 0; margin: 0; }
	/* Desktop's region rail width (220px+pad) makes child panels mis-size in
	   the drawer; restore default LI width so mmenu's panel calc works. */
	.mm-ocd .ss-mega--destinations > .ss-region {
		width: auto;
		padding: 0;
	}

	/* Anchors are inline-block so mmenu's chevron click area at row right
	   stays hittable. Without this the anchor steals the drill-in click. */
	.mm-ocd .ss-mega a,
	.mm-ocd .ss-region__tab,
	.mm-ocd .ss-country__heading,
	.mm-ocd .ss-country__cities a,
	.mm-ocd .ss-link {
		display: inline-block;
		padding: .9rem 1.25rem;
		text-transform: none;
		letter-spacing: 0;
		font-size: .95rem;
		color: var(--ss-text);
		text-decoration: none;
		height: auto;
		border-bottom: none;
		font-weight: normal;
	}

	/* mmenu light's anchor-only divider rule (.mm-spn a:not(:last-child)::after)
	   doesn't match our Services <button>, so the vertical line beside the
	   chevron is missing on that row. Mirror mmenu's geometry for buttons. */
	.mm-ocd .mm-spn button.ss-link {
		position: relative;
		z-index: 1;
	}
	.mm-ocd .mm-spn button.ss-link:not(:last-child) {
		width: calc(100% - var(--mm-spn-item-height));
	}
	.mm-ocd .mm-spn button.ss-link:not(:last-child)::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		border-right: 1px solid var(--ss-text);
		opacity: .15;
	}
	/* The chevron divider on anchor rows uses currentColor too, so the accent
	   hover/focus color leaks into the border. Pin it to the text color. */
	.mm-ocd .mm-spn a:not(:last-child)::after {
		border-right-color: var(--ss-text);
	}
	/* Section "headings" (Bespoke Journeys, etc.) act as drill rows in the
	   drawer. Match the other row types so the level reads consistently. */
	.mm-ocd .ss-mega__heading {
		display: inline-block;
		padding: .9rem 1.25rem;
		font-size: .95rem;
		color: var(--ss-text);
		text-decoration: none;
		text-transform: none;
		letter-spacing: 0;
		font-weight: normal;
		border-bottom: 0;
		margin-bottom: 0;
	}

	/* Consistent tap/hover feedback on every drawer row regardless of depth. */
	.mm-ocd .ss-link:hover,
	.mm-ocd .ss-link:active,
	.mm-ocd .ss-link:focus,
	.mm-ocd .ss-mega a:hover,
	.mm-ocd .ss-mega a:active,
	.mm-ocd .ss-mega a:focus,
	.mm-ocd .ss-region__tab:hover,
	.mm-ocd .ss-region__tab:active,
	.mm-ocd .ss-region__tab:focus,
	.mm-ocd .ss-country__heading:hover,
	.mm-ocd .ss-country__heading:active,
	.mm-ocd .ss-country__heading:focus,
	.mm-ocd .ss-country__cities a:hover,
	.mm-ocd .ss-country__cities a:active,
	.mm-ocd .ss-country__cities a:focus,
	.mm-ocd .ss-mega__heading:hover,
	.mm-ocd .ss-mega__heading:active,
	.mm-ocd .ss-mega__heading:focus {
		color: var(--ss-accent);
		outline: none;
	}

	/* Hide mmenu's chevron on rows that have no submenu (leaves like cities,
	   Global Events, Why Simply Select). Modern :has() selector. */
	.mm-ocd .mm-spn li:not(:has(> ul))::before {
		display: none;
	}

	/* Hide the trigger chevron inside the mobile drawer — mmenu provides
	   its own drill-in chevron on the right edge of the row. */
	.mm-ocd .ss-chevron { display: none; }

	/* Header CTA hidden on mobile — moved into drawer as the last menu item. */
	.ss-cta { display: none; }
}

/* The "Speak with an advisor" drawer entry only exists on mobile; hide
   it from the desktop nav row. */
@media (min-width: 1200px) {
	.ss-item--mobile-cta { display: none; }
}

/* Focus outlines: keyboard-only, on the actual control. */
.ss-link:focus,
.ss-region__tab:focus,
.ss-mega a:focus { outline: none; }
.ss-link:focus-visible,
.ss-region__tab:focus-visible,
.ss-mega a:focus-visible {
	outline: 2px solid var(--ss-accent);
	outline-offset: 2px;
}