/* InnerG Search element — inline form + modal overlay. */

.innerg-search-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.innerg-search-input {
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var( --border );
	background: transparent;
	color: var( --foreground );
	min-width: 0;
}

.innerg-search-input::placeholder {
	color: var( --muted-foreground );
}

.innerg-search-submit,
.innerg-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: none;
	border: none;
	color: var( --foreground );
	cursor: pointer;
	flex: 0 0 auto;
}

/* Icon-button treatment (rounded hover fill) — matches the tactile feel of
   the other header utility controls (Language Switcher, nav toggle) rather
   than a bare unstyled icon. */
.innerg-search-toggle {
	border-radius: 9999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.innerg-search-toggle:hover {
	background-color: var( --secondary );
	color: var( --accent );
}

/* Sized inline (style="width:...;height:...") from the Customizer's icon
   size setting, see Search_Element::icon_markup() — this just makes an
   <img> icon behave the same as an <svg> one inside that fixed box. */
.innerg-search-icon {
	display: inline-flex;
}

.innerg-search-icon svg,
.innerg-search-icon__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.innerg-search--inline .innerg-search-form {
	flex-wrap: nowrap;
}

/* Grouped with the utility cluster (Buttons/Language), separated from it
   by a thin divider, rather than sitting unspaced against whatever the
   zone's previous element happens to be. */
.innerg-header-zone--right .innerg-search--modal {
	margin-inline-start: 0.5rem;
	padding-inline-start: 0.875rem;
	border-inline-start: 1px solid var( --border );
}

/* ---------- Modal: a full-width bar that slides down from directly under
   the header (not a centred, viewport-dimming dialog) — closer to the
   "spotlight search" pattern of most enterprise/product headers. Pinned to
   --header-height (the header's own real height, see Header_Renderer::
   header_style()) so it always sits flush beneath it regardless of the
   configured header height. ---------- */

.innerg-search-modal {
	position: fixed;
	left: 0;
	right: 0;
	top: var( --header-height, 64px );
	bottom: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}

.innerg-search-modal.is-open {
	visibility: visible;
	pointer-events: auto;
}

.innerg-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var( --innerg-dark, #000 ) 40%, transparent );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.innerg-search-modal.is-open .innerg-search-modal__backdrop {
	opacity: 1;
}

.innerg-search-modal__panel {
	position: relative;
	background: var( --background );
	border-bottom: 1px solid var( --border );
	box-shadow: 0 24px 48px -16px rgba( 0, 0, 0, 0.2 );
	padding: 2rem 1.5rem;
	transform: translateY( -100% );
	opacity: 0;
	transition: transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.25s ease;
}

.innerg-search-modal.is-open .innerg-search-modal__panel {
	transform: translateY( 0 );
	opacity: 1;
}

.innerg-search-modal__panel .innerg-search-form {
	width: 100%;
	max-width: 40rem; /* the bar itself is full-width; the input row stays a comfortable reading width, centred within it */
	margin-inline: auto;
	gap: 1rem;
}

.innerg-search-modal__panel .innerg-search-input {
	flex: 1 1 auto;
	font-size: 1.125rem;
	padding-block: 0.75rem;
	padding-inline: 0;
	border: none;
	border-bottom: 1px solid var( --border );
	border-radius: 0;
	transition: border-color 0.2s ease;
}

.innerg-search-modal__panel .innerg-search-input:focus {
	outline: none;
	border-bottom-color: var( --accent );
}

.innerg-search-modal__panel .innerg-search-submit {
	color: var( --muted-foreground );
}

.innerg-search-modal__panel .innerg-search-submit:hover {
	color: var( --accent );
}

@media ( prefers-reduced-motion: reduce ) {
	.innerg-search-modal__backdrop,
	.innerg-search-modal__panel {
		transition: none;
	}
}