/* Site-wide design standards. One stylesheet, linked last in every page head,
   so a rule here wins over the per-page <style> blocks whatever their order.
   Rules move here from those blocks as they are standardised; the blocks drifted
   apart page by page, which is how approved fixes went missing on some pages.

   Served under a content-hashed filename (standards.<hash>.css) because /css/ is
   cached immutable for a year: edit this file, then run scripts/hash-css.py.

   Contrast floor for every text and background pair: 4.5:1, or 3:1 for text of
   24px and up (or 18.66px bold). */

:root {
  --_swatches---brand-dark: #009ee2;
  --_swatches---brand-ink: #007eb5;
  --_swatches---dark-800: #0a2e40;
}

/* Buttons (proposed 2026-10-08, pending Christine).
   Primary: navy text on the cyan fill, 7.62:1, the treatment the call button
   already uses. White on cyan was 2.37:1. */
.button-primary,
.button-primary:hover {
  color: var(--_swatches---dark-900);
}

/* Secondary on a white surface: brand-ink text and border, 4.51:1. Cyan on
   white was 2.37:1. On navy surfaces it keeps cyan text, which is 7.62:1. */
:root,
.text-block.icon-list-text,
.section.bg-light,
.section.bg-light.content-hero.services,
.hero-split-container {
  --_dynamic-colours---button-secondary--button-text: var(--_swatches---brand-ink);
  --_dynamic-colours---button-secondary--button-border: var(--_swatches---brand-ink);
}

/* Headings on the light grey band keep the bright heading blue, as on white.
   Christine, 2026-10-22: "can we keep the same bright blue on the light grey
   backgrounds? I find the darker blue a bit incongruent." The 2026-10-08
   proposal had used brand-ink there for contrast (#009ee2 on #f2f2f2 is
   2.68:1); she chose the brand colour, so the rule is gone. */

/* Header and page width: reverted 2026-10-21 to the live site's originals.
   Christine, 2026-10-09: "Please revert to the original full width design from
   the current live site" (the 1440px column) and "I would prefer if we reverted
   to the original formatting" (the header logo with its tagline inside the
   artwork). The contrast changes above stay ("we can keep it"). */

/* ---- Christine's review of 2026-10-09 ---------------------------------- */

/* Footer sitemap: every link is blue. "some page headings are now displaying
   in white text, please ensure all text is blue". The in-page equipment
   anchors were white, regular and 14px; they now match the page links. */
.footer-sitemap .footer-nav-list-item,
.footer-sitemap .footer-nav-list-item[href*="#"] {
  padding: 10px 0;
  color: var(--_swatches---brand);
  font-size: 15px;
  font-weight: var(--weight--bold);
}

/* Footer column headings (Company, Services, Equipment) are white; only the
   links beneath them are blue. Christine, 2026-10-09: "Please make the following
   headings in white: Company, Services, Equipment". */
.footer-sitemap .footer-sitemap-heading { color: var(--_swatches---white); }

/* Reviews module. Lives here so it renders on pages that never carried the V2
   style block (About, Careers, Contact take it in place of the dark review
   box: "replace the Google Reviews box with the approved one from the
   homepage with the light background"). */
