/* -------------------------------------------------------------------------
 * WooCommerce block styles for the CT Courses theme.
 *
 * Enqueued only when WooCommerce is active (see inc/woocommerce.php).
 * Every value references a theme.json preset custom property, so the
 * store inherits the same design truth as the rest of the site.
 *
 * The block checkout carries six extra fields registered by the
 * integration plugin (work phone, school district, highest degree,
 * awarding institution, previous enrolment, and a pass-through date of
 * birth). The rules under "Additional checkout fields" exist so that
 * those fields sit in the same rhythm as WooCommerce's own fields
 * instead of stacking into a wall of inputs.
 * ---------------------------------------------------------------------- */

/* --- Store notices ------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
}

.wc-block-components-notice-banner {
	align-items: flex-start;
}

/* --- Product archive ---------------------------------------------------- */

[class*="product-template"] {
	list-style: none;
	padding-left: 0;
}

.woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
}

.wc-block-product-sort-select,
.wc-block-components-product-sort-select select {
	font-size: var(--wp--preset--font-size--small);
}

/* --- Single product ----------------------------------------------------- */

.wc-block-components-product-price del {
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-product-gallery__image img,
.wp-block-woocommerce-product-image-gallery img {
	border-radius: 2px;
}

/* Variation selectors are the credit chooser on this store: give them room. */
.woocommerce div.product form.cart .variations {
	border-collapse: separate;
	border-spacing: 0 var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
	width: 100%;
}

.woocommerce div.product form.cart .variations th.label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	padding-right: var(--wp--preset--spacing--30);
	text-align: start;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.woocommerce div.product form.cart .variations select {
	min-width: 14rem;
	width: 100%;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--wp--preset--font-size--x-small);
}

.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-price {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
}

.woocommerce div.product .product_meta {
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}

/* The SKU is the university's course number -- an identifier, not prose -- so it
   gets tabular figures and tracking to make it scannable. It used to be set in a
   `mono` family; the brand palette defines only `sans`, and adding a second
   family is a design decision for the designer rather than a retokening. */
.woocommerce div.product .product_meta .sku {
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.06em;
}

/* Product tabs: rules, not pills. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--contrast-alt);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0 0 var(--wp--preset--spacing--20);
	text-decoration: none;
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:where(:hover, :focus-visible) {
	border-bottom-color: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--contrast);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Buttons: inherit the theme.json button element styles --------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding: 0.85em 1.6em;
	text-transform: none;
}

.woocommerce a.button:where(:hover, :focus-visible),
.woocommerce button.button:where(:hover, :focus-visible),
.woocommerce input.button:where(:hover, :focus-visible),
.wc-block-components-button:not(.is-link):where(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--brand-red);
	border-color: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--base);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.woocommerce .button:disabled,
.wc-block-components-button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

/* --- Mini cart ---------------------------------------------------------- */

.wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.4rem;
	padding: 0.35rem 0.5rem;
}

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-variant-numeric: tabular-nums;
}

/* --- Cart and checkout shell -------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-size: var(--wp--preset--font-size--small);
}

.wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-cart__submit-container + *,
.wc-block-checkout__form h2 {
	font-family: var(--wp--preset--font-family--sans);
}

.wc-block-components-sidebar-layout .wc-block-components-main {
	padding-inline-end: var(--wp--preset--spacing--50);
}

.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--rule);
}

.wc-block-components-sidebar .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item__value {
	font-variant-numeric: tabular-nums lining-nums;
}

.wc-block-components-totals-footer-item {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
}

.wc-block-cart-items th,
.wc-block-cart-items__header {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Form controls inside cart / checkout ------------------------------- */

.wc-block-components-text-input input,
.wc-block-components-select__container,
.wc-block-components-textarea,
.wc-block-components-combobox-control input {
	border-color: var(--wp--preset--color--rule);
	border-radius: 2px;
	font-family: inherit;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
}

.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label {
	color: var(--wp--preset--color--contrast-alt);
}

/* --- Validation errors --------------------------------------------------
 * WooCommerce renders these as a <p class="wc-block-components-validation-error">
 * associated with the control, and announces them. Our job is to make them
 * legible: x-small bold red is too small for an error a teacher has to act on,
 * and colour alone does not satisfy WCAG 1.4.1, so the control gets a thicker
 * border as well.
 * -------------------------------------------------------------------- */

