/**
 * Ordering page styles — matches how_to_order_rcc_final_alignment/code.html.
 * Loaded only on the Ordering page (see functions.php).
 *
 * The actual page content (hero, procurement steps, REVCON ordering info)
 * lives in the Page's own post content (see patterns/ordering-content.php)
 * so it stays editable through the normal WordPress editor — this
 * stylesheet only styles the classNames those blocks carry.
 *
 * Note on block-gap: only the direct children of components arranged with
 * CSS flex/grid get `margin: 0` here — surgical and scoped to each
 * component, matching the approach corrected on the Pricing/Home pages,
 * so nothing here can accidentally cancel a centering rule.
 */

.rcc-ordering-container {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--lg);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.rcc-ordering-hero {
	padding-block: var(--wp--preset--spacing--xl);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.rcc-ordering-hero > * {
	margin: 0;
}
.rcc-ordering-hero__title {
	max-width: 48rem;
}
.rcc-ordering-hero__accent {
	color: var(--wp--preset--color--primary);
}
.rcc-ordering-hero__desc {
	max-width: 42rem;
	margin-top: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---------------------------------------------------------------------- */
/* Shared section treatment                                                */
/* ---------------------------------------------------------------------- */
.rcc-ordering-section {
	padding-block: var(--wp--preset--spacing--xl);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.rcc-ordering-section--revcon {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border-bottom: none;
}

/* ---------------------------------------------------------------------- */
/* Section 1: Chemicals Procurement — intro column + numbered steps        */
/* ---------------------------------------------------------------------- */
.rcc-ordering-grid {
	display: grid;
	/*
	 * minmax(0, 1fr), not a plain 1fr: a bare `1fr` track has an implicit
	 * min-width of `auto` (its content's min-content size), not 0 — so any
	 * unbreakable child content can force the track, and this whole grid,
	 * wider than the viewport. minmax(0, 1fr) removes that implicit floor.
	 */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
}
.rcc-ordering-grid > * {
	margin: 0;
}
@media (min-width: 1024px) {
	.rcc-ordering-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: start;
	}
}
.rcc-ordering-grid__intro {
	display: flex;
	flex-direction: column;
}
.rcc-ordering-grid__intro > * {
	margin: 0;
}
@media (min-width: 1024px) {
	/*
	 * position: sticky, not fixed — it only pins once this column's own
	 * box would otherwise scroll past this point, and it releases
	 * automatically at the end of .rcc-ordering-grid (its containing
	 * block), so it can't overlap unrelated sections below. The header is
	 * a fixed 80px tall (.site-header__inner), so top is set just past
	 * that plus a little breathing room rather than 0, which would tuck
	 * this column underneath the sticky header.
	 */
	.rcc-ordering-grid__intro {
		position: sticky;
		top: 104px;
	}
}
.rcc-ordering-grid__desc {
	margin-top: var(--wp--preset--spacing--md);
	margin-bottom: var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-ordering-grid__intro .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--xl);
}

.rcc-ordering-steps {
	position: relative;
	padding-left: 56px;
}
.rcc-ordering-steps::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 16px;
	bottom: 16px;
	border-left: 1px dashed var(--wp--preset--color--outline-variant);
}
.rcc-ordering-step {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--xl);
}
.rcc-ordering-step > * {
	margin: 0;
}
.rcc-ordering-step:last-child {
	padding-bottom: 0;
}
.rcc-ordering-step__number {
	position: absolute;
	left: -56px;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--surface-container-highest);
	border: 2px solid var(--wp--preset--color--surface-container-lowest);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	z-index: 1;
}
/*
 * Graduated step-number colour: step 1 keeps the original neutral badge;
 * steps 2–3 are derived directly from the RCC primary green via
 * color-mix (not new/unrelated colours), stepping up in saturation until
 * step 4's already-established solid primary. Text flips to white once
 * the badge itself is dark enough (step 3) to keep the number legible.
 */
