/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-footer.css
   Layer: Footer Module
   Version: 3.0
========================================================= */

/* #region 0) FOOTER TOKENS */
.milo-footer {
  position: relative;
  overflow: hidden;
  color: var(--milo-footer-ink);

  /* Surface */
  --milo-footer-bg: var(--milo-bg-deep);
  --milo-footer-bg-image: var(--milo-section-surface-footer);
  --milo-footer-bg-position: center center;
  --milo-footer-bg-size: cover;
  --milo-footer-bg-repeat: no-repeat;

  /* Tone */
  --milo-footer-ink: var(--milo-white);
  --milo-footer-text: var(--milo-text);
  --milo-footer-muted: var(--milo-pink-medium);
  --milo-footer-link-alpha: 1;
  --milo-footer-legal-alpha: 0.9;
  --milo-footer-link-alpha-hover: 1;
  --milo-footer-legal-alpha-hover: 1;

  /* Main layout */
  --milo-footer-top-columns: minmax(0, 1.05fr) minmax(0, 1.45fr);
  --milo-footer-bottom-columns: minmax(0, 1fr) auto;
  --milo-footer-links-columns: repeat(3, minmax(0, 1fr));

  --milo-footer-top-gap: clamp(32px, 5vw, 56px);
  --milo-footer-cols-gap-x: clamp(28px, 4vw, 56px);
  --milo-footer-cols-gap-y: clamp(18px, 2vw, 24px);
  --milo-footer-bottom-gap: 16px;

  /* Brand block */
  --milo-footer-logo: 160px;
  --milo-footer-brand-max: 24rem;
  --milo-footer-blurb-max: 22ch;
  --milo-footer-btn-mt: 8px;
  --milo-footer-brand-gap-768: 14px;
  --milo-footer-brand-gap-480: 12px;
  --milo-footer-cta-mt-480: 12px;

  /* Labels */
  --milo-footer-label-pad-left: 12px;
  --milo-footer-bullet-size: 4px;
  --milo-footer-bullet-alpha: 0.7;
  --milo-footer-bullet-top: 0.9em;

  /* Bottom row */
  --milo-footer-bottom-align: end;
  --milo-footer-meta-justify: flex-end;
  --milo-footer-bottom-gap-480: 14px;

  /* Tablet layout */
  --milo-footer-top-columns-tablet: 1fr;
  --milo-footer-top-gap-tablet: 28px;
  --milo-footer-links-max-tablet: 85%;
  --milo-footer-links-justify-tablet: auto;
  --milo-footer-bottom-columns-tablet: 1fr;
  --milo-footer-bottom-gap-tablet: 18px;
  --milo-footer-bottom-align-tablet: start;
  --milo-footer-meta-justify-tablet: flex-start;

  /* Mobile layout */
  --milo-footer-links-columns-mobile: repeat(2, minmax(0, 1fr));
  --milo-footer-links-columns-mobile-small: 1fr;
  --milo-footer-btn-pad-inline-768: 22px;
  --milo-footer-btn-pad-inline-480: 20px;

  /* Motion */
  --milo-footer-transition-dur: 200ms;
  --milo-footer-transition-ease: var(--milo-ease, ease);

  background-color: var(--milo-footer-bg);
  background-image: var(--milo-footer-bg-image);
  background-position: var(--milo-footer-bg-position);
  background-size: var(--milo-footer-bg-size);
  background-repeat: var(--milo-footer-bg-repeat);
}
/* #endregion */

/* #region 1) BASE */
.milo-footer .milo-inner {
  position: relative;
  z-index: 1;
}

.milo-footer .elementor-heading-title,
.milo-footer :where(p) {
  color: inherit;
}

.milo-footer
  :where(.milo-footer__links, .milo-footer__legal-link)
  .elementor-heading-title,
.milo-footer
  :where(.milo-footer__links, .milo-footer__legal-link)
  .elementor-heading-title
  > a {
  color: inherit !important;
}
/* #endregion */

/* #region 2) ACTUAL DOM LAYOUT */
.milo-footer > .milo-inner > .milo-grid--2:first-of-type {
  display: grid;
  grid-template-columns: var(--milo-footer-top-columns);
  gap: var(--milo-footer-top-gap);
  align-items: start;
}

.milo-footer > .milo-inner > .milo-grid--2:last-of-type {
  display: grid;
  grid-template-columns: var(--milo-footer-bottom-columns);
  gap: var(--milo-footer-bottom-gap);
  align-items: var(--milo-footer-bottom-align);
}

.milo-footer .milo-grid--cols {
  display: grid;
  grid-template-columns: var(--milo-footer-links-columns);
  column-gap: var(--milo-footer-cols-gap-x);
  row-gap: var(--milo-footer-cols-gap-y);
  align-items: start;
}

.milo-footer__brand,
.milo-footer__col,
.milo-footer__meta,
.milo-footer__legal-link,
.milo-footer .milo-grid--cols,
.milo-footer .milo-grid--2 {
  min-width: 0;
}
/* #endregion */

/* #region 3) BRAND BLOCK */
.milo-footer__brand {
  max-width: var(--milo-footer-brand-max);
}

.milo-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--milo-footer-logo);
}

.milo-footer__logo img,
.milo-footer__logo svg {
  display: block;
  width: var(--milo-footer-logo);
  height: auto;
}

.milo-footer__logo .elementor-icon {
  font-size: var(--milo-footer-logo);
  line-height: 1;
}

