/**
 * Vanshap Capital — Fluent Forms.
 *
 * Scoped entirely to `.vc-registration-form`, which is NOT a class Fluent Forms
 * invents: it is passed in from the shortcode —
 *
 *     [fluentform id="6" css_classes="vc-registration-form"]
 *
 * — and lands on the form's wrapper div. That route is deliberate. The form
 * editor has a "CSS class" box under Settings → Layout, and in 6.2.14 its value
 * reaches only the JavaScript config object, never the DOM, so a rule written
 * against it silently matches nothing. Form 4 has carried that setting since
 * August and nothing has ever styled it. If this stylesheet appears to do
 * nothing, check the shortcode attribute before anything else.
 *
 * Nothing here is global. Another Fluent Form added later renders in the
 * plugin's default skin until its shortcode opts in the same way — which is the
 * intended behaviour, not an oversight: these rules assume a single-column form
 * on Paper inside a narrow measure, and would misdraw a wide multi-column one.
 *
 * Structure, since the class names give no clue:
 *
 *   .fluentform.vc-registration-form     wrapper (also holds the error stack)
 *     form.frm-fluent-form
 *       .ff-el-group.ff-el-section-break     h3 + a description div + an <hr>
 *         ⚠️ the div's class is ff-section_break_desk, not …_desc — the
 *            vendor's typo, in SectionBreak.php. It renders empty when the
 *            section's `description` setting is blank, which it is on four
 *            of this form's five breaks.
 *       .ff-el-group                         one field
 *         .ff-el-input--label > label
 *         .ff-el-input--content > .ff-el-form-control
 *         .ff-el-help-message
 *       .ff-t-container > .ff-t-cell         a column row
 *       .ff_submit_btn_wrapper > button.ff-btn-submit
 *
 * @package Vanshap
 */

/* ════ The vendor's own variables ═══════════════════════════════════════ */

/* Fluent Forms' default skin is variable-driven, exactly as PMPro's is, and
   that is the extension point to use: overriding these restyles every control
   the plugin draws at once and survives an update that reshuffles selectors.
   Chasing its individual rules instead means a specificity war against markup
   we do not own — see the PMPro block in sections.css, which lost one.

   The radius is not cosmetic. tokens.css sets --radius: 0 because the design is
   square-cornered throughout, and the plugin's 7px was quietly breaking that on
   every input, the select and the submit. */
.vc-registration-form {
	--fluentform-primary:       var(--ocean);
	--fluentform-secondary:     var(--text-body);
	--fluentform-danger:        var(--signal-error);
	--fluentform-border-color:  var(--sky);
	--fluentform-border-radius: var(--radius);
}


/* ════ Section bands ════════════════════════════════════════════════════ */

/* A section break is a band within the form, not a title over it, so it takes
   the treatment the portfolio groups and the materials lists already use: a
   tracked-caps label under a 1px accent rule. It was drawn once as a serif
   heading and read as the page's own title competing with "Access
   registration" in the ocean band above — the same thing that happened to the
   holdings headings on 19 Sep 2026.

   The rule is moved above the label with `order` rather than by hiding the
   <hr> and drawing a border: one line in the markup stays one line on the
   page, and the heading keeps its own element. */
.vc-registration-form .ff-el-section-break {
	display: flex;
	flex-direction: column;
	margin-block: var(--space-8) var(--space-5);
}

.vc-registration-form .ff-el-group.ff-el-section-break:first-child {
	margin-block-start: 0;
}

.vc-registration-form .ff-el-section-break hr {
	order: -1;
	height: 0;
	border: 0;
	border-block-start: 1px solid var(--rule-accent);
	margin: 0 0 var(--space-3);
	background: none;
}

.vc-registration-form .ff-el-section-title {
	font-family: var(--font-text);
	font-size: var(--size-eyebrow-lg);
	font-weight: var(--weight-regular);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-label);
	line-height: 1.4;
	margin: 0;
}

