@media screen {
  /* IE7 needs !important */

  body  {
    background-color:#ffffff !important;
  }

  .sa-form.inquiry .sa-form-nav {
  margin-top: 4px;
  margin-bottom: 8px;
}
.sa-form.inquiry #custom-field-0 {
  display: none;
}
.sa-form.inquiry .sa-form-field {
  margin-bottom: 10px;
}
.sa-form.inquiry .sa-form-field[data-flavor="section"],
.sa-form.inquiry .sa-form-field[data-flavor="subsection"] {
  margin-top: 14px;
  margin-bottom: 8px;
}
.sa-form.inquiry .sa-form-nav-page-name,
.sa-form.inquiry .sa-form-field[data-flavor="section"],
.sa-form.inquiry .sa-form-field[data-flavor="subsection"] {
  color: #1E3C7A;
}
.sa-form.inquiry input.btn-primary {
  background-color: #1E3C7A !important;
  border-color: #1E3C7A !important;
  color: #ffffff !important;
}
.sa-form.inquiry input.btn-primary:hover {
  background-color: #152B5A !important;
  border-color: #152B5A !important;
}
.sa-form.inquiry input:focus,
.sa-form.inquiry textarea:focus,
.sa-form.inquiry select:focus {
  border-color: #F9D502 !important;
  box-shadow: 0 0 0 2px rgba(249,213,2,0.35) !important;
}
.sa-form.inquiry input[type="checkbox"],
.sa-form.inquiry input[type="radio"] {
  accent-color: #1E3C7A;
}
.sa-form.inquiry a {
  color: #1E3C7A;
}

/* P1: cap oversized textareas */
.sa-form.inquiry textarea {
  min-height: 96px;
  height: 96px;
  resize: vertical;
}

/* P2-5: subtle navy hairline under section/subsection headings */
.sa-form.inquiry .sa-form-field[data-flavor="section"],
.sa-form.inquiry .sa-form-field[data-flavor="subsection"] {
  border-bottom-color: rgba(30,60,122,0.15);
}

/* P2-6: soft navy-tinted input borders */
.sa-form.inquiry input[type="text"],
.sa-form.inquiry input[type="email"],
.sa-form.inquiry input[type="tel"],
.sa-form.inquiry input[type="number"],
.sa-form.inquiry select {
  border-color: #C7D0E0;
}

/* P2-7: top bar navy (scoped only to pages containing the inquiry form) */
body:has(.sa-form.inquiry) #content-body {
  border-top-color: #1E3C7A !important;
}

/* ===== Batch A: address & phone row pairing (narrow-safe) ===== */
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="address.city"]) {
  gap: 12px;
}
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="address.city"]) > [data-flavor="address.address_1"],
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="address.city"]) > [data-flavor="address.address_2"] {
  flex: 1 1 100% !important;
  width: 100% !important;
}
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="address.city"]) > [data-flavor="address.country"],
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="address.city"]) > [data-flavor="address.city"] {
  flex: 1 1 160px !important;
  width: auto !important;
}
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="address.city"]) > [data-flavor="address.state"],
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="address.city"]) > [data-flavor="address.zip"] {
  flex: 1 1 120px !important;
  width: auto !important;
}
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="phone.type"]) {
  gap: 12px;
}
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="phone.type"]) > [data-flavor="phone.type"] {
  flex: 1 1 110px !important;
  width: auto !important;
}
.sa-form.inquiry .sa-form-subfield-grouping:has([data-flavor="phone.type"]) > [data-flavor="phone.number"] {
  flex: 2 1 160px !important;
  width: auto !important;
}

