/*
 * Order status surface (T-006, ADR-027 / ADR-028) — the failed-payment,
 * unverified-guest and paid/on-hold states of WooCommerce's own
 * `order-confirmation.html` BLOCK template, overridden by this theme's
 * `templates/order-confirmation.html`. `checkout/thankyou.php` is inert
 * on this block theme (see that template's own header comment and
 * ADR-027) — do not build against it.
 *
 * Enqueued exactly like cart-drawer.css: `array( 'goldvion' )` as its
 * dependency in functions.php, so it reliably loads after style.css and
 * wins any equal-specificity collision, same guarantee that file already
 * relies on (see state/repos/goldvion.md's cascade-order note).
 *
 * `.gv-order-status` is a `className` the template's block comment puts
 * on WooCommerce's own `woocommerce/order-confirmation-status` block.
 * Confirmed against the rendered bytes (order #58 and #60, :8091,
 * 2026-09-11): WooCommerce repeats that className on BOTH divs the block
 * can emit — the status div (h1 + corrected copy + the retry/My-account
 * actions row, failed-and-verified state) and, for an unverified guest,
 * a second sibling div carrying WooCommerce's own notice paragraph and
 * the verify-email form — so one selector reaches every branch without a
 * second className anywhere in the template.
 *
 * No JS anywhere on this surface (ADR-019 baseline) — every state below
 * is exactly what the response body already contains with scripting off.
 *
 * H-007 note: there is nothing in the client's export to cite here.
 * Checkout.jsx's placeOrder only succeeds — no failure state, no retry
 * affordance exists in the prototype at all (confirmed at board cut,
 * restated in T-003's contract). This surface is designed in her token
 * vocabulary — theme.json slugs throughout, with the sole exception of
 * `font-weight: 500`, which is not a new value: style.css already uses
 * it on /cart/ and /checkout/ (T-017 finding 11 corrected the file's
 * earlier, inaccurate "no new values" claim).
 */

/* ---------------------------------------------------------------------
 * The band itself.
 *
 * Applies uniformly to every status the block can render, failed or not
 * — the block gives no status-specific class or data attribute to hook a
 * CSS-only branch on (checked against all three states this task drove:
 * failed/verified, failed/unverified, on-hold), so a single consistent
 * "status card" treatment is the only thing a stylesheet alone can do.
 * That reads fine on a success, not just a failure: a soft, contained
 * band around "what happened with this order" either way.
 * ------------------------------------------------------------------- */
.gv-order-status {
	background-color: var(--wp--preset--color--blush);
	border-radius: var(--wp--custom--radius--card);
	/* T-017 finding 9: theme.json declares only `gutter`/`section` with
	   `defaultSpacingSizes: false` — these five --20/40/50/60/70 references
	   resolve today only because WordPress still emits its default scale
	   despite that flag. Fallbacks (core's own default scale, read off
	   `:8091`'s global-styles-inline-css) mean they degrade to the right
	   value rather than to `0` if that ever changes, matching the idiom
	   cart-drawer.css already uses for `--gutter`. */
	padding: var(--wp--preset--spacing--60, 2.25rem) var(--wp--preset--spacing--50, 1.5rem);
	/* B-055: this rule carries both a width (inherited from `alignwide`)
	   and padding — box-sizing must be declared here, per rule, never
	   globally (state/repos/goldvion.md, "There is no box-sizing:
	   border-box reset"). */
	box-sizing: border-box;
}

/* The failed-and-verified div and the unverified-notice div land as
   adjacent siblings when WooCommerce renders the unverified branch (both
   carry .gv-order-status — see header comment). Two full bands stacked
   with the theme's own block-gap between them is a legible, deliberate
   choice: the first band is the corrected "your payment didn't go
   through" statement, the second is WooCommerce's own request to verify.
   Keeping them visually distinct rather than merged avoids implying the
   unverified notice is part of the failure copy above it. */

.gv-order-status h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--section-title);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--charcoal);
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
}

/* The explanatory paragraph WooCommerce renders through the two filtered
   strings (title/text) — always the direct child of the band, on every
   branch that has one. */
.gv-order-status > p {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--preset--color--charcoal);
	margin: 0;
	max-width: 40em;
}

.gv-order-status > p + p {
	margin-top: var(--wp--preset--spacing--gutter);
}

/* ---------------------------------------------------------------------
 * The retry action row — failed-and-verified only. WooCommerce renders
 * "Try again" unconditionally and appends "My account" only when
 * `wc_get_page_permalink( 'myaccount' )` resolves (Status.php, `failed`
 * branch) — NOT an invariant, whatever an earlier version of this comment
 * said. On-hold/processing renders no actions row at all, so this never
 * runs on a state that doesn't have one.
 * ------------------------------------------------------------------- */
.gv-order-status .wc-block-order-confirmation-status__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--gutter);
	margin: var(--wp--preset--spacing--gutter) 0 0;
}

/* "My account" sends a customer this store never gives an account to, to
   a login form, next to the one button that would actually help her
   (T-003's contract §1.4.4). This store is guest-checkout only, so it is
   removed on the surface rather than left half-useful. CSS-only, no JS —
   but the removal must target the SECOND anchor specifically, not
   whichever anchor happens to render last: `wc_get_page_permalink(
   'myaccount' )` is exactly the condition a guest-only store's own
   cleanup (unsetting or trashing the My Account page) makes falsey, and
   `a:last-child` on a falsey permalink would then hide "Try again"
   itself — the only retry affordance on this surface, with scripting
   off. `a + a` only ever matches a second anchor when one exists, so it
   is inert whenever "My account" is already gone (T-017 finding 1). */
.gv-order-status .wc-block-order-confirmation-status__actions a + a {
	display: none;
}

