spacing.css

/*!
 * RX Theme - Advanced Spacing Utilities
 * File: assets/static/static-css/utilities/spacing.css
 * Purpose: Margin, padding, gap, inset, content flow, section spacing,
 * responsive spacing, logical spacing, and WordPress content spacing helpers.
 */

/* ==========================================================================
   1. Global Spacing Tokens
   ========================================================================== */

:root {
  /*
   * Base spacing scale.
   * Use these tokens everywhere in RX Theme.
   */

  --rx-space-0: 0;
  --rx-space-px: 1px;
  --rx-space-0-5: 0.125rem;
  --rx-space-1: 0.25rem;
  --rx-space-1-5: 0.375rem;
  --rx-space-2: 0.5rem;
  --rx-space-2-5: 0.625rem;
  --rx-space-3: 0.75rem;
  --rx-space-3-5: 0.875rem;
  --rx-space-4: 1rem;
  --rx-space-5: 1.25rem;
  --rx-space-6: 1.5rem;
  --rx-space-7: 1.75rem;
  --rx-space-8: 2rem;
  --rx-space-9: 2.25rem;
  --rx-space-10: 2.5rem;
  --rx-space-11: 2.75rem;
  --rx-space-12: 3rem;
  --rx-space-14: 3.5rem;
  --rx-space-16: 4rem;
  --rx-space-20: 5rem;
  --rx-space-24: 6rem;
  --rx-space-28: 7rem;
  --rx-space-32: 8rem;
  --rx-space-36: 9rem;
  --rx-space-40: 10rem;
  --rx-space-44: 11rem;
  --rx-space-48: 12rem;
  --rx-space-52: 13rem;
  --rx-space-56: 14rem;
  --rx-space-60: 15rem;
  --rx-space-64: 16rem;
  --rx-space-72: 18rem;
  --rx-space-80: 20rem;
  --rx-space-96: 24rem;

  /*
   * Fluid spacing tokens.
   * These are excellent for modern responsive sections.
   */

  --rx-space-fluid-xs: clamp(0.5rem, 0.35rem + 0.5vw, 0.875rem);
  --rx-space-fluid-sm: clamp(0.75rem, 0.55rem + 0.75vw, 1.25rem);
  --rx-space-fluid-md: clamp(1rem, 0.75rem + 1vw, 2rem);
  --rx-space-fluid-lg: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  --rx-space-fluid-xl: clamp(2rem, 1.25rem + 3vw, 5rem);
  --rx-space-fluid-2xl: clamp(3rem, 2rem + 4vw, 7rem);
  --rx-space-fluid-3xl: clamp(4rem, 2.5rem + 5vw, 9rem);

  /*
   * Layout tokens.
   */

  --rx-container-padding: clamp(1rem, 3vw, 2rem);
  --rx-section-padding-y: clamp(3rem, 6vw, 6rem);
  --rx-section-padding-x: var(--rx-container-padding);
  --rx-card-padding: clamp(1rem, 2vw, 1.5rem);
  --rx-box-padding: clamp(1rem, 2.5vw, 2rem);
  --rx-widget-padding: 1rem;
  --rx-content-flow: 1.25rem;
  --rx-heading-flow: 0.85rem;
  --rx-list-flow: 0.5rem;
  --rx-form-flow: 1rem;
  --rx-grid-gap: clamp(1rem, 2vw, 1.5rem);
  --rx-cluster-gap: 0.75rem;
}

/* ==========================================================================
   2. Base Spacing Reset Helpers
   ========================================================================== */

.rx-m-0,
.m-0 {
  margin: 0 !important;
}

.rx-p-0,
.p-0 {
  padding: 0 !important;
}

.rx-gap-0,
.gap-0 {
  gap: 0 !important;
}

.rx-space-reset > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.rx-no-space {
  margin: 0 !important;
  padding: 0 !important;
}

.rx-no-margin {
  margin: 0 !important;
}

.rx-no-padding {
  padding: 0 !important;
}

/* ==========================================================================
   3. Margin Utilities
   ========================================================================== */

/* All sides */

.rx-m-auto {
  margin: auto !important;
}

.rx-m-px {
  margin: var(--rx-space-px) !important;
}

.rx-m-0-5 {
  margin: var(--rx-space-0-5) !important;
}

.rx-m-1 {
  margin: var(--rx-space-1) !important;
}

.rx-m-1-5 {
  margin: var(--rx-space-1-5) !important;
}

.rx-m-2 {
  margin: var(--rx-space-2) !important;
}

.rx-m-2-5 {
  margin: var(--rx-space-2-5) !important;
}

.rx-m-3 {
  margin: var(--rx-space-3) !important;
}

.rx-m-3-5 {
  margin: var(--rx-space-3-5) !important;
}

.rx-m-4 {
  margin: var(--rx-space-4) !important;
}

.rx-m-5 {
  margin: var(--rx-space-5) !important;
}

.rx-m-6 {
  margin: var(--rx-space-6) !important;
}

.rx-m-7 {
  margin: var(--rx-space-7) !important;
}

.rx-m-8 {
  margin: var(--rx-space-8) !important;
}

.rx-m-9 {
  margin: var(--rx-space-9) !important;
}

.rx-m-10 {
  margin: var(--rx-space-10) !important;
}

.rx-m-12 {
  margin: var(--rx-space-12) !important;
}

.rx-m-14 {
  margin: var(--rx-space-14) !important;
}

.rx-m-16 {
  margin: var(--rx-space-16) !important;
}

.rx-m-20 {
  margin: var(--rx-space-20) !important;
}

.rx-m-24 {
  margin: var(--rx-space-24) !important;
}

.rx-m-32 {
  margin: var(--rx-space-32) !important;
}

/* Margin block */

.rx-my-auto {
  margin-block: auto !important;
}

.rx-my-0 {
  margin-block: 0 !important;
}

.rx-my-1 {
  margin-block: var(--rx-space-1) !important;
}

