/**
 * PropOffice — Property Section Navigation.
 *
 * MEASURED from the Type 2 reference listings, which draw the strip in the
 * content column below the property's title block:
 *
 *   height          56px
 *   position        sticky, top 0
 *   ground          the page's own surface, so text does not scroll under it
 *   rule            1px along the bottom edge
 *   links           500 16px/24px, 40px apart
 *   selected        a 4px rule under the label, in the brand's accent
 *
 * ## Not one brand value appears below
 *
 * Every colour is a design token the WEBSITE supplies and the type inherits the
 * site's own face — the same contract the Property Gallery and Property Card
 * keep. The reference's cyan is the reference SITE's accent; asking for the
 * role renders it on a site that chose that colour and the site's own on one
 * that did not.
 */

.po-section-nav {
	/* Structure the component owns. */
	--po-nav-height: 56px;
	--po-nav-gap: 40px;
	--po-nav-size: 16px;
	--po-nav-rule: 4px;
	--po-nav-scroll: 32px;
	/*
	 * How far below the top of the viewport the strip comes to rest.
	 *
	 * Declared here rather than left to a `var()` fallback because the token
	 * gate is right to insist: a property read but declared nowhere is a
	 * property nothing documents and nothing can discover. The Style control
	 * writes this on `.po-section-nav` itself at higher specificity, so a
	 * declaration here does not stand in an editor's way — unlike a property a
	 * HOST sets on an ancestor, where a declaration on the element would win and
	 * make the override inert.
	 */
	--po-nav-top: 0px;

	/* Roles the website fills. */
	--po-nav-ink: var(--po-ds-color-text);
	--po-nav-ink-selected: var(--po-ds-color-text);
	--po-nav-accent: var(--po-ds-color-accent);
	--po-nav-ground: var(--po-ds-color-surface);
	--po-nav-border: var(--po-ds-color-border);

	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-height: var(--po-nav-height);
	background: var(--po-nav-ground);
	border-bottom: 1px solid var(--po-nav-border);
	font-family: var(--po-ds-font-family);
}

.po-section-nav *,
.po-section-nav *::before,
.po-section-nav *::after {
	box-sizing: border-box;
}

/*
 * Sticky is a SETTING, not an assumption.
 *
 * A strip that sticks inside a container with its own `overflow` never moves,
 * and a designer who places this somewhere like that needs to be able to say
 * so. `top: 0` is the reference's own offset.
 */
.po-section-nav.is-sticky {
	position: sticky;
	top: var(--po-nav-top);
	z-index: 20;
}

.po-section-nav__list {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	gap: var(--po-nav-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

/* The strip scrolls; it does not advertise that with a scrollbar. */
.po-section-nav__list::-webkit-scrollbar {
	display: none;
}

.po-section-nav__item {
	display: flex;
	margin: 0;
}

.po-section-nav__link {
	display: flex;
	align-items: center;
	min-height: var(--po-nav-height);
	padding: 0;
	font-size: var(--po-nav-size);
	font-weight: var(--po-ds-font-label);
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	color: var(--po-nav-ink);
	background: transparent;
	/* Declared transparent rather than absent: the selected state changes the
	   colour only, so the label never moves when it becomes selected. */
	border-bottom: var(--po-nav-rule) solid transparent;
}

.po-section-nav .po-section-nav__link:hover {
	color: var(--po-nav-accent);
	text-decoration: none;
}

.po-section-nav .po-section-nav__link.is-active {
	color: var(--po-nav-ink-selected);
	border-bottom-color: var(--po-nav-accent);
}

.po-section-nav .po-section-nav__link:focus-visible {
	outline: 3px solid var(--po-nav-accent);
	outline-offset: -3px;
}

/* --------------------------------------------------------------- scrolling */

/*
 * The two ends.
 *
 * `hidden` until the script finds the strip actually overflows, so a page whose
 * sections all fit shows nothing — and a page with no script shows nothing
 * either, which is correct: without a script they could not scroll anything.
 */
.po-section-nav__scroll {
	flex: 0 0 var(--po-nav-scroll);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--po-nav-scroll);
	padding: 0;
	color: var(--po-nav-ink);
	background: var(--po-nav-ground);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.po-section-nav__scroll[hidden] {
	display: none;
}

.po-section-nav__scroll[disabled] {
	opacity: 0.3;
	cursor: default;
}

.po-section-nav__scroll-icon {
	display: block;
	width: 20px;
	height: 20px;
}

.po-section-nav .po-section-nav__scroll:focus-visible {
	outline: 3px solid var(--po-nav-accent);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.po-section-nav__list {
		scroll-behavior: auto;
	}
}