/* ============================================================
   PCS extra styles — hand-written, loaded AFTER pcs.min.css.
   (No build tools on this machine, so fixes live here instead of
   in the minified bundle.) After ANY edit: bump the ?v= on the
   <link> in header.php AND index.html.
   Added 2026-09-23 from the full site review.
   ============================================================ */

/* C-019: col-lg-9 was missing from the Bootstrap subset in pcs.min.css */
@media (min-width: 992px) {
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
}

/* C-040: keep the top nav on one line at laptop/tablet widths */
.navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-nav .nav-link { padding: 8px 7px !important; letter-spacing: 1px; }
  .navbar-nav .nav-link::after { left: 7px; right: 7px; }
  .nav-btn { padding: 8px 12px !important; }
  .nav-logo img { height: 30px; }
}

/* C-005: Industries mega-menu ran off the right edge (it is now
   right-aligned via .dropdown-menu-end; narrower at 992-1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .mega-cards { min-width: 600px; }
}

/* C-030: respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* C-042: if the AOS script never loads, footer.php adds .no-aos to <html>
   so animated blocks are never left invisible */
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }

/* Homepage fixes requested by the 2026-09-23 homepage pass */
@media (max-width: 767.98px) { .hero-scroll-cue { display: none; } }  /* C-004: "SCROLL" collided with the credential pills on phones */
.industry-card { height: 100%; display: flex; flex-direction: column; justify-content: center; }  /* C-130: even tile heights */
.stat-card { height: 100%; }                                          /* C-130: h-100 isn't in the pcs.min.css subset */
.trust-item-sub { color: rgba(255,255,255,.6); }                      /* C-117: contrast */

/* Breadcrumbs (all sit in dark heroes): the <li>s were 16px around 12px links,
   so the current-page item sat ~5px high and the grey "/" vanished on dark photos */
.breadcrumb { font-size: 12px; align-items: baseline; --bs-breadcrumb-divider-color: rgba(255,255,255,.35); }

/* C-083: ONE hover style for cards/tiles and ONE for chips, replacing 156
   inline onmouseover/onmouseout scripts (5 slightly different versions).
   Works for keyboard focus too, and hover only applies on devices that can
   hover, so it no longer "sticks" after a tap on phones. (!important because
   the elements set their resting border/color inline.) */
