/**
 * Section 2 - Primary navigation
 *
 * A pale grey band, edge to edge, with the nav sitting on it as a white
 * rounded-rectangle. Items spread evenly on desktop; on tablet and phone the
 * bar collapses to a "Menu" disclosure.
 */

/*
 * The band's own padding is what sets the pill off: 12px of grey above and
 * below it, and on viewports wider than the container the max-width leaves
 * grey down both sides as well.
 *
 * #F4F6F8 as of 2026-09-01, previously brand cyan. Read the contrast note on
 * .medlife-nav below before touching this value again - the band and the pill
 * are only 1.08:1 apart, so the pill's own ring is the entire boundary.
 *
 * The 12px also absorbs the ring: the pill carries a 2px border and a 4px
 * halo, so 6px of this padding is spoken for and only ~6px of clear band
 * remains above and below. Reducing it crowds the halo against the header.
 */
.medlife-nav-wrap {
	background: #F4F6F8;
	padding: 12px 24px;
}

/*
 * The pill is marked by a 2px cyan ring plus a soft halo, added 2026-09-01
 * because the edge it replaced had effectively disappeared.
 *
 * MEASURED against the #F4F6F8 band:
 *
 *     #7AD2F4 ring                       1.57:1
 *     #e3e8ee hairline (what this        1.14:1
 *       replaced - the search pill's
 *       --ml-search-ring treatment)
 *     rgba(122,210,244,.22) halo,        1.11:1
 *       compositing to #D9EEF7
 *     white pill, no edge at all         1.08:1
 *
 * So the ring is roughly 1.4x the edge the hairline gave, and the halo is
 * decorative rather than load-bearing - it is barely separable from the band
 * and should not be counted on to define the shape.
 *
 * 1.57:1 is still under 3:1, and that is a deliberate look decision rather
 * than an oversight. WCAG 1.4.11 covers boundaries required to IDENTIFY a
 * component; this pill is a decorative container whose links identify
 * themselves by their text, and no text sits on the band - every label is navy
 * on white (15.54:1) or on the active chip (13.34:1). If the silhouette ever
 * has to clear 3:1, `rgba(10, 37, 64, .52)` -> #7A8998 measures 3.31:1, but
 * that is a grey outline, not a cyan one.
 *
 * The inset hairline this replaced is GONE, on purpose. A border and an inset
 * ring would draw two concentric edges 1px apart, which reads as a rendering
 * fault rather than as emphasis. One edge only.
 *
 * `border`, not an outset box-shadow, because the ring is meant to occupy
 * layout: the pill is 4px wider and taller than it was, and the band's 12px
 * padding absorbs it. A shadow would overlap the band instead and the halo
 * would start 2px inside the ring.
 */
.medlife-nav {
	max-width: var(--ml-container);
	margin: 0 auto;
	background: var(--ml-white);
	border: 2px solid #7AD2F4;
	border-radius: 14px;
	box-shadow: 0 0 0 4px rgba(122, 210, 244, .22);
	position: relative;
}

/*
 * Deliberately NO `overflow: hidden` on the pill. It is the obvious way to
 * make content respect the corner radius, and it would clip the Categories
 * panel out of existence - the panel is absolutely positioned inside this
 * element. The list's own horizontal padding clears the curve instead.
 */

/* ---------- List ---------- */

.medlife-nav__list {
	list-style: none;
	margin: 0;
	/*
	 * Was sized to clear a 40px corner radius; the radius is 14px as of
	 * 2026-09-01 and 34px is now more inset than the curve strictly needs.
	 * Kept anyway - it also sets the bar's horizontal rhythm, and trimming it
	 * would move every label. Change it as a spacing decision, not as a
	 * leftover to tidy.
	 */
	padding: 0 34px;
	display: flex;
	align-items: stretch;
	/*
	 * space-between distributes the leftover width equally *between* items, so
	 * the gaps come out even whatever the label lengths are.
	 */
	justify-content: space-between;
	gap: 8px;
	min-height: 56px;
}

.medlife-nav__item {
	display: flex;
	align-items: stretch;
	position: relative;
}

/* ---------- Links ---------- */

.medlife-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 15px 12px;
	font-family: var(--ml-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ml-navy);
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

