/**
 * Researcher attestation box — Codeberg #442.
 *
 * A 1px #111 edge on a #f7f7f7 fill. Black because the checkout already runs
 * a black-outline motif (the EVERYCHEM wordmark box, the rule under the
 * header, the Place order button); blue is spoken for by links.
 *
 * This is one component's own style. It deliberately does NOT touch the
 * theme's grey left-rule callout (style.css:6936) used by the "Returning
 * customer?" and "Have a coupon?" bars — a quiet hint and a required legal
 * confirmation should not look identical.
 */

/*
 * SCALE NOTE — the theme sets `html { font-size: 62.5% }` (style.css:113), so
 * 1rem is 10px here, not 16px. This file was originally authored against a
 * 16px root, which rendered the whole box at 62.5% of its intended size: 8.8px
 * body text sitting beside 16px form labels and 18px page copy. Every value
 * below is in the theme's own units — 1.6rem is 16px.
 *
 * Two type roles, and only two:
 *   --ec-attest-label  section label
 *   --ec-attest-body   everything else — confirmation text, the terms line,
 *                      the full wording, and both links
 *
 * There was a third, a step down for the "Read full confirmation" link. It
 * went because the box holds two links that a reader sees as the same kind of
 * thing — blue, underlined, tappable — and the terms link is mid-sentence, so
 * it cannot leave body size. Rendering the other one smaller expressed a
 * distinction nobody can infer. If a genuine secondary role appears later,
 * reintroduce the token; don't reach for an ad-hoc size.
 *
 * The terms line is a peer of the confirmations and reads at body size, not as
 * fine print. This is legal text people are asked to read, so it matches the
 * form labels around it rather than shrinking away from them.
 */
.ec-attest {
	--ec-attest-label: 1.2rem;
	--ec-attest-body: 1.6rem;

	margin-top: 2.4rem;
	padding: 1.6rem 2rem;
	border: 1px solid #111;
	background: #f7f7f7;
}

.ec-attest__title {
	margin: 0 0 1.4rem;
	font-size: var(--ec-attest-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #666;
}

.ec-attest__item {
	margin-bottom: 1.5rem;
}

.ec-attest__item:last-of-type {
	margin-bottom: 0;
}

/*
 * Both our own checkboxes and the re-rendered terms row use this.
 *
 * The selectors are scoped through .woocommerce deliberately. The box renders
 * inside <div class="form-row place-order">, and WooCommerce ships
 * `.woocommerce form .form-row label { display: block }` — specificity (0,2,2),
 * which outranks a plain `.ec-attest .ec-attest__check` (0,2,0). Losing that
 * flattens every row: the checkbox stops being a flex item and the text wraps
 * underneath it instead of staying in its own column, which is what made the
 * box hard to read on a phone. Winning on specificity rather than !important
 * keeps this overridable by anything more specific later.
 */
.ec-attest .ec-attest__check,
.ec-attest .ec-attest__check label,
.woocommerce .ec-attest .ec-attest__check,
.woocommerce .ec-attest .ec-attest__check label,
.woocommerce-page .ec-attest .ec-attest__check,
.woocommerce-page .ec-attest .ec-attest__check label {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 0;
	font-size: var(--ec-attest-body);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.ec-attest .ec-attest__check input[type="checkbox"] {
	flex: none;
	width: 1.7rem;
	height: 1.7rem;
	min-width: 1.7rem;
	margin: 0.3rem 0 0;
	accent-color: #111;
	cursor: pointer;
}

.ec-attest .ec-attest__check .required,
.ec-attest .ec-attest__check abbr.required {
	color: #d0342c;
	font-weight: 700;
	text-decoration: none;
	border: 0;
}

.ec-attest a {
	color: #1b57c4;
	text-decoration: underline;
}

/*
 * Rendered as a <div>, never an <hr>: the checkout sits inside .entry-content,
 * where the theme turns bare <hr> elements into a decorative separator with a
 * gap and two rotated bars (style.css:410). Height and background are pinned
 * so the element is a rule and nothing else, whatever it is nested in.
 */
.ec-attest__divider {
	margin: 1.5rem 0;
	padding: 0;
	height: 0;
	border: 0;
	border-top: 1px solid #e4e1db;
	background: none;
}

.ec-attest__terms {
	margin: 0;
}

/*
 * The terms row's outer <p> is a wrapper, not a row — only its <label> is the
 * flex line. Left as a flex container it contributed its own 1rem gap (the
 * hidden terms-field counts as an item) on top of WooCommerce's .form-row
 * padding, indenting the whole terms line 13px right of the confirmations
 * above it. Measured on the page, not inferred.
 */
.ec-attest .ec-attest__terms .ec-attest__check,
.woocommerce .ec-attest .ec-attest__terms .ec-attest__check,
.woocommerce-page .ec-attest .ec-attest__terms .ec-attest__check {
	display: block;
	padding: 0;
}

/*
 * WooCommerce decorates the terms link with a caret to signal the fold-down it
 * normally toggles. We no longer inject that content — the link opens the page
 * in a new tab — so the caret would be advertising behaviour that does not
 * exist.
 */
.ec-attest .woocommerce-terms-and-conditions-link::after {
	display: none;
}

.ec-attest__terms .form-row {
	margin: 0;
	padding: 0;
}

/*
 * The disclosure. It is a SIBLING of the label, never a child — inside the
 * label, clicking the summary would activate the label and tick the box,
 * consenting the customer in the same action that opens the text.
 */
.ec-attest__more {
	margin: 0.5rem 0 0 2.7rem;
}

.ec-attest__more > summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	font-size: var(--ec-attest-body);
	color: #1b57c4;
	text-decoration: underline;
}

.ec-attest__more > summary::-webkit-details-marker {
	display: none;
}

.ec-attest__more > summary::after {
	content: " \25BE";
	display: inline-block;
	text-decoration: none;
}

.ec-attest__more[open] > summary::after {
	content: " \25B4";
}

.ec-attest__fulltext {
	margin: 0.7rem 0 0;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid #dedfdf;
	font-size: var(--ec-attest-body);
	line-height: 1.5;
	color: #333;
}

/*
 * Wording variants. Full text is the default at every width; the compact
 * wording and its disclosure only appear at phone width, where the long text
 * would push the Place order button well below the fold.
 *
 * Which of the two was on screen is submitted in ec_attest_variant — CSS
 * visibility is invisible to the server. See ecc-attestations.js, and the
 * <noscript> block in the markup that pins the full text when JS is off.
 */
.ec-attest__compact,
.ec-attest__more {
	display: none;
}

@media (max-width: 600px) {
	.ec-attest__full {
		display: none;
	}

	.ec-attest__compact {
		display: inline;
	}

	.ec-attest__more {
		display: block;
	}
}

/* Server-side validation failed and the page came back. */
.ec-attest.ec-attest--error {
	border-color: #d0342c;
	background: #fbf0f1;
}