/**
 * Styles for Pardot lead forms swapped into `<div class="kbpd-swapped-form">`
 * by KbPardot\Core\IframeSwap (see core/IframeSwap.php in this plugin). The
 * theme's complete form styling lives under `#request-info-form`
 * (wp-content/themes/virtual-prep-school-configurable/src/scss/theme/_pardot.scss),
 * which only wraps the markup on /request-information/. Swapped forms render
 * on plain white content backgrounds on other pages, where two theme rules
 * stop being enough:
 *
 *   - `p.form-field:not(.hidden) input, select { border: none; }` is
 *     unscoped, so fields on every other page are invisible boxes with no
 *     border and a white background on a white page.
 *   - Pardot's own intro heading/paragraph markup (kept inside the <form>
 *     by FormParser::prepareFormDom, which unwraps layout <div>s) has no
 *     explicit color, so it inherits whatever washed-out color happens to
 *     surround it on a given page.
 *
 * Everything below is scoped under .kbpd-swapped-form so none of it can
 * leak onto unrelated markup, including the real #request-info-form page.
 * Values (border color/radius, focus ring, error color, button spacing)
 * are copied from the theme's compiled dist/css/main.css rather than
 * invented, so swapped forms match the site's existing look.
 */

/* ----- Field layout: two columns on desktop, single column under 768px ----- */
.kbpd-swapped-form form.kb-pardot-form-builder {
  display: flex;
  flex-wrap: wrap;
}

/* ----- Intro copy: Pardot's own headings/paragraphs/legends above the fields -----
 * These land as flex items alongside `p.form-field` inside the flex/wrap
 * form above (Pardot's layout <div>s are unwrapped by
 * FormParser::prepareFormDom, so this content ends up as a direct sibling
 * of the field <p>s). Without an explicit flex-basis they only take up
 * their content width and sit side by side with the first row of fields
 * instead of spanning the full row, so force them to break onto their own
 * line and give them the theme's readable heading color/weight. */
.kbpd-swapped-form form.kb-pardot-form-builder h1,
.kbpd-swapped-form form.kb-pardot-form-builder h2,
.kbpd-swapped-form form.kb-pardot-form-builder h3,
.kbpd-swapped-form form.kb-pardot-form-builder h4,
.kbpd-swapped-form form.kb-pardot-form-builder h5,
.kbpd-swapped-form form.kb-pardot-form-builder h6,
.kbpd-swapped-form form.kb-pardot-form-builder legend,
.kbpd-swapped-form form.kb-pardot-form-builder > p:not(.form-field):not(.submit),
.kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) + p:not(.form-field):not(.submit) {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  color: #212529;
  margin: 0 0 1rem;
}

/* Headings specifically: make sure they read as headings (not faint body
   text) — weight/size copied from the theme's own unscoped h1-h6 rule. */
.kbpd-swapped-form form.kb-pardot-form-builder h1,
.kbpd-swapped-form form.kb-pardot-form-builder h2,
.kbpd-swapped-form form.kb-pardot-form-builder h3,
.kbpd-swapped-form form.kb-pardot-form-builder h4,
.kbpd-swapped-form form.kb-pardot-form-builder h5,
.kbpd-swapped-form form.kb-pardot-form-builder h6 {
  font-weight: 500;
  line-height: 1.2;
}

/* Pardot's authored markup wraps the intro heading/paragraph text in
   <span style="color:#ecf0f1;"> (near-white, tuned for the form's original
   iframe background). On our white content backgrounds that's illegible.
   Only the four LP forms carry these spans (confirmed no p.form-field or
   p.smalltext span relies on an inline color the same way), and every
   .kbpd-swapped-form context on the site has a white background, so
   forcing these specific spans back to the heading's own color is safe.
   Inline styles only lose to a stylesheet rule with !important. */
.kbpd-swapped-form form.kb-pardot-form-builder h1 span[style*="color"],
.kbpd-swapped-form form.kb-pardot-form-builder h2 span[style*="color"],
.kbpd-swapped-form form.kb-pardot-form-builder h3 span[style*="color"],
.kbpd-swapped-form form.kb-pardot-form-builder h4 span[style*="color"],
.kbpd-swapped-form form.kb-pardot-form-builder h5 span[style*="color"],
.kbpd-swapped-form form.kb-pardot-form-builder h6 span[style*="color"],
.kbpd-swapped-form form.kb-pardot-form-builder > p:not(.form-field):not(.submit) span[style*="color"],
.kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) + p:not(.form-field):not(.submit) span[style*="color"] {
  color: inherit !important;
}

.kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) {
  box-sizing: border-box;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) {
    width: 50%;
  }
}

/* Defensive: Pardot's hidden-field wrapper <p>s (class "hidden"/"pd-hidden")
   only ever contain an <input type="hidden">, so they render nothing either
   way, but keep them out of the flex flow explicitly. */
.kbpd-swapped-form form.kb-pardot-form-builder p.form-field.hidden,
.kbpd-swapped-form form.kb-pardot-form-builder p.form-field.pd-hidden {
  display: none;
}

/* ----- Labels ----- */
.kbpd-swapped-form form.kb-pardot-form-builder label {
  display: block;
  color: #212529;
  margin-bottom: .25rem;
}

/* ----- Visible inputs/selects: restore the theme's own .form-control look ----- */
.kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) input.form-control,
.kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) select.form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) input.form-control:focus,
.kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) select.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.kbpd-swapped-form form.kb-pardot-form-builder input[type=checkbox] {
  width: 20px;
  position: relative;
  top: 1px;
}

