/* ============================================================
   THEME OVERRIDE — Dark / Gold "Sweet Chili" look
   Mirrors the reference site (obsidian + gold + Cormorant Garamond).
   Loaded AFTER style.css / global.css so these rules win.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Lato:wght@300;400;700;900&display=swap");

/* ---------- Palette tokens ---------- */
:root {
  /* Reference palette */
  --tc-obsidian: #0a0a0a;
  --tc-ash: #14120e;
  --tc-ash2: #1c1913;
  --tc-surface: #17140e;
  --tc-surface-2: #211d15;
  --tc-gold: #c9a84c;
  --tc-gold-light: #e8c96a;
  --tc-ivory: #f2ead6;
  --tc-ivory-dim: #cfc6b0;
  --tc-muted: #a89e86;
  --tc-burgundy: #2e1616;
  --tc-line: rgba(201, 168, 76, 0.16);
  --tc-line-strong: rgba(201, 168, 76, 0.3);

  /* Retarget the site's existing design tokens */
  --primary-color: #c9a84c;
  --primary-color-light: #0a0a0a;
  --primary-color-dark: #c9a84c;
  --secondary: #c9a84c;
  --secondaryLight: #e8c96a;
  --text-dark: #f2ead6;
  --white: #f2ead6;

  /* global.css tokens */
  --headerColor: #f2ead6;
  --bodyTextColor: #a89e86;
  --bodyTextColorWhite: #f2ead6;

  /* gs- system tokens */
  --gs-red: #c9a84c;
  --gs-red-dark: #e8c96a;
  --gs-red-light: rgba(201, 168, 76, 0.12);
  --gs-dark: #f2ead6;        /* was near-black; used mostly as heading text -> ivory */
  --gs-text: #ede5d0;
  --gs-text-light: #a89e86;
  --gs-bg: #0f0e0b;          /* alt section background -> near-obsidian */
  --gs-cream: #17140e;
  --gs-border: rgba(201, 168, 76, 0.16);
  --gs-shadow: 0 6px 26px rgba(0, 0, 0, 0.55);
  --gs-shadow-hover: 0 10px 36px rgba(0, 0, 0, 0.65);
  --main-color: #c9a84c;
}

/* ---------- Base ---------- */
html, body {
  background-color: var(--tc-obsidian) !important;
}
body {
  color: var(--gs-text);
  font-family: 'Lato', 'Source Sans 3', sans-serif;
}

