/*
  HAJJ 2026 & 2027 — Shared Hub Page Styles
  Works alongside main.css. Grid-first, horizontal layouts,
  site-consistent design language, no border overkill.
  Golden accent on hover only. Icons via lucide. No emoji.
*/

/* ============================================================
   DESIGN TOKENS (mirror site vars) - BOTH PAGES
   ============================================================ */
.hajj-2026-page,
.hajj-2027-page {
  --hg-green:      #0d6f57;
  --hg-green-dk:   #0a5845;
  --hg-green-lt:   rgba(13,111,87,0.08);
  --hg-gold:       #d4a017;
  --hg-gold-lt:    rgba(212,160,23,0.18);
  --hg-border:     rgba(15,23,42,0.09);
  --hg-shadow:     0 4px 18px rgba(12,53,82,0.08);
  --hg-shadow-lg:  0 16px 40px rgba(12,53,82,0.13);
  --hg-radius:     14px;
  --hg-radius-sm:  10px;
}

/* ============================================================
   1. HERO — clear readable text over video (both pages)
   ============================================================ */
.hajj-2026-page .hero-overlay,
.hajj-2027-page .hero-overlay {
  background: linear-gradient(155deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.80) 100%) !important;
}
.hajj-2026-page .hero-inner h1,
.hajj-2027-page .hero-inner h1 {
  color: #fff !important;
  text-shadow: 0 3px 20px rgba(0,0,0,.8) !important;
  position: relative; z-index: 2;
}
.hajj-2026-page .hero-inner > p,
.hajj-2027-page .hero-inner > p {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.65) !important;
  position: relative; z-index: 2;
}
.hajj-2026-page .hero-actions,
.hajj-2026-page .hero-icons,
.hajj-2027-page .hero-actions,
.hajj-2027-page .hero-icons { position: relative; z-index: 2; }

/* ============================================================
   2. HUB NAV — pill tabs matching site badge style (both pages)
   ============================================================ */
.hajj-2026-page .hub-nav,
.hajj-2027-page .hub-nav {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.08), 0 4px 16px rgba(0,0,0,.04) !important;
  border-bottom: none !important;
}
.hajj-2026-page .hub-nav-inner,
.hajj-2027-page .hub-nav-inner {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.hajj-2026-page .hub-nav-inner::-webkit-scrollbar,
.hajj-2027-page .hub-nav-inner::-webkit-scrollbar { display: none; }
.hajj-2026-page .hub-nav a,
.hajj-2027-page .hub-nav a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  border: 1px solid var(--hg-border) !important;
  background: white !important;
  transition: all .2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.hajj-2026-page .hub-nav a i,
.hajj-2026-page .hub-nav a svg,
.hajj-2027-page .hub-nav a i,
.hajj-2027-page .hub-nav a svg {
  width: 14px !important; height: 14px !important;
  color: #94a3b8 !important; flex-shrink: 0 !important;
}
.hajj-2026-page .hub-nav a:hover,
.hajj-2027-page .hub-nav a:hover {
  background: #f0faf7 !important;
  border-color: rgba(13,111,87,.3) !important;
  color: var(--hg-green) !important;
}
.hajj-2026-page .hub-nav a:hover i,
.hajj-2027-page .hub-nav a:hover i { color: var(--hg-green) !important; }
.hajj-2026-page .hub-nav a.active,
.hajj-2027-page .hub-nav a.active {
  background: var(--hg-green) !important;
  border-color: var(--hg-green) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(13,111,87,.28) !important;
}
.hajj-2026-page .hub-nav a.active i,
.hajj-2027-page .hub-nav a.active i { color: white !important; }

/* ============================================================
   3. LIVE FACTS — horizontal scroll strip (BOTH PAGES)
   ============================================================ */
.hajj-2026-page .hub-live,
.hajj-2027-page .hub-live {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 1rem !important;
  padding-bottom: 6px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--hg-green) #e2e8f0 !important;
}
.hajj-2026-page .hub-live::-webkit-scrollbar,
.hajj-2027-page .hub-live::-webkit-scrollbar { height: 3px; }
.hajj-2026-page .hub-live::-webkit-scrollbar-thumb,
.hajj-2027-page .hub-live::-webkit-scrollbar-thumb { background: var(--hg-green); border-radius: 2px; }
.hajj-2026-page .hub-live-card,
.hajj-2027-page .hub-live-card {
  flex: 0 0 190px !important;
  background: white !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius-sm) !important;
  padding: 1.25rem !important;
  text-align: center !important;
  box-shadow: var(--hg-shadow) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.hajj-2026-page .hub-live-card:hover,
