/* ═══════════════════════════════════════════════════════════
   CAAT Design System — Tooltip Component
   BEM root: .caat-tooltip
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────── */
.caat-tooltip {
  display: inline-block;
  position: relative;
}

/* ── Bootstrap tooltip overrides ─────────────────────────── */
.tooltip {
  font-family: var(--caat-font-primary), sans-serif;
}

.tooltip-inner {
  background-color: var(--caat-color-bg-brand);
  color: var(--caat-color-text-inverse);
  border-radius: var(--caat-radius);
  font-family: var(--caat-font-primary), sans-serif;
  font-size: var(--caat-font-size-xs);
  line-height: 1.4;
  max-width: 250px;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* ── Arrow colours ───────────────────────────────────────── */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--caat-color-bg-brand);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--caat-color-bg-brand);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--caat-color-bg-brand);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--caat-color-bg-brand);
}

/* ── Icon trigger ────────────────────────────────────────── */
.caat-tooltip__icon {
  color: var(--caat-blue-700);
  cursor: pointer;
  font-size: 1rem;
  vertical-align: middle;
}

.caat-tooltip__icon:focus-visible {
  outline: 0;
  box-shadow: var(--caat-color-focus-ring);
  border-radius: var(--caat-radius);
}

/* ── Link trigger ────────────────────────────────────────── */
.caat-tooltip__link {
  color: var(--caat-blue-700);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.caat-tooltip__link:hover {
  color: var(--caat-blue-900);
}

.caat-tooltip__link:focus-visible {
  outline: 0;
  box-shadow: var(--caat-color-focus-ring);
  border-radius: var(--caat-radius);
}