.rx-my-2 {
  margin-block: var(--rx-space-2) !important;
}

.rx-my-3 {
  margin-block: var(--rx-space-3) !important;
}

.rx-my-4 {
  margin-block: var(--rx-space-4) !important;
}

.rx-my-5 {
  margin-block: var(--rx-space-5) !important;
}

.rx-my-6 {
  margin-block: var(--rx-space-6) !important;
}

.rx-my-8 {
  margin-block: var(--rx-space-8) !important;
}

.rx-my-10 {
  margin-block: var(--rx-space-10) !important;
}

.rx-my-12 {
  margin-block: var(--rx-space-12) !important;
}

.rx-my-16 {
  margin-block: var(--rx-space-16) !important;
}

.rx-my-20 {
  margin-block: var(--rx-space-20) !important;
}

.rx-my-24 {
  margin-block: var(--rx-space-24) !important;
}

/* Margin inline */

.rx-mx-auto {
  margin-inline: auto !important;
}

.rx-mx-0 {
  margin-inline: 0 !important;
}

.rx-mx-1 {
  margin-inline: var(--rx-space-1) !important;
}

.rx-mx-2 {
  margin-inline: var(--rx-space-2) !important;
}

.rx-mx-3 {
  margin-inline: var(--rx-space-3) !important;
}

.rx-mx-4 {
  margin-inline: var(--rx-space-4) !important;
}

.rx-mx-5 {
  margin-inline: var(--rx-space-5) !important;
}

.rx-mx-6 {
  margin-inline: var(--rx-space-6) !important;
}

.rx-mx-8 {
  margin-inline: var(--rx-space-8) !important;
}

.rx-mx-10 {
  margin-inline: var(--rx-space-10) !important;
}

.rx-mx-12 {
  margin-inline: var(--rx-space-12) !important;
}

/* Margin top */

.rx-mt-auto {
  margin-block-start: auto !important;
}

.rx-mt-0 {
  margin-block-start: 0 !important;
}

.rx-mt-1 {
  margin-block-start: var(--rx-space-1) !important;
}

.rx-mt-2 {
  margin-block-start: var(--rx-space-2) !important;
}

.rx-mt-3 {
  margin-block-start: var(--rx-space-3) !important;
}

.rx-mt-4 {
  margin-block-start: var(--rx-space-4) !important;
}

.rx-mt-5 {
  margin-block-start: var(--rx-space-5) !important;
}

.rx-mt-6 {
  margin-block-start: var(--rx-space-6) !important;
}

.rx-mt-8 {
  margin-block-start: var(--rx-space-8) !important;
}

.rx-mt-10 {
  margin-block-start: var(--rx-space-10) !important;
}

.rx-mt-12 {
  margin-block-start: var(--rx-space-12) !important;
}

.rx-mt-16 {
  margin-block-start: var(--rx-space-16) !important;
}

.rx-mt-20 {
  margin-block-start: var(--rx-space-20) !important;
}

.rx-mt-24 {
  margin-block-start: var(--rx-space-24) !important;
}

/* Margin bottom */

.rx-mb-auto {
  margin-block-end: auto !important;
}

.rx-mb-0 {
  margin-block-end: 0 !important;
}

.rx-mb-1 {
  margin-block-end: var(--rx-space-1) !important;
}

.rx-mb-2 {
  margin-block-end: var(--rx-space-2) !important;
}

.rx-mb-3 {
  margin-block-end: var(--rx-space-3) !important;
}

.rx-mb-4 {
  margin-block-end: var(--rx-space-4) !important;
}

.rx-mb-5 {
  margin-block-end: var(--rx-space-5) !important;
}

.rx-mb-6 {
  margin-block-end: var(--rx-space-6) !important;
}

.rx-mb-8 {
  margin-block-end: var(--rx-space-8) !important;
}

.rx-mb-10 {
  margin-block-end: var(--rx-space-10) !important;
}

.rx-mb-12 {
  margin-block-end: var(--rx-space-12) !important;
}

.rx-mb-16 {
  margin-block-end: var(--rx-space-16) !important;
}

.rx-mb-20 {
  margin-block-end: var(--rx-space-20) !important;
}

.rx-mb-24 {
  margin-block-end: var(--rx-space-24) !important;
}

/* Margin inline start */

.rx-ms-auto {
  margin-inline-start: auto !important;
}

.rx-ms-0 {
  margin-inline-start: 0 !important;
}

.rx-ms-1 {
  margin-inline-start: var(--rx-space-1) !important;
}

.rx-ms-2 {
  margin-inline-start: var(--rx-space-2) !important;
}

.rx-ms-3 {
  margin-inline-start: var(--rx-space-3) !important;
}

.rx-ms-4 {
  margin-inline-start: var(--rx-space-4) !important;
}

.rx-ms-5 {
  margin-inline-start: var(--rx-space-5) !important;
}

.rx-ms-6 {
  margin-inline-start: var(--rx-space-6) !important;
}

.rx-ms-8 {
  margin-inline-start: var(--rx-space-8) !important;
}

/* Margin inline end */

.rx-me-auto {
  margin-inline-end: auto !important;
}

.rx-me-0 {
  margin-inline-end: 0 !important;
}

.rx-me-1 {
  margin-inline-end: var(--rx-space-1) !important;
}

.rx-me-2 {
  margin-inline-end: var(--rx-space-2) !important;
}

.rx-me-3 {
  margin-inline-end: var(--rx-space-3) !important;
}

.rx-me-4 {
  margin-inline-end: var(--rx-space-4) !important;
}

.rx-me-5 {
  margin-inline-end: var(--rx-space-5) !important;
}

.rx-me-6 {
  margin-inline-end: var(--rx-space-6) !important;
}

.rx-me-8 {
  margin-inline-end: var(--rx-space-8) !important;
}

/* Negative margin */

.rx--m-1 {
  margin: calc(var(--rx-space-1) * -1) !important;
}

.rx--m-2 {
  margin: calc(var(--rx-space-2) * -1) !important;
}

