/* ARMS Pumps - visibility/readability QA layer
   Loaded last on every page. Only adjusts text contrast and dark-section readability. */

/* Dark hero/supporting copy */
.breadcrumb span {
  color: rgba(255,255,255,.72) !important;
}
.page-hero-meta p,
.page-hero-sub,
.hero-intro,
.hero-points li,
.repair-kits-sub,
.back-banner-sub,
.intro-card p,
.form-card-header p,
.brands-label {
  color: rgba(255,255,255,.78) !important;
}

/* Home stats are intentionally dark; the former 40% white labels were too faint. */
.stats-bar .stat-label {
  color: rgba(255,255,255,.76) !important;
}

/* Keep dark CTA sections dark-page readable. */
.cta-section[style*="background"],
.booster-page .cta-section,
.water-truck-page .cta-section {
  color: inherit;
}

/* Small technical labels on white/light cards need darker text than --steel. */
.meta-tag,
.chip-count,
.product-price span,
.service-num,
.spec-quick-label,
.spec-section-heading span,
.spec-section-kicker,
.spec-parts-group-title span,
.spec-parts-table th,
.form-section-label,
.c-label,
.results-summary,
.sort-wrap label {
  color: #5a7188 !important;
}

/* Footer copy was 40-45% white; raise contrast while keeping the subdued look. */
footer .footer-brand p,
footer .footer-links a,
footer .footer-contact p,
footer .footer-contact a,
footer .footer-cta p {
  color: rgba(255,255,255,.76) !important;
}
footer .footer-bottom p {
  color: rgba(255,255,255,.62) !important;
}
footer .footer-col-title {
  color: #a9c4dc !important;
}

/* Product detail modal: keep every text layer readable even with the polish variables. */
.spec-product-description,
.spec-parts-source,
.spec-part-note,
.spec-pdf-unavailable p,
.spec-parts-unavailable p {
  color: #4d657d !important;
}
.spec-parts-table td {
  color: #38516a !important;
}
.spec-parts-table th {
  background: #f3f6f9 !important;
}

/* Search results remain readable regardless of page theme inheritance. */
.site-search-dialog,
.site-search-result,
.site-search-title,
.site-search-input,
.site-search-empty strong {
  color: #0b2444 !important;
}
.site-search-meta,
.site-search-hint,
.site-search-empty,
.site-search-foot {
  color: #526b84 !important;
}

/* Buttons/labels on dark surfaces */
.repair-kits-banner .repair-kits-label,
.cta-section .btn-outline,
.spec-modal-header h3 {
  color: #fff !important;
}

/* On mobile, ensure the menu itself always provides a readable foreground/background. */
@media (max-width: 960px) {
  .mobile-nav {
    background: #fff !important;
    color: #12304f !important;
  }
  .mobile-nav a,
  .mobile-nav .site-search-mobile {
    color: #12304f !important;
  }
}

/* ── FLUID SITE HEADER ───────────────────────────────────────────────
   Keep page content centered, but let the navigation use wide screens.
   Logo anchors left; nav/search anchors right with responsive gutters. */
@media (min-width: 961px) {
  .header > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(24px, 4vw, 88px) !important;
    padding-right: clamp(24px, 4vw, 88px) !important;
  }

  .header .header-inner {
    width: 100%;
  }

  .header .header-logo {
    flex: 0 0 auto;
    margin-right: clamp(28px, 3vw, 54px);
  }

  .header nav {
    margin-left: auto;
    flex: 0 0 auto;
  }

  .header .site-search-trigger {
    flex: 0 0 auto;
    margin-left: 10px;
  }
}

@media (min-width: 1600px) {
  .header > .container {
    padding-left: clamp(64px, 5vw, 104px) !important;
    padding-right: clamp(64px, 5vw, 104px) !important;
  }
}

/* ── FINAL MOBILE NAV POSITIONING FIX ───────────────────────────────
   Keep the hamburger drawer pinned directly below the sticky header
   on every page. This intentionally overrides older page-specific and
   compatibility mobile-nav rules. */
@media (max-width: 960px) {
  .mobile-nav {
    display: none !important;
    position: fixed !important;
    top: 76px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px 24px 32px !important;
    box-sizing: border-box !important;

    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    background: #fff !important;
    color: #12304f !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    transform: none !important;
    transition: none !important;
    z-index: 9999 !important;
  }

  .mobile-nav.open,
  .mobile-nav.active {
    display: flex !important;
  }

  .mobile-nav > a,
  .mobile-nav .site-search-mobile {
    flex: 0 0 auto !important;
  }
}