/**
 * Member Registration — membership fieldset styles.
 *
 * The section renders inside `form.cart`, which is relocated to
 * `woocommerce_after_single_product_summary` and must span the full content
 * width beneath the gallery and summary columns.
 *
 * Layout-agnostic containment
 * ---------------------------
 * Themes lay out `div.product` in one of three ways, and the relocated form has
 * to escape the two-column region in all of them:
 *
 *   CSS Grid   (Mai Engine, most block themes) → grid-column: 1 / -1
 *   Flexbox    (various modern themes)         → flex: 1 1 100%
 *   Floats     (Storefront, classic themes)    → clear: both; float: none
 *
 * All three sets are declared together. Properties that don't apply to the
 * actual parent display type are ignored, so this stays correct without needing
 * to detect the theme.
 *
 * This file intentionally mirrors the structure of the horse plugin's
 * stylesheet. The two sections appear on different products and never share a
 * page, but they sit in the same slot on the same template, and a member moving
 * between them should not notice a change of visual language.
 *
 * @package BizBudding\MemberRegistration
 */

/* -------------------------------------------------------------------------
 * Relocated add-to-cart form
 * ---------------------------------------------------------------------- */

/* The wrapper emitted by mrf_open_form_wrapper() is the grid/flex item. Doing
   containment here rather than on `form.cart` means it holds even when the
   theme computes the form itself to `display: contents`, which would otherwise
   promote the form's children to items of the parent grid and scatter them. */
.woocommerce div.product .mrf-cart-wrap {
	/* Grid parent: span every column, on a new row after the gallery/summary. */
	grid-column: 1 / -1;

	/* Flex parent: claim a full row in a wrapping flex container. */
	flex: 1 1 100%;

	/* Float parent: drop below both floated columns. */
	clear: both;
	float: none;

	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0; /* Allow shrinking inside grid/flex; prevents overflow. */
	margin-top: 2rem;
	text-align: left;
}

.woocommerce div.product .mrf-cart-wrap form.cart {
	/* `display: contents` removes this element from the box tree and hands its
	   children to the nearest real layout container. Inside the wrapper that
	   would be harmless, but restoring `block` keeps the form a genuine box so
	   margins, clearing, and the button's placement all behave predictably.
	   !important is warranted: the value must hold against any theme rule, and
	   the form's only children are our section and the submit button. */
	display: block !important;

	/* Neutralise any placement the theme applied while the form lived in the
	   summary column. These are inert unless the wrapper is a grid or flex
	   container, which it is not. */
	grid-column: auto;
	float: none;
	clear: none;

	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	text-align: left;
}

/* WooCommerce renders `.quantity.hidden` when min_value === max_value. Some
   themes' quantity rules are specific enough to beat core's display:none. */
