/* ============ SHARED STYLES ============ */
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Barlow Condensed', sans-serif; }
.text-shadow-lg { text-shadow: 0 4px 12px rgba(0,0,0,.4); }
.bg-grid {
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.reveal { opacity: 0; transform: translateY(24px); transition: all .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.marquee-track { animation: scroll 50s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html { scroll-behavior: smooth; }
.filter-bar::-webkit-scrollbar { height: 4px; }
.filter-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.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; }

/* ============ FALLBACK BRAND COLORS ============ */
/* Hardcode these in case Tailwind CDN config timing fails on multi-page load */
.bg-brand-50  { background-color: #f0f7fc !important; }
.bg-brand-100 { background-color: #dbecf7 !important; }
.bg-brand-200 { background-color: #bddcef !important; }
.bg-brand-300 { background-color: #8fc3e2 !important; }
.bg-brand-400 { background-color: #5aa3cf !important; }
.bg-brand-500 { background-color: #3687bc !important; }
.bg-brand-600 { background-color: #1e6ea1 !important; }
.bg-brand-700 { background-color: #175783 !important; }
.bg-brand-800 { background-color: #134a6d !important; }
.bg-brand-900 { background-color: #0f3d5a !important; }
.bg-brand-950 { background-color: #0a2540 !important; }

.text-brand-50  { color: #f0f7fc !important; }
.text-brand-100 { color: #dbecf7 !important; }
.text-brand-200 { color: #bddcef !important; }
.text-brand-300 { color: #8fc3e2 !important; }
.text-brand-400 { color: #5aa3cf !important; }
.text-brand-500 { color: #3687bc !important; }
.text-brand-600 { color: #1e6ea1 !important; }
.text-brand-700 { color: #175783 !important; }
.text-brand-800 { color: #134a6d !important; }
.text-brand-900 { color: #0f3d5a !important; }
.text-brand-950 { color: #0a2540 !important; }

.border-brand-700 { border-color: #175783 !important; }
.border-brand-900 { border-color: #0f3d5a !important; }
.border-brand-950 { border-color: #0a2540 !important; }

.hover\:bg-brand-700:hover { background-color: #175783 !important; }
.hover\:bg-brand-950:hover { background-color: #0a2540 !important; }
.hover\:text-brand-700:hover { color: #175783 !important; }
.hover\:border-brand-700:hover { border-color: #175783 !important; }

.bg-ice-50  { background-color: #f0f9ff !important; }
.bg-ice-100 { background-color: #e0f2fe !important; }
.bg-ice-200 { background-color: #bae6fd !important; }
.bg-ice-300 { background-color: #7dd3fc !important; }
.bg-ice-400 { background-color: #38bdf8 !important; }
.bg-ice-500 { background-color: #0ea5e9 !important; }
.bg-ice-600 { background-color: #0284c7 !important; }

.text-ice-50  { color: #f0f9ff !important; }
.text-ice-100 { color: #e0f2fe !important; }
.text-ice-200 { color: #bae6fd !important; }
.text-ice-300 { color: #7dd3fc !important; }
.text-ice-400 { color: #38bdf8 !important; }
.text-ice-500 { color: #0ea5e9 !important; }
.text-ice-600 { color: #0284c7 !important; }

.border-ice-400 { border-color: #38bdf8 !important; }
.hover\:bg-ice-600:hover { background-color: #0284c7 !important; }

/* Gradient utility overrides for brand */
.from-brand-700 { --tw-gradient-from: #175783 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(23,87,131,0)); }
.from-brand-800 { --tw-gradient-from: #134a6d !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(19,74,109,0)); }
.from-brand-900 { --tw-gradient-from: #0f3d5a !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,61,90,0)); }
.from-brand-950 { --tw-gradient-from: #0a2540 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(10,37,64,0)); }
.via-brand-800 { --tw-gradient-stops: var(--tw-gradient-from), #134a6d, var(--tw-gradient-to, rgba(19,74,109,0)) !important; }
.to-brand-700 { --tw-gradient-to: #175783 !important; }
.to-brand-800 { --tw-gradient-to: #134a6d !important; }
.to-brand-900 { --tw-gradient-to: #0f3d5a !important; }
.to-brand-950 { --tw-gradient-to: #0a2540 !important; }

/* Logo HC square — explicit gradient */
.bg-gradient-brand-logo {
  background: linear-gradient(135deg, #134a6d 0%, #0ea5e9 100%);
}

/* ============ FALLBACK EMERALD COLORS (WhatsApp green) ============ */
/* Hardcoded so the WhatsApp sections show green even if Tailwind CDN fails */
.bg-emerald-50  { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.bg-emerald-600 { background-color: #059669 !important; }
.bg-emerald-700 { background-color: #047857 !important; }

.text-emerald-600 { color: #059669 !important; }
.text-emerald-700 { color: #047857 !important; }

.border-emerald-500 { border-color: #10b981 !important; }

.hover\:bg-emerald-100:hover { background-color: #d1fae5 !important; }
.hover\:bg-emerald-600:hover { background-color: #059669 !important; }
.hover\:bg-emerald-700:hover { background-color: #047857 !important; }

/* Emerald gradients (WhatsApp CTA section background) */
.from-emerald-50  { --tw-gradient-from: #ecfdf5 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,253,245,0)); }
.from-emerald-500 { --tw-gradient-from: #10b981 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16,185,129,0)); }
.to-emerald-600 { --tw-gradient-to: #059669 !important; }


/* Strong emerald gradient fallbacks — match exact class combos used on pages */
.bg-gradient-to-br.from-emerald-500.to-emerald-600 {
  background-image: linear-gradient(to bottom right, #10b981 0%, #059669 100%) !important;
}
.bg-gradient-to-r.from-emerald-500.to-emerald-600 {
  background-image: linear-gradient(to right, #10b981 0%, #059669 100%) !important;
}
.bg-gradient-to-br.from-emerald-50 {
  background-image: linear-gradient(to bottom right, #ecfdf5 0%, #d1fae5 100%) !important;
}

/* ============ FONT FALLBACK METRICS (reduce CLS on font swap) ============ */
/* Fallback fonts sized to match webfonts, minimizing layout shift when fonts load */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow-fallback';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 88%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}
body { font-family: 'Inter', 'Inter-fallback', sans-serif; }
.font-display { font-family: 'Barlow Condensed', 'Barlow-fallback', sans-serif; }

/* Ensure md:line-clamp-none fully restores text on desktop (reset display & overflow) */
@media (min-width: 768px) {
  .md\:line-clamp-none {
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: horizontal !important;
    display: block !important;
    overflow: visible !important;
  }
}