.wc-block-components-validation-error {
	color: var(--wp--custom--color--error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	margin-top: var(--wp--preset--spacing--10);
}

.wc-block-components-text-input.has-error input,
.wc-block-components-select.has-error .wc-block-components-select__container,
.wc-block-components-textarea.has-error,
.wc-block-components-combobox.has-error input {
	border-color: var(--wp--custom--color--error);
	border-width: 2px;
}

.wc-block-components-text-input.has-error input:focus,
.wc-block-components-textarea.has-error:focus {
	outline-color: var(--wp--custom--color--error);
}

/* The banner WooCommerce shows above the form when a submit is rejected. */
.wc-block-components-notice-banner.is-error {
	background-color: var(--wp--custom--color--error-surface);
	border-color: var(--wp--custom--color--error);
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-notice-banner.is-success {
	background-color: var(--wp--custom--color--success-surface);
	border-color: var(--wp--custom--color--success);
	color: var(--wp--preset--color--contrast);
}

/* --- Additional checkout fields -----------------------------------------
 * Six extra fields are registered by the integration plugin, all at the
 * `order` location: date of birth, work phone, school district, highest
 * degree, degree source, and previous enrolment at the partner university.
 * Fields at that location render inside the checkout's additional-information
 * step.
 *
 * TWO selectors are used for that step throughout this section:
 *   .wp-block-woocommerce-checkout-additional-information-block
 *       derived from the block name, and the class WooCommerce writes into the
 *       saved template markup (see templates/checkout.html);
 *   .wc-block-checkout__additional-fields
 *       the inner wrapper class. NOT independently verified against
 *       WooCommerce 10.9.4 — see readme.txt "Before deployment".
 * Both are harmless if one does not match, and one of them will.
 *
 * Everything here is scoped to that step. WooCommerce's own contact and
 * address layouts are deliberately left alone: they already grid themselves,
 * and overriding them is how first name / last name ends up stacked.
 * -------------------------------------------------------------------- */

.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__content,
.wc-block-checkout__additional-fields .wc-block-components-checkout-step__content {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}

@media (min-width: 43em) {
	.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__content,
	.wc-block-checkout__additional-fields .wc-block-components-checkout-step__content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Free-text answers, and anything with a long question, take the full
	   measure. Substring matching on the id survives whatever namespace
	   separator WooCommerce uses for a field key such as
	   "ctcourses/school_district". */
	.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-text-input:has(input[id*="school_district"]),
	.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-text-input:has(input[id*="degree_from"]),
	.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox,
	.wc-block-checkout__additional-fields .wc-block-components-text-input:has(input[id*="school_district"]),
	.wc-block-checkout__additional-fields .wc-block-components-text-input:has(input[id*="degree_from"]),
	.wc-block-checkout__additional-fields .wc-block-components-checkbox {
		grid-column: 1 / -1;
	}
}

/* Long labels: opt these six fields out of WooCommerce's floating-label
 * pattern. A floating label is clipped to one line, and questions here run to
 * "Have you previously enrolled at the partner university?" — which either
 * ellipsises or, once allowed to wrap, overlaps the input it sits inside.
 * A static label above the control wraps predictably at every viewport and in
 * every translation. */
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-text-input,
.wc-block-checkout__additional-fields .wc-block-components-text-input {
	padding-top: 0;
}

.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-text-input label,
.wc-block-checkout__additional-fields .wc-block-components-text-input label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: var(--wp--preset--spacing--10);
	max-width: 100%;
	overflow: visible;
	position: static;
	text-overflow: clip;
	transform: none;
	white-space: normal;
}

/* WooCommerce moves the label with a transform once the field has focus or a
   value; with a static label there is nothing to move. */
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-text-input.is-active label,
.wc-block-checkout__additional-fields .wc-block-components-text-input.is-active label {
	transform: none;
}

.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-text-input input,
.wc-block-checkout__additional-fields .wc-block-components-text-input input {
	padding: 0.7em 0.85em;
}

.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__description,
.wc-block-checkout__additional-fields .wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--x-small);
	max-width: 42rem;
}

/* Any help text the integration plugin attaches to a field renders in
   WooCommerce's own description element. Give it room and de-emphasise it so
   a note such as the date-of-birth handling statement reads as guidance
   rather than as an error. */
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-field-description,
.wc-block-checkout__additional-fields .wc-block-components-field-description {
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
	margin-top: var(--wp--preset--spacing--10);
}

