/* ============================================================
   HONEST RESTAURANT — DARK / GOLD THEME
   Drop-in override. Load AFTER style.css:
     <link rel="stylesheet" href="theme-dark.css">
   Content and layout are untouched — colours + type only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap');

/* ---------- 1. PALETTE ---------- */
:root {
  /* new theme tokens */
  --t-black:        #0A0A0A;
  --t-charcoal:     #141210;
  --t-charcoal-2:   #1E1B18;
  --t-charcoal-3:   #262220;
  --t-gold:         #FFE352;
  --t-gold-deep:    #E9CE3C;
  --t-cream:        #F5F0E6;
  --t-cream-dim:    #E8E0D0;
  --t-gray:         #8A8580;
  --t-gray-light:   #A5A09A;
  --t-hairline:     rgba(245, 240, 230, 0.12);
  --t-hairline-gold:rgba(255, 227, 82, 0.28);
  --t-serif:        'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --t-sans:         'DM Sans', 'Sofia Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* remap the existing variables the site already uses */
  --primary-color:        #FFE352;
  --primary-color-dark:   #E9CE3C;
  --primary-color-light:  #F5F0E6;
  --text-dark:            #F5F0E6;
  --text-light:           #A5A09A;
  --white:                #FEFDFB;
  --main-color:           #FFE352;

  /* variables referenced by the "cs-" template sections */
  --primary:              #FFE352;
  --primaryLight:         #FFE352;
  --secondary:            #FFE352;
  --secondaryLight:       #FFE352;
  --headerColor:          #F5F0E6;
  --bodyTextColor:        #A5A09A;
  --bodyTextColorWhite:   #F5F0E6;
  --lightgray:            #1E1B18;
  --text-color:           #F5F0E6;
  --dark:                 #0A0A0A;
  --medium:               #141210;
  --light:                #1E1B18;

  --clr-neutral-100:  0 0% 8%;
  --clr-neutral-200:  30 6% 12%;
  --clr-neutral-300:  36 6% 20%;
  --clr-secondary-400: 40 5% 65%;
  --clr-secondary-500: 30 8% 8%;
}

/* ---------- 2. BASE ---------- */
html, body {
  background-color: var(--t-black) !important;
  color: var(--t-cream-dim) !important;
  font-family: var(--t-sans) !important;
}
body { -webkit-font-smoothing: antialiased; }

p, li, span, td, label, .section__description, .privacy-desc, .privacy-main-desc {
  color: var(--t-gray-light);
}
strong, b { color: var(--t-cream); }