.rx--m-3 {
  margin: calc(var(--rx-space-3) * -1) !important;
}

.rx--m-4 {
  margin: calc(var(--rx-space-4) * -1) !important;
}

.rx--mx-1 {
  margin-inline: calc(var(--rx-space-1) * -1) !important;
}

.rx--mx-2 {
  margin-inline: calc(var(--rx-space-2) * -1) !important;
}

.rx--mx-3 {
  margin-inline: calc(var(--rx-space-3) * -1) !important;
}

.rx--mx-4 {
  margin-inline: calc(var(--rx-space-4) * -1) !important;
}

.rx--my-1 {
  margin-block: calc(var(--rx-space-1) * -1) !important;
}

.rx--my-2 {
  margin-block: calc(var(--rx-space-2) * -1) !important;
}

.rx--my-3 {
  margin-block: calc(var(--rx-space-3) * -1) !important;
}

.rx--my-4 {
  margin-block: calc(var(--rx-space-4) * -1) !important;
}

/* ==========================================================================
   4. Padding Utilities
   ========================================================================== */

/* All sides */

.rx-p-px {
  padding: var(--rx-space-px) !important;
}

.rx-p-0-5 {
  padding: var(--rx-space-0-5) !important;
}

.rx-p-1 {
  padding: var(--rx-space-1) !important;
}

.rx-p-1-5 {
  padding: var(--rx-space-1-5) !important;
}

.rx-p-2 {
  padding: var(--rx-space-2) !important;
}

.rx-p-2-5 {
  padding: var(--rx-space-2-5) !important;
}

.rx-p-3 {
  padding: var(--rx-space-3) !important;
}

.rx-p-3-5 {
  padding: var(--rx-space-3-5) !important;
}

.rx-p-4 {
  padding: var(--rx-space-4) !important;
}

.rx-p-5 {
  padding: var(--rx-space-5) !important;
}

.rx-p-6 {
  padding: var(--rx-space-6) !important;
}

.rx-p-7 {
  padding: var(--rx-space-7) !important;
}

.rx-p-8 {
  padding: var(--rx-space-8) !important;
}

.rx-p-9 {
  padding: var(--rx-space-9) !important;
}

.rx-p-10 {
  padding: var(--rx-space-10) !important;
}

.rx-p-12 {
  padding: var(--rx-space-12) !important;
}

.rx-p-14 {
  padding: var(--rx-space-14) !important;
}

.rx-p-16 {
  padding: var(--rx-space-16) !important;
}

.rx-p-20 {
  padding: var(--rx-space-20) !important;
}

.rx-p-24 {
  padding: var(--rx-space-24) !important;
}

.rx-p-32 {
  padding: var(--rx-space-32) !important;
}

/* Padding block */

.rx-py-0 {
  padding-block: 0 !important;
}

.rx-py-1 {
  padding-block: var(--rx-space-1) !important;
}

.rx-py-2 {
  padding-block: var(--rx-space-2) !important;
}

.rx-py-3 {
  padding-block: var(--rx-space-3) !important;
}

.rx-py-4 {
  padding-block: var(--rx-space-4) !important;
}

.rx-py-5 {
  padding-block: var(--rx-space-5) !important;
}

.rx-py-6 {
  padding-block: var(--rx-space-6) !important;
}

.rx-py-8 {
  padding-block: var(--rx-space-8) !important;
}

.rx-py-10 {
  padding-block: var(--rx-space-10) !important;
}

.rx-py-12 {
  padding-block: var(--rx-space-12) !important;
}

.rx-py-16 {
  padding-block: var(--rx-space-16) !important;
}

.rx-py-20 {
  padding-block: var(--rx-space-20) !important;
}

.rx-py-24 {
  padding-block: var(--rx-space-24) !important;
}

/* Padding inline */

.rx-px-0 {
  padding-inline: 0 !important;
}

.rx-px-1 {
  padding-inline: var(--rx-space-1) !important;
}

.rx-px-2 {
  padding-inline: var(--rx-space-2) !important;
}

.rx-px-3 {
  padding-inline: var(--rx-space-3) !important;
}

.rx-px-4 {
  padding-inline: var(--rx-space-4) !important;
}

.rx-px-5 {
  padding-inline: var(--rx-space-5) !important;
}

.rx-px-6 {
  padding-inline: var(--rx-space-6) !important;
}

.rx-px-8 {
  padding-inline: var(--rx-space-8) !important;
}

.rx-px-10 {
  padding-inline: var(--rx-space-10) !important;
}

.rx-px-12 {
  padding-inline: var(--rx-space-12) !important;
}

.rx-px-16 {
  padding-inline: var(--rx-space-16) !important;
}

.rx-px-20 {
  padding-inline: var(--rx-space-20) !important;
}

/* Padding top */

.rx-pt-0 {
  padding-block-start: 0 !important;
}

.rx-pt-1 {
  padding-block-start: var(--rx-space-1) !important;
}

.rx-pt-2 {
  padding-block-start: var(--rx-space-2) !important;
}

.rx-pt-3 {
  padding-block-start: var(--rx-space-3) !important;
}

.rx-pt-4 {
  padding-block-start: var(--rx-space-4) !important;
}

.rx-pt-5 {
  padding-block-start: var(--rx-space-5) !important;
}

.rx-pt-6 {
  padding-block-start: var(--rx-space-6) !important;
}

.rx-pt-8 {
  padding-block-start: var(--rx-space-8) !important;
}

.rx-pt-10 {
  padding-block-start: var(--rx-space-10) !important;
}

.rx-pt-12 {
  padding-block-start: var(--rx-space-12) !important;
}

.rx-pt-16 {
  padding-block-start: var(--rx-space-16) !important;
}

.rx-pt-20 {
  padding-block-start: var(--rx-space-20) !important;
}

.rx-pt-24 {
  padding-block-start: var(--rx-space-24) !important;
}

/* Padding bottom */