/* The sentence under a band label. Only one section carries one today —
   "Schedule a Time to Talk" — and it is an instruction the applicant has to act
   on before the calendar below makes sense.
 *
 * Body copy in --text-body rather than the --text-label grey .ff-el-help-message
   takes: that one annotates a single field and sits beside it, this one
   introduces a whole section and is the first thing read in it. Ink is the most
   legible thing the palette has and there is no reason to spend less here.
 *
 * ⚠️ ff-section_break_desk, with a k. The vendor's typo — see the note in the
   file header before "correcting" it.
 *
 * No ordering work needed: .ff-el-section-break is a flex column with the <hr>
   pulled to order:-1, so the DOM's title → description → rule draws as
   rule → title → description. */
.vc-registration-form .ff-section_break_desk {
	font-family: var(--font-text);
	font-size: var(--size-body);
	font-weight: var(--weight-light);
	line-height: var(--lh-body);
	color: var(--text-body);
	max-width: 60ch;
	margin: var(--space-3) 0 0;
}

/* Nothing to space off when the setting is blank, which it is on the other
   four. Without this they each add a --space-3 gap below their label. */
.vc-registration-form .ff-section_break_desk:empty {
	display: none;
}


/* ════ Fields ═══════════════════════════════════════════════════════════ */

.vc-registration-form .ff-el-group {
	margin-block-end: var(--space-5);
}

/* The label is the same tracked-caps mark the rest of the site uses to annotate
   one line — a rung below the band label above it, which is --size-eyebrow-lg.
   Regular rather than Light: see the note on --text-label in tokens.css. Both
   halves of that pairing are needed and neither should be undone alone. */
.vc-registration-form .ff-el-input--label label {
	display: block;
	font-family: var(--font-text);
	font-size: var(--size-eyebrow);
	font-weight: var(--weight-regular);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-label);
	line-height: 1.4;
	margin-block-end: var(--space-2);
}

/* Signal Blue, not red. The plugin draws the asterisk in --fluentform-danger,
   which the block at the top of this file remapped to --signal-error — and
   every second field here is required, so that would spend the page's only
   alarming colour on the ordinary case and leave nothing louder for a field
   that has actually failed. --signal-error stays reserved for that.
 *
 * ⚠️ The full chain is needed. The plugin's own rule is
   `.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after`,
   which is (0,4,1); a shorter selector here tied it on specificity and then won
   or lost on stylesheet order, which is not ours to fix. Both placements are
   matched because the asterisk side is a form setting and can be changed in the
   editor without anyone thinking about this file. */
.vc-registration-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.vc-registration-form .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
	color: var(--accent-mark);
}

.vc-registration-form .ff-el-form-control {
	width: 100%;
	font-family: var(--font-text);
	font-size: var(--size-body);
	font-weight: var(--weight-light);
	line-height: var(--lh-body);
	color: var(--text-body);
	background-color: var(--paper);
	border: var(--rule-sky);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--space-3) var(--space-4);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --text-disabled, the one lighter grey left on the site. A placeholder that
   sets in the same grey as a label reads as an answer somebody already typed;
   this is the case tokens.css keeps Slate for. */
.vc-registration-form .ff-el-form-control::placeholder {
	color: var(--text-disabled);
	opacity: 1;  /* Firefox dims placeholders by default; the token is already the dimming. */
}

/* An inset ring rather than an outer glow: the design has no shadows, and an
   outline would sit outside a square border and read as a second box. */
.vc-registration-form .ff-el-form-control:focus,
.vc-registration-form .ff-el-form-control:focus-visible {
	border-color: var(--ocean);
	box-shadow: inset 0 0 0 1px var(--ocean);
	outline: none;
}

.vc-registration-form select.ff-el-form-control {
	/* The native arrow is kept — it is the affordance that says "select", and
	   redrawing it means owning its two states in both colour schemes. */
	height: auto;
	padding-block: var(--space-3);
}

/* --text-label because this is a label-role annotation on the field above it,
   not because it is darker: --text-muted is the same grey now. See the note on
   --text-muted in tokens.css. It is the one piece of text on the form a reader
   most needs and the last that should be set faintly. */
.vc-registration-form .ff-el-help-message {
	font-family: var(--font-text);
	font-style: normal;  /* the plugin italicises it; the site has no italic body face */
	font-size: var(--size-meta);
	font-weight: var(--weight-light);
	line-height: var(--lh-body);
	color: var(--text-label);
	margin-block-start: var(--space-2);
}


