/* ================================================================
   enhancements.css — Loaded LAST. Complete visual layer.
   Uses doubled/BEM-aware selectors to guarantee specificity wins.
   RTL-first · prefers-reduced-motion safe · no new variables
   ================================================================ */

/* === Typography — Dramatic Weight Contrast === */

html body h1,
html body .hero__headline {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

html body h2,
html body .section-title,
html body .ps-list__title,
html body .cta-banner__title,
html body .page-hero__title,
html body .tier-info__title {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-wrap: balance;
}

html body h3,
html body .path-card__title,
html body .benefit-card__title,
html body .step__title,
html body .vision-item__title,
html body .skill-gap-step__title,
html body .quiz-question {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Light-weight body for elegant contrast */
html body p,
html body .hero__body,
html body .path-card__desc,
html body .step__desc,
html body .benefit-card__desc,
html body .accordion__content,
html body .vision-item__text,
html body .tier-info__desc,
html body .footer__brand p,
html body .page-hero__subtitle {
  font-weight: 300;
  line-height: 1.9;
  text-wrap: pretty;
}

/* Buttons, labels — sharp 600 weight */
html body .btn,
html body .btn-primary,
html body .btn-secondary,
html body .btn-pill,
html body .btn-dark,
html body .section-label,
html body .skill-gap-step__label,
html body .footer__col-title {
  font-weight: 600;
}

/* Section label — refined spacing */
html body .section-label {
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

html body .section-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--color-lime);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* Testimonial quote — elegant italic contrast */
html body .testimonial-card__quote {
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

/* === Spacing & Rhythm === */

html body .section {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

html body .section-title {
  margin-block-end: clamp(var(--space-xl), 4vw, var(--space-3xl));
}

html body .section-label {
  margin-block-end: clamp(var(--space-sm), 2vw, var(--space-md));
}

/* === Depth: Card Shadows at Rest === */

html body .path-card,
html body .benefit-card,
html body .testimonial-card,
html body .card,
html body .quiz-section,
html body .skill-gap-tool,
html body .cv-check-card {
  box-shadow:
    0 1px 3px color-mix(in oklab, var(--color-ink) 8%, transparent),
    0 6px 16px color-mix(in oklab, var(--color-ink) 7%, transparent);
  border-color: color-mix(in oklab, var(--color-ink) 9%, transparent);
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === Micro-interactions: Card Hover Lifts === */

@media (prefers-reduced-motion: no-preference) {
  html body .path-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 4px 6px color-mix(in oklab, var(--color-ink) 8%, transparent),
      0 20px 40px color-mix(in oklab, var(--color-ink) 12%, transparent),
      0 0 0 1px color-mix(in oklab, var(--color-lime) 25%, transparent);
    border-color: color-mix(in oklab, var(--color-lime) 40%, transparent);
  }

  html body .benefit-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 4px 6px color-mix(in oklab, var(--color-ink) 7%, transparent),
      0 20px 40px color-mix(in oklab, var(--color-ink) 11%, transparent);
    border-color: color-mix(in oklab, var(--color-lime) 30%, transparent);
  }

  html body .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow:
      0 4px 8px color-mix(in oklab, var(--color-ink) 7%, transparent),
      0 16px 32px color-mix(in oklab, var(--color-ink) 10%, transparent);
  }

  html body .card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 4px 8px color-mix(in oklab, var(--color-ink) 8%, transparent),
      0 16px 36px color-mix(in oklab, var(--color-ink) 10%, transparent);
  }

  html body .quick-win-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-lime);
    box-shadow:
      0 4px 6px color-mix(in oklab, var(--color-ink) 6%, transparent),
      0 12px 28px color-mix(in oklab, var(--color-ink) 9%, transparent);
  }
}

/* === Buttons — Purposeful Micro-interactions === */

html body .btn {
  font-weight: 600;
  transition-property: transform, box-shadow, background-color, color, border-color, opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Highlight sweep on hover */
html body .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  border-radius: inherit;
  transition-property: opacity;
  transition-duration: 200ms;
}

html body .btn:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  html body .btn-primary:hover,
  html body .btn-dark:hover,
  html body .btn-pill:hover {
    transform: translateY(-3px);
  }

  html body .btn-secondary:hover {
    transform: translateY(-2px);
  }

  html body .btn:active {
    transform: translateY(1px) scale(0.97);
    transition-duration: 80ms;
  }

  html body .btn-primary:hover {
    box-shadow: 0 8px 24px color-mix(in oklab, var(--color-ink) 20%, transparent);
  }

  html body .btn-pill:hover {
    box-shadow: 0 8px 24px color-mix(in oklab, var(--color-lime) 35%, transparent);
  }
}