::selection { background: var(--t-gold); color: var(--t-black); }

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5,
.section__header,
.cs-title, .cs-h2, .cs-h3,
.card_title, .special-card-title,
.dish-card-name, .dish-category-name,
.logo__wrapper .logo__title,
.special__card h4 {
  font-family: var(--t-serif) !important;
  color: var(--t-cream);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.section__header, .cs-title { font-weight: 500; }

.section__sub__header,
.cs-topper,
.special__container .section__sub__header {
  color: var(--t-gold) !important;
  font-family: var(--t-sans) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* cs-topper has a fixed width in the template — don't let tracking clip it */
.cs-topper { letter-spacing: normal !important; overflow: visible !important; }
.section__description, .cs-text, .cs-item-text {
  color: var(--t-gray-light) !important;
}
.explore__content .section__header span,
.header__content h1 span,
.footer__company a span {
  color: var(--t-gold) !important;
}
hr { border-top: 1px solid var(--t-hairline-gold) !important; }

/* ---------- 4. NAVIGATION ---------- */
.nav__container,
.nav__header {
  background-color: var(--t-charcoal) !important;
  box-shadow: 0 1px 0 var(--t-hairline), 0 10px 30px rgba(0,0,0,.6) !important;
  border-bottom: 1px solid var(--t-hairline);
}
.nav__logo a, .nav__links a, .nav__menu__btn {
  color: var(--t-cream) !important;
}
.nav__links a:hover,
.nav__links a.active,
.nav__logo a { color: var(--t-gold) !important; }
.nav__links a.active::after { background-color: var(--t-gold) !important; }
.nav__links { background-color: transparent !important; }
.nav__links.open {
  background-color: rgba(10, 10, 10, 0.97) !important;
  border-bottom: 1px solid var(--t-hairline-gold) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.7) !important;
}
.nav__links.open li a { color: var(--t-cream) !important; }
.logo__wrapper .logo__title { color: var(--t-cream) !important; }
.logo__wrapper span { color: var(--t-gold) !important; }

/* ---------- 5. BUTTONS ---------- */
.btn,
.nav__btn .btn,
.nav__btn-mobile a,
.explore__btn a,
.menu-btn-wrapper a,
.header__btn .btn,
.dropbtn,
.cs-button-solid,
.btn.order-float {
  font-family: var(--t-sans) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 2px !important;
  transition: all .25s ease;
}

/* solid gold buttons — dark text */
.nav__btn-mobile a,
.explore__btn a,
.menu-btn-wrapper a,
.header__btn .btn,
.dropbtn,
.btn.order-float,
#home-hero .cs-button-solid,
#home-hero .cs-button1,
#gallery-header .cs-button-solid,
#our-story-container .cs-button-solid,
#about-section-hero .cs-button-solid {
  background-color: var(--t-gold) !important;
  color: var(--t-black) !important;
  border: 1px solid var(--t-gold) !important;
}
.nav__btn-mobile a:hover,
.explore__btn a:hover,
.menu-btn-wrapper a:hover,
.header__btn .btn:hover,
.dropbtn:hover,
.btn.order-float:hover,
#home-hero .cs-button-solid:hover,
#gallery-header .cs-button-solid:hover,
#our-story-container .cs-button-solid:hover,
#about-section-hero .cs-button-solid:hover {
  background-color: transparent !important;
  color: var(--t-gold) !important;
  border: 1px solid var(--t-gold) !important;
}

/* outline button (header "Order Now") */
.nav__btn .btn,
.btn {
  background-color: transparent !important;
  color: var(--t-gold) !important;
  border: 1px solid var(--t-gold) !important;
}
.nav__btn .btn:hover,
.btn:hover {
  background-color: var(--t-gold) !important;
  color: var(--t-black) !important;
  border-color: var(--t-gold) !important;
}

/* the ::before wipe used by the cs- template buttons */
.cs-button-solid::before,
#home-hero .cs-button-solid::before,
#gallery-header .cs-button-solid::before,
#our-story-container .cs-button-solid::before,
#about-section-hero .cs-button-solid::before,
#about-section-hero .cs-button-transparent::before {
  background: var(--t-black) !important;
  opacity: 1 !important;
}
#about-section-hero .cs-button-transparent {
  border: 1px solid var(--t-hairline-gold) !important;
  color: var(--t-cream) !important;
}

/* ---------- 6. HERO ---------- */
#home-hero .cs-background::before,
#about-section-hero .cs-picture::before {
  background: #000 !important;
  opacity: .62 !important;
}
#home-hero .cs-title,
#home-hero .cs-subtitle,
#about-section-hero .cs-title,
#about-section-hero .cs-h2,
#about-section-hero .cs-number { color: var(--t-cream) !important; }
#home-hero .cs-text,
#about-section-hero .cs-text,
#about-section-hero .cs-item-text { color: var(--t-cream-dim) !important; }
#home-hero .cs-topper,
#about-section-hero .cs-topper { color: var(--t-gold) !important; }
#about-section-hero .cs-item {
  background: rgba(245, 240, 230, 0.05) !important;
  border: 1px solid var(--t-hairline);
}
#about-section-hero .cs-link::before { background: var(--t-gold) !important; }

