/*
 * PRIME Event Registration widget styles.
 * Brand palette: --prime-gold #C9AB4C · --prime-blue #003366
 * --prime-warm-white #FFFCFB · --prime-gray #1B1D1E · --prime-deep-ink #0C0C0E
 *
 * Layout: full-bleed dark hero, then 2-col about + sticky form on light.
 */

.prime-event-registration {
	--prime-gold: #C9AB4C;
	--prime-blue: #003366;
	--prime-warm-white: #FFFCFB;
	--prime-yellow: #FFBF00;
	--prime-gray: #1B1D1E;
	--prime-deep-ink: #0C0C0E;
	font-family: 'Montserrat', sans-serif;
	color: var(--prime-gray);
}

/*
 * Edge-to-edge break-out. Elementor drops the widget inside a
 * constrained column (theme content-width = 1440px). The hero
 * needs to hit the viewport edges regardless. `calc(50% - 50vw)`
 * on the margin pulls the element back to the viewport edge
 * without negative absolute positioning (which would misalign
 * in the Elementor editor preview).
 */
.prime-event-registration .prime-event-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	box-sizing: border-box;
}

/* ── Hero ── */
/*
 * Background image resolution — the widget's `hero_image` control
 * feeds --prime-event-hero-image as an inline style. When empty,
 * we fall back to the ASEAN Summit stock photo shipped with the
 * theme (Davao aerial coastal cityscape). A dark gradient overlay
 * keeps the light hero text readable regardless of which image is
 * showing through.
 */
.prime-event-hero {
	--prime-event-hero-default: url( '../images/asean-summit-hero.png' );
	position: relative;
	background: var(--prime-deep-ink);
	/*
	 * Two-layer overlay: a soft top-to-bottom fade for global text
	 * legibility (barely there at top, moderate at bottom where the
	 * meta chips sit) + a left-heavy horizontal wash that keeps the
	 * text side readable while letting the sky on the right breathe
	 * through. Together they preserve the photograph's mood — no
	 * more "everything looks black".
	 */
	background-image:
		/* Text-side wash — deep at the left where the eyebrow / title
		   sit, tapering to near-transparent on the right so the sky
		   and towers stay readable as a photograph. */
		linear-gradient(  90deg, rgba( 12, 12, 14, 0.78 ) 0%, rgba( 12, 12, 14, 0.55 ) 35%, rgba( 12, 12, 14, 0.20 ) 70%, rgba( 12, 12, 14, 0.05 ) 100% ),
		/* Bottom-weighted vertical fade — protects the meta chips + stats
		   from bright sky spill, while letting the top breathe. */
		linear-gradient( 180deg, rgba( 12, 12, 14, 0.08 ) 0%, rgba( 12, 12, 14, 0.45 ) 100% ),
		var(--prime-event-hero-image, var(--prime-event-hero-default));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Top padding clears the fixed site header on desktop — the header is
	   ~90px tall, so 140px leaves ~50px of breathing room under it. The
	   success state gets an additional shift (see below) because its short
	   content otherwise floated too close to the menu bar. */
	padding: 140px 24px 72px;
	overflow: hidden;
}
.prime-event-hero::before,
.prime-event-hero::after {
	content: '';
	position: absolute;
	pointer-events: none;
	opacity: 0.28;
}
/* subtle geometric line motif — ASEAN connectivity metaphor */
.prime-event-hero::before {
	top: 0; right: -80px;
	width: 320px; height: 320px;
	background: radial-gradient( circle at 50% 50%, transparent 40%, rgba( 201, 171, 76, 0.16 ) 40.5%, transparent 41% ),
		radial-gradient( circle at 50% 50%, transparent 65%, rgba( 201, 171, 76, 0.12 ) 65.5%, transparent 66% ),
		radial-gradient( circle at 50% 50%, transparent 90%, rgba( 201, 171, 76, 0.08 ) 90.5%, transparent 91% );
}
.prime-event-hero::after {
	bottom: -60px; left: -60px;
	width: 220px; height: 220px;
	background: linear-gradient( 45deg, transparent 48%, rgba( 201, 171, 76, 0.14 ) 48.5%, rgba( 201, 171, 76, 0.14 ) 51%, transparent 51.5% );
	background-size: 22px 22px;
}

