/*
 * en2x Page Finder – module styles.
 *
 * Layout + form styling only. The brand colours (block background, text, button)
 * come from the configuration as inline styles, NOT from this file. Font is
 * inherited (Rubik from Salient). Button roundness uses Salient's setting.
 */

.en2x-page-finder {
	padding: 32px;
	border-radius: 0;
	font-family: inherit;
}

/* Title – headline style, uppercase like the other headlines, but its colour
 * comes from the inline config (the block is colour-filled). */
.en2x-page-finder__title {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: inherit;
}

.en2x-page-finder__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

/* Dropdown – neutral white field with a custom arrow on the right. */
.en2x-page-finder__select {
	flex: 1 1 280px;
	min-width: 0;
	padding: 12px 44px 12px 16px;
	border: none;
	border-radius: var(--en2x-button-radius, 999px);
	background-color: #fff;
	/* Field label/value styled like an h3: semibold, uppercase, dark-blue CI. */
	color: var(--en2x-color-headline, #250F51);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23221182' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
}

/* Button – colours set inline (inverse of the block); shape + spacing here. */
.en2x-page-finder__button {
	flex: 0 0 auto;
	padding: 12px 28px;
	border: none;
	border-radius: var(--en2x-button-radius, 999px);
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.en2x-page-finder__button:hover,
.en2x-page-finder__button:focus {
	opacity: 0.88;
}

/* Inactive look while no page is chosen. Driven by aria-disabled (not the HTML
 * disabled attribute) so the button stays focusable and reachable by keyboard. */
.en2x-page-finder__button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
}

/* Mobile: stack dropdown and button. */
@media (max-width: 600px) {
	.en2x-page-finder__controls {
		flex-direction: column;
	}

	.en2x-page-finder__select,
	.en2x-page-finder__button {
		flex: 1 1 auto;
		width: 100%;
	}
}