.rx-pb-0 {
  padding-block-end: 0 !important;
}

.rx-pb-1 {
  padding-block-end: var(--rx-space-1) !important;
}

.rx-pb-2 {
  padding-block-end: var(--rx-space-2) !important;
}

.rx-pb-3 {
  padding-block-end: var(--rx-space-3) !important;
}

.rx-pb-4 {
  padding-block-end: var(--rx-space-4) !important;
}

.rx-pb-5 {
  padding-block-end: var(--rx-space-5) !important;
}

.rx-pb-6 {
  padding-block-end: var(--rx-space-6) !important;
}

.rx-pb-8 {
  padding-block-end: var(--rx-space-8) !important;
}

.rx-pb-10 {
  padding-block-end: var(--rx-space-10) !important;
}

.rx-pb-12 {
  padding-block-end: var(--rx-space-12) !important;
}

.rx-pb-16 {
  padding-block-end: var(--rx-space-16) !important;
}

.rx-pb-20 {
  padding-block-end: var(--rx-space-20) !important;
}

.rx-pb-24 {
  padding-block-end: var(--rx-space-24) !important;
}

/* Padding inline start */

.rx-ps-0 {
  padding-inline-start: 0 !important;
}

.rx-ps-1 {
  padding-inline-start: var(--rx-space-1) !important;
}

.rx-ps-2 {
  padding-inline-start: var(--rx-space-2) !important;
}

.rx-ps-3 {
  padding-inline-start: var(--rx-space-3) !important;
}

.rx-ps-4 {
  padding-inline-start: var(--rx-space-4) !important;
}

.rx-ps-5 {
  padding-inline-start: var(--rx-space-5) !important;
}

.rx-ps-6 {
  padding-inline-start: var(--rx-space-6) !important;
}

.rx-ps-8 {
  padding-inline-start: var(--rx-space-8) !important;
}

/* Padding inline end */

.rx-pe-0 {
  padding-inline-end: 0 !important;
}

.rx-pe-1 {
  padding-inline-end: var(--rx-space-1) !important;
}

.rx-pe-2 {
  padding-inline-end: var(--rx-space-2) !important;
}

.rx-pe-3 {
  padding-inline-end: var(--rx-space-3) !important;
}

.rx-pe-4 {
  padding-inline-end: var(--rx-space-4) !important;
}

.rx-pe-5 {
  padding-inline-end: var(--rx-space-5) !important;
}

.rx-pe-6 {
  padding-inline-end: var(--rx-space-6) !important;
}

.rx-pe-8 {
  padding-inline-end: var(--rx-space-8) !important;
}

/* ==========================================================================
   5. Fluid Spacing Utilities
   ========================================================================== */

.rx-m-fluid-xs {
  margin: var(--rx-space-fluid-xs) !important;
}

.rx-m-fluid-sm {
  margin: var(--rx-space-fluid-sm) !important;
}

.rx-m-fluid-md {
  margin: var(--rx-space-fluid-md) !important;
}

.rx-m-fluid-lg {
  margin: var(--rx-space-fluid-lg) !important;
}

.rx-m-fluid-xl {
  margin: var(--rx-space-fluid-xl) !important;
}

.rx-p-fluid-xs {
  padding: var(--rx-space-fluid-xs) !important;
}

.rx-p-fluid-sm {
  padding: var(--rx-space-fluid-sm) !important;
}

.rx-p-fluid-md {
  padding: var(--rx-space-fluid-md) !important;
}

.rx-p-fluid-lg {
  padding: var(--rx-space-fluid-lg) !important;
}

.rx-p-fluid-xl {
  padding: var(--rx-space-fluid-xl) !important;
}

.rx-py-fluid-xs {
  padding-block: var(--rx-space-fluid-xs) !important;
}

.rx-py-fluid-sm {
  padding-block: var(--rx-space-fluid-sm) !important;
}

.rx-py-fluid-md {
  padding-block: var(--rx-space-fluid-md) !important;
}

.rx-py-fluid-lg {
  padding-block: var(--rx-space-fluid-lg) !important;
}

.rx-py-fluid-xl {
  padding-block: var(--rx-space-fluid-xl) !important;
}

.rx-px-fluid-xs {
  padding-inline: var(--rx-space-fluid-xs) !important;
}

.rx-px-fluid-sm {
  padding-inline: var(--rx-space-fluid-sm) !important;
}

.rx-px-fluid-md {
  padding-inline: var(--rx-space-fluid-md) !important;
}

.rx-px-fluid-lg {
  padding-inline: var(--rx-space-fluid-lg) !important;
}

.rx-px-fluid-xl {
  padding-inline: var(--rx-space-fluid-xl) !important;
}

/* ==========================================================================
   6. Gap Utilities
   ========================================================================== */

.rx-gap-px {
  gap: var(--rx-space-px) !important;
}

.rx-gap-1 {
  gap: var(--rx-space-1) !important;
}

.rx-gap-2 {
  gap: var(--rx-space-2) !important;
}

.rx-gap-3 {
  gap: var(--rx-space-3) !important;
}

.rx-gap-4 {
  gap: var(--rx-space-4) !important;
}

.rx-gap-5 {
  gap: var(--rx-space-5) !important;
}

.rx-gap-6 {
  gap: var(--rx-space-6) !important;
}

.rx-gap-8 {
  gap: var(--rx-space-8) !important;
}

.rx-gap-10 {
  gap: var(--rx-space-10) !important;
}

.rx-gap-12 {
  gap: var(--rx-space-12) !important;
}

.rx-gap-16 {
  gap: var(--rx-space-16) !important;
}

.rx-gap-fluid-xs {
  gap: var(--rx-space-fluid-xs) !important;
}

.rx-gap-fluid-sm {
  gap: var(--rx-space-fluid-sm) !important;
}

.rx-gap-fluid-md {
  gap: var(--rx-space-fluid-md) !important;
}

.rx-gap-fluid-lg {
  gap: var(--rx-space-fluid-lg) !important;
}