.prime-event-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(360px, 460px);
	gap: 64px;
	align-items: start;
}
.prime-event-hero__lead {
	min-width: 0;
}
/*
 * Container-prefixed + !important to defeat the theme's global
 * .elementor-page span / a color rules — otherwise the eyebrow
 * renders as muted body-color against the dark hero and reads
 * as nearly-invisible faint text.
 */
.prime-event-registration .prime-event-hero__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 500 !important;
	letter-spacing: 0.35em !important;
	text-transform: uppercase;
	color: var(--prime-gold) !important;
}
/*
 * Override the theme's .elementor-page h1 defaults (which force
 * italic + blue via !important on Elementor pages). Colour needs
 * !important on the light-on-dark hero or the first line inherits
 * PRIME Blue and vanishes into the dark background.
 */
.prime-event-registration .prime-event-hero__title {
	margin: 20px 0 0;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-weight: 300 !important;
	color: var(--prime-warm-white) !important;
	font-size: clamp( 34px, 3.8vw, 62px );
	line-height: 1.06 !important;
	letter-spacing: -0.02em !important;
}
.prime-event-registration .prime-event-hero__title-line1 {
	display: block;
	font-style: normal !important;
	color: var(--prime-warm-white) !important;
}
.prime-event-registration .prime-event-hero__title-line2 {
	display: block;
	font-style: italic !important;
	color: var(--prime-gold) !important;
}
.prime-event-hero__rule {
	margin: 24px 0 20px;
	width: 60px; height: 2px;
	background: var(--prime-gold);
}
.prime-event-hero__lede {
	max-width: 640px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba( 255, 252, 251, 0.85 );
}
.prime-event-hero__lede p { margin: 0; }
.prime-event-hero__lede p + p { margin-top: 14px; }
/*
 * Meta list — Date / Venue / Booth side-by-side, wrap onto a
 * second row when there isn't enough horizontal space (e.g. narrow
 * viewports or long venue values). overflow-wrap on the value lets
 * Bebas Neue text break at spaces so an outsized string never
 * bleeds past the left column into the form card next to it.
 */
.prime-event-hero__meta {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	max-width: 720px;
}
.prime-event-hero__meta li {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.prime-event-hero__meta-label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: rgba( 255, 252, 251, 0.55 );
}
.prime-event-hero__meta-value {
	margin-top: 4px;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 20px;
	color: var(--prime-warm-white);
	letter-spacing: 0.05em;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.prime-event-hero__stats {
	margin: 40px 0 0;
	display: flex;
	gap: 48px;
	border-top: 1px solid rgba( 201, 171, 76, 0.35 );
	padding-top: 24px;
	max-width: 640px;
}
.prime-event-hero__stat { display: flex; flex-direction: column; }
.prime-event-hero__stat-value {
	font-family: 'Bebas Neue', sans-serif;
	font-size: clamp( 32px, 4vw, 48px );
	color: var(--prime-gold);
	letter-spacing: 0.08em;
	line-height: 1;
}
.prime-event-hero__stat-label {
	margin-top: 6px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--prime-warm-white);
}

/* Form card — lives inside the hero on the right */
.prime-event-form-card {
	position: relative;
	/* Anchor scroll from the hero CTA lands here — offset a bit so
	   the card's top rule + eyebrow are comfortably below any sticky
	   site header. */
	scroll-margin-top: 96px;
}
/* When the card renders the success state (JS sets data-state="success"
   on __inner after a successful submit), the short content otherwise sits
   too close to the fixed site header. Push it down ~40px so the gold rule
   and success mark get proper breathing room. Form state is unaffected. */
