/**
 * Top bar
 *
 * A white strip with a slow right-to-left marquee: phone, tagline, address.
 *
 * The loop is seamless because the track holds four identical sets and the
 * animation moves it by exactly one set width - translateX(-25%) of a
 * four-set track. At the end of the cycle set 2 sits precisely where set 1
 * began, so the reset is invisible. Two sets would also loop, but on a wide
 * viewport one set is narrower than the window and the tail of the track
 * would show as empty space; four is what removes that.
 *
 * Every item carries its own trailing divider, including the last in a set.
 * That is deliberate: it keeps the rhythm identical across the seam, where
 * the last item of one set meets the first of the next.
 */

.medlife-topbar {
	/*
	 * Light grey against the white header below, and NO bottom border - the
	 * background alone is what makes the strip read as its own band. Do not
	 * reinstate the hairline; it was removed 2026-08-30 deliberately, and this
	 * token replaced the job it was doing.
	 *
	 * #f5f7f9, one hex unit off the #f4f6f8 used by the header search pill.
	 *
	 * That gap USED to be load-bearing: it was chosen so the old #0077B6 ink
	 * cleared AA by a hair - 4.4931:1 on #f4f6f8, 4.5326:1 on #f5f7f9. Since
	 * the ink became brand cyan on 2026-09-03 nothing here passes at any
	 * background (see the ink token below), so that reasoning no longer
	 * applies and the two greys could safely be unified now.
	 *
	 * The value is left alone regardless - it is the band the design settled
	 * on, and changing it would be a visual decision, not a contrast one.
	 */
	--ml-topbar-bg: #f5f7f9;

	/*
	 * Brand cyan, set 2026-09-03. This is a DELIBERATE, informed exception -
	 * not a value someone picked without checking - so do not "fix" it back:
	 *
	 *     #00AFF0 on #f5f7f9  = 2.3306:1   FAILS AA
	 *     #0077B6 on #f5f7f9  = 4.5326:1   was the previous ink, passed
	 *
	 * The strip is 12.5px at weight 400 (the phone link 700), so the large-text
	 * exemption does not apply and the bar is 4.5:1. This is real body text, so
	 * it is WCAG 1.4.3 that is missed - a stronger criterion than the 1.4.11
	 * cases elsewhere in this theme, where the nav pill and the search icon are
	 * judged as non-text.
	 *
	 * NO BACKGROUND FIXES THIS. Brand cyan tops out at 2.5029:1 even on pure
	 * white, so lightening the strip cannot rescue it; only darkening the ink
	 * can, and that is the change that was deliberately reversed. If it ever
	 * has to pass, #0077B6 is the value to come back to.
	 *
	 * The phone number lives in this strip and is the site's primary contact
	 * route, which is what makes the trade-off worth stating rather than
	 * burying.
	 */
	--ml-topbar-ink: var(--ml-cyan);

	/* One full cycle = one set width travelled. */
	--ml-topbar-speed: 48s;

	width: 100%;
	background: var(--ml-topbar-bg);
	color: var(--ml-topbar-ink);
	font-family: var(--ml-font);
	font-size: 12.5px;
	/*
	 * 400, not 500, and this is load-bearing rather than cosmetic.
	 *
	 * The phone link is distinguished from the strip by WEIGHT ALONE now that
	 * the underline is gone, so the size of that gap IS the affordance. 400
	 * against the link's 700 is two full steps; 500 against 700 was one.
	 *
	 * Raising this back to 500 - or to 700 to "match" the link - narrows or
	 * erases the only resting cue the link has. Widen from this end instead:
	 * Poppins is self-hosted at 400/500/600/700 only, so the link cannot go
	 * above 700 (800 silently resolves to the 700 face).
	 */
	font-weight: 400;
	line-height: 1.4;
}

/*
 * The clipping window. Full width on purpose - the marquee runs edge to edge
 * rather than stopping at --ml-container, which is what makes it read as a
 * continuous ticker instead of a boxed line.
 */
.medlife-topbar__viewport {
	overflow: hidden;
	padding: 7px 0;
}

.medlife-topbar__track {
	display: flex;
	width: max-content;
	animation: medlife-topbar-scroll var(--ml-topbar-speed) linear infinite;
	will-change: transform;
}

/*
 * Pause for every input method, not just the mouse.
 *
 * :hover covers pointers, :focus-within covers keyboard users tabbing to the
 * phone link, and :active covers touch - a finger down on the strip stops it
 * before the tap lands. This is the CSS-only equivalent of the pause set the
 * banner slider does in JavaScript, and it is why this component needs no
 * script of its own.
 */
.medlife-topbar:hover .medlife-topbar__track,
.medlife-topbar:focus-within .medlife-topbar__track,
.medlife-topbar:active .medlife-topbar__track {
	animation-play-state: paused;
}

@keyframes medlife-topbar-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-25%); }
}

