/* =====================================================
   Custom AJAX Search — search.css
   Specificity strategy:
     • Trigger  → html body .cas-trigger      (0-0-1-2)
     • Modal    → #cas-modal …                (0-1-0-0+)
     • Resets   → #cas-modal * {}             neutralise theme/Elementor
   ===================================================== */

/* ── CSS custom properties ────────────────────────── */
:root {
	--cas-accent:  #0073aa;
	--cas-radius:  14px;
	--cas-shadow:  0 24px 64px rgba(0, 0, 0, .2);
	--cas-overlay: rgba(15, 23, 42, .55);
	--cas-bg:      #ffffff;
	--cas-border:  #e5e7eb;
	--cas-text:    #111827;
	--cas-muted:   #6b7280;
	--cas-hover:   #f3f4f6;
	--cas-thumb:   52px;
	--cas-speed:   .2s;
}

/* =====================================================
   TRIGGER (lives outside the modal)
   ===================================================== */

html body .cas-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	border-radius: 50% !important;
	padding: 8px !important;
	margin: 0 !important;
	cursor: pointer !important;
	color: inherit !important;
	box-shadow: none !important;
	text-decoration: none !important;
	line-height: 1 !important;
	font-size: inherit !important;
	vertical-align: middle !important;
	transition: background var(--cas-speed), color var(--cas-speed) !important;
}

html body .cas-trigger:hover,
html body .cas-trigger:focus-visible {
	background: rgba(0, 0, 0, .07) !important;
	outline: 2px solid var(--cas-accent) !important;
	outline-offset: 2px !important;
	color: inherit !important;
	box-shadow: none !important;
}

html body .cas-trigger svg {
	display: block !important;
	flex-shrink: 0 !important;
}

/* =====================================================
   SCOPED RESET — neutralise theme & Elementor inside modal
   ===================================================== */

#cas-modal,
#cas-modal * {
	box-sizing: border-box !important;
	-webkit-font-smoothing: antialiased;
}

/* Block-level elements reset */
#cas-modal p,
#cas-modal div,
#cas-modal span {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Inputs */
#cas-modal input,
#cas-modal input[type="search"],
#cas-modal input[type="text"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--cas-text) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	width: 100% !important;
}

#cas-modal input::-webkit-search-cancel-button,
#cas-modal input::-webkit-search-decoration,
#cas-modal input::-webkit-inner-spin-button { display: none !important; }

/* Buttons */
#cas-modal button {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Links */
#cas-modal a {
	text-decoration: none !important;
	color: inherit !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Images */
#cas-modal img {
	display: block !important;
	max-width: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* SVG */
#cas-modal svg {
	display: block !important;
	overflow: visible !important;
	vertical-align: middle !important;
}

/* Mark */
#cas-modal mark {
	background: transparent !important;
	color: var(--cas-accent) !important;
	font-weight: 700 !important;
	padding: 0 !important;
}

/* =====================================================
   MODAL — high-specificity rules via #cas-modal
   ===================================================== */

/* ── Backdrop ─────────────────────────────────────── */

#cas-modal {
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: clamp(40px, 10vh, 100px) 16px 16px !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	overflow: visible !important;
	transform: none !important;
}

#cas-modal[hidden] {
	display: none !important;
}

/* ── Overlay ──────────────────────────────────────── */

#cas-modal .cas-overlay {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
	background: var(--cas-overlay) !important;
	cursor: pointer !important;
	-webkit-backdrop-filter: blur(3px) !important;
	backdrop-filter: blur(3px) !important;
	border-radius: 0 !important;
	z-index: 0 !important;
}

/* ── Animations ───────────────────────────────────── */

#cas-modal.is-entering .cas-overlay { animation: cas-fade-in  var(--cas-speed) ease forwards !important; }
#cas-modal.is-entering .cas-dialog  { animation: cas-slide-in var(--cas-speed) ease forwards !important; }
#cas-modal.is-leaving  .cas-overlay { animation: cas-fade-out .18s ease forwards !important; }
#cas-modal.is-leaving  .cas-dialog  { animation: cas-slide-out .18s ease forwards !important; }

@keyframes cas-fade-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes cas-fade-out  { from { opacity: 1 } to { opacity: 0 } }
@keyframes cas-slide-in  { from { opacity: 0; transform: translateY(-14px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes cas-slide-out { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(-8px) scale(.97) } }

/* ── Dialog box ───────────────────────────────────── */

#cas-modal .cas-dialog {
	position: relative !important;
	z-index: 1 !important;
	width: min(640px, 100%) !important;
	max-width: 640px !important;
	background: var(--cas-bg) !important;
	border-radius: var(--cas-radius) !important;
	box-shadow: var(--cas-shadow) !important;
	overflow: hidden !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
	color: var(--cas-text) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

/* ── Search row ───────────────────────────────────── */

#cas-modal .cas-search-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid var(--cas-border) !important;
	background: var(--cas-bg) !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

#cas-modal .cas-icon {
	flex-shrink: 0 !important;
	color: var(--cas-muted) !important;
	display: flex !important;
	align-items: center !important;
}

#cas-modal .cas-input {
	flex: 1 1 auto !important;
	border: none !important;
	outline: none !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	color: var(--cas-text) !important;
	background: transparent !important;
	min-width: 0 !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#cas-modal .cas-input::placeholder {
	color: var(--cas-muted) !important;
	opacity: 1 !important;
}

