/*=============================================================
  MERCURY — ACCESSIBILITY & INTERACTION LAYER
  -------------------------------------------------------------
  Loads LAST, after style-red.css, mercury-override.css,
  page-hero.css and every $pageCSS file, so it can correct
  contrast and focus behaviour without editing the vendor theme.

  Three things live here and nothing else:
    1. A focus ring that survives the theme's `outline: none`
    2. An accessible text weight of the brand green
    3. Touch targets, motion and cursor corrections

  THE GREEN SPLIT — read before changing a colour here
  -------------------------------------------------------------
  Brand green #b0ce5a is a Pantone-locked identity colour and
  stays exactly as-is for fills, borders, rules and anything
  sitting on the dark #454646 / #0c0a0c grounds, where it
  measures 5.33:1 and passes AA comfortably.

  On white it measures 1.78:1. That is not a text colour, so
  every green-on-light *text* and *meaningful icon* is remapped
  to --c-green-ink below: the same 75.5deg hue, dropped in value
  and nudged in saturation, at 5.55:1 on white. It still reads
  as Mercury green; it is simply the ink weight of it.

  Dark-ground usages (hero tags, stat bars, CTA strips, footer,
  top bar) are deliberately NOT in this file.
=============================================================*/

:root {
    /* Brand green, text weight — 5.55:1 on #fff, 5.09:1 on #f5f5f5 */
    --c-green-ink:  #5b701e;
    /* Brand green, UI weight — 3.93:1 on #fff, for non-text graphics */
    --c-green-ui:   #6f8a28;
    /* Focus ring — 7.83:1 on white, 4.41:1 on a green button */
    --c-focus-ring: #3f5a12;
    /* Body copy that has to sit on the --c-light #dcdfdf panels */
    --c-body-on-light: #545454;
}


/* ══════════════════════════════════════════════════════════
   1. FOCUS VISIBILITY

   bootstrap.min.css clears `outline` 21 times, style-red.css 6
   and careers.css twice, which left keyboard users with no
   indicator anywhere on the site. The two-tone ring below is
   drawn with box-shadow so it cannot be cleared by an
   `outline: none` further up the cascade, and it reads on every
   ground the site uses: the white inner ring carries it on the
   dark gray header and heroes (9.47:1), the dark green outer
   ring carries it on white panels and on green buttons.
══════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid transparent;   /* retained for forced-colors */
    outline-offset: 2px;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 5px var(--c-focus-ring) !important;
    border-radius: 2px;
    position: relative;
    z-index: 1;
}

/* Form controls keep their own border treatment but gain the ring.
   careers.css and contact.css signalled focus with border-colour
   alone, which is a 1.4:1 change against the resting border. */
.cr-form-control:focus-visible,
.cr-filter-select:focus-visible,
.form-control:focus-visible {
    border-color: var(--c-green-ink) !important;
}

/* Windows High Contrast / forced-colors: hand the ring back to the OS */
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible,
    [role="button"]:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none !important;
    }
}


/* ══════════════════════════════════════════════════════════
   2. SKIP LINK

   Every page puts ~20 tabbable items (nav, submenus, quote
   button) ahead of <main id="main-content">. This gives keyboard
   and switch users one tab to the content instead.
══════════════════════════════════════════════════════════ */

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000000;          /* above the preloader's 999999 */
    padding: 14px 22px;
    background: #0c0a0c;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transform: translateY(-120%);
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Visually hidden, still announced. Used for the search field
   label and the offcanvas submenu toggle names. */
.mx-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ══════════════════════════════════════════════════════════
   3. TOUCH TARGETS

   The mobile menu trigger was 24x25px and is the only means of
   navigation below 992px. 44x44 is the floor.
══════════════════════════════════════════════════════════ */