.rcc-ordering-steps > .rcc-ordering-step:nth-child(2) .rcc-ordering-step__number {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--surface-container-highest));
	color: var(--wp--preset--color--primary);
}
.rcc-ordering-steps > .rcc-ordering-step:nth-child(3) .rcc-ordering-step__number {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--surface-container-highest));
	color: var(--wp--preset--color--on-primary);
}
.rcc-ordering-step--active .rcc-ordering-step__number {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
.rcc-ordering-step h3 {
	margin: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--xs);
}
.rcc-ordering-step__desc {
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---------------------------------------------------------------------- */
/* Section 2: REVCON Flip-it Diamond Pads                                  */
/* ---------------------------------------------------------------------- */
.rcc-ordering-revcon {
	display: grid;
	/* See .rcc-ordering-grid's comment above re: minmax(0, 1fr) vs 1fr. */
	grid-template-columns: minmax(0, 1fr);
	/*
	 * row-gap is 0 deliberately: at the 768px breakpoint below, the left
	 * column's heading/description/requirements-card/button become
	 * individual grid items in their own right (see
	 * .rcc-ordering-revcon__text's display: contents) so the mail panel
	 * can be told to span exactly the card+button rows. Spacing between
	 * those items must keep coming from their own existing margin rules
	 * (unchanged below), not from an added row-gap, or it would double up.
	 * column-gap still provides the same horizontal space between the two
	 * columns as before.
	 */
	row-gap: 0;
	column-gap: var(--wp--preset--spacing--xl);
	/*
	 * stretch (the default, made explicit): at 768px+ this is what makes
	 * the mail panel fill exactly the row-span it's assigned (see
	 * grid-row below) so its top and bottom land precisely on the top of
	 * the requirements card and the bottom of the button, rather than
	 * hugging its own shorter content and leaving a gap at one edge. Every
	 * other item here is the sole occupant of its own row, so stretch has
	 * no effect on them — each row's height is already exactly that item's
	 * own height.
	 */
	align-items: stretch;
}
.rcc-ordering-revcon > * {
	margin: 0;
}
@media (min-width: 768px) {
	.rcc-ordering-revcon {
		/*
		 * ~60/40 (3fr/2fr), not an even 1fr/1fr: the left column carries
		 * the bulk of this section's reading content (heading, intro,
		 * requirements card), while the To Order panel's content is
		 * comparatively compact — giving the left column more width lets
		 * its now-larger body copy breathe without needing an even split.
		 */
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		/*
		 * Four explicit rows for the left column's heading, description,
		 * requirements card and button, so the mail panel can be placed to
		 * span exactly rows 3–4 (card through button) below.
		 */
		grid-template-rows: auto auto auto auto;
	}
	.rcc-ordering-revcon__text > .rcc-ordering-section__title {
		grid-column: 1;
		grid-row: 1;
	}
	.rcc-ordering-revcon__desc {
		grid-column: 1;
		grid-row: 2;
	}
	.rcc-ordering-requirements-card {
		grid-column: 1;
		grid-row: 3;
	}
	.rcc-ordering-revcon__text .wp-block-buttons {
		grid-column: 1;
		grid-row: 4;
	}
	.rcc-ordering-mail-panel {
		grid-column: 2;
		/* Top of the card (row 3) through the bottom of the button (row 4). */
		grid-row: 3 / 5;
	}
	/*
	 * Two-class selector so this reliably beats the mobile margin-top
	 * further down the file regardless of source order (both are
	 * otherwise equal, single-class specificity).
	 */
	.rcc-ordering-revcon .rcc-ordering-mail-panel {
		margin-top: 0;
	}
}
.rcc-ordering-revcon__text {
	/*
	 * display: contents removes this wrapper's own box so its children —
	 * heading, description, requirements card, button — become direct
	 * grid items of .rcc-ordering-revcon at the 768px breakpoint above.
	 * The DOM itself is unchanged, so every child-selector/margin rule
	 * below still applies exactly as before.
	 */
	display: contents;
}
.rcc-ordering-revcon__text > * {
	margin: 0;
}
.rcc-ordering-revcon__text .wp-block-buttons {
	/*
	 * No-op now that the button is its own explicit grid row (see
	 * .rcc-ordering-revcon's 768px rules above) sized to exactly its own
	 * height — kept only because it's harmless (no leftover space in that
	 * row to consume) and this rule is reused unchanged below 768px.
	 */
	margin-top: auto;
}
.rcc-ordering-revcon__desc {
	margin-top: var(--wp--preset--spacing--md);
	margin-bottom: var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-ordering-revcon__text .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--xl);
}
/*
 * "View Pad Pricing" was built using the established is-style-secondary
 * (green-outline) button style. Rather than editing the already-saved,
 * stable page markup to drop that class, this overrides just its colour
 * treatment to match the solid primary button — same established height,
 * typography, padding, radius and hover mechanics either way, since those
 * all come from the rules already in this file / theme.json, untouched.
 */
