/**
 * PropOffice Navigation Tabs.
 *
 * Painted in design-system roles (--po-ds-*), never in literal brand colours, so
 * a tab takes on the website's brand the way every other PropOffice component
 * does. The only literals are neutral fallbacks for a site that has not run the
 * runtime layer.
 *
 * ## The layout is the specification, and it is four declarations
 *
 *   flex-wrap: wrap    a tab that will not fit starts a new row
 *   flex-basis: var()  each tab carries its own width as a custom property
 *   flex-grow: 0       a short row stays short instead of stretching to fill
 *   box-sizing: border-box   padding cannot push a tab onto the next row
 *
 * That is all of it: 4×25% fits one row, 40+30+40 wraps the third, 50+50+20+30
 * wraps the last two. No JavaScript measures anything, so the behaviour is
 * identical at every viewport and during a resize.
 *
 * 🚨 There is deliberately NO `gap` on the row. Four tabs at 25% measure exactly
 * 100%, and a gap would make them measure 100% plus three gaps and wrap the
 * fourth — quietly contradicting the specification's first example. Spacing is
 * each tab's own margin, which is an Elementor control.
 */

/*
 * The basis. Never painted, never seen, and the only reason it exists is that a
 * percentage needs something definite to be a percentage OF.
 *
 * `container-type: inline-size` makes its width the meaning of `1cqw`, which is
 * what lets a button be "40% of the navigation's width" while the navigation
 * itself shrinks to its buttons. Without the split, the buttons' own parent had
 * to be full width and the navigation could never be shorter than the search
 * form.
 *
 * The editor's width control writes BOTH properties here: `--po-nav-width` sets
 * the basis, and `--po-nav-fill` tells the region to take all of it. Untouched,
 * neither is written, so the basis is the full available width and the region
 * falls back to `fit-content` — which is exactly the difference between the
 * default and an explicit 100%.
 */
.po-nav-tabs__basis {
	box-sizing: border-box;
	max-width: 100%;
	width: var(--po-nav-width, 100%);
}

@supports (container-type: inline-size) {
	.po-nav-tabs__basis {
		container-type: inline-size;
	}
}

