/* =============================================================
   Rhinory-v4 — Commerce7 form widget paint (`wp-commerce7/form`)
   Brief: docs/briefs/2026-10-24-forms-c7-widget.md (AC3)
   Design: prototypes/13/51-groups-private-events.css (.gp-form) and
           prototypes/13/49-ambassadors.css (.am-c7) — Lora fields,
           burgundy accents, 640px column, tall textareas, paper register.

   Attached per block (rhinory_v4_attach_c7_form_paint in functions.php),
   so it loads only on pages that hold a form block.

   Scope rule: EVERY selector starts at `.winery-c7-form`, the plugin's
   frozen wrapper (contract.md § Native form surfaces removed). Nothing
   global, no `.c7-*` rule outside that scope.

   Two layers, on purpose:
   1. A scoped --c7-* / --winery-c7-* re-set. The site's :root values are
      the dark Reserve register (c7-overrides.css); this flips the widget
      to paper. It also reaches the states we cannot render without a real
      submit (C7's inline errors, thank-you message), because the SDK paints
      those from the same variables.
   2. Plain-element rules (label, input, select, textarea, submit button)
      rooted at `.winery-c7-form .c7-custom-form form`. Prototype 49 styles
      plain elements for exactly this reason: they survive a C7 class
      rename. Specificity (0,2,2) beats the plugin bridge's
      `.c7-form__field label:not(...)` (0,2,1) and `.c7-form__field input`
      (0,1,1) regardless of print order. No inner SDK class is targeted
      (contract.md "What themes MUST NOT target"): the required marker,
      checkbox control, help text and submit row are reached by structure
      (`:required`, `label > input + span`, `label > p`, `:has(> button)`).
      `.c7-custom-form` is the plugin-emitted mount, part of the contract.

   tests/visual/surfaces/forms-c7-widget.spec.ts fails if the widget stops
   mounting fields or these rules stop applying.
   ============================================================= */

.winery-c7-form {
	max-width: 640px;

	--c7-font-family: "Lora", Georgia, serif;
	--c7-heading-font-family: "Cormorant Garamond", Georgia, serif;
	--c7-body-text-color: #2d2926;              /* --ink-warm */
	--c7-alt-text-color: #3a352f;               /* --ink-warm-2 */
	--c7-primary-color: #520000;                /* --burgundy */
	--c7-primary-color-text: #520000;
	--c7-link-color: #520000;
	--c7-border-color: rgba(45, 41, 38, 0.18);  /* --rule-warm-2 */
	--c7-field-bg: #fbf7ee;                     /* --paper */
	--c7-field-border-color: rgba(45, 41, 38, 0.28);
	--c7-field-focus-color: rgba(82, 0, 0, 0.14);
	--c7-field-placeholder: #717271;            /* --rhino-warm */
	--c7-field-border-radius: 2px;
	--c7-field-option-selected-color: #520000;
	--c7-field-option-focus-color: rgba(82, 0, 0, 0.3);
	--c7-primary-button-bg: #520000;
	--c7-primary-button-bg-hover: #3d0000;
	--c7-primary-button-text-color: #fbf7ee;
	--c7-button-border-radius: 2px;
	--c7-error: #520000;                        /* prototype .gp-err */
	--c7-error-bg: rgba(82, 0, 0, 0.06);
	--c7-success: #2d2926;
	--c7-success-bg: transparent;

	/* Declared here, not inherited from :root: a :root alias of
	   --c7-body-text-color has already resolved to the dark-register ivory
	   (see the login-form block in c7-overrides.css). */
	--winery-c7-field-text-color: #2d2926;
	--winery-c7-label-color: #2d2926;
	--winery-c7-label-font-family: "Lora", Georgia, serif;
	--winery-c7-label-font-size: 17px;
	--winery-c7-label-font-weight: 600;
	--winery-c7-label-text-transform: none;
	--winery-c7-label-letter-spacing: 0;

	/* The bridge applies field padding and min-height with !important
	   (contract.md bridge table), so the plain-element rules below cannot
	   set them; these variables are the only way in. */
	--winery-c7-field-min-height: 52px;
	--winery-c7-field-padding: 13px 16px;
	--winery-c7-field-group-gap: 30px;
	--winery-c7-field-label-gap: 10px;
	--winery-c7-button-font-family: "Josefin Sans", system-ui, sans-serif;
	--winery-c7-button-letter-spacing: 0.16em;
	--winery-c7-button-text-transform: uppercase;
	--winery-c7-button-min-height: 52px;
	--winery-c7-button-padding: 16px 28px;
	--winery-c7-button-box-shadow: 0 12px 34px -14px rgba(82, 0, 0, 0.5);

	color: #2d2926;
	font-family: "Lora", Georgia, serif;
}

