/**
 * W3 Agentic — mobile responsive overrides.
 *
 * The page content in ../pages/*.html is plain inline-styled markup meant to be pasted into
 * GenerateBlocks' Code Editor view — it isn't built from native GB block attributes, so it doesn't
 * get GB's per-breakpoint (desktop/tablet/mobile) controls for free. This stylesheet retrofits
 * responsiveness using attribute selectors that key off the inline style values already in the
 * markup, so it works without editing every page's HTML by hand.
 *
 * Longer-term: if the client's team rebuilds these sections as native GenerateBlocks blocks in the
 * editor (rather than pasted markup), use GB's built-in responsive controls instead of this file —
 * this is a bridge, not the ideal end state.
 *
 * Enqueue this file site-wide (same place as calculator.js, or via GP's asset loader) — every page
 * needs it, not just Pricing.
 *
 * GeneratePress 3.x+ (confirmed on the live install, v3.6.1) generates its theme chrome colors
 * (header, nav, footer, default buttons/links) from a fixed set of CSS custom properties rather
 * than the classic Customizer `generate_settings` option this package's customizer-import.json
 * was written against. Overriding those variables here — rather than editing generate_settings,
 * which doesn't exist on this version — is what actually re-colors the theme chrome to match the
 * brand. Page content itself is unaffected either way since it's all explicit inline hex values.
 */
:root {
  --base: #0A0B0A;
  --base-2: #121412;
  --base-3: #0A0B0A;
  --contrast: #EEF2EE;
  --contrast-2: #8D968E;
  --contrast-3: #242724;
  --accent: #0AFF6E;
}

@media (max-width: 768px) {
  /* Collapse every multi-column grid used across the pages/footer to a single column. */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* One card (Managed AI Support, on the Services hub) spans 2 columns on desktop. With only
     one explicit column on mobile, an unreset span forces the grid to open an implicit second
     column just to satisfy it — reset it so the grid actually renders as a single column. */
  [style*="grid-column:span"] {
    grid-column: auto !important;
  }

  /* Scale down the large Unbounded display sizes so hero/section headings don't overflow. */
  [style*="font-size:56px"] { font-size: 32px !important; }
  [style*="font-size:48px"] { font-size: 30px !important; }
  [style*="font-size:44px"] { font-size: 28px !important; }
  [style*="font-size:36px"] { font-size: 24px !important; }
  [style*="font-size:32px"] { font-size: 22px !important; }
  [style*="font-size:30px"] { font-size: 22px !important; }
  [style*="font-size:28px"] { font-size: 20px !important; }
  [style*="font-size:26px"] { font-size: 20px !important; }
  [style*="font-size:24px"] { font-size: 19px !important; }

  /* Tighten section side padding — 24px each side is fine at desktop widths, too wide on a phone. */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Nav: let it wrap and center instead of overflowing/crowding on a narrow screen.
     Only relevant to the static preview's hand-built nav — real GP nav has its own mobile menu. */
  nav > div { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
}

@media (max-width: 420px) {
  [style*="font-size:56px"] { font-size: 28px !important; }
  [style*="font-size:48px"] { font-size: 26px !important; }
  [style*="font-size:44px"] { font-size: 24px !important; }
}