.rcc-ordering-revcon__text .wp-block-buttons .wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--primary);
}
.rcc-ordering-revcon__text .wp-block-buttons .wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-container);
	border-color: var(--wp--preset--color--primary-container);
}

.rcc-ordering-requirements-card {
	background-color: var(--wp--preset--color--surface-container);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--lg);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}
.rcc-ordering-requirements-card > * {
	margin: 0;
}
.rcc-ordering-requirement {
	position: relative;
	padding-left: var(--wp--preset--spacing--xl);
}
.rcc-ordering-requirement > * {
	margin: 0;
}
.rcc-ordering-requirement__title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
	margin-bottom: var(--wp--preset--spacing--xs);
}
.rcc-ordering-requirement__title::before {
	content: "inventory_2";
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.rcc-ordering-requirement--warning .rcc-ordering-requirement__title::before {
	content: "info";
	color: var(--wp--preset--color--error);
}
.rcc-ordering-requirement__desc {
	/*
	 * body-md, not the rcc-text-body-sm class this paragraph also carries:
	 * matches the 16px used by the equivalent step descriptions in the
	 * Chemicals Procurement column above. Equal-specificity override wins
	 * on source order alone (this file loads after the global utility
	 * classes), so no !important needed.
	 */
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--on-surface-variant);
}

/*
 * Dark industrial treatment, matching the same dark-section convention
 * already established on Private Label/Products (on-background bg,
 * on-primary for headings, outline-variant for secondary text,
 * primary-fixed as the light-on-dark green accent). Square corners on the
 * panel itself; the icon badge stays circular because that's the one
 * shape explicitly requested for it.
 */
.rcc-ordering-mail-panel {
	background-color: var(--wp--preset--color--on-background);
	border: 1px solid var(--wp--preset--color--on-background);
	border-radius: 0;
	padding: var(--wp--preset--spacing--xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--md);
	/*
	 * At 768px+ this panel is stretched (see .rcc-ordering-revcon above)
	 * to exactly the height of the requirements card + button, which is
	 * slightly taller than its own icon/heading/desc/email content group —
	 * justify-content: center keeps that group balanced within it rather
	 * than pinned to one edge.
	 */
	justify-content: center;
	/*
	 * Below 768px the grid is single-column, so this panel stacks below
	 * the left column instead of sharing a row with it — this restores
	 * the vertical gap that row-gap: 0 (see .rcc-ordering-revcon) no
	 * longer provides there. Cleared back to 0 at 768px, where the gap
	 * between the two columns is column-gap (horizontal) instead.
	 */
	margin-top: var(--wp--preset--spacing--xl);
}
.rcc-ordering-mail-panel > * {
	margin: 0;
}
.rcc-ordering-mail-panel::before {
	content: "mail";
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--primary-fixed);
	font-size: 32px;
	line-height: 1;
	color: var(--wp--preset--color--primary-fixed);
}
.rcc-ordering-mail-panel h3 {
	color: var(--wp--preset--color--on-primary);
}
.rcc-ordering-mail-panel h3::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin: var(--wp--preset--spacing--xs) auto 0;
	background-color: var(--wp--preset--color--primary-fixed);
}
.rcc-ordering-mail-panel__desc {
	max-width: 24rem;
	color: var(--wp--preset--color--outline-variant);
}
.rcc-ordering-mail-panel__email {
	display: inline-block;
	max-width: 100%;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-weight: 700;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--primary-fixed);
	/* The address has no spaces, so without this it's one unbreakable
	   token that can push past the chip's own edge on narrow screens. */
	overflow-wrap: break-word;
}
.rcc-ordering-mail-panel__email a {
	color: var(--wp--preset--color--primary-fixed);
	text-decoration: none;
}
.rcc-ordering-mail-panel__email a:hover {
	text-decoration: underline;
}

/*
 * Placed last deliberately: this heading treatment is reused inside both
 * .rcc-ordering-grid__intro and .rcc-ordering-revcon__text, each of which
 * has its own `> *` block-gap reset defined earlier in this file. Equal
 * specificity (one class each) means source order decides the winner, so
 * this rule has to come after both resets to reliably apply — no
 * !important needed anywhere in this file as a result.
 */
.rcc-ordering-section__title {
	color: var(--wp--preset--color--primary);
	display: inline-block;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: var(--wp--preset--spacing--sm);
	margin-bottom: var(--wp--preset--spacing--lg);
}