/* Kaligraf Design — Hover States & Micro-Interactions
   D4-2: Shared hover, focus, and interactive states.
   Supplements components.css with patterns used across multiple pages.
   Depends on: design-system.css, components.css
   Source: spec/phase-4/00-visual-system.md §4.3
           spec/phase-4/next-phaseD4.md §D4-2 */

/* ══════════════════════════════════════════════════════════
   NAVIGATION — hover color → accent
   Adds color change on top of the hover-underline already
   defined in components.css (.nav__link::after).
   ══════════════════════════════════════════════════════════ */

.nav__link:hover {
  color: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════
   GHOST CTA — Three Context Variants
   Shared class: hover-underline + color shift.

   .ghost-cta       — accent on Off-White (home page work CTA)
   .ghost-cta-dark  — muted-white → white, on Indigo/Charcoal
   .ghost-cta-light — muted-dark → dark, on Off-White

   Source: spec/phase-4/00-visual-system.md §4.3
           (hover-underline on all standalone CTA text links)
   ══════════════════════════════════════════════════════════ */

.ghost-cta,
.ghost-cta-dark,
.ghost-cta-light {
  font-family: var(--font-family-body);
  font-size: var(--size-ui-label);
  font-weight: 500;
  letter-spacing: var(--ls-ui-label);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: color var(--motion-hover-underline) var(--ease-out);
}

/* Shared underline element */
.ghost-cta::after,
.ghost-cta-dark::after,
.ghost-cta-light::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  transition: width var(--motion-hover-underline) var(--ease-out);
}

.ghost-cta:hover::after,
.ghost-cta-dark:hover::after,
.ghost-cta-light:hover::after {
  width: 100%;
}

/* Base: accent color on Off-White background */
.ghost-cta {
  color: var(--color-accent);
}
.ghost-cta::after {
  background-color: var(--color-accent);
}

/* Dark variant: muted → white on Indigo/Charcoal */
.ghost-cta-dark {
  color: var(--color-text-on-dark-muted);
}
.ghost-cta-dark::after {
  background-color: var(--color-text-on-dark);
}
.ghost-cta-dark:hover {
  color: var(--color-text-on-dark);
}

/* Light variant: muted → dark on Off-White */
.ghost-cta-light {
  color: var(--color-text-on-light-muted);
}
.ghost-cta-light::after {
  background-color: var(--color-text-on-light);
}
.ghost-cta-light:hover {
  color: var(--color-text-on-light);
}

/* Focus visible — all ghost CTA variants */
.ghost-cta:focus-visible,
.ghost-cta-dark:focus-visible,
.ghost-cta-light:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

/* ══════════════════════════════════════════════════════════
   LINK CTA WITH ARROW — TILE ENHANCEMENT
   .link-cta base styles (color, underline, arrow, focus) live
   in typography.css. Only the tile-parent-triggered arrow nudge
   is added here, since typography.css cannot target .tile-service
   ancestor context.
   ══════════════════════════════════════════════════════════ */

/* Arrow nudge triggered by parent tile hover */
.tile-service:hover .link-cta__arrow {
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════
   NOTE STRIP — FIELD NOTES INDEX
   Text-only strip items: hover-underline on title only.
   The strip layout and border CSS lives in the field-notes
   page <style> block; only hover state is defined here.
   Source: spec/phase-4/00-visual-system.md §4.3
   ══════════════════════════════════════════════════════════ */

.note-strip:hover .h3 {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.62);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY — REDUCED MOTION
   Disable animation-based hover effects for users who
   prefer reduced motion. Focus states (outlines) remain.
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ghost-cta,
  .ghost-cta-dark,
  .ghost-cta-light {
    transition: none;
  }

  .ghost-cta::after,
  .ghost-cta-dark::after,
  .ghost-cta-light::after {
    transition: none;
  }

  .note-strip:hover .h3 {
    text-decoration: none;
  }
}