/**
 * RM_A-SEARCH Frontend Styles
 * Speech bubble design inspired by rimu.richtermusikowski.com
 *
 * @package RM_A-SEARCH
 */

/* Search Container */
.rma-search-container {
	position: relative;
	display: inline-block;
	vertical-align: top; /* Consistent alignment with filter buttons */
}

/* Search Field Wrapper */
.rma-search-field-wrapper {
	position: relative;
	display: inline-block;
	vertical-align: top; /* Consistent alignment with filter buttons */
	-webkit-transition: -webkit-transform 0.18s ease;
	-moz-transition: -moz-transform 0.18s ease;
	-o-transition: -o-transform 0.18s ease;
	transition: transform 0.18s ease;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-ms-transform-origin: center center;
	-o-transform-origin: center center;
	transform-origin: center center;
	padding-bottom: 8px; /* Space for speech bubble triangle */
}

/* Search Input - Speech Bubble Style */
.rma-search-input {
	position: relative;
	display: inline-block;
	height: 24px;
	padding: 0 9px;
	font-family: 'NudicaMono_Regular', monospace;
	font-size: 12px;
	line-height: 24px;
	text-transform: uppercase;
	color: #343434;
	background-color: #ffffff;
	border: 1px solid #343434;
	border-radius: 0;
	box-sizing: border-box;
	outline: none;
	cursor: text;
	-webkit-transition: background-color 0.18s ease, color 0.18s ease;
	-moz-transition: background-color 0.18s ease, color 0.18s ease;
	-o-transition: background-color 0.18s ease, color 0.18s ease;
	transition: background-color 0.18s ease, color 0.18s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	white-space: nowrap;
	min-width: 100px;
}

/* Speech bubble triangle - outer (border)
   Triangle positioning for 24px input height:
   - Input height: 24px (box-sizing: border-box, so this includes borders)
   - Outer triangle: top = 24px (flush with input bottom edge)
   - Inner triangle: top = 23px (1px higher to create border effect) */
.rma-search-field-wrapper::before {
	content: '';
	position: absolute;
	left: 0;
	top: 24px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px;
	border-color: #343434 transparent transparent #343434;
	pointer-events: none;
}

/* Speech bubble triangle - inner (fill) */
.rma-search-field-wrapper::after {
	content: '';
	position: absolute;
	left: 1px;
	top: 22px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px;
	border-color: #ffffff transparent transparent #ffffff;
	-webkit-transition: border-color 0.18s ease;
	-moz-transition: border-color 0.18s ease;
	-o-transition: border-color 0.18s ease;
	transition: border-color 0.18s ease;
	pointer-events: none;
}

/* Hover effect - scale 1.1 from center (applied to wrapper so triangle scales too) */
@media (pointer: fine) {
	.rma-search-field-wrapper:hover {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
}

/* Focus state - black background, white text (higher specificity to override theme styles) */
.rma-search-field-wrapper input.rma-search-input:focus,
.rma-search-field-wrapper input.rma-search-input:focus-visible {
	background-color: #343434;
	color: #ffffff;
	outline: none;
}

/* Focus state - inner triangle becomes black */
.rma-search-field-wrapper:focus-within::after {
	border-color: #343434 transparent transparent #343434;
}

.rma-search-input::placeholder {
	color: #343434;
	text-transform: uppercase;
	opacity: 1;
}

.rma-search-field-wrapper input.rma-search-input:focus::placeholder {
	color: #ffffff;
	opacity: 0.7;
}

/* Hide browser's clear button and search decorations */
.rma-search-input::-webkit-search-cancel-button,
.rma-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}


