/**
 * Domain Search — theme skin for the GPS Domain Manager plugin widget.
 *
 * The plugin's own frontend.css scopes all of its colors/radius/shadow to
 * CSS custom properties on .gpsdm-root (--gpsdm-primary, --gpsdm-radius,
 * etc). Rather than editing plugin files, we override those custom
 * properties here so the widget matches this theme's neo-brutalist design
 * language (hard offset shadows, violet/gold accents, Space Grotesk).
 * This file is only enqueued on templates that render [gps_domain_search].
 */

.gpsdm-domain-search-section {
	position: relative;
	padding: var( --section-py ) 0;
	background: var( --ink );
	overflow: hidden;
}

.gpsdm-domain-search-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient( circle at 15% 20%, rgba( 124, 58, 237, 0.35 ), transparent 45% ),
		radial-gradient( circle at 85% 80%, rgba( 255, 200, 87, 0.18 ), transparent 45% );
	pointer-events: none;
}

.gpsdm-domain-search-section .container {
	position: relative;
	z-index: 1;
}

.gpsdm-domain-search-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto clamp( 24px, 4vw, 40px );
}

.gpsdm-domain-search-heading .eyebrow {
	display: inline-block;
	font-family: var( --font-display );
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --gold );
	margin-bottom: 10px;
}

.gpsdm-domain-search-heading h2 {
	font-family: var( --font-display );
	font-weight: 800;
	font-size: clamp( 1.6rem, 3.5vw, 2.4rem );
	color: var( --cream );
	margin-bottom: 10px;
}

.gpsdm-domain-search-heading p {
	color: rgba( 251, 248, 243, 0.72 );
	font-size: clamp( 0.95rem, 1.4vw, 1.05rem );
}

.gpsdm-domain-search-section .gpsdm-root {
	max-width: 760px;
	margin: 0 auto;

	/* Re-skin the plugin's own design tokens to match theme brand colors. */
	--gpsdm-primary: var( --violet );
	--gpsdm-primary-dark: #5b21b6;
	--gpsdm-accent: var( --gold );
	--gpsdm-success: var( --mint );
	--gpsdm-danger: var( --coral );
	--gpsdm-warning: var( --gold );
	--gpsdm-bg: var( --cream );
	--gpsdm-surface: #ffffff;
	--gpsdm-border: var( --ink );
	--gpsdm-text: var( --ink );
	--gpsdm-text-muted: var( --grey );
	--gpsdm-radius: var( --radius );
	--gpsdm-radius-sm: var( --radius-sm );
	--gpsdm-shadow: var( --shadow-md );
	--gpsdm-shadow-lg: var( --shadow-lg );
	font-family: var( --font-body );
}

/* Hard, offset "neo-brutalist" border + shadow on the search box itself,
   matching the rest of the theme's card/button treatment. */
.gpsdm-domain-search-section .gpsdm-search-box {
	border: 2px solid var( --ink );
	border-radius: var( --radius );
	box-shadow: var( --shadow-lg );
	background: #ffffff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gpsdm-domain-search-section .gpsdm-search-box:focus-within {
	transform: translate( -2px, -2px );
	box-shadow: 10px 10px 0 var( --violet-light );
}

.gpsdm-domain-search-section .gpsdm-search-hint {
	color: rgba( 251, 248, 243, 0.6 );
	text-align: center;
	margin-top: 12px;
}

.gpsdm-domain-search-section .gpsdm-btn--gradient {
	background: var( --gold );
	background-image: none;
	color: var( --ink );
	font-family: var( --font-display );
	font-weight: 700;
	border: 2px solid var( --ink );
	border-radius: var( --radius-sm );
	box-shadow: var( --shadow-sm );
}

.gpsdm-domain-search-section .gpsdm-btn--gradient:hover {
	transform: translate( -2px, -2px );
	box-shadow: 6px 6px 0 var( --ink );
}

.gpsdm-domain-search-section .gpsdm-result-card {
	border: 2px solid var( --ink );
	border-radius: var( --radius-sm );
	box-shadow: var( --shadow-sm );
	background: #ffffff;
}

@media ( max-width: 640px ) {
	.gpsdm-domain-search-section .gpsdm-root {
		padding: 0 var( --gap );
	}
}