/*
Theme Name: Dar-ul-Itqan Quran academy
Theme URI: https://darulitqan.com
Author: Muhammad Umar
Description: Custom WordPress Theme for Dar-ul-Itqan Quran Academy (Converted from React/Tailwind)
Version: 1.0.0
Text Domain: al-noor-academy
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* CSS Variables from Tailwind Config */
:root {
  --background: 0 0% 100%;
  --foreground: 160 76% 16%;
  --card: 0 0% 100%;
  --card-foreground: 160 76% 16%;
  --popover: 0 0% 100%;
  --popover-foreground: 160 76% 16%;
  --primary: 160 76% 16%;
  --primary-foreground: 0 0% 100%;
  --secondary: 150 20% 96%;
  --secondary-foreground: 160 76% 16%;
  --muted: 150 20% 96%;
  --muted-foreground: 160 10% 45%;
  --accent: 43 72% 52%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 150 20% 90%;
  --input: 150 20% 90%;
  --ring: 160 76% 16%;
  --radius: 0.75rem;
  --gold: 43 72% 52%;
  --gold-light: 43 72% 62%;
  --emerald-dark: 160 76% 10%;
  --emerald-light: 155 40% 95%;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
}

/* Dark Mode Variables */
.dark {
  --background: 160 76% 6%;
  --foreground: 0 0% 95%;
  --card: 160 50% 10%;
  --card-foreground: 0 0% 95%;
  --popover: 160 50% 10%;
  --popover-foreground: 0 0% 95%;
  --primary: 43 72% 52%;
  --primary-foreground: 160 76% 10%;
  --secondary: 160 30% 15%;
  --secondary-foreground: 0 0% 95%;
  --muted: 160 30% 15%;
  --muted-foreground: 150 10% 60%;
  --accent: 43 72% 52%;
  --accent-foreground: 160 76% 10%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 95%;
  --border: 160 30% 20%;
  --input: 160 30% 20%;
  --ring: 43 72% 52%;
}

/* Base Styles */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

* {
  border-color: hsl(var(--border));
}

/* Custom Utilities */
.text-gold { color: hsl(var(--gold)); }
.bg-gold { background-color: hsl(var(--gold)); }
.bg-emerald-dark { background-color: hsl(var(--emerald-dark)); }
.bg-emerald-light { background-color: hsl(var(--emerald-light)); }
.gradient-gold { background: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-light))); }
.gradient-emerald { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--emerald-dark))); }

/* Tiptap Editor Styles */
.tiptap { outline: none; }
.tiptap h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; color: hsl(var(--foreground)); }
.tiptap h2 { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground)); }
.tiptap p { margin-bottom: 0.5rem; }
.tiptap ul, .tiptap ol { padding-left: 1.5rem; margin-bottom: 0.5rem; }
.tiptap ul { list-style: disc; }
.tiptap ol { list-style: decimal; }
.tiptap blockquote { border-left: 3px solid hsl(var(--primary)); padding-left: 1rem; margin: 0.5rem 0; color: hsl(var(--muted-foreground)); font-style: italic; }
.tiptap img { max-width: 100%; border-radius: 0.5rem; margin: 0.75rem 0; }
.tiptap p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: hsl(var(--muted-foreground)); pointer-events: none; height: 0; }

/* General Structural Fallbacks */
.wp-site-blocks { max-width: 1280px; margin: 0 auto; text-align: center; }
.card { padding: 2em; }