/* ---------- 7. CARDS & PANELS ---------- */
.special__card,
.card,
.note,
.menu-item,
.testimonial,
#our-story-container .cs-item,
#about-services .cs-item,
.floating-btn-wrapper,
.dropdown-content,
.mobile-menu-controls,
.fixed-nav {
  background-color: var(--t-charcoal-2) !important;
  background: var(--t-charcoal-2) !important;
  border: 1px solid var(--t-hairline);
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
  color: var(--t-cream-dim) !important;
}
.special__card:hover,
.menu-item:hover,
.card:hover {
  border-color: var(--t-hairline-gold);
  box-shadow: 0 24px 60px rgba(0,0,0,.7) !important;
}
.special__card h4,
.special__footer .price,
#our-story-container .cs-h3,
#about-services .cs-h3,
.card_title { color: var(--t-cream) !important; }
.special__card p,
#our-story-container .cs-item-text,
#about-services .cs-item-text { color: var(--t-gray-light) !important; }
.special__ratings { color: var(--t-gold) !important; }
.card_title::after { background-color: var(--t-gold) !important; }
.card_price {
  background: var(--t-gold) !important;
  background-color: var(--t-gold) !important;
  color: var(--t-black) !important;
  border: 1px solid var(--t-gold) !important;
}
#about-services .cs-icon-wrapper {
  background-color: var(--t-gold) !important;
}
.special__container .gluten-wrapper img,
.special__container .vegan-wrapper img,
.special__card .card-title-wrapper img { filter: none; }
.explore__image img,
.special__card img { filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }

/* testimonials block (light template) */
.testimonial .position,
.testimonial > p:last-of-type { color: var(--t-gray) !important; }
.bg-neutral-100, .bg-secondary-500 { background: var(--t-charcoal-2) !important; }
.text-neutral-100 { color: var(--t-cream) !important; }
.text-secondary-400 { color: var(--t-gray-light) !important; }
.bg-primary-400 { background: var(--t-charcoal-3) !important; }
.bg-secondary-400 { background: var(--t-charcoal-3) !important; }

/* ---------- 8. MENU PAGE ---------- */
.menu-buttons { background-color: var(--t-charcoal) !important; box-shadow: 0 2px 20px rgba(0,0,0,.6) !important; }
.menu-buttons.fixed-nav { background-color: var(--t-charcoal) !important; }
.menu-button,
.menu-buttons.fixed-nav .menu-button {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--t-gray-light) !important;
  font-family: var(--t-sans) !important;
  letter-spacing: .06em;
}
.menu-button:hover { color: var(--t-cream) !important; opacity: 1 !important; }
.menu-button::after, .active-button::after { background: var(--t-gold) !important; }
.active-button { color: var(--t-gold) !important; opacity: 1 !important; }
.item-price { color: var(--t-gold) !important; opacity: 1 !important; }
.category-header {
  background-color: transparent !important;
  color: var(--t-gold) !important;
  border-bottom: 1px solid var(--t-hairline-gold);
  font-family: var(--t-serif) !important;
}
.selected-category { color: var(--t-gold) !important; }
.navigation-arrows .left-arrow,
.navigation-arrows .right-arrow {
  color: var(--t-gold) !important;
  border: 1px solid var(--t-hairline-gold) !important;
  background: transparent !important;
}
.navigation-arrows .left-arrow:hover,
.navigation-arrows .right-arrow:hover {
  background: var(--t-gold) !important;
  color: var(--t-black) !important;
}
#menu-search {
  background-color: var(--t-charcoal-2) !important;
  color: var(--t-cream) !important;
  border: 1px solid var(--t-hairline) !important;
  border-radius: 2px !important;
}
#menu-search::placeholder { color: var(--t-gray) !important; }
#menu-search:focus { border-color: var(--t-gold) !important; outline: none; }
.dropdown-content a { color: var(--t-cream-dim) !important; }
.dropdown-content a:hover { background-color: var(--t-charcoal-3) !important; color: var(--t-gold) !important; }
.dropdown-content::-webkit-scrollbar-track { background: var(--t-charcoal) !important; }
.dropdown-content::-webkit-scrollbar-thumb { background: var(--t-charcoal-3) !important; }
.dropdown-content::-webkit-scrollbar-thumb:hover { background: var(--t-gold) !important; }
.card_content::-webkit-scrollbar-thumb { background: var(--t-charcoal-3) !important; }