.po-nav-tabs {
	--po-nav-tab-radius: 4px;
	--po-nav-tab-min-height: 44px;

	box-sizing: border-box;
	color: var(--po-ds-color-text, #0f172a);
	font-family: var(--po-ds-font-family, inherit);

	/*
	 * The navigation REGION: what a reader sees, and what the reference draws as
	 * a short bar above a wide search form.
	 *
	 * Full width here by default, and narrowed to `fit-content` only where
	 * container queries exist — because that is the only place the buttons have
	 * a basis that does not depend on this box. Where they do not exist the old
	 * model still applies exactly as before: full-width region, percentage
	 * buttons, identical wrapping. A browser without `cqw` degrades to the
	 * layout that shipped, not to a broken one.
	 */
	max-width: 100%;
	width: 100%;
}

@supports (container-type: inline-size) {
	.po-nav-tabs {
		/*
		 * Shrink to the buttons. `fit-content` is safe HERE and was not safe on
		 * the buttons' own parent: nothing inside now resolves a percentage
		 * against this box, so there is no circularity left to collapse. When
		 * the buttons total more than the basis it caps at `max-width` and they
		 * wrap, which is the specified behaviour unchanged.
		 */
		width: var(--po-nav-fill, fit-content);
	}
}

.po-nav-tabs *,
.po-nav-tabs *::before,
.po-nav-tabs *::after {
	box-sizing: inherit;
}

.po-nav-tabs__row {
	display: flex;
	flex-wrap: wrap;
	/*
	 * Alignment, read from a custom property the renderer writes inline.
	 *
	 * 🚨 The indirection is the whole point. The renderer used to write
	 * `justify-content` inline, and an inline declaration outranks every
	 * stylesheet — so Elementor's Alignment control compiled a rule that never
	 * applied. Desktop looked correct only because the renderer was reading the
	 * same setting; the tablet and mobile values did nothing, silently, because
	 * they exist ONLY as Elementor media queries.
	 *
	 * This rule is one class, so Elementor's three-class rule wins at every
	 * breakpoint. The fallback is the specification's default, so a consumer
	 * that writes no property at all still flows left to right.
	 */
	justify-content: var(--po-nav-justify, flex-start);
	width: 100%;
}

.po-nav-tabs__tab {
	align-items: center;
	background: var(--po-ds-color-primary, #13245a);
	border: 0 solid transparent;
	border-radius: var(--po-nav-tab-radius);
	color: var(--po-ds-color-on-primary, #ffffff);
	display: inline-flex;
	/* Neither grow nor shrink: the width the editor typed is the width the tab
	   gets, and a row that does not reach 100% simply does not reach 100%.
	   Shrinking would make a crowded row render tabs narrower than configured
	   rather than wrapping one, which is the opposite of the specified rule. */
	flex-grow: 0;
	flex-shrink: 0;
	font: inherit;
	font-weight: var(--po-ds-font-button, 600);
	gap: 8px;
	justify-content: center;
	/* A touch target has to stay a touch target however narrow the column is. */
	min-height: var(--po-nav-tab-min-height);
	/* The tab's own width, set per row as an inline custom property. The
	   fallback is the specification's default, so a tab that somehow carries no
	   property still takes a quarter of the row rather than collapsing.

	   Two declarations, and the order matters. The first is a percentage of the
	   row and is what a browser without container queries uses. The second wins
	   everywhere else and is the real rule: the value is a bare NUMBER and
	   `1cqw` is one percent of the basis, so the width no longer depends on the
	   box it sits in. */
	flex-basis: calc(var(--po-nav-tab-w, 25) * 1%);
	flex-basis: calc(var(--po-nav-tab-w, 25) * 1cqw);
	min-width: 0;
	padding: 12px 16px;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.po-nav-tabs__tab:hover,
.po-nav-tabs__tab:focus-visible {
	background: var(--po-ds-color-secondary, #334155);
	color: var(--po-ds-color-on-primary, #ffffff);
}

.po-nav-tabs__tab:focus-visible {
	outline: 2px solid var(--po-ds-color-accent, #c8102e);
	outline-offset: 2px;
}

/*
 * A tab with no destination. It is a <span>, so it is already not focusable and
 * not announced as a link; this only stops it LOOKING like one.
 */
.po-nav-tabs__tab--inert {
	cursor: default;
	opacity: 0.65;
}

.po-nav-tabs__label {
	/* Long labels are truncated rather than allowed to widen the tab, because a
	   tab that grew past its percentage would push the next one onto a new row
	   and change the layout the editor configured. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.po-nav-tabs__icon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.po-nav-tabs__icon svg {
	height: 1em;
	width: 1em;
}

.po-nav-tabs__badge {
	background: var(--po-ds-color-accent, #c8102e);
	border-radius: 999px;
	color: var(--po-ds-color-on-primary, #ffffff);
	flex: 0 0 auto;
	font-size: 0.75em;
	line-height: 1;
	padding: 3px 7px;
}

/*
 * Responsive widths.
 *
 * The fallback chain IS the inheritance: mobile falls back to the tablet value,
 * tablet to the desktop one, desktop to 25%. A breakpoint nobody configured
 * therefore keeps the width of the next one up — which is how Elementor's own
 * responsive controls behave, and what stops an unset tablet width collapsing a
 * tab to nothing.
 *
 * The breakpoints match Elementor's defaults, and the Property Search's, so a
 * page carrying both components changes shape at the same two widths.
 */
@media (max-width: 1024px) {
	.po-nav-tabs__tab {
		flex-basis: calc(var(--po-nav-tab-w-t, var(--po-nav-tab-w, 25)) * 1%);
		flex-basis: calc(var(--po-nav-tab-w-t, var(--po-nav-tab-w, 25)) * 1cqw);
	}
}

@media (max-width: 767px) {
	.po-nav-tabs__tab {
		flex-basis: calc(var(--po-nav-tab-w-m, var(--po-nav-tab-w-t, var(--po-nav-tab-w, 25))) * 1%);
		flex-basis: calc(var(--po-nav-tab-w-m, var(--po-nav-tab-w-t, var(--po-nav-tab-w, 25))) * 1cqw);
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-nav-tabs__tab {
		transition: none;
	}
}