/* ub/service-tabs: the search field (a gold pill with a magnifier, its results in a white card), the row of category
   pills, then the open category. The pills (.ub-service-pill) are styled here for the categories' condition pills too.
   Sizes and colours from the live widget (praxis-leistungen-tabs 2.0.0): pills 40 px tall, 1 px gold border, the open
   one dark; search 52 px. Pill and search text in em, so the block's font size setting scales them.

   Nothing hidden before view.js runs: the server prints everything open; html.ub-js (UB Kit, in the head) only shows
   the search, which needs the script. [hidden] is set by view.js on the closed panels. */

/* 1rem: the pills and the search are sized in em from here, so the block's own font size setting scales them (the
   body's fluid size would make them 15 px on phones) */
.wp-block-ub-service-tabs { position: relative; font-size: 1rem; }
.wp-block-ub-service-tabs [hidden] { display: none !important; }

/* ---- The search -------------------------------------------------------------------------------------------- */

.ub-service-tabs__search {
	position: relative;
	z-index: 30;
	margin-block: 0 1.625rem;
}
html:not(.ub-js) .ub-service-tabs__search { display: none; }

.ub-service-tabs__input {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 3.25rem;
	margin: 0;
	padding: 0 1.5rem 0 3.25rem;
	border: 1px solid var(--wp--preset--color--primary, #c19c5d);
	border-radius: 999px;
	background-color: transparent;
	color: var(--wp--preset--color--ink, #4a4740);
	font: inherit;
	font-size: 1em;
	line-height: normal;
	box-shadow: none;
	appearance: none;
}
.ub-service-tabs__input::placeholder { color: var(--wp--preset--color--muted, #756d63); opacity: 1; }
.ub-service-tabs__input:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary, #c19c5d) 80%, #000); }
.ub-service-tabs__input:focus {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary, #c19c5d) 80%, #000);
	background-color: rgb(255 255 255 / 0.36);
}

.ub-service-tabs__icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 1.1875rem;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	translate: 0 -50%;
	color: var(--wp--preset--color--muted, #756d63);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	pointer-events: none;
}

.ub-service-tabs__dropdown {
	position: absolute;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline: 0;
	max-block-size: 20rem;
	overflow: auto;
	border: 1px solid var(--wp--preset--color--line, #d3cdc1);
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface, #fff);
	box-shadow: 0 16px 38px rgb(25 20 12 / 0.14);
}

.ub-service-tabs__result,
.ub-service-tabs__empty {
	display: block;
	margin: 0;
	padding: 0.875rem 1.125rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--line, #d3cdc1) 55%, #fff);
	color: var(--wp--preset--color--deep, #131313);
	font-size: 1em;
	line-height: 1.4;
	text-decoration: none;
}
.ub-service-tabs__result:last-child { border-block-end: 0; }
.ub-service-tabs__result { cursor: pointer; font-weight: 500; }
.ub-service-tabs__result:hover,
.ub-service-tabs__result.is-active {
	background-color: var(--wp--preset--color--base, #f7f0e0);
	color: var(--wp--preset--color--deep, #131313);
}
.ub-service-tabs__result-title,
.ub-service-tabs__result-category { display: block; }
.ub-service-tabs__result-category {
	color: var(--wp--preset--color--muted, #756d63);
	font-size: 0.8125em;
	font-weight: 400;
}

/* ---- The pills: categories (here) and conditions (in each category) ----------------------------------------- */

.ub-service-tabs__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0 2.3125rem;
	padding-block-end: 2.25rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #d3cdc1);
}

.ub-service-pill {
	--ub-focus: var(--wp--preset--color--deep, #131313);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.5rem;
	padding: 0 1.0625rem;
	border: 1px solid var(--wp--preset--color--primary, #c19c5d);
	border-radius: 999px;
	background-color: transparent;
	color: var(--wp--preset--color--deep, #131313);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.ub-service-pill--condition {
	min-block-size: 2.375rem;
	max-inline-size: 100%;
	padding: 0.5rem 1.0625rem;
	border-radius: 6px;
	white-space: normal;
	text-align: center;
}
.ub-service-pill--condition > span { overflow-wrap: break-word; }
.ub-service-pill:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary, #c19c5d) 80%, #000);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary, #c19c5d) 7%, transparent);
	color: var(--wp--preset--color--deep, #131313);
	text-decoration: none;
}
.ub-service-pill:active { translate: 0 1px; }
.ub-service-pill.is-active {
	border-color: var(--wp--preset--color--deep, #131313);
	background-color: var(--wp--preset--color--deep, #131313);
	color: var(--wp--preset--color--on-deep, #fff);
	font-weight: 600;
}

/* Colour changes fade (200 ms) once the page has painted (context.live), never on load, never under reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .wp-block-ub-service-tabs.is-live :is(.ub-service-pill, .ub-service-tabs__input) {
		transition: background-color 200ms var(--ub-ease, ease-out), border-color 200ms var(--ub-ease, ease-out), color 200ms var(--ub-ease, ease-out);
	}
}

/* ---- The categories ------------------------------------------------------------------------------------------ */

/* Without JavaScript every category shows, one after another */
.wp-block-ub-service-tabs > .wp-block-ub-service-category + .wp-block-ub-service-category { margin-block-start: 5rem; }
.wp-block-ub-service-tabs.is-ready > .wp-block-ub-service-category { margin-block-start: 0; }

@media (max-width: 767px) {
	.ub-service-tabs__input { block-size: 3rem; padding-inline-start: 2.875rem; } /* 16 px stays: iOS zooms into a smaller field */
	.ub-service-tabs__icon { inset-inline-start: 1rem; inline-size: 1.125rem; block-size: 1.125rem; }
	.ub-service-tabs__pills { margin-block-end: 1.75rem; padding-block-end: 1.625rem; }
	.ub-service-pill { min-block-size: 2.25rem; padding: 0 1rem; font-size: 0.875em; }
	.ub-service-pill--condition { padding: 0.5rem 0.875rem; border-radius: 5px; }
	.ub-service-pill--condition > span { max-inline-size: min(220px, calc(100vw - 64px)); }
	.wp-block-ub-service-tabs > .wp-block-ub-service-category + .wp-block-ub-service-category { margin-block-start: 3.5rem; }
}