/*
 * wholesale-contact.css: the /wholesale/ page (WP page 219206), the flag-off quote page
 * (inc/wholesale-contact-off-frozen.php), plus the contact card, its links and the Forminator form
 * rules that the flag-on page's quote section reuses.
 * Depends on gerbs-tokens.css and gerbs-components.css.
 * Enqueued via is_page(219206) conditional in functions.php (/wholesale/), in both flag states.
 *
 * The flag-on account page's own rules (the `.gwp-` classes) are assets/css/wholesale-page.css,
 * enqueued on that page only (inc/wholesale/page.php); they left this file on 2026-10-05 with the
 * W1 rebuild, and none of them ever matched the flag-off markup.
 *
 * 🚨 THE FLAG-OFF PAGE IS THE ROLLBACK TARGET. Its intended CSS differences from before TD7 are
 * exactly two: the H1 steps to --fs-32 at the 900px query (it held --fs-44 down to 641px), and its
 * four headings lost their local `text-wrap: balance`, which gerbs-tokens.css already applies to
 * every heading in #et-main-area (CLAUDE.md, "Headings must wrap cleanly").
 */

/* ─── Intro band ─────────────────────────────────────────────────────────── */

.wholesale-intro-band {
  background: var(--gerbs-yellow);
  padding: 48px 24px 52px;
}

.wholesale-intro-band__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.wholesale-intro-band__eyebrow {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gerbs-blue-press); /* brand blue on the yellow band is 3.56:1; blue-press is 6.79:1 */
  margin-bottom: 12px;
}

.wholesale-intro-band__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-44);
  font-weight: 700;
  color: var(--gerbs-ink);
  margin: 0 0 14px;
}

.wholesale-intro-band__sub {
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gerbs-ink);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* ─── Main content area ───────────────────────────────────────────────────── */

.wholesale-main {
  padding: 56px 24px 72px;
  background: var(--gerbs-fog);
}

.wholesale-main__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ─── Form card ───────────────────────────────────────────────────────────── */

.wholesale-form-card {
  background: #fff;
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-md);
  padding: 36px 36px 40px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.wholesale-form-card__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-24);
  font-weight: 700;
  color: var(--gerbs-ink);
  margin: 0 0 6px;
}

.wholesale-form-card__sub {
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  color: var(--gerbs-ink-70);
  margin: 0 0 28px;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

.wholesale-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Contact card */

/* Tinted, not a solid --gerbs-blue fill. Changed 2026-08-24 alongside the
 * matching card on /contact-us/ (assets/css/contact-us.css), so the two contact
 * surfaces stay one system. The full reasoning lives in that file's "Why this is
 * a TINT" note; the short version is that solid --gerbs-blue is this site's CTA
 * fill, so a static address block wearing it reads as a very large button, and
 * gerbs-notices.css already defines the Gerbs look as a soft tint plus a matching
 * border rather than a saturated slab.
 *
 * The border is load-bearing: --gerbs-blue-tint on the --gerbs-fog ground of
 * .wholesale-main is 1.09:1, so without it this card has no edge at all.
 * --gerbs-blue is 5.21:1 on that ground and is the border the notice DS pairs
 * with this tint. It is also the pairing .wholesale-step__num below already uses,
 * so the sidebar is now internally consistent. */
.wholesale-contact-card {
  background: var(--gerbs-blue-tint);
  border: 1px solid var(--gerbs-blue);
  border-radius: var(--radius-md);
  padding: 28px 28px 30px;
  color: var(--gerbs-ink);
}

.wholesale-contact-card__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--gerbs-ink);
  margin: 0 0 20px;
}

.wholesale-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wholesale-contact-list__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --gerbs-ink-70 is 5.90:1 on the tint. It has to clear the 4.5:1 normal-text
 * floor, not the 3:1 large-text one: this label is 12px. --gerbs-ink-50, the
 * usual muted choice, is 3.05:1 here and would fail. */
.wholesale-contact-list__label {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gerbs-ink-70);
}

/* 🚨 This class is on BOTH the phone/email <a> AND the address <span>
 * (the contact card in inc/wholesale-contact-off-frozen.php and inc/wholesale-contact-on.php).
 * Anything that reads as a link
 * therefore has to be scoped to `a.` below, or the street address gets a link's
 * colour and underline while being unclickable, which is the same false
 * affordance this change set out to remove, pointed the other way. */
.wholesale-contact-list__value {
  font-size: var(--fs-16);
  color: var(--gerbs-ink);
}