.medlife-topbar__set {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

/*
 * Items are separated by space alone - no rules, pipes or bullets.
 *
 * The trailing margin is on EVERY item, including the last one in a set, and
 * that is what keeps the loop seam invisible. The sets butt directly together
 * (no margin or padding on .medlife-topbar__set, no gap on the track), so the
 * distance across the seam is exactly this margin - identical to the distance
 * between two items inside a set. Move this to `item + item` and the rhythm
 * breaks precisely where set 1 meets set 2.
 *
 * This replaced a 1px hairline with `margin: 0 22px`, which came to the same
 * 45px between items. 56px is deliberately wider: with no rule to mark the
 * boundary, the eye needs more space to read one item as having ended.
 *
 * `gap` on the set would NOT work here. It spaces items within a set and adds
 * nothing at the seam, so the loop would visibly stutter once per cycle.
 */
.medlife-topbar__item {
	white-space: nowrap;
	display: flex;
	align-items: center;
	margin-inline-end: 56px;
}

/*
 * wc_price() wraps amounts in its own span with the theme's link colour rules
 * in reach; pin it to the strip's ink so a filtered-in price cannot come out
 * a different colour from the words around it.
 */
.medlife-topbar__item .woocommerce-Price-amount {
	font-weight: 700;
	color: inherit;
}

/*
 * The underline is gone (2026-08-30, plainer look). What marks the phone as a
 * link at rest is now WEIGHT ALONE - 700 against the strip's 500.
 *
 * That still satisfies WCAG 1.4.1: the criterion forbids colour as the ONLY
 * distinction, and font-weight is not colour. It is a weaker affordance than
 * an underline though, and it is the whole affordance now, so do not "tidy"
 * this weight away or set the surrounding text to 700 to match - either would
 * leave the link with no resting distinction at all.
 *
 * 800 DOES NOT WORK HERE and would be a silent no-op. Poppins is self-hosted
 * at four weights only - 400, 500, 600, 700 (assets/fonts, see fonts.css).
 * CSS font matching resolves 800 to the 700 face, and because a real bold
 * exists the browser will not synthesise a heavier one either, so the
 * declaration would render exactly as 700 while reading like a change.
 *
 * To widen the gap, move the STRIP down (.medlife-topbar to 400) rather than
 * the link up - 400 against 700 uses two faces that are actually loaded.
 */
.medlife-topbar__item a {
	color: var(--ml-topbar-ink);
	font-weight: 700;
	text-decoration: none;
}

/*
 * A colour shift, not an underline. --ml-navy is an existing token rather than
 * a new hex, and it darkens, so hovering never makes the text harder to read.
 *
 * Figures re-measured on the strip after the ink became brand cyan
 * (2026-09-03): 2.3306:1 at rest -> 14.47:1 on hover, the two inks 6.21:1
 * apart. Both the jump and the separation are larger than they were with
 * #0077B6, so this state carries more of the affordance than it used to -
 * which is the one upside of the resting ink being as light as it is.
 */
.medlife-topbar__item a:hover {
	color: var(--ml-navy);
}

.medlife-topbar__item a:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

/* -------------------------------------------------------------------------
 * Static mode - reduced motion, and touch
 *
 * One block, two reasons, because the answer to both is the same.
 *
 * prefers-reduced-motion: not a slower scroll - no scroll at all.
 *
 * (hover: none): touch devices cannot hover, so the pause above never fires
 * for them and the phone number - the most important link on the site - would
 * be a target you have to catch while it moves. :active only pauses once the
 * finger is already down, which is too late to help you aim. This follows the
 * rule the pack-size pill already sets elsewhere in the theme: behaviour that
 * depends on hover gets a non-hover fallback rather than being left broken.
 *
 * In both cases the clones exist only to feed a loop that is no longer
 * running, so they are removed outright and the single real set is centred
 * and allowed to wrap. Same information, standing still, nothing stranded off
 * the edge of a stationary track.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce), (hover: none) {
	.medlife-topbar__viewport {
		padding: 7px 24px;
	}

	.medlife-topbar__track {
		width: auto;
		animation: none;
		will-change: auto;
		justify-content: center;
	}

	.medlife-topbar__set[aria-hidden="true"] {
		display: none;
	}

	.medlife-topbar__set {
		flex-wrap: wrap;
		justify-content: center;
	}

	/*
	 * Nothing is looping here, so the seam the trailing margin exists for does
	 * not exist either - drop it on the last item so the static row is not
	 * pushed off its own centre by a dangling 56px.
	 */
	.medlife-topbar__item:last-child {
		margin-inline-end: 0;
	}
}

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

@media (max-width: 900px) {
	/* Same trailing-margin rule, tightened - still on every item, so the seam
	   stays consistent at this width too. */
	.medlife-topbar__item {
		margin-inline-end: 40px;
	}

	@media (prefers-reduced-motion: reduce), (hover: none) {
		.medlife-topbar__viewport {
			padding: 7px 20px;
		}
	}
}

