/* Islahi Majlis — themes, animations, color fallbacks (works with or without Tailwind) */

:root,
[data-theme="classic"] {
  --navy-950: #0a1424;
  --navy-900: #0f1f3d;
  --navy-800: #152947;
  --navy-700: #1c3560;
  --navy-600: #254a7a;
  --cream: #faf8f4;
  --cream-dark: #f2ede4;
  --paper: #fffdf9;
  --accent: #c9a227;
  --accent-dark: #b08e1a;
  --ink: #0f1f3d;
  --ink-muted: #5a6b82;
  --line: #e4dfd4;
}

[data-theme="night"] {
  --navy-950: #060d18;
  --navy-900: #0c1628;
  --navy-800: #122038;
  --navy-700: #1a3050;
  --navy-600: #244068;
  --cream: #121a24;
  --cream-dark: #1a2433;
  --paper: #1e2836;
  --accent: #d4b04a;
  --accent-dark: #c9a227;
  --ink: #e8eef5;
  --ink-muted: #9aa8bc;
  --line: #2a3545;
}

[data-theme="desert"] {
  --navy-950: #2a2218;
  --navy-900: #3d3228;
  --navy-800: #524535;
  --navy-700: #6b5a45;
  --navy-600: #85725a;
  --cream: #faf6ef;
  --cream-dark: #f0e8d8;
  --paper: #fffcf7;
  --accent: #b8862e;
  --accent-dark: #9a7024;
  --ink: #2e2418;
  --ink-muted: #6b5a48;
  --line: #e8dcc8;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Onest', system-ui, sans-serif;
  background-color: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

.font-arabic { font-family: 'Amiri', serif; }

/* Color fallbacks — Tailwind CDN custom colors */
.bg-cream { background-color: var(--cream) !important; }
.bg-cream-dark { background-color: var(--cream-dark) !important; }
.bg-paper, .bg-white { background-color: var(--paper); }
.bg-navy-950 { background-color: var(--navy-950) !important; }
.bg-navy-900 { background-color: var(--navy-900) !important; }
.bg-navy-800 { background-color: var(--navy-800) !important; }
.bg-accent { background-color: var(--accent) !important; }
.hover\:bg-accent-dark:hover { background-color: var(--accent-dark) !important; }
.text-cream { color: var(--cream) !important; }
.text-cream\/75 { color: color-mix(in srgb, var(--cream) 75%, transparent) !important; }
.text-cream\/80 { color: color-mix(in srgb, var(--cream) 80%, transparent) !important; }
.text-cream\/70 { color: color-mix(in srgb, var(--cream) 70%, transparent) !important; }
.text-cream\/60 { color: color-mix(in srgb, var(--cream) 60%, transparent) !important; }
.text-cream\/90 { color: color-mix(in srgb, var(--cream) 90%, transparent) !important; }
.text-navy-900 { color: var(--navy-900) !important; }
.text-navy-950 { color: var(--navy-950) !important; }
.text-navy-800 { color: var(--navy-800) !important; }
.text-navy-700 { color: var(--navy-700) !important; }
.text-accent { color: var(--accent) !important; }
.border-accent { border-color: var(--accent) !important; }
.from-navy-950 { --tw-gradient-from: var(--navy-950) var(--tw-gradient-from-position); --tw-gradient-to: rgb(10 20 36 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-navy-800 { --tw-gradient-to: var(--navy-800) var(--tw-gradient-to-position); }

[data-theme="night"] .bg-white { background-color: var(--paper) !important; }
[data-theme="night"] .border-stone-200 { border-color: var(--line) !important; }
[data-theme="night"] .text-slate-500 { color: var(--ink-muted) !important; }
[data-theme="night"] .text-slate-400 { color: var(--ink-muted) !important; }

.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; }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-fade { animation: fadeIn 0.4s ease both; }
.animate-slide { animation: slideDown 0.35s ease both; }

.stagger > * { animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.16s; }
.stagger > *:nth-child(4) { animation-delay: 0.22s; }
.stagger > *:nth-child(5) { animation-delay: 0.28s; }
.stagger > *:nth-child(6) { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in, .animate-fade, .animate-slide, .stagger > * { animation: none; }
}

/* Theme switcher */
.theme-switcher { display: flex; gap: 6px; align-items: center; }
.theme-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; transition: transform 0.15s, border-color 0.15s;
}
.theme-dot:hover { transform: scale(1.1); }
.theme-dot.active { border-color: var(--accent); transform: scale(1.15); }
.theme-dot[data-theme="classic"] { background: linear-gradient(135deg, #0f1f3d, #c9a227); }
.theme-dot[data-theme="night"] { background: linear-gradient(135deg, #0c1628, #1e2836); }
.theme-dot[data-theme="desert"] { background: linear-gradient(135deg, #524535, #c4924a); }

.safe-pb { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }

/* Google Translate widget + custom button */
.google-translate-host {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.im-translate-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.im-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cream) 25%, transparent);
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.im-translate-btn:hover { background: color-mix(in srgb, var(--cream) 18%, transparent); }
.im-translate-btn:disabled { opacity: 0.6; cursor: wait; }
.im-translate-slot .goog-te-gadget { font-family: inherit !important; }
.im-translate-slot .goog-te-gadget .goog-te-combo {
  margin: 0;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent);
  background: var(--paper);
  color: var(--ink);
  max-width: 140px;
}
body > .skiptranslate { display: none !important; }
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }


@media (min-width: 400px) {
  .xs\:inline { display: inline !important; }
  .xs\:block { display: block !important; }
}
@media (max-width: 399px) {
  .hidden.xs\:inline { display: none !important; }
}

/* Responsive helpers */
@media (max-width: 639px) {
  .hero-title { font-size: 1.75rem !important; }
}