/**
 * Horse Registration — repeatable 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.
 *
 * @package BizBudding\HorseRegistration
 */

/* -------------------------------------------------------------------------
 * Theme tokens
 *
 * `--hrf-accent` is the plugin's brand colour, used for the member-details
 * border, the tinted card fills, and the outlined "Add Another Horse" button.
 * Declared on :root so a child theme can retarget every one of them with a
 * single declaration:
 *
 *     :root { --hrf-accent: #123456; }
 *
 * Two things deliberately override it:
 *
 *   - horse-registration.js sets it inline on the repeater button, so that
 *     control matches the theme's own Add to Cart fill rather than this value.
 *   - The tinted fills derive from it via color-mix(), with a literal rgba()
 *     declared first as the fallback for engines without color-mix support.
 * ---------------------------------------------------------------------- */

:root {
	--hrf-accent: #b41d15;
}

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

/* The wrapper emitted by hrf_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. */
/* Both of these are relocated into the theme's product container as siblings of
   the gallery and summary columns, so each needs the same three-way containment
   to occupy a full row instead of joining the two-column layout:

     .hrf-cart-wrap                    — includes/fields.php
     .product-description-below-gallery — includes/description.php

   The declarations are deliberately redundant; the parent's display mode decides
   which set applies and silently ignores the rest. */