#cas-modal .cas-close {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	padding: 6px !important;
	cursor: pointer !important;
	color: var(--cas-muted) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	transition: background var(--cas-speed), color var(--cas-speed) !important;
}

#cas-modal .cas-close:hover,
#cas-modal .cas-close:focus-visible {
	background: var(--cas-hover) !important;
	color: var(--cas-text) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ── Results list ─────────────────────────────────── */

#cas-modal .cas-results {
	max-height: min(420px, 60vh) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	padding: 6px 0 !important;
	background: var(--cas-bg) !important;
	margin: 0 !important;
	border-radius: 0 !important;
	list-style: none !important;
}

#cas-modal .cas-results:empty {
	padding: 0 !important;
}

/* Status (loading / hint / error / no-results) */
#cas-modal .cas-status {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 18px 20px !important;
	color: var(--cas-muted) !important;
	font-size: .9rem !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
}

/* Spinner */
#cas-modal .cas-spinner {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	border: 2px solid var(--cas-border) !important;
	border-top-color: var(--cas-accent) !important;
	border-radius: 50% !important;
	animation: cas-spin .6s linear infinite !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	background: none !important;
	box-shadow: none !important;
}

@keyframes cas-spin { to { transform: rotate(360deg) } }

/* ── Result item ──────────────────────────────────── */

#cas-modal .cas-item {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 10px 16px !important;
	text-decoration: none !important;
	color: var(--cas-text) !important;
	background: transparent !important;
	transition: background var(--cas-speed) !important;
	outline: none !important;
	cursor: pointer !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	width: 100% !important;
}

#cas-modal .cas-item:hover,
#cas-modal .cas-item:focus,
#cas-modal .cas-item[aria-selected="true"] {
	background: var(--cas-hover) !important;
	color: var(--cas-text) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

#cas-modal .cas-item__thumb {
	width: var(--cas-thumb) !important;
	height: var(--cas-thumb) !important;
	min-width: var(--cas-thumb) !important;
	border-radius: 8px !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	background: var(--cas-border) !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

#cas-modal .cas-item__thumb-placeholder {
	width: var(--cas-thumb) !important;
	height: var(--cas-thumb) !important;
	min-width: var(--cas-thumb) !important;
	border-radius: 8px !important;
	background: var(--cas-hover) !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #d1d5db !important;
}

#cas-modal .cas-item__body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

#cas-modal .cas-item__title {
	display: block !important;
	font-weight: 600 !important;
	font-size: .95rem !important;
	color: var(--cas-text) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	margin: 0 0 2px !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	background: none !important;
	border: none !important;
}

#cas-modal .cas-item__title mark {
	background: transparent !important;
	color: var(--cas-accent) !important;
	font-weight: 700 !important;
	padding: 0 !important;
}

#cas-modal .cas-item__excerpt {
	display: -webkit-box !important;
	-webkit-line-clamp: 1 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-size: .82rem !important;
	color: var(--cas-muted) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

#cas-modal .cas-item__meta {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

#cas-modal .cas-item__badge {
	display: inline-block !important;
	font-size: .7rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	color: var(--cas-accent) !important;
	background: color-mix(in srgb, var(--cas-accent) 10%, transparent) !important;
	padding: 1px 6px !important;
	border-radius: 4px !important;
	border: none !important;
	box-shadow: none !important;
	line-height: 1.6 !important;
}

#cas-modal .cas-item__date {
	font-size: .75rem !important;
	color: var(--cas-muted) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Footer ───────────────────────────────────────── */

#cas-modal .cas-meta {
	display: block !important;
	padding: 8px 16px 0 !important;
	font-size: .78rem !important;
	color: var(--cas-muted) !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
}

#cas-modal .cas-view-all {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 12px 16px !important;
	margin: 6px 0 0 !important;
	border-top: 1px solid var(--cas-border) !important;
	font-size: .875rem !important;
	font-weight: 500 !important;
	color: var(--cas-accent) !important;
	text-decoration: none !important;
	background: transparent !important;
	transition: background var(--cas-speed) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#cas-modal .cas-view-all:hover {
	background: var(--cas-hover) !important;
	text-decoration: none !important;
	color: var(--cas-accent) !important;
}

/* ── Scrollbar ────────────────────────────────────── */

#cas-modal .cas-results::-webkit-scrollbar        { width: 6px; }
#cas-modal .cas-results::-webkit-scrollbar-track  { background: transparent; }
#cas-modal .cas-results::-webkit-scrollbar-thumb  { background: var(--cas-border); border-radius: 3px; }

/* ── Reduced motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	#cas-modal.is-entering .cas-overlay,
	#cas-modal.is-entering .cas-dialog,
	#cas-modal.is-leaving  .cas-overlay,
	#cas-modal.is-leaving  .cas-dialog { animation: none !important; }
	#cas-modal .cas-spinner            { animation-duration: 1.5s !important; }
}