/**
 * Submit Idea — the "we brought your answers back" notice.
 *
 * Why this is a standalone stylesheet rather than SCSS or inline CSS:
 *
 *  - The SCSS build cannot run: node-sass 7 only ships binaries for Node 14/16
 *    on x64, and the toolchain here is arm64 / Node 22. An edit in sass/ would
 *    never reach the site.
 *  - Running `npm run compile:css` would be destructive: style.css carries
 *    hand-written rules after its sourcemap comment that do not exist in sass/,
 *    and a rebuild would silently delete them.
 *  - wp_add_inline_style() on the `ideas4ears-style` handle is a trap: the
 *    theme's existing $custom_css in functions.php leaves its
 *    `@media (max-width: 575.98px)` block unclosed, and WordPress concatenates
 *    every inline style for a handle into one <style> tag — so anything added
 *    there is swallowed by that media query and only applies below 575px.
 *
 * Spacing is owned entirely by this file, not by Bootstrap utility classes on
 * the element. `.mt-3` has the same specificity as `.ife-progress-notice` and
 * Bootstrap is loaded from a CDN under a different handle, so load order is not
 * guaranteed — the two would fight and the margin would not animate reliably.
 */

.ife-progress-notice {
	margin-top: 1.5rem;
	margin-bottom: 1.75rem;
	opacity: 1;
	overflow: hidden;
	transition:
		opacity 0.4s ease,
		max-height 0.4s ease,
		margin-top 0.4s ease,
		margin-bottom 0.4s ease;
}

/* Applied by JS on the visitor's first real interaction. */
.ife-progress-notice.is-leaving {
	opacity: 0;
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.ife-progress-notice p {
	margin: 0;
}

.ife-progress-notice p + p {
	margin-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
	.ife-progress-notice {
		transition: none;
	}
}

/*
 * On phones, the notice and the rocket take turns.
 *
 * .main-submit-idea carries two decorative pseudo-elements at z-index 1, and
 * the rocket (::before, in style.css) has no `top`, so it sits at the top of
 * the panel — exactly where this notice goes. It never mattered before,
 * because nothing used to be rendered there. On a narrow screen the panel is
 * barely wider than the artwork, so the rocket lands right across the words.
 *
 * So while the notice is up, the rocket steps aside; once the visitor starts
 * filling the form in and the notice leaves, it comes back. 40em is the
 * breakpoint the rocket itself already uses in style.css — the tier where it
 * is pulled in to left: -100px.
 *
 * Keyed off :not(.is-leaving) rather than off [hidden] alone so the rocket
 * fades back in WHILE the notice is fading out, instead of popping in after
 * it. The ::before already has a 300ms all transition, so opacity animates
 * for free.
 *
 * Deliberately opacity and not display:none — display cannot be transitioned,
 * and the rocket would snap.
 *
 * :has() is doing real work here: the pseudo-element belongs to an ANCESTOR of
 * the notice, so no sibling or descendant selector can reach it. A browser too
 * old for :has() drops the rule and simply behaves the way the page does
 * today, which is the right way to degrade.
 */
@media (max-width: 40em) {
	section.hero-submit-idea .main-submit-idea:has(.ife-progress-notice:not([hidden]):not(.is-leaving))::before {
		opacity: 0;
	}
}