/* URL IMPORTS (SUCH AS FONT IMPORTS) SHOULD BE KEPT ABOVE TAILWIND IMPORTS - DO NOT DELETE THIS COMMENT */
@import url('https://fonts.googleapis.com/css2?family=Staatliches&family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=Lora:ital;wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* PLEASE NOTE: THESE TAILWIND IMPORTS SHOULD NEVER BE DELETED - DO NOT DELETE THIS COMMENT */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* DO NOT DELETE THESE TAILWIND IMPORTS, OTHERWISE THE STYLING WILL NOT RENDER AT ALL - DO NOT DELETE THIS COMMENT */

@layer base {
  html {
    scroll-behavior: smooth;
    background-color: #FFF8E7;
    color: #2D2D2D;
  }

  body {
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.6;
  }

  /* Hero headlines — Staatliches for maximum impact */
  .font-hero {
    font-family: 'Staatliches', sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Section titles — Bebas Neue for bold display */
  h1,
  h2,
  h3 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.03em;
  }

  /* Subheads and accent text — Syne for modern edge */
  h4,
  h5,
  h6 {
    font-family: 'Syne', sans-serif;
  }

  /* Warm storytelling serif */
  .font-serif {
    font-family: 'Lora', serif;
  }

  /* Personal handwritten touches */
  .font-handwritten {
    font-family: 'Caveat', cursive;
  }

  /* prices, data, codes */
  .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }

  @media (min-width: 1024px) {
    .lg\:text-8xl {
      font-size: 6rem;
      line-height: 1;
    }
  }

  ::selection {
    background-color: #D4AF37;
    color: #4A0D0F;
  }
}

/* Scrollbar — bold gold on deep burgundy */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #4A0D0F;
}

::-webkit-scrollbar-thumb {
  background: #D4AF37;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #FFD700;
}

/* Utility: line clamp for card descriptions */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Hero Slider: Image layer wipe (clip-path) ─── */
.qw-hero-img-layer {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0s;
  z-index: 1;
}

.qw-hero-img-layer.is-active {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.qw-hero-img-layer.is-exiting {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
}

/* ─── Hero text: fade-slide in ─── */
@keyframes qwHeroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes qwHeroFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.qw-hero-text-enter .qw-hero-label {
  animation: qwHeroFadeIn 0.3s ease forwards;
}

.qw-hero-text-enter #hero-headline {
  animation: qwHeroFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.qw-hero-text-enter #hero-accent {
  animation: qwHeroFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.qw-hero-text-enter #hero-subtitle {
  animation: qwHeroFadeUp 0.4s ease 0.2s both;
}

/* ─── Slide indicator dot underline (active state) ─── */
.qw-slide-dot .qw-dot-underline {
  display: none;
}

.qw-slide-dot.is-active .qw-dot-underline {
  display: block;
}

/* Shared Reveal Animations */
.qw-reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.qw-reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.qw-delay-1 {
  transition-delay: 0.1s;
}

.qw-delay-2 {
  transition-delay: 0.2s;
}

.qw-delay-3 {
  transition-delay: 0.3s;
}

/* Locations page: moved from inline/internal styles */
.qw-ankara-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.qw-map-height {
  height: 420px;
}

.qw-map-iframe {
  border: 0;
  filter: contrast(1.05) saturate(0.9);
}

