/* ==========================================================================
   Bastion Pest Control — responsive overrides
   Linked into every page/component helmet. The DC/React runtime re-serializes
   inline styles with a space after every ":" and ",", so these attribute
   selectors are written to match that NORMALIZED form (e.g. "repeat(4, 1fr)",
   "padding: 110px 32px").
   ========================================================================== */

/* ---- Tablet: collapse only the widest (4-col) grids; 3-col grids stay
   3-across until the phone breakpoint so a lone 3rd card never orphans ---- */
@media (max-width: 960px) {
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.1fr 1fr"],
  [style*="1fr 1.1fr"],
  [style*="1.2fr 1fr"],
  [style*="1fr 1.2fr"],
  [style*="1.3fr 1fr"],
  [style*="1fr 1.3fr"],
  [style*="1.15fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---- Small tablet / narrow window: now collapse 3-col grids too ---- */
@media (max-width: 760px) {
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Phone: single column everywhere, tighter rhythm ---- */
@media (max-width: 640px) {
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }

  /* Shrink display headings so they don't overflow */
  h1 { font-size: 38px !important; line-height: 1.05 !important; }
  h2 { font-size: 28px !important; line-height: 1.1 !important; }

  /* Rein in the largest section paddings so content isn't lost in whitespace
     and never touches the screen edge */
  [style*="padding: 110px 32px"] { padding: 64px 20px !important; }
  [style*="padding: 100px 32px"] { padding: 60px 20px !important; }
  [style*="padding: 96px 32px"]  { padding: 56px 20px !important; }
  [style*="padding: 92px 32px"]  { padding: 56px 20px !important; }
  [style*="padding: 90px 32px"]  { padding: 56px 20px !important; }
  [style*="padding: 88px 32px"]  { padding: 52px 20px !important; }
  [style*="padding: 86px 32px"]  { padding: 52px 20px !important; }
  [style*="padding: 80px 32px"]  { padding: 48px 20px !important; }
  [style*="padding: 76px 32px"]  { padding: 48px 20px !important; }
  [style*="padding: 56px 32px"]  { padding: 40px 20px !important; }
  [style*="padding: 36px"]       { padding: 24px !important; }
}

/* ---- Header: swap desktop nav for a compact mobile bar ---- */
@media (max-width: 1180px) {
  header .bx-hdr-phone { display: none !important; }
}
@media (max-width: 1000px) {
  header nav { display: none !important; }
  /* swap desktop CTA buttons for the compact logo | phone | hamburger row */
  header .bx-hdr-quote { display: none !important; }
  header .bx-mobile-actions { display: flex !important; }
  .bx-mobile-bar { display: flex !important; }
  body { padding-bottom: 76px !important; }
  .bx-hero { min-height: auto !important; height: auto !important; align-items: flex-start !important; overflow: visible !important; padding: 48px 0 40px !important; box-sizing: border-box !important; }
}
/* (the .bx-hdr-quote button is already hidden at <=1000px by the rule above) */

/* ==========================================================================
   Readability layer — applies at every viewport size.
   Raises the smallest font sizes and fixes low-contrast gray text.
   ========================================================================== */

/* Minimum text sizes: nothing under 13px; small annotations bumped a step */
[style*="font-size: 12px"]   { font-size: 13px !important; }
[style*="font-size: 12.5px"] { font-size: 14px !important; }
[style*="font-size: 13px"]   { font-size: 14px !important; }
[style*="font-size: 13.5px"] { font-size: 14.5px !important; }
[style*="font-size: 14px"]   { font-size: 15px !important; }
[style*="font-size: 14.5px"] { font-size: 15.5px !important; }

/* Muted text on light backgrounds: one step darker for contrast */
[style*="color: var(--text-muted)"] { color: var(--slate-600) !important; }
[style*="color: var(--slate-400)"]  { color: var(--slate-500) !important; }

/* …but on dark surfaces the same grays need to go LIGHTER, not darker */
[style*="background: var(--slate-900)"] [style*="color: var(--slate-400)"],
footer [style*="color: var(--slate-400)"] {
  color: var(--slate-300) !important;
}
footer [style*="color: var(--slate-500)"] { color: var(--slate-400) !important; }
[style*="background: var(--slate-900)"] [style*="color: var(--slate-300)"] { color: var(--slate-200) !important; }



/* ==========================================================================
   Additions — newer sections + oversized desktop type
   ========================================================================== */

/* Global guards: never allow a horizontal scrollbar.
   Reveal animations (.rv-r slides in from the right) and the decorative
   radial glows both overhang the viewport mid-transition, so this clip has
   to apply at EVERY width, not just on phones. Safe here because the site
   header is position:fixed, not sticky. */
html, body { max-width: 100% !important; overflow-x: clip !important; }
@media (max-width: 760px) {
  img, svg, video, iframe { max-width: 100% !important; }
}

/* ---- Tablet: step the huge display type down before the phone breakpoint ---- */
@media (max-width: 960px) {
  [style*="font-size: 88px"] { font-size: 60px !important; }
  [style*="font-size: 60px"] { font-size: 46px !important; }
  [style*="font-size: 56px"] { font-size: 44px !important; }
  [style*="font-size: 52px"] { font-size: 40px !important; }
  [style*="font-size: 48px"] { font-size: 38px !important; }
  [style*="font-size: 46px"] { font-size: 36px !important; }
  [style*="font-size: 42px"] { font-size: 32px !important; }
  /* Process section: kill the vertical rules + side padding once stacked */
  [style*="border-right: 2px solid var(--border)"] { border-right: none !important; }
}

@media (max-width: 640px) {
  /* Process / step columns: remove desktop side padding, add separators */
  [style*="padding-right: 40px"] { padding-right: 0 !important; }
  [style*="padding-left: 40px"]  { padding-left: 0 !important; }
  [style*="padding: 0 40px"]     { padding: 0 !important; }
  [style*="font-size: 64px"]     { font-size: 44px !important; }
  [style*="font-size: 21px"]     { font-size: 17px !important; }

  /* Section paddings not covered above */
  [style*="padding: 160px 32px"] { padding: 64px 20px !important; }
  [style*="padding: 64px 32px"]  { padding: 40px 20px !important; }
  [style*="padding: 32px"]       { padding: 20px !important; }
  [style*="padding: 30px"]       { padding: 22px !important; }

  /* Hero CTAs: stack full-width and shrink the oversized pill type */
  .bx-hero-cta { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .bx-hero-cta a {
    justify-content: center !important;
    font-size: 19px !important;
    padding: 18px 24px !important;
    text-align: center !important;
  }

  /* Service-area map: 560px is too tall on a phone */
  iframe[src="service-area-map.html"] { height: 340px !important; }

  /* Reviews photo strip: two-up instead of a squeezed single row */
  #reviews img { width: 100% !important; }

  /* NOTE: previously forced every space-between row to flex-start here, which
     also hit the site header and dragged the phone/hamburger away from the
     right edge. Removed — the affected rows already use flex-wrap. */
}

/* ---- Very small phones ---- */
@media (max-width: 380px) {
  h1 { font-size: 32px !important; }
  h2 { font-size: 25px !important; }
  [style*="font-size: 27px"] { font-size: 18px !important; }
}

/* ---- Know your pest: stack icon above text on narrow screens ---- */
@media (max-width: 860px) {
  .kyp-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 56px 20px !important; }
  .kyp-grid > div:first-child img { max-width: 120px !important; margin: 0 auto !important; }
  .kyp-grid h2 { font-size: 34px !important; }
}

/* ---- Header logo: identical on every page, every width ---- */
/* Wins over the blanket [style*="font-size: 46px"] shrink rules above. */
header .bx-logo-word,
header a[href] > span.bx-logo-word,
.bx-hdr .bx-logo .bx-logo-word {
  font-size: 46px !important;
  letter-spacing: -0.03em !important;
  line-height: 0.85 !important;
  transform: skewX(-9deg) !important;
}
header .bx-logo-sub,
.bx-hdr .bx-logo .bx-logo-sub {
  font-size: 12px !important;
  letter-spacing: 0.4em !important;
  margin-top: 5px !important;
}
header .bx-hdr-inner, .bx-hdr .bx-hdr-inner { padding: 18px 32px !important; }
@media (max-width: 700px) {
  header .bx-hdr-inner, .bx-hdr .bx-hdr-inner { padding: 14px 18px !important; }
}