.rx-gap-fluid-xl {
  gap: var(--rx-space-fluid-xl) !important;
}

.rx-row-gap-0 {
  row-gap: 0 !important;
}

.rx-row-gap-1 {
  row-gap: var(--rx-space-1) !important;
}

.rx-row-gap-2 {
  row-gap: var(--rx-space-2) !important;
}

.rx-row-gap-3 {
  row-gap: var(--rx-space-3) !important;
}

.rx-row-gap-4 {
  row-gap: var(--rx-space-4) !important;
}

.rx-row-gap-6 {
  row-gap: var(--rx-space-6) !important;
}

.rx-row-gap-8 {
  row-gap: var(--rx-space-8) !important;
}

.rx-row-gap-12 {
  row-gap: var(--rx-space-12) !important;
}

.rx-col-gap-0 {
  column-gap: 0 !important;
}

.rx-col-gap-1 {
  column-gap: var(--rx-space-1) !important;
}

.rx-col-gap-2 {
  column-gap: var(--rx-space-2) !important;
}

.rx-col-gap-3 {
  column-gap: var(--rx-space-3) !important;
}

.rx-col-gap-4 {
  column-gap: var(--rx-space-4) !important;
}

.rx-col-gap-6 {
  column-gap: var(--rx-space-6) !important;
}

.rx-col-gap-8 {
  column-gap: var(--rx-space-8) !important;
}

.rx-col-gap-12 {
  column-gap: var(--rx-space-12) !important;
}

/* ==========================================================================
   7. Space Between Child Elements
   ========================================================================== */

.rx-space-y-0 > * + * {
  margin-block-start: 0 !important;
}

.rx-space-y-1 > * + * {
  margin-block-start: var(--rx-space-1) !important;
}

.rx-space-y-2 > * + * {
  margin-block-start: var(--rx-space-2) !important;
}

.rx-space-y-3 > * + * {
  margin-block-start: var(--rx-space-3) !important;
}

.rx-space-y-4 > * + * {
  margin-block-start: var(--rx-space-4) !important;
}

.rx-space-y-5 > * + * {
  margin-block-start: var(--rx-space-5) !important;
}

.rx-space-y-6 > * + * {
  margin-block-start: var(--rx-space-6) !important;
}

.rx-space-y-8 > * + * {
  margin-block-start: var(--rx-space-8) !important;
}

.rx-space-y-10 > * + * {
  margin-block-start: var(--rx-space-10) !important;
}

.rx-space-y-12 > * + * {
  margin-block-start: var(--rx-space-12) !important;
}

.rx-space-y-fluid-sm > * + * {
  margin-block-start: var(--rx-space-fluid-sm) !important;
}

.rx-space-y-fluid-md > * + * {
  margin-block-start: var(--rx-space-fluid-md) !important;
}

.rx-space-y-fluid-lg > * + * {
  margin-block-start: var(--rx-space-fluid-lg) !important;
}

.rx-space-x-0 > * + * {
  margin-inline-start: 0 !important;
}

.rx-space-x-1 > * + * {
  margin-inline-start: var(--rx-space-1) !important;
}

.rx-space-x-2 > * + * {
  margin-inline-start: var(--rx-space-2) !important;
}

.rx-space-x-3 > * + * {
  margin-inline-start: var(--rx-space-3) !important;
}

.rx-space-x-4 > * + * {
  margin-inline-start: var(--rx-space-4) !important;
}

.rx-space-x-5 > * + * {
  margin-inline-start: var(--rx-space-5) !important;
}

.rx-space-x-6 > * + * {
  margin-inline-start: var(--rx-space-6) !important;
}

.rx-space-x-8 > * + * {
  margin-inline-start: var(--rx-space-8) !important;
}

/* ==========================================================================
   8. Stack, Cluster, Sidebar, and Flow Utilities
   ========================================================================== */

.rx-flow > * + * {
  margin-block-start: var(--rx-content-flow);
}

.rx-flow-xs > * + * {
  margin-block-start: var(--rx-space-2);
}

.rx-flow-sm > * + * {
  margin-block-start: var(--rx-space-3);
}

.rx-flow-md > * + * {
  margin-block-start: var(--rx-space-5);
}

.rx-flow-lg > * + * {
  margin-block-start: var(--rx-space-8);
}

.rx-flow-xl > * + * {
  margin-block-start: var(--rx-space-12);
}

.rx-heading-flow > * + * {
  margin-block-start: var(--rx-heading-flow);
}

.rx-list-flow > li + li {
  margin-block-start: var(--rx-list-flow);
}

.rx-form-flow > * + * {
  margin-block-start: var(--rx-form-flow);
}

.rx-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--rx-content-flow);
}

.rx-stack-xs {
  gap: var(--rx-space-2);
}

.rx-stack-sm {
  gap: var(--rx-space-3);
}

.rx-stack-md {
  gap: var(--rx-space-5);
}

.rx-stack-lg {
  gap: var(--rx-space-8);
}

.rx-stack-xl {
  gap: var(--rx-space-12);
}

.rx-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rx-cluster-gap);
}

.rx-cluster-xs {
  gap: var(--rx-space-1);
}

.rx-cluster-sm {
  gap: var(--rx-space-2);
}

.rx-cluster-md {
  gap: var(--rx-space-4);
}

.rx-cluster-lg {
  gap: var(--rx-space-6);
}

.rx-sidebar-space {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rx-grid-gap);
}

.rx-sidebar-space > :first-child {
  flex-basis: 18rem;
  flex-grow: 1;
}

.rx-sidebar-space > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* ==========================================================================
   9. Section and Container Spacing
   ========================================================================== */

.rx-section {
  padding-block: var(--rx-section-padding-y);
  padding-inline: var(--rx-section-padding-x);
}

.rx-section-sm {
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-inline: var(--rx-section-padding-x);
}

.rx-section-md {
  padding-block: clamp(3rem, 6vw, 6rem);
  padding-inline: var(--rx-section-padding-x);
}