/* Overlay - covers content area with white background */
.rma-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: transparent;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
	-moz-transition: opacity 0.2s ease, visibility 0.2s ease;
	-o-transition: opacity 0.2s ease, visibility 0.2s ease;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.rma-search-overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.rma-search-overlay[aria-hidden="true"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.rma-search-overlay[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Overlay Content - matches content width aligned with theme layout
   Uses --rma-header-height CSS variable (set dynamically by theme JS)
   with 20px gap below header */
.rma-search-overlay-content {
	position: relative;
	width: 100%;
	max-width: var(--rma-content-width, 100%);
	min-height: calc(100vh - var(--rma-header-height, 150px) - 20px);
	margin-top: calc(var(--rma-header-height, 150px) + 20px);
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
	background-color: var(--wp--preset--color--rma-white, #ffffff);
}

/* Results Container */
.rma-search-results {
	width: 100%;
}

/* Loading State */
.rma-search-results.is-loading {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 100px;
}

.rma-search-loading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--rma-gray-b, #747474);
	font-family: var(--wp--preset--font-family--nudica-mono-regular, monospace);
	font-size: 12px;
	text-transform: uppercase;
}

.rma-search-loading-spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--rma-gray-d, #aeaeae);
	border-top-color: var(--wp--preset--color--rma-black, #343434);
	border-radius: 50%;
	-webkit-animation: rma-search-spin 0.8s linear infinite;
	-moz-animation: rma-search-spin 0.8s linear infinite;
	-o-animation: rma-search-spin 0.8s linear infinite;
	animation: rma-search-spin 0.8s linear infinite;
}

@-webkit-keyframes rma-search-spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes rma-search-spin {
	to {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-o-keyframes rma-search-spin {
	to {
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rma-search-spin {
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* No Results */
.rma-search-no-results {
	padding: 2rem 0;
	color: var(--wp--preset--color--rma-gray-b, #747474);
	font-family: var(--wp--preset--font-family--nudica-mono-regular, monospace);
	font-size: 14px;
}

/* Results List */
.rma-search-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Result Item - One line per result */
.rma-search-result-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 0;
	/* margin-bottom is set dynamically via inline CSS */
}

.rma-search-result-item:last-child {
	margin-bottom: 0;
}

/* Result Thumbnail */
.rma-search-result-thumbnail {
	flex-shrink: 0;
	width: var(--rma-search-thumbnail-width, 320px);
	height: auto;
	overflow: hidden;
	background-color: var(--wp--preset--color--rma-gray-d, #aeaeae);
}

.rma-search-result-thumbnail a {
	display: block;
	line-height: 0;
}

.rma-search-result-thumbnail img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	-webkit-transition: filter 0.3s ease, opacity 0.3s ease;
	-moz-transition: filter 0.3s ease, opacity 0.3s ease;
	-o-transition: filter 0.3s ease, opacity 0.3s ease;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Hover effect - grayscale + overexposure (same as homepage) */
.rma-search-result-thumbnail a:hover img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.7;
}

/* Video thumbnail styles */
.rma-search-result-thumbnail video {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	-webkit-transition: filter 0.3s ease, opacity 0.3s ease;
	-moz-transition: filter 0.3s ease, opacity 0.3s ease;
	-o-transition: filter 0.3s ease, opacity 0.3s ease;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Hover effect for video */
.rma-search-result-thumbnail a:hover video {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.7;
}

/* Result Content */
.rma-search-result-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.5rem 0;
}

/* Result Meta (Content Type) */
.rma-search-result-meta {
	font-family: var(--wp--preset--font-family--nudica-mono-regular, monospace);
	font-size: 11px;
	text-transform: uppercase;
	color: var(--wp--preset--color--rma-gray-b, #747474);
	letter-spacing: 0.025em;
	margin: 0;
}

/* Result Title */
.rma-search-result-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--nudica-mono-light, monospace);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
}

.rma-search-result-title a {
	color: var(--wp--preset--color--rma-gray-a, #545454);
	text-decoration: none;
	-webkit-transition: color 0.2s ease;
	-moz-transition: color 0.2s ease;
	-o-transition: color 0.2s ease;
	transition: color 0.2s ease;
}

.rma-search-result-title a:hover {
	color: var(--wp--preset--color--rma-black, #343434);
}

/* Parent Project info for media items */
.rma-search-result-parent {
	font-family: var(--wp--preset--font-family--nudica-mono-regular, monospace);
	font-size: 10px;
	color: var(--wp--preset--color--rma-gray-c, #949494);
	margin: 0;
}

/* Result type badge */
.rma-search-result-type {
	display: inline-block;
	font-family: var(--wp--preset--font-family--nudica-mono-regular, monospace);
	font-size: 9px;
	text-transform: uppercase;
	color: var(--wp--preset--color--rma-gray-c, #949494);
	letter-spacing: 0.05em;
}

/* ==========================================================================
   Responsive Thumbnails - aligned with theme breakpoints from responsive.css

   Backend setting (--rma-search-thumbnail-max) defines the maximum thumbnail
   width for large screens (≥1200px). On smaller screens, thumbnails scale
   down proportionally to maintain a balanced layout.

   Scaling ratios (relative to backend setting):
   - < 576px:   full width (mobile column layout)
   - ≥ 576px:   55% of max
   - ≥ 768px:   70% of max
   - ≥ 992px:   85% of max
   - ≥ 1200px:  100% of max (backend value)
   ========================================================================== */

/* Base (Mobile First) - < 576px: full width thumbnails in column layout */
:root {
	--rma-search-thumbnail-max: 320px; /* Fallback, overridden by backend */
	--rma-search-thumbnail-width: 100%;
}

/* Small - >= 576px: 55% of max width */
@media (min-width: 576px) {
	:root {
		--rma-search-thumbnail-width: calc(var(--rma-search-thumbnail-max) * 0.55);
	}
}

/* Medium - >= 768px: 70% of max width */
@media (min-width: 768px) {
	:root {
		--rma-search-thumbnail-width: calc(var(--rma-search-thumbnail-max) * 0.70);
	}
}

/* Large - >= 992px: 85% of max width */
@media (min-width: 992px) {
	:root {
		--rma-search-thumbnail-width: calc(var(--rma-search-thumbnail-max) * 0.85);
	}
}

/* Extra Large and above - >= 1200px: full max width from backend setting */
@media (min-width: 1200px) {
	:root {
		--rma-search-thumbnail-width: var(--rma-search-thumbnail-max);
	}
}

/* Mobile adjustments (max-width queries) */

/* Tablet and below - <= 768px: Smaller search input */
@media (max-width: 768px) {
	.rma-search-container {
		padding-bottom: 6px;
	}

	/* Overlay position uses dynamic header height + 20px gap */
	.rma-search-overlay-content {
		padding: 20px 30px;
	}

	.rma-search-input {
		height: 22px;
		min-width: 90px;
		padding: 0 7px;
		font-size: 11px;
		line-height: 22px;
	}

	/* Triangle positioning for 22px input height:
	   - Input height: 22px (includes 1px border top+bottom = 20px inner + 2px border)
	   - Outer triangle (::before): top = 22px (flush with input bottom edge)
	   - Inner triangle (::after): top = 21px (1px higher to create border effect) */
	.rma-search-field-wrapper::before {
		top: 23px;
		border-width: 3px;
	}

	.rma-search-field-wrapper::after {
		top: 21px;
		border-width: 3px;
	}
}

/* Mobile only - < 576px: Column layout with full-width thumbnails */
@media (max-width: 575px) {
	/* Overlay position uses dynamic header height + 20px gap */
	.rma-search-overlay-content {
		padding: 15px 30px;
	}

	.rma-search-result-item {
		flex-direction: column;
		gap: 10px;
	}

	.rma-search-result-thumbnail {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
}

.rma-search-result-title a:focus-visible {
	outline: 2px solid #343434;
	outline-offset: 2px;
}

/* Prevent body scroll when overlay is open */
body.rma-search-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
}

/* Preserve scroll position - applied via JavaScript */
html.rma-search-open {
	overflow: hidden;
}