/* ════ Column rows ══════════════════════════════════════════════════════ */

/* City / State, and the first/last name pair. Both are the same .ff-t-container
   markup, but they are built by different components and only one of them
   supplies a width: the column element writes `flex-basis: 50%` inline on each
   cell, and the name element writes nothing at all.
 *
 * ⚠️ So the basis below is not redundant. Left at the initial `auto`, a cell's
   base size is its content — and its content is an input at width:100%, which
   has no intrinsic width to resolve against. Both cells measured the full
   736px measure and the name pair stacked. A basis of 0 makes the cells share
   the row by flex-grow instead, and the inline 50% the column element sets
   still wins over it, so City/State keep their declared widths. */
.vc-registration-form .ff-t-container {
	display: flex;
	/* ⚠️ nowrap, and not by preference. A flex line wraps on the items' BASE
	   sizes, before any shrinking is applied, so two cells at an inline 50%
	   plus a 24px gap exceed the line and City and State dropped onto separate
	   rows while each stayed half the width of the measure. With nowrap they
	   shrink to accommodate the gap instead. The phone query below turns
	   wrapping back on, where stacking is what is wanted. */
	flex-wrap: nowrap;
	gap: 0 var(--space-5);
}

.vc-registration-form .ff-t-cell {
	min-width: 0;
	flex: 1 1 0;
}

/* Below this the two halves of a pair are narrower than the text they hold.
 *
 * ⚠️ !important, deliberately and narrowly. The column element's cells carry
   their width as an INLINE style, which no selector can outrank; this is the
   one declaration that has to beat it and it is scoped to one form at one
   width. */
@media (max-width: 600px) {
	.vc-registration-form .ff-t-container {
		flex-wrap: wrap;
	}

	.vc-registration-form .ff-t-cell {
		flex-basis: 100% !important;
	}
}


/* ════ Checkboxes ═══════════════════════════════════════════════════════ */

/* The accreditation confirmation and the two consents. Their label is a
   sentence, not a word, so it sets in body type rather than as a field label
   and the box aligns to the first line of it. */
.vc-registration-form .ff-el-form-check {
	margin-block-end: var(--space-4);
}

.vc-registration-form .ff-el-form-check:last-child {
	margin-block-end: 0;
}

.vc-registration-form label.ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-family: var(--font-text);
	font-size: var(--size-body-sm);
	font-weight: var(--weight-light);
	line-height: var(--lh-body);
	color: var(--text-body);
	margin-bottom: 0;
	cursor: pointer;
}

.vc-registration-form .ff-el-form-check-input {
	flex: none;
	width: 1rem;
	height: 1rem;
	/* Aligns the box to the cap height of the first line rather than to the
	   line box, which sits it visibly low against 15px/1.65 text. */
	margin-block-start: 0.25em;
	accent-color: var(--ocean);
}

/* The SEC definition, the Terms and the Privacy Policy. Underlined rather than
   colour-only: these are the three links on the page a reader is most likely to
   want, and colour alone is not a link cue for everyone. */
