/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-links.css
   Layer: Link System
   Version: 3.1

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s unified link behavior across the site:
   - Underline reveal system
   - Inline body-link treatment
   - Hover opacity treatment
   - Nav-specific underline
   - Footer link underline treatment
   - Arrow-link pattern
   - Link grouping utilities

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Global default anchor styling within .milo scope
   - Underline reveal animation
   - Inline body-link styling
   - Hover opacity behavior
   - Nav underline override
   - Footer link treatment
   - Arrow-link pattern
   - Link grouping utilities
   - Reduced-motion handling for link-owned motion

   Does NOT own:
   - Button styling
   - Typography hierarchy
   - Motion token definitions
   - Layout spacing primitives
   - Section rhythm or containment

   CLASS CONTRACT
   ----------------------------------------------------------------
   .milo-links--inline = wrapper utility for groups of links
   .milo-link--inline  = inline paragraph/body anchor
========================================================= */

/* #region 0) LINK TOKENS */

.milo {
  /* Base link tone */
  --milo-link-color: inherit;
  --milo-link-hover-opacity: var(--milo-o-95);

  /* Underline system */
  --milo-link-underline-color: var(--milo-underline);
  --milo-link-underline-color-dark: var(--milo-underline-strong);
  --milo-link-underline-opacity: var(--milo-o-90);
  --milo-link-underline-height: 1px;
  --milo-link-underline-bottom: var(--milo-underline-offset-body);

  /* Inline body links */
  --milo-link-inline-color: inherit;
  --milo-link-inline-hover-color: rgba(255, 255, 255, 0.94);
  --milo-link-inline-underline-color: rgba(255, 255, 255, 0.34);
  --milo-link-inline-underline-color-hover: rgba(255, 255, 255, 0.72);
  --milo-link-inline-underline-thickness: 1px;
  --milo-link-inline-underline-offset: 0.18em;

  /* Nav underline */
  --milo-nav-link-color: inherit;
  --milo-nav-underline-color: var(--milo-pink-medium);
  --milo-nav-underline-height: 1px;
  --milo-nav-underline-bottom: var(--milo-underline-offset-nav);

  /* Footer underline */
  --milo-footer-link-color: inherit;
  --milo-footer-underline-color: var(--milo-pink);
  --milo-footer-underline-height: 1px;
  --milo-footer-underline-bottom: var(--milo-underline-offset-footer);

  /* Arrow links */
  --milo-link-arrow-gap: var(--milo-space-xs);
  --milo-link-arrow-opacity: var(--milo-o-78);
  --milo-link-arrow-shift: var(--milo-shift-xs);
  --milo-link-arrow-char: "\2192";

  /* Motion */
  --milo-link-transition-opacity-dur: var(--milo-fast);
  --milo-link-transition-underline-dur: var(--milo-med);
  --milo-link-transition-arrow-move-dur: var(--milo-dur-220);
  --milo-link-transition-arrow-fade-dur: var(--milo-dur-180);
  --milo-link-transition-ease: var(--milo-ease);

  /* Wrapper utilities */
  --milo-links-gap-stack: var(--milo-gap-stack-sm);
  --milo-links-gap-inline: var(--milo-gap-inline-md);
}

/* #endregion */

/* #region 1) LINK WRAPPERS */

.milo-links {
  color: inherit;
}

.milo-links a {
  color: inherit;
}

.milo-links--stack {
  display: flex;
  flex-direction: column;
  gap: var(--milo-links-gap-stack);
}

/*
  Wrapper utility only.
  Do not apply .milo-links--inline directly to paragraph anchors.
  Use .milo-link--inline for inline body links.
*/
.milo-links--inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--milo-links-gap-inline);
}

/* #endregion */

/* #region 1B) LOCAL OVERRIDES */

.milo-hero-link a:hover {
  color: var(--milo-white) !important;
}

/* #endregion */

/* #region 2) GLOBAL DEFAULT LINKS */

/*
  Default animated underline contract.

  Excludes:
  - Elementor buttons
  - Plain links
  - Inline body links

  Inline body links use native text-decoration so their underlines can
  wrap cleanly across multiple lines.
*/

.milo
  :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
    .milo-link--plain
  ):not(.milo-link--inline) {
  position: relative;
  display: inline;
  color: var(--milo-link-color);
  text-decoration: none;
  transition: opacity var(--milo-link-transition-opacity-dur)
    var(--milo-link-transition-ease);
}

.milo
  :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
    .milo-link--plain
  ):not(.milo-link--inline):hover {
  opacity: var(--milo-link-hover-opacity);
}

.milo
  :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
    .milo-link--plain
  ):not(.milo-link--inline)::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: var(--milo-link-underline-bottom);
  width: 100%;
  height: var(--milo-link-underline-height);

  background: var(--milo-link-underline-color);
  opacity: var(--milo-link-underline-opacity);

  transform: translateZ(0) scaleX(0);
  transform-origin: left center;
  transition: transform var(--milo-link-transition-underline-dur)
    var(--milo-link-transition-ease);

  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
}

.milo
  :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
    .milo-link--plain
  ):not(.milo-link--inline):hover::before,
.milo
  :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
    .milo-link--plain
  ):not(.milo-link--inline):focus-visible::before {
  transform: scaleX(1);
}

.milo.milo-dark
  :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
    .milo-link--plain
  ):not(.milo-link--inline):focus-visible::before {
  background: var(--milo-link-underline-color-dark);
}

/* #endregion */

/* #region 2B) UNDERLINE STABILITY */