/* Underlined at REST, not only on hover.
 *
 * This was `text-decoration: none` with an underline that appeared on :hover,
 * which is a WCAG 1.4.1 failure that shipped and ran live: white text on the old
 * solid blue fill was the same colour as the surrounding copy, so in the resting
 * state the phone number and email address carried NO cue at all marking them as
 * interactive, and a hover cue does not exist for touch or keyboard users. On the
 * tint they are --gerbs-blue at 4.79:1 against --gerbs-ink copy, so they are now
 * marked by colour and by underline. Keep both: the underline is the cue that
 * actually satisfies 1.4.1, because #2F5EE6 against #111 is not a large enough
 * step to carry the distinction alone. */
a.wholesale-contact-list__value {
  /* 44px tap target (HIG review 2026-09-24, A6): the line box alone was 25px.
   * Same treatment as the matching link on /contact-us/. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gerbs-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

a.wholesale-contact-list__value:hover,
a.wholesale-contact-list__value:focus-visible {
  color: var(--gerbs-blue-hover);
  text-decoration-thickness: 2px;
}

/* There was no focus-visible rule on this card at all, so the only indicator was
 * the site's global #2F5EE6 ring, landing on the old #2F5EE6 fill at 1.0:1: an
 * invisible keyboard focus indicator (WCAG 2.4.7), live on production. On the
 * tint the same ring is 4.79:1. Declared here rather than left to the global so
 * the card defines its own indicator, the way the /contact-us/ card does. */
a.wholesale-contact-list__value:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Mirrors the equivalent block in contact-us.css so the two cards behave the
 * same. Deliberately scoped to this card only: the form controls and the submit
 * button further down this file have their own unguarded transitions (and a
 * translateY on :active) that predate this change, and widening the block to
 * cover them is a separate edit, noted in the PR. */
@media (prefers-reduced-motion: reduce) {
  a.wholesale-contact-list__value {
    transition: none;
  }
}

/* How-it-works card */

.wholesale-steps-card {
  background: #fff;
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-md);
  padding: 26px 28px 28px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.wholesale-steps-card__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--gerbs-ink);
  margin: 0 0 20px;
}

.wholesale-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wholesale-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.wholesale-step__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gerbs-blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--gerbs-blue);
}

.wholesale-step__body {
  padding-top: 6px;
}

.wholesale-step__title {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--gerbs-ink);
  margin-bottom: 4px;
}

.wholesale-step__desc {
  font-size: var(--fs-14);
  color: var(--gerbs-ink-70);
  margin: 0;
  text-wrap: pretty;
}

/* ─── Forminator form controls — Gerbs design system ─────────────────────────
 * The form renders via [forminator_form] with Forminator's default skin (gray
 * #ededed fills, teal submit, 2px corners). Everything below restyles those
 * controls to match the Gerbs DS: Fog input fills, hairline borders, blue
 * focus ring, and the brand blue pill submit button. Scoped to the page
 * wrapper so it never leaks to other Forminator forms on the site.
 * ────────────────────────────────────────────────────────────────────────── */

#wholesale-contact-page .forminator-custom-form .forminator-row {
  margin: 0 0 18px;
}

#wholesale-contact-page .forminator-custom-form .forminator-row:last-of-type {
  margin-bottom: 0;
}

/* Labels */
#wholesale-contact-page .forminator-custom-form .forminator-label {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-14) !important;
  font-weight: 600 !important;
  color: var(--gerbs-ink) !important;
  margin-bottom: 7px;
  line-height: 1.3;
}

#wholesale-contact-page .forminator-custom-form .forminator-required {
  color: var(--gerbs-blue);
}

/* Text inputs + textarea */
#wholesale-contact-page .forminator-custom-form .forminator-input,
#wholesale-contact-page .forminator-custom-form .forminator-textarea {
  width: 100%;
  background: var(--gerbs-fog) !important;
  /* ink-50, not ink-20: on a fog fill inside a white card the border is the
     only edge the control has, and ink-20 was 1.41:1 (WCAG 1.4.11 wants 3:1).
     ink-50 is 3.45:1 on white, 3.31:1 on fog. Same fix as contact-us.css. */
  border: 1px solid var(--gerbs-ink-50) !important;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  color: var(--gerbs-ink) !important;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#wholesale-contact-page .forminator-custom-form .forminator-input {
  height: 48px;
}

#wholesale-contact-page .forminator-custom-form .forminator-textarea {
  min-height: 132px;
  resize: vertical;
}

#wholesale-contact-page .forminator-custom-form .forminator-input::placeholder,
#wholesale-contact-page .forminator-custom-form .forminator-textarea::placeholder {
  color: var(--gerbs-ink-50);
}

#wholesale-contact-page .forminator-custom-form .forminator-input:focus,
#wholesale-contact-page .forminator-custom-form .forminator-textarea:focus {
  outline: none;
  background: #fff !important;
  border-color: var(--gerbs-blue) !important;
  box-shadow: 0 0 0 3px var(--gerbs-blue-tint);
}