/* -------------------------------------------------------------------------
 * Neutralising Astra's global control styling
 *
 * The Categories toggle and the burger are bare <button> elements, and Astra
 * styles those globally:
 *
 *     button:focus { color:#fff; background-color: var(--ast-global-color-1);
 *                    border-color: var(--ast-global-color-1); }
 *
 * That selector is (0,1,1) and outranks `.medlife-nav__link` at (0,1,0), so
 * the moment Categories was clicked Astra painted a filled pill across it.
 * The list stretches its items, so the pill ran the full height of the bar and
 * sat flush against its bottom edge - which is what read as bleeding out over
 * the banner underneath.
 *
 * Every state is pinned here, so no background can appear on a nav control at
 * all. The open state is cyan text and a rotated chevron, as designed.
 * ---------------------------------------------------------------------- */

.medlife-nav__link,
.medlife-nav__link:hover,
.medlife-nav__link:focus,
.medlife-nav__link:focus-visible,
.medlife-nav__link:active,
.medlife-nav__toggle[aria-expanded="true"],
.medlife-nav__burger,
.medlife-nav__burger:hover,
.medlife-nav__burger:focus,
.medlife-nav__burger:focus-visible,
.medlife-nav__burger:active {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

.medlife-nav__link:hover,
.medlife-nav__link:focus-visible {
	color: var(--ml-cyan);
}

/* -------------------------------------------------------------------------
 * Focus: keyboard only
 *
 * Astra ships `a:focus { outline: thin dotted }`, which fires on a mouse click
 * too - that is the outline box left behind after clicking Home. It is (0,1,1)
 * and beats our (0,1,0) base rule, so it has to be cleared explicitly rather
 * than just not set.
 *
 * The ring is not removed, only moved to :focus-visible, which browsers match
 * for keyboard navigation and not for pointer clicks.
 * ---------------------------------------------------------------------- */

.medlife-nav__link:focus,
.medlife-nav__toggle:focus,
.medlife-nav__burger:focus,
.medlife-nav__panel-all:focus,
.medlife-cats a:focus {
	outline: none;
}

.medlife-nav__link:focus-visible,
.medlife-nav__burger:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: -3px;
	border-radius: 4px;
}

.medlife-nav__icon,
.medlife-nav__chevron {
	display: block;
	flex: 0 0 auto;
}

.medlife-nav__chevron {
	transition: transform var(--ml-t-base) var(--ml-e-standard);
}

/*
 * Current page - a soft navy-tinted chip behind the label.
 *
 * The cyan underline is gone. With every label the same navy, the chip is the
 * only thing telling a sighted visitor which page they are on; the Home icon
 * cannot do that job because it is on Home whether or not you are there.
 * (aria-current="page" is in the markup either way.)
 *
 * `align-self: center` is load-bearing. Items are stretched to the pill's full
 * height, so a background on a stretched link would paint a 56px block - which
 * is exactly the shape that once bled out over the banner when Astra's
 * `button:focus` painted a pill across Categories. Centring the active link
 * sizes the chip to its own content instead, so it cannot reach the pill edge.
 *
 * Specificity: (0,3,0) here against (0,1,0)/(0,2,0) in the state-lock block
 * above, so the chip survives the `background: none` that block pins on every
 * nav control - including on hover and focus.
 */
.medlife-nav__item.is-current > .medlife-nav__link {
	align-self: center;
	color: var(--ml-navy);
	font-weight: 600;
	padding: 9px 18px;
	background: #e9eef6;
	background-color: #e9eef6;
	border-radius: 999px;
}

/* ---------- Categories panel ---------- */

.medlife-nav__toggle[aria-expanded="true"] {
	color: var(--ml-cyan);
}

.medlife-nav__toggle[aria-expanded="true"] .medlife-nav__chevron {
	transform: rotate(180deg);
}

.medlife-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 320px;
	background: var(--ml-white);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	box-shadow: 0 18px 40px rgba(10, 37, 64, 0.16);
	padding: 10px;
	/* Clears the pill's rounded bottom edge and the band's lower padding. */
	margin-top: 14px;
}

.medlife-nav__panel[hidden] {
	display: none;
}

.medlife-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
}

.medlife-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ml-navy);
	text-decoration: none;
	transition: background-color var(--ml-t-base) var(--ml-e-standard), color var(--ml-t-base) var(--ml-e-standard);
}

.medlife-cats a:hover {
	background: #f1f8fd;
	color: var(--ml-cyan);
}

.medlife-cats a:focus-visible {
	background: #f1f8fd;
	color: var(--ml-cyan);
	outline: 3px solid var(--ml-cyan);
	outline-offset: -3px;
}

