/* Shimmer for skeleton placeholders */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background-image: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Smooth view transitions */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 240ms ease-out both;
}

/* Line clamp (Tailwind has line-clamp but ensures fallback) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spin animation for refresh icon */
@keyframes spin { to { transform: rotate(360deg); } }
.icon-spin { animation: spin 0.8s linear infinite; }

/* Make sticky elements look right under our background */
html, body { height: 100%; }
body { overflow-y: scroll; } /* prevent layout jump on short pages */

/* Desktop density tweak: scale every rem-based utility based on viewport
   width (STYLE-04, supersedes STYLE-03). Auto-adapts so the 3-column
   detail layout fits on narrower laptops without wrapping.
   Mobile (<768px) keeps 100% so touch targets and readability stay intact.
   Anchor points (rendered at 16px default):
     ~1280px viewport → ~68%
     ~1366px viewport → ~72%
     ~1600px viewport → ~80%
     ~1920px viewport → ~95% (capped) */
@media (min-width: 768px) {
  html { font-size: clamp(65%, 0.7vw + 2px, 95%); }
}

/* Custom focus ring color (matches accent) */
*:focus-visible {
  outline-offset: 2px;
}

/* Prevent layout flicker before Tailwind CDN loads */
[hidden-until-ready] { visibility: hidden; }

/* Image fallback styling */
img[data-fallback="true"] {
  object-fit: contain !important;
  background: #F1F5F9;
}

/* Custom scrollbar for the registrations / offers scroll lists (STYLE-06) */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }