/* ============================================================
   Facepraise — fonts (self-hosted, latin only, swap to fallback)
   ============================================================ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jakarta-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jakarta-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jakarta-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jakarta-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/bricolage-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bricolage-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/bricolage-700.woff2') format('woff2');
}

/* ============================================================
   Site-specific overrides
   ============================================================ */
html { scroll-behavior: smooth; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.reel-thumb::-webkit-media-controls { display: none !important; }
.reel-thumb { pointer-events: none; }

@media (max-width: 640px) {
  #reel-video { width: 100% !important; height: 100% !important; object-fit: contain; }
}

:focus-visible {
  outline: 2px solid #1e6ad6;
  outline-offset: 2px;
  border-radius: 4px;
}

@supports (padding: max(0px)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* hint to browser to dedicate a layer for the floating WhatsApp button */
.fab-wa { will-change: transform; transform: translateZ(0); }