/* ============================================================
   VOPS — Responsive overrides
   Uses attribute selectors + !important to override the many
   inline styles across the site on tablet/mobile widths.

   NOTE: React serialises inline styles WITHOUT a space after the
   colon (grid-template-columns:5fr 7fr), while the raw HTML string
   pages use a space. Every selector below is duplicated to match
   both forms.
   ============================================================ */

/* ---------- Global box model & overflow guards ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img,
svg,
video {
  max-width: 100%;
}

/* ---------- Tap targets (WCAG 2.5.8) ---------- */
@media (max-width: 900px) {
  .vops-nav-desktop a,
  .vops-mobile-menu a,
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  main button {
    min-height: 44px;
  }
}

/* ---------- Tablet (<= 900px) ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: 5fr 7fr"],
  [style*="grid-template-columns:5fr 7fr"],
  [style*="grid-template-columns: 7fr 5fr"],
  [style*="grid-template-columns:7fr 5fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ---------- Mobile (<= 640px) ---------- */
@media (max-width: 640px) {
  /* Section/container padding: collapse the 32px side padding */
  [style*="padding: 112px 32px"],
  [style*="padding: 104px 32px"],
  [style*="padding: 96px 32px"],
  [style*="padding: 88px 32px"],
  [style*="padding: 80px 32px"],
  [style*="padding: 72px 32px"],
  [style*="padding: 64px 32px"],
  [style*="padding: 56px 32px"],
  [style*="padding: 52px 32px"],
  [style*="padding: 48px 32px"],
  [style*="padding: 40px 32px"],
  [style*="padding: 36px 32px"],
  [style*="padding: 28px 32px"],
  [style*="padding: 24px 32px"],
  [style*="padding: 8px 32px"],
  [style*="padding: 0 32px"],
  [style*="padding:112px 32px"],
  [style*="padding:104px 32px"],
  [style*="padding:96px 32px"],
  [style*="padding:88px 32px"],
  [style*="padding:80px 32px"],
  [style*="padding:72px 32px"],
  [style*="padding:64px 32px"],
  [style*="padding:56px 32px"],
  [style*="padding:52px 32px"],
  [style*="padding:48px 32px"],
  [style*="padding:40px 32px"],
  [style*="padding:36px 32px"],
  [style*="padding:28px 32px"],
  [style*="padding:24px 32px"],
  [style*="padding:8px 32px"],
  [style*="padding:0 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding: 112px 32px 72px"] { padding-top: 72px !important; padding-bottom: 48px !important; }
  [style*="padding: 104px 32px 72px"] { padding-top: 64px !important; padding-bottom: 48px !important; }
  [style*="padding: 104px 32px 56px"],
  [style*="padding:104px 32px 56px"] { padding-top: 64px !important; padding-bottom: 40px !important; }
  [style*="padding: 96px 32px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 88px 32px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 72px 32px 110px"] { padding-top: 48px !important; padding-bottom: 72px !important; }
  [style*="padding: 24px 32px 110px"],
  [style*="padding:24px 32px 110px"] { padding-top: 16px !important; padding-bottom: 72px !important; }
  [style*="padding: 24px 32px 56px"] { padding-top: 16px !important; padding-bottom: 40px !important; }
  [style*="padding: 80px 32px 40px"],
  [style*="padding:80px 32px 40px"] { padding-top: 56px !important; padding-bottom: 32px !important; }
  [style*="padding: 64px 32px 110px"],
  [style*="padding:64px 32px 110px"] { padding-top: 40px !important; padding-bottom: 72px !important; }

  /* Centred CTA blocks: reduce interior padding */
  [style*="padding: 88px 64px"],
  [style*="padding:88px 64px"] {
    padding: 48px 24px !important;
  }
  /* Insight feature card (padding: 64px) */
  [style*="padding: 64px"],
  [style*="padding:64px"] {
    padding: 28px 22px !important;
  }

  /* Catch-all: any grid collapses to a single column */
  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Client logos: keep 2-up on mobile so they don't stack forever */
  section [style*="grid-template-columns: repeat(5, 1fr)"],
  section [style*="grid-template-columns:repeat(5, 1fr)"],
  section [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Headings — shrink large display type */
  [style*="font-size: 72px"], [style*="font-size:72px"] { font-size: 40px !important; line-height: 1.1 !important; }
  [style*="font-size: 64px"], [style*="font-size:64px"] { font-size: 36px !important; line-height: 1.1 !important; }
  [style*="font-size: 52px"], [style*="font-size:52px"] { font-size: 40px !important; line-height: 1.05 !important; }
  [style*="font-size: 50px"], [style*="font-size:50px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size: 48px"], [style*="font-size:48px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size: 46px"], [style*="font-size:46px"] { font-size: 30px !important; line-height: 1.15 !important; }
  [style*="font-size: 44px"], [style*="font-size:44px"] { font-size: 30px !important; line-height: 1.15 !important; }
  [style*="font-size: 42px"], [style*="font-size:42px"] { font-size: 28px !important; line-height: 1.2 !important; }
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 28px !important; line-height: 1.2 !important; }
  [style*="font-size: 34px"], [style*="font-size:34px"] { font-size: 26px !important; }

  /* Lead paragraphs */
  [style*="font-size: 21px"], [style*="font-size:21px"] { font-size: 17px !important; }
  [style*="font-size: 20px"], [style*="font-size:20px"] { font-size: 16px !important; }
  [style*="font-size: 18px"], [style*="font-size:18px"] { font-size: 16px !important; }

  /* Flex rows must wrap rather than overflow */
  [style*="display: flex"],
  [style*="display:flex"] {
    flex-wrap: wrap;
  }

  /* Buttons row: stack full-width */
  [style*="display: flex"][style*="gap: 16px"][style*="margin-top: 40px"],
  [style*="display:flex"][style*="gap:16px"][style*="margin-top:40px"],
  [style*="display: flex"][style*="justify-content: center"][style*="gap: 16px"],
  [style*="display:flex"][style*="justify-content:center"][style*="gap:16px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [style*="display: flex"][style*="gap: 16px"] > a,
  [style*="display:flex"][style*="gap:16px"] > a {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ---------- Header nav: mobile menu ---------- */
.vops-nav-desktop { display: flex; }
.vops-nav-mobile { display: none; }

@media (max-width: 780px) {
  .vops-nav-desktop { display: none !important; }
  .vops-nav-mobile { display: flex !important; }
  .vops-header-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 12px !important;
  }
  .vops-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 20px 20px;
    background: #FFFDF7;
    border-top: 1px solid #cdcdcd;
  }
  .vops-mobile-menu a {
    padding: 12px 4px;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #e4e2dc;
  }
  .vops-mobile-menu a:last-child { border-bottom: none; }
}