.milo-footer__blurb .elementor-heading-title {
  max-width: var(--milo-footer-blurb-max);
  color: var(--milo-footer-text);
}

.milo-footer__btn {
  margin-top: var(--milo-footer-btn-mt);
}
/* #endregion */

/* #region 4) LINK COLUMNS */
.milo-footer__label {
  color: var(--milo-footer-muted);
}

.milo-footer__label .elementor-heading-title {
  position: relative;
  padding-left: var(--milo-footer-label-pad-left);
}

.milo-footer__label .elementor-heading-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--milo-footer-bullet-top);
  width: var(--milo-footer-bullet-size);
  height: var(--milo-footer-bullet-size);
  border-radius: 999px;
  background: var(--milo-footer-muted);
  opacity: var(--milo-footer-bullet-alpha);
  transform: translateY(-50%);
}

.milo-footer__links {
  color: var(--milo-footer-text);
}

.milo-footer__links a {
  color: inherit;
  opacity: var(--milo-footer-link-alpha);
  white-space: nowrap;
  transition: opacity var(--milo-footer-transition-dur)
    var(--milo-footer-transition-ease);
}

.milo-footer__links a:hover {
  opacity: var(--milo-footer-link-alpha-hover);
}
/* #endregion */

/* #region 5) BOTTOM ROW */
.milo-footer__meta {
  color: var(--milo-footer-text);
}

.milo-footer .milo-flex--end {
  justify-content: var(--milo-footer-meta-justify);
}

.milo-footer__legal-link {
  color: var(--milo-footer-text);
}

.milo-footer__legal-link a {
  color: inherit;
  opacity: var(--milo-footer-legal-alpha);
  text-decoration: none;
  transition: opacity var(--milo-footer-transition-dur)
    var(--milo-footer-transition-ease);
}

.milo-footer__legal-link a:hover {
  opacity: var(--milo-footer-legal-alpha-hover);
}
/* #endregion */

/* #region 6) RESPONSIVE */

@media (max-width: 1199.98px) {
  .milo-footer {
    --milo-footer-top-gap: clamp(28px, 4vw, 44px);
    --milo-footer-cols-gap-x: clamp(24px, 3vw, 40px);
    --milo-footer-logo: 148px;
    --milo-footer-brand-max: 22rem;
    --milo-footer-blurb-max: 20ch;
    --milo-footer-top-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  }
}

@media (max-width: 1024px) {
  .milo-footer {
    --milo-footer-top-gap: 28px;
    --milo-footer-cols-gap-x: 24px;
    --milo-footer-cols-gap-y: 18px;
    --milo-footer-bottom-gap: 14px;
    --milo-footer-logo: 144px;
    --milo-footer-brand-max: 100%;
    --milo-footer-blurb-max: 18ch;

    --milo-footer-top-columns: var(--milo-footer-top-columns-tablet);
    --milo-footer-bottom-columns: var(--milo-footer-bottom-columns-tablet);
    --milo-footer-bottom-gap: var(--milo-footer-bottom-gap-tablet);
    --milo-footer-bottom-align: var(--milo-footer-bottom-align-tablet);
    --milo-footer-meta-justify: var(--milo-footer-meta-justify-tablet);
  }

  .milo-footer .milo-grid--cols {
    max-width: var(--milo-footer-links-max-tablet);
    margin: var(--milo-footer-links-justify-tablet);
    column-gap: var(--milo-footer-cols-gap-x);
    row-gap: 22px;
  }
}

@media (max-width: 767.98px) {
  .milo-footer {
    --milo-footer-top-gap: 24px;
    --milo-footer-cols-gap-y: 16px;
    --milo-footer-logo: 136px;
    --milo-footer-blurb-max: 28ch;
    --milo-footer-links-columns: var(--milo-footer-links-columns-mobile);
  }

  .milo-footer__brand {
    gap: var(--milo-footer-brand-gap-768);
  }

  .milo-footer__btn .elementor-button {
    padding-inline: var(--milo-footer-btn-pad-inline-768);
  }
}

@media (max-width: 479.98px) {
  .milo-footer {
    --milo-footer-top-gap: 22px;
    --milo-footer-cols-gap-y: 18px;
    --milo-footer-bottom-gap: 16px;
    --milo-footer-logo: 128px;
    --milo-footer-blurb-max: 100%;
    --milo-footer-label-pad-left: 10px;
    --milo-footer-bullet-size: 3px;
    --milo-footer-links-columns: var(--milo-footer-links-columns-mobile-small);
    --milo-footer-bottom-gap: var(--milo-footer-bottom-gap-480);
  }

  .milo-footer .milo-grid--cols {
    row-gap: 18px;
    max-width: 100%;
    margin: 0;
  }

  .milo-footer__brand {
    gap: var(--milo-footer-brand-gap-480);
  }

  .milo-footer__cta {
    margin-top: var(--milo-footer-cta-mt-480);
  }

  .milo-footer__blurb .elementor-heading-title {
    max-width: 22ch;
  }

  .milo-footer__btn .elementor-button {
    padding-inline: var(--milo-footer-btn-pad-inline-480);
  }

  .milo-footer > .milo-inner > .milo-grid--2:last-of-type {
    gap: var(--milo-footer-bottom-gap);
  }

  .milo-footer__col + .milo-footer__col {
    margin-top: 20px;
  }
}

/* #endregion */

/* #region 7) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-footer,
  .milo-footer * {
    transition: none !important;
    animation: none !important;
  }
}
/* #endregion */