.medlife-cats__count {
	flex: 0 0 auto;
	min-width: 24px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ml-muted);
	background: #eef4f9;
	border-radius: 999px;
	padding: 2px 8px;
}

.medlife-nav__panel-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	padding: 11px 12px;
	border-radius: 6px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--ml-t-base) var(--ml-e-standard);
}

.medlife-nav__panel-all:hover {
	background: var(--ml-cyan-dark);
	color: var(--ml-white);
}

.medlife-nav__panel-all:focus-visible {
	background: var(--ml-cyan-dark);
	color: var(--ml-white);
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

/* ---------- Burger (hidden on desktop) ---------- */

.medlife-nav__burger {
	display: none;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 15px 20px;
	background: none;
	border: 0;
	font-family: var(--ml-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-navy);
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.medlife-nav__list {
		padding: 0 22px;
	}

	.medlife-nav__link {
		font-size: 13.5px;
		padding: 15px 8px;
	}

	.medlife-nav__item.is-current > .medlife-nav__link {
		padding: 9px 14px;
	}
}

/* Tablet and phone - collapse to a disclosure menu. */
@media (max-width: 1024px) {
	/* Full width, no side inset - the pill keeps its rounded corners. */
	.medlife-nav-wrap {
		padding: 10px 0;
	}

	.medlife-nav__burger {
		display: flex;
	}

	.medlife-nav__list {
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 4px 10px 12px;
		gap: 0;
		min-height: 0;
	}

	.medlife-nav__list.is-open {
		display: flex;
	}

	.medlife-nav__item {
		display: block;
		border-top: 1px solid var(--ml-line);
	}

	.medlife-nav__item:first-child {
		border-top: 0;
	}

	.medlife-nav__link {
		width: 100%;
		justify-content: flex-start;
		padding: 13px 10px;
		font-size: 15px;
	}

	.medlife-nav__toggle {
		justify-content: space-between;
	}

	/*
	 * Stacked menu: items are blocks, not flex children, so align-self does
	 * nothing here and the chip would span the row corner to corner. A gentler
	 * radius and its own margin keep it reading as a chip on a list row.
	 */
	.medlife-nav__item.is-current > .medlife-nav__link {
		width: auto;
		margin: 4px 0;
		padding: 10px 16px;
		border-radius: 999px;
	}

	/* Panel becomes an inline expanding block rather than a floating card. */
	.medlife-nav__panel {
		position: static;
		min-width: 0;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 10px;
		margin-top: 0;
	}

	.medlife-cats a {
		padding: 10px 18px;
	}
}

@media (max-width: 640px) {
	.medlife-nav-wrap {
		padding: 8px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.medlife-nav__link,
	.medlife-nav__chevron,
	.medlife-cats a,
	.medlife-nav__panel-all {
		transition: none;
	}
}

/* =========================================================================
 * MOBILE NAV - <= 768px ONLY (2026-09-21)
 *
 * The separate "Menu" bar is gone. It cost 70px of the 256px of chrome above
 * the fold to do one thing - open this list - which the header's burger now
 * does from a row that had to exist anyway.
 *
 * The LIST is unchanged: one nav, one source of truth, the same
 * aria-controls="medlife-nav-list" both burgers already pointed at. What
 * changes is that its container is not rendered at all until it is open.
 * ====================================================================== */

/*
 * Wishlist, moved out of the header row (site-nav.php). display:none is the
 * default so nothing about the desktop bar moves; the phone block turns it on.
 */
.medlife-nav__item--util {
	display: none;
}

@media (max-width: 768px) {
	/*
	 * THE BAND IS NOT RENDERED WHILE THE MENU IS CLOSED. padding:0 alone is
	 * not enough - the pill inside carries a 2px border, so an "empty" band
	 * still paints a 4px line across the page.
	 *
	 * :has() rather than a second class because the state already exists on
	 * the list: adding .is-open to the wrapper too would be a second copy of
	 * one fact, and the two would drift the first time a script forgot one.
	 */
	.medlife-nav-wrap {
		display: none;
	}

	.medlife-nav-wrap:has(.medlife-nav__list.is-open) {
		display: block;
		padding: 0;
		/*
		 * Sticks directly under the sticky header, so scrolling with the menu
		 * open does not slide it behind - or out from under - a header that
		 * is staying put. 56px is .medlife-header__inner's min-height at this
		 * width; if that changes, this moves with it.
		 *
		 * nav.js closes the search panel when the menu opens and vice versa,
		 * so the header never grows past 56px while this is on screen.
		 */
		position: sticky;
		top: 56px;
		z-index: 59;
	}

	/* The nav's own burger was the "Menu" bar. The header's burger replaced it. */
	.medlife-nav__burger {
		display: none;
	}

	.medlife-nav__list.is-open {
		padding: 6px 12px 12px;
		max-height: calc(100vh - 56px);
		overflow-y: auto;
		/* iOS: a scrollable panel under a sticky header needs momentum
		   scrolling or the last item can be unreachable on short screens. */
		-webkit-overflow-scrolling: touch;
	}

	.medlife-nav__item--util {
		display: block;
	}

	.medlife-nav__item--util .medlife-nav__link {
		gap: 10px;
	}

	/*
	 * TI Wishlist rewrites every .wishlist_products_counter_number in place,
	 * so this stays in step with the header badge without a second source -
	 * the same contract medlife_render_badge() uses.
	 */
	.medlife-nav__count {
		margin-inline-start: auto;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: var(--ml-cyan);
		color: var(--ml-white);
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
	}
}

/*
 * ≤768px: the pill loses its ring (2026-09-21, owner's request).
 *
 * The 2px #7AD2F4 border plus the 4px halo exist to give the white pill an
 * edge against the #F4F6F8 band it floats on - that is a DESKTOP relationship
 * and it is measured in this file's own header note (1.57:1 against the band).
 *
 * At phone width there is no band: the wrapper is `padding: 0` and is not
 * rendered at all until the menu opens, so the pill IS the dropdown. A ring
 * round a full-width dropdown reads as a stray cyan box rather than as the
 * silhouette of a floating control.
 *
 * Desktop and the 769-1024 tier are untouched - this is inside the query.
 */
@media (max-width: 768px) {
	.medlife-nav-wrap .medlife-nav {
		border: 0;
		box-shadow: none;
		border-radius: 0;
	}
}

/* -------------------------------------------------------------------------
 * DESKTOP CATEGORIES DROPDOWN - clamped and compact (2026-09-23)
 *
 * `min-width: 1025px` ON PURPOSE, not max-width. The mobile Categories sheet
 * and the ≤1024 block further up (which already has its own max-height for
 * the collapsed menu) must not see any of this. 1025 is where this nav really
 * becomes desktop: at exactly 1024 the burger is still `display: flex` and the
 * toggle's rect is 0 - measured, not assumed.
 *
 * MEASURED BEFORE ANY OF THIS WAS WRITTEN, at 1025 and 1440:
 *   panel 320 x 460.4, top 214, bottom 674, max-height NONE, overflow visible
 *   9 rows at 41.9px, padding 9px 12px, font 14.5px, 9 count badges
 *   fits a 900px viewport with 237px to spare; 37px at 700
 * So nothing was cut off at those heights - the panel simply had no ceiling,
 * and below about a 675px viewport it runs off the bottom with no way to
 * reach the last rows. Taller rows (below) make the ceiling necessary rather
 * than merely prudent.
 * ---------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.medlife-nav__panel {
		/*
		 * 214px is the panel's measured top offset (header 98 + the band and
		 * the 14px margin), named rather than buried in the calc so the next
		 * person can re-measure it instead of decoding it. 24px is the
		 * breathing room below the panel.
		 *
		 * `min()` of the two: 70vh is the look, the calc is the guarantee.
		 * On a tall screen 70vh wins and the panel never becomes a column
		 * taller than it needs; on a short one the calc wins and the panel
		 * always stops clear of the fold.
		 */
		--ml-cats-panel-top: 214px;
		max-height: min(70vh, calc(100vh - var(--ml-cats-panel-top) - 24px));
		overflow-y: auto;
		/*
		 * The panel scrolls, the page does not follow. Without this a flick
		 * that reaches the end of the list chains into the document and the
		 * page slides underneath the open menu.
		 */
		overscroll-behavior: contain;
	}

	/*
	 * Rows to the reference's proportions: 15px type in a 52px row. The
	 * height comes from `min-height`, not from padding, so the text stays
	 * optically centred whether a name wraps or not - padding alone would
	 * push a two-line name off centre.
	 */
	.medlife-cats a {
		min-height: 52px;
		padding: 6px 14px;
		font-size: 15px;
	}

	/* The count badges stay exactly as they are - they are the one piece of
	   real information on the row besides the name. */

	.medlife-nav__panel-all {
		min-height: 52px;
		font-size: 15px;
	}
}