/*
 * Salesforce Popup template — form styling.
 *
 * The page content is a raw Salesforce Web-to-Lead form pasted into a Custom HTML block, so
 * there are no nk-* classes to hook: the markup is a bare <form> with <label for>, three
 * text inputs and a submit. Styling it by element, scoped to a wrapper, is the same approach
 * blocks/landing-page/style.css already takes for Contact Form 7's markup — see the
 * "Form styling" section there. Every value below is a theme.json token.
 *
 * SCOPE, and why it is split between two hooks:
 *
 *   - .entry-content rules use the body class WordPress emits for an assigned custom
 *     template, .page-template-page-salesforce-popup. That is page layout, front end only.
 *   - Everything from the form inward hangs off .content-salesforce-form, the wrapper class
 *     that lives in the pasted CONTENT rather than in the template. That matters because the
 *     block editor canvas has no page-template-* body class, so a selector keyed on the
 *     template can never match in the editor. Keying on a content class makes the same rules
 *     work in both places, which is what lets add_editor_style() render the form styled in
 *     Gutenberg (see nk_sf_popup_add_editor_style() in inc/salesforce-popup.php).
 *
 * These element selectors are still not global: the stylesheet is only ENQUEUED on this
 * template (front end) or on this template's edit screen (editor), so the PHP gate — not the
 * selector — is what keeps them off other pages.
 *
 * NO ROOT GUTTER APPLIES ON THIS TEMPLATE, so nothing here overrides one. theme.json does
 * set a 72px root gutter (styles.spacing.padding) with useRootPaddingAwareAlignments, and an
 * earlier draft of this file cancelled it — but core only applies that padding through the
 * `has-global-padding` class, which it adds to CONSTRAINED layouts. page-salesforce-popup.html
 * uses layout type "default", so <main> renders is-layout-flow and NO element on the page
 * carries has-global-padding (verified in the rendered HTML: zero occurrences in the body).
 * The consequence to know is the opposite of a gutter: content runs edge to edge with no
 * horizontal padding at all. If the popup wants breathing room, set it on a Group in the
 * editor — and if this template is ever switched to a constrained layout, the 72px gutter
 * WILL start applying and will need cancelling here.
 *
 * WIDTHS ARE SET HERE, in the Container section below. The 600px form measure is a NEW token
 * (components.salesforce-popup.form-max-width) rather than a literal or a borrowed one:
 * CLAUDE.md requires a new size to be added to theme.json first, and seven other components
 * already define a 600px max-width of their own — reusing one of those would couple this
 * template to, say, location-team's subhead.
 *
 * @package NeilKelly
 */

/* ---------------------------------------------------------------------------
 * Container
 *
 * The template composes post_content in a `default` (flow) layout, so nothing constrains or
 * centres it by default — the content would run the full viewport width. These two rules put
 * it back on the theme's normal measure.
 *
 * .entry-content takes the global content size, the same
 * var(--wp--style--global--content-size) + margin-inline:auto + padding-inline trio the block
 * CSS uses for a container (see blocks/locations/style.css:18, blocks/services/style.css:11).
 * The 24px inset is spacing--6; it keeps copy off the edge at popup widths, which is where it
 * actually matters, since the max-width only binds above 1296px.
 *
 * No box-sizing here, deliberately — matching .nk-locations__container, which pairs the same
 * max-width and padding-inline without it. This theme ships no universal reset (site-header
 * scopes its own `* { box-sizing: border-box }` to itself), so .entry-content is content-box
 * and the padding sits OUTSIDE the cap: above 1296px the outer width is 1296 + 48. That is
 * the house behaviour and is invisible at any popup size; add box-sizing: border-box here if
 * the cap should ever mean the outer width instead.
 *
 * .content-salesforce-form is the editor-added wrapper around the Web-to-Lead markup, held to
 * a 600px reading measure so the fields do not stretch to the full container. Its token is
 * this template's own — see the header note.
 * ------------------------------------------------------------------------ */

.page-template-page-salesforce-popup .entry-content {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--6);
}

.content-salesforce-form {
	max-width: var(--wp--custom--components--salesforce-popup--form-max-width);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Form layout
 *
 * The pasted markup wraps nothing: label and input are siblings, straight in the <form>, so
 * a single 14px flex `gap` (spacing--3-5 — note spacing--14 is 51px, not 14px) sets every
 * interval: label to its input, input to the next label, and last field to the submit.
 *
 * THE TRADE, since it is deliberate: a gap cannot tell a label-to-its-own-input step from a
 * field-to-field step, so there is no tighter pairing of a label with its field. An earlier
 * version used label margins to get that grouping; this is uniform by request. Label margins
 * and the submit's margin-top were both removed at the same time — left in, they would have
 * ADDED to the gap (label to input 22px, input to next label 30px) rather than replacing it.
 *
 * Hidden inputs (oid, retURL, lead_source and the two custom fields) need no handling — the
 * UA stylesheet gives input[type="hidden"] display:none, so they never become flex items.
 *
 * The <p> rule is defensive: the version of this form on the old site wrapped some fields in
 * paragraphs, and a re-paste from there would otherwise inherit the theme's paragraph margins
 * on top of these.
 * ------------------------------------------------------------------------ */

.content-salesforce-form form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3-5);
}

