@charset "UTF-8";

/* Shared interaction refinements. Load after v2.css and v2-diagrams.css. */
::selection {
  color: #222;
  background: #ffcbd5;
}

/* v2 sets scroll-padding for the header; add only a small target breathing room. */
:where(main [id], .contact-band[id], #main) {
  scroll-margin-block-start: 1rem;
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--red-text, #c81d40);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #fff;
}

.contact-band :where(a, button, input, select, textarea):focus-visible,
.connection-section a:focus-visible {
  outline-color: #ff829a;
  box-shadow: 0 0 0 2px #222;
}

.article-card:focus-visible > h3,
.example-row:focus-visible h3,
.example-side > a:focus-visible h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* Inline links stay recognisable without relying solely on colour. */
:where(.article-body, .body-copy, .faq details, .intro, .company-table)
  :where(p, li, dd) a:not(.button):not(.text-link) {
  color: var(--red-text, #c81d40);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  overflow-wrap: anywhere;
}

.footer-links a,
.footer-bottom a {
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.nav > a[aria-current="page"]:not(.button) {
  color: var(--red-text, #c81d40);
}

.nav > a[aria-current="page"]:not(.button)::after {
  right: 0;
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover,
  .footer-bottom a:hover {
    text-decoration-line: underline;
  }

  .article-card:hover > h3,
  .example-side > a:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
  }

  .faq summary:hover {
    color: var(--red-text, #c81d40);
  }
}

/* Long labels and larger user text must be allowed to reflow. */
.button,
.text-link {
  max-width: 100%;
  white-space: normal;
}

.button > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.button-arrow,
.button > span[aria-hidden="true"],
.text-link::after {
  flex-shrink: 0;
}

.keep-phrase {
  max-width: 100%;
}

.hero-v2 h1 > span {
  white-space: normal;
}

.breadcrumb {
  flex-wrap: wrap;
  align-items: baseline;
}

.breadcrumb [aria-current="page"] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reading-layout > *,
.two-col > *,
.page-hero-grid > *,
.service-row > *,
.contact-grid > * {
  min-width: 0;
}

/* Preserve semantic tables and give their own overflow area. */
.table-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #777 #efefef;
}

.table-scroll:focus-visible {
  outline-offset: 2px;
}

.article-body th,
.article-body td {
  vertical-align: top;
}

/* Strengthen secondary information without enlarging decorative labels. */
.breadcrumb,
.footer-brand p,
.footer-bottom,
.byline,
.small-note,
.hero-photo-caption,
.subhero-image figcaption {
  color: #666;
}

.footer-bottom {
  font-size: .75rem;
  line-height: 1.8;
}

.faq summary {
  min-height: 44px;
}

.faq summary::after {
  min-width: 1.2em;
  text-align: center;
}

@media (max-width: 760px) {
  .footer-links a,
  .footer-bottom a,
  .article-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-links {
    gap: 7px 23px;
  }

  .text-link {
    min-height: 44px;
  }

  .menu-toggle {
    min-width: 44px;
  }

  .hero-photo-caption,
  .subhero-image figcaption,
  .article-meta,
  .feature-top > span:last-child,
  .footer-brand p {
    font-size: .75rem;
    line-height: 1.8;
  }

  .mobile-contact {
    min-height: 56px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .footer {
    padding-bottom: calc(105px + env(safe-area-inset-bottom, 0px));
  }

  html {
    scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* Touch devices should not retain desktop lift/zoom states after a tap. */
@media (hover: none) {
  .button:hover,
  .article-card:hover .article-cover,
  .hero-photo-wrap:hover .hero-photo,
  .service-photo:hover img {
    transform: none;
  }

  .service-row:first-child .service-photo:hover img {
    transform: scale(1.13);
  }
}

/* v2 disables animation duration; also prevent instantaneous hover movement. */
@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .article-card:hover .article-cover,
  .hero-photo-wrap:hover .hero-photo,
  .service-photo:hover img {
    transform: none;
  }

  .service-row:first-child .service-photo:hover img {
    transform: scale(1.13);
  }
}

@media (forced-colors: active) {
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
  .contact-band :where(a, button, input, select, textarea):focus-visible,
  .connection-section a:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }

  .button,
  .round-arrow {
    border-color: ButtonText;
  }

  .nav > a[aria-current="page"]:not(.button) {
    text-decoration: underline;
  }
}