.prime-event-form-card:has(.prime-event-form-card__inner[data-state="success"]) {
	margin-top: 40px;
}
.prime-event-form-card__inner {
	background: var(--prime-warm-white);
	border: 1px solid rgba( 27, 29, 30, 0.12 );
	box-shadow: 0 24px 60px rgba( 12, 12, 14, 0.08 );
	padding: 32px 28px;
}
.prime-event-form-card__inner::before {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	background: var(--prime-gold);
	margin-bottom: 20px;
}
.prime-event-form-card__eyebrow {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--prime-blue);
}
.prime-event-registration .prime-event-form-card__heading {
	margin: 8px 0 8px;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-weight: 300 !important;
	font-size: 32px;
	line-height: 1.15 !important;
	color: var(--prime-gray) !important;
}
.prime-event-form-card__intro {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba( 27, 29, 30, 0.72 );
}

/* Form fields */
.prime-event-form__row { display: block; }
.prime-event-form__row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.prime-event-form__field { margin-bottom: 14px; }
.prime-event-form__field label {
	display: block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--prime-gray);
	margin-bottom: 6px;
}
.prime-event-form__field label span {
	color: var(--prime-gold);
	margin-left: 2px;
}
.prime-event-form__field input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid rgba( 27, 29, 30, 0.18 );
	background: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: var(--prime-gray);
	border-radius: 0;
	transition: border-color 0.15s ease;
}
.prime-event-form__field input::placeholder {
	color: rgba( 27, 29, 30, 0.32 );
}
.prime-event-form__field input:focus {
	outline: 0;
	border-color: var(--prime-blue);
	box-shadow: inset 0 -2px 0 var(--prime-gold);
}
/*
 * Only show the invalid-red state AFTER the user has interacted with
 * the field — :user-invalid only matches once the input has been
 * blurred or the form has been submitted. Prevents every empty
 * required field from lighting up red on page load.
 */
.prime-event-form__field input:user-invalid {
	border-color: #d63638;
}

.prime-event-form__phone {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 0;
	align-items: stretch;
}
.prime-event-form__phone-prefix {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 27, 29, 30, 0.06 );
	border: 1px solid rgba( 27, 29, 30, 0.18 );
	border-right: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--prime-gray);
}

.prime-event-form__field--turnstile {
	margin: 6px 0 12px;
}

.prime-event-form__error {
	color: #d63638;
	font-size: 13px;
	line-height: 1.5;
	margin: 6px 0;
	min-height: 0;
}
.prime-event-form__error:not(:empty) {
	padding: 8px 10px;
	background: rgba( 214, 54, 56, 0.06 );
	border-left: 3px solid #d63638;
	margin: 10px 0;
}

/* Consent checkbox — visually paired with the submit block. Native
   input hidden; a custom square handles the check state so we can
   keep the sharp-edge PRIME visual language. */
.prime-event-form__consent {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	margin: 18px 0 6px;
	padding: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba( 27, 29, 30, 0.78 );
	cursor: pointer;
	border-top: 1px solid rgba( 27, 29, 30, 0.08 );
}
.prime-event-form__consent-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.prime-event-form__consent-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background: #fff;
	border: 1.5px solid rgba( 27, 29, 30, 0.32 );
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	color: transparent;
}
.prime-event-form__consent-box svg { width: 12px; height: 12px; }
.prime-event-form__consent-input:checked + .prime-event-form__consent-box {
	background: var(--prime-blue);
	border-color: var(--prime-blue);
	color: var(--prime-warm-white);
}
.prime-event-form__consent-input:focus-visible + .prime-event-form__consent-box {
	outline: 2px solid var(--prime-gold);
	outline-offset: 2px;
}
.prime-event-form__consent-input:user-invalid + .prime-event-form__consent-box {
	border-color: #d63638;
}
.prime-event-form__consent-text a {
	color: var(--prime-blue);
	text-decoration: none;
	border-bottom: 1px solid rgba( 0, 51, 102, 0.35 );
}
.prime-event-form__consent-text a:hover {
	border-bottom-color: var(--prime-blue);
}