.trust-module { padding: 32px 5% 56px; background-color: var(--_swatches---white); }
.trust-inner { max-width: 1100px; margin: 0 auto; }
.trust-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.trust-heading { margin: 0; font-family: var(--roboto-con); color: var(--_swatches---brand-dark); }
.trust-heading a { color: inherit; text-decoration: none; }
.trust-heading a:hover { text-decoration: underline; }
.trust-badge { flex: 0 0 auto; width: auto; height: 64px; }
.trust-quotes { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.trust-quotes blockquote {
  flex: 1 1 280px;
  margin: 0;
  padding: 20px 24px;
  border-left: 1px solid var(--_swatches---brand);
  background-color: var(--_swatches---light-100);
  color: var(--_swatches---text);
  font-size: var(--_responsive---text-sizing--body-text);
  line-height: var(--_responsive---text-sizing--body-text-height);
}
.trust-quotes cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--_swatches---text); }
.trust-cta { margin-top: 32px; }
.trust-cta p { margin: 0 0 12px; font-size: 18px; color: var(--_swatches---text); }
.call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 12px 24px;
  background-color: var(--_swatches---brand);
  color: var(--_swatches---dark-900);
  font-family: var(--roboto);
  font-size: 20px;
  font-weight: var(--weight--bold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.call-button:hover { background-color: var(--_swatches---brand-80); }

/* Services index (the long selector outranks the page's own
   .section.bg-light.service-index rule): "let's put them into two columns side by side so they take
   up less vertical space and let's put a dark blue background on them". One
   full-width dark band, Dedicated Service Pages beside Who We Serve. */
.section.bg-light.service-index.service-index-duo {
  flex-flow: row;
  align-items: flex-start;
  grid-column-gap: var(--_responsive---gap--gap-48);
  grid-row-gap: var(--_responsive---gap--gap-36);
}
.service-index-col { display: flex; flex: 1 1 0%; flex-flow: column; grid-row-gap: var(--_responsive---gap--gap-24); min-width: 0; }
.service-index-col-wide { flex-grow: 2; }
.service-index-duo .service-index-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.service-index-duo .service-index-card { padding: 12px 14px; }
@media (max-width: 991px) {
  .section.bg-light.service-index.service-index-duo { flex-flow: column; }
  .service-index-col { flex: none; width: 100%; }
}

/* Photo in a content slot, where a placeholder used to sit. Contained, never
   bled to the page edge (Christine 2026-08-17: "no bleed to match the rest of
   the website"). Stretches to the height of the text beside it and crops. */
.v2-photo {
  display: block;
  flex: 1 1 280px;
  align-self: stretch;
  width: 100%;
  max-width: 460px;
  height: auto;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.v2-photo.pr-lightbox { cursor: zoom-in; }

/* A phone number never breaks across lines. Christine, 2026-10-09, on
   parts-sales-direct-sourcing: "please keep the phone number on one line". */
a[href^="tel:"] { white-space: nowrap; }

/* ---- Accessibility and usability pass, 2026-10-21 ------------------------ */

/* Keyboard focus is visible (WCAG 2.2 2.4.7). Shows for keyboard users only;
   mouse and touch clicks do not draw it. Dark ring on light surfaces, white
   ring inside the navy header, bands and footer. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--_swatches---brand-ink);
  outline-offset: 2px;
}
.header-bar :focus-visible,
.bg-dark :focus-visible,
.footer :focus-visible,
.page-title :focus-visible {
  outline-color: var(--_swatches---white);
}

/* Form fields: 16px text so iOS Safari does not zoom the page when a field
   is tapped, and the Webflow focus blue (#3898EC, off-palette) becomes the
   brand cyan. */
.w-input,
.w-select {
  font-size: 16px;
}
.w-input:focus,
.w-select:focus {
  border-color: var(--_swatches---brand);
}

/* Footer fine-print link: a 24px-tall tap target (WCAG 2.2 2.5.8). */
.footer-fineprint .footer-nav-list-item {
  display: inline-block;
  padding: 4px 0;
}

/* Footer fine print: the Privacy Policy link is blue like every other footer
   link (Christine, 2026-10-09: "please ensure all text is blue"). */
.footer-fineprint .footer-nav-list-item { color: var(--_swatches---brand); }

/* 404: the big "404" was navy on the navy band, so it could not be seen. */
.notfound-code { color: var(--_swatches---brand); }

/* Pull quotes inside a content section match the reviews module: 1px cyan
   rule, reviewer name bold on its own line. The Webflow default was a 5px
   grey bar with the name run into the quote. */
.w-richtext blockquote {
  margin: 24px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--_swatches---brand);
  font-size: var(--_responsive---text-sizing--body-text);
  line-height: var(--_responsive---text-sizing--body-text-height);
}
.w-richtext blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 700; }

/* Line length. Christine, 2026-10-22: keep the shorter lines "in the headers
   of the individual services pages but put the watermarked blue logo in the
   white space on the right, mimicking this treatment: /services. And to
   extend to longer line length in the descriptions below." So only the intro
   section under the page title stops near 80 characters (36em of Roboto),
   with its first paragraph as an 18px lead; every section below it runs the
   full content width again. */
.page-title + .section .w-richtext > p,
.page-title + .section .w-richtext > ul,
.page-title + .section .w-richtext > ol {
  max-width: 36em;
}
.page-title + .section .w-richtext > p:first-child {
  font-size: 18px;
  line-height: 28px;
}

/* The faded blue flame logo from the /services hero (Webflow's
   .content-hero.services background: logo-faded.png, bottom right, natural
   size, so a short section crops its top) fills the white space to the right
   of that intro on every page that has one. From 1200px up: below that the
   intro text reaches the logo. */
@media (min-width: 1200px) {
  .page-title + .section.bg-light:not(.content-hero) {
    background-image: url("/assets/691a6f05cf1e847bfc4f1b91_logo-faded.png");
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: auto;
  }
}

@media (max-width: 991px) {
  /* Photos in the half-photo, half-text bands show on phones and tablets too
     (proposed 2026-10-21). They were hidden below 992px on 18 pages, so a phone
     visitor saw no photo until the gallery near the end of the page. */
  .half-split-content-image-right:not(.always-visible) {
    display: block;
    position: relative;
    width: 100%;
    height: 300px;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  /* A heading sits 20px above its own text on every section type. The light
     sections are flex columns with a 36px row gap (24px on the services hero),
     so their heading margin is 20px minus the gap; the dark, brand-blue and
     image sections have no gap and take a plain 20px. The 2026-10-21 version
     pulled the next element up 16px everywhere, so on gapless sections a
     two-line heading ran into the text below (Christine, 2026-10-22, iPhone). */
  .section > h2 { margin-bottom: 20px; }
  .section.bg-light > h2 { margin-bottom: -16px; }
  .section.bg-light.content-hero.services > h2 { margin-bottom: -4px; }
}

/* Mobile call bar (proposed 2026-10-21). Hidden by default; js/call-bar.js
   shows it below 768px once the header call button has scrolled off screen.
   Cyan with navy text like the header call block, full width, square. */
.call-bar { display: none; }
@media (max-width: 767px) {
  .call-bar {
    position: fixed;
    z-index: 900;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px env(safe-area-inset-bottom);
    background-color: var(--_swatches---brand);
    color: var(--_swatches---dark-900);
    font-family: var(--roboto);
    font-size: 18px;
    font-weight: var(--weight--bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    visibility: hidden;
    transform: translateY(100%);
  }
  .call-bar.is-visible { visibility: visible; transform: none; }
  .call-bar-label { font-weight: 400; }
  body.has-call-bar { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .call-bar { transition: transform 0.2s ease-out, visibility 0.2s; }
}