/* =============================================================
   FANATIK Site · Phase 1 — Locale Nudge chip
   -------------------------------------------------------------
   A small fixed chip below the chyron language picker tile
   (top-right). The picker surface MUST always overlay this chip.

   Layering (matches chyron.css component tokens):
     chyron tile     z-index 60   (--ch-z-tile)
     chyron surface  z-index 70   (--ch-z-surface)
     THIS chip       z-index 40   → above page content, BELOW the
                                    picker so the picker can open
                                    over it.

   Palette: brand tokens only (defined in tokens.css). Lime is
   #D3FE4C — NEVER #CCFF00 (acid-lime is a known brand error).
   Lime kept to a thin border + link/dismiss accent (≤ ~25%).

   Type: JetBrains Mono 700, ~10-11px, ALL CAPS, slight tracking
   — matches the chyron micro-typography register.

   Every animated effect has a prefers-reduced-motion fallback
   (brand rule).
   ============================================================= */

.fanatik-locale-nudge {
  --fln-bg: var(--off-black, #0A0A0A);
  --fln-border: rgba(211, 254, 76, 0.25); /* lime @ 0.25, 1px hairline */
  --fln-text: var(--white, #FFFFFF);
  --fln-accent: var(--lime, #D3FE4C);     /* link + dismiss only */
  --fln-jbm: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  position: fixed;
  right: 16px;
  /* Sit BELOW the picker tile. Tile ≈ 56px + 16px gap.
     Var fallback keeps it correct if the tile height changes. */
  top: calc(var(--chyron-tile-h, 56px) + 16px);

  z-index: 40; /* above page content, below picker (tile 60 / surface 70) */

  box-sizing: border-box;
  max-width: 240px;
  /* Never wider than the viewport at 360px (16px gutters). */
  width: min(240px, calc(100vw - 32px));

  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 10px 12px;
  background: var(--fln-bg);
  border: 1px solid var(--fln-border);
  border-radius: 0; /* brand uses square corners */

  font-family: var(--fln-jbm);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fln-text);

  /* Entrance/exit motion state (overridden under reduced motion).
     Default: slightly offset + transparent until .is-visible. */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fanatik-locale-nudge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fanatik-locale-nudge.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.fanatik-locale-nudge__name {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--fln-text);
}

.fanatik-locale-nudge__hint {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62); /* AA on #0A0A0A; not lime (keeps lime ≤25%) */
}

.fanatik-locale-nudge__link {
  align-self: flex-start;
  margin: 0;
  padding: 2px 0;
  font-family: var(--fln-jbm);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fln-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fanatik-locale-nudge__link:hover,
.fanatik-locale-nudge__link:focus-visible {
  border-bottom-color: var(--fln-accent);
  outline: none;
}

.fanatik-locale-nudge__link:focus-visible {
  outline: 2px solid var(--fln-accent);
  outline-offset: 2px;
}

.fanatik-locale-nudge__dismiss {
  align-self: flex-end;
  margin: 0;
  padding: 4px 6px;
  min-width: 44px;        /* tap-target floor (iOS HIG 44pt / FANATIK 44×44 rule) */
  min-height: 44px;       /* was 28px — sub-floor on 1× screens; brand mandates 44×44 */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--fln-border);
  border-radius: 0;
  font-family: var(--fln-jbm);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fln-accent);
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fanatik-locale-nudge__dismiss:hover,
.fanatik-locale-nudge__dismiss:focus-visible {
  background: rgba(211, 254, 76, 0.10);
  border-color: var(--fln-accent);
}

.fanatik-locale-nudge__dismiss:focus-visible {
  outline: 2px solid var(--fln-accent);
  outline-offset: 2px;
}

/* ---- Mobile: keep clear of the picker tile + the viewport.
        At ≤ 420px the chyron tile inset shrinks to 24px and the
        tile is reachable; narrow the chip and tighten the gutter
        so it never covers the tile or overflows at 360px. ---- */
@media (max-width: 420px) {
  .fanatik-locale-nudge {
    right: 12px;
    /* Slightly tighter offset under the smaller mobile tile. */
    top: calc(var(--chyron-tile-h, 52px) + 12px);
    max-width: 220px;
    width: min(220px, calc(100vw - 24px));
    padding: 9px 11px;
  }
}

/* ---- Reduced motion: no transitions / transforms. Chip simply
        appears and is removed (opacity handled instantly). ---- */
@media (prefers-reduced-motion: reduce) {
  .fanatik-locale-nudge,
  .fanatik-locale-nudge.is-visible,
  .fanatik-locale-nudge.is-leaving {
    transition: none;
    transform: none;
  }
  .fanatik-locale-nudge {
    opacity: 1;
  }
  .fanatik-locale-nudge__link,
  .fanatik-locale-nudge__dismiss {
    transition: none;
  }
}

/* ---- Forced-colors / high-contrast: let the system palette
        read true; keep a visible border. ---- */
@media (forced-colors: active) {
  .fanatik-locale-nudge {
    border-color: CanvasText;
  }
}