/*
 * "Email to me" dialog.
 *
 * A native <dialog>, so the panel is the dialog element itself and ::backdrop is
 * the scrim. Nothing here positions or traps anything — the browser centres the
 * top layer and contains focus. What is left is the surface.
 *
 * Lengths are literal rem rather than --wp--preset--spacing--* tokens, for the
 * reason recorded against the other blocks: those presets carry WordPress's own
 * generated scale, not theme.json's declared one, so spacing--50 arrives as
 * 1.5rem where the file reads 2.5rem.
 */

/*
 * `hidden` is how the script swaps the form for the confirmation, and the UA rule
 * behind it — [hidden] { display: none } — loses to any author rule that sets
 * display, at any specificity, because the author sheet wins the cascade origin
 * outright. `.cobell-email-resource__done` is display:flex, so the confirmation
 * was painted under the form from the moment the dialog opened: "Sent." and
 * "Done" on screen before an address had been typed.
 *
 * Scoped to the dialog and left as a catch-all rather than named per part, so a
 * part that grows a display later cannot reintroduce it. The failure is silent —
 * the attribute is set, the step is "hidden" in the DOM, and only the rendered box
 * disagrees.
 */
.cobell-email-resource [ hidden ] {
	display: none;
}

.cobell-email-resource {
	width: min( 32rem, calc( 100vw - 2rem ) );
	max-height: min( 92svh, 44rem );
	padding: 0;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-radius: 1rem;
	background-color: var( --wp--preset--color--cream );
	color: var( --wp--preset--color--forest );
	box-shadow: 0 25px 50px -12px color-mix( in srgb, #14201a 30%, transparent );
	overflow: hidden;
}

/* The page behind is blurred as well as dimmed, which is what makes the panel
   read as lifted rather than as a card pasted over a screenshot. */
.cobell-email-resource::backdrop {
	background-color: color-mix( in srgb, #14201a 55%, transparent );
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
}

/*
 * Arrival and departure.
 *
 * The reference lifts and fades the panel in over 300ms — `translate-y-2` to 0,
 * opacity 0 to 1, ease-out — and then unmounts it on close, so it has an entrance
 * and no exit. This carries the entrance verbatim and gives the exit the same
 * curve reversed, which is the one place it does more than the reference: a modal
 * that fades in and vanishes reads as a glitch on the way out.
 *
 * Three things make it work on a native <dialog>, which is display:none whenever
 * it is closed:
 *
 * - @starting-style supplies the from-state. Without it the dialog's first styles
 *   in the top layer are already the open ones and there is nothing to interpolate
 *   from, which is why an opacity pair alone animates neither end.
 * - `display` and `overlay` transition with allow-discrete, so the box stays
 *   painted and stays in the top layer for the length of the close instead of
 *   being cut at frame one. `overlay` is the top-layer half and is the one that is
 *   easy to leave out — without it the scrim and the panel disappear together the
 *   moment close() runs and only the empty box fades.
 * - `translate` rather than a transform, matching the reference: Tailwind v4 moves
 *   this with the translate property, and it leaves transform free.
 *
 * The curve is written out rather than given as `ease-out`, because the two are
 * not the same thing. CSS's `ease-out` keyword is cubic-bezier(0.25, 0.1, 0.25,
 * 1); Tailwind's `ease-out` utility — which is what the reference writes and what
 * live runs — is cubic-bezier(0, 0, 0.2, 1), a harder initial move and a longer
 * settle. Measured off live's own panel, not read off the reference.
 *
 * Where either feature is missing the dialog appears and disappears instantly,
 * which is where it stood before this. The states sit outside the reduced-motion
 * query and only the transitions inside it, so reduced motion is the same instant
 * swap rather than a panel stranded at opacity 0.
 */
.cobell-email-resource {
	opacity: 0;
	translate: 0 0.5rem;
}

.cobell-email-resource[ open ] {
	opacity: 1;
	translate: 0 0;
}

/* A closing dialog is still in the top layer, so for those 300ms it covers the
   page. It must not take a click on the way out. */
.cobell-email-resource:not( [ open ] ) {
	pointer-events: none;
}

@media ( prefers-reduced-motion: no-preference ) {
	.cobell-email-resource {
		transition:
			opacity 300ms cubic-bezier( 0, 0, 0.2, 1 ),
			translate 300ms cubic-bezier( 0, 0, 0.2, 1 ),
			display 300ms allow-discrete,
			overlay 300ms allow-discrete;
	}

	.cobell-email-resource::backdrop {
		opacity: 0;
		transition:
			opacity 300ms cubic-bezier( 0, 0, 0.2, 1 ),
			display 300ms allow-discrete,
			overlay 300ms allow-discrete;
	}

	.cobell-email-resource[ open ]::backdrop {
		opacity: 1;
	}

	@starting-style {
		.cobell-email-resource[ open ] {
			opacity: 0;
			translate: 0 0.5rem;
		}

		.cobell-email-resource[ open ]::backdrop {
			opacity: 0;
		}
	}
}

.cobell-email-resource__panel {
	position: relative;
	padding: 1.5rem 1.5rem 2rem;
}

@media ( min-width: 34rem ) {
	.cobell-email-resource__panel {
		padding: 2rem 2.5rem 2.5rem;
	}
}

/*
 * Eyebrow with a rule that runs to the close button rather than a pair of short
 * flanking hairlines — this is the one place the site draws it that way, because
 * the row has to end somewhere and the close control is where.
 */
.cobell-email-resource__eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 3rem 0 0;
	color: var( --wp--preset--color--clay );
	font-size: var( --wp--custom--eyebrow-size );
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
}

.cobell-email-resource__rule {
	flex: 1;
	height: 1px;
	background-color: color-mix( in srgb, var( --wp--preset--color--clay ) 40%, transparent );
}

/*
 * 44px square, which is the minimum target 2.5.8 asks for — the glyph inside is
 * 20px and sizing the button to the glyph is the usual way this control ends up
 * failing it.
 */
.cobell-email-resource__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.cobell-email-resource__close:hover,
.cobell-email-resource__close:focus-visible {
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 10%, transparent );
	color: var( --wp--preset--color--forest );
}

