/* ─── Ar-Rahmah Academy · Custom Styles ─────────────────────────────────── */

:root {
  --primary:        #1d0202;
  --primary-light:  #2d0404;
  --primary-dark:   #110101;
  --accent:         #c9a96e;
  --accent-light:   #dbbf87;
  --bg:             #faf8f5;
  --text-on-dark:   #ffffff;
}

/* ─── Typography ──────────────────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
}

/* ─── Mobile Nav Drawer ───────────────────────────────────────────────────── */
#nav-drawer {
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#nav-drawer.open {
  transform: translateX(0);
}
#nav-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Prayer Cards ────────────────────────────────────────────────────────── */
.prayer-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.prayer-card.is-next {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(201, 169, 110, 0.35);
}

/* ─── Islamic Geometric Pattern (hero overlay) ────────────────────────────── */
.hero-pattern {
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a96e' fill-opacity='0.07'%3E%3Cpath d='M40 0l8 8-8 8-8-8 8-8zm0 64l8 8-8 8-8-8 8-8zM0 40l8-8 8 8-8 8-8-8zm64 0l8-8 8 8-8 8-8-8zM20 20l4 4-4 4-4-4 4-4zm40 0l4 4-4 4-4-4 4-4zM20 60l4 4-4 4-4-4 4-4zm40 0l4 4-4 4-4-4 4-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ─── Section Divider ──────────────────────────────────────────────────────── */
.section-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ─── Gold Gradient Text ───────────────────────────────────────────────────── */
.text-gold {
  color: var(--accent);
}

/* ─── Card hover lift ──────────────────────────────────────────────────────── */
.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(29, 2, 2, 0.15);
}

/* ─── Progress bar ─────────────────────────────────────────────────────────── */
.progress-bar-track {
  background: rgba(255,255,255,0.15);
  border-radius: 9999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 9999px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Gallery grid ─────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* ─── Timeline ──────────────────────────────────────────────────────────────── */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 1.5rem;
  bottom: -1.5rem;
  width: 2px;
  background: rgba(201,169,110,0.3);
}
.timeline-item:last-child::before {
  display: none;
}

/* ─── Table alternating rows ────────────────────────────────────────────────── */
.prayer-table tbody tr:nth-child(even) {
  background-color: rgba(255,255,255,0.04);
}

/* ─── Smooth scroll ─────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ─── Active nav link ────────────────────────────────────────────────────────── */
.nav-link-active {
  color: var(--accent) !important;
}

/* ─── Mobile tab buttons (prayer times) ─────────────────────────────────────── */
.tab-btn.active {
  background-color: var(--accent);
  color: var(--primary);
}