/* TPA Smart Search — front-end
   Brand: navy #2E2A38, blue #D2DBE6/#D2DBE6, periwinkle #DED6E7/#DED6E7,
   pink #E7D6DF/#E7D6DF, purple accent #8B73B9, badge yellow #8B73B9.
   Fonts inherit from the theme (Roboto headings / Mulish body). */

.tpa-search {
	max-width: 780px;
	margin: 0 auto;
	color: #2E2A38;
}

/* Search bar */
.tpa-search-bar {
	position: relative;
	display: flex;
	align-items: center;
}
.tpa-search-icon {
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 22px !important;
	height: 22px !important;
	color: #8B73B9;
	pointer-events: none;
	z-index: 2;
}
.tpa-search .tpa-search-input,
.tpa-search input.tpa-search-input[type="search"] {
	width: 100%;
	/* !important: themes and Elementor global form styles override input
	   padding, which pushes text under the magnifying glass. */
	padding: 16px 52px 16px 52px !important;
	text-indent: 0 !important;
	background-image: none !important;
	min-height: 0;
	margin: 0;
	box-shadow: none;
	font-size: 1.1rem;
	font-family: inherit;
	color: #2E2A38;
	background: #ffffff;
	border: 2px solid #D2DBE6;
	border-radius: 999px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
}
.tpa-search-input:focus {
	border-color: #8B73B9;
	box-shadow: 0 0 0 4px #DED6E7;
}
.tpa-search-input::placeholder { color: #7A7484; }
.tpa-search .tpa-search-clear,
.tpa-search button.tpa-search-clear {
	/* !important: theme button styles add padding/min-width and turn the
	   circle into a large oval. */
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #DED6E7;
	color: #2E2A38;
	font-size: 1rem !important;
	line-height: 1 !important;
	cursor: pointer;
	z-index: 2;
}
.tpa-search-clear:hover,
.tpa-search-clear:focus-visible { background: #DED6E7; }

/* Filter tabs */
.tpa-search-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 6px;
}
.tpa-search-tab {
	border: 2px solid #D2DBE6;
	background: #ffffff;
	color: #2E2A38;
	font-family: inherit;
	font-size: 0.95rem;
	padding: 7px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.tpa-search-tab:hover { border-color: #8B73B9; }
.tpa-search-tab.is-active {
	background: #8B73B9;
	border-color: #8B73B9;
	color: #ffffff;
}
.tpa-search-tab:focus-visible,
.tpa-search-clear:focus-visible,
.tpa-search-more:focus-visible {
	outline: 3px solid #D2DBE6;
	outline-offset: 2px;
}

/* Status line */
.tpa-search-status {
	min-height: 1.4em;
	margin: 10px 2px;
	font-size: 0.92rem;
	color: #8B73B9;
}

/* Result cards */
.tpa-search-results {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tpa-search-card {
	display: flex;
	gap: 16px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #D2DBE6;
	border-left: 5px solid #D2DBE6;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.tpa-search-card:hover,
.tpa-search-card:focus-visible {
	box-shadow: 0 6px 20px rgba(34, 52, 88, 0.12);
	border-left-color: #8B73B9;
	transform: translateY(-1px);
}
.tpa-search-card-video { border-left-color: #E7D6DF; }
.tpa-search-card-video:hover,
.tpa-search-card-video:focus-visible { border-left-color: #8B73B9; }

.tpa-search-thumb {
	flex: 0 0 132px;
	align-self: center;
}
.tpa-search-thumb img {
	display: block;
	width: 132px;
	height: 88px;
	object-fit: cover;
	border-radius: 10px;
}
.tpa-search-card-body { min-width: 0; }

.tpa-search-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 6px;
}
.tpa-search-badge-post { background: #D2DBE6; color: #2E2A38; }
.tpa-search-badge-video { background: #E7D6DF; color: #2E2A38; }
.tpa-search-star {
	color: #8B73B9;
	margin-left: 6px;
	font-size: 0.95rem;
	vertical-align: middle;
}

.tpa-search-card-title {
	margin: 0 0 6px;
	font-size: 1.12rem;
	line-height: 1.35;
	color: #2E2A38;
}
.tpa-search-card-snippet {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.55;
	color: #4A4552;
	overflow-wrap: break-word;
}
.tpa-search-card-snippet mark {
	background: #DED6E7;
	color: #2E2A38;
	border-radius: 3px;
	padding: 0 2px;
}

/* Load more */
.tpa-search-more-wrap { text-align: center; margin: 22px 0; }
.tpa-search-more {
	border: 2px solid #8B73B9;
	background: #ffffff;
	color: #8B73B9;
	font-family: inherit;
	font-size: 1rem;
	padding: 10px 28px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.tpa-search-more:hover { background: #8B73B9; color: #ffffff; }

/* Mobile */
@media (max-width: 560px) {
	.tpa-search-card { flex-direction: column; }
	.tpa-search-thumb { flex-basis: auto; }
	.tpa-search-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
	.tpa-search *, .tpa-search *::before, .tpa-search *::after {
		transition: none !important;
	}
	.tpa-search-card:hover { transform: none; }
}

/* Focus hint: appears when the field is focused and empty, hides while typing.
   Focus-based rather than hover so it also works on phones, keyboards,
   and screen readers (linked via aria-describedby). */
.tpa-search-hint {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin: 0 22px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #8B73B9;
	transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
.tpa-search-bar:focus-within + .tpa-search-hint:not(.tpa-search-hint-off) {
	max-height: 4.5em;
	opacity: 1;
	margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
	.tpa-search-hint { transition: none; }
}

/* Compact mode (sidebars, footers) */
.tpa-search-compact { max-width: 100%; }
.tpa-search-compact .tpa-search-input,
.tpa-search-compact input.tpa-search-input[type="search"] {
	padding: 11px 20px 11px 46px !important;
	font-size: 1rem;
}
.tpa-search-compact .tpa-search-icon {
	left: 15px;
	width: 19px;
	height: 19px;
}


/* Live suggestion dropdown (Google-style, on compact bars) */
.tpa-search { position: relative; }
.tpa-search-suggest {
	position: absolute;
	z-index: 99999;
	background: #ffffff;
	border: 2px solid #D2DBE6;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(34, 52, 88, 0.16);
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 70vh;
	box-sizing: border-box;
}
.tpa-search-suggest[hidden] { display: none; }
.tpa-search-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid #E9E4EF;
	background: #ffffff;
	text-align: left;
	font-family: inherit;
	font-size: 0.95rem;
	color: #2E2A38;
	cursor: pointer;
}
.tpa-search-suggest-item:hover,
.tpa-search-suggest-item.is-active {
	background: #EDE5FB;
}
.tpa-search-suggest-thumb {
	flex: 0 0 46px;
	width: 46px;
	height: 30px;
	object-fit: cover;
	border-radius: 6px;
}
.tpa-search-suggest-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tpa-search-suggest-badge {
	flex: 0 0 auto;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	background: #D2DBE6;
	color: #2E2A38;
}
.tpa-search-suggest-badge-video { background: #E7D6DF; }
.tpa-search-suggest-all {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	background: #F4F0FB;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: #8B73B9;
	text-align: center;
	cursor: pointer;
}
.tpa-search-suggest-all:hover,
.tpa-search-suggest-all.is-active { background: #EDE5FB; }

/* --- Theme-override hardening (Elementor/theme styles can restyle inputs
       and buttons globally; these keep the bar intact regardless) --- */
.tpa-search .tpa-search-bar .tpa-search-input,
.tpa-search input.tpa-search-input {
	box-sizing: border-box !important;
	padding-left: 52px !important;
	padding-right: 52px !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	background-image: none !important;
}
.tpa-search-compact .tpa-search-input,
.tpa-search-compact input.tpa-search-input {
	padding-left: 46px !important;
	padding-right: 20px !important;
}
.tpa-search button.tpa-search-clear {
	box-sizing: border-box !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.1rem !important;
	line-height: 1 !important;
	background: #DED6E7;
	color: #2E2A38;
	box-shadow: none !important;
	text-transform: none !important;
}
.tpa-search button.tpa-search-clear:hover { background: #DED6E7; }
.tpa-search button.tpa-search-more,
.tpa-search button.tpa-search-tab {
	box-sizing: border-box !important;
	text-transform: none !important;
	box-shadow: none !important;
}

/* Suggestion dropdown host: any form the dropdown is attached to. */
.tpa-suggest-host { position: relative !important; }

/* Belt-and-braces: the icon can never balloon, even with no other CSS. */
.tpa-search .tpa-search-icon,
svg.tpa-search-icon {
	width: 22px !important;
	height: 22px !important;
	max-width: 22px;
	max-height: 22px;
}
.tpa-search-compact .tpa-search-icon { width: 19px !important; height: 19px !important; }

/* Category/tag archive results */
.tpa-search-badge-term, .tpa-search-suggest-badge-term { background: #DED6E7; color: #2E2A38; }
.tpa-search-card-term { border-left-color: #DED6E7; }