/*
 * Service switcher.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * Two surfaces are in play — the band and the filled pill — and the ink for
 * each is computed in PHP against whatever an editor picked, arriving as
 * `--btxc-switch-*`. Nothing here names a colour token for type.
 *
 * THE JOIN WITH THE HERO
 *
 * This block sits directly on top of a hero painted with the same background,
 * and the two are meant to read as one ground. That works because the house
 * navy gradient runs at 90deg: a horizontal gradient repeated down the page is
 * indistinguishable from one continuous one. It is the reason there is no
 * bottom padding worth speaking of here and no top radius — the seam has to be
 * invisible, so nothing may draw attention to it.
 */

@layer bertex-components {

	.btxc-switch {
		--btxc-switch-bg: transparent;
		--btxc-switch-ink: var( --btx-color-primary-1, #1a2744 );
		--btxc-switch-quiet: var( --btx-color-primary-1-light-40, #2e4578 );
		--btxc-switch-current-bg: var( --btxc-switch-ink );
		--btxc-switch-current-ink: var( --btx-color-text-bg-1, #f9fafb );

		box-sizing: border-box;

		/*
		 * Split rather than shorthand, for the same reason the hero splits its
		 * own: when this block leads the document the header overlays it, and
		 * the top edge has to clear a bar only the host template can measure.
		 *
		 * `--btxc-switch-offset-top` is never given a value here, only a
		 * fallback at the point of use — a default declared in this layer would
		 * beat a theme's, which is always the earlier layer.
		 */
		padding-block-start: calc(
			var( --btx-spacing-m, 1.5rem ) + var( --btxc-switch-offset-top, 0px )
		);
		padding-block-end: 0;
		padding-inline: var( --btx-spacing-m, 1.25rem );

		background: var( --btxc-switch-bg );
		color: var( --btxc-switch-ink );
	}

	/*
	 * The section is the background box and `__inner` caps the content, the
	 * same split the hero and lead-capture make — so "full screen width" is the
	 * section shedding its cap while the content inside stays put.
	 *
	 * These were missing. The `width` prop rendered its class and nothing read
	 * it, so a switcher set to full width still took the constrained layout's
	 * cap from the theme, stopped at the design system's max width, and left a
	 * seam above a full-width hero it is supposed to be continuous with. The
	 * bug was invisible at or below 1440px, where the cap and the viewport
	 * agree.
	 */
	.btxc-switch--width-wide {
		max-width: var( --btx-max-width, 1440px );
		margin-inline: auto;
	}

	.btxc-switch--width-full {
		max-width: none;
	}

	.btxc-switch__inner {
		box-sizing: border-box;
		max-width: var( --btx-max-width, 1440px );
		margin-inline: auto;

		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-m, 1.25rem );
	}

	/* ── Breadcrumb ────────────────────────────────────────────────────── */

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make: the design system publishes a heading family and a body family and
	 * no third. See the note in booking-panel/style.css.
	 */
	.btxc-switch__crumb {
		margin: 0;

		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var( --btx-spacing-xs, 0.6rem );

		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.8125rem );
		line-height: var( --btx-line-height-body, 1.5 );
		color: var( --btxc-switch-quiet );
	}

	/*
	 * `inherit` is the right value and it needs `!important` to survive. With a
	 * hub link set this is an <a>, so theme.json's unlayered link-colour rule
	 * claims it — and that colour is a light-mode navy, which on this navy band
	 * left the breadcrumb root all but invisible while the crumb beside it,
	 * a plain <span>, read correctly. The same trap the pills below hit.
	 */
	.btxc-switch__root {
		color: inherit !important;
		text-decoration: none;
	}

	a.btxc-switch__root:hover {
		text-decoration: underline;
	}

	.btxc-switch__sep {
		opacity: 0.6;
	}

	/* Where you are, in the section's full ink rather than the quiet tier. */
	.btxc-switch__here {
		color: var( --btxc-switch-ink );
	}

	/* ── The pills ─────────────────────────────────────────────────────── */

	.btxc-switch__list {
		margin: 0;
		padding: 0;
		list-style: none;

		display: flex;
		flex-wrap: wrap;
		gap: var( --btx-spacing-xs, 0.625rem );
	}

	.btxc-switch__item {
		display: flex;
	}

	/*
	 * `!important` on the colour, and no `wp-element-button` on the markup.
	 *
	 * These are links, so theme.json's unlayered
	 * `a:where(:not(.wp-element-button)){color:…}` rule would otherwise take
	 * them, and unlayered beats every cascade layer whatever the specificity.
	 *
	 * These pills used to carry core's opt-out class instead, and that was the
	 * wrong tool for the same reason `service-menu`'s README gives: the class
	 * opts out of the link colour by opting *into* theme.json's button styling,
	 * which is unlayered too and owns background, border, padding and
	 * typography. It read `--bertex-btn-bg`, which the switcher never sets, so
	 * every pill took the global button fill — the current one and the six that
	 * were not, painted identically, with `--btxc-switch-current-bg` computed
	 * correctly in PHP and then never used. The state the switcher exists to
	 * show was the one thing it could not show.
	 *
	 * An important declaration in a layer beats an unlayered normal one, and is
	 * the narrowest tool that actually works. Same trade `service-menu`,
	 * `lead-trajectory` and `management-model` make.
	 */
	.btxc-switch__pill {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;

		padding: 0.7rem 1.125rem;

		background: transparent;
		border: 1px solid color-mix( in srgb, var( --btxc-switch-ink ) 35%, transparent );
		border-radius: 9999px;

		font-size: var( --btx-font-body-s, 0.9375rem );
		line-height: var( --btx-line-height-heading, 1.2 );
		font-weight: 400;
		text-decoration: none;
		white-space: nowrap;
		color: var( --btxc-switch-ink ) !important;

		transition:
			background 0.18s ease,
			border-color 0.18s ease;
	}

	.btxc-switch__pill:hover {
		background: color-mix( in srgb, var( --btxc-switch-ink ) 12%, transparent );
		border-color: color-mix( in srgb, var( --btxc-switch-ink ) 55%, transparent );
	}

	/*
	 * The page you are on. Its label is measured against the fill in PHP, so a
	 * bright accent gets near-black type without a second setting. Still a
	 * link, and still marked with aria-current — colour alone is not a state
	 * anyone can hear.
	 */
	.btxc-switch__pill--current {
		background: var( --btxc-switch-current-bg );
		color: var( --btxc-switch-current-ink ) !important;
		border-color: transparent;
		font-weight: 700;
	}

	.btxc-switch__pill--current:hover {
		background: var( --btxc-switch-current-bg );
		border-color: transparent;
		filter: brightness( 1.06 );
	}

	.btxc-switch__pill:focus-visible {
		outline: 2px solid var( --btxc-switch-ink );
		outline-offset: 3px;
	}

	/* ── Narrow ────────────────────────────────────────────────────────── */

	/*
	 * The pills stay on one line each and the row scrolls, rather than wrapping
	 * into four stacked rows that push the headline off the screen. The gutter
	 * is restored inside so the first pill is not flush to the edge.
	 */
	@media ( width < 48rem ) {
		.btxc-switch__nav {
			margin-inline: calc( var( --btx-spacing-m, 1.25rem ) * -1 );
			padding-inline: var( --btx-spacing-m, 1.25rem );

			overflow-x: auto;
			scrollbar-width: none;
		}

		.btxc-switch__nav::-webkit-scrollbar {
			display: none;
		}

		.btxc-switch__list {
			flex-wrap: nowrap;
		}
	}
}

@media ( prefers-reduced-motion: reduce ) {
	@layer bertex-components {
		.btxc-switch__pill {
			transition: none;
		}
	}
}