/* ==========================================================================
   Milolo — spacing system
   The single source of truth for layout distance: the scale tokens, the content
   container, the section gutters and the responsive rhythm.

   Component-level spacing (card padding, widget gaps, block padding) is authored
   in Elementor and has been normalised onto this same scale in the data, so this
   file only defines the frame every section is measured against plus a small set
   of utilities for anything built outside the builder.
   ========================================================================== */

:root {
  /* --- the scale: 4px base ---------------------------------------------- */
  --ml-space-0:  0;        /* flush */
  --ml-space-1:  4px;      /* hairline gap (icon to label, badge inset) */
  --ml-space-2:  8px;      /* tight (chip padding, label to field) */
  --ml-space-3:  12px;     /* small gap        (was 10px) */
  --ml-space-4:  16px;     /* small padding    (was 15px) */
  --ml-space-5:  20px;     /* default gap + gutters */
  --ml-space-6:  24px;     /* card padding     (was 25px) */
  --ml-space-8:  32px;     /* block padding    (was 30px) */
  --ml-space-10: 40px;
  --ml-space-12: 48px;     /* section block, desktop (was 50px) */
  --ml-space-16: 64px;     /* section block, tablet  (was 70px) */
  --ml-space-18: 72px;     /* hero block, desktop   (was 70px) */
  --ml-space-24: 96px;     /* marquee spacing       (was 100px) */

  /* --- the frame -------------------------------------------------------- */
  --ml-container: 1200px;  /* one content width (1140 + 1200 were mixed) */
  --ml-gutter: 20px;       /* one section gutter (20 was 10 on inner pages) */
  --ml-gutter-sm: 16px;    /* gutter below 768px */
  --ml-gap: var(--ml-space-5);
}

/* ==========================================================================
   1. Container + gutters
   Only the top-level section containers are touched, so nested cards keep the
   padding they were designed with.
   ========================================================================== */
.elementor > .e-con-boxed {
  padding-left: var(--ml-gutter);
  padding-right: var(--ml-gutter);
}

.elementor > .e-con-boxed > .e-con-inner {
  max-width: var(--ml-container);
}

/* ==========================================================================
   2. Responsive rhythm
   Below the container width the frame simply fills the screen and the gutter
   tightens; component values carry their own tablet/mobile overrides.
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --ml-container: 100%;
    --ml-gutter: var(--ml-gutter-sm);
  }
}

@media (max-width: 767px) {
  :root {
    --ml-gutter: var(--ml-gutter-sm);
    --ml-gap: var(--ml-space-3);
  }
}

/* ==========================================================================
   3. Guards — stop a section inheriting a double gap from both sides
   ========================================================================== */
.elementor > .e-con-boxed > .e-con-inner > *:first-child { margin-top: 0; }
.elementor > .e-con-boxed > .e-con-inner > *:last-child { margin-bottom: 0; }

/* absolutely-positioned widgets must not stretch the section box */
.elementor-widget.elementor-absolute { margin: 0; }

/* Layout integrity: a stray wide element (carousel track, fixed-width box)
   must never turn the page into a horizontally scrollable canvas. `clip`
   keeps position:sticky working, unlike overflow-x:hidden. */
html, body { overflow-x: clip; }

/* ==========================================================================
   4. Utilities — the tokens, available outside the builder
   ========================================================================== */
.ml-mt-0  { margin-top: var(--ml-space-0) !important; }
.ml-mt-2  { margin-top: var(--ml-space-2) !important; }
.ml-mt-3  { margin-top: var(--ml-space-3) !important; }
.ml-mt-5  { margin-top: var(--ml-space-5) !important; }
.ml-mt-6  { margin-top: var(--ml-space-6) !important; }
.ml-mt-8  { margin-top: var(--ml-space-8) !important; }
.ml-mt-12 { margin-top: var(--ml-space-12) !important; }
.ml-mb-0  { margin-bottom: var(--ml-space-0) !important; }
.ml-mb-3  { margin-bottom: var(--ml-space-3) !important; }
.ml-mb-5  { margin-bottom: var(--ml-space-5) !important; }
.ml-mb-6  { margin-bottom: var(--ml-space-6) !important; }
.ml-p-0   { padding: var(--ml-space-0) !important; }
.ml-p-4   { padding: var(--ml-space-4) !important; }
.ml-p-5   { padding: var(--ml-space-5) !important; }
.ml-p-6   { padding: var(--ml-space-6) !important; }
.ml-py-12 { padding-top: var(--ml-space-12) !important; padding-bottom: var(--ml-space-12) !important; }
.ml-gap-3 { gap: var(--ml-space-3) !important; }
.ml-gap-5 { gap: var(--ml-space-5) !important; }
.ml-gap-6 { gap: var(--ml-space-6) !important; }
.ml-stack-6 > * + * { margin-top: var(--ml-space-6); }
.ml-stack-8 > * + * { margin-top: var(--ml-space-8); }