/* =========================================================================
   Header Search Icon — Full Customization (see inc/header-search.php).

   Scoped strictly to the Search Icon button(s) and the new Compact Search
   Box, so nothing else in the Header (branding, Social Links, primary
   menu, account link, header button, menu toggle) is ever affected.

   Icon Size, Box Width/Height and Border Radius are admin-configurable and
   come through as CSS custom properties, auto-emitted by the framework's
   own css-output.php from the css_var keys set on those controls — the
   same mechanism that drives every other live-preview color/size setting
   in the theme. The px fallbacks below match the settings' own defaults,
   so nothing changes visually on a site that has not touched these
   controls yet.
   ========================================================================= */

/* -------------------------------------------------------------------
 * Shared Icon button styling — applies to BOTH the Full-Screen trigger
 * (.gzf-search-trigger, the framework's own button — untouched markup,
 * just an extra class for this shared styling hook) and the Compact
 * trigger (.gzfc-search-compact-trigger, new markup).
 * ------------------------------------------------------------------- */
.gzfc-search-icon-btn {
	width: var( --gzfcs-icon-size, 38px );
	height: var( --gzfcs-icon-size, 38px );
	border-radius: var( --gzfcs-radius, 8px );
	box-sizing: border-box;
}
.gzfc-search-icon-btn .gzf-icon {
	width: 52%;
	height: 52%;
}

/* Icon Style variants (Search Button/Icon Style control). "Plain" is the
   framework's existing untouched look, so it has no rules here. */
