/* ═══════════════════════════════════════════════════════════
   CAAT Design System — Offcanvas Component
   Depends on: tokens.css (consumes SEMANTIC tokens)
   ═══════════════════════════════════════════════════════════ */

/* ── Panel base ─────────────────────────────────────────── */
.caat-offcanvas {
  font-family: var(--caat-font-primary), sans-serif;
  background-color: var(--caat-color-bg-page);
  border: none;
  box-shadow: var(--caat-shadow);
}

/* Side panels (start / end) */
.caat-offcanvas.offcanvas-start,
.caat-offcanvas.offcanvas-end {
  width: 320px;
}

/* Top / bottom panels */
.caat-offcanvas.offcanvas-top,
.caat-offcanvas.offcanvas-bottom {
  max-height: 50vh;
}

/* ── Header ─────────────────────────────────────────────── */
.caat-offcanvas__header {
  background-color: var(--caat-color-bg-page);
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--caat-color-border);
}

.caat-offcanvas__title {
  font-family: var(--caat-font-primary), sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--caat-color-text-heading);
  margin: 0;
}

/* ── Close button ───────────────────────────────────────── */
.caat-offcanvas__close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: .375rem;
  border-radius: var(--caat-radius);
  color: var(--caat-color-text);
  cursor: pointer;
  transition: box-shadow .15s ease;
}

.caat-offcanvas__close:focus,
.caat-offcanvas__close:focus-visible {
  outline: none;
  box-shadow: var(--caat-color-focus-ring);
}

.caat-offcanvas__close:hover {
  color: var(--caat-color-text-link-hover);
}

/* ── Body ───────────────────────────────────────────────── */
.caat-offcanvas__body {
  font-family: var(--caat-font-primary), sans-serif;
  padding: 1.5rem;
  color: var(--caat-color-text);
  font-size: var(--caat-font-size-sm);
  line-height: 1.6;
}

.caat-offcanvas__body .nav-link {
  color: var(--caat-color-text);
  padding: .5rem 0;
  border-bottom: 1px solid var(--caat-color-border);
  font-size: var(--caat-font-size-sm);
}

.caat-offcanvas__body .nav-link:hover {
  color: var(--caat-color-text-link-hover);
}

.caat-offcanvas__body .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--caat-color-focus-ring);
  border-radius: var(--caat-radius);
}

/* ── Backdrop ───────────────────────────────────────────── */
.offcanvas-backdrop.show {
  opacity: .35;
}