/**
 * Top navigation bar + mega-menu panels. Desktop only.
 *
 * Palette and type are lifted from the existing overlay panel so the two read as
 * one system: white ground, charcoal #2C3030 links, brand maroon #6E3C4C for
 * group labels, hairline rgba(44,48,48,.14). Body face is the site's Poppins.
 *
 * Loaded after main.min.css and new-header.css, so nothing here needs
 * `!important` to win.
 *
 * BREAKPOINT
 * ----------
 * The bar shares the existing 80px header row with a 177px logo and the 202px
 * booking button. Eight labels plus chevrons need 713px at the tight tier, and
 * the free box is 713px at 1200 — exactly zero slack, which one longer menu
 * label would clip. So the bar turns on at 1240 (753px box, 40px slack) and
 * steps up at 1340 and 1440. Below 1240 the MENU-button overlay takes over
 * completely unchanged. Every figure here was measured, not estimated.
 */

:root {
	--mn-ink: #2C3030;
	--mn-accent: #6E3C4C;
	--mn-rule: rgba(44, 48, 48, 0.14);
	--mn-quiet: #6b7070;
	--mn-ground: #fff;
	--mn-rail: #F7F4F4;
	--mn-h: 80px;          /* the header row this sits in — never grows */
}

/* Hidden by default so the overlay remains the only nav on narrow screens and
   during any CSS load order surprise. */
.ssm-mn {
	display: none;
}