.rx-section-lg {
  padding-block: clamp(4rem, 8vw, 8rem);
  padding-inline: var(--rx-section-padding-x);
}

.rx-section-xl {
  padding-block: clamp(5rem, 10vw, 10rem);
  padding-inline: var(--rx-section-padding-x);
}

.rx-section-top {
  padding-block-start: var(--rx-section-padding-y);
}

.rx-section-bottom {
  padding-block-end: var(--rx-section-padding-y);
}

.rx-section-no-top {
  padding-block-start: 0 !important;
}

.rx-section-no-bottom {
  padding-block-end: 0 !important;
}

.rx-container-space {
  padding-inline: var(--rx-container-padding);
}

.rx-content-space {
  padding: var(--rx-box-padding);
}

.rx-card-space {
  padding: var(--rx-card-padding);
}

.rx-widget-space {
  padding: var(--rx-widget-padding);
}

.rx-page-space {
  padding-block: clamp(2rem, 5vw, 5rem);
}

.rx-hero-space {
  padding-block: clamp(4rem, 10vw, 9rem);
  padding-inline: var(--rx-container-padding);
}

.rx-article-space {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* ==========================================================================
   10. WordPress Content Spacing
   ========================================================================== */

.entry-content > * {
  margin-block-start: 0;
  margin-block-end: var(--rx-content-flow);
}

.entry-content > :last-child {
  margin-block-end: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-block-start: clamp(1.75rem, 4vw, 3rem);
  margin-block-end: var(--rx-heading-flow);
}

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child {
  margin-block-start: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content dl,
.entry-content blockquote,
.entry-content pre,
.entry-content table,
.entry-content figure,
.entry-content details,
.entry-content form {
  margin-block-start: 0;
  margin-block-end: var(--rx-content-flow);
}

.entry-content ul,
.entry-content ol {
  padding-inline-start: 1.5em;
}

.entry-content li + li {
  margin-block-start: 0.4em;
}

.entry-content li > ul,
.entry-content li > ol {
  margin-block-start: 0.4em;
  margin-block-end: 0;
}

.entry-content figure {
  margin-inline: 0;
}

.entry-content figcaption {
  margin-block-start: var(--rx-space-2);
}

.entry-content blockquote {
  padding-block: var(--rx-space-4);
  padding-inline: var(--rx-space-5);
}

.entry-content pre {
  padding: var(--rx-space-5);
  overflow: auto;
}

.entry-content table {
  margin-block: var(--rx-space-6);
}

.entry-content .alignfull {
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
  width: 100vw;
}

.entry-content .alignwide {
  margin-inline: auto;
  max-inline-size: min(100%, 75rem);
}

/* Gutenberg block spacing */

.wp-block-group,
.wp-block-cover,
.wp-block-media-text,
.wp-block-columns,
.wp-block-query,
.wp-block-post-template,
.wp-block-gallery {
  margin-block-start: var(--rx-space-fluid-md);
  margin-block-end: var(--rx-space-fluid-md);
}

.wp-block-columns {
  gap: var(--rx-grid-gap);
}

.wp-block-column > * + * {
  margin-block-start: var(--rx-content-flow);
}

.wp-block-buttons {
  gap: var(--rx-space-3);
}

.wp-block-button {
  margin: 0;
}

.wp-block-separator {
  margin-block: var(--rx-space-8);
}

.wp-block-spacer {
  margin: 0;
}

.wp-block-image,
.wp-block-video,
.wp-block-embed,
.wp-block-table {
  margin-block: var(--rx-space-fluid-md);
}

.wp-block-quote,
.wp-block-pullquote {
  margin-block: var(--rx-space-fluid-md);
}

/* ==========================================================================
   11. Header, Footer, Navigation Spacing
   ========================================================================== */

.rx-site-header {
  padding-block: var(--rx-space-4);
}

.rx-header-inner {
  gap: var(--rx-space-4);
}

.rx-main-navigation ul {
  gap: var(--rx-space-4);
}

.rx-main-navigation li {
  margin: 0;
}

.rx-nav-spacing-sm ul {
  gap: var(--rx-space-2);
}

.rx-nav-spacing-md ul {
  gap: var(--rx-space-4);
}

.rx-nav-spacing-lg ul {
  gap: var(--rx-space-6);
}

.rx-site-footer {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.rx-footer-widgets {
  gap: var(--rx-grid-gap);
}

.rx-footer-bottom {
  padding-block-start: var(--rx-space-6);
  margin-block-start: var(--rx-space-6);
}

/* ==========================================================================
   12. Card, Grid, Archive, and Sidebar Spacing
   ========================================================================== */

.rx-grid {
  gap: var(--rx-grid-gap);
}

.rx-grid-gap-sm {
  gap: var(--rx-space-4);
}

.rx-grid-gap-md {
  gap: var(--rx-space-6);
}

.rx-grid-gap-lg {
  gap: var(--rx-space-8);
}

.rx-grid-gap-xl {
  gap: var(--rx-space-12);
}

.rx-card {
  padding: var(--rx-card-padding);
}

.rx-card-compact {
  padding: var(--rx-space-4);
}

.rx-card-comfort {
  padding: var(--rx-space-6);
}

.rx-card-large {
  padding: var(--rx-space-8);
}

.rx-card > * + * {
  margin-block-start: var(--rx-space-4);
}

.rx-post-card > * + * {
  margin-block-start: var(--rx-space-3);
}

.rx-post-card__meta,
.rx-entry-meta {
  gap: var(--rx-space-2);
}

.rx-post-card__footer {
  margin-block-start: var(--rx-space-5);
}

.rx-archive-list > * + * {
  margin-block-start: var(--rx-space-6);
}

.rx-sidebar > * + * {
  margin-block-start: var(--rx-space-6);
}

.rx-widget > * + * {
  margin-block-start: var(--rx-space-4);
}

.rx-widget-title {
  margin-block-end: var(--rx-space-3);
}

/* ==========================================================================
   13. Form Spacing
   ========================================================================== */

.rx-form > * + * {
  margin-block-start: var(--rx-form-flow);
}

.rx-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rx-space-4);
}

.rx-form-group > * + * {
  margin-block-start: var(--rx-space-2);
}

.rx-field-space {
  margin-block-end: var(--rx-space-4);
}

.rx-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rx-space-3);
}