/* ===== Batch B: comfier inputs, section rhythm, checkboxes, consistency ===== */
.sa-form.inquiry input[type="text"],
.sa-form.inquiry input[type="email"],
.sa-form.inquiry input[type="tel"],
.sa-form.inquiry input[type="number"],
.sa-form.inquiry select,
.sa-form.inquiry textarea {
  padding: 10px 12px;
  border-radius: 6px;
  line-height: 1.4;
}
.sa-form.inquiry input,
.sa-form.inquiry select {
  min-height: 42px;
}
.sa-form.inquiry .sa-form-field[data-flavor="section"] {
  margin-top: 26px;
  margin-bottom: 6px;
}
.sa-form.inquiry .sa-form-field[data-flavor="subsection"] {
  margin-top: 16px;
  margin-bottom: 6px;
}
.sa-form.inquiry input[type="checkbox"],
.sa-form.inquiry input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #1E3C7A;
}
.sa-form.inquiry label {
  line-height: 1.5;
}
.sa-form.inquiry select {
  color: #1E3C7A;
}
.sa-form.inquiry ::placeholder {
  color: #6B7280;
  opacity: 1;
}

/* ===== Batch C: label placement + checkbox alignment (2026-09-17) =====
   WHY: Finalsite emits each label AFTER its input in the DOM, so a parent saw
   an empty box with its label underneath. On a phone the label for the box in
   front of you was often off-screen below. Placement only — no field added,
   removed, renamed or reordered.
   TRAP: Finalsite hides conditional sub-fields (e.g. phone.opt_in) with the
   Bootstrap class "hidden". A .sa-form-sub-field rule outranks .hidden and
   forces those fields visible, so :not(.hidden) is load-bearing here. */
.sa-form.inquiry .sa-form-sub-field:not(.hidden):not(.hide):not([hidden]) {
  display: flex; flex-direction: column-reverse;
}
.sa-form.inquiry .sa-form-sub-field > .form-text { margin: 0 0 4px; }
.sa-form.inquiry .sa-form-sub-field-label { font-weight: 600; color: #1E3C7A; }

/* Align each box with its own text, without touching display */
.sa-form.inquiry label.checkbox-item-label input,
.sa-form.inquiry label.radio-item-label input { vertical-align: middle; margin: 0 8px 0 0; }
.sa-form.inquiry label.checkbox-item-label,
.sa-form.inquiry label.radio-item-label { line-height: 1.4; }

/* 16px stops iOS zooming the page when a parent taps a field */
.sa-form.inquiry input[type="text"], .sa-form.inquiry input[type="email"],
.sa-form.inquiry select, .sa-form.inquiry textarea { font-size: 16px; } 
/* ===== Batch D: show the portal logo on phones (2026-09-17) =====
   Finalsite's own CSS sets .header-image { display:none } below 768px, so a
   parent arriving from an ad landed on fsenrollment.com with nothing
   identifying Gateway — and most arrive on a phone, which defeated the logo
   entirely. clamp() gives the same responsive sizing with no @media block:
   ~52px on a phone, ~115px on desktop, unchanged from before. */
.header-image { display: block !important; text-align: center; margin: 0 0 6px; }
.header-image img { height: clamp(52px, 11vw, 115px) !important; width: auto !important; max-width: 100%; } 

  h1,
  h2,
  h3,
  .sa-form-title,
  .sa-form-nav-page-name,
  .sa-form-nav-pages-current i.fa-circle,
  .sa-form-field[data-flavor='section'],
  .sa-form-field[data-flavor='subsection']
  {
    color: #1E3C7A;
  }

  section h2:first-of-type {
    border-bottom-color: #1E3C7A;
  }

  #content-body {
    border-top-color: #1E3C7A;
  }

  .notification-alert {
    background-color: rgba(30, 60, 122, 0.1);
  }

  .notification-alert .notification-icon > i {
    color: #1E3C7A;
  }

  .summary-communication > .notification-icon > .fa-bullhorn {
    color: #1E3C7A;
  }

  li.page-item.active > a.page-link {
    background-color: #1E3C7A;
  }

  ul.header-actions > li > a > .header-action-label {
    color: #1E3C7A;
  }

  .student-summary-action-link {
    color: #1E3C7A;
  }

  button.btn-primary {
    background-color: #1E3C7A;
  }

  .ap-installment-list.table {
    .ap-installment-contact-highlight {
      background-color: #1E3C7A;
    }
  }
}