.prime-event-form__submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-top: 14px;
	padding: 15px 18px;
	background: var(--prime-blue);
	color: var(--prime-warm-white);
	border: 0;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background 0.15s ease;
}
.prime-event-form__submit::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 3px;
	background: var(--prime-gold);
	transform: scaleX( 0.15 );
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
}
.prime-event-form__submit:hover { background: #002244; }
.prime-event-form__submit:hover::after { transform: scaleX( 1 ); }
.prime-event-form__submit[disabled] { opacity: 0.55; cursor: wait; }
.prime-event-form__submit-arrow { font-size: 16px; }

.prime-event-form__pdf-warning {
	margin: 14px 0 0;
	padding: 10px 12px;
	background: rgba( 214, 54, 56, 0.06 );
	border-left: 3px solid #d63638;
	font-size: 12px;
	color: #663333;
	line-height: 1.5;
}

/* ── Success state ──
 * Editorial-quiet confirmation. Small gold check mark, Cormorant
 * italic headline with a short gold rule, muted sub-copy, then a
 * PRIME Blue primary CTA for the download (matches the hero + form
 * submit button — visual consistency across the whole flow).
 * "Gold reserved for accents" applies: only the check mark + rule
 * are gold; the download button is Blue solid, not gold-on-blue.
 */
.prime-event-form-card__success-state {
	text-align: center;
	padding: 4px 4px 8px;
}
.prime-event-form-card__success-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 4px auto 20px;
	color: var(--prime-gold);
	border: 1.5px solid var(--prime-gold);
	background: rgba( 201, 171, 76, 0.06 );
}
.prime-event-form-card__success-mark svg { width: 22px; height: 22px; }
.prime-event-registration .prime-event-form-card__success-heading {
	margin: 0 0 12px;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-weight: 300 !important;
	font-size: 36px;
	line-height: 1.15 !important;
	color: var(--prime-gray) !important;
	letter-spacing: -0.01em !important;
}
.prime-event-form-card__success-heading::after {
	content: '';
	display: block;
	width: 32px;
	height: 2px;
	margin: 14px auto 0;
	background: var(--prime-gold);
}
.prime-event-form-card__success-sub {
	margin: 0 auto 28px;
	max-width: 300px;
	font-size: 14px;
	line-height: 1.65;
	color: rgba( 27, 29, 30, 0.72 );
}
.prime-event-registration .prime-event-form-card__download {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 16px 22px;
	background: var(--prime-blue) !important;
	color: var(--prime-warm-white) !important;
	text-decoration: none !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px;
	font-weight: 500 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase;
	transition: background 0.18s ease, transform 0.18s ease;
}
.prime-event-registration .prime-event-form-card__download:hover {
	background: #002244 !important;
	color: var(--prime-warm-white) !important;
	transform: translateY( -1px );
}
.prime-event-form-card__download-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--prime-gold);
	transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
}
.prime-event-form-card__download-arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}
.prime-event-registration .prime-event-form-card__download:hover .prime-event-form-card__download-arrow {
	transform: translateY( 2px );
}

.prime-event-form-card__resend {
	margin: 22px auto 0;
	max-width: 300px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba( 27, 29, 30, 0.58 );
	letter-spacing: 0.02em;
}
.prime-event-form-card__resend span {
	display: block;
	margin-top: 2px;
	color: var(--prime-blue);
	font-weight: 500;
}