/*
  Keeps animated single-line link patterns stable.

  Do not include .milo-link--inline here.
  Inline paragraph links must stay display:inline so native underlines can
  wrap naturally across multiple lines.
*/

.milo
  .elementor-widget-heading
  a:not(.elementor-button):not([class*="elementor-button"]),
.milo .milo-cta__link a,
.milo .milo-arrow-link a,
.milo .milo-footer__links a,
.milo .milo-footer__link a {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

/* #endregion */

/* #region 3) EXCLUSIONS */

.milo-nav a::before,
.milo-footer a::before {
  content: none !important;
}

/* #endregion */

/* #region 3B) INLINE BODY LINKS */

/*
  Use on inline links inside body copy.

  Example:
  <a class="milo-link--inline" href="/public-relations/">
    founder-led narratives
  </a>
*/

.milo a.milo-link--inline {
  display: inline;
  color: var(--milo-link-inline-color);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: var(--milo-link-inline-underline-thickness);
  text-underline-offset: var(--milo-link-inline-underline-offset);
  text-decoration-color: var(--milo-link-inline-underline-color);
  transition:
    color var(--milo-fast, 160ms) var(--milo-ease, ease),
    text-decoration-color var(--milo-fast, 160ms) var(--milo-ease, ease);
}

.milo a.milo-link--inline:hover,
.milo a.milo-link--inline:focus-visible {
  color: var(--milo-link-inline-hover-color);
  text-decoration-color: var(--milo-link-inline-underline-color-hover);
}

.milo a.milo-link--inline::before,
.milo a.milo-link--inline::after {
  content: none !important;
}

/* #endregion */

/* #region 4) NAV UNDERLINE */

.milo-nav a {
  position: relative;
  color: var(--milo-nav-link-color);
  text-decoration: none;
}

.milo-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--milo-nav-underline-bottom);
  height: var(--milo-nav-underline-height);

  background: var(--milo-nav-underline-color);

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--milo-link-transition-underline-dur)
    var(--milo-link-transition-ease);

  pointer-events: none;
}

.milo-nav a:hover::after,
.milo-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* #endregion */

/* #region 5) FOOTER LINKS */

.milo-footer__links a,
.milo-footer__link a {
  position: relative;
  color: var(--milo-footer-link-color);
  text-decoration: none;
  transition: opacity var(--milo-link-transition-opacity-dur)
    var(--milo-link-transition-ease);
}

.milo-footer__links a:hover,
.milo-footer__link a:hover {
  opacity: var(--milo-link-hover-opacity);
}

.milo-footer__links a::after,
.milo-footer__link a::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: var(--milo-footer-underline-bottom);
  width: 100%;
  height: var(--milo-footer-underline-height);

  background: var(--milo-footer-underline-color);
  opacity: var(--milo-link-underline-opacity);

  transform: translateZ(0) scaleX(0);
  transform-origin: left center;
  transition: transform var(--milo-link-transition-underline-dur)
    var(--milo-link-transition-ease);

  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
}

.milo-footer__links a:hover::after,
.milo-footer__links a:focus-visible::after,
.milo-footer__link a:hover::after,
.milo-footer__link a:focus-visible::after {
  transform: scaleX(1);
}

/* #endregion */

/* #region 6) ARROW LINKS */

.milo-arrow-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--milo-link-arrow-gap);
  white-space: nowrap;
}

.milo-arrow-link a::after {
  content: var(--milo-link-arrow-char);
  display: inline-block;
  margin-left: var(--milo-link-arrow-gap);
  line-height: 1;
  opacity: var(--milo-link-arrow-opacity);

  transform: translateX(0);

  transition:
    transform var(--milo-link-transition-arrow-move-dur)
      var(--milo-link-transition-ease),
    opacity var(--milo-link-transition-arrow-fade-dur)
      var(--milo-link-transition-ease);
}

.milo-arrow-link a:hover::after,
.milo-arrow-link a:focus-visible::after {
  transform: translateX(var(--milo-link-arrow-shift));
  opacity: 1;
}

/* #endregion */

/* #region 7) UTILITIES */

a.milo-link--plain::before {
  content: none !important;
}

a.milo-link--plain::after {
  content: none !important;
}

a.milo-link--no-arrow::after {
  content: none !important;
}

/* #endregion */

/* #region 8) REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .milo
    :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
      .milo-link--inline
    ),
  .milo
    :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
      .milo-link--inline
    )::before,
  .milo a.milo-link--inline,
  .milo-nav a::after,
  .milo-footer__links a,
  .milo-footer__links a::after,
  .milo-footer__link a,
  .milo-footer__link a::after,
  .milo-arrow-link a::after {
    transition: none !important;
    animation: none !important;
  }

  .milo
    :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
      .milo-link--plain
    ):not(.milo-link--inline):hover::before,
  .milo
    :where(a):not(.elementor-button):not([class*="elementor-button"]):not(
      .milo-link--plain
    ):not(.milo-link--inline):focus-visible::before,
  .milo-nav a:hover::after,
  .milo-nav a:focus-visible::after,
  .milo-footer__links a:hover::after,
  .milo-footer__links a:focus-visible::after,
  .milo-footer__link a:hover::after,
  .milo-footer__link a:focus-visible::after {
    transform: none !important;
  }

  .milo-arrow-link a:hover::after,
  .milo-arrow-link a:focus-visible::after {
    transform: none !important;
    opacity: var(--milo-link-arrow-opacity) !important;
  }
}

/* #endregion */