@media ( min-width: 34rem ) {
	.cobell-email-resource__close {
		top: 1.25rem;
		right: 1.5rem;
	}
}

.cobell-email-resource__title {
	margin: 1rem 0 0;
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.5rem, 3vw, 2rem );
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.cobell-email-resource__lede {
	margin: 0.75rem 0 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* The resource's own name, so the reader can see which of the three they pressed
   without closing the dialog to check. */
.cobell-email-resource__resource {
	color: var( --wp--preset--color--forest );
	font-weight: 500;
}

.cobell-email-resource .gform_wrapper .gfield_label {
	display: block;
	margin-top: 1.5rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/*
 * 16px, not smaller. iOS Safari zooms the viewport on focus for anything under
 * 16px, and a modal that shifts the page underneath it as the reader taps into
 * the field is the worst place for that to happen.
 */
.cobell-email-resource .gform_wrapper input[type="email"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 2.75rem;
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 25%, transparent );
	border-radius: 0.375rem;
	background-color: var( --wp--preset--color--cream );
	color: var( --wp--preset--color--forest );
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 150ms ease;
}

.cobell-email-resource .gform_wrapper input[type="email"]::placeholder {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 40%, transparent );
}

.cobell-email-resource .gform_wrapper input[type="email"]:focus-visible {
	border-color: color-mix( in srgb, var( --wp--preset--color--forest ) 50%, transparent );
}

.cobell-email-resource .gform_wrapper input[type="email"][aria-invalid="true"] {
	border-color: var( --wp--preset--color--ember );
}

/*
 * Ember, not terracotta. This is 13px body text carrying the only information
 * the reader needs to recover from the error, so 1.4.3 applies at 4.5:1 and
 * there is no live-fidelity argument for spending it here — ember measures
 * 6.26:1 on cream and is the same hue family.
 */
.cobell-email-resource .gform_wrapper .gfield_validation_message,
.cobell-email-resource .gform_wrapper .validation_message {
	margin: 0.75rem 0 0;
	color: var( --wp--preset--color--ember );
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.45;
}

.cobell-email-resource__submit {
	margin-top: 1.5rem;
}

/*
 * Gravity Forms' submit, rebuilt as a <button> by cobell_gravity_submit_button()
 * — which is registered globally, so this form gets the treatment the contact
 * form does and neither needs its own filter. It arrives carrying `btn
 * btn--forest`, and the dialog sits on cream, so only the spacing is set here.
 */
.cobell-email-resource .gform_wrapper .gform_footer {
	margin: 1.5rem 0 0;
	padding: 0;
}