.qw-catering-bg {
  background: linear-gradient(135deg, #1a0a0b 0%, #2a0708 100%);
}

.qw-kente-overlay {
  opacity: 0.04;
  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' stroke='%23D4AF37' stroke-width='1.5'%3E%3Crect x='4' y='4' width='16' height='16' /%3E%3Crect x='28' y='4' width='16' height='16' /%3E%3Crect x='52' y='4' width='16' height='16' /%3E%3Cline x1='0' y1='24' x2='80' y2='24' stroke-width='2' /%3E%3Cline x1='24' y1='0' x2='24' y2='80' stroke-width='2' /%3E%3C/g%3E%3C/svg%3E");
}

.qw-locations-typescale .text-xs {
  font-size: 0.85rem;
}

.qw-locations-typescale .text-sm {
  font-size: 1rem;
  line-height: 1.5;
}

.qw-locations-typescale .text-base {
  font-size: 1.1rem;
  line-height: 1.55;
}

.qw-locations-typescale .text-lg {
  font-size: 1.2rem;
}

.qw-locations-typescale .text-\[11px\] {
  font-size: 13px;
}

.qw-locations-typescale .text-\[40px\] {
  font-size: 44px;
}

.qw-locations-typescale .text-\[44px\] {
  font-size: 48px;
}

.qw-locations-typescale .text-\[48px\] {
  font-size: 52px;
}

.qw-locations-typescale .text-\[56px\] {
  font-size: 60px;
}

.qw-locations-typescale .text-\[60px\] {
  font-size: 64px;
}

.qw-locations-spacing .qw-head-pad {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.qw-locations-spacing .qw-detail-pad {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.qw-locations-spacing .qw-services-pad {
  padding-top: 4rem;
  padding-bottom: 4.5rem;
}

.qw-locations-spacing .qw-quick-pad {
  padding-top: 3rem;
  padding-bottom: 3.25rem;
}

.qw-locations-typescale p,
.qw-locations-typescale li,
.qw-locations-typescale span {
  line-height: 1.6;
}

.qw-locations-typescale .font-body.text-sm {
  font-size: 1.02rem;
}

.qw-locations-typescale .font-body.text-base {
  font-size: 1.12rem;
}

.qw-locations-typescale .font-display.text-\[11px\] {
  letter-spacing: 0.2em;
}

@media (max-width: 768px) {
  .qw-locations-spacing .qw-head-pad {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .qw-locations-spacing .qw-detail-pad {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .qw-locations-spacing .qw-services-pad {
    padding-top: 2.75rem;
    padding-bottom: 3rem;
  }

  .qw-locations-spacing .qw-quick-pad {
    padding-top: 2.25rem;
    padding-bottom: 2.5rem;
  }
}

/* ─── ABOUT PAGE STYLES ─── */
.qw-about-cta-gradient {
  background: linear-gradient(135deg, #1A0A0B 0%, #2A0708 60%, #4A0D0F 100%);
}

.qw-about-kente-overlay {
  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' stroke='%23D4AF37' stroke-width='1.5'%3E%3Crect x='4' y='4' width='16' height='16' /%3E%3Crect x='28' y='4' width='16' height='16' /%3E%3Crect x='52' y='4' width='16' height='16' /%3E%3Crect x='4' y='28' width='16' height='16' /%3E%3Crect x='28' y='28' width='16' height='16' fill='%23D4AF37' fill-opacity='0.3' /%3E%3Crect x='52' y='28' width='16' height='16' /%3E%3Crect x='4' y='52' width='16' height='16' /%3E%3Crect x='28' y='52' width='16' height='16' /%3E%3Crect x='52' y='52' width='16' height='16' fill='%23D4AF37' fill-opacity='0.3' /%3E%3Cline x1='0' y1='24' x2='80' y2='24' stroke-width='2' /%3E%3Cline x1='0' y1='48' x2='80' y2='48' stroke-width='2' /%3E%3Cline x1='24' y1='0' x2='24' y2='80' stroke-width='2' /%3E%3Cline x1='48' y1='0' x2='48' y2='80' stroke-width='2' /%3E%3C/g%3E%3C/svg%3E");
}

.qw-sidebar-indicator {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background-color: #D4AF37;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qw-nav-link.is-active {
  color: #8B0000;
  background-color: rgba(139, 0, 0, 0.05);
}

.qw-nav-link.is-active .qw-sidebar-indicator {
  opacity: 1;
}

.qw-nav-link:not(.is-active) .qw-sidebar-indicator {
  opacity: 0;
  transform: scaleY(0);
}

/* Scroll reveal for About page */
.qw-reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qw-reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom scrollbar hide for mobile nav */
.qw-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.qw-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Active state for horizontal mobile links */
.about-nav-link.active-mobile {
  border-bottom: 2px solid #D4AF37;
  color: #8E191C;
}

.qw-sidebar-col {
  width: 100%;
}

@media (min-width: 1024px) {
  .qw-sidebar-col {
    width: 240px;
  }

  .qw-sidebar-fixed {
    position: fixed;
    top: 110px;
    left: max(1rem, calc((100vw - 1400px) / 2 + 2rem));
  }

  .qw-content-offset {
    margin-left: 280px;
  }
}

/* ─── CART DRAWER STYLES ─── */
.qw-cart-drawer {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.qw-cart-drawer.translate-x-full {
  transform: translateX(100%);
}

.qw-cart-drawer:not(.translate-x-full) {
  transform: translateX(0);
}

.qw-cart-backdrop {
  transition: opacity 0.3s ease;
}

.qw-cart-backdrop.opacity-0 {
  opacity: 0;
  pointer-events: none;
}

.qw-cart-backdrop.opacity-100 {
  opacity: 1;
  pointer-events: auto;
}

/* Cart item hover effect */
.qw-cart-item {
  transition: background-color 0.2s ease;
}

.qw-cart-item:hover {
  background-color: rgba(255, 248, 231, 0.5);
  /* light cream */
}

.text-cream\/75 {
  color: #fff8e7bf;
}

/* ─── PREMIUM NAVBAR STYLES ─── */
.navbar-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M19 19V15h2v4h4v2h-4v4h-2v-4h-4v-2h4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.nav-link-premium {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.15em;
  font-weight: 700;
  transition: color 0.3s ease;
}

header nav a {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.15em;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  font-size: 1.125rem;
  color: #FFFFFF;
  transition: color 0.3s ease;
  text-transform: uppercase;
}

header nav a:hover,
header nav a.is-active,
header nav .current-menu-item>a,
header nav .current_page_item>a {
  color: #D4AF37 !important;
}

/* For mobile nav active state */
.mobile-nav-link.is-active {
  color: #D4AF37 !important;
}


.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d4d4d4; 
    border-radius: 4px;
}
/* Modal Description Styling (for Wysiwyg content) */
#modalDescription p {
    margin-bottom: 1rem;
}
#modalDescription ul {
    margin-bottom: 1.25rem;
    list-style-type: none;
}
#modalDescription li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
#modalDescription li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--brand-red, #BC172F);
    font-weight: bold;
}
#modalDescription strong {
    color: #BC172F; /* brand-red */
}

.wc-block-checkout{
  padding: 0px 50px;
}

.cart-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 6px 16px 6px 6px;
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.cart-pill:hover {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(212, 175, 55, 0.6);
}

.cart-icon-circle {
  width: 36px;
  height: 36px;
  background: #F69A23;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A0A0B;
  position: relative;
}

.cart-badge-premium {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FFD700;
  color: #1A0A0B;
  font-size: 10px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cart-price-premium {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #FFFFFF;
  font-size: 16px;
}

.order-now-btn-premium {
  background: #D4AF37;
  color: #1A0A0B;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.order-now-btn-premium:hover {
  background: #FFD700;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* ─── MOBILE NAVBAR STYLES ─── */
.mobile-nav-link {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.25rem !important;
  font-weight: 700;
  color: #FFFFFF !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 0;
  display: block;
  transition: all 0.2s ease;
  line-height: 1;
  text-align: center;
}

.mobile-nav-link:hover {
  color: #D4AF37 !important;
  transform: scale(1.05);
}

.mobile-cart-circle {
  width: 50px;
  height: 50px;
  background: rgba(142, 25, 28, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  position: relative;
  transition: all 0.3s ease;
}

.mobile-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #FFD700;
  color: #1A0A0B;
  font-size: 11px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mobile-menu-btn-red {
  background: #8E191C;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 4px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.mobile-order-btn-gold {
  background: #D4AF37;
  color: #1A0A0B;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 16px;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
  transition: all 0.2s ease;
}

/* ─── LOGO BRAND GUIDELINES ─── */
.logo-transition {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-transition:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.logo-transition img {
  transition: all 0.3s ease;
}

.text-bg-qw {
background-color: rgb(246 154 35 / var(--tw-bg-opacity, 1));
    padding: 10px;
    }