/* Global page padding to ensure consistent side and vertical spacing */
:root {
  --page-horizontal-padding: 20px;
  --page-horizontal-padding-lg: 40px;
  --page-vertical-padding: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Apply sensible padding to top-level layout containers only.
   Uses :where() for zero specificity so page-specific styles
   can override without needing !important. */
body > .container,
body > main,
body > section,
body > article,
body > .content,
body > .wrap,
body > .inner,
body > .page {
  padding-left: var(--page-horizontal-padding);
  padding-right: var(--page-horizontal-padding);
  padding-top: var(--page-vertical-padding);
  padding-bottom: var(--page-vertical-padding);
  margin-left: auto;
  margin-right: auto;
}

/* Increase side padding on wider screens */
@media (min-width: 768px) {
  body > .container,
  body > main,
  body > section,
  body > article,
  body > .content,
  body > .wrap,
  body > .inner,
  body > .page {
    padding-left: var(--page-horizontal-padding-lg);
    padding-right: var(--page-horizontal-padding-lg);
  }
}

/* Position mobile hamburger independently (keeps it on the right). */
header nav { position: relative; }

@media (max-width: 768px) {
  .mobile-hamburger { position: absolute !important; right: var(--page-horizontal-padding) !important; top: 50% !important; transform: translateY(-50%) !important; }
}

/* Utility to opt-out when zero gutters are desired */
.no-gutters { padding-left: 0 !important; padding-right: 0 !important; }