.rx-search-form {
  gap: var(--rx-space-2);
}

/* ==========================================================================
   14. Inset Utilities
   ========================================================================== */

.rx-inset-0 {
  inset: 0 !important;
}

.rx-inset-1 {
  inset: var(--rx-space-1) !important;
}

.rx-inset-2 {
  inset: var(--rx-space-2) !important;
}

.rx-inset-3 {
  inset: var(--rx-space-3) !important;
}

.rx-inset-4 {
  inset: var(--rx-space-4) !important;
}

.rx-inset-6 {
  inset: var(--rx-space-6) !important;
}

.rx-inset-8 {
  inset: var(--rx-space-8) !important;
}

.rx-inset-x-0 {
  inset-inline: 0 !important;
}

.rx-inset-x-4 {
  inset-inline: var(--rx-space-4) !important;
}

.rx-inset-y-0 {
  inset-block: 0 !important;
}

.rx-inset-y-4 {
  inset-block: var(--rx-space-4) !important;
}

.rx-top-0 {
  inset-block-start: 0 !important;
}

.rx-top-4 {
  inset-block-start: var(--rx-space-4) !important;
}

.rx-right-0 {
  inset-inline-end: 0 !important;
}

.rx-right-4 {
  inset-inline-end: var(--rx-space-4) !important;
}

.rx-bottom-0 {
  inset-block-end: 0 !important;
}

.rx-bottom-4 {
  inset-block-end: var(--rx-space-4) !important;
}

.rx-left-0 {
  inset-inline-start: 0 !important;
}

.rx-left-4 {
  inset-inline-start: var(--rx-space-4) !important;
}

/* ==========================================================================
   15. Safe Area Spacing for Mobile Devices
   ========================================================================== */

.rx-safe-top {
  padding-block-start: env(safe-area-inset-top);
}

.rx-safe-right {
  padding-inline-end: env(safe-area-inset-right);
}

.rx-safe-bottom {
  padding-block-end: env(safe-area-inset-bottom);
}

.rx-safe-left {
  padding-inline-start: env(safe-area-inset-left);
}

.rx-safe-x {
  padding-inline-start: env(safe-area-inset-left);
  padding-inline-end: env(safe-area-inset-right);
}

.rx-safe-y {
  padding-block-start: env(safe-area-inset-top);
  padding-block-end: env(safe-area-inset-bottom);
}

/* ==========================================================================
   16. Scroll Spacing
   ========================================================================== */

.rx-scroll-mt-header {
  scroll-margin-block-start: var(--rx-header-height, 5rem);
}

.rx-scroll-mt-4 {
  scroll-margin-block-start: var(--rx-space-4);
}

.rx-scroll-mt-8 {
  scroll-margin-block-start: var(--rx-space-8);
}

.rx-scroll-mt-12 {
  scroll-margin-block-start: var(--rx-space-12);
}

.rx-scroll-pt-header {
  scroll-padding-block-start: var(--rx-header-height, 5rem);
}

.rx-scroll-pt-4 {
  scroll-padding-block-start: var(--rx-space-4);
}

.rx-scroll-pt-8 {
  scroll-padding-block-start: var(--rx-space-8);
}

.rx-scroll-pt-12 {
  scroll-padding-block-start: var(--rx-space-12);
}

/* ==========================================================================
   17. Divider and Rhythm Spacing
   ========================================================================== */

.rx-divider-y > * + * {
  border-block-start: 1px solid var(--rx-border-color, currentColor);
  padding-block-start: var(--rx-space-4);
  margin-block-start: var(--rx-space-4);
}

.rx-divider-y-sm > * + * {
  padding-block-start: var(--rx-space-2);
  margin-block-start: var(--rx-space-2);
}

.rx-divider-y-lg > * + * {
  padding-block-start: var(--rx-space-6);
  margin-block-start: var(--rx-space-6);
}

.rx-rhythm-tight {
  --rx-content-flow: 0.75rem;
}

.rx-rhythm-normal {
  --rx-content-flow: 1.25rem;
}

.rx-rhythm-relaxed {
  --rx-content-flow: 1.75rem;
}

.rx-rhythm-loose {
  --rx-content-flow: 2.25rem;
}

/* ==========================================================================
   18. Responsive Spacing - Small Devices
   ========================================================================== */

