/* 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; }

/* ── Mailchimp lead form (mc4wp_form id=31138) ──────────────────────────────
   Scoped under .leadform-group so these rules only apply to the homepage
   hero newsletter form and never bleed into other mc4wp placements.
   Uses !important to win over the inline styles in the mc4wp form template.
────────────────────────────────────────────────────────────────────────────── */
.leadform-group .subscribe_form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

.leadform-group .email_add {
  flex: 1 1 auto !important;
  width: auto !important;
  margin-right: 0 !important;
}

.leadform-group #sub-email {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-body, inherit);
  font-size: var(--text-base, 15px);
  color: var(--text-heading, #1e293b);
  border-radius: 0 !important;
  outline: none;
  box-shadow: none;
}
.leadform-group #sub-email::placeholder { color: var(--text-muted, #94a3b8); }

.leadform-group .subscribe_btn {
  flex-shrink: 0;
  width: auto !important;
}

.leadform-group #sub-submit {
  display: block;
  padding: 8px 16px !important;
  background-color: var(--primary, #1a2020) !important;
  color: var(--text-inverse, #ffffff) !important;
  border: none !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-family: var(--font-body, inherit);
  font-weight: var(--fw-semibold, 600);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.leadform-group #sub-submit:hover {
  background-color: var(--primary-hover, #2d3030) !important;
}

/* 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;
  }
}