/* Mobile stacking */
@media ( max-width: 900px ) {
	/*
	 * Top padding sized to clear the fixed site header on mobile.
	 * The PRIME logo strip + burger row runs taller on Android
	 * (Samsung S8+/S9+/S10) than iOS Safari — measured at ~92px
	 * with the logo scaled up. 140px gives the eyebrow a comfortable
	 * ~48px gap under the fixed header instead of tucking under it.
	 */
	.prime-event-hero { padding: 140px 22px 56px; }

	/* Hero stacks single-column below the 900px breakpoint so the
	   lead copy sits above the form card. */
	.prime-event-hero__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.prime-event-form__row--two { grid-template-columns: 1fr; gap: 0; }

	/*
	 * Mobile hero overlay: replace the desktop left-heavy horizontal
	 * wash (designed for a two-column layout with text on the left)
	 * with a uniform vertical fade that darkens the full width. Text
	 * spans the entire viewport now, so we can't rely on empty right-
	 * side space to breathe.
	 */
	.prime-event-hero {
		background-image:
			linear-gradient( 180deg, rgba( 12, 12, 14, 0.55 ) 0%, rgba( 12, 12, 14, 0.85 ) 100% ),
			var(--prime-event-hero-image, var(--prime-event-hero-default));
	}

	/* Eyebrow — shrink + tighten tracking so the full label fits one
	   line on 375px viewports without getting clipped by ancestor
	   overflow. text-wrap: balance keeps a graceful two-line fallback
	   on the narrowest devices. Container-scoped + !important so
	   the color survives against the theme's global cascade. */
	.prime-event-registration .prime-event-hero__eyebrow {
		font-size: 10px;
		letter-spacing: 0.22em !important;
		line-height: 1.5;
		text-wrap: balance;
		color: var(--prime-gold) !important;
	}

	/* Hero title — smaller ceiling so "Regional Intelligence for the"
	   fits on TWO lines with "the" tucked onto the same line as
	   "for", instead of orphaning by itself. text-wrap: balance
	   evens the line breaks across browsers that support it. */
	.prime-event-registration .prime-event-hero__title {
		font-size: clamp( 32px, 8.5vw, 52px );
		line-height: 1.08 !important;
		text-wrap: balance;
	}
	.prime-event-hero__lede {
		font-size: 15px;
		line-height: 1.65;
	}

	/* Meta list — tighter Bebas so date + venue don't eat half
	   the fold on 375px viewports. */
	.prime-event-hero__meta {
		gap: 14px;
		margin-top: 24px;
	}
	.prime-event-hero__meta-value { font-size: 17px; }

	/* Stats section — center on mobile so the two data points read
	   as a balanced badge pair rather than a left-flushed loose end. */
	.prime-event-hero__stats {
		margin-top: 32px;
		gap: 40px;
		padding-top: 22px;
		justify-content: center;
		max-width: none;
		text-align: center;
	}
	.prime-event-hero__stat { align-items: center; }
	.prime-event-hero__stat-value { font-size: 40px; }
}

/* Extra-narrow (≤ 420px) — pull title in a bit more so descenders
   never poke past the safe area on iPhone SE / older devices, and
   stack stats vertically so long labels ("SUBMARKETS COVERED") don't
   overflow the viewport on Samsung S8+ (360w). */
@media ( max-width: 420px ) {
	.prime-event-hero { padding: 132px 20px 48px; }
	.prime-event-registration .prime-event-hero__eyebrow {
		font-size: 9.5px;
		letter-spacing: 0.18em !important;
		color: var(--prime-gold) !important;
	}
	.prime-event-registration .prime-event-hero__title {
		font-size: clamp( 30px, 9.5vw, 42px );
	}
	.prime-event-hero__meta { gap: 14px 20px; }
	.prime-event-hero__meta-value { font-size: 16px; }
	/* Stats stack vertically at ≤420px — side-by-side blows out the
	   viewport once the label carries 0.35em tracking. */
	.prime-event-hero__stats {
		flex-direction: column;
		gap: 20px;
		align-items: center;
	}
	.prime-event-hero__stat-value { font-size: 36px; }
	.prime-event-hero__stat-label {
		letter-spacing: 0.28em;
		white-space: nowrap;
	}
}