.woocommerce div.product .hrf-cart-wrap,
.woocommerce div.product .product-description-below-gallery {
	/* Grid parent: span every column, on a new row after the gallery/summary.
	   No `order` is set — upsells and related products are siblings in the same
	   grid, and reordering would push the form below them. */
	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 .hrf-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;
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * "Add Another Horse" and "Add to Cart" share one declaration block so they
 * stay identical by construction — a change to one cannot silently drift from
 * the other.
 *
 * Themes routinely scope add-to-cart styling to the summary column
 * (`.summary form.cart .button { … }`). Relocating the form out of `.summary`
 * stops those rules matching, leaving a button with no background and no
 * padding: present in the DOM, clickable, and effectively invisible. These
 * declarations make both buttons self-sufficient, reading a theme custom
 * property first so a theme that defines --button-* keeps its design language.
 * ---------------------------------------------------------------------- */

.woocommerce div.product form.cart .hrf-add,
.woocommerce div.product form.cart .single_add_to_cart_button {
	/* Belt and braces: if a button somehow resolves as a grid item, pin it to a
	   full-width span rather than letting auto-placement drop it into an
	   implicit row at the end of the document. */
	grid-column: 1 / -1;

	display: inline-block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 24rem;
	margin: 0;
	padding: var(--button-padding, 0.85em 1.75em);

	border: var(--button-border, 0);
	border-radius: var(--button-border-radius, 4px);
	background: var(--button-background, var(--color-primary, #1e5b8f));
	color: var(--button-color, #fff);

	font-family: inherit;
	font-size: var(--button-font-size, 1rem);
	font-weight: var(--button-font-weight, 600);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: var(--button-text-transform, none);

	cursor: pointer;
	transition: opacity 0.15s ease;
}

.woocommerce div.product form.cart .hrf-add:hover,
.woocommerce div.product form.cart .hrf-add:focus-visible,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
	opacity: 0.85;
	background: var(--button-background, var(--color-primary, #1e5b8f));
	color: var(--button-color, #fff);
}

.woocommerce div.product form.cart .hrf-add:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Secondary treatment for "Add Another Horse"
 *
 * Overrides the shared block above to render the repeater control outlined
 * rather than filled. Size, shape, and position stay identical to "Add to
 * Cart" — only the visual weight differs, so the primary conversion action
 * stays unambiguous where the two buttons sit stacked.
 *
 * `box-shadow: inset` rather than `border` keeps the box model unchanged, so
 * both buttons remain exactly the same height.
 * ---------------------------------------------------------------------- */

.woocommerce div.product form.cart .hrf-add {
	/* Outline colour. horse-registration.js overwrites --hrf-accent inline on
	   this element at runtime with the Add to Cart button's actual rendered
	   fill, which is what makes the two controls match on themes that style
	   the button directly. Without JS it falls back to the :root token. */
	background: transparent;
	color: var(--hrf-accent, #b41d15);
	box-shadow: inset 0 0 0 2px currentColor;
}

.woocommerce div.product form.cart .hrf-add:hover,
.woocommerce div.product form.cart .hrf-add:focus-visible {
	background: var(--hrf-accent, #b41d15);
	color: var(--button-color, #fff);
	opacity: 1;
}

/* Appended by the script to show the horse count. Kept as a separate element
   so the theme's own button markup is never overwritten. */
.hrf-submit-count {
	font-weight: inherit;
	opacity: 0.85;
}

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

.hrf-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
	   .hrf-section__actions, so there is one place to change it. Leaving 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;
}

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

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

.hrf-section__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Individual horse card
 * ---------------------------------------------------------------------- */

.hrf-horse {
	position: relative; /* Anchor for the absolutely positioned remove button. */
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;

	/* Literal first, color-mix() second: engines without color-mix keep the
	   fallback, everything else derives the tint from --hrf-accent so an
	   override at :root carries through. */
	background: rgba(180, 29, 21, 0.1);
	background: color-mix(in srgb, var(--hrf-accent, #b41d15) 10%, transparent);

	/* <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;
}

.hrf-horse__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;
}

.hrf-horse__remove {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #731f17;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.hrf-horse__remove:hover,
.hrf-horse__remove:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.07);
}

.hrf-horse__remove[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Registration-level fieldset
 *
 * Sits above the repeater and holds values that apply to the whole
 * submission. Visually distinguished from the horse cards so it reads as
 * scoping them rather than being one of them.
 * ---------------------------------------------------------------------- */

.hrf-registration {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 0;
	border-left: 3px solid var(--hrf-accent, #b41d15);

	/* See .hrf-horse — same two-declaration fallback pattern. */
	background: rgba(180, 29, 21, 0.1);
	background: color-mix(in srgb, var(--hrf-accent, #b41d15) 10%, transparent);

	/* Same <fieldset> intrinsic-width reset as .hrf-horse. */
	min-width: 0;
	min-inline-size: 0;
}

.hrf-registration__legend {
	float: none;
	width: auto;
	padding: 0;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hrf-registration__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	width: 100%;
	margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
 * 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.
 * ---------------------------------------------------------------------- */

.hrf-horse__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	width: 100%;
}

/* Applied when a field carries `'full_width' => true` in the schema. Placement
   is driven by the field definition, so layout stays where the fields are
   declared rather than being duplicated as per-field CSS here. */
.hrf-field--full {
	grid-column: 1 / -1;
}

/* Instructional copy positioned by the schema (type => 'note'). Carries no
   label or input, so it needs the vertical rhythm a field would otherwise get
   from its label. Matches .hrf-horse__uploads-intro, which serves the same role
   above the document uploads. */
.hrf-field--note {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.8;
}

.hrf-field {
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	text-align: left;
}

.hrf-field__label {
	display: block;
	float: none;
	width: auto;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
}

.hrf-field__label .required {
	border: 0;
	color: #b32d2e;
	text-decoration: none;
}

.hrf-field__input {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	text-align: left;
}

/* Safari and Firefox give date inputs a different intrinsic height than text
   inputs; normalise so grid rows stay visually aligned. */
.hrf-field__input[type="date"] {
	min-height: 2.75rem;
}

/* File inputs need their own treatment: browsers render the native control at
   an intrinsic size that ignores width, so the box is drawn on the wrapper. */
.hrf-field__input--file {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px dashed rgba(0, 0, 0, 0.28);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.6);
	font-size: 0.875rem;
	line-height: 1.4;
	cursor: pointer;
}

.hrf-field__input--file:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.hrf-field__input--file::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.35rem 0.75rem;
	border: 0;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.08);
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.hrf-field__hint {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	opacity: 0.7;
}

/* Guidance shown once above the pair of document uploads. Weighted like the
   section intro rather than a per-field hint, because it governs both inputs.
   Declared after .hrf-field so its margin wins on equal specificity. */
.hrf-horse__uploads-intro {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.8;
}

/* -------------------------------------------------------------------------
 * Actions
 * ---------------------------------------------------------------------- */

/* Stacked rather than inline, so "Add Another Horse" sits directly above
   "Add to Cart" at the same width and left edge. The two buttons then read as a
   matched pair instead of occupying different flow contexts.

   The bottom margin separates this whole group from "Add to Cart". It belongs
   on the container, not on .hrf-add: the limit message is a sibling of the
   button inside this flex column, and a margin on the button alone would push
   that message 30px down and strand it between the two buttons whenever the
   customer reaches the maximum. */
.hrf-section__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	width: 100%;
	margin: 1.5rem 0 30px;
}

.hrf-section__limit {
	font-size: 0.875rem;
	opacity: 0.75;
}

.hrf-section__limit[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Cart page — read-only quantity
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * Small screens — collapse to a single column
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.hrf-horse__grid,
	.hrf-registration__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce div.product form.cart .hrf-add,
	.woocommerce div.product form.cart .single_add_to_cart_button {
		max-width: none;
	}
}