.cobell-email-resource .gform_wrapper .gform_footer .btn[disabled] {
	opacity: 0.7;
	cursor: progress;
}

/*
 * Gravity Forms' own stylesheet is off site-wide (cobell_disable_gravity_css),
 * so the wrapper brings no layout of its own and these three are what stop the
 * field list inheriting list styling from the theme.
 */
.cobell-email-resource .gform_wrapper .gform_fields {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cobell-email-resource .gform_wrapper .gfield {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The honeypot. Gravity Forms renders it as an ordinary field and relies on its
 * own CSS to take it off screen — which is disabled here, so without this the
 * dialog shows a spurious extra text input and the trap becomes a thing readers
 * fill in. Not display:none: some autofill implementations skip those, which is
 * the whole point of the field.
 */
.cobell-email-resource .gform_wrapper .gfield--type-honeypot,
.cobell-email-resource .gform_wrapper .gform_validation_container {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/*
 * The validation summary Gravity Forms prints above the fields. The per-field
 * message below it already says the same sentence, and in a dialog this narrow
 * the pair reads as the error having happened twice.
 */
.cobell-email-resource .gform_wrapper .gform_submission_error,
.cobell-email-resource .gform_wrapper .gform_validation_errors {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Hidden from sight and from assistive technology; the server refuses a filled
   value. Not display:none — some autofill implementations skip those, which is
   the whole point of the field. */
.cobell-email-resource__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ── Confirmation ── */

.cobell-email-resource__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 1.5rem;
	text-align: center;
}

.cobell-email-resource__tick {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--forest );
	color: var( --wp--preset--color--cream );
}

/*
 * What sits here is Gravity Forms' confirmation, moved in by email-resource.js — so
 * these rules dress markup an editor writes in the notification editor rather than
 * markup this theme prints. That is why the register is expressed as "the first
 * paragraph and the rest" instead of as two classes: only the first carries a class
 * the form builder wrote, and an editor is free to delete it.
 *
 * GF's own wrapper contributes margins and a max-width of its own; both are cleared
 * so the column below is this file's.
 */
.cobell-email-resource__confirmation,
.cobell-email-resource__confirmation .gform_confirmation_wrapper,
.cobell-email-resource__confirmation .gform_confirmation_message {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	max-width: none;
}

.cobell-email-resource__confirmation p {
	margin: 0.75rem auto 0;
	max-width: 24rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-size: 0.9375rem;
	line-height: 1.6;
}

/*
 * Two classes, not one, and it is the recorded trap rather than caution.
 * `.cobell-email-resource__confirmation p` is (0,1,1) and a lone
 * `.cobell-email-resource__done-title` is (0,1,0) — so the display register would
 * lose its size and its leading to the paragraph rule above, and the confirmation
 * would read as two lines of body copy with nothing in the CSS looking wrong.
 */
.cobell-email-resource__confirmation .cobell-email-resource__done-title,
.cobell-email-resource__confirmation p:first-child {
	margin-top: 1.5rem;
	max-width: none;
	color: inherit;
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.75rem, 3.5vw, 2.25rem );
	line-height: 1.05;
}

/* The tick pops in, and only where motion is welcome. Everything else about the
   confirmation is static, so with reduced motion it simply appears. */
@media ( prefers-reduced-motion: no-preference ) {
	.cobell-email-resource__tick {
		animation: cobell-email-resource-pop 320ms cubic-bezier( 0.34, 1.56, 0.64, 1 );
	}
}

@keyframes cobell-email-resource-pop {
	from {
		transform: scale( 0.7 );
		opacity: 0;
	}

	to {
		transform: scale( 1 );
		opacity: 1;
	}
}

/*
 * A page may need more than one Gravity Forms form — one per Card Grid that picks its
 * own — so the dialog renders a slot each and reveals only the active one.
 *
 * **This rule is load-bearing and its absence is silent.** `[hidden]` is
 * `display: none` from the UA stylesheet, and *any* author rule setting `display` on
 * this element beats it whatever its specificity. An inactive slot left painted is not
 * merely untidy: its inputs stay focusable, so Tab walks into a form the reader cannot
 * see, inside a modal that contains focus. Declaring it here means a later layout rule
 * on the slot cannot open that trap by accident.
 */
.cobell-email-resource__form-slot[hidden] {
	display: none;
}