/**
 * TMT Insight Filter.
 *
 * Every selector is prefixed .tmt-if so nothing here can reach the rest of the
 * site. Colours and sizes are defaults only: each one is also driven by an
 * Elementor control, whose generated rules outrank this file.
 *
 * Layout note: the fields are a wrapping flex row at every breakpoint. Stacking
 * is done by widening --tmt-if-field-min rather than by switching to a column,
 * because flex-basis flips to meaning height in a column container and the
 * panel's Minimum Width control would then set the field's height.
 */

.tmt-if {
	--tmt-if-select-h: 48px;
	--tmt-if-field-min: 280px;
	--tmt-if-chevron: #12384b;
	--tmt-if-accent-w: 3px;
	--tmt-if-accent-gap: 24px;
	position: relative;
}

.tmt-if *,
.tmt-if *::before,
.tmt-if *::after {
	box-sizing: border-box;
}

/* Filter bar ------------------------------------------------------------- */

.tmt-if .tmt-if__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0 0 48px;
}

.tmt-if .tmt-if__bar-label {
	flex: 0 0 auto;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #12384b;
}

.tmt-if .tmt-if__fields {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px;
	padding-left: var(--tmt-if-accent-gap);
}

/* The orange rule between "FILTER BY:" and the first field. */
.tmt-if .tmt-if__fields::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--tmt-if-accent-w);
	background-color: #e8542b;
}

.tmt-if .tmt-if__field {
	flex: 1 1 auto;
	min-width: var(--tmt-if-field-min);
	/* Without this a long option name makes the field refuse to shrink. */
	max-width: 100%;
}

.tmt-if .tmt-if__label {
	display: block;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: #12384b;
}

.tmt-if .tmt-if__select-wrap {
	position: relative;
	display: block;
}

.tmt-if .tmt-if__select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 13px;
	height: 8px;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: var(--tmt-if-chevron);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/*
 * The element is named in the selector so a theme rule on bare `select` cannot
 * outrank the reset, which is what leaves stock arrows showing on some themes.
 */
.tmt-if select.tmt-if__select {
	display: block;
	width: 100%;
	min-height: var(--tmt-if-select-h);
	margin: 0;
	padding: 10px 46px 10px 22px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #12384b;
	background-color: #fff;
	background-image: none;
	border: 1px solid #d5dee4;
	border-radius: 30px;
	box-shadow: none;
	cursor: pointer;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.tmt-if select.tmt-if__select:focus {
	outline: none;
}

.tmt-if select.tmt-if__select:focus-visible {
	outline: 2px solid #e8542b;
	outline-offset: 2px;
}

/* Actions ---------------------------------------------------------------- */

.tmt-if .tmt-if__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 14px;
	min-height: var(--tmt-if-select-h);
}

.tmt-if a.tmt-if__reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Vertical padding is what lifts the hit area to the 44px touch target;
	   the text on its own is only 29px tall. */
	padding: 12px 4px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	color: #12384b;
	text-decoration: none;
	border: 0;
	background: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.tmt-if a.tmt-if__reset:hover,
.tmt-if a.tmt-if__reset:focus-visible {
	color: #e8542b;
	text-decoration: none;
}

.tmt-if a.tmt-if__reset:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.tmt-if .tmt-if__reset-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.tmt-if .tmt-if__reset-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Submit only exists for the no-JavaScript path. */
.tmt-if button.tmt-if__submit {
	font-family: inherit;
	font-size: 15px;
	padding: 10px 20px;
	color: #fff;
	background-color: #12384b;
	border: 0;
	border-radius: 30px;
	cursor: pointer;
}

.tmt-if--js button.tmt-if__submit {
	display: none;
}

/* Loading ---------------------------------------------------------------- */

/*
 * Shown from the moment a filter request starts until it settles, whatever the
 * outcome. It was a 3px hairline before, which was easy to miss on a slow
 * connection - the one occasion it matters most.
 */
.tmt-if .tmt-if__spinner {
	display: none;
	margin: 0 0 28px;
	text-align: center;
}

.tmt-if.is-loading .tmt-if__spinner {
	display: block;
}

.tmt-if .tmt-if__spinner::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 3px solid rgba(18, 56, 75, 0.18);
	border-top-color: #e8542b;
	border-radius: 50%;
	animation: tmt-if-spin 0.7s linear infinite;
}

@keyframes tmt-if-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Applied to the listing element, which belongs to another widget. Only opacity
 * and pointer-events are touched, so nothing about its own styling is disturbed.
 */
.tmt-if-target--loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.tmt-if .tmt-if__spinner::after {
		animation-duration: 2s;
	}

	.tmt-if-target--loading {
		transition: none;
	}
}

/* Status ----------------------------------------------------------------- */

/* Announcement only - the visible feedback is the listing updating. */
.tmt-if .tmt-if__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

/* Breakpoints ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.tmt-if {
		--tmt-if-field-min: 200px;
	}
}

@media (max-width: 767px) {
	/*
	 * Stacked layout drops the accent rule and its indent, matching the live
	 * site: a 3px line running down the side of three full-width fields reads
	 * as a stray border rather than a divider. Both are responsive controls,
	 * so a value set for mobile in the panel still wins over this.
	 */
	.tmt-if {
		--tmt-if-field-min: 100%;
		--tmt-if-accent-w: 0px;
		--tmt-if-accent-gap: 0px;
	}

	.tmt-if .tmt-if__bar {
		align-items: flex-start;
	}

	.tmt-if .tmt-if__actions {
		width: 100%;
		min-height: 0;
	}
}

