/* Accessibility fixes layered on top of style.css. Loaded last so it wins.
   Addresses WCAG 2.1 AA findings from an axe-core audit. */

/* 2.4.7 Focus Visible — the theme sets outline:none, which leaves keyboard
   users with no indication of where they are on the page.

   Uses :focus-visible, not :focus, so the ring appears for keyboard navigation
   but not when the element is clicked with a mouse. With plain :focus, clicking
   a carousel arrow left a gold line down the slide: those <a> elements are zero
   width and full slide height, so their outline draws as a tall vertical stripe
   rather than a box. Text fields still show it on click, which is what people
   expect there. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
input:focus,
textarea:focus {
  outline: 3px solid #ffd200 !important;
  outline-offset: 2px !important;
}

/* Fallback for browsers without :focus-visible — better a stray ring than none. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  select:focus,
  [tabindex]:focus {
    outline: 3px solid #ffd200 !important;
    outline-offset: 2px !important;
  }
}

/* The carousel arrows are zero-width, full-height hit areas. Put their focus ring
   on the visible arrow box inside instead, so keyboard focus reads as a highlighted
   button rather than a line down the middle of the photo. */
.carousel-control:focus-visible {
  outline: none !important;
}
.carousel-control:focus-visible .glyphicon {
  outline: 3px solid #ffd200 !important;
  outline-offset: 4px !important;
}

/* 1.4.3 Contrast (Minimum) — nav links were #999 on #333 (4.43:1, needs 4.5:1).
   Scoped to the TOP-LEVEL bar only. An earlier version matched every link under
   `header nav`, which included the dropdown items -- those sit on a white menu,
   so #c4c4c4 rendered them at about 1.7:1 and the menu looked blank until you
   hovered a row. */
.navbar-nav > li > a,
header .dropdown-toggle {
  color: #c4c4c4 !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a {
  color: #ffffff !important;
}

/* Dropdown items sit on a white panel and need dark text. */
.navbar-nav .dropdown-menu > li > a {
  color: #2b2b2b !important;
  padding: 9px 20px;
}
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu > li.active > a {
  color: #ffffff !important;
  background-color: #6a3f8c !important;   /* brand purple, 8.6:1 with white */
}

/* 1.4.3 — the "BROKERS" wordmark was #8251a7 on #333 (2.21:1, needs 3:1 at this size). */
header a[href="/index.html"] > span,
.brand span,
header h1 a span {
  color: #b07fd4 !important;
}

/* 1.4.1 Use of Color — links inside paragraphs were distinguished by hue alone. */
p a:not(.btn),
li a:not(.btn),
footer p a {
  text-decoration: underline;
}
.btn,
nav a,
header a,
.socialicon {
  text-decoration: none !important;
}

/* 2.4.1 Bypass Blocks — skip link, visible only once focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #ffffff;
  color: #111111 !important;
  font-weight: bold;
  text-decoration: underline;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* 2.2.2 Pause, Stop, Hide -- control for the auto-advancing hero carousel.
   Placed in normal flow directly under the hero: the sticky header overlaps the
   carousel's top edge and the next section overlaps its bottom, so anything
   absolutely positioned inside it gets covered. */
.carousel-controls-bar {
  background: #2b2b2b;
  padding: 6px 16px;
  text-align: right;
}
.carousel-pause {
  padding: 6px 14px;
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  background: #1a1a1a;
  color: #e8e8e8;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.carousel-pause:hover {
  background: #000000;
  border-color: #ffffff;
}

/* Visible labels on form fields. Placeholder text alone disappears on input and
   sits below contrast minimums in most browsers (3.3.2 Labels or Instructions). */
.contact-form label:not(.sr-only),
.load-form label:not(.sr-only) {
  display: block;
  margin-bottom: 4px;
  color: #333333;
  font-weight: 700;
}

/* Placeholder contrast — browser default grey is typically ~2.8:1. */
::placeholder {
  color: #6b6b6b;
  opacity: 1;
}