/* ---------- 9. GALLERY / OUR FOOD / DISHES ---------- */
#gallery-header { background-color: var(--t-black) !important; }
#gallery-header .cs-title { color: var(--t-cream) !important; }
#gallery-header .cs-text { color: var(--t-gray-light) !important; }
#gallery-header .cs-picture { box-shadow: 0 20px 60px rgba(0,0,0,.7) !important; }
.dish-menu-wrapper .single-box img { filter: brightness(62%) !important; }
.dish-menu-wrapper .single-box a:hover img { filter: brightness(88%) !important; }
.dish-wrapper .single-box img { filter: brightness(90%) !important; }
.dish-category-name {
  background-color: transparent !important;
  border: 1px solid var(--t-hairline-gold) !important;
  border-radius: 2px;
}
.dish-category-name a, .dish-card-name { color: var(--t-cream) !important; }
.dish-category-name:hover {
  background-color: var(--t-gold) !important;
  border-color: var(--t-gold) !important;
}
.dish-category-name:hover a { color: var(--t-black) !important; }

/* ---------- 10. CONTACT / LEGAL ---------- */
.header__content h1 { color: var(--t-cream) !important; }
.header__contact__content .contact-list li a { color: var(--t-cream-dim) !important; }
.header__contact__content .contact-list li a:hover { color: var(--t-gold) !important; }
.header__image .privacy__image { border: 1px solid var(--t-hairline) !important; }
.map-container iframe { filter: invert(90%) hue-rotate(180deg) brightness(.95) contrast(.9); border-radius: 2px; }

/* ---------- 11. FOOTER ---------- */
.footer { background-color: var(--t-charcoal) !important; border-top: 1px solid var(--t-hairline); }
.footer__col h4 { color: var(--t-cream) !important; font-family: var(--t-serif) !important; }
.footer__links a, .footer__links li { color: var(--t-gray-light) !important; }
.footer__links a:hover, .social-icons a:hover { color: var(--t-gold) !important; }
.social-icons a { color: var(--t-gray) !important; }
.footer__logo a span { color: var(--t-cream-dim) !important; }
.footer__bar, .footer__policy, .footer__company {
  background-color: var(--t-black) !important;
  color: var(--t-gray) !important;
  border-top: 1px solid var(--t-hairline);
}
.footer__policy a, .footer__company a { color: var(--t-gray-light) !important; }
.footer__policy a:hover, .footer__company a span:hover { color: var(--t-gold) !important; }

/* ---------- 12. POPUP / SCROLLBAR ---------- */
.popup-container { background-color: rgba(10,10,10,.9) !important; }
.popup-content, .popup-box { background-color: var(--t-charcoal-2) !important; color: var(--t-cream-dim) !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--t-black); }
::-webkit-scrollbar-thumb { background: var(--t-charcoal-3); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--t-gold-deep); }

/* ---------- 13. HERO IMAGES, ICONS & TEMPLATE FIXES ---------- */

/* the home + about heroes ship bright photos — darken them like the reference site */
#home-hero .cs-background img,
#about-section-hero .cs-picture img { filter: brightness(.34) saturate(.9) !important; }
#home-hero .cs-background::before,
#about-section-hero .cs-picture::before { opacity: .35 !important; }

/* the About hero paints its photo as a CSS background, so darken it by blending */
#about-section-hero {
  background-color: #57534d !important;
  background-blend-mode: multiply !important;
}

/* white icons on a gold disc are unreadable — make them black */
#about-services .cs-icon-wrapper img,
#about-services .cs-icon-wrapper svg { filter: brightness(0) !important; }