body.gzfc-search-icon-style-circle .gzfc-search-icon-btn {
	background: rgba( 255, 255, 255, .06 );
}
body.gzfc-search-icon-style-border .gzfc-search-icon-btn {
	border: 1px solid var( --gzf-color-border, #26262b );
}
body.gzfc-search-icon-style-solid .gzfc-search-icon-btn {
	background: var( --gzf-color-primary, #ff4d1c );
	color: #fff;
}
body.gzfc-search-icon-style-solid .gzfc-search-icon-btn:hover {
	background: var( --gzf-color-primary, #ff4d1c );
	opacity: .9;
}

/* -------------------------------------------------------------------
 * Full-Screen style: only Icon Size/Style/Radius (above) and the shared
 * Box Height/Animation apply — the overlay itself already fills the
 * screen, so Search Box Width/Position do not apply here (see their
 * descriptions in the Customizer).
 * ------------------------------------------------------------------- */
body.gzfc-search-style-fullscreen .gzf-search-field {
	height: var( --gzfcs-box-height, 46px );
}

body.gzfc-search-anim-zoom .gzf-search-overlay {
	transition: opacity var( --gzf-transition ), transform var( --gzf-transition );
	transform: scale( .96 );
}
body.gzfc-search-anim-zoom .gzf-search-overlay.is-open {
	transform: scale( 1 );
}
body.gzfc-search-anim-slide .gzf-search-overlay-inner {
	transition: transform var( --gzf-transition );
	transform: translateY( -24px );
}
body.gzfc-search-anim-slide .gzf-search-overlay.is-open .gzf-search-overlay-inner {
	transform: translateY( 0 );
}

/* -------------------------------------------------------------------
 * Compact Search Box (new markup — template-parts/header-main.php,
 * behaviour in assets/js/header-search.js).
 * ------------------------------------------------------------------- */
.gzfc-search-compact {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.gzfc-search-compact-trigger {
	background: transparent;
	border: none;
	color: var( --gzf-color-text );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var( --gzf-transition );
}
.gzfc-search-compact-trigger:hover {
	background: rgba( 255, 255, 255, .06 );
}

.gzfc-search-compact-box {
	position: absolute;
	top: calc( 100% + 10px );
	width: var( --gzfcs-box-width, 320px );
	background: var( --gzf-color-surface, #141418 );
	border: 1px solid var( --gzf-color-border, #26262b );
	border-radius: var( --gzfcs-radius, 8px );
	padding: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, .35 );
	z-index: 60;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var( --gzf-transition ), transform var( --gzf-transition );
}
.gzfc-search-compact.is-open .gzfc-search-compact-box {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Position / alignment of the box relative to the trigger icon. */
body.gzfc-search-align-right .gzfc-search-compact-box { right: 0; transform-origin: top right; }
body.gzfc-search-align-left .gzfc-search-compact-box { left: 0; transform-origin: top left; }
body.gzfc-search-align-center .gzfc-search-compact-box { left: 50%; transform: translateX( -50% ); transform-origin: top center; }
body.gzfc-search-align-center .gzfc-search-compact.is-open .gzfc-search-compact-box { transform: translateX( -50% ); }

/* Open Animation variants for the Compact box. "Fade" is the default
   opacity transition above and needs no extra rules. */
body.gzfc-search-anim-slide .gzfc-search-compact-box {
	transform: translateY( -8px );
}
body.gzfc-search-anim-slide.gzfc-search-align-center .gzfc-search-compact-box {
	transform: translate( -50%, -8px );
}
body.gzfc-search-anim-slide .gzfc-search-compact.is-open .gzfc-search-compact-box {
	transform: translateY( 0 );
}
body.gzfc-search-anim-slide.gzfc-search-align-center .gzfc-search-compact.is-open .gzfc-search-compact-box {
	transform: translateX( -50% );
}
body.gzfc-search-anim-zoom .gzfc-search-compact-box {
	transform: scale( .92 );
}
body.gzfc-search-anim-zoom.gzfc-search-align-center .gzfc-search-compact-box {
	transform: translateX( -50% ) scale( .92 );
}
body.gzfc-search-anim-zoom .gzfc-search-compact.is-open .gzfc-search-compact-box {
	transform: scale( 1 );
}
body.gzfc-search-anim-zoom.gzfc-search-align-center .gzfc-search-compact.is-open .gzfc-search-compact-box {
	transform: translateX( -50% ) scale( 1 );
}

.gzfc-search-compact-box .gzf-search-form {
	flex: 1;
	display: flex;
	align-items: center;
	border-bottom: none;
}
.gzfc-search-compact-box .gzf-search-field {
	height: var( --gzfcs-box-height, 46px );
	font-size: .95rem;
	padding: 0 8px;
}
.gzfc-search-compact-box .gzf-search-submit {
	flex-shrink: 0;
}
.gzfc-search-compact-close {
	background: transparent;
	border: none;
	color: var( --gzf-color-muted, #98979f );
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
}
.gzfc-search-compact-close:hover {
	background: rgba( 255, 255, 255, .06 );
	color: var( --gzf-color-text );
}
.gzfc-search-compact-close .gzf-icon {
	width: 60%;
	height: 60%;
}

@media ( prefers-reduced-motion: reduce ) {
	.gzfc-search-compact-box,
	.gzf-search-overlay,
	.gzf-search-overlay-inner {
		transition: none !important;
	}
	.gzfc-search-compact-box { animation: none !important; }
}

/* =========================================================================
   Compact Search Box — Animated Multi-Color Border (Appearance > Customize
   > Search > "Animated Border"). Off by default; only applied while
   body.gzfc-search-border-anim is present (added in
   gzfc_header_search_body_classes(), inc/header-search.php). Scoped
   strictly to ".gzfc-search-compact-box" inside that body class, so the
   Full-Screen overlay, the Hero Section, the Feature Slider, and every
   other element on the site are unaffected.

   Same technique as the Feature Slider's own border (assets/css/
   child.css, "Feature Slider — Animated Multi-Color Border"): a real
   border is added to the box, then painted with two background layers via
   background-clip — a plain fill in the padding-box (matching the box's
   own --gzf-color-surface background so the swap is invisible) and a
   rotating conic-gradient of the 4 colors in the border-box. This is safe
   here because the Compact Search Box only ever has a solid background
   color, never a background IMAGE — unlike the Hero Section, which needed
   a different (pseudo-element) technique to avoid overwriting its own
   background image.
   ========================================================================= */
@property --gzfcs-border-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

body.gzfc-search-border-anim .gzfc-search-compact-box {
	--gzfcs-border-speed: 6s;
	--gzfcs-border-thickness: 2px;
	--gzfcs-border-c1: #22c55e;
	--gzfcs-border-c2: #eab308;
	--gzfcs-border-c3: #3b82f6;
	--gzfcs-border-c4: #ef4444;
	border: var( --gzfcs-border-thickness ) solid transparent;
	background-image:
		linear-gradient( var( --gzf-color-surface, #141418 ), var( --gzf-color-surface, #141418 ) ),
		conic-gradient(
			from var( --gzfcs-border-angle ),
			var( --gzfcs-border-c1 ) 0%,
			var( --gzfcs-border-c2 ) 25%,
			var( --gzfcs-border-c3 ) 50%,
			var( --gzfcs-border-c4 ) 75%,
			var( --gzfcs-border-c1 ) 100%
		);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	animation: gzfcs-border-spin var( --gzfcs-border-speed, 6s ) linear infinite;
}
@keyframes gzfcs-border-spin {
	to { --gzfcs-border-angle: 360deg; }
}
@media ( prefers-reduced-motion: reduce ) {
	body.gzfc-search-border-anim .gzfc-search-compact-box { animation: none !important; }
}

/* -------------------------------------------------------------------
 * Mobile Responsive Behavior.
 * ------------------------------------------------------------------- */
@media ( max-width: 782px ) {
	/* The Compact box itself stays usable at narrow widths; when "Force
	   Full-Screen Search on Mobile" is selected, assets/js/header-search.js
	   opens the framework's existing Full-Screen overlay instead of this
	   box on click, so the box's `.is-open` state is simply never reached
	   on mobile in that configuration — no extra CSS override needed. */
	.gzfc-search-compact-box {
		width: min( var( --gzfcs-box-width, 320px ), calc( 100vw - 24px ) );
		max-width: calc( 100vw - 24px );
	}

	/* WHERE the box opens. On a phone the Search Icon sits in the middle
	   of the Header's button cluster, so a box anchored to the icon (right-
	   or centre-aligned, up to 320px wide) ran off the LEFT edge of the
	   screen. assets/js/header-search.js measures the icon when the box
	   opens and sets left/width inline so it always spans the screen with a
	   12px margin. Here the transforms used for Position = Center and for
	   the Slide / Zoom Open Animations are switched off (they would fight
	   that inline positioning) and the same two animations are re-created
	   with the independent `translate` / `scale` properties, so the
	   Search Animation setting keeps working on phones too. */
	body .gzfc-search-compact-box,
	body .gzfc-search-compact.is-open .gzfc-search-compact-box {
		transform: none !important;
		transition: opacity var( --gzf-transition ), translate var( --gzf-transition ), scale var( --gzf-transition );
	}
	body.gzfc-search-anim-slide .gzfc-search-compact-box { translate: 0 -8px; }
	body.gzfc-search-anim-slide .gzfc-search-compact.is-open .gzfc-search-compact-box { translate: 0 0; }
	body.gzfc-search-anim-zoom .gzfc-search-compact-box { scale: .94; }
	body.gzfc-search-anim-zoom .gzfc-search-compact.is-open .gzfc-search-compact-box { scale: 1; }

	/* iOS Safari zooms the whole page in when a text field under 16px gets
	   focus, and does not zoom back out. 16px stops that. */
	.gzfc-search-compact-box .gzf-search-field,
	.gzfc-search-compact-box input[type="search"] {
		font-size: 16px;
	}
}

/* =========================================================================
   Always Show Search Box in Header (Appearance > Customize > Search >
   "Always Show Search Box in Header"). Only applies while
   body.gzfc-search-always-visible is present (see
   gzfc_header_search_body_classes(), inc/header-search.php).

   The Compact Search Box is taken OUT of its click-to-open dropdown mode
   and laid into the Header row itself, permanently visible, right beside
   the Search Icon: [ search box ][ icon ]. Nothing about the Header's own
   markup changes; only these Search elements are restyled.

   Desktop / large tablets only (min-width: 783px). Below that the Header
   has no spare room for a permanent box, so none of these rules apply and
   the normal click-to-open dropdown above keeps working — the same
   782px breakpoint the rest of the theme uses.

   !important is used on position / visibility / opacity / transform on
   purpose: the dropdown mode above sets those per Position (left / centre
   / right) and Open Animation (fade / slide / zoom) with several stacked
   selectors, and an always-visible box must ignore every one of them.
   ========================================================================= */
@media ( min-width: 783px ) {
	body.gzfc-search-always-visible .gzfc-search-compact {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	body.gzfc-search-always-visible .gzfc-search-compact .gzfc-search-compact-box {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		transition: none;
		order: 1;
		flex: 0 1 auto;
		width: var( --gzfcs-box-width, 320px );
		max-width: 32vw; /* keeps the Header row from overflowing on 783-1100px screens */
		min-width: 0;
		padding: 0 6px 0 10px;
		gap: 0;
		box-shadow: none;
	}
	body.gzfc-search-always-visible .gzfc-search-compact .gzfc-search-compact-box:focus-within {
		box-shadow: 0 0 0 2px rgba( 255, 255, 255, .10 );
	}

	/* The Search Icon becomes the box's submit button (assets/js/header-
	   search.js), so the form's own submit button and the dropdown's Close
	   (X) button are redundant here — and would show a second icon. */
	body.gzfc-search-always-visible .gzfc-search-compact-box .gzf-search-submit,
	body.gzfc-search-always-visible .gzfc-search-compact-box button[type="submit"],
	body.gzfc-search-always-visible .gzfc-search-compact-box input[type="submit"],
	body.gzfc-search-always-visible .gzfc-search-compact-close {
		display: none !important;
	}

	body.gzfc-search-always-visible .gzfc-search-compact-box .gzf-search-form {
		min-width: 0;
		margin: 0;
	}
	body.gzfc-search-always-visible .gzfc-search-compact-box .gzf-search-field {
		width: 100%;
		min-width: 0;
		padding: 0;
	}

	body.gzfc-search-always-visible .gzfc-search-compact .gzfc-search-compact-trigger {
		order: 2;
		flex-shrink: 0;
	}
}
/* Just above the mobile breakpoint (small tablets in portrait) the Header
   is at its most crowded: a narrower box keeps everything on one row. */
@media ( min-width: 783px ) and ( max-width: 900px ) {
	body.gzfc-search-always-visible .gzfc-search-compact .gzfc-search-compact-box {
		max-width: 22vw;
	}
}