.pcs-hover-card, .pcs-hover-chip { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease; }
@media (hover: hover) {
  .pcs-hover-card:hover { border-color: var(--teal) !important; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
  .pcs-hover-chip:hover { border-color: var(--teal) !important; color: var(--teal) !important; }
}
.pcs-hover-card:focus-visible { border-color: var(--teal) !important; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.pcs-hover-chip:focus-visible { border-color: var(--teal) !important; color: var(--teal) !important; }

/* C-123: even-height numbers in the heading font ("2005", not "2oo5") */
body { font-variant-numeric: lining-nums; }

/* C-117: faint small labels on dark backgrounds -> readable */
.stat-big-label { color: rgba(255,255,255,.6); }

/* C-122: Why PCS was ~8,400px tall on phones because of six near-empty stat cards */
@media (max-width: 991.98px) { .why-stat { display: none; } }

/* C-120 (interim): inner-page sections kept 70-130px padding even on phones */
@media (max-width: 767.98px) {
  section[style*="padding:80px 0"], section[style*="padding:70px 0"] { padding: 56px 0 !important; }
  section[style*="padding:130px 0 70px"] { padding: 110px 0 50px !important; }
}

/* C-117: copyright line was 20% white */
.footer-copy { color: rgba(255,255,255,.5); }

/* C-005 (revised): the Industries mega-menu is right-aligned; anchoring it to
   its own <li> pushed it off the LEFT edge at 992-1300px. Anchor it to the
   nav container's right edge instead (under "Get a Quote"). */
@media (min-width: 992px) {
  #mainNav > .container { position: relative; }
  #mainNav .nav-mega-end { position: static; }
}

/* Accessibility pass 2026-09-26 (Lighthouse/axe). Brand --teal (#17acc6) is only
   2.7:1 on white, below the 4.5:1 WCAG AA minimum for small text. --teal-ink is the
   same hue darkened for SMALL TEXT on white, light-grey and pale-teal tints (6.2:1 on
   #fff, 5.3:1 on #e3f5f8). Icons, rules and anything on dark backgrounds keep --teal. */
:root { --teal-ink: #0a6e7e; }
/* Teal TEXT (not icons) on light backgrounds -> --teal-ink. "Light" = anywhere that is not
   inside one of the site's dark backgrounds (hero, trust bar, CTA band, footer, .bg-dark-brand,
   .bg-gradient, inline var(--dark*) / var(--gradient) / linear-gradient / #0.. / #1.. sections).
   Inline styles are matched only where "color:" starts a declaration, so border-color etc.
   never match. !important is needed to beat the inline style attribute.
   Keep ":not(" glued to the ")" before it: a space or line break there turns it into a
   descendant selector and the whole rule silently stops matching. */
:is(.eyebrow:not(.light), .text-teal, .service-card-link, .nicet-badge span, main a:not([class]),
    [style^="color:var(--teal)"]:not(i), [style*=";color:var(--teal)"]:not(i), [style*="; color:var(--teal)"]:not(i),
    [style^="color: var(--teal)"]:not(i), [style*=";color: var(--teal)"]:not(i), [style*="; color: var(--teal)"]:not(i)):not(:is(#hero, #trust-bar, #cta-banner, #footer, .bg-dark-brand, .bg-gradient,
           [style*="background:var(--dark"], [style*="background:var(--gradient)"],
           [style*="background:linear-gradient"], [style*="background:#0"], [style*="background:#1"]) *)
  { color: var(--teal-ink) !important; }
/* Teal accent words inside big headings only need 3:1 (large text): use the existing, closer-to-
   brand --teal-dark (#0f8fa6, 3.8:1). The two :not(#…) only raise specificity above the rule above. */
:is(h1, h2) :is([style^="color:var(--teal)"], [style*=";color:var(--teal)"]):not(i):not(#pcs-a):not(#pcs-b) { color: var(--teal-dark) !important; }
/* White cards inside a dark section (e.g. homepage Featured Projects) are light islands */
:is([style^="background:#fff"], [style*=";background:#fff"]) :is([style^="color:var(--teal)"], [style*=";color:var(--teal)"]):not(i) { color: var(--teal-ink) !important; }
.btn-pcs-white, .btn-pcs-outline-dark { color: var(--teal-ink) !important; }   /* teal text on a white button */
/* Links inside running text: underlined, so they are not told apart by color alone */
main p a:not([class]), main .accordion-body a:not([class]),
main a[style^="color:var(--teal)"], main a[style*=";color:var(--teal)"] { text-decoration: underline; text-underline-offset: 2px; }

/* Faint white text on the dark sections/cards: 25-45% white was 2.1-4.5:1 -> 60% (6-7:1).
   Same start-of-declaration matching as above. */
[style^="color:rgba(255,255,255,0.25)"], [style*=";color:rgba(255,255,255,0.25)"],
[style^="color:rgba(255,255,255,0.3)"],  [style*=";color:rgba(255,255,255,0.3)"],
[style^="color:rgba(255,255,255,0.4)"],  [style*=";color:rgba(255,255,255,0.4)"],
[style^="color:rgba(255,255,255,0.45)"], [style*=";color:rgba(255,255,255,0.45)"],
.form-label, .contact-info-lbl, .footer-legal-links a { color: rgba(255,255,255,.6) !important; }

/* Footer text was 38-45% white on #060606 (3.5-4.5:1) -> 60% (7.3:1); headings 28% -> 55% (6.3:1) */
.footer-tagline, .footer-address, .footer-link-list a { color: rgba(255,255,255,.6); }
.footer-col-head { color: rgba(255,255,255,.55); }

/* Heading order: feature/industry card titles are now h3 (were h4 straight after an h2) */
.eng-feature h3 { font-size: 14px; font-weight: 700; color: var(--heading); margin-bottom: 3px; }
.industry-card h3 { font-family: var(--font-h); font-size: 12.5px; font-weight: 700; color: var(--heading); letter-spacing: .3px; line-height: 1.3; margin-bottom: 0; }
.industry-card:hover h3 { color: var(--teal); }

/* Logo kept its fixed height but the flex nav squeezed its width (distorted on desktop) */
.navbar-brand { flex-shrink: 0; }
.nav-logo img, .footer-logo img { width: auto; }

/* Scroll-in animation timing: AOS used to set this through <body> attributes at load, which
   re-styled the whole page. Phones: sideways slides become fade-ups here instead of in JS. */
[data-aos] { transition-duration: .7s; transition-timing-function: ease-out; }
@media (max-width: 991.98px) { [data-aos=fade-left], [data-aos=fade-right] { transform: translate3d(0,100px,0); } }

/* Speed (2026-09-26): sections below the first one are laid out only when they come near the
   screen. Style + layout of the whole page was the biggest phone main-thread cost; this halved
   it in testing. 'auto' remembers each section's real height once it has been shown. */
main > section ~ section, #footer { content-visibility: auto; contain-intrinsic-size: auto 800px; }
/* Arriving on a #fragment URL (e.g. /about.html#team from an outside link): render everything so the jump lands exactly. */
html:has(:target) :is(main > section ~ section, #footer) { content-visibility: visible; }