/* ─────────────────────────────────────────────────────────────
   site.css — ported from your globals.css.
   Color tokens & fonts were moved into the Tailwind config script
   in header.php (Tailwind Play CDN can't read @theme). This file
   keeps the raw CSS utility classes / keyframes / scrollbar rules
   your header/homepage/footer actually reference.
   ───────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  background-color: #faf8f3;
  color: #253536;
}

body {
  background-color: #faf8f3;
  background-image:
    radial-gradient(1100px 520px at 78% -8%, rgba(212, 175, 55, 0.10), transparent 60%),
    radial-gradient(900px 500px at -6% 8%, rgba(6, 78, 59, 0.06), transparent 55%);
  color: #253536;
  -webkit-font-smoothing: antialiased;
}

::selection { background-color: #d1e7dd; color: #064e3b; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd8cf; border: 3px solid #faf8f3; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #aebcae; }

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Bold Magenta -> Red button gradient, matches bg-fsia-btn */
.bg-fsia-btn { background-image: linear-gradient(135deg, #e0215f 0%, #d4145a 45%, #9d0e42 100%); }
.bg-fsia-gradient { background-image: linear-gradient(135deg, #d4145a 0%, #e0215f 42%, #fbb03b 118%); }
.text-fsia-gradient { background-image: linear-gradient(135deg, #d4145a, #fbb03b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Shimmer skeleton loader (kept for parity, used if you add loading states) */
@keyframes fsia-shimmer { 100% { transform: translateX(100%); } }
.skeleton { position: relative; overflow: hidden; background: #ffe0ea; }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: fsia-shimmer 1.4s infinite;
}

/* Scroll offset so anchored sections (e.g. #directories) clear the sticky nav */
section[id] { scroll-margin-top: 84px; }

/* Instagram-story-highlights style horizontal scroller: no visible scrollbar */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
  html { scroll-behavior: auto; }
}