/* Global base styles — body reset, container, shared utilities */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Shared containers — responsive ladder matching PAGE-HOMEPAGE-1.5.html */
.container {
  max-width: var(--container-base);
  margin: 0 auto;
  padding: 0 var(--container-px);
}
.container-wide {
  max-width: calc(var(--container-base) + 120px);
  margin: 0 auto;
  padding: 0 var(--container-px);
}
@media (min-width: 1281px) {
  .container      { max-width: var(--container-md); }
  .container-wide { max-width: calc(var(--container-md) + 120px); }
}
@media (min-width: 1601px) {
  .container      { max-width: var(--container-lg); }
  .container-wide { max-width: calc(var(--container-lg) + 120px); }
}
@media (min-width: 1921px) {
  .container      { max-width: var(--container-xl); }
  .container-wide { max-width: calc(var(--container-xl) + 120px); }
}

/* Counter WordPress's global img reset (WP injects: img { max-width:100%; height:auto; })
   Scoped to .sec-16 and .sec-08 so it doesn't affect content images inside pages */
.sec-16 img,
.sec-08 img {
  max-width: none;
  height: auto;
}

/* WordPress alignment helpers (used by block editor content) */
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }
.alignwide  { max-width: var(--container-md); margin-left: auto; margin-right: auto; }
.aligncenter { text-align: center; }

/* Hide Google reCAPTCHA v3 badge — badge is not required to be visible when
   the reCAPTCHA branding is disclosed elsewhere on the page (e.g. in the form
   or privacy policy). See: https://developers.google.com/recaptcha/docs/faq */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ─── Mobile overflow fixes (375px) ────────────────────────────────────────
 * Fix for SEC-01 hero and SEC-02 capabilities sections overflowing on 375px.
 * Root cause: --container-px is 40px each side (80px total), leaving only
 * 295px of usable width. Inline styles have no 375px-specific rules.
 * These rules use !important to override the inline <style> blocks in the
 * page HTML since inline styles are parsed after linked CSS. */

@media (max-width: 900px) {

  /* SEC-01 — hero-grid fix.
     CSS Grid 1fr column has min-width:auto by default — it expands to fit its
     widest child instead of staying within the container. hero-content ends up
     wider than container-wide even though hero-grid looks correct.
     minmax(0,1fr) sets the minimum to 0 so the column respects the container. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* hero-content must not overflow its grid cell */
  .hero-content {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 480px) {

  /* SEC-01 — hero CTA buttons: stack vertically at 375px.
     Two buttons side-by-side with white-space:nowrap = ~370px.
     Available space at 375px = ~295px. Stack them to fit. */
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* SEC-02 — tier2 plugin grid: 1 column at 375px.
     2 columns = 140px each — too narrow for card content. */
  .tier2-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reduce container padding on very small screens for more usable width */
  .container,
  .container-wide,
  .section-container {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }
}