/**
 * Front-end + editor-canvas styles for the `next-io/search` block.
 *
 * Plain CSS — no Sass, no build step. Design intent: inherit the active
 * theme's (Ollie / Ollie child) colors, typography and button treatment
 * by default via WordPress's global style custom properties, while
 * staying fully overridable through the block's own Color/Typography/
 * Spacing controls and any custom CSS class added in "Advanced ▸
 * Additional CSS class(es)".
 *
 * Clicking the icon opens a full-page, centered search overlay — the
 * same treatment on desktop and mobile — rather than tucking the field
 * into the header. It never touches the main navigation.
 */

.next-io-search {
	/* Local tokens with theme-aware fallbacks. Themes/child themes (or a
	   custom CSS class on this block) can override any of these instead
	   of fighting the selectors below. */
	--next-io-search-color: var( --wp--preset--color--contrast, currentColor );
	--next-io-search-bg: var( --wp--preset--color--base, #fff );
	--next-io-search-accent: var( --wp--preset--color--primary, var( --wp--preset--color--vivid-cyan-blue, #4f46e5 ) );
	--next-io-search-accent-2: var( --wp--preset--color--secondary, var( --wp--preset--color--vivid-purple, #ec4899 ) );
	--next-io-search-border-radius: var( --wp--custom--button--border-radius, 4px );
	--next-io-search-transition: 180ms ease;

	position: relative;
	display: inline-flex;
	align-items: center;
	color: var( --next-io-search-color );
	font-family: inherit;
}

.next-io-search *,
.next-io-search *::before,
.next-io-search *::after {
	box-sizing: border-box;
}

.next-io-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	border-radius: var( --next-io-search-border-radius );
	transition: opacity var( --next-io-search-transition ), background var( --next-io-search-transition ),
		transform var( --next-io-search-transition );
}

.next-io-search__toggle:hover,
.next-io-search__toggle:focus-visible {
	opacity: 0.75;
}

.next-io-search__toggle:hover {
	transform: scale( 1.08 );
}

.next-io-search__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.next-io-search--icon-small .next-io-search__toggle {
	width: 2em;
	height: 2em;
}

.next-io-search--icon-large .next-io-search__toggle {
	width: 3em;
	height: 3em;
}

.next-io-search__icon {
	width: 60%;
	height: 60%;
}

.next-io-search.is-open .next-io-search__toggle {
	visibility: hidden;
	pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* Full-page overlay: same treatment on every screen size. The panel IS  */
/* the backdrop (fixed, edge-to-edge); the dialog inside it is the       */
/* centered card. The main navigation is never touched.                 */
/* -------------------------------------------------------------------- */

.next-io-search__panel {
	display: none;
}

.next-io-search.is-open .next-io-search__panel {
	display: flex;
	/* Anchored to the top of the overlay (not vertically centered) on
	   purpose: centering with `align-items: center` recalculates every
	   time the dialog's height changes — i.e. on every keystroke, as the
	   suggestions list grows/shrinks — which visibly "bounces" the whole
	   box up and down. Anchoring the top edge means it only ever grows
	   downward, so it stays put while you type. */
	align-items: flex-start;
	justify-content: center;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 10vh 1.25rem 6vh;
	overflow-y: auto;
	background: rgba( 10, 10, 15, 0.6 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	z-index: 100000;
	animation: next-io-search-backdrop-in 200ms ease;
}

.next-io-search__dialog {
	position: relative;
	width: 100%;
	max-width: 40rem;
	/* Horizontal centering only — see the note on .next-io-search__panel
	   above for why this isn't vertically auto-centered too. */
	margin: 0 auto;
	background: var( --next-io-search-bg );
	color: var( --next-io-search-color );
	border-radius: calc( var( --next-io-search-border-radius ) * 3 );
	box-shadow: 0 25px 70px -15px rgba( 0, 0, 0, 0.45 ), 0 0 0 1px rgba( 0, 0, 0, 0.06 );
	padding: 1.75rem;
	overflow: hidden;
	animation: next-io-search-dialog-in 240ms cubic-bezier( 0.2, 0.8, 0.2, 1 );
}

/* A small "fancy" signature touch — a gradient hairline built from the
   theme's own accent colors, with graceful fallbacks if a theme defines
   neither. Purely decorative; remove by overriding `content: none` on
   this pseudo-element from a custom CSS class if you'd rather not have it. */
.next-io-search__dialog::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient( 90deg, var( --next-io-search-accent ), var( --next-io-search-accent-2 ) );
}

@keyframes next-io-search-backdrop-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes next-io-search-dialog-in {
	from {
		opacity: 0;
		transform: translateY( 12px ) scale( 0.96 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.next-io-search__panel,
	.next-io-search__dialog {
		animation: none;
	}
}

.next-io-search__field {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	padding: 0.5em 0.6em;
	border: none;
	border-radius: var( --next-io-search-border-radius );
	background: var( --next-io-search-bg );
	transition: box-shadow var( --next-io-search-transition );
}

.next-io-search__field:focus-within {
	/* A soft focus ring instead of a permanent border/outline. */
	box-shadow: 0 0 0 4px rgba( 79, 70, 229, 0.18 ); /* fallback for browsers without color-mix() */
	box-shadow: 0 0 0 4px color-mix( in srgb, var( --next-io-search-accent ) 18%, transparent );
}

.next-io-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var( --wp--preset--font-size--medium, 1.125rem );
	line-height: 1.4;
	padding: 0.5em 0.3em;
	order: 1;
}

.next-io-search__input:focus {
	outline: none;
}

.next-io-search__input::-webkit-search-cancel-button {
	display: none;
}

/* Both icon buttons are wrapped and classed exactly like WordPress core's
   own Buttons block (`wp-block-button` > `wp-block-button__link
   wp-element-button`). That's deliberate: it means these two buttons pick
   up padding, background, text color, border-radius and font straight
   from the site's global "Buttons" style (Site Editor ▸ Styles ▸ Blocks ▸
   Buttons), so they always look exactly like any other button on the
   site (e.g. a "Next Page" Buttons block) — with zero color values
   hardcoded in this plugin and nothing to keep in sync by hand. */
.next-io-search__submit-wrap,
.next-io-search__close-wrap {
	display: inline-flex;
	flex: 0 0 auto;
	/* Buttons-block instances normally carry the theme's block spacing;
	   reset it here since this one lives inline inside the search field. */
	margin: 0;
}

.next-io-search__submit-wrap {
	order: 2;
}

.next-io-search__close-wrap {
	order: 3;
}

.next-io-search__submit,
.next-io-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	cursor: pointer;
	transition: opacity var( --next-io-search-transition );
}

.next-io-search__submit:hover,
.next-io-search__close:hover {
	opacity: 0.85;
}

.next-io-search__submit:focus-visible,
.next-io-search__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.next-io-search__submit .next-io-search__icon,
.next-io-search__close .next-io-search__icon {
	width: 1em;
	height: 1em;
}

/* -------------------------------------------------------------------- */
/* Suggestions dropdown                                                  */
/* -------------------------------------------------------------------- */

.next-io-search__suggestions {
	margin-top: 0.75rem;
	max-height: 55vh;
	overflow-y: auto;
	border-radius: var( --next-io-search-border-radius );
	/* Explicit, theme-independent text color for the suggestions list so
	   results stay legible on the dialog's own background regardless of
	   the page's color scheme. */
	color: #222222;
}

.next-io-search__suggestion-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.next-io-search__suggestion {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	padding: 0.7em 0.8em;
	border-radius: var( --next-io-search-border-radius );
	cursor: pointer;
	transition: background var( --next-io-search-transition );
}

.next-io-search__suggestion:hover,
.next-io-search__suggestion.is-active {
	background: rgba( 79, 70, 229, 0.1 ); /* fallback for browsers without color-mix() */
	background: color-mix( in srgb, var( --next-io-search-accent ) 10%, transparent );
}

.next-io-search__suggestion-type {
	flex: 0 0 auto;
	font-size: var( --wp--preset--font-size--small, 0.8rem );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #222222;
	opacity: 0.6;
}

.next-io-search__suggestion-title {
	flex: 1 1 auto;
	font-weight: 600;
	color: #222222;
}

.next-io-search__suggestion-excerpt {
	flex: 1 0 100%;
	font-size: var( --wp--preset--font-size--small, 0.85rem );
	color: #222222;
	opacity: 0.75;
}

.next-io-search__status {
	margin: 0;
	padding: 0.6em 0.75em;
	font-size: var( --wp--preset--font-size--small, 0.85rem );
	color: #222222;
	opacity: 0.75;
}

.next-io-search__status--error {
	color: var( --wp--preset--color--vivid-red, #cc1818 );
	opacity: 1;
}

/* -------------------------------------------------------------------- */
/* Body scroll lock while the overlay is open (desktop + mobile alike)   */
/* -------------------------------------------------------------------- */

body.next-io-search-is-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* Responsive: the overlay always covers the full viewport on every     */
/* edge; only the dialog's own sizing/padding adapts to smaller screens.*/
/* -------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.next-io-search.is-open .next-io-search__panel {
		padding: 8vh 1rem 4vh;
	}

	.next-io-search__dialog {
		padding: 1.25rem;
		border-radius: calc( var( --next-io-search-border-radius ) * 2 );
	}

	.next-io-search__input {
		font-size: 1rem; /* avoid iOS zoom-on-focus */
	}

	.next-io-search__suggestions {
		max-height: calc( 100vh - 14rem );
	}
}