.vc-registration-form .ff-el-form-check-label a {
	color: var(--ocean);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.vc-registration-form .ff-el-form-check-label a:hover,
.vc-registration-form .ff-el-form-check-label a:focus-visible {
	color: var(--vanshap-navy);
}


/* ════ Validation ═══════════════════════════════════════════════════════ */

.vc-registration-form .ff-el-is-error .ff-el-form-control,
.vc-registration-form .ff-el-form-control.ff-el-is-error {
	border-color: var(--signal-error);
}

.vc-registration-form .error,
.vc-registration-form .text-danger,
.vc-registration-form .ff-el-is-error .error {
	font-family: var(--font-text);
	font-size: var(--size-meta);
	font-weight: var(--weight-regular);
	line-height: var(--lh-body);
	color: var(--text-error);
	margin-block-start: var(--space-2);
}

/* The stack the plugin prints after the form when a submission is refused. */
.vc-registration-form .ff-errors-in-stack {
	margin-block-start: var(--space-5);
	color: var(--text-error);
	font-size: var(--size-body-sm);
}

/* The confirmation that replaces the form on success. The plugin draws it as a
   grey-bordered card with a drop shadow; the design has neither, so the whole
   box is reset and the message is set as the serif lede it is — the last thing
   an applicant reads, and the only thing on the page at that point. */
.vc-registration-form .ff-message-success {
	border: 0;
	border-block-start: 1px solid var(--rule-accent);
	box-shadow: var(--shadow);
	background: none;
	margin-block-start: 0;
	padding: var(--space-5) 0 0;
	font-family: var(--font-display);
	font-size: var(--size-lede);
	line-height: var(--lh-subhead);
	color: var(--text-subhead);
}


/* ════ Submit ═══════════════════════════════════════════════════════════ */

/* Square, hairline-bordered, filling on hover — the design's only button, the
   same one the document lists and the login page's Register control draw.
 *
 * ⚠️ The doubled `.ff-btn.ff-btn-submit` is load-bearing. GeneratePress paints
 * a background on bare `button` from its inline stylesheet, and the plugin adds
 * its own on `.ff_btn_style`; a single class here lost to both and the button
 * stayed near-black with the padding and casing applied over it. Three classes
 * clears them without reaching for !important. */
.vc-registration-form .ff_submit_btn_wrapper {
	margin-block-start: var(--space-7);
}

.vc-registration-form .ff-btn.ff-btn-submit,
.vc-registration-form .ff-btn.ff-btn-submit.ff_btn_style {
	display: inline-block;
	background: transparent;
	color: var(--vanshap-navy);
	border: 1px solid var(--vanshap-navy);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 13px 26px;
	font-family: var(--font-text);
	font-size: var(--size-nav);
	font-weight: var(--weight-regular);
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vc-registration-form .ff-btn.ff-btn-submit:hover,
.vc-registration-form .ff-btn.ff-btn-submit:focus-visible,
.vc-registration-form .ff-btn.ff-btn-submit.ff_btn_style:hover,
.vc-registration-form .ff-btn.ff-btn-submit.ff_btn_style:focus-visible {
	background: var(--vanshap-navy);
	color: var(--paper);
	opacity: 1;  /* the plugin fades its buttons to .8 on hover; the fill is the hover here */
}


/* ════ The booking widget ═══════════════════════════════════════════════ */

/* FluentBooking mounts its calendar into an empty div after the page loads and
   paints it from its own variables, which it declares on :root. Only those are
   set here — reaching into the rendered calendar's class names would be styling
   markup that does not exist until JavaScript runs and is not ours in any case.
 *
 * ⚠️ These names are underscored, not hyphenated, and both spellings of the
   primary appear in the plugin's own sheets — --fcal_primary_color and
   --fcal_primaryColor are two different variables and different components read
   each. Setting only one leaves half the calendar on the vendor's #386bb8,
   which is close enough to Ocean to look like a rendering artefact rather than
   a miss. They are redeclared on .fcal_cal_wrap rather than on :root so
   nothing outside this form is touched.
 *
 * The timezone select below the calendar is NOT covered: it is an Element UI
   control whose dropdown panel mounts at the end of <body>, outside this
   wrapper and therefore outside the variables. It keeps the plugin's styling,
   which is the honest outcome — the alternative is styling a detached panel by
   its generated class names.
 *
 * The sibling mapping for FluentBooking's OWN standalone pages — reschedule, cancel
   and confirmation — is booking.css, kept separate on purpose: that one owns a whole
   document, where this one must not reach past .vc-registration-form. The doubled
   spelling warned about above applies to both. */
.vc-registration-form .fcal_cal_wrap {
	--fcal_primary_color:       var(--ocean);
	--fcal_primaryColor:        var(--ocean);
	--fcal_dark:                var(--text-body);
	--fcal_gray:                var(--text-muted);
	--fcal_cal_bg:              var(--paper);
	--fcal_input_bg:            var(--paper);
	--fcal_body_bg:             var(--surface-panel);
	--fcal_thBG:                var(--surface-panel);
	--fcal_enable_day_bg:       var(--surface-panel);
	--fcal_slot_border:         var(--sky);
	--fcal_date_disabled_color: var(--text-disabled);  /* must stay lighter — see tokens.css */
	--fcal_date_radius:         var(--radius);

	margin-block-start: var(--space-3);
}