.woocommerce div.product form.cart .quantity.hidden,
.woocommerce div.product form.cart div.quantity.hidden {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Section wrapper
 * ---------------------------------------------------------------------- */

.mrf-section {
	/* Same three-way containment as the form, in case a theme applies grid or
	   flex to `form.cart` itself with enough specificity to win above. */
	grid-column: 1 / -1;
	flex: 1 1 100%;
	clear: both;
	float: none;

	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;

	/* No bottom margin. The gap before "Add to Cart" is owned entirely by
	   .mrf-member's bottom margin, so there is one place to change it. A margin
	   here too would collapse against that one and make the effective spacing
	   depend on which value happened to be larger. */
	margin: 0;
	text-align: left;
}

.mrf-section__heading {
	margin: 0 0 0.5rem;
}

.mrf-section__intro {
	margin: 0 0 1.5rem;
	opacity: 0.8;
}

.mrf-section__intro p {
	margin: 0 0 0.5rem;
}

.mrf-section__intro p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Member details fieldset
 * ---------------------------------------------------------------------- */

.mrf-member {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	background: rgba(180, 29, 21, 0.1);

	/* <fieldset> defaults to `min-inline-size: min-content` in every browser.
	   Left alone, the element refuses to shrink below the widest label+input
	   pair, which overflows narrow containers and breaks the inner grid.
	   Both properties are declared — older engines only honour min-width. */
	min-width: 0;
	min-inline-size: 0;
}

.mrf-member__legend {
	float: none; /* Some themes float legends, detaching them from flow. */
	width: auto;
	padding: 0 0.5rem;
	margin-left: -0.5rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
 * Two-column field grid
 *
 * Fields flow in schema order, left to right. `minmax(0, 1fr)` rather than
 * `1fr` so long values shrink the track instead of overflowing it.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Two-column layout
 *
 * The outer element is a grid of two tracks, but the FIELDS are not its cells —
 * the two column stacks are. This matters.
 *
 * When every field is a cell of one shared grid, the columns share row heights.
 * The password field carries a hint and a five-item checklist, so its row grows
 * to match, and the Email field beside it gains an expanse of dead space below.
 * Spanning the password across two rows does not fix this: the browser
 * distributes a spanning item's surplus height evenly across the rows it
 * covers, so the same dead space simply appears in two smaller pieces, under
 * Email and under AHR Membership #.
 *
 * Making each side its own flex column decouples them completely. Each stack
 * packs to its own content, the password's checklist just extends the right
 * stack further down, and no field can inflate the one beside it.
 * ---------------------------------------------------------------------- */

.mrf-member__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	/* Column gap only. Vertical rhythm belongs to the stacks. */
	gap: 0 1.5rem;
	width: 100%;
	margin-top: 0.75rem;
	align-items: start;
}

/* Full-width fields sit above both stacks. */
.mrf-member__full {
	grid-column: 1 / -1;
}

.mrf-member__full,
.mrf-member__col {
	display: flex;
	flex-direction: column;

	/* The single source of vertical spacing between fields. */
	gap: 1rem;
	min-width: 0;
}

/* Space below the full-width row, matching the gap between fields. */
.mrf-member__full {
	margin-bottom: 1rem;
}

/* Applied by the single-column layout below; harmless here, because within a
   stack the fields are already in schema order. */
.mrf-field {
	order: var(--mrf-order, 0);
}

/* -------------------------------------------------------------------------
 * Individual fields
 * ---------------------------------------------------------------------- */

.mrf-field {
	display: flex;
	flex-direction: column;
	min-width: 0; /* Grid items default to min-content; allow shrinking. */
	margin: 0;
}

/* Radio groups are <fieldset> elements, which carry the same intrinsic-width
   floor as the outer fieldset and need the same reset. */
.mrf-field--radio {
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.mrf-field--full {
	grid-column: 1 / -1;
}

.mrf-field__label {
	display: block;
	margin-bottom: 0.35rem;
	padding: 0; /* Neutralise theme legend padding for the radio group. */
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.mrf-field__label .required {
	border: 0; /* Some themes underline <abbr>, which reads as a link. */
	text-decoration: none;
	color: #731f17;
}

/* The control row exists so the password reveal button can sit alongside the
   input without either one dictating the other's height.

   Scoped through .mrf-member and marked !important because WooCommerce themes
   routinely set `form.cart span { display: block }` and `button { width: 100% }`
   at a specificity this cannot otherwise beat. Losing that fight drops the
   reveal button onto its own full-width line below the field. */
.mrf-member .mrf-field__control {
	display: flex !important;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
}

.mrf-member .mrf-field__input {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/* Chromium and Edge render their own reveal control inside password inputs.
   Alongside ours that is two buttons doing the same job, overlapping the field.
   Ours is kept because it is the one that is labelled, keyboard-reachable, and
   consistent across browsers. */
.mrf-field__input::-ms-reveal,
.mrf-field__input::-ms-clear {
	display: none;
}

/* Sits below the input in the same grid column. The AHR Membership # hint runs
   to several lines, so line-height and a wrapping bound matter here — without
   them a long hint sets tight, and the row it grows is shared with the field
   beside it. Labels and inputs still align across the row because each field is
   a stretched flex column. */
.mrf-field__hint {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	line-height: 1.45;
	opacity: 0.75;

	/* Avoids a one-word last line on the longer hints. Ignored where
	   unsupported, which costs nothing. */
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
 * Password reveal
 *
 * There is no confirm-password field. A typo in a masked input would otherwise
 * only surface after payment, when the member cannot log in to the account they
 * just bought — so the toggle is a functional control, not a convenience.
 * ---------------------------------------------------------------------- */

.mrf-member .mrf-field__reveal {
	flex: 0 0 auto;

	/* Themes commonly set `button { width: 100% }` inside the cart form, which
	   with flex-basis auto would let the button claim the whole row. */
	width: auto;
	min-width: 0;
	padding: 0 0.9em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.mrf-field__reveal:hover,
.mrf-field__reveal:focus-visible {
	background: rgba(0, 0, 0, 0.07);
}

/* The script sets [hidden] when the browser has no scripting; without JS the
   button cannot work and must not be offered. */
.mrf-field__reveal[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Radio options
 * ---------------------------------------------------------------------- */

.mrf-field__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.mrf-field__option {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.mrf-field__radio {
	/* Flex would otherwise let the control shrink to nothing on narrow screens. */
	flex: 0 0 auto;
	margin: 0;
}

.mrf-field__radio-label {
	margin: 0;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Password requirement checklist
 *
 * All requirements are shown up front so the member can satisfy the policy in
 * one attempt. Before they type, the list is neutral guidance; once they start,
 * each item resolves to met or unmet.
 * ---------------------------------------------------------------------- */

.mrf-password-rules {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	line-height: 1.45;
}

.mrf-password-rules__title {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	opacity: 0.85;
}

.mrf-password-rules__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrf-password-rules__item {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0 0 0.15rem;
	opacity: 0.75;
	transition: opacity 0.15s ease, color 0.15s ease;
}

/* The marker is a shape, not a character, so it renders identically across
   platforms and never depends on an emoji font being present. */
.mrf-password-rules__marker {
	flex: 0 0 auto;
	width: 0.55em;
	height: 0.55em;
	margin-top: 0.45em;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	transition: background-color 0.15s ease;
}

.mrf-password-rules__item.is-met {
	color: #1e6b3a;
	opacity: 1;
}

.mrf-password-rules__item.is-met .mrf-password-rules__marker {
	background: currentColor;
}

.mrf-password-rules__item.is-unmet {
	color: #731f17;
	opacity: 1;
}

/* State is carried by colour AND by the filled/empty marker, so the met/unmet
   distinction does not rely on colour vision alone. */
.mrf-password-rules__item.is-unmet .mrf-password-rules__marker {
	background: transparent;
}

/* -------------------------------------------------------------------------
 * Cart and archive
 * ---------------------------------------------------------------------- */

.mrf-cart-qty {
	display: inline-block;
	white-space: nowrap;
}

.mrf-gate-notice {
	margin-bottom: 1.5rem;
}

/* Shown only to users who can edit the product. Styled as an error rather than
   a notice because the product is unpurchasable until it is resolved. */
.mrf-config-warning {
	margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
 * Narrow viewports
 *
 * The two-column grid collapses before the labels and inputs would begin to
 * clip. 600px matches the horse plugin's breakpoint so both forms reflow at the
 * same width.
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.mrf-member {
		padding: 1.25rem 1rem;
	}

	/* Collapse the two stacks into one flow.
	 *
	 * `display: contents` removes the wrappers from the box tree, promoting
	 * every field to a direct grid item. Without the `order` property below,
	 * the fields would then appear grouped by side — First Name, Email, AHR,
	 * Ranch, then Last Name and Password — because that is the DOM sequence the
	 * two-column layout requires. Each field carries its schema position in
	 * --mrf-order, which restores the intended sequence here. */
	.mrf-member__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.mrf-member__full,
	.mrf-member__col {
		display: contents;
	}

	.mrf-field--full {
		grid-column: auto;
	}
}