/* Select2 dropdown — match input styling */
#wholesale-contact-page .forminator-custom-form .select2-container .select2-selection--single {
  height: 48px !important;
  background: var(--gerbs-fog) !important;
  border: 1px solid var(--gerbs-ink-50) !important; /* see the input rule above */
  border-radius: var(--radius-md) !important;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#wholesale-contact-page .forminator-custom-form .select2-container--open .select2-selection--single,
#wholesale-contact-page .forminator-custom-form .select2-container--focus .select2-selection--single {
  background: #fff !important;
  border-color: var(--gerbs-blue) !important;
  box-shadow: 0 0 0 3px var(--gerbs-blue-tint);
}

#wholesale-contact-page .forminator-custom-form .select2-selection--single .select2-selection__rendered {
  padding: 0 14px;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  color: var(--gerbs-ink);
  line-height: 46px;
}

/* ink-70: ink-50 measured 3.31:1 on the fog fill, under AA for 16px text. */
#wholesale-contact-page .forminator-custom-form .select2-selection--single .select2-selection__placeholder {
  color: var(--gerbs-ink-70);
}

#wholesale-contact-page .forminator-custom-form .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: 12px;
}

/* Selected dropdown option highlight (open panel) */
#wholesale-contact-page .forminator-custom-form .select2-results__option--highlighted[aria-selected],
.forminator-select2-results .select2-results__option--highlighted[aria-selected] {
  background: var(--gerbs-blue);
}

/* Submit button — brand blue pill */
#wholesale-contact-page .forminator-custom-form .forminator-button-submit {
  background: var(--gerbs-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 36px;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.05s ease;
}

#wholesale-contact-page .forminator-custom-form .forminator-button-submit:hover {
  background: var(--gerbs-blue-hover) !important;
}

#wholesale-contact-page .forminator-custom-form .forminator-button-submit:active {
  background: var(--gerbs-blue-press) !important;
  transform: translateY(1px);
}

/* ─── Responsive — ≤900px: stack grid ────────────────────────────────────── */

@media (max-width: 900px) {
  /* --fs-44 held down to 641px and set the H1 in four or five lines on a tablet (§ 13.5). */
  .wholesale-intro-band__heading {
    font-size: var(--fs-32);
  }

  .wholesale-main__inner {
    grid-template-columns: 1fr;
  }

  .wholesale-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .wholesale-contact-card,
  .wholesale-steps-card {
    flex: 1 1 280px;
  }
}

/* ─── Responsive — ≤640px: form rows to single column ────────────────────── */

@media (max-width: 640px) {
  .wholesale-form-card {
    padding: 24px 20px 28px;
  }

  .wholesale-sidebar {
    flex-direction: column;
  }
}


/* ─── Submission confirmation — on-brand success state ───────────────────────
 * Forminator wraps the thankyou-message in .forminator-response-message with a
 * default mint-green success skin. Neutralize that wrapper and style our own
 * .gerbs-form-confirm block: blue-tint card, CSS-drawn brand check, Bitter
 * heading, Inter body.
 * ────────────────────────────────────────────────────────────────────────── */

#wholesale-contact-page .forminator-custom-form .forminator-response-message.forminator-success {
  background: transparent !important;
  border: none !important;
  /* Forminator paints its success accent as a green inset box-shadow
     (rgb(6,121,99) 2px 0 0 0 inset); it peeked past the confirm card's
     rounded corners as two green marks on the left edge. Kill it. */
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--gerbs-ink) !important;
}

#wholesale-contact-page .gerbs-form-confirm {
  background: var(--gerbs-blue-tint);
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  text-align: center;
}

#wholesale-contact-page .gerbs-form-confirm__check {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gerbs-blue);
  margin-bottom: 18px;
  position: relative;
}

#wholesale-contact-page .gerbs-form-confirm__check::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 14px;
  width: 12px;
  height: 22px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

#wholesale-contact-page .gerbs-form-confirm__title {
  font-family: var(--ff-display);
  font-size: var(--fs-24);
  font-weight: 700;
  color: var(--gerbs-ink) !important;
  margin: 0 0 8px;
  text-wrap: balance;
}

#wholesale-contact-page .gerbs-form-confirm__text {
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  color: var(--gerbs-ink-70) !important;
  margin: 0 auto;
  max-width: 42ch;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ─── Hide Turnstile / captcha on this form ──────────────────────────────── */
/* § 13.5 asked whether this hides a captcha the server still requires. It does not: form 218941
 * has no captcha field at all (its fields read on production 2026-10-01: name, email, phone,
 * select, textarea), so this rule matches nothing today. */
#wholesale-contact-page .forminator-col--captcha,
#wholesale-contact-page .forminator-field--captcha {
  display: none !important;
}