@media (max-width: 575.98px) {
  :root {
    --rx-container-padding: 1rem;
    --rx-section-padding-y: 2.5rem;
    --rx-card-padding: 1rem;
    --rx-grid-gap: 1rem;
  }

  .rx-sm-m-0 {
    margin: 0 !important;
  }

  .rx-sm-mt-0 {
    margin-block-start: 0 !important;
  }

  .rx-sm-mb-0 {
    margin-block-end: 0 !important;
  }

  .rx-sm-p-0 {
    padding: 0 !important;
  }

  .rx-sm-px-0 {
    padding-inline: 0 !important;
  }

  .rx-sm-px-4 {
    padding-inline: var(--rx-space-4) !important;
  }

  .rx-sm-py-4 {
    padding-block: var(--rx-space-4) !important;
  }

  .rx-sm-py-6 {
    padding-block: var(--rx-space-6) !important;
  }

  .rx-sm-gap-2 {
    gap: var(--rx-space-2) !important;
  }

  .rx-sm-gap-4 {
    gap: var(--rx-space-4) !important;
  }

  .rx-sm-space-y-4 > * + * {
    margin-block-start: var(--rx-space-4) !important;
  }

  .rx-sm-section {
    padding-block: var(--rx-section-padding-y);
    padding-inline: var(--rx-container-padding);
  }

  .rx-sm-hide-space {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   19. Responsive Spacing - Tablet Devices
   ========================================================================== */

@media (min-width: 576px) and (max-width: 991.98px) {
  :root {
    --rx-container-padding: 1.5rem;
    --rx-section-padding-y: 4rem;
    --rx-card-padding: 1.25rem;
    --rx-grid-gap: 1.25rem;
  }

  .rx-md-m-0 {
    margin: 0 !important;
  }

  .rx-md-mt-0 {
    margin-block-start: 0 !important;
  }

  .rx-md-mb-0 {
    margin-block-end: 0 !important;
  }

  .rx-md-p-0 {
    padding: 0 !important;
  }

  .rx-md-px-0 {
    padding-inline: 0 !important;
  }

  .rx-md-px-6 {
    padding-inline: var(--rx-space-6) !important;
  }

  .rx-md-py-6 {
    padding-block: var(--rx-space-6) !important;
  }

  .rx-md-py-8 {
    padding-block: var(--rx-space-8) !important;
  }

  .rx-md-gap-4 {
    gap: var(--rx-space-4) !important;
  }

  .rx-md-gap-6 {
    gap: var(--rx-space-6) !important;
  }

  .rx-md-space-y-6 > * + * {
    margin-block-start: var(--rx-space-6) !important;
  }

  .rx-md-section {
    padding-block: var(--rx-section-padding-y);
    padding-inline: var(--rx-container-padding);
  }
}

/* ==========================================================================
   20. Responsive Spacing - Desktop Devices
   ========================================================================== */

@media (min-width: 992px) {
  .rx-lg-m-0 {
    margin: 0 !important;
  }

  .rx-lg-mt-0 {
    margin-block-start: 0 !important;
  }

  .rx-lg-mb-0 {
    margin-block-end: 0 !important;
  }

  .rx-lg-p-0 {
    padding: 0 !important;
  }

  .rx-lg-px-0 {
    padding-inline: 0 !important;
  }

  .rx-lg-px-8 {
    padding-inline: var(--rx-space-8) !important;
  }

  .rx-lg-py-8 {
    padding-block: var(--rx-space-8) !important;
  }

  .rx-lg-py-12 {
    padding-block: var(--rx-space-12) !important;
  }

  .rx-lg-gap-6 {
    gap: var(--rx-space-6) !important;
  }

  .rx-lg-gap-8 {
    gap: var(--rx-space-8) !important;
  }

  .rx-lg-space-y-8 > * + * {
    margin-block-start: var(--rx-space-8) !important;
  }

  .rx-lg-section {
    padding-block: var(--rx-section-padding-y);
    padding-inline: var(--rx-container-padding);
  }
}

/* ==========================================================================
   21. Print Spacing
   ========================================================================== */

@media print {
  :root {
    --rx-section-padding-y: 1rem;
    --rx-container-padding: 0;
    --rx-card-padding: 0;
    --rx-content-flow: 0.75rem;
  }

  .rx-section,
  .rx-section-sm,
  .rx-section-md,
  .rx-section-lg,
  .rx-section-xl,
  .rx-hero-space,
  .rx-page-space {
    padding: 0 !important;
  }

  .rx-card,
  .rx-card-space,
  .rx-widget-space,
  .rx-content-space {
    padding: 0 !important;
  }

  .entry-content > * {
    margin-block-end: 0.75rem;
  }
}

/* ==========================================================================
   22. Utility Aliases
   ========================================================================== */

.rx-center {
  margin-inline: auto !important;
}

.rx-auto-x {
  margin-inline: auto !important;
}

.rx-auto-y {
  margin-block: auto !important;
}

.rx-full-bleed {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.rx-breakout {
  margin-inline: calc(50% - min(50vw, 42rem));
  max-inline-size: 84rem;
}

.rx-pad-container {
  padding-inline: var(--rx-container-padding);
}

.rx-pad-section {
  padding-block: var(--rx-section-padding-y);
}

.rx-pad-card {
  padding: var(--rx-card-padding);
}

.rx-pad-box {
  padding: var(--rx-box-padding);
}

/* ==========================================================================
   23. Advanced Custom Property Utilities
   ========================================================================== */

.rx-custom-m {
  margin: var(--rx-custom-margin, 0) !important;
}

.rx-custom-mx {
  margin-inline: var(--rx-custom-margin-x, 0) !important;
}

.rx-custom-my {
  margin-block: var(--rx-custom-margin-y, 0) !important;
}

.rx-custom-mt {
  margin-block-start: var(--rx-custom-margin-top, 0) !important;
}

.rx-custom-mb {
  margin-block-end: var(--rx-custom-margin-bottom, 0) !important;
}

.rx-custom-p {
  padding: var(--rx-custom-padding, 0) !important;
}

.rx-custom-px {
  padding-inline: var(--rx-custom-padding-x, 0) !important;
}

.rx-custom-py {
  padding-block: var(--rx-custom-padding-y, 0) !important;
}

.rx-custom-pt {
  padding-block-start: var(--rx-custom-padding-top, 0) !important;
}

.rx-custom-pb {
  padding-block-end: var(--rx-custom-padding-bottom, 0) !important;
}

.rx-custom-gap {
  gap: var(--rx-custom-gap, 0) !important;
}

/* ==========================================================================
   24. Accessibility and Reduced Layout Shock
   ========================================================================== */

:where(.rx-flow, .rx-stack, .rx-cluster, .rx-grid, .rx-section) {
  min-width: 0;
}

:where(.rx-card, .rx-widget, .rx-content-space, .rx-box-padding) > :first-child {
  margin-block-start: 0;
}

:where(.rx-card, .rx-widget, .rx-content-space, .rx-box-padding) > :last-child {
  margin-block-end: 0;
}

wp_enqueue_style(
    'rx-spacing',
    get_theme_file_uri('/assets/static/static-css/utilities/spacing.css'),
    array(),
    RX_THEME_VERSION
);