/**
 * Contact Form 7 — making the plugin's forms look like part of this theme.
 *
 * Enqueued only where a CF7 form can actually appear, alongside
 * assets/css/info.css — see profhairclub_shop_scripts().
 *
 * Two things shape almost every rule below.
 *
 * 1. CF7's own stylesheet is NOT dequeued. inc/performance.php empties
 *    WooCommerce's style list (via the `woocommerce_enqueue_styles`
 *    filter) but touches nothing else, so contact-form-7.css loads
 *    normally and this file has to out-rank it where the two disagree.
 *    CF7 scopes its rules like `.wpcf7 form .wpcf7-response-output`
 *    (0,2,1) and `.wpcf7-not-valid-tip` (0,1,0), so the selectors here
 *    are pitched just above whichever one they are replacing, and never
 *    left to source order.
 *
 * 2. Some of CF7's CSS is behaviour, not decoration, and must survive.
 *    `form.init .wpcf7-response-output { display: none }` is what keeps
 *    the message box hidden until there is a message; nothing here sets
 *    `display` on that element, only how it looks once CF7 shows it.
 *    Same reasoning for `.screen-reader-response`, which must stay
 *    reachable by screen readers and invisible to everyone else.
 *
 * The submit button is an `<input type="submit">`, a void element, so it
 * cannot carry the `::after` layer that `.phc-btn` uses to slide its fill
 * in on hover. Rather than wrap it (CF7 controls that markup), the button
 * reproduces the same *result* with a background/colour transition — see
 * the submit section.
 *
 * @package ProfHairClub_shop
 */

/* -------------------------------------------------------------
   Wrapper
   ------------------------------------------------------------- */
.wpcf7 {
	--phc-field-h: 46px;
	margin-block: clamp(1.4rem, 3vw, 2rem);
}

.wpcf7 form.wpcf7-form {
	margin: 0;
}

/* CF7's default markup wraps every field in a bare <p>. Inside the
   journal's prose column those inherit article paragraph spacing, which
   is too airy for a form; this tightens them without touching prose
   paragraphs elsewhere on the page. */
.wpcf7-form p {
	margin: 0 0 1.1rem;
}

.wpcf7-form p:last-child {
	margin-bottom: 0;
}

/* Kept visually hidden but announced — CF7 puts the authoritative
   validation summary here. Duplicated from CF7's own stylesheet on
   purpose: if that file is ever dequeued for performance, this block
   must not become a wall of duplicated error text at the top of the form. */
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------
   Labels

   CF7 nests the control *inside* its <label>, so anything set here is
   inherited by the input. The uppercase label treatment therefore has to
   be undone explicitly on the controls below — otherwise the user types
   in 11px letter-spaced capitals. Same label language as the contact
   card's <dt> in info.css, so the two read as one system.
   ------------------------------------------------------------- */
.wpcf7-form label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--phc-stone);
}

/* CF7 emits `<br>` between the label text and the field. Turning it into
   a block-level spacer is what gives the pair its gap without needing the
   client to change the form template. */
.wpcf7-form label br {
	content: "";
	display: block;
	margin-bottom: 0.4rem;
}

.wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

/* -------------------------------------------------------------
   Text-like controls
   ------------------------------------------------------------- */
.wpcf7-form .wpcf7-form-control {
	/* Undo the inherited label treatment — see the note above. */
	font-family: var(--phc-font-sans);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--phc-ink);
}

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-url,
.wpcf7-form .wpcf7-number,
.wpcf7-form .wpcf7-date,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form .wpcf7-select {
	/* CF7 prints size="40" / cols="40" as HTML attributes, which set a
	   real width the browser honours. width:100% is what stops the fields
	   from being 40 characters wide regardless of their column. */
	width: 100%;
	max-width: 100%;
	min-height: var(--phc-field-h);
	padding: 0.6em 0.85em;
	background: var(--phc-white);
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-s);
	line-height: 1.4;
	transition: border-color 0.25s var(--phc-ease), box-shadow 0.25s var(--phc-ease);
}

.wpcf7-form .wpcf7-textarea {
	min-height: 150px;
	/* Horizontal resize would break the column it sits in. */
	resize: vertical;
	display: block;
}

.wpcf7-form ::placeholder {
	color: var(--phc-stone);
	opacity: 1;
}

.wpcf7-form .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--phc-yellow-deep);
	/* Ring rather than a thicker border: a border change would shift the
	   field's box and nudge everything below it by a pixel on focus. */
	box-shadow: 0 0 0 3px var(--phc-yellow-wash);
}

/* Select needs its own arrow once the native appearance is dropped.
   Inline SVG as a data URI — this theme loads no external assets, and a
   background-image keeps the arrow out of the markup CF7 controls. */
.wpcf7-form .wpcf7-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4em;
	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.5 6 6.5l5-5' fill='none' stroke='%234a473f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 12px 8px;
}

.wpcf7-form .wpcf7-select[multiple] {
	background-image: none;
	padding-right: 0.85em;
	min-height: 8em;
}

