/*
 * Court-Directory legacy-body compatibility layer.
 *
 * The Court-Directory pages (Default / State / County / Court) were built for the
 * old Bootstrap-3 master. They now use the shared Bootstrap-5 master
 * (gtts_new_master.Master) so they get the new design header/footer. This file
 * bridges the gaps that break the legacy body under the new master.
 *
 * Everything is scoped to #mainContent (the master's <main> wrapper) and/or uses
 * higher specificity than the legacy rules, so it NEVER affects the new header
 * or footer (which live outside #mainContent).
 */

/* ---- Hero banner -------------------------------------------------------- */

/* The old master had a FIXED header, so the banner used margin-top:110px to
   clear it. The new header is in normal flow, so that margin is just a white
   gap. Also let the banner grow with its content instead of a fixed height
   (a fixed height made overflowing content overlap the section below). */
#mainContent .top_banner {
  margin-top: 0 !important;
  height: auto !important;
  min-height: 600px;
}
#mainContent .top_banner > .container {
  height: auto !important;
  min-height: 460px;
}

/* Device image + state/county/court dropdowns side by side.
   Bootstrap 3 FLOATED grid columns, so the legacy `.row { display:block }` rule
   (statespecific.css) still rendered a two-column row. Bootstrap 5 columns use
   flex (no float), so under display:block they stacked and the dropdown column
   dropped to the bottom-left. Make this row flex so the dropdowns sit to the
   RIGHT of the device image, as designed. */
#mainContent .top_banner .pull-top > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#mainContent .top_banner .pull-top > .row > .device-image {
  text-align: center;
}

/* The new master sets `img { display: block }`. Legacy inline imagery (the step
   arrows, inline icons) needs inline-block to keep its row layout. The master's
   `max-width:100%` without `height:auto` stretched images that carry width/height
   attributes (e.g. the 892x624 "We Also Offer" cards) - restore height:auto so
   they keep their aspect ratio. */
#mainContent img {
  display: inline-block;
  height: auto;
}

/* Keep the "3 Easy Steps → Sign Up → Complete → Certificate" strip on one line,
   and sit it flush under the nav (the 32px top padding showed the dark banner
   background as a gap below the header). */
#mainContent .easy-steps {
  height: auto !important;
  padding-top: 0 !important;
}
#mainContent #easy {
  height: auto !important;
  white-space: nowrap;
}
#mainContent #easy img {
  display: inline-block;
  vertical-align: middle;
}
#mainContent #easy label {
  display: inline-block;
  vertical-align: middle;
}

/* ---- Bootstrap 3 helpers that Bootstrap 5 removed ---------------------- */

#mainContent .pull-right { float: right !important; }
#mainContent .pull-left  { float: left  !important; }
#mainContent .no-gutter  { margin-right: 0; margin-left: 0; }

/* BS5 removed the plain `.hidden` utility (BS3 had `display:none !important`).
   Legacy code relies on it - e.g. the "Listen to Samples" audio player starts
   with `.hidden` and JS toggles it on click. Restore the rule so it's hidden
   until the user opts in. */
#mainContent .hidden { display: none !important; }

#mainContent .visible-xs,
#mainContent .visible-xs-block,
#mainContent .visible-xs-inline { display: none !important; }
#mainContent .hidden-xs { display: block !important; }

@media (max-width: 767.98px) {
  /* BS5 has no -xs- tier; emulate BS3 (xs columns stack / split). */
  #mainContent [class*="col-xs-"] { width: 100%; }
  #mainContent .col-xs-6 { width: 50%; float: left; }

  #mainContent .visible-xs { display: block !important; }
  #mainContent .hidden-xs  { display: none !important; }
}

/* ---- "We Also Offer" cards --------------------------------------------- */
/* The legacy markup used a Sly carousel (#basic2) that is no longer loaded on
   these pages. Its absolute height/line-height:225px rules (statespecific.css)
   left the cards as empty boxes with the labels clipped, and the prev/next
   arrows do nothing. Render the four items as a clean static grid instead:
   icon on top, label below. Scoped under #mainContent + #basic2 so it outranks
   the legacy rules regardless of stylesheet load order. */
#mainContent .we_also_offer .frame#basic2 {
  height: auto;
  line-height: normal;
}
#mainContent .we_also_offer .frame#basic2 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#mainContent .we_also_offer .frame#basic2 ul li {
  width: 250px;
  height: auto;
  margin: 20px 0;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#mainContent .we_also_offer .frame#basic2 ul li .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
}
#mainContent .we_also_offer .frame#basic2 ul li .icon .line {
  float: none;
  margin-top: 0;
}
#mainContent .we_also_offer .frame#basic2 .insurance_reduction,
#mainContent .we_also_offer .frame#basic2 .mature_driver_courses,
#mainContent .we_also_offer .frame#basic2 .fleet_driver_training_courses,
#mainContent .we_also_offer .frame#basic2 .drivers_ed_courses {
  float: none;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#mainContent .we_also_offer .frame#basic2 .icon a {
  display: block;
  width: 100%;
  height: 100%;
}
#mainContent .we_also_offer .frame#basic2 ul li p {
  width: auto;
  margin: 0;
  line-height: 1.3;
}
/* The carousel's prev/next arrows are inert (Sly is not loaded here). */
#mainContent .we_also_offer .controls {
  display: none;
}
/* Empty Sly spacer item — keep it out of the static grid (it would otherwise
   show as a blank card on mobile via the .visible-xs compat rule). */
#mainContent .we_also_offer .frame#basic2 ul li.banner-space {
  display: none !important;
}