/**
 * ch/hierarchy-filter — frontend styles.
 *
 * Token-driven where the host theme provides them; the fallbacks below
 * keep the block usable on any theme. Two layouts: stacked (default) +
 * inline (set by host CSS via `is-style-inline` or media-query overrides).
 */

.ch-hierarchy-filter {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	box-sizing: border-box;
}

.ch-hierarchy-filter__levels {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	box-sizing: border-box;
}

.ch-hierarchy-filter__level {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	box-sizing: border-box;
}

.ch-hierarchy-filter__label {
	font-size: var(--wp--preset--font-size--body-sm, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: inherit;
}

/* Custom chevron: the native arrow (appearance: auto) hugs the right edge
 * and can't be offset, so we draw our own and give it breathing room via
 * background-position + right padding. */
.ch-hierarchy-filter__select {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 2.5rem 0.5rem 0.75rem;
	font: inherit;
	line-height: 1.4;
	border: 1px solid var(--wp--preset--color--light-grey, #d0d1d2);
	border-radius: var(--wp--custom--border-radius--xs, 4px);
	background-color: var(--wp--preset--color--white, #fff);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23565657' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 12px 8px;
	color: inherit;
	box-sizing: border-box;
	appearance: none;
	transition: border-color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.ch-hierarchy-filter__select:focus {
	border-color: var(--wp--preset--color--original-blue, #0071ce);
	outline: 2px solid var(--wp--preset--color--original-blue, #0071ce);
	outline-offset: 1px;
}

/* Disabled: keep the field surface at full opacity (a translucent select
 * over a coloured section bleeds the section colour through); dim only the
 * text/placeholder. currentColor resolves to the inherited text colour, so
 * the dim stays token-driven. */
.ch-hierarchy-filter__select:disabled {
	opacity: 1;
	color: color-mix( in srgb, currentColor 45%, transparent );
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23565657' stroke-opacity='0.45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	cursor: not-allowed;
}

/* Exhausted: parent picked but the level has no options ("Alle årsmodeller").
 * Informational rather than dead UI — keep the text more readable than a
 * plain disabled field, and drop the chevron (there's nothing to open). */
.ch-hierarchy-filter__select--exhausted:disabled {
	color: color-mix( in srgb, currentColor 70%, transparent );
	background-image: none;
	cursor: default;
}

.ch-hierarchy-filter__submit {
	margin-top: 0.5rem;
	font-weight: 700;
	cursor: pointer;
}

.ch-hierarchy-filter__submit[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Custom button colors — vars set inline by render.php, marker classes keep
 * unset values falling through to the theme's wp-element-button styling.
 * Two classes + pseudo outranks the theme's .wp-element-button:hover. */
.ch-hierarchy-filter__submit.has-custom-bg {
	background-color: var(--ch-hf-submit-bg);
}
.ch-hierarchy-filter__submit.has-custom-text {
	color: var(--ch-hf-submit-text);
}
.ch-hierarchy-filter__submit.has-custom-bg-hover:hover,
.ch-hierarchy-filter__submit.has-custom-bg-hover:focus-visible {
	background-color: var(--ch-hf-submit-bg-hover);
}
.ch-hierarchy-filter__submit.has-custom-text-hover:hover,
.ch-hierarchy-filter__submit.has-custom-text-hover:focus-visible {
	color: var(--ch-hf-submit-text-hover);
}

/* Submit-mode form: lay levels out in a row on wider screens so the
 * homepage finder reads as a single-line "Make / Model / Year + Find"
 * control. Stays stacked on mobile. */
@media (min-width: 600px) {
	.ch-hierarchy-filter--mode-submit .ch-hierarchy-filter__levels {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.ch-hierarchy-filter--mode-submit .ch-hierarchy-filter__level {
		flex: 1 1 180px;
		min-width: 0;
	}

	/* Inline style variation: submit button joins the dropdown row instead
	 * of sitting below it — one continuous "Make / Model / Year / Find"
	 * line. Mobile keeps the stacked layout. */
	.ch-hierarchy-filter--mode-submit.is-style-inline {
		flex-direction: row;
		align-items: stretch;
		gap: 0.75rem;
	}
	.ch-hierarchy-filter--mode-submit.is-style-inline .ch-hierarchy-filter__levels {
		flex: 1 1 auto;
		min-width: 0;
	}
	.ch-hierarchy-filter--mode-submit.is-style-inline .ch-hierarchy-filter__level {
		justify-content: stretch;
	}
	.ch-hierarchy-filter--mode-submit.is-style-inline .ch-hierarchy-filter__select {
		height: 100%;
	}
	.ch-hierarchy-filter--mode-submit.is-style-inline .ch-hierarchy-filter__submit {
		margin-top: 0;
		flex: 0 0 auto;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ch-hierarchy-filter__select {
		transition: none;
	}
}