/* Checkbox rows (previous enrolment) need the label beside, not under, the box
   and a hit area that is comfortable on a tablet. */
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox__label,
.wc-block-checkout__additional-fields .wc-block-components-checkbox__label {
	color: var(--wp--preset--color--contrast);
	line-height: 1.45;
}

.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox,
.wc-block-checkout__additional-fields .wc-block-components-checkbox {
	padding-block: var(--wp--preset--spacing--10);
}

/* --- Order confirmation ------------------------------------------------- */

.wp-block-woocommerce-order-confirmation-status {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

.wc-block-order-confirmation-summary {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--30);
}

.wc-block-order-confirmation-summary-list-item__key {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* --- My account --------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border-top: 1px solid var(--wp--preset--color--rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: var(--wp--preset--spacing--20) 0;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wp--preset--color--contrast);
}

/* --- Commerce call to action --------------------------------------------
 *
 * "Proceed to Checkout" and "Place Order" are the two most important controls
 * on the site. By default they inherit the same slate as every other button and
 * sit in the right-hand summary column, so the control that takes the money
 * looked like a panel heading. Reported from the cart, 28 July 2026.
 *
 * THIS LIVES HERE, NOT IN style.css, AND THAT IS THE WHOLE FIX. The first
 * attempt put it in style.css and only min-height took effect: this file is
 * enqueued at priority 20, so its own generic `.woocommerce a.button, ...`
 * rule -- which matches these buttons too -- was overriding the new colour
 * purely on load order. Same specificity, later cascade. No !important needed;
 * reaching for one here would have hidden the actual cause.
 *
 * SPECIFICITY, second cause, found the same day: even in the later file the
 * colour still lost. WooCommerce styles these with
 * `.wc-block-components-button:not(.is-link)` -- (0,2,0), because :not() counts
 * its argument -- against a bare `.wc-block-cart__submit-button` at (0,1,0).
 * Later cascade never beats higher specificity. The selectors below therefore
 * mirror their shape rather than adding !important, so the next person can see
 * what is being matched instead of what is being shouted over.
 *
 * Red because it is the strongest of the four brand primaries and nothing on
 * these pages competes with it. Not a warning colour, which is why hover goes
 * DARKER rather than to an error tint.
 *
 * The brand-red token resolves to #c43f34, not the #c92228 in BRAND-REFERENCE's
 * palette table -- theme.json carries the "brand red (alt)" value, the one that
 * was the only brand colour in the old uncode-child stylesheet. Measured in the
 * browser, white on it is 5.11:1. That passes AA for normal text (4.5:1), which
 * is the bar that applies: at 17px bold this is NOT WCAG "large text", since
 * that starts at 18.66px bold. If the label ever shrinks, re-check it.
 * ---------------------------------------------------------------------- */

.wc-block-cart__submit-button.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link) {
	width: 100%;
	min-height: 3.25rem;
	padding-block: 0.9rem;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--brand-red);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	/* Compositor-friendly only. */
	transition: background-color 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}

.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):hover {
	background-color: #a81b20;
	box-shadow: 0 2px 10px rgb(201 34 40 / 28%);
}

/* A real pressed state: feeling the click is most of what makes something read
   as a button rather than a panel. */
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):active,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):active {
	transform: translateY(1px);
	box-shadow: none;
}

.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):focus-visible,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-blue);
	outline-offset: 3px;
}

/* The label is a nested div and inherits nothing useful on its own. */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {

	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		transition: none;
	}

	.wc-block-cart__submit-button:active,
	.wc-block-components-checkout-place-order-button:active {
		transform: none;
	}
}

/* --- Payment accordion: stop the card panel escaping its own box ---------
 *
 * WooCommerce gives the expanded payment method's content box an explicit pixel
 * width AND 16px of horizontal padding, under `box-sizing: content-box`. The two
 * only add up to the parent's width by coincidence: at some viewports the card
 * panel renders visibly outside the bordered option it belongs to. Reported from
 * a real checkout, 28 July 2026.
 *
 * border-box is the fix rather than trimming the padding, because it holds at
 * every width instead of at the one that happened to be measured.
 * ---------------------------------------------------------------------- */

.wc-block-components-radio-control-accordion-content,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control-accordion-content * {
	box-sizing: border-box;
}

.wc-block-components-radio-control-accordion-content {
	width: 100%;
	max-width: 100%;
}

/* The card inputs themselves, for the same reason. */
.wc-block-components-radio-control-accordion-content input,
.wc-block-components-radio-control-accordion-content select {
	max-width: 100%;
}