.mobile-navigation-icon {
    /* Now a <button>; strip the UA chrome the theme never expected */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

/* The theme draws the three bars from the <i> and its
   ::before / ::after, absolutely positioned against the icon box and
   sized at width:100%. Now that the box is 44px those bars would
   stretch with it, so pin the <i> to 24px and centre it. The glyph
   is unchanged; only the hit area around it grew. */
.mobile-navigation-icon i {
    width: 24px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

/* Injected by main.js as a bare <span>; now a real button */
.offcanvas-navigation .menu-expand {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 991px) {
    /* Breadcrumb and quick-nav chains sit tight on small screens */
    .ph-hero__breadcrumb li a,
    .cp-breadcrumb li a,
    .ab-breadcrumb li a,
    .hs-breadcrumb li a,
    .loc-breadcrumb a,
    .breadcrumb-wrap li a,
    .cp-quicknav__list a {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}


/* ══════════════════════════════════════════════════════════
   4. GREEN AS TEXT, ON LIGHT GROUNDS  →  --c-green-ink

   Each selector below was measured at 1.78:1 before this file.
   Grouped by stylesheet so the pairing stays obvious.
══════════════════════════════════════════════════════════ */

/* --- index.css (white sections only; the dark stats bar,
       video band and CTA strip keep #b0ce5a) --- */
.hp-eyebrow,
.hp-title .highlight,
.view-all-link,
.view-all-link:hover,
.hp-market-item i,
.hp-mission__stat-num,
.hp-loc-card__link:hover,

/* --- capabilities.css --- */
.cp-cap__eyebrow,
.cp-cap__title .hl,
.cp-cap__point i,
.cp-cap__link,
.cp-cap__link:hover,
.cp-sub-features__eyebrow,
.cp-sub-features__title .hl,
.cp-sub-related__eyebrow,
.cp-rel-card__label,
.cp-rel-card__arrow,

/* --- about.css --- */
.ab-eyebrow,
.ab-title .hl,
.ab-arrow-link,
.ab-arrow-link:hover,
.ab-val-card__num,

/* --- history.css --- */
.hs-intro__eyebrow,
.hs-intro__title .hl,
.hs-section-eyebrow,
.hs-section-title .hl,
.hs-tl-card__era,

/* --- location.css --- */
.loc-section-eyebrow,
.loc-section-title .hl,
.loc-cards-header__eyebrow,
.loc-cards-header__title .hl,
.loc-card__eyebrow,
.loc-card__title .hl,
.loc-card__contact-row i,

/* --- careers.css (white cards and panels; the dark aside and
       form sidebar keep #b0ce5a) --- */
.cr-eyebrow,
.cr-title .hl,
.cr-checklist li::before,
.cr-benefit i,
.cr-activity-chip i,
.cr-reset-link,
.cr-contact-link,
.cr-job__meta-item i,

/* --- contact.css --- */
.contact-info-card__icon,
.contact-info-card__text a:hover,

/* --- quote.css --- */
.rfq-intro .highlight,
.rfq-form .form-section-title,
.file-upload-label i,
.sidebar-block ul li i,

/* --- blog.css --- */
.blog-card__cat,
.blog-card__title a:hover,
.blog-card__readmore:hover,
.sidebar-recent-item__title:hover,
.sidebar-cat-item a:hover,
.sidebar-cat-item span,

/* --- resources-certifications.css
       (.quality-stat__num and .cert-matrix-table__loc span are NOT here:
        both sit on the dark #454646 stats bar and table head) --- */
.cert-matrix-note i,
.cert-matrix-right__label,
.cert-preview-card__placeholder i,
.cert-preview-card__dl,
.cert-tab.is-active,
.cert-policies__eyebrow,
.cert-policies__title .hl,
.cert-policy-card__icon,
.cert-policies__note i,
.cert-policies__note a:hover,
.cert-card__logo i,
.cert-card__scope,

/* --- resources-dfm.css --- */
.dfm-principle__num,

/* --- resources-social-responsibility.css --- */
.pillar-card__icon,
.pillar-card:hover,

/* --- resources-supplier.css --- */
.sr-eyebrow,
.sr-section-label,
.sr-req-item__num,
.sr-doc-card__icon,
.sr-process-step__num,

/* --- mercury-override.css, light-ground entries
       (.offcanvas-navigation hovers are NOT here: the mobile overlay
        is painted --c-black, so the brand green already reads) --- */
.title .highlight,
.section-title .highlight,
h1 .highlight, h2 .highlight, h3 .highlight, h4 .highlight,
.header-navigation__nav ul li a:hover,
.header-navigation__nav ul li.active > a,
.header-navigation__nav .submenu li a:hover {
    color: var(--c-green-ink) !important;
}

/* --- Dark-band exemptions -------------------------------------
   .highlight, .hl, .hp-eyebrow and .view-all-link are generic and
   a handful of their instances sit inside a dark band, where the
   ink weight would be the *new* failure (1.71:1) and #b0ce5a is
   already correct at 5.33:1. Hand those back.

   Bands: .hp-video, .ab-mv, .sr-portal-strip. The theme also marks
   dark-ground copy with a --light modifier.
   -------------------------------------------------------------- */
.hp-video .hp-eyebrow,
.hp-video .highlight,
.hp-video .view-all-link,
.hp-video .view-all-link:hover,
.ab-mv .ab-eyebrow,
.ab-mv .highlight,
.ab-mv .hl,
.sr-portal-strip .highlight,
.sr-portal-strip .hl,
.hp-eyebrow--light,
.ab-eyebrow--light,
.cr-eyebrow--light,
.hp-title--light .highlight,
[class*="--light"] > .highlight,
[class*="--light"] > .hl {
    color: var(--c-green) !important;
}


/* ══════════════════════════════════════════════════════════
   5. REMAINING CONTRAST CORRECTIONS
══════════════════════════════════════════════════════════ */

/* #666 on the #dcdfdf panels measured 4.28:1. */
.grey-bg p, .grey-bg li, .grey-bg td,
.section-bg p, .section-bg li, .section-bg td,
.bg-grey p, .bg-grey li, .bg-grey td,
.bg-light-gray p, .bg-light-gray li {
    color: var(--c-body-on-light);
}

/* quote.php and careers.php set helper text inline at #888
   (3.54:1). Pull it to the AA floor without touching the markup. */
.cr-form-group label span[style*="888"],
.rfq-form label span[style*="888"] {
    color: #6b6b6b !important;
}


/* ══════════════════════════════════════════════════════════
   6. POINTER AFFORDANCE

   Whole-card links and JS-driven tabs/filters read as static.
══════════════════════════════════════════════════════════ */

.cp-rel-card,
.blog-card,
.loc-card,
.ind-card,
.cert-tab,
.cert-preview-card,
.sr-doc-card,
.pillar-card,
.hp-loc-card,
.cr-job,
.ab-mv-card,
.cert-policy-card,
[role="button"] {
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════
   7. REDUCED MOTION

   Only three narrow rules honoured the preference before this.
   animate.min.css (58KB of keyframes), swiper, lightgallery and
   the Revolution Slider's kenburn/parallax extensions were all
   unguarded.
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* animate.css entrance classes leave elements mid-transform
       when their animation is cut, so land them explicitly. */
    .animated,
    [class*="animate__"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Ken Burns and parallax are the slider's whole motion budget */
    .tp-kbimg,
    .rev_slider .tp-parallax-wrap {
        transform: none !important;
    }

    /* The preloader spinner is the one thing that should keep
       turning — it is the only signal that work is in progress. */
    .preloader-spinner {
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
    }
}