/* Font Families - Noto Serif Bengali for Bangla, Roboto for English */
.font-bn { font-family: 'Noto Serif Bengali', serif; }
.font-en { font-family: 'Roboto', sans-serif; }
body { font-family: 'Noto Serif Bengali', 'Roboto', sans-serif; }

/* Ensure Bangla text always uses Noto Serif Bengali */
html[lang="bn"] body,
html[lang="bn"] .font-bn,
html[lang="bn"] p,
html[lang="bn"] span,
html[lang="bn"] a,
html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] h4,
html[lang="bn"] button,
html[lang="bn"] input,
html[lang="bn"] select,
html[lang="bn"] textarea,
html[lang="bn"] label {
  font-family: 'Noto Serif Bengali', serif !important;
}

/* Ensure English text uses Roboto */
html[lang="en"] body,
html[lang="en"] .font-bn,
html[lang="en"] .font-en,
html[lang="en"] p,
html[lang="en"] span,
html[lang="en"] a,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] label {
  font-family: 'Roboto', sans-serif !important;
}

/* Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-33.333%); }
}
.animate-marquee {
  animation: marquee 25s linear infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #065f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #047857; }

/* ===== Production UI Polish ===== */

/* Content-visibility for below-fold sections to improve LCP */
.content-below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* Smooth focus-visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Button press feedback */
.btn-press:active {
  transform: scale(0.97);
}

/* Card hover lift effect */
.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Image loading blur placeholder */
img {
  transition: filter 0.3s ease;
}
img.loading {
  filter: blur(10px);
}
img.loaded {
  filter: blur(0);
}

/* Glass morphism utility */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Print styles */
@media print {
  .no-print { display: none !important; }
  body { color: #000; background: #fff; }
}

/* Responsive font adjustments */
@media (max-width: 640px) {
  .text-responsive { font-size: clamp(0.75rem, 3.5vw, 1rem); }
  h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
}

/* ===== Reference Site Typography Scale (MUI System) ===== */
/* https://assunnahfoundation.org/ typography reference:
   h1: 60px, h2: 48px, h3: 30px, h4: 24px, h5: 20px, h6: 16px
   body1: 16px, body2: 14px, button: 14px
   caption: 12px, overline: 12px (minimum) */

/* Enforce minimum 12px for ALL tiny text sizes - prevents text-[8px], [9px], [10px], [11px] */
.text-\[10px\],
.text-\[12px\],
.text-\[14px\],
.text-\[14px\],
html[lang="bn"] .text-\[9px\],
html[lang="bn"] .text-\[9px\],
html[lang="bn"] .text-\[11px\],
html[lang="bn"] .text-\[12px\],
html[lang="en"] .text-\[10px\],
html[lang="en"] .text-\[10px\],
html[lang="en"] .text-\[11px\],
html[lang="en"] .text-\[13px\] {
  font-size: 1rem !important; /* 12px minimum - matches ref site caption */
  line-height: 1.5 !important;
}

/* Bengali script needs slightly larger minimum for readability */
html[lang="bn"] .text-xs,
html[lang="bn"] .text-\[10px\],
html[lang="bn"] .text-\[10px\],
html[lang="bn"] .text-\[12px\],
html[lang="bn"] .text-\[14px\],
html[lang="bn"] button.text-xs,
html[lang="bn"] span.text-xs,
html[lang="bn"] p.text-xs,
html[lang="bn"] a.text-xs,
html[lang="bn"] label.text-xs,
html[lang="bn"] input.text-xs,
html[lang="bn"] select.text-xs {
  font-size: 1rem !important; /* 13px for Bengali readability */
  line-height: 1.6 !important;
}

/* Bengali body2 = 15px (slightly larger than ref site's 14px for Bengali) */
html[lang="bn"] .text-sm {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* Touch-friendly minimum sizes on mobile */
@media (max-width: 640px) {
  html[lang="bn"] .text-xs,
  html[lang="bn"] .text-\[8px\],
  html[lang="bn"] .text-\[9px\],
  html[lang="bn"] .text-\[10px\],
  html[lang="bn"] .text-\[11px\] {
    font-size: 0.9rem !important;
  }
  html[lang="bn"] .text-sm {
    font-size: 0.9rem !important;
  }
  html[lang="bn"] .text-base {
    font-size: 1.1rem !important;
  }
}

/* Language Switching Rules */
html[lang="bn"] .lang-en-only { display: none !important; }
html[lang="en"] .lang-bn-only { display: none !important; }

/* Language Toggle Fade Animation */
.lang-bn-only, .lang-en-only {
  transition: opacity 0.15s ease-in-out;
}

/* Project Card Social / News Badge Overlay */
.project-social-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(229, 231, 235, 0.8);
  color: #4b5563;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.project-social-badge:hover {
  transform: scale(1.1);
  background: #ffffff;
  color: #047857;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Quick Donation Widget Style */
.donation-chip {
  cursor: pointer;
  transition: all 0.2s ease;
}
.donation-chip.active {
  background-color: #047857 !important;
  color: #fbbf24 !important;
  border-color: #047857 !important;
}

/* Social Share Buttons */
.social-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.social-share-btn.facebook {
  background: #eef2ff;
  color: #1d4ed8;
  border-color: #c7d2fe;
}
.social-share-btn.facebook:hover {
  background: #1d4ed8;
  color: #fff;
}
.social-share-btn.twitter {
  background: #eef2ff;
  color: #0891b2;
  border-color: #a5f3fc;
}
.social-share-btn.twitter:hover {
  background: #0891b2;
  color: #fff;
}
.social-share-btn.whatsapp {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #86efac;
}
.social-share-btn.whatsapp:hover {
  background: #16a34a;
  color: #fff;
}
.social-share-btn.telegram {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}
.social-share-btn.telegram:hover {
  background: #0284c7;
  color: #fff;
}

/* Video Play Overlay */
.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.group:hover .video-play-overlay {
  opacity: 1;
}
.video-play-btn {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.group:hover .video-play-btn {
  transform: scale(1.1);
}

/* Media Card Base */
.media-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}