/* dmvpermittests.com — door stylesheet
   Loaded on every page by _shared/global-header2.cfm (line 34).
   The filename is the estate convention; 8 of the 12 doors carry the same name.
   Created 2026-10-28, extended the same day with the chrome pass. */

/* ---------------------------------------------------------------- layout -- */
.row.px-4 { margin-left: 0; margin-right: 0; }
body { overflow-x: hidden; }

/* ------------------------------------------------------------------ hero -- */
/* The generated theme already sizes .banner images at 35rem and centres the
   banner on mobile, so it was built for two columns. These rules give it the
   two columns on desktop and keep the old centred behaviour below 768px. */
@media (min-width: 768px) {
  .banner { text-align: left; }
  .banner .heading::after { margin-left: 0; }
}
.banner img, .banner svg { max-width: 100%; height: auto; }
.banner h1 { letter-spacing: -.5px; }
.banner h2 { font-weight: 500 !important; color: #44566c; font-size: 1.15rem !important; line-height: 1.6 !important; }
.banner-picker .form-select {
  max-width: 320px; padding: .7rem 1rem; border-color: #c9d4e0;
  border-radius: .6rem; font-size: 1rem;
}
.banner-picker .btn { padding: .7rem 1.6rem; border-radius: .6rem; }
.banner-trust { font-size: .95rem; color: #44566c; }
.banner-trust strong { font-weight: 600; }

/* --------------------------------------------------- call-to-action band -- */
/* The shared template puts .call-to-action on every static page. The theme
   paints it flat pink (#E2447E) with black text and a blue button on top, and
   it sits flush against the footer. This puts it on the door's own colour. */
.call-to-action {
  background: linear-gradient(135deg, #2D63AD 0%, #1d4a8a 100%) !important;
  border-radius: 1rem;
  padding: 2.25rem 2rem !important;
  margin-bottom: 3rem;
  color: #fff;
}
.call-to-action h1, .call-to-action h2, .call-to-action h3,
.call-to-action h4, .call-to-action p { color: #fff !important; }
.call-to-action h3 { font-size: 1.6rem; font-weight: 600; margin-bottom: .5rem; }
.call-to-action p { margin-bottom: 0; opacity: .92; }
.call-to-action .btn,
.call-to-action .btn-warning,
.call-to-action .btn-primary {
  --bs-btn-bg: #fff; --bs-btn-color: #1d4a8a; --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: #eef3fa; --bs-btn-hover-color: #163a6d; --bs-btn-hover-border-color: #eef3fa;
  font-weight: 600; padding: .75rem 1.75rem; border-radius: .6rem; white-space: nowrap;
}
.call-to-action .row { align-items: center; }
@media (max-width: 767px) {
  .call-to-action { padding: 1.75rem 1.25rem !important; text-align: center; }
  .call-to-action .btn { float: none !important; margin-top: 1.25rem; width: 100%; }
}

/* -------------------------------------------------------- state dropdown -- */
/* 51 states will not fit in a single-column menu. */
.dropdown-menu-states {
  width: min(42rem, calc(100vw - 2rem));
  padding: 1rem 1.25rem;
  max-height: 70vh; overflow-y: auto;
}
.dropdown-menu-states .states-grid { column-count: 3; column-gap: 1.25rem; }
@media (max-width: 575px) { .dropdown-menu-states .states-grid { column-count: 2; } }
.dropdown-menu-states .dropdown-item {
  padding: .3rem .25rem; font-size: .9rem; border-radius: .35rem;
  break-inside: avoid; white-space: normal;
}
.dropdown-menu-states .states-all {
  display: block; margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid #e6ebf1; font-weight: 600; font-size: .9rem;
}

/* ---------------------------------------------------------------- footer -- */
.footer { background-color: #051523 !important; color: #7e868c; }
.footer .fw-bold { color: #fff; }
.footer a { color: #cfd6dc; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer, .footer p, .footer a { font-size: 14px; }
.footer .form-control { background: #0c1f30; border-color: #1b3147; color: #fff; }
.footer .form-control::placeholder { color: #8c99a5; }

/* Overrides the unscoped svg{width:80px!important} in dmv.min.css.
   Higher specificity, so it wins regardless of load order. */
.footer svg { width: 20px !important; height: 20px; }

/* ----------------------------------------------------------------- links -- */
.navbar-nav a, .breadcrumb a { text-decoration: none; }
.breadcrumb { font-size: .875rem; }

/* ---------------------------------------------------------------- blocks -- */
.blklink { padding-top: 3rem; padding-bottom: 3rem; }
.card { border: 1px solid rgba(0,0,0,.07); border-radius: .75rem; }

/* State hub link blocks added to the static hub pages. */
.hub-links { margin-top: 2.5rem; }
.hub-links h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 1.25rem; }
.hub-links a { text-decoration: none; }
.hub-links .card { height: 100%; transition: box-shadow .15s ease, transform .15s ease; }
.hub-links a:hover .card { box-shadow: 0 .5rem 1.25rem rgba(16,44,77,.10); transform: translateY(-2px); }
.hub-links .card h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .35rem; color: #12304f; }
.hub-links .card p { font-size: .875rem; color: #5a6b7d; margin: 0; }

/* ===========================================================================
   COMPONENTS — added 2026-10-28
   Two brand colours only:
     navy  #2D63AD  buttons, links, focus, footer accents
     pink  #E2447E  inside the icon artwork only, never a background
   Two section grounds: #FFFFFF and #F6F9FC, alternating.
   =========================================================================== */

:root {
  --dmv-navy: #2D63AD;
  --dmv-navy-dark: #1d4a8a;
  --dmv-pink: #E2447E;
  --dmv-ink: #12304f;
  --dmv-muted: #5a6b7d;
  --dmv-line: #e3e9f0;
  --dmv-tint: #F6F9FC;
  --dmv-radius: .75rem;
  --dmv-shadow: 0 .5rem 1.5rem rgba(16,44,77,.08);
}

/* ------------------------------------------------------------- rhythm ---- */
section.cb3x1, section.cb3x2, section.faqs,
section.blklink, section.cta-center { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 767px) {
  section.cb3x1, section.cb3x2, section.faqs,
  section.blklink, section.cta-center { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
.heading { color: var(--dmv-ink); font-weight: 600; letter-spacing: -.3px; }
.subheading { color: var(--dmv-muted); max-width: 46rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- buttons --- */
.btn { border-radius: .6rem; font-weight: 600; letter-spacing: .1px; transition: all .15s ease; }
.btn-primary, .btn-warning {
  --bs-btn-bg: var(--dmv-navy); --bs-btn-border-color: var(--dmv-navy); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--dmv-navy-dark); --bs-btn-hover-border-color: var(--dmv-navy-dark);
  --bs-btn-active-bg: var(--dmv-navy-dark); --bs-btn-active-border-color: var(--dmv-navy-dark);
  box-shadow: 0 .25rem .75rem rgba(45,99,173,.22);
}
.btn-primary:hover, .btn-warning:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1rem rgba(45,99,173,.28); }
.btn-outline-primary {
  --bs-btn-color: var(--dmv-navy); --bs-btn-border-color: var(--dmv-navy);
  --bs-btn-hover-bg: var(--dmv-navy); --bs-btn-hover-border-color: var(--dmv-navy);
}
.btn:focus-visible, a:focus-visible, .form-select:focus-visible, .form-control:focus-visible {
  outline: 3px solid rgba(45,99,173,.35); outline-offset: 2px; box-shadow: none;
}

/* --------------------------------------------------------------- cards --- */
.card {
  border: 1px solid var(--dmv-line);
  border-radius: var(--dmv-radius);
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.cb3x1 .card, .cb3x2 .card { height: 100%; }
.card:hover { box-shadow: var(--dmv-shadow); border-color: #cfdcea; }
.card h3 { color: var(--dmv-ink); line-height: 1.35; }
.card p { color: var(--dmv-muted); line-height: 1.6; }
.cb3x1 .row, .cb3x2 .row { --bs-gutter-y: 1.5rem; }
/* the 3x1 template hard-codes a blue wash and a heavy glow; flatten it */
.cb3x1 > .container > .row[style] {
  background: transparent !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------- bulk links -- */
.blklink a {
  display: inline-block; color: var(--dmv-navy); font-weight: 500;
  padding: .15rem 0; border-bottom: 1px solid transparent;
}
.blklink a:hover { border-bottom-color: var(--dmv-navy); }
.blklink .fa-angle-right { color: var(--dmv-pink); margin-right: .35rem; }

/* ------------------------------------------------------------ accordion -- */
.faqs .accordion-item { border: 1px solid var(--dmv-line) !important; border-radius: var(--dmv-radius) !important; margin-bottom: .75rem; overflow: hidden; background: #fff; }
.faqs .accordion-button { font-size: 1.05rem !important; font-weight: 600 !important; color: var(--dmv-ink) !important; padding: 1.1rem 1.25rem; }
.faqs .accordion-button:not(.collapsed) { background: var(--dmv-tint) !important; }
.faqs .accordion-button:focus { box-shadow: none !important; }
.faqs .accordion-body { color: var(--dmv-muted); line-height: 1.7; padding: 0 1.25rem 1.25rem; }

/* ----------------------------------------------------------- breadcrumb -- */
.breadcrumb { margin-bottom: 0; }
.breadcrumb a { color: var(--dmv-muted); }
.breadcrumb a:hover { color: var(--dmv-navy); }
.breadcrumb-item.active { color: var(--dmv-ink); font-weight: 500; }

/* ---------------------------------------------------------------- forms -- */
.form-control, .form-select { border-color: #cfd9e4; border-radius: .6rem; padding: .65rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--dmv-navy); box-shadow: 0 0 0 .2rem rgba(45,99,173,.15); }

/* ------------------------------------------------------------ page body -- */
.page-content section.bg-white { border-radius: var(--dmv-radius); border: 1px solid var(--dmv-line); padding: 1.75rem !important; }
.page-content h2 { font-size: 1.5rem; font-weight: 600; color: var(--dmv-ink); }
.page-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--dmv-ink); }
.page-content p, .page-content li { line-height: 1.7; color: #35475a; }
.page-content a { color: var(--dmv-navy); }
/* strip the Word paste leftovers that sit inside some headings */
h1 style, h2 style, h3 style { display: none !important; }

/* ------------------------------------------------- state page + sidebar -- */
.sidebar-cta {
  border: 0 !important;
  border-radius: var(--dmv-radius);
  box-shadow: 0 .75rem 2rem rgba(16,44,77,.16);
  position: sticky; top: 6.5rem;
}
.sidebar-cta h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; color: #fff; }
.sidebar-cta p { color: rgba(255,255,255,.85); margin-bottom: 1.25rem; }
.sidebar-cta .btn-light { --bs-btn-color: var(--dmv-navy); font-weight: 600; width: 100%; }
@media (max-width: 767px) { .sidebar-cta { position: static; margin-bottom: 1.5rem; } }

/* the long state write-ups are one unbroken column of text; give them air */
.page-content section.bg-white > h1:first-child { margin-top: 0 !important; }
.page-content h2 { margin-top: 2.25rem !important; padding-top: .25rem; }
.page-content h3 { margin-top: 1.75rem !important; }
.page-content p { margin-bottom: 1.1rem; }
.page-content section.bg-white > p:first-of-type { font-size: 1.08rem; color: var(--dmv-muted); }
.page-content a:not(.btn) { text-decoration: none; border-bottom: 1px solid rgba(45,99,173,.35); }
.page-content a:not(.btn):hover { border-bottom-color: var(--dmv-navy); }
.page-content ul, .page-content ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.page-content li { margin-bottom: .4rem; }
.page-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.page-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; }
.page-content th, .page-content td { border: 1px solid var(--dmv-line); padding: .6rem .75rem; text-align: left; }
.page-content th { background: var(--dmv-tint); font-weight: 600; color: var(--dmv-ink); }