.hajj-2027-page .hub-live-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--hg-shadow-lg) !important;
  border-color: var(--hg-gold) !important;
}
.hajj-2026-page .hub-live-label,
.hajj-2027-page .hub-live-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  margin-bottom: .5rem !important;
}
.hajj-2026-page .hub-live-value,
.hajj-2027-page .hub-live-value {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--hg-green) !important;
  line-height: 1.15 !important;
}
.hajj-2026-page .hub-live-meta,
.hajj-2027-page .hub-live-meta {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: .4rem !important;
}

/* ============================================================
   4. AI QUICK ANSWERS — 4-col stat strip at top (BOTH PAGES)
   ============================================================ */
.hajj-2026-page .ai-quick-answers,
.hajj-2027-page .ai-quick-answers {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin: 2rem 0 !important;
}
.hajj-2026-page .ai-quick-answer,
.hajj-2027-page .ai-quick-answer {
  background: white !important;
  border: 1px solid var(--hg-border) !important;
  border-top: 3px solid var(--hg-green) !important;
  border-radius: var(--hg-radius-sm) !important;
  padding: 1.25rem !important;
  box-shadow: var(--hg-shadow) !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
.hajj-2026-page .ai-quick-answer:hover,
.hajj-2027-page .ai-quick-answer:hover {
  border-color: var(--hg-gold) !important;
  border-top-color: var(--hg-gold) !important;
  box-shadow: 0 8px 24px rgba(212,160,23,.12) !important;
  transform: translateY(-2px) !important;
}
.hajj-2026-page .ai-quick-answer strong,
.hajj-2027-page .ai-quick-answer strong {
  display: block !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: .5rem !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}
.hajj-2026-page .ai-quick-answer span,
.hajj-2027-page .ai-quick-answer span {
  font-size: .95rem !important;
  color: #475569 !important;
  line-height: 1.55 !important;
}

/* ============================================================
   5. ENTITY CLARITY — info banner (BOTH PAGES)
   ============================================================ */
.hajj-2026-page .entity-clarity,
.hajj-2027-page .entity-clarity {
  background: #f8fafc !important;
  border: 1px solid var(--hg-border) !important;
  border-left: 4px solid var(--hg-green) !important;
  border-radius: var(--hg-radius-sm) !important;
  padding: 1.25rem 1.75rem !important;
  margin: 1.5rem 0 !important;
  box-shadow: none !important;
}
.hajj-2026-page .entity-clarity p,
.hajj-2027-page .entity-clarity p {
  font-size: .95rem !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.hajj-2026-page .entity-clarity strong,
.hajj-2027-page .entity-clarity strong { color: var(--hg-green) !important; }

/* ============================================================
   6. SEXY CARDS — clean cards, golden hover only (BOTH PAGES)
   ============================================================ */
.hajj-2026-page .sexy-card,
.hajj-2027-page .sexy-card {
  background: white !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius) !important;
  box-shadow: var(--hg-shadow) !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
  overflow: hidden !important;
}
.hajj-2026-page .sexy-card:hover,
.hajj-2027-page .sexy-card:hover {
  border-color: var(--hg-gold) !important;
  box-shadow: 0 12px 32px rgba(212,160,23,.13), 0 4px 10px rgba(0,0,0,.06) !important;
  transform: translateY(-5px) !important;
}
/* Remove gradient bg from main.css */
.hajj-2026-page .sexy-card,
.hajj-2027-page .sexy-card { background: white !important; }
/* Colour-coded top bar instead of full gradient */
.hajj-2026-page .sexy-card::before,
.hajj-2027-page .sexy-card::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  background: var(--hg-green) !important;
  margin: 0 !important;
  width: 100% !important;
  position: static !important;
  left: auto !important; top: auto !important;
}
.hajj-2026-page .sexy-card.secondary::before,
.hajj-2027-page .sexy-card.secondary::before { background: #3b82f6 !important; }
.hajj-2026-page .sexy-card.accent::before,
.hajj-2027-page .sexy-card.accent::before    { background: var(--hg-gold) !important; }
.hajj-2026-page .sexy-card.dark::before,
.hajj-2027-page .sexy-card.dark::before      { background: #334155 !important; }

.hajj-2026-page .sexy-card-icon,
.hajj-2027-page .sexy-card-icon {
  font-size: 0 !important; /* hide broken emoji fallback size */
  line-height: 0 !important;
  margin: 1.5rem 1.75rem .75rem !important;
  display: block !important;
}
.hajj-2026-page .sexy-card-icon i,
.hajj-2026-page .sexy-card-icon svg,
.hajj-2027-page .sexy-card-icon i,
.hajj-2027-page .sexy-card-icon svg {
  width: 28px !important; height: 28px !important;
  color: var(--hg-green) !important;
  display: block !important;
}
.hajj-2026-page .sexy-card.secondary .sexy-card-icon i,
.hajj-2027-page .sexy-card.secondary .sexy-card-icon i { color: #3b82f6 !important; }
.hajj-2026-page .sexy-card.accent .sexy-card-icon i,
.hajj-2027-page .sexy-card.accent .sexy-card-icon i    { color: var(--hg-gold) !important; }
.hajj-2026-page .sexy-card.dark .sexy-card-icon i,
.hajj-2027-page .sexy-card.dark .sexy-card-icon i      { color: #94a3b8 !important; }

.hajj-2026-page .sexy-card-title,
.hajj-2027-page .sexy-card-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 1.75rem .5rem !important;
  line-height: 1.3 !important;
}
.hajj-2026-page .sexy-card.dark .sexy-card-title,
.hajj-2027-page .sexy-card.dark .sexy-card-title { color: white !important; }

.hajj-2026-page .sexy-card-content,
.hajj-2027-page .sexy-card-content {
  font-size: .95rem !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 1.75rem 1.5rem !important;
}
.hajj-2026-page .sexy-card.dark .sexy-card-content,
.hajj-2027-page .sexy-card.dark .sexy-card-content { color: #cbd5e1 !important; }
.hajj-2026-page .sexy-card-content ul,
.hajj-2027-page .sexy-card-content ul { list-style: none !important; padding: 0 !important; margin: .5rem 0 0 !important; }
.hajj-2026-page .sexy-card-content li,
.hajj-2027-page .sexy-card-content li {
  padding: .25rem 0 !important;
  padding-left: 1.25rem !important;
  position: relative !important;
}
.hajj-2026-page .sexy-card-content li::before,
.hajj-2027-page .sexy-card-content li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;  top: .55rem !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--hg-green) !important;
  display: block !important;
}
.hajj-2026-page .sexy-card.secondary .sexy-card-content li::before,
.hajj-2027-page .sexy-card.secondary .sexy-card-content li::before { background: #3b82f6 !important; }
.hajj-2026-page .sexy-card.accent .sexy-card-content li::before,
.hajj-2027-page .sexy-card.accent .sexy-card-content li::before    { background: var(--hg-gold) !important; }
.hajj-2026-page .sexy-card-actions,
.hajj-2027-page .sexy-card-actions {
  padding: 0 1.75rem 1.75rem !important;
  margin: 0 !important;
}
.hajj-2026-page .sexy-card-actions a,
.hajj-2027-page .sexy-card-actions a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  background: var(--hg-green) !important;
  color: white !important;
  text-decoration: none !important;
  transition: background .2s, transform .2s !important;
  box-shadow: none !important;
}
.hajj-2026-page .sexy-card-actions a:hover,
.hajj-2027-page .sexy-card-actions a:hover {
  background: var(--hg-green-dk) !important;
  transform: none !important;
}

/* ============================================================
   7. SEXY TIMELINE — clean tree with numbered bullets (BOTH PAGES)
   ============================================================ */
.hajj-2026-page .sexy-timeline,
.hajj-2027-page .sexy-timeline {
  position: relative !important;
  padding-left: 3.5rem !important;
  margin: 2rem 0 !important;
}
.hajj-2026-page .sexy-timeline::before,
.hajj-2027-page .sexy-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 1.25rem !important; top: 0 !important; bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(to bottom, var(--hg-green), rgba(13,111,87,.15)) !important;
}
.hajj-2026-page .sexy-timeline-item,
.hajj-2027-page .sexy-timeline-item {
  position: relative !important;
  margin-bottom: 1.75rem !important;
  display: block !important;
}
.hajj-2026-page .sexy-timeline-bullet,
.hajj-2027-page .sexy-timeline-bullet {
  position: absolute !important;
  left: -2.5rem !important; top: .2rem !important;
  width: 2rem !important; height: 2rem !important;
  border-radius: 50% !important;
  background: var(--hg-green) !important;
  color: white !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 3px white, 0 0 0 5px rgba(13,111,87,.2) !important;
  z-index: 1 !important;
}
.hajj-2026-page .sexy-timeline-content,
.hajj-2027-page .sexy-timeline-content {
  background: white !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius-sm) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: var(--hg-shadow) !important;
  transition: border-color .25s, box-shadow .25s !important;
}
.hajj-2026-page .sexy-timeline-content:hover,
.hajj-2027-page .sexy-timeline-content:hover {
  border-color: var(--hg-gold) !important;
  box-shadow: 0 8px 24px rgba(212,160,23,.1) !important;
}
.hajj-2026-page .sexy-timeline-content h4,
.hajj-2027-page .sexy-timeline-content h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 .5rem !important;
}
.hajj-2026-page .sexy-timeline-body,
.hajj-2027-page .sexy-timeline-body {
  font-size: .9rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}