/* headings the template renders outside h1-h5 */
.footer__logo a, .footer__logo a span, .footer__logo h3, .footer__logo h4,
.menu-title, .cs-h1, .header__content h1 { font-family: var(--t-serif) !important; }
.menu-title { color: var(--t-cream) !important; letter-spacing: .04em; }

/* any remaining template solid buttons (contact page, etc.) */
.cs-button-solid,
.cs-button-solid:visited {
  background-color: var(--t-gold) !important;
  color: var(--t-black) !important;
  border: 1px solid var(--t-gold) !important;
}
.cs-button-solid:hover {
  background-color: transparent !important;
  color: var(--t-gold) !important;
}
.cs-button-transparent {
  background-color: transparent !important;
  color: var(--t-cream) !important;
  border: 1px solid var(--t-hairline-gold) !important;
}

/* ---------- 14. INTEGRATION FIXES ----------
   Overrides for the handful of places where style.css hard-codes a light
   value that the sections above don't reach. Keep this block last. */

/* tell the browser (form controls, native scrollbars, autofill) we are dark */
:root { color-scheme: dark; }

/* --- 14a. Privacy policy / Terms of use ---
   Both pages carry an inline `color:#000000` on the intro block, which would
   render black-on-black. Attribute selector + !important is the only way to
   beat an inline style without touching the markup. */
.privacy-main-desc[style] { color: var(--t-cream) !important; }
.privacy-title {
  font-family: var(--t-serif) !important;
  color: var(--t-cream) !important;
}
.privacy-desc, .privacy-main-desc { color: var(--t-gray-light) !important; }
.privacy-policy-content hr { border-top-color: var(--t-hairline-gold) !important; }

/* --- 14b. Light-grey drop shadows on headings read as haze on black --- */
.dish-menu-title h1,
.dish-category-title h1,
.menu-heading-wrapper .menu-title { text-shadow: none !important; }

/* --- 14c. Gradient-clipped heading span ---
   style.css sets -webkit-text-fill-color:transparent, so a plain `color`
   override is invisible. Re-point the gradient at the gold ramp. */
.header__content h1 span {
  background: -webkit-linear-gradient(var(--t-gold), var(--t-gold-deep)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- 14d. Menu list items (built by script.js) --- */
.item-name { color: var(--t-cream) !important; }
.item-desc { color: var(--t-gray-light) !important; }
.item-desc span { color: var(--t-gold-deep) !important; letter-spacing: .04em; }

/* --- 14e. Sections the theme's generic rules miss --- */
.best-dishes-header h2,
.dish-menu-title h1,
.dish-category-title h1 { color: var(--t-cream) !important; }
.contact__section__description,
.card_text p { color: var(--t-gray-light) !important; }
.card_content::-webkit-scrollbar-track { background: var(--t-charcoal-2) !important; }

/* `.note` is a small badge, not a panel — undo the card shadow it inherits */
.note {
  background-color: var(--t-gold) !important;
  color: var(--t-black) !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 14f. our-food.html: the hero wave ships fill="white" ---
   As a presentation attribute, CSS `fill` wins. Match the page ground so the
   wave reads as the background rising, not a white slab. */
#gallery-header .cs-wave path,
#gallery-header .cs-wave { fill: var(--t-black) !important; }

/* the typewriter caret in the gallery header is hard-coded green */
#gallery-header .cs-content span:nth-child(1) {
  color: var(--t-gold) !important;
  border-right-color: var(--t-gold) !important;
}

/* --- 14g. Popup close control --- */
.close-popup {
  background: var(--t-charcoal-3) !important;
  color: var(--t-cream) !important;
  border: 1px solid var(--t-hairline-gold);
}
.close-popup:hover {
  background: var(--t-gold) !important;
  color: var(--t-black) !important;
}

/* --- 14h. Keyboard focus needs to be visible on a black ground --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.menu-button:focus-visible {
  outline: 2px solid var(--t-gold);
  outline-offset: 2px;
}

/* --- 14i. Mobile menu control bar --- */
.mobile-menu-controls { border-bottom: 1px solid var(--t-hairline); }