/* Card action row ---------------------------------------------------------
 *
 * Rendered by [tmt_insight_action] inside whatever card template the site
 * already has. Sizes are in em so the row follows the card's own font size,
 * and every colour is a custom property, so restyling is one rule in the
 * theme or in Elementor's Custom CSS rather than an edit here.
 */

.tmt-ifa {
	--tmt-ifa-badge-color: #12384b;
	--tmt-ifa-badge-border: #d5dee4;
	--tmt-ifa-badge-bg: #fff;
	--tmt-ifa-badge-font-size: 0.95em;
	--tmt-ifa-badge-weight: 500;
	--tmt-ifa-badge-padding: 0.45em 0.9em;
	--tmt-ifa-badge-radius: 999px;
	--tmt-ifa-badge-icon-size: 1.3em;
	--tmt-ifa-link-color: #1b7bc0;
	--tmt-ifa-link-font-size: 0.95em;
	--tmt-ifa-link-weight: 400;
	--tmt-ifa-arrow-size: 1.25em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/*
	 * The row has to span the card for the link to sit against its right edge.
	 * Dropped into a container that sizes itself to its contents - an inline
	 * flex column, say - it would otherwise shrink to fit and the link would
	 * end up next to the badge instead of opposite it.
	 */
	width: 100%;
}

/*
 * There is deliberately nothing here pushing the link to the right.
 *
 * space-between on the row does the whole job: with a badge alongside it the
 * link sits against the card's right edge, and on a type that has no badge the
 * single remaining item falls back to the left, which is where "Read now" and
 * "Listen now" sit on the live site. A margin-left:auto would force the link
 * right in both cases and was wrong for the second.
 */

/*
 * The row is normally dropped in as a Shortcode widget, and an Elementor
 * container can size a widget to its contents. When it does, the row has
 * nothing to stretch inside however wide it declares itself, and the link ends
 * up beside the badge rather than opposite it. Scoped with :has() so no other
 * shortcode on the site is touched; where :has() is unsupported the row's own
 * width rule still applies and only this last case is missed.
 */
.elementor-widget-shortcode:has(.tmt-ifa),
.elementor-widget-shortcode:has(.tmt-ifa) .elementor-shortcode {
	width: 100%;
}

/* Never let "Listen now" break across two lines to save a few pixels. */
.tmt-ifa .tmt-ifa__link-text,
.tmt-ifa .tmt-ifa__badge-text {
	white-space: nowrap;
}

.tmt-ifa .tmt-ifa__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 11px 11px 11px 15px;
	font-size: var(--tmt-ifa-badge-font-size);
	font-weight: var(--tmt-ifa-badge-weight);
	line-height: 1.2;
	color: var(--tmt-ifa-badge-color);
	background-color: var(--tmt-ifa-badge-bg);
	border: 1px solid var(--tmt-ifa-badge-border);
	border-radius: var(--tmt-ifa-badge-radius);
}

.tmt-ifa .tmt-ifa__badge-icon {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--tmt-ifa-badge-icon-size);
	line-height: 1;
}

.tmt-ifa .tmt-ifa__badge-icon svg,
.tmt-ifa .tmt-ifa__badge-icon img {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.tmt-ifa a.tmt-ifa__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 17px;
	font-weight: var(--tmt-ifa-link-weight);
	line-height: 1.2;
	color: var(--tmt-ifa-link-color);
	text-decoration: none;
}

.tmt-ifa a.tmt-ifa__link:hover .tmt-ifa__link-text,
.tmt-ifa a.tmt-ifa__link:focus-visible .tmt-ifa__link-text {
	/*text-decoration: underline;*/
}

.tmt-ifa a.tmt-ifa__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.tmt-ifa .tmt-ifa__arrow {
	display: inline-flex;
	flex: 0 0 auto;
}

.tmt-ifa .tmt-ifa__arrow svg {
	display: block;
	width: var(--tmt-ifa-arrow-size);
	height: var(--tmt-ifa-arrow-size);
}

/* Narrow screens.
 *
 * The row is em-based, so it already follows whatever font size the card sets
 * at each breakpoint. What it cannot work out on its own is the point where a
 * badge and a link stop fitting side by side. Below the phone breakpoint they
 * are stacked outright rather than left to wrap, so the spacing between them is
 * the row's own gap and not whatever space-between happens to leave.
 */

@media ( max-width: 767px ) {
	.tmt-ifa {
		gap: 10px;
	}

	.tmt-ifa .tmt-ifa__badge {
		--tmt-ifa-badge-padding: 0.4em 0.8em;
		--tmt-ifa-badge-font-size: 0.88em;
	}
}

@media ( max-width: 479px ) {
	.tmt-ifa {
		/*flex-direction: column;*/
		align-items: flex-start;
	}
	.tmt-ifa a.tmt-ifa__link {
		padding-top: 5px;
	}
}

/* Error state -------------------------------------------------------------
 *
 * Shown when a filter request fails. The results already on screen are left
 * alone, so this sits above them rather than replacing them.
 */

.tmt-if .tmt-if__error {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.45;
	color: #8a2c12;
	background-color: #fdf1ed;
	border: 1px solid #f3c6b7;
	border-radius: 6px;
}

.tmt-if .tmt-if__error[hidden] {
	display: none;
}