/* ==============================================================================
 * The Jollof House - Fresh Modern Culinary Design System
 * Clean Warm Ivory Canvas & Pure White Artisan Cards
 * Columbus, OH
 * ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Rich West African Brand Palette */
  --jollof-flame: #EA580C;         /* Vibrant Jollof Ember Red-Orange */
  --jollof-flame-hover: #C2410C;
  --jollof-gold: #F59E0B;          /* Royal Saffron Gold */
  --jollof-gold-light: #FCD34D;
  --jollof-gold-deep: #D97706;
  --jollof-terracotta: #9A3412;
  
  /* Modern Warm Canvas & Pure White Card Palette */
  --jollof-bg-root: #F8F6F2;       /* Warm Clean Culinary Ivory Canvas */
  --jollof-bg-surface: #FFFFFF;    /* Pure White Cards */
  --jollof-bg-card: #FFFFFF;       /* Crisp White Card Background */
  --jollof-bg-card-hover: #FFFFFF;
  --jollof-border: #E5E7EB;
  --jollof-border-hover: rgba(234, 88, 12, 0.4);
  --jollof-glow: rgba(234, 88, 12, 0.15);
  
  /* Dark High-Contrast Typography for White Cards & Light Canvas */
  --jollof-text-heading: #111827;
  --jollof-text-body: #4B5563;
  --jollof-text-muted: #6B7280;

  /* Modern Typography Overrides */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tailwind CSS variable overrides for Light Clean Palette with Pure White Cards */
  --background: 40 20% 97%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 24 95% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 92% 50%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 24 95% 48%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 24 95% 53%;
}

/* ------------------------------------------------------------------------------
 * Global Overrides & Smooth Rendering
 * ------------------------------------------------------------------------------ */
body {
  font-family: var(--font-body) !important;
  background-color: var(--jollof-bg-root) !important;
  color: var(--jollof-text-body) !important;
  min-height: 100vh;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
}

/* Page Section Headings (Menu, Deals, Blog, About, Contact) */
section:not(.hero-section):not(.bg-gradient-primary):not(.relative.min-h-screen) h2,
section:not(.hero-section):not(.bg-gradient-primary):not(.relative.min-h-screen) h3 {
  color: #111827 !important;
}

/* ------------------------------------------------------------------------------
 * 1. NAVBAR - DISTINCTIVE FLOATING GLASS DESIGN WITH BRAND LOGO BADGE
 * ------------------------------------------------------------------------------ */
nav.fixed,
nav.z-50,
header {
  background: rgba(16, 11, 8, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 2px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(234, 88, 12, 0.12) !important;
  transition: all 0.3s ease;
}

/* FIX DUPLICATE BRAND TEXT NEXT TO LOGO IN NAVBAR */
header a[href="/"] > span,
header a.group > span,
header .flex.items-center.gap-3 > span,
nav a[href="/"] > span,
nav a.group > span,
nav .flex.items-center.gap-3 > span {
  display: none !important;
}

/* Navbar & Footer Brand Logo Polish */
nav a[href="/"] img,
nav a.group img,
header a[href="/"] img,
header a.group img,
footer img[alt="The Jollof House"],
footer .flex.items-center.gap-3 img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(245, 158, 11, 0.25) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

nav a[href="/"]:hover img,
nav a.group:hover img,
header a[href="/"]:hover img,
header a.group:hover img {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 22px rgba(245, 158, 11, 0.45) !important;
}

/* Navbar Navigation Links: Crisp White Text */
nav a:not(.bg-secondary):not([href*="clover.com"]),
header nav a:not(.bg-secondary):not([href*="clover.com"]),
nav .hidden.lg\:flex a:not(.bg-secondary):not([href*="clover.com"]),
nav .lg\:hidden a:not(.bg-secondary):not([href*="clover.com"]) {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

/* Navbar Hover State */
nav a:not(.bg-secondary):not([href*="clover.com"]):not([href^="tel:"]):hover,
header nav a:not(.bg-secondary):not([href*="clover.com"]):not([href^="tel:"]):hover,
nav .hidden.lg\:flex a:not(.bg-secondary):not([href*="clover.com"]):not([href^="tel:"]):hover,
nav .lg\:hidden a:not(.bg-secondary):not([href*="clover.com"]):not([href^="tel:"]):hover {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(-1px);
}

/* Navbar Clicked / Active Button */
nav a.bg-black,
nav a.bg-black\/90,
nav a[aria-current="page"],
nav a.active,
header nav a.active {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8) !important;
}

nav a:not(.bg-secondary):not([href*="clover.com"]) *,
header nav a:not(.bg-secondary):not([href*="clover.com"]) * {
  color: #FFFFFF !important;
}

/* Order Online CTA Button in Header */
header a[href*="clover.com"],
header a[href*="order"],
header a.bg-secondary,
header button.bg-secondary,
nav a[href*="clover.com"],
nav a.bg-secondary {
  background: linear-gradient(135deg, var(--jollof-flame), var(--jollof-gold)) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

header a[href*="clover.com"]:hover,
header a[href*="order"]:hover,
header a.bg-secondary:hover,
nav a[href*="clover.com"]:hover,
nav a.bg-secondary:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.55) !important;
}

