/**
 * IC Search — front-end styles.
 *
 * Everything is driven by custom properties so a site can retheme this
 * without touching the plugin. Colours inherit from the surrounding page
 * by default rather than imposing a palette.
 */

.ic-search {
	--ic-search-radius: 4px;
	--ic-search-border: rgba( 0, 0, 0, 0.15 );
	--ic-search-panel-bg: #fff;
	--ic-search-panel-fg: #1a1a1a;
	--ic-search-muted: rgba( 0, 0, 0, 0.55 );
	--ic-search-hover: rgba( 0, 0, 0, 0.04 );
	--ic-search-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 );
	--ic-search-max-height: 70vh;
	--ic-search-input-fg: #1a1a1a;
	--ic-search-input-placeholder: rgba( 0, 0, 0, 0.5 );

	position: relative;
	width: 100%;
}

.ic-search__field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ic-search__input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;

	/*
	 * Colour is set explicitly, NOT inherited. These forms normally sit in a
	 * dark header whose text colour is white, while the input's own background
	 * stays light — inheriting there gives white-on-white and an invisible
	 * caret. Override --ic-search-input-fg if the input really is on a dark
	 * background.
	 */
	color: var( --ic-search-input-fg );
}

.ic-search__input::placeholder {
	color: var( --ic-search-input-placeholder );
	opacity: 1; /* Firefox dims placeholders by default. */
}

/* Kill the browser's native clear button so it can't fight our panel. */
.ic-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.ic-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.ic-search__icon {
	display: block;
}

/* ---------- Results panel ---------- */

.ic-search__panel {
	position: absolute;
	z-index: 9999;
	top: calc( 100% + 8px );
	left: 0;
	right: 0;
	max-height: var( --ic-search-max-height );
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var( --ic-search-panel-bg );
	color: var( --ic-search-panel-fg );
	border: 1px solid var( --ic-search-border );
	border-radius: var( --ic-search-radius );
	box-shadow: var( --ic-search-shadow );
	text-align: left;
}

.ic-search__panel[hidden] {
	display: none;
}

.ic-search__group + .ic-search__group {
	border-top: 1px solid var( --ic-search-border );
}

.ic-search__group-title {
	padding: 10px 14px 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ic-search-muted );
}

.ic-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	color: inherit;
	text-decoration: none;
	transition: background-color 120ms ease;
}

.ic-search__item:hover,
.ic-search__item.is-active {
	background: var( --ic-search-hover );
	text-decoration: none;
}

.ic-search__item.is-active {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.ic-search__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 2px;
	background: var( --ic-search-hover );
}

.ic-search__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.ic-search__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

.ic-search__meta {
	font-size: 12px;
	color: var( --ic-search-muted );
}

.ic-search__more {
	display: block;
	padding: 11px 14px;
	border-top: 1px solid var( --ic-search-border );
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: inherit;
	text-decoration: none;
}

.ic-search__more:hover,
.ic-search__more.is-active {
	background: var( --ic-search-hover );
}

.ic-search__empty {
	padding: 16px 14px;
	font-size: 14px;
	color: var( --ic-search-muted );
	text-align: center;
}

/* Only define this if the theme has not — avoids fighting existing styles. */
.ic-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.ic-search__item {
		transition: none;
	}
}