/* ===================================================================
 * videos-filter.css
 *
 * Owns the layout + styling of the Videos archive filter band.
 * Mirrors events-filter.css (Kind dropdown + free-text search + submit
 * + clear-filters link) — kept as a parallel sheet so each archive
 * can evolve independently without selector collisions.
 *
 * The band itself uses the canonical .tec-band + .tec-band-inner--wide
 * primitives (tokens.css). Navy background comes via theme.json palette
 * token (.has-navy-background-color), so this sheet only defines:
 *
 *   - vertical rhythm of the band
 *   - layout of the form on desktop (row, gap, alignment)
 *   - control surfaces (select / input / button / reset link)
 *   - mobile stack (full-width controls)
 *
 * No raw hex (chevron + search-icon SVGs are URL-encoded with palette
 * hex inline because data: URLs cannot read CSS custom properties).
 * Logical properties throughout. No !important.
 * =================================================================== */

/* === Band envelope === */
.tec-videos-filter-band {
	padding-block: var(--wp--preset--spacing--40, 1.5rem);
}

/* === Form layout — desktop row === */
.tec-videos-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 1rem);
	margin: 0;
}

.tec-videos-filter__field {
	display: flex;
	align-items: center;
}
.tec-videos-filter__field--category {
	flex: 0 0 auto;
}
.tec-videos-filter__field--search {
	flex: 1 1 320px;
	min-inline-size: 0;
}
.tec-videos-filter__field--submit {
	flex: 0 0 auto;
}
.tec-videos-filter__field--reset {
	margin-inline-start: auto;
}

/* === Category select === */
.tec-videos-filter__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 4.9px;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	line-height: 1.7;
	min-height: 40px;
	padding-block: 3.5px;
	padding-inline-start: 16px;
	padding-inline-end: 36px;
	min-inline-size: 220px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.tec-videos-filter__select:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23052f67' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>");
}
.tec-videos-filter__select option {
	color: var(--wp--preset--color--near-black, #1a1a1a);
	background-color: var(--wp--preset--color--white);
}

/* === Search input === */
.tec-videos-filter__input {
	width: 100%;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--near-black, #1a1a1a);
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 4.9px;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 400;
	line-height: 1.7;
	min-height: 40px;
	padding-block: 3.5px;
	padding-inline-start: 16px;
	padding-inline-end: 40px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='1.5'><circle cx='7' cy='7' r='5'/><path d='M11 11l3.5 3.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}
.tec-videos-filter__input::placeholder {
	color: var(--wp--preset--color--ink-low-emphasis, #555555);
	opacity: 1;
}

/* === Submit button === */
.tec-videos-filter__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 3.5px 28px;
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--accent-yellow);
	border-radius: 4.9px;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tec-videos-filter__submit:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-yellow);
}

/* === Reset link === */
.tec-videos-filter__reset {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.tec-videos-filter__reset:hover {
	text-decoration-thickness: 2px;
}

/* === Mobile — stack controls full-width === */
@media (max-width: 766px) {
	.tec-videos-filter {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30, 1rem);
	}
	.tec-videos-filter__field {
		display: block;
	}
	.tec-videos-filter__select,
	.tec-videos-filter__input,
	.tec-videos-filter__submit {
		width: 100%;
		min-inline-size: 0;
	}
	.tec-videos-filter__field--reset {
		margin-inline-start: 0;
		text-align: center;
	}
	.tec-videos-filter__field--search {
		flex: 0 0 auto;
	}
}