/* -------------------------------------------------------------
   Invalid state

   Driven off aria-invalid, which CF7 maintains on every control it
   validates — so the visual state and the state assistive tech is told
   about can never disagree.
   ------------------------------------------------------------- */
.wpcf7-form .wpcf7-form-control[aria-invalid="true"] {
	border-color: var(--phc-danger);
}

.wpcf7-form .wpcf7-form-control[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
}

/* Two classes to beat CF7's own `.wpcf7-not-valid-tip` (0,1,0). */
.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--phc-danger);
}

/* -------------------------------------------------------------
   Checkboxes, radios, acceptance
   ------------------------------------------------------------- */
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-acceptance {
	display: grid;
	gap: 0.55rem;
}

/* CF7 ships `.wpcf7-list-item { margin: 0 0 0 1em }`, which indents the
   first item as if it were nested under something. Grid gap above handles
   the spacing, so the margin goes. */
.wpcf7-form .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
}

.wpcf7-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	/* These labels are read as sentences, not as field names, so they opt
	   out of the uppercase label treatment entirely. */
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--phc-graphite);
	cursor: pointer;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
	width: 1.05em;
	height: 1.05em;
	margin: 0;
	/* Lines the box up with the first line of a wrapping label instead of
	   floating against the cap height. */
	flex: 0 0 auto;
	margin-top: 0.18em;
	accent-color: var(--phc-yellow-deep);
}

/* The consent line ("я согласен с политикой…") is legal text, not a
   question — smaller, and its link picks up the accent so it reads as
   something you can open. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
	font-size: 0.85rem;
	color: var(--phc-stone);
}

.wpcf7-form .wpcf7-acceptance a {
	color: var(--phc-yellow-deep);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------
   Submit

   `.phc-btn--primary` gets its hover from an `::after` fill that slides
   up behind the label. An <input> is a void element and can hold no
   pseudo-element, and the markup belongs to CF7, so wrapping it is not an
   option either. The same visual result — yellow at rest, ink on hover —
   is produced with a plain background/colour transition instead. Kept in
   this file rather than added to .phc-btn, because it is a workaround for
   one element's limitation, not a new button variant anyone should reach
   for deliberately.
   ------------------------------------------------------------- */
.wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--phc-field-h);
	padding: 0.75em 1.9em;
	border: 1px solid var(--phc-yellow);
	border-radius: 999px;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.3s var(--phc-ease), border-color 0.3s var(--phc-ease), color 0.3s var(--phc-ease);
}

.wpcf7-form .wpcf7-submit:hover {
	background: var(--phc-ink);
	border-color: var(--phc-ink);
	color: var(--phc-paper);
}

.wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--phc-yellow-deep);
	outline-offset: 3px;
}

/* CF7 adds `.submitting` to the form during the request. Dimming the
   button and blocking the cursor is the only "something is happening"
   signal a user gets besides the spinner. */
.wpcf7-form.submitting .wpcf7-submit {
	opacity: 0.55;
	cursor: progress;
}

.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* CF7 draws the spinner itself and animates it from its own stylesheet;
   only the colour and placement are restyled here so it doesn't sit on
   the page as a stray dark blob. */
.wpcf7-spinner {
	background-color: var(--phc-yellow-deep);
	margin: 0 0 0 0.8em;
	vertical-align: middle;
}

/* -------------------------------------------------------------
   Response message

   Same object as the site's WooCommerce notices (assets/css/woocommerce.css):
   white card, 3px accent rule down the left, small type. Three classes
   plus the element to clear CF7's own `.wpcf7 form .wpcf7-response-output`
   (0,2,1) without relying on which stylesheet loaded last.

   `display` is deliberately untouched — CF7 toggles it by form state.
   ------------------------------------------------------------- */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
	margin: 1.4rem 0 0;
	padding: 1em 1.4em;
	border: 0;
	border-left: 3px solid var(--phc-yellow-deep);
	border-radius: var(--phc-radius-s);
	background: var(--phc-white);
	font-size: 0.9rem;
	color: var(--phc-ink);
}

.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	border-left-color: var(--phc-yellow-deep);
}

.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output {
	border-left-color: var(--phc-danger);
}

/* CF7 4.x state classes. Kept because a site can be running an older
   plugin build, or a cached page rendered by one, and an unstyled message
   box is worse than a redundant rule. */
.wpcf7 .wpcf7-mail-sent-ok {
	border-left-color: var(--phc-yellow-deep);
}

.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing,
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-spam-blocked {
	border-left-color: var(--phc-danger);
}

/* -------------------------------------------------------------
   Optional two-column layout

   For when the client wraps fields in their own markup inside the CF7
   form editor, e.g.:
     <div class="phc-form-grid"> [text* your-name] [email* your-email] </div>
   Single column until 720px, matching every other grid in this theme.
   ------------------------------------------------------------- */
.phc-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

@media (min-width: 720px) {
	.phc-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.phc-form-grid--wide {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-form .wpcf7-form-control,
	.wpcf7-form .wpcf7-submit {
		transition: none;
	}
}