/* "Try again" is the primary action and gets the surface's own gold
   token rather than the site's default charcoal button — the default
   reads as this store's ordinary call to action; this moment calls for
   something gentler. */
.gv-order-status .wc-block-order-confirmation-status__actions .button {
	display: inline-flex;
	align-items: center;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--charcoal);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	text-decoration: none;
	padding: 0.75rem 2rem; /* T-017 finding 11: rem, matching cart-drawer.css/style.css's convention rather than this file's own px */
	box-sizing: border-box;
}

.gv-order-status .wc-block-order-confirmation-status__actions .button:hover,
.gv-order-status .wc-block-order-confirmation-status__actions .button:focus-visible {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--ivory);
}

.gv-order-status .wc-block-order-confirmation-status__actions .button:focus-visible {
	outline: 2px solid var(--wp--preset--color--charcoal);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * The unverified-guest notice + verify-email form.
 *
 * KNOWN, ACCEPTED RESIDUAL (B-056, filed against T-005) — not this
 * file's to fix: past the (now 2-hour, ADR-028) grace period, WooCommerce
 * renders its own "Great news! Your order has been received..." sentence
 * from `render_confirmation_notice()`, which is not run through any
 * filter and cannot be corrected from a theme (confirmed by T-005 against
 * WooCommerce's own source). That sentence sits directly beneath this
 * task's corrected failure copy and contradicts it. Hiding it outright
 * would also remove the only sentence explaining why a verify-email form
 * has just appeared, and rewriting it is a PHP/gettext change outside a
 * template-and-CSS task's scope. Left exactly as WooCommerce renders it,
 * de-emphasised (smaller, muted) relative to this task's own corrected
 * copy above it, so a reader's eye lands on the true statement first.
 *
 * `Status.php::render()` puts BOTH classes on the SAME sibling div —
 * `<div class="wc-block-order-confirmation-status-description gv-order-
 * status">`, confirmed in the bytes — never nested one inside the other.
 * A descendant combinator here matches nothing, so the de-emphasis never
 * ran (T-017 finding 2); the compound selector below (no space between
 * the two classes) is the fix.
 * ------------------------------------------------------------------- */
.gv-order-status.wc-block-order-confirmation-status-description > p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.gv-order-status .woocommerce-verify-email {
	margin: var(--wp--preset--spacing--gutter) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--40, 1rem);
}

.gv-order-status .woocommerce-verify-email .form-row {
	margin: 0;
	flex: 1 1 16rem;
	min-width: 0;
	box-sizing: border-box;
}

/* T-017 finding 5: `body.woocommerce-checkout p.form-row > label`
   (T-004, style.css) is (0,2,3) — equal class count to a plain
   `.gv-order-status .woocommerce-verify-email label` (0,2,1), so the
   element-count tiebreak went to T-004 and this label kept the low-
   contrast-on-blush treatment fixed below for the input beside it.
   `label[for="verify-email"]` adds an attribute selector — WooCommerce's
   own markup, not invented — making this (0,3,1), which wins on the
   class/attribute count itself before the tiebreak is ever reached. */
.gv-order-status .woocommerce-verify-email label[for="verify-email"] {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--charcoal);
	margin-bottom: var(--wp--preset--spacing--20, 0.44rem);
}

/* T-017 finding 6: `render_verification_form()` puts the failed-
   verification notice INSIDE this flex form as its first child, so
   without a basis it becomes a flex item sharing the row with the email
   field and submit button instead of sitting above them. Covers both
   template families WooCommerce can resolve here — the classic
   `.woocommerce-error` list and the block `.wc-block-components-notice-
   banner` — since which one renders was never pinned down for this
   specific notice. */
.gv-order-status .woocommerce-verify-email .woocommerce-error,
.gv-order-status .woocommerce-verify-email .wc-block-components-notice-banner {
	flex-basis: 100%;
}

/* The site-wide input style (style.css `body.woocommerce-checkout
   p.form-row .input-text`, T-002-contract.md §7.2) is a 1px underline in
   gold at 20% opacity — legible on ivory/band, invisible on this card's
   blush background (measured: computed border-bottom-color unchanged
   from the site default, contrast well under WCAG AA against blush).
   It also outranks a same-class-count override here on the specificity
   tiebreak (two elements, `body`+`p`, against none) — WooCommerce
   reuses the checkout body class on this page, confirmed in the bytes,
   so `body.woocommerce-checkout` matches order-received too. `#verify-
   email` is this field's own id (WooCommerce's own markup) and needs no
   class-count arms race. Scoped under `.gv-order-status` (T-017 finding
   10) so the id rule cannot reach past this surface even though the
   stylesheet is enqueued site-wide. */
.gv-order-status #verify-email {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--charcoal ) 30%, transparent );
	border-radius: var(--wp--custom--radius--base);
	padding: 0.625rem 0.75rem;
	background-color: var(--wp--preset--color--ivory);
}

.gv-order-status #verify-email:focus-visible {
	outline: 2px solid var(--wp--preset--color--charcoal);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--charcoal);
}

.gv-order-status .woocommerce-verify-email .button {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
 * The order-number eyebrow, in the summary list this template also
 * marks with a className (`gv-order-status-summary`) — "Order #:" is
 * always the summary block's first item (confirmed in the bytes), so no
 * new markup is needed to single it out.
 * ------------------------------------------------------------------- */
.gv-order-status-summary .wc-block-order-confirmation-summary-list-item:first-child {
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.22em; /* T-017 finding 11: the export's tracking-eyebrow value (index.css:79), not a third invented figure */
	color: var(--wp--preset--color--muted);
}

@media (min-width: 768px) {
	.gv-order-status {
		padding: var(--wp--preset--spacing--70, 3.38rem) var(--wp--preset--spacing--60, 2.25rem);
	}
}