@media (min-width: 1240px) {

	/* ---------- the bar ---------- */

	/* The header row is `display: grid; grid-auto-flow: column` with no declared
	   tracks. Adding the bar as one more child made it the 6th, and the booking
	   CTA wrapped onto an implicit SECOND row that sat right on top of the bar
	   (nav 371→1234, CTA 619→821 at 1440). The grid declares nothing but a
	   column gap and auto-flow, so flex reproduces it exactly while laying every
	   child in one row and letting the bar absorb the free middle. Scoped to
	   `.ssm-mn-on` and this breakpoint, and `:not(.navbar-2)` keeps the dormant
	   second header out of it. */
	body.ssm-mn-on header.navbar:not(.navbar-2) .navbar__container__grid {
		display: flex;
		align-items: center;
		column-gap: 2rem;
	}

	.ssm-mn {
		display: block;
		/* Absorbs the space between the logo and the booking button, so the bar
		   can never sit on top of either at any width. */
		flex: 1 1 auto;
		min-width: 0;
		align-self: stretch;
	}

	.ssm-mn__bar {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: center;
		gap: 0;
		height: var(--mn-h);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ssm-mn__item {
		position: relative;
		display: flex;
		margin: 0;
		list-style: none;
	}

	.ssm-mn__link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 100%;
		/* Three measured tiers. Eight labels plus their chevrons need ~746px at
		   13.5px/11px, but the box is only 713px at 1200 — so the tight tier
		   trims both. Each tier below was checked against the bar's real
		   scrollWidth, not estimated. */
		padding: 0 8px;
		border: 0;
		background: none;
		font-family: 'Miriam Libre', Poppins, sans-serif;
		font-size: 13px;
		/* 500 rather than 400: small text on a dark ground needs the extra stroke
		   weight to hold its edges. */
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
		white-space: nowrap;
		/* EXPLICIT, never `inherit`. Inheriting picked up the theme's muted
		   rgb(90,90,90) against the header's rgb(44,48,48) ground — a measured
		   contrast of 1.94:1, far below the 4.5:1 WCAG AA minimum, which is why
		   the labels read as washed out. White measures 13.4:1 here, and the
		   header ground was confirmed rgb(44,48,48) on every page type
		   (home, wellness, shop, treatments, treatment, location, blog,
		   specials) so there is no page where this inverts. */
		color: #fff;
		text-decoration: none;
		cursor: pointer;
		/* The underline is drawn on a pseudo element so it can animate from the
		   centre without shifting the label. */
		position: relative;
		transition: color 180ms ease;
		text-transform: uppercase;
		letter-spacing: .2em; /* live .nav-top li a: Miriam Libre .875rem .285em uppercase, tightened to fit seven items on one row */
	}

	.ssm-mn__link::after {
		content: "";
		position: absolute;
		left: 8px;
		right: 8px;
		bottom: 22px;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 200ms ease;
	}

	.ssm-mn__link:hover::after,
	.ssm-mn__link:focus-visible::after,
	.ssm-mn__item.is-open > .ssm-mn__link::after {
		transform: scaleX(1);
	}

	/* The open item gets a faint lift so it is obvious which panel belongs to
	   which label. Kept to 8% white so the text contrast barely moves. */
	.ssm-mn__item.is-open > .ssm-mn__link {
		background: rgba(255, 255, 255, 0.08);
	}

	/* Focus ring has to be visible against the dark ground, so it is white here
	   rather than the maroon used inside the white panel. */
	.ssm-mn__link:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}

	/* ---- navigable parent: label links, chevron toggles ----
	   The pair must occupy the SAME total width as the old single button, because
	   the bar is width-critical (see the three measured tiers on .ssm-mn__link).
	   The old button was `padding: 0 8px` = 16px of horizontal padding; the split
	   keeps exactly that, 8px on the outside of each half and 0 between them, with
	   the visual separation coming from the chevron button's own 4px inset. */
	.ssm-mn__link--split {
		padding-right: 0;
	}
	.ssm-mn__chevbtn {
		display: inline-flex;
		align-items: center;
		height: 100%;
		padding: 0 8px 0 6px;
		border: 0;
		background: none;
		/* EXPLICIT #fff, for exactly the reason recorded on .ssm-mn__link above:
		   `color: inherit` here picked up the theme's muted rgb(90,90,90) against
		   the header's rgb(44,48,48) ground — measured 1.94:1, well under the 4.5:1
		   WCAG AA floor — while the combined-button chevrons next to it measured
		   #fff. The split chevrons were visibly dimmer than the ones they sit
		   beside. Same trap, same fix. */
		color: #fff;
		cursor: pointer;
		/* Own line-height so the SVG centres on the bar the same way the label does. */
		line-height: 1;
	}
	/* The underline indicator belongs to the label, not the chevron — it marks the
	   destination, and running it under the chevron would imply the arrow is part
	   of the link. */
	.ssm-mn__chevbtn::after {
		content: none;
	}
	.ssm-mn__chevbtn:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
		border-radius: 2px;
	}
	/* Hovering either half lights both, so the pair still reads as one item. */
	.ssm-mn__item:hover > .ssm-mn__link--split,
	.ssm-mn__item:hover > .ssm-mn__chevbtn,
	.ssm-mn__item.is-open > .ssm-mn__link--split,
	.ssm-mn__item.is-open > .ssm-mn__chevbtn {
		color: #fff;
	}

	.ssm-mn__chev {
		flex: 0 0 auto;
		transition: transform 200ms ease;
	}

	.ssm-mn__item.is-open .ssm-mn__chev {
		transform: rotate(180deg);
	}

	/* ---------- the panel ---------- */

	.ssm-mn__panel {
		/* Full-bleed from the bar's bottom edge. The header is `position: fixed`
		   so a viewport-width panel is anchored with left/right rather than by
		   guessing a negative offset from this list item. */
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--mn-h) + var(--mn-panel-top, 0px));
		background: var(--mn-ground);
		border-top: 1px solid var(--mn-rule);
		box-shadow: 0 22px 44px -22px rgba(44, 48, 48, 0.3);
		z-index: 140;   /* under .navbar (150) so the bar stays above its own panel */
		/* Never taller than the space below the header, and scroll if a branch
		   ever outgrows it, so a long list can't run off-screen. */
		max-height: calc(100vh - var(--mn-h) - var(--mn-panel-top, 0px) - 12px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ssm-mn__panel[hidden] {
		display: none;
	}

	.ssm-mn__panel-in {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 0 48px;
		max-width: 1560px;
		margin: 0 auto;
		padding: 34px 50px 38px;
	}

	/* Balanced multicolumn, not grid.
	   The groups are wildly uneven — 6, 7, 2, 3, 8 and 4 links — and a grid puts
	   each in its own track, so a 4-column row leaves two empty cells plus a tall
	   hole under the two short groups. Multicolumn balances by height and packs
	   the blocks, which is what actually removes the whitespace. `break-inside`
	   keeps a group whole; without it a heading strands at the foot of a column
	   with its links continuing in the next one. */
	.ssm-mn__cols {
		display: block;
		columns: 4 200px;
		column-gap: 40px;
	}

	.ssm-mn__col {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}

	.ssm-mn__col + .ssm-mn__col {
		margin-top: 26px;
	}

	/* A flat branch has no groups to make columns out of, so its single list is
	   split instead. Column count comes from PHP, based on the item count.
	   Each tier is also CAPPED in width: left to fill the full column area, seven
	   links stretched across 1024px with a gulf between the two columns and a
	   dead right-hand half — a short list has to read as a compact block, not a
	   spread-out one. The cap is roughly 240px per column. */
	.ssm-mn__panel-in.is-flat .ssm-mn__cols {
		columns: auto;
	}
	.ssm-mn__panel-in.is-flat .ssm-mn__list {
		column-gap: 40px;
	}
	.ssm-mn__panel-in.is-flat.flat-1 .ssm-mn__list { columns: 1; max-width: 260px; }
	.ssm-mn__panel-in.is-flat.flat-2 .ssm-mn__list { columns: 2; max-width: 520px; }
	.ssm-mn__panel-in.is-flat.flat-3 .ssm-mn__list { columns: 3; max-width: 780px; }
	.ssm-mn__panel-in.is-flat .ssm-mn__list li { break-inside: avoid; }

	.ssm-mn__col {
		min-width: 0;
	}

	.ssm-mn__group {
		display: block;
		margin: 0 0 0.7em;
		padding-bottom: 0.55em;
		border-bottom: 1px solid var(--mn-rule);
		font-family: 'Miriam Libre', Poppins, sans-serif;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--mn-accent);
		text-decoration: none;
	}

	a.ssm-mn__group:hover,
	a.ssm-mn__group:focus-visible {
		text-decoration: underline;
	}

	/* `nav-collapsed` groups were secondary in the overlay. Here they stay
	   visible but read quieter, so they don't compete with the main catalogue. */
	.ssm-mn__col.is-secondary .ssm-mn__group,
	.ssm-mn__col.is-loose .ssm-mn__group {
		color: var(--mn-quiet);
	}

	.ssm-mn__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ssm-mn__list li {
		margin: 0;
		list-style: none;
	}

	.ssm-mn__list a {
		display: block;
		padding: 0.34em 0;
		font-family: Poppins, sans-serif;
		font-size: 0.925rem;
		line-height: 1.35;
		color: var(--mn-ink);
		text-decoration: none;
		transition: color 150ms ease;
	}

	.ssm-mn__list a:hover,
	.ssm-mn__list a:focus-visible {
		color: var(--mn-accent);
		text-decoration: underline;
	}

	/* ---------- the rail ---------- */

	.ssm-mn__rail {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 20px 22px;
		background: var(--mn-rail);
		/* Hugs its own content. Stretched to the grid row it left a tall block of
		   empty grey below the second address, which reads as unfinished. */
		align-self: start;
	}

	.ssm-mn__cta {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 11px 14px;
		background: var(--mn-accent);
		font-family: 'Miriam Libre', Poppins, sans-serif;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #fff;
		text-decoration: none;
		transition: background 180ms ease;
	}

	.ssm-mn__cta:hover,
	.ssm-mn__cta:focus-visible {
		background: #562E3C;
		color: #fff;
	}

	.ssm-mn__rail-label {
		font-family: 'Miriam Libre', Poppins, sans-serif;
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--mn-quiet);
	}

	.ssm-mn__loc {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.ssm-mn__loc + .ssm-mn__loc {
		padding-top: 12px;
		border-top: 1px solid var(--mn-rule);
	}

	.ssm-mn__loc-name {
		font-family: 'Miriam Libre', Poppins, sans-serif;
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--mn-ink);
		text-decoration: none;
	}

	.ssm-mn__loc-name:hover,
	.ssm-mn__loc-name:focus-visible {
		color: var(--mn-accent);
		text-decoration: underline;
	}

	.ssm-mn__loc-tel,
	.ssm-mn__loc-addr {
		font-family: Poppins, sans-serif;
		font-size: 0.8rem;
		line-height: 1.45;
		color: var(--mn-quiet);
		text-decoration: none;
	}

	.ssm-mn__loc-tel:hover,
	.ssm-mn__loc-addr:hover,
	.ssm-mn__loc-tel:focus-visible,
	.ssm-mn__loc-addr:focus-visible {
		color: var(--mn-accent);
		text-decoration: underline;
	}

	/* ---------- what the bar replaces ---------- */

	/* The MENU button and its overlay are redundant once the bar is present.
	   Hidden rather than removed so the whole feature is one breakpoint away
	   from being reverted, and so the mobile path stays completely intact. */
	body.ssm-mn-on .nav__menu-button {
		display: none;
	}

	/* The booking CTA is centred in the header by DB CSS — the Customizer block
	   printed as `<style id="wp-custom-css">` carries
	   `.appointment-cta { position:absolute; top:50%; left:50% }`. That is the
	   exact space the bar needs, and being out of flow it overlapped the bar
	   regardless of how the row was laid out.
	   Returned to flow and pinned right, giving the conventional logo / nav / CTA
	   arrangement. The selector outweighs the single-class DB rule on specificity
	   alone, so this needs no `!important` even though wp-custom-css prints after
	   the enqueued stylesheets. Nothing is edited in the database. */
	body.ssm-mn-on header.navbar:not(.navbar-2) .appointment-cta {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		margin-left: auto;
		flex: 0 0 auto;
	}

	/* Room for the bar: the booking button is 315px at its natural size, which
	   leaves too little for eight items here. Trimmed to label plus arrow rather
	   than dropped — it is the primary conversion action. */
	body.ssm-mn-on .navbar .btn--schedule {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 12px;
		letter-spacing: 0.04em;
	}
}

/* Middle tier — room to breathe before the full scale. */
@media (min-width: 1340px) {
	.ssm-mn__link {
		font-size: 13.5px;
		padding: 0 11px;
	}
	.ssm-mn__link::after {
		left: 11px;
		right: 11px;
	}
}

/* Comfortable scale once there is genuinely room. */
@media (min-width: 1440px) {
	.ssm-mn__link {
		font-size: 14px;
		padding: 0 15px;
	}
	.ssm-mn__link::after {
		left: 15px;
		right: 15px;
	}
	.ssm-mn__panel-in {
		padding: 38px 50px 42px;
		gap: 0 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssm-mn__link,
	.ssm-mn__link::after,
	.ssm-mn__chev,
	.ssm-mn__cta,
	.ssm-mn__list a {
		transition: none;
	}
}