.content-salesforce-form form p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Labels
 *
 * No precedent to copy: the theme's other "forms" (conversion-form,
 * contact-location-form) are Calendly iframes, and the footer subscribe form is
 * placeholder-only with no visible labels. Built from the type scale instead — sm-md /
 * semibold / lg-tight, ink-primary — so it reads as a field label without competing with
 * the heading above it. Raise it if the designer wants a different treatment.
 * ------------------------------------------------------------------------ */

.content-salesforce-form form label {
	display: block;
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
}

/* ---------------------------------------------------------------------------
 * Inputs — the landing-page CF7 treatment, value for value
 * (blocks/landing-page/style.css, "Form styling"), which in turn adapts the footer's
 * .nk-footer__subscribe-input height/padding/border/radius to a light background.
 *
 * box-sizing is set explicitly because this theme ships no universal reset — without it the
 * 1px border and horizontal padding push a width:100% field past its container.
 * ------------------------------------------------------------------------ */

.content-salesforce-form form input[type="text"],
.content-salesforce-form form input[type="email"],
.content-salesforce-form form input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	height: var(--wp--custom--components--site-footer--input-height);
	padding: 0 var(--wp--preset--spacing--4-5);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--default);
	background: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--ink-primary);
	outline: none;
}

.content-salesforce-form form input::placeholder {
	color: var(--wp--preset--color--neutral-500);
}

/* Focus ring inset by 2px so it reads inside the field's own border rather than doubling it.
   Never removed — CLAUDE.md's accessibility primitives require a visible focus state. */
.content-salesforce-form form input:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: -2px;
}

/* ---------------------------------------------------------------------------
 * Submit — primary CTA on a light background, i.e. BLACK, per CLAUDE.md's brand rules
 * (approved 2026-07-09; red is retired from CTAs). Hover lifts one step to neutral-800,
 * because black cannot darken. Same treatment as the landing-page submit.
 *
 * align-self keeps the button its natural width instead of stretching to the field width,
 * which is what a flex column would otherwise do to it.
 * ------------------------------------------------------------------------ */

.content-salesforce-form form input[type="submit"] {
	box-sizing: border-box;
	align-self: flex-start;
	max-width: 100%;
	min-height: var(--wp--preset--spacing--14);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--brand-white);
	background: var(--wp--preset--color--brand-black);
	border: 1.5px solid var(--wp--preset--color--brand-black);
	border-radius: var(--wp--custom--radius--lg);
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.content-salesforce-form form input[type="submit"]:hover,
.content-salesforce-form form input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--neutral-800);
	border-color: var(--wp--preset--color--neutral-800);
}

.content-salesforce-form form input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-black);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.content-salesforce-form form input[type="submit"] {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Terms line
 *
 * The opt-in/unsubscribe sentence that follows the form inside .content-salesforce-form.
 * Small and italic so it reads as fine print without competing with the fields above it.
 * `sm` (13px) is the theme's small body size; `xs` (12px) is available if the designer wants
 * it a step smaller. Colour is left inherited rather than muted — this is consent copy, and
 * dropping it to a grey would cut its contrast for no benefit.
 * ------------------------------------------------------------------------ */

.content-salesforce-form .terms {
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * reCAPTCHA
 *
 * The third Web-to-Lead form to carry a widget, after the site footer and
 * learning-hub-newsletter. The markup lives in the Custom HTML block rather than a
 * render.php, but it emits the same data-* contract the shared loader reads
 * (assets/js/salesforce-captcha.js — see neilkelly_enqueue_recaptcha() in functions.php),
 * so adding this form cost no JavaScript.
 *
 * NO `position` ON THESE BOXES. reCAPTCHA's challenge dialog is absolutely positioned
 * inside the widget box, so giving it a position makes it the containing block and any
 * overflow above would clip the challenge.
 *
 * AND NO `overflow: hidden` EITHER — deliberately unlike .nk-footer__subscribe-captcha.
 * reCAPTCHA's iframe is a fixed 304px; the footer clips it at a 320px viewport, taking the
 * badge and the Privacy/Terms links with it. This form sits in a 600px measure with 24px of
 * entry-content inset, so at 320px it has 272px — the same squeeze — but with no overflow
 * rule the widget simply overhangs rather than losing its links. The usual transform:scale()
 * remedy is what the note above rules out, so not clipping in the first place is the cheaper
 * answer here.
 * ------------------------------------------------------------------------ */

.content-salesforce-form .nk-sf-popup__captcha-widget {
	box-sizing: border-box;
	width: var(--wp--custom--components--salesforce-captcha--width);
	height: var(--wp--custom--components--salesforce-captcha--height);
	max-width: 100%;
}

/* Placeholder AND status line in one: the loader swaps this text while api.js is in flight,
   then removes it when the widget renders. Filling the reserved box means the waiting
   message occupies space the layout already had, so the widget arriving costs no shift. */
.content-salesforce-form .nk-sf-popup__captcha-note {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 var(--wp--preset--spacing--3-5);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-height--snug);
	text-align: center;
	color: var(--wp--preset--color--ink-secondary);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--default);
}

/* Shown by the loader on a blocked submit. The `hidden` attribute is what toggles it, and
   nothing here sets `display`, so the UA's display:none is left to do that job. */
.content-salesforce-form .nk-sf-popup__captcha-error {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--brand-red);
}