.hajj-2026-page .sexy-timeline-body ul,
.hajj-2027-page .sexy-timeline-body ul {
  list-style: none !important;
  padding: 0 !important; margin: .4rem 0 0 !important;
}
.hajj-2026-page .sexy-timeline-body li,
.hajj-2027-page .sexy-timeline-body li {
  padding: .2rem 0 .2rem 1.1rem !important;
  position: relative !important;
  color: #64748b !important;
  font-size: .875rem !important;
}
.hajj-2026-page .sexy-timeline-body li::before,
.hajj-2027-page .sexy-timeline-body li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: .55rem !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: var(--hg-green) !important;
}

/* ============================================================
   8. GRID — ensure sexy-grid columns work inside .prose (BOTH PAGES)
   ============================================================ */
/* columns-2 */
@media (min-width: 640px) {
  .hajj-2026-page .prose .sexy-grid.columns-2,
  .hajj-2027-page .prose .sexy-grid.columns-2 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
/* columns-3 */
@media (min-width: 768px) {
  .hajj-2026-page .prose .sexy-grid.columns-3,
  .hajj-2027-page .prose .sexy-grid.columns-3 {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
/* columns-4 */
@media (min-width: 1024px) {
  .hajj-2026-page .prose .sexy-grid.columns-4,
  .hajj-2027-page .prose .sexy-grid.columns-4 {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hajj-2026-page .prose .sexy-grid.columns-4,
  .hajj-2027-page .prose .sexy-grid.columns-4 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
/* Make sure sexy-grid inside prose doesn't collapse */
.hajj-2026-page .prose .sexy-grid,
.hajj-2027-page .prose .sexy-grid {
  display: grid !important;
  max-width: none !important;
}

/* ============================================================
   9. SITEWIDE — Hijri pill in header (global, all pages)
   ============================================================ */
.hijri-pill,
#header-hijri {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, #0d6f57, #0a5845) !important;
  color: white !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(13,111,87,.3) !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  transition: box-shadow .2s, transform .2s !important;
}
.hijri-pill:hover,
#header-hijri:hover {
  box-shadow: 0 4px 14px rgba(13,111,87,.4) !important;
  transform: translateY(-1px) !important;
  color: white !important;
}

/* ============================================================
   10. RESPONSIVE (BOTH PAGES)
   ============================================================ */
@media (max-width: 1024px) {
  .hajj-2026-page .ai-quick-answers,
  .hajj-2027-page .ai-quick-answers {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .hajj-2026-page .ai-quick-answers,
  .hajj-2027-page .ai-quick-answers {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hajj-2026-page .hub-nav a,
  .hajj-2027-page .hub-nav a {
    padding: 6px 12px !important;
    font-size: .8rem !important;
  }
  .hajj-2026-page .hub-live-card,
  .hajj-2027-page .hub-live-card { flex: 0 0 170px !important; }
}
@media (max-width: 480px) {
  .hajj-2026-page .ai-quick-answers,
  .hajj-2027-page .ai-quick-answers {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   HAJJ 2027 PAGE — hero image + shared card styles
   ============================================================ */
.hajj-2027-page .hero--hub.hajj-2027-hero {
  background-image: url('/assets/img/hero-poster.avif');
  background-size: cover;
  background-position: center;
  min-height: 68vh;
  position: relative;
  display: flex;
  align-items: center;
}
/* The inline <style> in the layout handles overlay via gradient on the section itself */

/* Inherit all card golden-hover rules from hajj-2026-page by targeting shared classes */
.hajj-2027-page .hub-live-card:hover,
.hajj-2027-page .prepare-step:hover,
.hajj-2027-page .timeline-item:hover {
  border-color: #d4a017 !important;
  box-shadow: 0 8px 24px rgba(212,160,23,.13) !important;
}