.winery-c7-form .c7-custom-form form {
	max-width: none;
	margin: 0;
}

.winery-c7-form .c7-custom-form form fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ----- Labels + required marker ----- */
.winery-c7-form .c7-custom-form form label {
	display: block;
	max-width: 56ch;
	margin: 0 0 10px;
	font-family: "Lora", Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: pretty;
	color: #2d2926;
}

/* C7 draws a "*" after the label of a required control; the prototypes
   use an italic burgundy word (.am-req). Keyed on the control's own
   `required`, not C7's label class (contract: no inner SDK classes). */
.winery-c7-form .c7-custom-form form label:has(+ :required)::after {
	content: "required";
	margin-left: 6px;
	font-style: italic;
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
	color: #520000;
}

/* ----- Inputs, selects, textareas ----- */
.winery-c7-form .c7-custom-form form input:not([type="checkbox"]):not([type="radio"]),
.winery-c7-form .c7-custom-form form select,
.winery-c7-form .c7-custom-form form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	height: auto;
	margin: 0;
	padding: 13px 16px;
	font-family: "Lora", Georgia, serif;
	font-size: 17px;
	line-height: 1.5;
	color: #2d2926;
	background-color: #fbf7ee;
	border: 1px solid rgba(45, 41, 38, 0.28);
	border-radius: 2px;
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.winery-c7-form .c7-custom-form form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23520000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	cursor: pointer;
}

.winery-c7-form .c7-custom-form form textarea {
	min-height: 152px;
	resize: vertical;
}

.winery-c7-form .c7-custom-form form input:not([type="checkbox"]):not([type="radio"]):hover,
.winery-c7-form .c7-custom-form form select:hover,
.winery-c7-form .c7-custom-form form textarea:hover {
	border-color: rgba(45, 41, 38, 0.5);
}

.winery-c7-form .c7-custom-form form input:not([type="checkbox"]):not([type="radio"]):focus,
.winery-c7-form .c7-custom-form form select:focus,
.winery-c7-form .c7-custom-form form textarea:focus {
	outline: none;
	border-color: #520000;
	box-shadow: 0 0 0 3px rgba(82, 0, 0, 0.14);
}

.winery-c7-form .c7-custom-form form [aria-invalid="true"] {
	border-color: #520000;
}

/* ----- Opt-in checkbox (C7 hides the input and paints the span after it) ----- */
.winery-c7-form .c7-custom-form form label:has(> input[type="checkbox"]) {
	font-weight: 400;
	cursor: pointer;
}

.winery-c7-form .c7-custom-form form label > input[type="checkbox"] + span {
	width: 22px;
	height: 22px;
	background-color: #fbf7ee;
	border: 1px solid rgba(45, 41, 38, 0.45);
	border-radius: 2px;
}

.winery-c7-form .c7-custom-form form label > input[type="checkbox"]:checked + span {
	background-color: #520000;
	border-color: #520000;
}

.winery-c7-form .c7-custom-form form label > input[type="checkbox"]:focus-visible + span {
	outline: 2px solid #520000;
	outline-offset: 2px;
}

.winery-c7-form .c7-custom-form form label > p {
	margin: 4px 0 0;
	font-family: "Lora", Georgia, serif;
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
	color: #3a352f;
}

/* ----- Submit ----- */
.winery-c7-form .c7-custom-form form div:has(> button[type="submit"]) {
	padding-top: 32px;
	border-top: 1px solid rgba(45, 41, 38, 0.18);
}

.winery-c7-form .c7-custom-form form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	height: auto;
	padding: 16px 28px;
	font-family: "Josefin Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fbf7ee;
	background: #520000;
	border: 1px solid #520000;
	border-radius: 0;
	box-shadow: 0 12px 34px -14px rgba(82, 0, 0, 0.5);
	cursor: pointer;
	transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
}

.winery-c7-form .c7-custom-form form button[type="submit"]:hover {
	background: #3d0000;
	border-color: #3d0000;
	transform: translateY(-1px);
}

.winery-c7-form .c7-custom-form form button[type="submit"]:focus-visible {
	outline: 2px solid #520000;
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.winery-c7-form .c7-custom-form form button[type="submit"] {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.winery-c7-form .c7-custom-form form input,
	.winery-c7-form .c7-custom-form form select,
	.winery-c7-form .c7-custom-form form textarea,
	.winery-c7-form .c7-custom-form form button[type="submit"] {
		transition: none;
	}

	.winery-c7-form .c7-custom-form form button[type="submit"]:hover {
		transform: none;
	}
}