@media (max-width: 640px) {
	.medlife-topbar {
		font-size: 11.5px;
		/*
		 * Narrower viewport, same pixels-per-second: a shorter cycle keeps the
		 * apparent speed steady rather than letting it crawl on phones.
		 */
		--ml-topbar-speed: 36s;
	}

	.medlife-topbar__viewport {
		padding: 6px 0;
	}

	@media (prefers-reduced-motion: reduce), (hover: none) {
		.medlife-topbar__viewport {
			padding: 6px 16px;
		}
	}
}

/*
 * POINTER FOCUS - ASTRA a:focus { outline: thin dotted } (main.min.css L3).
 * A mouse click leaves :focus set, so every anchor that names no outline of its
 * own kept a thin dotted ring until focus moved. Measured 2026-09-13 by the
 * sitewide anchor sweep (CLAUDE.md, "Anchor pointer-focus sweep").
 *
 * :not(:focus-visible) IS LOAD-BEARING: this only ever applies to pointer focus,
 * so the keyboard ring each family already has is untouched. Outline only -
 * nothing moves, so there is no reduced-motion twin.
 */
.medlife-topbar__item a:focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================================
 * MOBILE STRIP - <= 768px ONLY (2026-09-21)
 *
 * ⚑ THIS REVERSES THE (hover: none) DECISION ABOVE, AT THE OWNER'S REQUEST.
 *
 * The block at line ~230 makes the strip STATIC on touch, and the reasoning
 * recorded there is still correct: touch has no hover, so the :hover /
 * :focus-within / :active pause never fires in time, and the phone number -
 * the most important link on the site - becomes a moving tap target. That is
 * why the marquee was disabled on touch in the first place, on 2026-08-29.
 *
 * What changes here is the layout arithmetic, not that argument. Static, the
 * strip wrapped to THREE lines at 375px and cost 60.3px of the 256px of
 * chrome above the fold. Scrolling, it is one 32px line. The owner asked for
 * the one line.
 *
 * Two things keep the number tappable despite the above, and both are
 * load-bearing rather than decoration:
 *
 *   - :active still pauses the track, so a finger held down stops it. It is
 *     late - the finger is already on the glass - but a tap that lands
 *     slightly off now has a stationary target on the second attempt.
 *   - THE SPEED IS HALVED HERE (72s against 36s), so the number crosses a
 *     375px screen slowly enough to aim at. Do not "restore" it to the
 *     desktop cadence.
 *
 * If the owner ever reports a missed tap, the fix is to go back to the
 * static block - not to tune the speed further.
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
	.medlife-topbar {
		font-size: 11.5px;
		/* Half the desktop pace. See the note above - this is an aiming
		   allowance, not a style choice. */
		--ml-topbar-speed: 72s;
	}

	/*
	 * THE ADDRESS GOES, AT BOTH MOTION SETTINGS. It is the longest item by a
	 * wide margin and it is the only one that is not actionable: the phone is
	 * a tap-to-call and the tagline is the brand line. A visitor who wants the
	 * address has the footer and the contact page.
	 *
	 * The markup is identical at every width - the class is emitted always
	 * (top-bar.php) and this is the only rule that reads it - so nothing about
	 * the loop's seam arithmetic changes.
	 */
	.medlife-topbar__item--address {
		display: none;
	}

	/* ~32px: 11.5px x 1.4 line-height + 8px top and bottom. */
	.medlife-topbar__viewport {
		padding: 8px 0;
	}

	.medlife-topbar__item {
		margin-inline-end: 32px;
	}
}

/*
 * The marquee itself, re-enabled ONLY where motion is welcome. Under
 * prefers-reduced-motion the static block above still owns the strip: clones
 * hidden, track stopped, single set centred and allowed to wrap.
 *
 * SO THE REDUCED-MOTION READER GETS A TALLER STRIP (two lines at 375px, since
 * phone + tagline do not quite fit one), and that is the correct trade: the
 * alternative is dropping content because of a motion preference.
 *
 * Specificity is one tier above each rule it answers - (0,2,0) against the
 * static block's (0,1,0), (0,2,1) against its (0,1,1) - so this does not
 * depend on being later in the file.
 */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
	.medlife-topbar .medlife-topbar__viewport {
		padding: 8px 0;
	}

	.medlife-topbar .medlife-topbar__track {
		width: max-content;
		animation: medlife-topbar-scroll var(--ml-topbar-speed) linear infinite;
		will-change: transform;
		justify-content: flex-start;
	}

	.medlife-topbar__viewport .medlife-topbar__set[aria-hidden="true"] {
		display: flex;
	}

	.medlife-topbar .medlife-topbar__set {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	/* The seam rule returns with the loop: trailing margin on EVERY item,
	   including the last of a set, or the rhythm hiccups once per cycle. */
	.medlife-topbar .medlife-topbar__item:last-child {
		margin-inline-end: 32px;
	}
}