/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-a11y.css
   Layer: Accessibility & Interaction Baseline
   Version: 1.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo-governed accessibility and interaction defaults:
   - Keyboard focus visibility
   - Skip link styling
   - Baseline interactive affordances
   - Global reduced-motion safety
   - Selection styling
   - Forced-colors support
   - Skip target offset safety for sticky header

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Focus ring system
   - Skip link pattern
   - Reduced motion overrides for interaction transforms
   - Minimal disabled and selection affordances
   - Skip target scroll offset safety (#content by default)

   Does NOT own:
   - Link underline reveal logic
   - Button geometry and variants
   - Reveal choreography
   - Layout spacing and containment

   ARCHITECTURE
   ----------------------------------------------------------------
   - Baseline is scoped under .milo where possible
   - Focus rings apply broadly to interactive elements
   - Values are token-first, with safe fallbacks only where useful
   - Works with Hello Elementor’s native skip link pattern

========================================================= */

/* #region 0) LOCALIZED DEFAULTS (knobs) */
.milo {
  --milo-a11y-focus-color: var(--milo-white-pure);

  --milo-a11y-focus-w: var(2px);
  --milo-a11y-focus-off: var(6px);
  --milo-a11y-focus-radius: var(--milo-radius-md);

  --milo-interactive-hover-opacity: var(--milo-o-95);
  --milo-interactive-disabled-opacity: var(--milo-o-55);
}
/* #endregion 0) LOCALIZED DEFAULTS (knobs) */

/* #region 1) SKIP LINK */
.milo .skip-link {
  position: fixed;
  left: -9999px;
  top: calc(var(--milo-header-h) + var(--milo-space-xs));
  z-index: var(--milo-z-overlay);

  padding: var(--milo-space-xs) var(--milo-space-sm);
  border: 1px solid var(--milo-divider);
  border-radius: 999px;
  color: var(--milo-white);

  background: var(--milo-bg-deep);

  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.milo .skip-link:focus,
.milo .skip-link:focus-visible {
  left: var(--milo-space-sm);

  outline: var(--milo-a11y-focus-w) solid var(--milo-a11y-focus-color);
  outline-offset: var(--milo-a11y-focus-off);

  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .milo .skip-link {
    top: calc(var(--milo-header-h-tablet) + var(--milo-space-xs));
  }
}

@media (max-width: 767px) {
  .milo .skip-link {
    top: calc(var(--milo-header-h-mobile) + var(--milo-space-xs));
  }
}
/* #endregion 1) SKIP LINK */

/* #region 2) SKIP TARGET OFFSET */
#content {
  scroll-margin-top: var(--milo-header-h);
}

@media (max-width: 1024px) {
  #content {
    scroll-margin-top: var(--milo-header-h-tablet);
  }
}

@media (max-width: 767px) {
  #content {
    scroll-margin-top: var(--milo-header-h-mobile);
  }
}
/* #endregion 2) SKIP TARGET OFFSET */

/* #region 3) FOCUS RING SYSTEM */
.milo
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]
  ):focus {
  outline: none;
}

.milo
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]
  ):focus:not(:focus-visible) {
  outline: none;
}

.milo
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]
  ):focus-visible {
  outline: var(--milo-a11y-focus-w) solid var(--milo-a11y-focus-color);
  outline-offset: var(--milo-a11y-focus-off);
  border-radius: var(--milo-a11y-focus-radius);
}

.milo
  :where(
    .milo-btn a,
    a.milo-btn,
    a.elementor-button,
    button.elementor-button,
    .elementor-button,
    .elementor-button-link
  ):focus-visible {
  border-radius: var(--milo-btn-radius, 999px);
}

.milo
  :where(
    .elementor-widget-button,
    .elementor-button-wrapper,
    .elementor-widget-container
  ) {
  overflow: visible;
}
/* #endregion 3) FOCUS RING SYSTEM */

/* #region 4) BASELINE INTERACTION AFFORDANCES */
@media (hover: hover) {
  .milo
    :where(a):not(.elementor-button):not(.elementor-button-link):not(
      [class*="elementor-button"]
    ):hover {
    opacity: var(--milo-interactive-hover-opacity);
  }
}

.milo :where(button, input, select, textarea)[disabled],
.milo :where(.elementor-button, .elementor-button-link)[aria-disabled="true"],
.milo :where(a)[aria-disabled="true"] {
  opacity: var(--milo-interactive-disabled-opacity) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.milo :where(a, button, .elementor-button, .elementor-button-link) {
  -webkit-tap-highlight-color: transparent;
}
/* #endregion 4) BASELINE INTERACTION AFFORDANCES */

/* #region 5) READABILITY POLISH */
.milo ::selection {
  background: var(--milo-sheen-mid);
  color: var(--milo-white-pure);
}

.milo summary {
  cursor: pointer;
}
/* #endregion 5) READABILITY POLISH */

/* #region 6) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo * {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .milo :where(a, button, .elementor-button, .elementor-button-link) {
    transform: none !important;
  }
}
/* #endregion 6) REDUCED MOTION */

/* #region 7) FORCED COLORS */
@media (forced-colors: active) {
  .milo
    :where(
      a,
      button,
      input,
      select,
      textarea,
      summary,
      [role="button"],
      [tabindex]
    ):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 3px;
  }

  .milo .skip-link {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}
/* #endregion 7) FORCED COLORS */