/*
 * DU Giveaway - frontend styles.
 *
 * Deliberately tiny. The form renders inside `.du-form-wrapper`, and the theme's
 * `tailwind/custom/components/forms.css` already styles `label`, `input`,
 * `select`, `textarea`, `input[type=checkbox]` and `[type="submit"]` by element
 * selector inside that wrapper - so fields, spacing, typography, borders, focus
 * rings and the submit button all come from the site's own design system.
 *
 * Two rules govern what may live in this file:
 *
 * 1. A plugin stylesheet is UNLAYERED, while the theme's whole compiled build sits
 *    in `@layer base` / `@layer components`. An unlayered normal declaration
 *    outranks every layered one regardless of selector specificity, so anything
 *    written here would silently beat the theme. Therefore: only classes the theme
 *    has no equivalent for, and never a rule touching an input, label or button
 *    the theme already styles.
 *
 * 2. Tailwind only scans `../theme/**\/*.php`, so a utility class used in this
 *    plugin's markup is never compiled. Nothing here relies on one; the markup
 *    sticks to the component classes `forms.css` defines explicitly, plus
 *    `sr-only`, which is present in the compiled output.
 *
 * Colours come from the theme's own custom properties with a literal fallback, so
 * the plugin still looks deliberate if it is ever activated under another theme.
 */

.du-giveaway {
	width: 100%;
	margin-left: 0;
	margin-top: 40px;
}

.du-giveaway__title {
	margin: 0 0 0.75rem;
}

/*
 * Labels above their control.
 *
 * `forms.css` gives `.du-form-wrapper .du-form-field label` a `!mb-3` and expects
 * the control to sit on the next line — but a `<label>` is inline by default, so a
 * vertical margin on it does nothing and the input stays on the same line. The
 * theme's own forms get away with it because their markup comes from Contact Form
 * 7, where wpautop inserts a `<br>` after the label. This plugin emits its markup
 * directly, so the block display has to be stated.
 *
 * Additive, not an override: the theme sets no `display` on these labels, so
 * nothing is being fought over. Checkbox fields are excluded because their label
 * legitimately wraps the control and the theme lays it out as a flex row.
 */
.du-giveaway .du-giveaway__field:not(.du-form-checkbox) > label {
	display: block;
}

.du-giveaway .du-giveaway__field span {
	max-width: 570px;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: -3%;
}


.du-giveaway .du-giveaway__field span[aria-hidden="true"] {
  display: none;
}

/*
 * Text-insertion caret colour.
 *
 * Every browser except iOS Safari draws the caret in the field's own text colour,
 * which on the dark form is white. iOS Safari ignores that and paints it with the
 * system accent (blue) unless `caret-color` is stated. Pinning it to `currentColor`
 * restores the intended behaviour everywhere: white on the dark variant, dark on
 * the light one, with no colour hardcoded.
 *
 * Additive, not an override: the theme sets no `caret-color`, so nothing is being
 * fought over.
 */
.du-giveaway input,
.du-giveaway textarea {
	caret-color: currentColor;
}

/*
 * Row columns.
 *
 * `.du-form-row` is the theme's flex row. Under `.du-form-dark` it already gives
 * its children `flex: 1 1 0%`, which splits a row into EQUAL columns — right for
 * two halves, wrong the moment a row mixes widths (a half beside two quarters
 * would come out as three equal thirds). In the light variant the children get no
 * flex sizing at all, so they size to their content.
 *
 * Both are fixed by setting `flex-grow` in twelfths, leaving `flex-basis: 0` to do
 * the work: grow values of 6 / 3 / 3 distribute a row as 50% / 25% / 25%. Only
 * `flex-grow` is touched, so the theme's basis and shrink still apply.
 *
 * Because the basis is 0, the widths behave as RATIOS WITHIN THEIR ROW rather than
 * as absolute fractions of the form, and a row always fills the full width. A row
 * holding a third and a half (10 of 12 units) therefore renders 40% / 60%, not
 * 33% / 50% with a 17% gap on the end. That is the intended behaviour — a ragged
 * right edge on a form looks like a mistake — but it does mean "third" describes how
 * many fit on a line, not a guaranteed 33%.
 *
 * Scoped to `.du-giveaway`, so no other form on the site is affected.
 */
.du-giveaway .du-form-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.du-giveaway__actions {
	margin-top: 40px;
}

@media (width >= 48rem) {
	.du-giveaway {
		margin-top: 0;
	}

	.du-giveaway .du-form-row {
		flex-direction: row;
		/*
		 * `flex-start`, not the theme's `center`: when one field in a row carries an
		 * error message it becomes taller, and centring would push its neighbour's
		 * input out of line with it. Aligning to the top keeps every input on a row
		 * at the same height whatever is underneath it.
		 */
		align-items: flex-start;
	}

	.du-giveaway .du-form-row > .du-giveaway__field {
		flex-basis: 0;
		min-width: 0;
	}

	.du-giveaway .du-form-row > .du-giveaway__field--w-full {
		flex-grow: 12;
	}

	.du-giveaway .du-form-row > .du-giveaway__field--w-half {
		flex-grow: 6;
	}

	.du-giveaway .du-form-row > .du-giveaway__field--w-third {
		flex-grow: 4;
	}

	.du-giveaway .du-form-row > .du-giveaway__field--w-quarter {
		flex-grow: 3;
	}
}

