/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT – uniform side spacing and padding across all website pages
   Single source of truth for horizontal padding (main content, breadcrumb, footer).
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Side padding: mobile-first, balanced width on narrow screens */
  --page-padding-x: 1rem;       /* 16px – mobile */
  --page-padding-x-sm: 1.25rem; /* 20px – 640px+ */
  --page-padding-x-lg: 1.75rem; /* 28px – 1024px+ */
  /* Vertical rhythm for main content (optional) */
  --page-padding-y: 1.5rem;
  --page-padding-y-lg: 2rem;
}

/* Main content wrapper (all inner pages: legal, features, pricing, etc.) */
main .container-main-content {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

/* Main content .container (index and sectioned pages) */
main .container {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

/* Breadcrumb bar and any max-w-7xl row inside main */
main div.max-w-7xl.mx-auto {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

/* Mobile menu panel – same side spacing when menu is open */
[data-mobile-menu="true"] .max-w-7xl.mx-auto {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

/* Footer – same horizontal padding as content for alignment */
.footer-inner,
#footer .footer-inner {
  padding-left: var(--page-padding-x) !important;
  padding-right: var(--page-padding-x) !important;
}

@media (min-width: 640px) {
  main .container-main-content,
  main .container,
  main div.max-w-7xl.mx-auto,
  [data-mobile-menu="true"] .max-w-7xl.mx-auto,
  .footer-inner,
  #footer .footer-inner {
    padding-left: var(--page-padding-x-sm) !important;
    padding-right: var(--page-padding-x-sm) !important;
  }
}

@media (min-width: 1024px) {
  main .container-main-content,
  main .container,
  main div.max-w-7xl.mx-auto,
  [data-mobile-menu="true"] .max-w-7xl.mx-auto,
  .footer-inner,
  #footer .footer-inner {
    padding-left: var(--page-padding-x-lg) !important;
    padding-right: var(--page-padding-x-lg) !important;
  }
}

/* Inner content (e.g. max-w-4xl) – consistent horizontal padding so text doesn't hug edges */
main .container-main-content .max-w-4xl.mx-auto,
main .container-main-content .max-w-5xl.mx-auto,
main .container .max-w-4xl.mx-auto,
main .container .max-w-3xl.mx-auto {
  padding-left: 0 !important;
  padding-right: 0 !important;
}