/**
 * fixeo-hero-context-status.css — fxhcs-v1.2
 * RAFI Hero — Persistent context status line
 *
 * Typography & composition pass (Sprint 1.2).
 *
 * Two-line composition (known state):
 *   Primary:   📍 Vous semblez être à [City] · Modifier
 *   Secondary: Artisans à proximité en priorité.
 *
 * Single line (detecting state):
 *   📍 Détection de votre position…
 *
 * Principles:
 *   – One icon, one reading direction.
 *   – City name is the visual anchor.
 *   – Secondary line is a whisper consequence, not a peer.
 *   – "Modifier" is a ghost action — present, never loud.
 *   – No height increase vs v1.
 *
 * Namespace: fxhcs-*
 * Zero animation changes. Zero layout changes. Zero JS behaviour changes.
 */

/* ── Container ──────────────────────────────────────────────── */
#fxhcs-line {
  /* Reserve vertical space at parse time → zero CLS */
  min-height: 36px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 10px;
  /* Start invisible — JS fades in after RAFI OS has mounted */
  opacity: 0;
  transition: opacity 0.30s ease;
}

#fxhcs-line.fxhcs-ready {
  opacity: 1;
}

/* ── Primary line ────────────────────────────────────────────── */
/*
 * Natural prose flow — NOT inline-flex with gap.
 * Icon + text + city + separator + modifier all flow as one sentence.
 * font-size governs the whole line; city and modifier are inline within it.
 */
.fxhcs-primary {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.005em;
  line-height: 1.5;
  /* Prevent wrapping between icon and first word */
  white-space: nowrap;
}

/* Pin icon — inline, matches text baseline */
.fxhcs-icon {
  display: inline;
  font-size: 0.70rem;
  margin-right: 3px;
  vertical-align: baseline;
  opacity: 0.65;
}

/* City name — the visual anchor of the primary line */
.fxhcs-city {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Separator · between city and Modifier */
.fxhcs-sep {
  color: rgba(255, 255, 255, 0.20);
  font-weight: 400;
}

/* ── "Modifier" — ghost action ───────────────────────────────── */
/*
 * Reset all button defaults.
 * Visually: a whisper link, not a button.
 * Functionally: opens V5 standard flow via global capture handler.
 */
.fxhcs-modifier {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* Minimum touch target — padding without affecting inline layout */
  position: relative;
}

/* Touch target expansion — invisible padding, doesn't shift layout */
.fxhcs-modifier::before {
  content: '';
  position: absolute;
  inset: -8px -6px;
}

.fxhcs-modifier:hover,
.fxhcs-modifier:focus-visible {
  color: rgba(255, 255, 255, 0.52);
  outline: none;
}

.fxhcs-modifier:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Secondary line — consequence whisper ───────────────────── */
.fxhcs-secondary {
  display: block;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.24);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ── Detecting state ─────────────────────────────────────────── */
/* Single primary line, no secondary. Icon pulses gently. */
#fxhcs-line.fxhcs-detecting .fxhcs-icon {
  animation: fxhcs-blink 1.6s ease-in-out infinite;
}

@keyframes fxhcs-blink {
  0%, 100% { opacity: 0.30; }
  50%       { opacity: 0.65; }
}

/* ── Known state ─────────────────────────────────────────────── */
#fxhcs-line.fxhcs-known .fxhcs-icon {
  animation: none;
  opacity: 0.60;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #fxhcs-line {
    min-height: 34px;
    margin-bottom: 8px;
  }

  .fxhcs-primary {
    font-size: 0.70rem;
  }

  .fxhcs-secondary {
    font-size: 0.64rem;
  }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #fxhcs-line.fxhcs-detecting .fxhcs-icon {
    animation: none;
    opacity: 0.45;
  }
}