.du-giveaway__description {
	margin-bottom: 3rem;
}

.du-giveaway__description p,
.du-giveaway__description h2 {
	color: #FFFFFF;
}

.du-giveaway__description p {
	margin-top: 15px;
	max-width: 430px;
}

/*
 * Form footer - the per-giveaway rich text under the inputs.
 *
 * The requirement is 40px between the last input and this block, and getting
 * exactly 40px takes two rules rather than one, because the theme puts
 * `margin-bottom: 1rem !important` on every `.du-form-field` and that cannot be
 * overridden from here: this stylesheet is unlayered, and among IMPORTANT
 * declarations an unlayered rule is the weakest, not the strongest. So the 16px is
 * a fixed cost that has to be accounted for instead of removed.
 *
 * Case 1 - the footer follows a plain field (a consent or newsletter checkbox, or a
 * full-width field). Two adjacent block siblings, so their vertical margins
 * COLLAPSE: max(16px, 40px) = 40px. The 40px below is correct as written.
 *
 * Case 2 - the footer follows a `.du-form-row`. The row is a flex container, and a
 * flex item's margin never collapses, so its child's 16px is already baked into the
 * row's height. The row itself has no bottom margin to collapse with, so a 40px top
 * margin would land 16 + 40 = 56px away. Hence the 24px: 16 + 24 = 40px.
 */
.du-giveaway__footer {
	max-width: 570px;
	margin-top: 40px;
	margin-bottom: 30px;
}

.du-giveaway__footer p,
.du-giveaway__footer a {
	font-size: 16px;
	line-height: 19px;
	letter-spacing: -3%;
}

.du-giveaway .du-form-row + .du-giveaway__footer {
	margin-top: 24px;
}

/* Keeps the 40px exact: a leading or trailing margin on the editor's own
 * paragraphs would otherwise sit on top of it. */
.du-giveaway__footer > *:first-child {
	margin-top: 0;
}

.du-giveaway__footer > *:last-child {
	margin-bottom: 0;
}

/* On the blue background the theme only turns labels white, so the footer's body
 * copy has to be told as well. Scoped to the dark variant, so the light one keeps
 * its inherited colour. */
.du-giveaway.du-form-dark .du-giveaway__footer,
.du-giveaway.du-form-dark .du-giveaway__footer p,
.du-giveaway.du-form-dark .du-giveaway__footer li,
.du-giveaway.du-form-dark .du-giveaway__footer a {
	color: #FFFFFF;
}

.du-giveaway.du-form-dark .du-giveaway__footer a {
	text-decoration: underline;
}

/* Honeypot.
 *
 * Not `display: none` and not the `hidden` attribute: both are the first thing a
 * form-filling bot checks for. Positioning it out of the viewport keeps it in the
 * layout as far as a naive script is concerned. `aria-hidden` on the wrapper plus
 * `tabindex="-1"` on the input keep it away from real people. */
.du-giveaway__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Error summary - the WCAG 3.3.1 region at the top of the form. */
.du-giveaway__summary {
	margin-bottom: 1.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--color-red-1, #E42526);
	color: var(--color-red-1, #E42526);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.du-giveaway__summary[hidden] {
	display: none;
}

.du-giveaway__summary-title {
	margin: 0;
	font-weight: 700;
	color: #FFFFFF;
}

.du-giveaway__summary-list {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.du-giveaway__summary-list li + li {
	margin-top: 0.25rem;
}

.du-giveaway__summary-list a {
	color: inherit;
	text-decoration: underline;
}

/* Per-field error and help text. */
.du-giveaway__error {
	margin: 0.375rem 0 0;
	color: var(--color-red-1, #E42526);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.du-giveaway__help {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.3;
	opacity: 0.8;
}

/* Success panel and the closed-giveaway notice. */
.du-giveaway__success,
.du-giveaway__notice {
	padding: 1rem 1.25rem;
	border: 1px solid #FFFFFF;
	color: var(--color-du-primary, #385CC7);
}

.du-giveaway__success p,
.du-giveaway__notice {
	margin: 0;
	color: #FFFFFF;
}

/* The focus ring the theme gives inputs does not reach these two, and both are
 * focus targets: the script moves focus to whichever is relevant after a submit. */
.du-giveaway__summary:focus-visible,
.du-giveaway__success:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Submitting state. `aria-busy` carries the meaning; this is only the paint. */
.du-giveaway__form[aria-busy='true'] .du-giveaway__submit {
	opacity: 0.7;
	cursor: progress;
}

.du-giveaway__submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}