/* === Nav Links — RTL Slide-in Underline === */

html body .nav__link {
  position: relative;
  padding-block-end: 2px;
  transition-property: color;
  transition-duration: 150ms;
}

html body .nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;       /* RTL-aware: starts from the logical start */
  width: 0%;
  height: 2px;
  background: var(--color-lime);
  border-radius: var(--radius-pill);
  transition-property: width;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

html body .nav__link:hover::after,
html body .nav__link.is-active::after {
  width: 100%;
}

/* === Input Focus — Glow Ring === */

html body .form-input:focus,
html body .form-textarea:focus {
  border-color: var(--color-lime);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--color-lime) 18%, transparent),
    0 2px 8px color-mix(in oklab, var(--color-ink) 6%, transparent);
  outline: none;
}

html body .form-select:focus {
  border-color: var(--color-lime);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-lime) 18%, transparent);
  outline: none;
}

html body .custom-combobox-wrapper:focus-within {
  border-color: var(--color-lime);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-lime) 16%, transparent);
}

/* === Focus-Visible — Accessible Rings === */

html body :focus-visible {
  outline: 2.5px solid var(--color-lime);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

html body .btn:focus-visible,
html body .nav__link:focus-visible,
html body .footer__link:focus-visible,
html body .nav__overlay-link:focus-visible {
  outline: 2.5px solid var(--color-lime);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* === Icon Nudges on Parent Hover === */

@media (prefers-reduced-motion: no-preference) {
  html body .step__icon {
    transition-property: transform, box-shadow, background-color;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .step:hover .step__icon {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px color-mix(in oklab, var(--color-lime) 30%, transparent);
  }

  html body .vision-item__icon {
    transition-property: transform, box-shadow, background-color;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .vision-item:hover .vision-item__icon {
    transform: translateY(-5px) scale(1.08);
    background: color-mix(in oklab, var(--color-lime) 18%, transparent);
  }

  html body .benefit-card__icon {
    transition-property: transform, box-shadow;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .benefit-card:hover .benefit-card__icon {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 0 0 10px color-mix(in oklab, var(--color-lime) 12%, transparent);
  }

  html body .path-card__icon {
    transition-property: filter, transform;
    transition-duration: 220ms;
  }

  html body .path-card:hover .path-card__icon {
    filter: brightness(1.12) saturate(1.2);
    transform: scale(1.04);
  }

  /* Path card link arrow nudge */
  html body .path-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition-property: gap, color, letter-spacing;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .path-card:hover .path-card__link {
    gap: var(--space-sm);
    color: var(--color-ember);
    letter-spacing: 0.01em;
  }

  /* Nav overlay link nudge */
  html body .nav__overlay-link {
    display: inline-block;
    transition-property: transform, color;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .nav__overlay-link:hover {
    transform: translateX(-8px);
    color: var(--color-lime);
  }

  /* Footer links indent on hover */
  html body .footer__link {
    transition-property: color, padding-inline-start;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .footer__link:hover {
    padding-inline-start: var(--space-xs);
    color: var(--color-lime);
  }

  /* Social icon lift */
  html body .footer__social a {
    transition-property: transform, color, border-color;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .footer__social a:hover {
    transform: translateY(-4px);
    color: var(--color-lime);
    border-color: var(--color-lime);
  }
}

/* === Accordion — Open State Tint + Smooth Panel === */

html body .accordion__item {
  transition-property: background-color;
  transition-duration: 220ms;
  border-radius: var(--radius-md);
  padding-inline: var(--space-md);
  margin-inline: calc(-1 * var(--space-md));
  border-block-end-color: color-mix(in oklab, var(--color-ink) 9%, transparent);
}

html body .section--dark .accordion__item {
  border-block-end-color: color-mix(in oklab, var(--color-parchment) 12%, transparent);
}

html body .accordion__item.is-open {
  background: color-mix(in oklab, var(--color-lime) 5%, transparent);
}

html body .accordion__trigger {
  transition-property: color;
  transition-duration: 150ms;
}

/* === Progress Bars — Smooth Fill === */

@media (prefers-reduced-motion: no-preference) {
  html body .progress-bar__fill,
  html body .breakdown-bar__fill,
  html body .loading-progress-bar__fill {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* === Scroll Progress Glow === */

html body #scroll-progress {
  box-shadow: 0 0 12px color-mix(in oklab, var(--color-lime) 65%, transparent);
}

/* === Quiz Option Enhanced Hover === */

html body .quiz-option {
  position: relative;
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html body .quiz-option:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--color-lime) 50%, transparent);
    box-shadow:
      0 4px 8px color-mix(in oklab, var(--color-ink) 7%, transparent),
      0 12px 24px color-mix(in oklab, var(--color-ink) 5%, transparent);
  }
}

/* === Borders — Alpha Blended System-wide === */

html body .card,
html body .path-card,
html body .benefit-card,
html body .testimonial-card,
html body .quiz-section,
html body .skill-gap-tool,
html body .cv-check-card,
html body .violation-card,
html body .recommendation-card,
html body .quick-win-card,
html body .checklist-item,
html body .contract-card {
  border-color: color-mix(in oklab, var(--color-ink) 9%, transparent);
}

html body .card--dark {
  border-color: color-mix(in oklab, var(--color-parchment) 12%, transparent);
}

/* === Scroll-Reveal Classes (added by enhancements.js) === */

.mmthn-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.mmthn-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.mmthn-stagger > .mmthn-child {
  opacity: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
  transition-duration: 650ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.mmthn-stagger.in-view > .mmthn-child {
  opacity: 1;
  transform: translateY(0);
}

/* Clip-path heading reveal */
.mmthn-clip-reveal {
  overflow: hidden;
  display: block;
}

.mmthn-clip-reveal > .mmthn-clip-inner {
  display: block;
  clip-path: inset(100% 0 0 0);
  transform: translateY(24px);
  transition-property: clip-path, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.mmthn-clip-reveal.in-view > .mmthn-clip-inner {
  clip-path: inset(0% 0 0 0);
  transform: translateY(0);
}

/* Reduced-motion: instant reveal */
@media (prefers-reduced-motion: reduce) {
  .mmthn-reveal,
  .mmthn-stagger > .mmthn-child,
  .mmthn-clip-reveal > .mmthn-clip-inner {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* === Lime Underline — Animated Thickness === */

@media (prefers-reduced-motion: no-preference) {
  html body .lime-underline {
    text-decoration: none;
    background-image: linear-gradient(var(--color-lime), var(--color-lime));
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 105%;
    transition-property: background-size;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .lime-underline:hover {
    background-size: 100% 9px;
  }
}

/* === Mark Highlight Warmth === */

html body mark {
  background: color-mix(in oklab, var(--color-lime) 65%, transparent);
  border-radius: 3px;
  padding-inline: 3px;
}

/* === Touch Targets — Coarse Pointer === */

@media (pointer: coarse) {
  html body .btn           { min-block-size: 48px; }
  html body .nav__link     { min-block-size: 44px; padding-block: var(--space-sm); }
  html body .tab           { min-block-size: 44px; }
  html body .accordion__trigger { min-block-size: 52px; }
  html body .checkbox-item { min-block-size: 44px; }
  html body .quiz-option   { min-block-size: 60px; }
}

/* === App Timeline Steps — Pulse Hover === */

@media (prefers-reduced-motion: no-preference) {
  html body .app-timeline__number {
    transition-property: transform, box-shadow, background-color;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .app-timeline__step:hover .app-timeline__number {
    transform: scale(1.12);
    background: color-mix(in oklab, var(--color-lime) 15%, var(--color-slate));
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--color-lime) 20%, transparent);
  }
}

/* === Violation/Recommendation Cards — Hover Slide === */

@media (prefers-reduced-motion: no-preference) {
  html body .violation-card {
    transition-property: transform, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .violation-card:hover {
    transform: translateX(-4px);
    box-shadow: 0 4px 16px color-mix(in oklab, var(--color-ink) 8%, transparent);
  }

  html body .recommendation-card {
    transition-property: transform, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .recommendation-card:hover {
    transform: translateX(-4px);
    box-shadow: 0 4px 16px color-mix(in oklab, var(--color-lime) 12%, transparent);
  }
}

/* === Contract Card Featured — Accent Tint === */

html body .contract-card--featured {
  background: color-mix(in oklab, var(--color-lime) 4%, var(--color-surface));
}

/* === Shimmer Skeleton Loading === */

@keyframes mmthn-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

html body .skeleton,
html body [data-skeleton] {
  background: linear-gradient(
    90deg,
    var(--color-mist) 25%,
    color-mix(in oklab, var(--color-mist) 55%, var(--color-parchment)) 50%,
    var(--color-mist) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: no-preference) {
  html body .skeleton,
  html body [data-skeleton] {
    animation: mmthn-shimmer 1.8s ease-in-out infinite;
  }
}