/* Phone link in navbar */
nav a[href^="tel:"],
header a[href^="tel:"] {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
nav a[href^="tel:"]:hover,
header a[href^="tel:"]:hover {
  color: #FFFFFF !important;
  background: #000000 !important;
  border-radius: 8px !important;
}

/* ------------------------------------------------------------------------------
 * 2. HERO SECTION & PAGE HEADER BANNERS
 * ------------------------------------------------------------------------------ */
/* Enhance Hero Image Depth & Contrast */
section.relative.min-h-screen img,
section.relative.h-screen img,
.hero-section img {
  filter: brightness(0.72) saturate(1.15) contrast(1.05) !important;
}

/* Hero Content Styling */
section.relative h1 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9) !important;
}

/* Gradient Accent Text */
.text-secondary,
.text-amber-500,
.text-amber-400 {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #EA580C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero Primary Buttons */
.hero-section a.bg-secondary,
section.relative a.bg-secondary,
section.relative button.bg-secondary {
  background: linear-gradient(135deg, var(--jollof-flame), var(--jollof-gold-deep)) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 25px rgba(234, 88, 12, 0.5) !important;
  border: 1px solid rgba(252, 211, 77, 0.3) !important;
  transition: all 0.3s ease !important;
}

.hero-section a.bg-secondary:hover,
section.relative a.bg-secondary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.6) !important;
}

/* Hero Secondary Pill Button (Menu) */
section.relative a[href="/menu"],
section.relative a[href*="menu"] {
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
}

section.relative a[href="/menu"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--jollof-gold-light) !important;
  color: var(--jollof-gold-light) !important;
  transform: translateY(-2px) !important;
}

/* Page Top Banners (/menu, /deals, /blog, /about, /contact) */
section.bg-gradient-primary {
  background: linear-gradient(135deg, #18110D 0%, #2E1508 50%, #EA580C 100%) !important;
  padding-top: 4.5rem !important;
  padding-bottom: 3.25rem !important;
  position: relative;
  overflow: hidden;
}
section.bg-gradient-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.25), transparent 60%);
  pointer-events: none;
}
section.bg-gradient-primary h1 {
  color: #FFFFFF !important;
  font-size: 2.75rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
section.bg-gradient-primary p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.98rem !important;
}

/* ------------------------------------------------------------------------------
 * 3. PURE WHITE ARTISAN CARDS (NO DARK BROWN!)
 * ------------------------------------------------------------------------------ */
/* All Card Containers Across Website */
.bg-card,
.hover-lift,
.group.rounded-2xl,
.group.rounded-3xl,
.group.rounded-xl,
article,
div[class*="rounded-2xl"][class*="border"],
div[class*="rounded-3xl"][class*="border"],
div[class*="rounded-xl"][class*="border"],
div[role="button"][class*="bg-card"],
div[data-radix-dialog-content],
div[role="dialog"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(229, 231, 235, 0.95) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  color: #1F2937 !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
  overflow: hidden;
}