/* NOTE: an earlier version bumped the 10px nav links to 12px. That made the nav
   wrap to two lines, doubling the header height from 82px to 162px, which pushed
   the header down over the page title on every interior page. WCAG sets no
   minimum font size (1.4.4 is about supporting 200% zoom, which the browser
   handles natively), so the bump was not required. Reverted. */

/* 1.4.3 Contrast (Minimum) — body copy.
   The theme sets #999 body text, which is 2.45:1 on the #eee page background
   and 4.43:1 on the #333 footer. AA needs 4.5:1 for text under 18.66px bold /
   24px regular. These darken the greys without changing the design. */
p,
li,
.small-paragraph,
.main__middle__container p,
.headings p {
  color: #5c5c5c;
}

/* Footer sits on #333, so its text goes lighter rather than darker. */
footer,
footer p,
footer li,
footer h3,
footer .form-group label {
  color: #cfcfcf;
}
footer a {
  color: #b07fd4;
}
footer a:hover,
footer a:focus {
  color: #d7bbee;
}

/* Text over the dark section bands stays light. */
.titles.services p,
.titles.services h2,
.titles.aboutus p {
  color: #dcdcdc;
}

/* The three service blocks sit on the dark band, so their copy needs to be
   light rather than the darkened body grey set above. */
.three__blocks p,
.three__blocks .small-paragraph {
  color: #dcdcdc;
}

/* Footer link purple was 4.11:1 on #333. AA needs 4.5:1. */
footer a,
.three__blocks h3 a {
  color: #c9a3e8;
}
footer a:hover,
footer a:focus,
.three__blocks h3 a:hover,
.three__blocks h3 a:focus {
  color: #e4d1f5;
}

/* The copyright bar is a sibling of <footer>, not inside it, so the footer link
   rule above does not reach it. Theme purple there is 2.55:1 on #292929. */
.copyright {
  color: #cfcfcf;
}
.copyright a {
  color: #c9a3e8;
  text-decoration: underline;
}
.copyright a:hover,
.copyright a:focus {
  color: #e4d1f5;
}

/* Home page: About band, then the picture below it.
   The theme puts a dark port photo behind the About text, which muddies it and
   makes the band blend into the image strip underneath. Solid black separates the
   two cleanly: a black banner with the copy, then the photo as its own band. */
.titles.aboutus {
  background-image: none;
  background-color: #000000;
  padding-bottom: 10px;
}

/* The image strip below. It carries no text, so the theme's asymmetric padding
   just made it a thin sliver; giving it a real height lets it read as a picture. */
.line__bg.testimonials {
  padding: 0;
  height: 300px;
  background-position: center 55%;
  background-size: cover;
}
.line__bg.testimonials .container {
  height: 100%;
}

/* ===================================================================
   HOME PAGE STRUCTURE
   Measured before changing anything: the H1 rendered at 24px while the
   H2 section labels rendered at 60px, so the most important line on the
   page was the smallest. Section padding measured 6/6, 45/45, 30/30,
   0/80, 30/10, 0/0 -- no rhythm. Three near-blacks (#2b2b2b, #333, #000)
   sat next to each other. This block fixes those.
   =================================================================== */

/* --- 1. heading hierarchy ------------------------------------------ */
/* .home-cta is included because its heading sits outside .titles and was
   otherwise still picking up the theme's 60px. */
.titles h2.page__title,
.home-cta h2.page__title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .02em;
}
.main__middle__container h1.page_title {
  font-size: 44px;
  line-height: 1.12;
  margin: 0 0 18px;
}
.titles h2.page__title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .02em;
}
.three__blocks h3 {
  font-size: 21px;
  line-height: 1.25;
}
.three__blocks .container h3 .small-paragraph {
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .main__middle__container h1.page_title { font-size: 30px; }
  .titles h2.page__title,
  .home-cta h2.page__title { font-size: 24px; }
}