/* ----- Validation / error messaging, same palette the theme already uses ----- */
.kbpd-swapped-form .validation-error,
.kbpd-swapped-form .errorTxt {
  color: #ff9489;
  font-size: .85rem;
}

.kbpd-swapped-form .alert {
  width: 100%;
}

/* ----- Submit button: theme already styles p.submit > input; just add spacing ----- */
.kbpd-swapped-form form.kb-pardot-form-builder p.submit {
  margin-top: 18px;
  margin-bottom: 20px;
}

/* ----- LP hero context: #pardot-form-shoved-in (four LP pages only) -----
 * home-2 (6944), homenew-saudi-arabia (6878), homenew-knowledge-hub-dubai
 * (6959), home-2-unbranded (6938) render the swapped form inside
 * `#pardot-form-shoved-in` (wp-content/theme-includes/acf-dynamic-page-layout/
 * content-blocks/hero.php, ~L55-99), which used to hold a Pardot iframe
 * with width="500" height="600". hero.php's own <style> block sizes that
 * card: base rule `#pardot-form-shoved-in iframe { width:100%;
 * max-width:500px }` (mobile, static flow, full-bleed-capped-at-500), then
 * `@media (min-width:1000px)` makes the wrapper `position:absolute;
 * right:0; top:50px` and the iframe `min-width:500px` (so the card sits
 * ~500px wide pinned to the hero's right edge), then
 * `@media (min-width:1400px)` nudges it inward to `right:15%`. hero.php is
 * untouched — those position/right/top rules on the `#pardot-form-shoved-in`
 * wrapper itself still apply and are left alone. What's missing is sizing
 * for our replacement content: the form has no width of its own, so its
 * flex two-column layout (~666px per field) was forcing the whole
 * (auto-width, absolutely positioned) wrapper out to 1300px+, overlapping
 * the hero copy and clipping the submit button. Mirror hero.php's iframe
 * sizing directly onto our card instead. */
#pardot-form-shoved-in .kbpd-swapped-form {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 20px;
}

@media (min-width: 1000px) {
  #pardot-form-shoved-in .kbpd-swapped-form {
    min-width: 500px;
  }
}

/* Single column only in this ~500px card — two 250px fields would be
   cramped, and hero.php never gave the old iframe more than ~500px to
   begin with. */
#pardot-form-shoved-in .kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) {
  flex-basis: 100%;
  width: 100%;
}

/* ----- Homepage dark section: .colored-block -----
 * The theme's dark-background section wrapper
 * (`.colored-block { background-color: var(--vp-colored-block-background-
 * color); color: var(--vp-colored-block-color); }`, dist/css/main.css)
 * wraps the swapped form only on the homepage (confirmed: the other 8
 * pages this form appears on are all white-background). Every dark-text
 * rule above (labels, headings, intro copy — #212529) is illegible there —
 * exactly why Pardot had originally authored near-white (#ecf0f1) inline
 * colors on this same form's headings, which an earlier fix neutralized
 * site-wide back to inherit. Flip text color to the section's own
 * intended color here, and only here: every selector below is prefixed
 * with `.colored-block` so nothing changes on the 8 white-background
 * pages. `var(--vp-colored-block-color, #fff)` mirrors the theme's own
 * variable (falls back to white, the theme's own default per
 * inc/customizer-css.php, if the variable is ever unset). */
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder label,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h1,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h2,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h3,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h4,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h5,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h6,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder legend,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder p.smalltext,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder > p:not(.form-field):not(.submit),
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) + p:not(.form-field):not(.submit) {
  color: var(--vp-colored-block-color, #fff) !important;
}

/* Beat our own site-wide `color: inherit !important` span-neutralizing
   rule (added for the near-white #ecf0f1 spans) directly rather than
   relying purely on inheritance, and also catch any inline-colored
   asterisk/required-marker span inside a label — the site-wide rule
   intentionally leaves label spans alone (labels live inside
   p.form-field, whose spans are otherwise off limits per that fix), but
   a dark inline color there needs the same treatment on this dark
   background. */
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h1 span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h2 span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h3 span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h4 span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h5 span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder h6 span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder > p:not(.form-field):not(.submit) span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) + p:not(.form-field):not(.submit) span[style*="color"],
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder label span[style*="color"] {
  color: var(--vp-colored-block-color, #fff) !important;
}

/* Inputs/selects keep their white face + dark text (unchanged) — just
   give the border more presence than the site-wide $gray-400 (#ced4da),
   which reads fine on a white page but has little presence as a boundary
   between a white input face and this dark section. $gray-600, already
   used elsewhere in the theme's bootstrap palette, keeps it in-theme. */
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) input.form-control,
.colored-block .kbpd-swapped-form form.kb-pardot-form-builder p.form-field:not(.hidden) select.form-control {
  border-color: #6c757d;
}

/* Validation/error text: the site-wide #ff9489 already reads as a light,
   warm color against this dark blue background — restated explicitly
   here rather than left to be merely assumed. .alert is untouched: its
   coloring comes from Bootstrap's self-contained .alert-success/
   .alert-danger pairs, not page text color, so it needs no override. */
.colored-block .kbpd-swapped-form .validation-error,
.colored-block .kbpd-swapped-form .errorTxt {
  color: #ff9489;
}