/* ═══════════════════════════════════════════════════════════════════
 * Jamia Urwatul Wusqa — visual identity
 *
 * Palette:   deep navy primary, amber/gold accent, warm cream bg,
 *            chocolate-brown footer (visually distinct from the navy top).
 * Typography: Crimson Pro Latin serif (scholarly, warm) + Noto Naskh Arabic
 *            (traditional, dignified).
 * Shape:     subtle radii (more rectangular = traditional/institutional).
 *
 * To customize: edit this file. No code changes needed.
 * ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --color-primary: #162947;          /* deep navy */
  --color-secondary: #1E3454;        /* slightly lighter navy for gradients/hover */
  --color-accent: #F4B83A;           /* amber/gold */
  --color-accent-dark: #D89B1F;      /* amber hover */

  /* ── Surfaces ─────────────────────────────────────── */
  --color-bg: #F8F2E7;               /* warm cream */
  --color-background-light: #F8F2E7;
  --color-background-dark: #0F1A2E;  /* near-black navy for dramatic blocks */
  --color-card-dark: #1E3454;
  --color-message-bg: #F8F2E7;
  --color-topbar-bg: #0F1A2E;        /* darker navy strip on top */
  --color-navbar-bg: #162947;        /* main navy navbar */
  --color-footer-bg: #4A2F1C;        /* WARM CHOCOLATE BROWN — distinct from navy header */

  /* ── Text ─────────────────────────────────────────── */
  --color-text: #1A1A1A;             /* rich black */
  --color-text-light: #FFFFFF;
  --color-nav-text: #FFFFFF;         /* white on navy nav */
  --color-topbar-text: #F4B83A;      /* amber on dark navy topbar */
  --color-footer-heading: #FFFFFF;
  --color-footer-text: #E8D5C9;      /* warm cream on brown */
  --color-footer-link: #F4B83A;      /* amber footer links */
  --color-footer-muted: #B89C8E;
  --color-footer-copyright: #8A7166;

  /* ── Neutrals (warm beige tones, never cold gray) ── */
  --color-muted-text: #5C5040;
  --color-muted-bg: #F0E8D8;
  --color-border: #D4C9B0;

  /* ── Typography ───────────────────────────────────── */
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --font-latin: "Crimson Pro", Georgia, serif;
  --base-font-size: 14px;

  /* ── Shape & spacing — subtle, institutional ──────── */
  --radius-button: 0.5rem;
  --radius-card: 0.75rem;
  --button-py: 0.75rem;
  --button-px: 1.5rem;
  --shadow-card: 0 1px 3px rgba(22,41,71,0.06), 0 8px 24px rgba(22,41,71,0.08);
}

/* ═══════════════════════════════════════════════════════════════════
 * Custom touches — these elevate the design beyond plain tokens.
 * ═══════════════════════════════════════════════════════════════════ */

/* Top contact strip — thin amber hairline above + below adds editorial polish */
body > :first-child[class*="bg-topbar"],
.bg-topbar-bg {
  border-top: 2px solid var(--color-accent);
  border-bottom: 1px solid rgba(244,184,58,0.25);
}

/* Hero/page banners — refined shadow at the bottom edge */
header.bg-primary {
  box-shadow: 0 4px 24px rgba(15,26,46,0.18);
  position: relative;
}
header.bg-primary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
}

/* Page title underline (catch-all pages) — refined amber stroke */
main h1.font-urdu {
  position: relative;
  display: inline-block;
}

/* Cards — subtle border + lift on hover for institutional feel */
.bg-white.rounded-\(--radius-card\) {
  border: 1px solid var(--color-border);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.bg-white.rounded-\(--radius-card\):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(22,41,71,0.06), 0 16px 32px rgba(22,41,71,0.10);
}

/* Apply Now button — solid amber with dark text reads as confident CTA */
a[href="/admission-form"].bg-primary {
  background: var(--color-accent) !important;
  color: var(--color-primary) !important;
  letter-spacing: 0.02em;
}
a[href="/admission-form"].bg-primary:hover {
  background: var(--color-accent-dark) !important;
}

/* Navbar — bottom amber hairline to set it off from page content */
nav.bg-navbar-bg,
[class*="bg-navbar-bg"] {
  border-bottom: 2px solid var(--color-accent);
}

/* Stats section — bg-secondary becomes the dramatic dark navy block */
section.bg-secondary {
  background: linear-gradient(135deg, var(--color-background-dark) 0%, var(--color-primary) 100%);
}
section.bg-secondary .text-accent {
  text-shadow: 0 2px 12px rgba(244,184,58,0.3);
}

/* Footer — warm brown gradient + subtle pattern feel */
footer.bg-footer-bg {
  background: linear-gradient(180deg, var(--color-footer-bg) 0%, #3A2516 100%);
  border-top: 3px solid var(--color-accent);
}

/* Typography — give serif headings a touch of letter-spacing for editorial feel */
.font-latin h1, .font-latin h2, .font-latin h3 {
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Carousel pagination dots: refined amber when active */
button[aria-label*="slide"][aria-current="true"],
.bg-accent[class*="rounded-full"] {
  box-shadow: 0 0 0 4px rgba(244,184,58,0.25);
}

/* Subtle image treatment: cards with photos get a faint warm tint */
.rounded-t-\(--radius-card\) img {
  transition: transform 500ms ease, filter 500ms ease;
}
.group:hover .rounded-t-\(--radius-card\) img {
  transform: scale(1.03);
  filter: brightness(1.05) saturate(1.05);
}

/* Selection color matches brand */
::selection {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* Scrollbar (WebKit) — warm cream + navy thumb */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--color-muted-bg); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border: 3px solid var(--color-muted-bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }