/* Accessibility contrast fixes (WCAG AA) — loaded after main.min.css/font-awesome.min.css, overrides only */

:root {
  /* was #26a69a — 3.0:1 on white, fails AA (needs 4.5:1). #178173 gives 4.75:1 */
  --maincolor: #178173;
}

/* phone number link in dark top bar — was #e52d27 on #1f2732 (3.39:1), needs 4.5:1 */
.page_topline .color-main2 a {
  color: #ff6b5e !important;
}

/* .color-main inherits --maincolor; original #26a69a passed on this dark bg (5.02:1),
   the darkened #178173 above does not (3.17:1) — keep the original here */
.page_topline .color-main a {
  color: #26a69a !important;
}

/* heading-order fixes changed several tag names (h5->h1/h3, h6->h4/h2) to fix
   skipped levels for screen readers; the matching font-size/margin overrides are
   inline on those elements (not here) so they apply on first paint instead of
   waiting for this stylesheet — a late override was causing a visible size flash
   that Lighthouse measured as a big layout shift. */

/* was scoped to "h6 a.small-text" — CSS selector must match the new h4 tag too,
   otherwise this link falls back to white text on a near-white background.
   Uses a darker teal than --maincolor: 4.24:1 on this #f2f2f2 bg isn't quite AA. */
.vertical-item.content-absolute .item-content h4 a.small-text {
  color: #0f6b60;
}

.vertical-item.content-absolute .item-content h4 a.small-text:hover {
  color: #1f2732;
  opacity: 1;
}

/* global "img{height:auto}" (responsive images) makes the browser wait for the
   image to load to know its height, even though width/height attributes are set —
   forcing the ratio here keeps the reserved space stable and avoids a layout shift */
img[src*="vertical_line"] {
  aspect-ratio: 4 / 94;
}

/* top bar links (language switcher, login, phone, email) are ~14px tall on mobile,
   under the 24x24px minimum touch target size */
.page_topline .top-includes > li > a,
.page_topline .top-includes > li > span > a {
  display: inline-block;
  padding: 5px 0;
}

/* FlexSlider hides all slides by default (.slides > li{display:none}) and only shows
   the first one via ".no-js .slides > li:first-child" — but Modernizr removes the
   "no-js" class almost immediately, before FlexSlider's own JS has initialized and
   taken over. In that gap every slide is hidden, the slider collapses to ~0 height,
   then snaps back once FlexSlider runs — this was the single biggest layout shift
   on the page. Making the rule unconditional (not just for no-js) closes the gap. */
.flexslider .slides > li:first-child {
  display: block;
}

/* fontawesome: enable font-display:swap without editing the vendor min.css */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}