/* Card Hover States */
.hover-lift:hover,
.bg-card:hover,
.group.rounded-2xl:hover,
.group.rounded-3xl:hover,
.group.rounded-xl:hover,
div[role="button"][class*="bg-card"]:hover,
div[class*="rounded-2xl"][class*="border"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(234, 88, 12, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(234, 88, 12, 0.35) !important;
}

/* Typography inside White Cards */
.bg-card h1, .bg-card h2, .bg-card h3, .bg-card h4,
.hover-lift h1, .hover-lift h2, .hover-lift h3, .hover-lift h4,
div[class*="rounded-2xl"][class*="border"] h2,
div[class*="rounded-2xl"][class*="border"] h3,
div[role="button"][class*="bg-card"] h3,
article h1, article h2, article h3,
div[role="dialog"] h2 {
  color: #111827 !important;
  font-weight: 700 !important;
}

.bg-card p,
.hover-lift p,
div[class*="rounded-2xl"][class*="border"] p,
div[role="button"][class*="bg-card"] p,
article p,
div[role="dialog"] p {
  color: #4B5563 !important;
  line-height: 1.6 !important;
}

.bg-card .text-muted-foreground,
.hover-lift .text-muted-foreground,
div[class*="rounded-2xl"] .text-muted-foreground {
  color: #6B7280 !important;
}

/* Prices in White Cards */
.bg-card .text-accent,
.bg-card .text-primary,
div[role="button"][class*="bg-card"] .text-accent,
div[role="button"][class*="bg-card"] .text-primary,
span[class*="text-accent"],
span[class*="text-primary"] {
  color: #EA580C !important;
  font-weight: 800 !important;
}

/* Strikethrough original price */
.bg-card .line-through,
div[role="button"][class*="bg-card"] .line-through {
  color: #9CA3AF !important;
}

/* Badge Tags (Signature, Special, Save X%) */
span[class*="bg-primary"],
span[class*="bg-secondary"],
span[class*="bg-destructive"],
span[class*="rounded-full"][class*="text-xs"] {
  background: linear-gradient(135deg, #EA580C, #F59E0B) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35) !important;
}

/* ------------------------------------------------------------------------------
 * 4. MENU PAGE SPECIFIC UI
 * ------------------------------------------------------------------------------ */
/* Sticky Category Filter Navigation Bar */
.sticky.top-\[60px\] {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #E5E7EB !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Category Filter Pills */
.sticky.top-\[60px\] button {
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.sticky.top-\[60px\] button.bg-muted,
.sticky.top-\[60px\] button:not(.bg-primary) {
  background: #F3F4F6 !important;
  color: #374151 !important;
  border: 1px solid #E5E7EB !important;
}
.sticky.top-\[60px\] button.bg-muted:hover,
.sticky.top-\[60px\] button:not(.bg-primary):hover {
  background: #FFF7ED !important;
  color: #EA580C !important;
  border-color: #FDBA74 !important;
}
.sticky.top-\[60px\] button.bg-primary {
  background: linear-gradient(135deg, #EA580C, #F59E0B) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4) !important;
}

/* Category Section Headings */
section[id^="category-"] h2 {
  color: #111827 !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  border-bottom: 3px solid #EA580C !important;
  padding-bottom: 6px !important;
  margin-bottom: 1.25rem !important;
  display: inline-block !important;
}

/* Individual Dish Cards in Menu Grid (rC) */
section[id^="category-"] div[role="button"],
div[role="button"][class*="bg-card"] {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
section[id^="category-"] div[role="button"]:hover,
div[role="button"][class*="bg-card"]:hover {
  background: #FFFFFF !important;
  border-color: #EA580C !important;
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-3px) !important;
}
section[id^="category-"] div[role="button"] img,
div[role="button"][class*="bg-card"] img {
  border-radius: 12px !important;
  border: 1px solid #F3F4F6 !important;
}

/* ------------------------------------------------------------------------------
 * 5. DEALS PAGE SPECIFIC UI
 * ------------------------------------------------------------------------------ */
div.max-w-5xl .group.relative.bg-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}
div.max-w-5xl .group.relative.bg-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 45px rgba(234, 88, 12, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(234, 88, 12, 0.4) !important;
}
div.max-w-5xl .group.relative.bg-card h3 {
  color: #FFFFFF !important; /* image overlay title */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}
div.max-w-5xl .group.relative.bg-card p {
  color: #4B5563 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}
div.max-w-5xl .group.relative.bg-card a[href*="clover.com"] {
  background: linear-gradient(135deg, #EA580C, #F59E0B) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.35) !important;
  border: none !important;
}
div.max-w-5xl .group.relative.bg-card a[href*="clover.com"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 22px rgba(234, 88, 12, 0.5) !important;
}

/* ------------------------------------------------------------------------------
 * 6. BLOG PAGE SPECIFIC UI
 * ------------------------------------------------------------------------------ */
a[href^="/blog/"].group.block.bg-card {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a[href^="/blog/"].group.block.bg-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(234, 88, 12, 0.14), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(234, 88, 12, 0.4) !important;
}
a[href^="/blog/"].group.block.bg-card h2 {
  color: #111827 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}
a[href^="/blog/"].group.block.bg-card:hover h2 {
  color: #EA580C !important;
}
a[href^="/blog/"].group.block.bg-card p {
  color: #4B5563 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}
a[href^="/blog/"].group.block.bg-card span[class*="text-accent"] {
  color: #EA580C !important;
  font-weight: 700 !important;
}

/* Single Blog Post Article Container */
article.container {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
  padding: 2.5rem !important;
  margin-top: 2rem !important;
  margin-bottom: 4rem !important;
}
article.container .prose {
  color: #374151 !important;
}
article.container .prose h2,
article.container .prose h3 {
  color: #111827 !important;
}

/* ------------------------------------------------------------------------------
 * 7. MODAL / ITEM DIALOG DETAILS
 * ------------------------------------------------------------------------------ */
div[role="dialog"],
div[data-radix-dialog-content] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
  color: #111827 !important;
}
div[role="dialog"] h2,
div[data-radix-dialog-content] h2 {
  color: #111827 !important;
  font-weight: 800 !important;
}
div[role="dialog"] p,
div[data-radix-dialog-content] p {
  color: #4B5563 !important;
}
div[role="dialog"] a[href*="clover.com"] {
  background: linear-gradient(135deg, #EA580C, #F59E0B) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* ------------------------------------------------------------------------------
 * 8. ABOUT, VALUES & CONTACT SECTIONS
 * ------------------------------------------------------------------------------ */
section.bg-card {
  background: transparent !important;
}
.bg-card.p-6,
.p-8.rounded-xl.bg-background,
div[class*="p-5 bg-card"] {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}
.bg-card.p-6 h3,
.p-8.rounded-xl.bg-background h3,
div[class*="p-5 bg-card"] h3 {
  color: #111827 !important;
}
.bg-card.p-6 p,
.p-8.rounded-xl.bg-background p,
div[class*="p-5 bg-card"] p {
  color: #4B5563 !important;
}

/* FAQ Accordion */
div[data-orientation="vertical"] > div {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  padding: 4px 18px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
div[data-orientation="vertical"] button {
  color: #111827 !important;
  font-weight: 700 !important;
}
div[data-orientation="vertical"] div[role="region"] {
  color: #4B5563 !important;
}

/* ------------------------------------------------------------------------------
 * 9. FOOTER SECTION
 * ------------------------------------------------------------------------------ */
footer {
  background: #0A0705 !important;
  border-top: 2px solid rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7) !important;
  color: #E5E7EB !important;
}

/* Remove timing / hours from footer */
footer div:has(> svg.lucide-clock),
footer .flex.items-start:has(svg.lucide-clock),
footer .flex:has(svg.lucide-clock) {
  display: none !important;
}

footer a {
  transition: color 0.2s ease, transform 0.2s ease;
}

footer a:hover {
  color: var(--jollof-gold-light) !important;
}

/* Footer Social Icons */
footer .flex.gap-3 a,
footer a[class*="rounded-full"] {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--jollof-gold-light) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  transition: all 0.3s ease !important;
}

footer .flex.gap-3 a:hover,
footer a[class*="rounded-full"]:hover {
  background: linear-gradient(135deg, var(--jollof-flame), var(--jollof-gold)) !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.5) !important;
}