::selection { background: rgba(201, 168, 76, 0.35); color: #fff; }

/* ---------- Serif headings (Cormorant Garamond) ---------- */
.gs-heading,
.gs-hero h1,
.gs-hero-stat-value,
.gs-achievements h2,
.gs-achievement-value,
.gs-cta h2,
.gs-cta-section h2,
.gs-faq-title,
.gs-map-info h3,
.gs-map-info h4,
.gs-location-card-overlay h3,
.gs-menu-hero h1,
.gs-about-hero h1,
.gs-dish-hero h1,
.gs-location-hero h1,
.gs-journey h2,
.gs-values h2,
.gs-gallery h2,
.gs-visit h2,
.cs-title,
.footer__col h4 {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: normal;
  letter-spacing: 0.01em;
}

.gs-heading { font-weight: 500; color: var(--tc-ivory); }
.gs-heading em,
.gs-text-accent { color: var(--tc-gold); font-style: italic; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav__container {
  background-color: rgba(10, 10, 10, 0.9) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid var(--tc-line);
}
.nav__header { background-color: transparent !important; }
.nav__logo a { color: var(--tc-gold); }
.logo__image {
  background: transparent !important;
  border-radius: 6px;
}
.nav__menu__btn { color: var(--tc-ivory); }

.nav__links { background-color: rgba(10, 10, 10, 0.96); }
.nav__links a { color: var(--tc-ivory); }
.nav__links a:hover,
.nav__links a.active { color: var(--tc-gold); }
.nav__links a.active::after { background-color: var(--tc-gold); }

@media (max-width: 768px) {
  .nav__header { background-color: rgba(10, 10, 10, 0.96) !important; }
  .nav__links.open { background-color: rgba(10, 10, 10, 0.97) !important; }
  .nav__links.open li a { color: var(--tc-ivory); }
  .nav__btn-mobile a { background-color: var(--tc-gold); color: #0a0a0a; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border: 2px solid var(--tc-gold);
  background-color: var(--tc-gold);
  color: #0a0a0a;
  font-weight: 700;
}
.btn:hover {
  background-color: transparent;
  color: var(--tc-gold);
}

.gs-btn-primary {
  background: var(--tc-gold);
  border-color: var(--tc-gold);
  color: #0a0a0a;
}
.gs-btn-primary:hover {
  background: var(--tc-gold-light);
  border-color: var(--tc-gold-light);
  color: #0a0a0a;
}
.gs-btn-outline {
  color: var(--tc-ivory);
  border-color: var(--tc-line-strong);
  background: transparent;
}
.gs-btn-outline:hover {
  background: var(--tc-gold);
  border-color: var(--tc-gold);
  color: #0a0a0a;
}
.gs-btn-dark {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: var(--tc-ivory);
}

.gs-floating-btn a {
  background: var(--tc-gold);
  color: #0a0a0a;
  box-shadow: 0 6px 22px rgba(201, 168, 76, 0.35);
}
.gs-floating-btn a:hover {
  background: var(--tc-gold-light);
  color: #0a0a0a;
}

/* ============================================================
   HERO SLIDESHOW (reference-style crossfade)
   ============================================================ */
.tc-hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tc-hero-slider .tc-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.tc-hero-slider .tc-slide.active { opacity: 1; }

/* ============================================================
   HERO
   ============================================================ */
.gs-hero::before {
  background: linear-gradient(135deg,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(46, 22, 22, 0.55) 50%,
    rgba(10, 10, 10, 0.95) 100%) !important;
}
.gs-hero h1 { color: var(--tc-ivory); font-weight: 600; }
.gs-hero h1 .accent { color: var(--tc-gold); font-style: italic; }
.gs-hero-badge { border-color: var(--tc-line-strong); }
.gs-hero-badge span { color: var(--tc-ivory); }
.gs-hero-badge i,
.gs-hero .gs-divider-icon,
.gs-hero .gs-divider-line { color: var(--tc-gold); }
.gs-hero .gs-divider-line { background: var(--tc-gold); }
.gs-hero-text { color: rgba(242, 234, 214, 0.9); }
.gs-hero-stat {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--tc-line);
}
.gs-hero-stat-value { color: var(--tc-gold); font-style: normal; }
.gs-hero-circle { border-color: rgba(201, 168, 76, 0.25); }

/* ============================================================
   DIVIDERS / LABELS / ICONS
   ============================================================ */
.gs-section-label { color: var(--tc-gold); }
.gs-divider-line { background: var(--tc-gold); }
.gs-divider-icon { color: var(--tc-gold); }
.gs-icon-circle { background: rgba(201, 168, 76, 0.12); }
.gs-icon-circle i { color: var(--tc-gold); }
.gs-subtitle { color: var(--tc-muted); }

/* ============================================================
   SECTION BACKGROUNDS  (all -> dark, alternating)
   ============================================================ */
.gs-experience,
.gs-story,
.gs-menu-categories,
.gs-catering,
.gs-location,
.gs-testimonials,
.gs-map-section,
.gs-menu-hero,
.gs-menu-section,
.gs-location-card-section,
.gs-about-hero,
.gs-journey,
.gs-values,
.gs-gallery,
.gs-visit,
.gs-gallery-header,
.gs-gallery-section,
.gs-gallery-cta,
.gs-contact-section,
.gs-social-section,
.gs-delivery-service,
.gs-delivery-areas,
.gs-how-to-order,
.gs-location-section,
.gs-dish-hero,
.gs-about-dish,
.gs-reviews,
.gs-about,
.gs-dishes,
.gs-areas,
.gs-featured-section,
.gs-section-white,
.gs-section-gray {
  background: var(--tc-obsidian) !important;
}

/* slightly lifted alternating bands */
.gs-story,
.gs-location,
.gs-journey,
.gs-gallery-section,
.gs-contact-section,
.gs-delivery-service,
.gs-about-dish,
.gs-about,
.gs-dishes {
  background: var(--tc-ash) !important;
}

.gs-breadcrumb { background: var(--tc-ash) !important; }
.gs-breadcrumb-list a { color: var(--tc-muted); }
.gs-breadcrumb-list a:hover { color: var(--tc-gold); }
.gs-breadcrumb-list li:last-child span { color: var(--tc-ivory); }

/* ============================================================
   CARD SURFACES  (elevated dark + gold hairline)
   ============================================================ */
.gs-testimonial,
.gs-map-container,
.gs-map-info,
.gs-location-card,
.gs-info-cards,
.gs-info-card,
.gs-value-card,
.gs-cta-card,
.gs-contact-card,
.gs-area-card,
.gs-review-card,
.gs-feature-card,
.gs-faq-category,
.gs-faq-item,
.menu-item,
.gs-location-box,
.gs-location-details,
.gs-info-box,
.gs-featured-card,
.gs-social-link,
.gs-area-tag,
.gs-map-box,
.gs-menu-page .gs-location-card {
  background: var(--tc-surface) !important;
  border: 1px solid var(--tc-line);
  box-shadow: var(--gs-shadow);
}

.gs-testimonial p,
.gs-feature p,
.gs-story-text p,
.gs-catering-text p { color: var(--tc-ivory-dim); }
.gs-feature h3 { color: var(--tc-gold); }
.gs-testimonial-info h4 { color: var(--tc-ivory); }
.gs-testimonial-info span { color: var(--tc-muted); }
.gs-testimonial-avatar { background: rgba(201, 168, 76, 0.12); }
.gs-testimonial-avatar i { color: var(--tc-gold); }
.gs-testimonial-stars { color: var(--tc-gold); }
.gs-story-text h3 { color: var(--tc-gold); }

/* ============================================================
   ACHIEVEMENTS BANNER  (was solid red -> dark w/ gold accents)
   ============================================================ */
.gs-achievements {
  background: var(--tc-ash2) !important;
  border-top: 1px solid var(--tc-line);
  border-bottom: 1px solid var(--tc-line);
}
.gs-achievements h2 { color: var(--tc-ivory); }
.gs-achievements-subtitle { color: var(--tc-muted); }
.gs-achievement-value { color: var(--tc-gold); }
.gs-achievement-label { color: var(--tc-muted); }

/* ============================================================
   CTA BANNERS  (dark)
   ============================================================ */
.gs-cta,
.gs-cta-section,
.gs-location-cta {
  background: var(--tc-obsidian) !important;
}
.gs-cta h2,
.gs-cta-section h2,
.gs-location-cta h2 { color: var(--tc-ivory); }
.gs-cta h2 em { color: var(--tc-gold); }
.gs-cta p,
.gs-cta-section p { color: var(--tc-ivory-dim); }
.gs-cta .gs-btn-outline,
.gs-cta-section .gs-btn-outline,
.gs-location-cta .gs-btn-outline {
  color: var(--tc-ivory);
  border-color: var(--tc-line-strong);
}
.gs-cta .gs-btn-outline:hover,
.gs-cta-section .gs-btn-outline:hover {
  background: var(--tc-gold);
  color: #0a0a0a;
}
.gs-cta-inner .gs-section-label.text-gs-red { color: var(--tc-gold) !important; }

/* ============================================================
   MENU CARD OVERLAYS / IMAGE CAPTIONS
   ============================================================ */
.gs-menu-card-title,
.gs-location-card-overlay h3,
.gs-gallery-item-title { color: var(--tc-ivory); }
.gs-location-card-image { background: var(--tc-obsidian); }

/* ============================================================
   MAP / LOCATION DETAILS
   ============================================================ */
.gs-map-info h3,
.gs-map-info h4 { color: var(--tc-ivory); }
.gs-map-detail div,
.gs-map-detail span,
.gs-location-detail span { color: var(--tc-ivory-dim); }
.gs-map-detail small { color: var(--tc-muted); }
.gs-map-detail i,
.gs-location-detail i { color: var(--tc-gold); }
.gs-map-detail a,
.gs-location-detail a { color: var(--tc-gold); }
.gs-location-hours { color: var(--tc-muted); }

/* ============================================================
   FAQ
   ============================================================ */
.gs-faq { background: var(--tc-obsidian) !important; }
.gs-faq-container {
  background: var(--tc-ash) !important;
  border: 1px solid var(--tc-line);
}
.gs-faq-title { color: var(--tc-ivory); }
.gs-faq-subtitle { color: var(--tc-muted); }
.gs-faq-divider span { background: var(--tc-gold); }
.gs-faq-divider i { color: var(--tc-gold); }
.gs-faq-category-title { color: var(--tc-gold); }
.gs-faq-question { color: var(--tc-ivory) !important; }
.gs-faq-question i { color: var(--tc-gold); }
.gs-faq-answer,
.gs-faq-answer p,
.gs-faq-answer li { color: var(--tc-ivory-dim); }
.gs-faq-answer a { color: var(--tc-gold); }

/* ============================================================
   FORMS / INPUTS
   ============================================================ */
input, textarea, select {
  background-color: #14120e;
  color: var(--tc-ivory);
  border-color: var(--tc-line-strong);
}
input::placeholder, textarea::placeholder { color: var(--tc-muted); }
input:focus, textarea:focus, select:focus {
  border-color: var(--tc-gold);
  outline: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background-color: var(--tc-obsidian) !important; border-top: 1px solid var(--tc-line); }
.footer__col h4 { color: var(--tc-gold); }
.footer__col .section__description { color: var(--tc-muted); }
.footer__links a, .footer__links li { color: var(--tc-muted); }
.footer__links a:hover { color: var(--tc-gold); }
.footer__bar,
.footer__policy,
.footer__company {
  background-color: #050505 !important;
  color: var(--tc-muted);
}
.footer__policy a { color: var(--tc-ivory-dim); }
.footer__policy a:hover { color: var(--tc-gold); }
.footer__company a { color: var(--tc-muted); }
.footer__company a span { color: var(--tc-gold); }
.social-icons a { color: var(--tc-muted); }
.social-icons a:hover { color: var(--tc-gold); }

/* ============================================================
   MENU PAGE — category pills, items, mobile controls
   ============================================================ */
.gs-menu-tabs .menu-button {
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  color: var(--tc-ivory);
}
.gs-menu-tabs .menu-button:hover {
  border-color: var(--tc-gold);
  color: var(--tc-gold);
}
.gs-menu-tabs .menu-button.active-button {
  background: var(--tc-gold);
  border-color: var(--tc-gold);
  color: #0a0a0a;
}
.gs-menu-section .category-header { color: var(--tc-gold); }
.menu-item {
  background: var(--tc-surface) !important;
  color: var(--tc-ivory);
  border: 1px solid var(--tc-line);
  box-shadow: var(--gs-shadow) !important;
}
.item-name, .item-name-text { color: var(--tc-ivory); }
.item-price { color: var(--tc-gold); }
.item-desc { color: var(--tc-muted); }

.gs-mobile-controls {
  background: rgba(10, 10, 10, 0.96) !important;
  border-bottom: 1px solid var(--tc-line);
}
.gs-mobile-controls input#menu-search,
.gs-mobile-controls .dropdown .dropbtn,
.gs-mobile-controls .dropdown .dropdown-content,
.gs-mobile-controls .dropdown .dropdown-content a {
  background: #14120e !important;
  color: var(--tc-ivory) !important;
  border-color: var(--tc-line-strong);
}
.gs-mobile-controls input#menu-search::placeholder { color: var(--tc-muted); }
.gs-mobile-controls input#menu-search:focus,
.gs-mobile-controls .dropdown .dropbtn:hover,
.gs-mobile-controls .dropdown .dropbtn:focus { border-color: var(--tc-gold); }
.gs-mobile-controls .dropdown .dropbtn i { color: var(--tc-gold); }
.gs-mobile-controls .dropdown .dropdown-content a:hover {
  background: #211d15 !important;
  color: var(--tc-gold) !important;
}

/* ============================================================
   GENERIC TEXT SAFETY NET
   ============================================================ */
.gs-menu-section p,
.gs-values p,
.gs-gallery p,
.gs-visit p,
.gs-delivery-service p,
.gs-how-to-order p,
.gs-about p,
.gs-reviews p,
.cs-text { color: var(--tc-ivory-dim); }