/* --- 5. one vertical scale ----------------------------------------- */
.main__middle__container > .row,
.main__middle__container > .titles {
  padding-top: 64px;
  padding-bottom: 64px;
}
.main__middle__container > .row.three__blocks {
  padding-top: 0;          /* sits directly under its own section label */
  padding-bottom: 64px;
}
.main__middle__container > .titles.services {
  padding-bottom: 40px;    /* label pairs with the cards beneath it */
}
.main__middle__container > .line__bg {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .main__middle__container > .row,
  .main__middle__container > .titles { padding-top: 40px; padding-bottom: 40px; }
  .main__middle__container > .row.three__blocks { padding-top: 0; padding-bottom: 40px; }
}

/* --- 6. one dark, not three ---------------------------------------- */
.three__blocks,
.titles.aboutus {
  background-color: #14161a;
}
.carousel-controls-bar { background: transparent; }

/* --- 3. contact block ----------------------------------------------
   Replaces a 300px band of decorative photo that carried no text, sitting
   in prime position just above the footer. The photo stays as its
   backdrop, darkened so the copy is legible over it. */
.line__bg.testimonials {
  height: auto;
  min-height: 300px;
  position: relative;
  display: flex;
  align-items: center;
}
.line__bg.testimonials::before {
  content: "";
  /* Bootstrap uses .row::before as a clearfix and sets display:table on it. An
     absolutely positioned, empty table box collapses to 0x0, so the overlay
     never painted until display was overridden here. */
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* The photo underneath is bright and busy (white trucks, lit containers), so
     the wash has to be strong for the copy to hold up. */
  background: linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.90) 50%, rgba(8,9,12,.72) 100%);
}
.line__bg.testimonials .container {
  position: relative;
  z-index: 1;
  padding-top: 56px;
  padding-bottom: 56px;
}
.home-cta h2.page__title {
  color: #ffffff;
  margin: 0 0 12px;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.home-cta p {
  color: #e4e4e4;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  font-size: 16px;
  max-width: 560px;
  margin: 0 0 18px;
}
.home-cta-actions { margin-bottom: 14px !important; }
.home-cta-actions .btn { margin: 0 10px 10px 0; }
.home-cta-phone { font-size: 15px; margin-bottom: 0 !important; }
.home-cta-phone a { color: #c9a3e8; text-decoration: underline; }
@media (max-width: 767px) {
  .line__bg.testimonials::before {
    background: rgba(10, 11, 14, .88);
  }
  .home-cta-actions .btn { display: block; width: 100%; margin-right: 0; }
}

/* --- 7. slideshow control belongs in the hero -----------------------
   It was the first element in the content area, given its own full-width
   bar above the headline -- a UI control with the visual weight of a
   section. Floated into the hero's bottom-right corner instead. It has to
   stay reachable: it is the pause control required for the auto-advancing
   carousel (WCAG 2.2.2). */
.carousel-controls-bar {
  position: absolute;
  /* bottom-LEFT: the logo now occupies the bottom-right corner */
  left: 18px;
  bottom: 14px;          /* js raises this above the strip the content covers */
  z-index: 25;
  padding: 0;
  background: transparent;
}
.carousel-pause {
  background: rgba(0, 0, 0, .62);
  border-color: rgba(255, 255, 255, .55);
}
.carousel-pause:hover {
  background: rgba(0, 0, 0, .88);
  border-color: #ffffff;
}
@media (max-width: 767px) {
  .carousel-controls-bar { left: 10px; }
  .carousel-pause { font-size: 11px; padding: 5px 10px; }
}

/* --- card alignment -------------------------------------------------
   The three cards had different heading lengths, so their images and
   buttons sat at different heights -- the row read as three unrelated
   blocks rather than one set. Equal-height columns with the buttons
   pinned to the bottom line everything up. */
.three__blocks .container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.three__blocks .col-md-4 {
  display: flex;
  flex-direction: column;
  float: none;
}
.three__blocks .col-md-4 h3 {
  min-height: 148px;       /* measured: tallest heading block is 144px */
  margin-bottom: 14px;
}
.three__blocks .col-md-4 img {
  width: 100%;
  height: auto;
  margin-bottom: 14px;
}
.three__blocks .col-md-4 > p:last-child {
  margin-top: auto;        /* pushes the button to a common baseline */
  margin-bottom: 0;
  padding-top: 12px;
}
@media (max-width: 991px) {
  .three__blocks .col-md-4 h3 { min-height: 0; }
  .three__blocks .col-md-4 { margin-bottom: 34px; }
}

/* ===================================================================
   INTERIOR PAGES
   Same pass as the home page. Measured first: every page repeated its own
   title as the next heading, the only <h1> was the company name in the
   header, and the footer link column was built from ten empty <table>
   elements used as line breaks.
   =================================================================== */

/* the banner title is now the h1 on interior pages */
.titles h1.page__title,
.titles h2.page__title,
.home-cta h2.page__title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .02em;
}
.main__middle__container .titles h1.page__title {
  font-size: 38px;
  margin: 0;
  /* the theme coloured .page__title only via an h2 selector, so promoting the
     tag left it #333 on a dark banner -- invisible */
  color: #ffffff;
}
@media (max-width: 767px) {
  .main__middle__container .titles h1.page__title { font-size: 26px; }
}

/* interior content headings, one step below the page title */
.main__middle__container .container h3 {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
}
/* FAQ questions and the accessibility statement's sub-sections sit one level
   below their section heading; they were h4 under an h2, which skipped a level. */
.main__middle__container .container h3 + h3,
.faq-question,
.main__middle__container .container h3.sub {
  font-size: 17px;
}

/* the same vertical scale the home page uses */
.main__middle__container > .container {
  padding-top: 48px;
  padding-bottom: 64px;
}
@media (max-width: 767px) {
  .main__middle__container > .container { padding-top: 32px; padding-bottom: 40px; }
}

/* footer links, now a real list instead of spacer tables */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { margin-bottom: 7px; }
.footer-links a { display: inline-block; }

/* Interior-page contact block. About and Shippers had no phone number and no
   call to action at all -- both were dead ends for a visitor ready to act. */
.page-cta { margin-top: 8px; }
.page-cta h3 { margin-bottom: 8px; }
.page-cta p { max-width: 620px; }
.page-cta-actions { margin: 16px 0 12px; }
.page-cta-actions .btn { margin: 0 10px 10px 0; }
.page-cta-phone { font-size: 15px; }
@media (max-width: 767px) {
  .page-cta-actions .btn { display: block; width: 100%; margin-right: 0; }
}

/* Header brand alignment.
   The brand was an <h1> and relied on the browser's default heading margins to
   sit correctly. It is now a <div> (a logo is a mark, not a heading), and with
   no default margins it rode up against the top of the header and clipped:
   Bootstrap gives .navbar-brand line-height 20px while this theme sets the text
   to 30px, so the text overflows its line box. Centre it explicitly instead of
   depending on margins that are no longer there. */
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover {
  display: inline-flex;
  align-items: center;
  min-height: 82px;        /* matches the nav row */
  padding: 0;
  margin: 0;
  width: auto;
  line-height: 1.15;
}
.navbar-default .navbar-brand a {
  display: inline-block;
  line-height: 1.15;
}
@media (max-width: 767px) {
  .navbar-default .navbar-brand,
  .navbar-default .navbar-brand:hover {
    min-height: 64px;
    font-size: 24px;
    padding-right: 60px;   /* keep clear of the hamburger */
  }
}
@media (max-width: 400px) {
  .navbar-default .navbar-brand,
  .navbar-default .navbar-brand:hover { font-size: 20px; }
}

/* Form submit buttons.
   Each was a bare child of its <form> while every field above it is a floated
   Bootstrap column, so the button rode up beside the fields instead of sitting
   under them. It now has its own clearing full-width block. */
.form-submit {
  clear: both;
  margin-top: 8px;
  /* the form inherits text-align:-webkit-center, which centred the inline-block
     button while the block-level fields above it stayed left */
  text-align: left;
}
/* The two form layouts handle the column gutter differently: .load-form keeps
   Bootstrap's 15px, .contact-form zeroes it. Match each so the button lines up
   with that form's own field edges rather than forcing one value on both. */
.contact-form .form-submit {
  padding-left: 0;
  padding-right: 0;
}
.form-submit .btn {
  min-width: 190px;
}
@media (max-width: 767px) {
  .form-submit .btn { width: 100%; }
}

/* Form labels.
   Every field previously relied on placeholder text with a screen-reader-only
   label. Placeholders vanish the moment someone types, so a half-filled form
   gives no indication of what each box is for -- worst on the 12-field carrier
   registration. Labels are now visible above their field. */
.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #333333;
}
.contact-form .field-label,
.load-form .field-label { color: #333333; }
.required-key {
  font-size: 13px;
  color: #5c5c5c;
  margin-bottom: 14px;
}
/* file inputs already carried a visible label; keep it consistent */
.form-group label.black-text { font-size: 13px; font-weight: 700; }

/* Forms inherit text-align:-webkit-center from the theme, which centred the
   labels and the required key while the fields themselves stayed left. */
.contact-form,
.load-form {
  text-align: left;
}
.contact-form .form-group,
.load-form .form-group { text-align: left; }

/* Fieldsets on the carrier registration form. Twelve fields ran with no grouping,
   so the shape of the request was invisible until you had scrolled the whole
   thing. Browsers give fieldset a default border and padding that fights the
   layout, so it is reset and the legend carries the weight. */
.load-form fieldset,
.contact-form fieldset {
  border: 0;
  margin: 0 0 6px;
  padding: 0;
  min-width: 0;
}
.load-form legend,
.contact-form legend {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ddd;
  margin: 22px 0 16px;
  padding: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #333;
}
.load-form fieldset:first-of-type legend { margin-top: 4px; }

/* Section headings carried a decorative <hr> beneath them -- presentation living
   in the markup, and an extra element between a heading and its content. The rule
   is now a border on the heading. */
main .container h2,
main .container h3 {
  border-bottom: 1px solid #e2e2e2;
  /* measured: the rule sat 8px under the heading with 0px between it and the
     text below, so heading, rule and copy read as one crowded block */
  padding-bottom: 14px;
  margin-bottom: 22px;
}
/* a button following body copy sat 10px under it */
main .container p + p > .btn,
main .container p > .btn,
.titles .btn {
  margin-top: 10px;
}
main .container p:has(> .btn) { margin-top: 18px; }
/* the FAQ questions and statement sub-headings sit inside a section, so they keep
   a lighter treatment */
main .container h3 + h3,
main .container h3 ~ h3 {
  border-bottom: 0;
  padding-bottom: 0;
}
.page-cta h3, .home-cta h2 { border-bottom: 0; padding-bottom: 0; }

/* Buttons sized to their label.
   The theme gives every button variant a hardcoded width with zero horizontal
   padding -- .btn-lg is 180px, .btn-info and .btn-md 140px, .btn-primary 142px --
   so any label longer than that spills outside the shape. "Begin Carrier
   Registration" measured 181px in a 180px box. Width becomes automatic with real
   padding, and the old fixed widths become minimums so short labels keep the
   theme's rhythm. Heights and line-heights are untouched. */
.btn,
.btn-lg,
.btn-md,
.btn-info,
.btn-primary {
  width: auto;
  padding-left: 22px;
  padding-right: 22px;
  white-space: nowrap;
}
.btn-lg { min-width: 180px; padding-left: 28px; padding-right: 28px; }
.btn-md,
.btn-info { min-width: 140px; }
.btn-primary { min-width: 142px; }

@media (max-width: 767px) {
  /* long labels get room to wrap rather than forcing the page wide */
  .btn, .btn-lg, .btn-md, .btn-info, .btn-primary {
    white-space: normal;
    line-height: 1.3;
    height: auto;
    min-height: 44px;          /* keeps a comfortable tap target */
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Centred blocks: the quote form and the interior-page contact blocks.
   Each is a single column inside a full-width container, so it sat flush left
   with 150-250px of dead space to its right. Bootstrap columns float, so the
   float has to be cleared before auto margins do anything. Text stays
   left-aligned inside -- centred form labels and body copy are harder to scan
   because the eye loses the common left edge it tracks down. */
#quote > [class*="col-md-"],
.page-cta > [class*="col-md-"] {
  float: none;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#quote .contact-form { width: 100%; text-align: left; }

/* Service card headings.
   The icon is a background image on the h3 anchored at 0% 100% -- the bottom.
   Adding padding under the heading pushed the icon below the text instead of
   beside it. Anchoring it to the vertical centre puts the text next to its icon,
   and these card headings do not want the section rule the page headings carry. */
.three__blocks .container h3 {
  background-position: left center !important;
  border-bottom: 0;
  margin-bottom: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.three__blocks .container h3 .small-paragraph {
  margin-top: 2px;
}
@media (max-width: 991px) {
  .three__blocks .container h3 { min-height: 72px; }
}

/* Section heading casing.
   The theme force-lowercases h2.page__title, so "About CTS" rendered as
   "about cts" -- dropping the sentence capital and flattening the acronym. The
   markup already carries the correct casing, so the transform just overrides it.
   Interior page titles lost this when they became h1; this brings the home page
   and any remaining h2 into line. */
h2.page__title,
h1.page__title,
.titles h2,
.titles h1 {
  text-transform: none;
}

/* Carrier agreement illustration sits with the process list it belongs to,
   filling the empty right column rather than floating in its own row below the
   form. It is decorative support for the list, so it is capped rather than
   stretched to the full column width. */
.process-image {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 26px 0 0;
}
@media (max-width: 991px) {
  .process-image { margin: 22px auto 0; }
}

/* Page banner tone.
   The banner's background image is a flat solid #333333 -- measured standard
   deviation 0.0, min equals max on every channel -- which is exactly the header's
   colour. Contrast between them was 1.00:1, so the header dissolved into the
   banner and stopped reading as a distinct bar. A step darker separates them and
   sets up a depth order: header, then banner, then content. It also drops a 52 KB
   image request that was painting a single colour. */
.titles.blog {
  background-image: none;
  background-color: #23262b;
}

/* ===================================================================
   STRUCTURAL PASS
   Findings from a full structural audit. No content and no colours were
   changed here -- every rule is layout, target size, state or motion.
   =================================================================== */

/* --- 1. the CARRIERS submenu could only be opened by hovering --------
   The theme hides the menu with `ul.dropdown-menu { opacity:0; visibility:hidden }`
   and reveals it from a single rule: `.dropdown:hover .dropdown-menu`. Bootstrap's
   JS does its part -- clicking or pressing Enter adds `.open` to the <li> -- but
   nothing in the stylesheet responds to `.open`, so the panel stays invisible.

   Measured: with `.open` applied, opacity 0 / visibility hidden, on desktop AND
   on mobile. A visibility:hidden element is also out of the tab order, so the four
   pages behind it -- Carriers, Get Set Up, FAQ, Load Board -- had no route from
   the top nav for a keyboard user at any width, and no route at all on a phone,
   where there is no hover to give. Only the footer links reached them.

   `.open` covers click and touch; `:focus-within` covers tabbing, and matches as
   soon as the toggle itself takes focus, so the menu appears before you try to
   tab into it. */
.navbar-nav .dropdown.open > .dropdown-menu,
.navbar-nav .dropdown:focus-within > .dropdown-menu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  /* collapsed nav: the menu is in normal flow, so `top` must not offset it */
  .navbar-nav .dropdown.open > .dropdown-menu,
  .navbar-nav .dropdown:focus-within > .dropdown-menu { top: auto; }
}

/* Submenu rows measured 29px tall -- under the 44px a finger needs, and the
   tightest rows on the site. */
.navbar-nav .dropdown-menu > li > a,
/* the theme's own collapsed-nav rule is `.navbar-nav .open .dropdown-menu > li > a`
   and sets 5px 15px, which outranks the selector above at phone width */
.navbar-nav .open .dropdown-menu > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.3;
}

/* --- 2. reduced motion ----------------------------------------------
   The hero's auto-advance already honours the setting in JS, but the CSS
   transitions did not: the carousel cross-fade, the nav underline and the
   dropdown reveal all still animated. WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 3. icon-only targets -------------------------------------------
   The three footer social links are 32x32 with no label beside them, so the
   icon is the whole target. Padding brings the hit area to 44x44 without
   changing how big the icon itself draws. */
.socialicon {
  width: 44px;
  height: 44px;
  margin-right: 2px;
  background-position: 6px 6px !important;
  background-size: 32px 32px !important;
}

/* The hamburger measured 44x34. Width was fine, height was not.

   Do NOT set `display` here. Bootstrap hides this button on desktop with
   `@media (min-width:768px){ .navbar-toggle{ display:none } }` -- same
   specificity as a bare `.navbar-toggle`, and this file loads last, so a
   `display:flex` written without a media query wins that tie at every width
   and un-hides the button on desktop. The theme positions it absolutely, so
   it then lands directly on top of the CTSBROKERS wordmark.

   Growing it with padding instead leaves `display` alone. Bootstrap's own
   9px padding around a 14px stack of bars is what made it 34px; 14px makes
   it 44px, and the rule is scoped to the width where the button is actually
   in use. */
@media (max-width: 767px) {
  .navbar-toggle {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* --- 4. form fields on small screens --------------------------------
   Inputs measured 34px tall at 14px text. Two consequences on a phone: the
   box is under a comfortable tap target, and iOS Safari zooms the whole page
   in whenever you focus a field below 16px, which the visitor then has to
   pinch back out of. 16px is the threshold that stops it. */
@media (max-width: 767px) {
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px;
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  textarea.form-control { min-height: 110px; }
  /* labels sat 4px above their own field and 15px below the previous one --
     the right order, but too near a ratio to read as separate groups at
     phone width */
  .form-group { margin-bottom: 22px; }
  .field-label { font-size: 14px; }
}

/* --- 5. submit feedback ---------------------------------------------
   Every form posted with no acknowledgement between the tap and the page
   turning over, which on a slow connection invites a second and third tap.
   The button state is set from JS; this is what it looks like. */
.is-submitting {
  opacity: .72;
  cursor: progress;
  pointer-events: none;
}

/* Footer link region. It is now a <nav>, so it needs no bullet indent of its
   own beyond what .footer-links already sets. */
footer nav { display: block; }

/* --- 6. section dividers ---------------------------------------------
   Each break between sections was a bare <hr> sitting between two rows:
   presentation living in the markup, and an extra element in the reading
   order between a section and the one before it. One page carried two in a
   row, drawing a double rule; another had one orphaned inside a column,
   where it drew a stray line across half the width only.

   The rule is now the following row's own top border, same 1px #e5e5e5 the
   <hr> rendered as. Its old 20px margins become real section spacing. */
.main__middle__container .container > .row.has-rule {
  border-top: 1px solid #e5e5e5;
  margin-top: 44px;
  padding-top: 44px;
}
@media (max-width: 767px) {
  .main__middle__container .container > .row.has-rule {
    margin-top: 30px;
    padding-top: 30px;
  }
}

/* Intro: mark and copy as two columns from 992px, stacked below it.

   Both halves left-aligned on one axis. That is the point -- when the mark was
   centred and the copy was not, the mark started at x=444 while the rule, headline
   and paragraph all started at x=44, and two competing alignments in one block made
   the centred one look accidental.

   Column widths are set for THIS mark. The wordmark is 447x162, ratio 2.76 -- wide
   and short, where the black plate it replaced was ratio 1.43. In the plate's old
   340px column the wordmark rendered 319x116 against a 308px-tall block of copy and
   sat marooned in white space, so the column is wider here and the mark fills it.

   The img max-width override is INSIDE the media query on purpose. Written outside
   one it beat the stacked caps at every width, and in stacked mode "100%" means
   100% of the container -- the mark rendered 722x506 at a 767px viewport. Same
   mistake as the navbar-toggle `display` regression: an override that is only
   correct inside one breakpoint has to be written inside it.

   The paragraph stays capped at every width. Unconstrained it ran 1140px at 18px,
   about 127 characters per line against a readable 60-80. */
.page-brand {
  text-align: left;
  margin: 0 0 26px;
}
.page-brand img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}
.intro-copy p { max-width: 66ch; }

@media (min-width: 992px) {
  .intro-split {
    display: flex;
    align-items: center;
    gap: 48px;
  }
  .intro-split .page-brand {
    flex: 0 0 clamp(280px, 34%, 400px);
    margin: 0;
  }
  .intro-split .page-brand img { max-width: 100%; }
  .intro-copy {
    flex: 1 1 auto;
    min-width: 0;        /* let the column shrink instead of forcing the row wide */
  }
}
@media (max-width: 991px) {
  .page-brand img { max-width: 320px; }
  .page-brand { margin-bottom: 22px; }
}
@media (max-width: 767px) {
  .page-brand img { max-width: 250px; }
  .page-brand { margin-bottom: 18px; }
  .intro-copy p { max-width: none; }
}

/* Form status line: sending, validation, failure.

   1.4.1 Use of Colour -- the error state is not signalled by red text alone. It
   carries a bar down its leading edge and its wording states the problem, so it
   survives being read by someone who cannot distinguish the colour, and it
   survives being read aloud. #b3261e on white measures 5.9:1, above the 4.5:1
   minimum for body text. */
.form-status {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  min-height: 1px;          /* occupies no space until it has something to say */
  color: #333333;
}
.form-status:empty { margin: 0; }
.form-status.is-error {
  color: #b3261e;
  font-weight: 700;
  border-left: 3px solid #b3261e;
  padding: 2px 0 2px 12px;
  max-width: 60ch;
}

/* Purpose note at the point of collection. Sits with the fields it explains
   rather than only behind a footer link, which is the whole point: someone
   about to type their DOT number and upload a resume should be able to see
   what happens to it without leaving the form. */
.form-purpose {
  font-size: 13px;
  line-height: 1.5;
  color: #5c5c5c;
  max-width: 62ch;
  margin: -6px 0 16px;
}
.form-purpose a { text-decoration: underline; }

/* Hover images that were never recovered.

   The theme swaps the slideshow arrows to prev_a.png / next_a.png and the footer
   email icon to mail_a.png on hover. This site was rebuilt from saved browser
   archives, and those keep only files that actually loaded while the page was
   being saved. A hover image does not load until someone hovers, so these three
   were never captured. They exist only on the old server, which is being cleared.

   Left alone, each icon would vanish under the pointer. Hover now keeps the
   normal image and adds a visible response instead, so nothing on the new site
   depends on a file that is not in the upload. Same selectors as the theme and
   loaded after it, so these win on source order and the browser never asks for
   the missing files. */
.carousel-control .carousel-control-left:hover {
  background-image: url("../images/slider/prev.png");
  background-color: rgba(0, 0, 0, .45);
}
.carousel-control .carousel-control-right:hover {
  background-image: url("../images/slider/next.png");
  background-color: rgba(0, 0, 0, .45);
}
.socialicon-mail:hover,
.socialicon-mail:focus-visible {
  background-image: url("../images/social/mail.png");
  filter: brightness(1.35);
}