/*
  CheffyIQ — Restaurant Theme
  Applies the warm burgundy · aged gold · parchment palette
  globally across all pages. Loaded after style.css.
*/

/* ================================================================
   TYPOGRAPHY
================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.01em;
}

.section-title, .page-title {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ================================================================
   PUBLIC NAV / SITE HEADER
================================================================ */
.site-header {
  background: rgba(26, 10, 0, 0.97) !important;
  border-bottom: 1px solid rgba(201,150,42,0.2) !important;
}
.site-header.scrolled {
  background: rgba(26, 10, 0, 0.96) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.5) !important;
}

/* Nav links */
.hd-nav-link { color: #D4C4A8 !important; }
.hd-nav-link:hover { color: #F0D060 !important; }
.hd-signin { color: #D4C4A8 !important; }
.hd-signin:hover { color: #F0D060 !important; }
header.site-header a:not(.btn):not(.hd-mega-link) { color: #D4C4A8 !important; }
header.site-header a:not(.btn):not(.hd-mega-link):hover { color: #F0D060 !important; }
.site-header * { -webkit-text-fill-color: initial !important; }

/* "Book Demo" button in nav */
.hd-cta {
  background: linear-gradient(180deg, #C9962A, #A67720) !important;
  border-color: transparent !important;
  color: white !important;
}
.hd-cta:hover { box-shadow: 0 6px 16px -4px rgba(201,150,42,0.55) !important; }

/* Mega menu */
.hd-dropdown { border-color: rgba(201,150,42,0.2) !important; }
.hd-mega-h { color: #C9962A !important; }
.hd-mega-link strong { color: var(--gray-800); }
.hd-mega-link:hover { background: rgba(201,150,42,0.06) !important; }
.hd-mega-promo { background: linear-gradient(135deg, #FDF0F2, white) !important; border-color: rgba(139,26,46,0.2) !important; }
.hd-mega-promo-badge { background: #8B1A2E !important; }

/* Mobile drawer */
.hd-drawer-content { background: #1A0A00; }
.hd-drawer-head { border-color: rgba(201,150,42,0.2); }
.hd-drawer-section h4 { color: #A89070; }
.hd-drawer-section a { color: #D4C4A8; }
.hd-drawer-section a:hover { background: rgba(201,150,42,0.1); color: #F0D060; }
.hd-drawer-close { color: #A89070; }

/* Status chip */
.nav-status-chip { background: rgba(42,96,73,0.15); color: #3DAB7E; }

/* ================================================================
   DASHBOARD / APP SIDEBAR + TOPBAR
================================================================ */
.sidebar {
  background: #1A0A00 !important;
  border-right-color: rgba(201,150,42,0.15) !important;
}
.sidebar-brand, .sidebar-logo { color: #F0D060 !important; }
.sidebar-brand strong, .sidebar-brand span { color: #F0D060 !important; }

.nav-item { color: #D4C4A8 !important; }
.nav-item:hover, .nav-item.active {
  background: rgba(201,150,42,0.1) !important;
  color: #F0D060 !important;
}
.nav-item.active { border-left: 3px solid #C9962A !important; }
.nav-section-label { color: #7A6550 !important; }

.topbar {
  background: white !important;
  border-bottom: 1px solid var(--gray-200) !important;
}
.topbar-title { font-family: 'Playfair Display', Georgia, serif; color: var(--gray-900); }

/* ================================================================
   ADMIN PANEL HEADER
================================================================ */
.admin-header, [class*="admin-nav"],
.staff-banner, [style*="background: linear-gradient(90deg, var(--dark)"] {
  background: linear-gradient(90deg, #1A0A00, #2C1510) !important;
  border-bottom-color: rgba(201,150,42,0.2) !important;
}

/* ================================================================
   CHEF APP HEADER
================================================================ */
.chef-header, .chef-topbar,
[style*="background:linear-gradient(135deg,var(--primary)"] {
  background: linear-gradient(135deg, #8B1A2E, #C9962A) !important;
}

/* ================================================================
   AUTH PAGES
================================================================ */
.auth-side, .auth-left {
  background: linear-gradient(160deg, #1A0A00 0%, #2C1510 50%, #3D1A05 100%) !important;
}
.auth-side h1, .auth-side h2, .auth-side h3 { color: #FDF8F0 !important; }
.auth-side p { color: #D4C4A8 !important; }
.auth-side .eyebrow, .auth-side .badge { color: #F0D060 !important; }

/* ================================================================
   BUTTONS — global overrides
================================================================ */
.btn-primary {
  background: linear-gradient(180deg, #C9962A 0%, #A67720 100%) !important;
  color: white !important;
}
.btn-primary:hover { box-shadow: 0 8px 20px -4px rgba(201,150,42,0.6) !important; }

.btn-soft-primary {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}
.btn-soft-info {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}
.badge-info { background: var(--primary-light) !important; color: var(--primary) !important; }
.badge-primary { background: var(--primary-light) !important; color: var(--primary-dark) !important; }

/* ================================================================
   CARDS
================================================================ */
.card { border-color: var(--gray-200); }
.card:hover { border-color: var(--gray-300); }
.card-hover:hover { box-shadow: 0 20px 40px -12px rgba(139,26,46,0.1); }

.feature-card:hover {
  border-color: rgba(201,150,42,0.45);
  box-shadow: 0 24px 50px -16px rgba(139,26,46,0.12);
}

/* ================================================================
   FORMS — focus ring
================================================================ */
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,150,42,0.15);
}

/* ================================================================
   TABLES
================================================================ */
.table thead th { background: var(--gray-50); color: var(--gray-600); border-color: var(--gray-200); }
.table tbody tr:hover { background: #FDF8F0; }

/* ================================================================
   SECTION BACKGROUNDS
================================================================ */
body { background: var(--gray-50); }
.section { background: white; }

/* ================================================================
   EYEBROW CHIPS
================================================================ */
.eyebrow {
  color: var(--accent);
  background: rgba(201,150,42,0.1);
  border-color: rgba(201,150,42,0.3);
}

/* ================================================================
   SECTION TITLES — gradient sweep
================================================================ */
.section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  background: linear-gradient(120deg,
    var(--gray-900) 0%, var(--gray-900) 38%,
    var(--primary) 50%,
    var(--gray-900) 62%, var(--gray-900) 100%
  ) !important;
  background-size: 250% 100% !important;
  background-position: 100% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: background-position 1.4s ease;
}
.section-title.in-view { background-position: 0% 50% !important; }
.section-title .accent { -webkit-text-fill-color: var(--primary) !important; color: var(--primary); }

/* Hero h1 accent → gold on dark background */
.hero h1 .accent,
.hero h1 span.accent,
.hero-slider h1 .accent {
  color: #F0D060 !important;
  -webkit-text-fill-color: #F0D060 !important;
  text-shadow: 0 2px 24px rgba(201,150,42,0.45);
}

/* ================================================================
   COMPLIANCE BADGES
================================================================ */
.compliance-badge { border-color: var(--gray-200); color: var(--gray-600); }
.compliance-badge:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 12px 24px -8px rgba(201,150,42,0.18); }
.compliance-badge i { color: var(--accent); }

/* ================================================================
   TESTIMONIAL CARDS
================================================================ */
.testi-card:hover { border-color: var(--accent); box-shadow: 0 24px 50px -16px rgba(201,150,42,0.2); }
.testi-card .quote-mark { color: var(--accent); }

/* ================================================================
   FAQ
================================================================ */
.faq-card { background: white; border-color: var(--gray-200); }
.faq-card:hover { border-color: rgba(201,150,42,0.4); }
.faq-card[open] { border-color: var(--primary); box-shadow: 0 20px 40px -12px rgba(139,26,46,0.18); }
.faq-card[open] summary { background: linear-gradient(135deg, var(--primary-light), transparent); }
.faq-card[open] .faq-toggle { background: var(--primary); }
.faq-filter.active { background: var(--primary); border-color: var(--primary); }
.faq-filter:hover { border-color: var(--primary); color: var(--primary); }
.faq-footer-card .ff-icon { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.faq-aside h2 { font-family: 'Playfair Display', Georgia, serif; }
.faq-aside-actions a i { color: var(--primary); }
.faq-aside-actions a:hover { border-color: var(--primary); color: var(--primary); }
.faq-aside-card { background: linear-gradient(135deg, var(--primary-light), white); border-color: rgba(139,26,46,0.2); }

/* ================================================================
   PRESS / AWARDS
================================================================ */
.press-strip { background: var(--gray-50); border-color: var(--gray-200); }
.press-logo { color: var(--gray-400); }
.press-logo:hover { color: var(--gray-700); }
.award-badge { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-color: #D4A017; color: #7C4A00; }

/* ================================================================
   WORKFLOW VIZ
================================================================ */
.workflow-viz { background: linear-gradient(180deg, var(--gray-100), var(--gray-50)); }
.wf-node { background: white; border-color: var(--gray-200); }
.wf-node:hover { border-color: var(--accent); box-shadow: 0 24px 50px -16px rgba(139,26,46,0.12); }
.wf-line { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.wf-particle { background: #F0D060; box-shadow: 0 0 12px #C9962A, 0 0 20px rgba(201,150,42,0.4); }

/* ================================================================
   BENTO GRID
================================================================ */
.bento-card { background: white; border-color: var(--gray-200); }
.bento-card:hover { border-color: rgba(201,150,42,0.5); box-shadow: 0 24px 50px -16px rgba(139,26,46,0.14); }
.bento-big { background: linear-gradient(135deg, var(--primary-light), white); }
.bento-tag { background: var(--primary-light); color: var(--primary); }

/* ================================================================
   INTEGRATION CARDS
================================================================ */
.integration-card { border-color: var(--gray-200); }
.integration-card:hover { border-color: var(--accent); box-shadow: 0 12px 24px -8px rgba(201,150,42,0.2); }

/* ================================================================
   LOGO WALL
================================================================ */
.logo-wall-card { background: white; border-color: var(--gray-200); }
.logo-wall-card:hover { border-color: var(--accent); box-shadow: 0 18px 32px -12px rgba(201,150,42,0.22); }

/* ================================================================
   RESOURCE CARDS
================================================================ */
.resource-card { background: white; border-color: var(--gray-200); }
.resource-card:hover { border-color: var(--accent); box-shadow: 0 24px 50px -16px rgba(201,150,42,0.2); }
.resource-card .rc-cat { color: var(--primary); }

/* ================================================================
   FOUNDER CARDS
================================================================ */
.founder-card { background: white; border-color: var(--gray-200); }
.founder-card:hover { border-color: var(--accent); box-shadow: 0 20px 40px -12px rgba(139,26,46,0.12); }
.founder-card .role { color: var(--primary); }

/* ================================================================
   TOUR TABS
================================================================ */
.tour-shell { border-color: var(--gray-200); }
.tour-tabs { background: var(--gray-100); border-color: var(--gray-200); }
.tour-tab { color: var(--gray-500); }
.tour-tab:hover { color: var(--gray-800); }
.tour-tab.active { color: var(--primary); box-shadow: 0 -2px 0 0 var(--primary) inset; }

/* ================================================================
   ROI MINI (dark section)
================================================================ */
.roi-mini { background: linear-gradient(135deg, #1A0A00, #2C1510, #3D1A05) !important; }
.roi-mini::before {
  background: radial-gradient(circle at 80% 20%, rgba(201,150,42,0.18), transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(139,26,46,0.2), transparent 50%) !important;
}
.roi-result { background: rgba(201,150,42,0.06); border-color: rgba(201,150,42,0.2); }
.roi-result .big { background: linear-gradient(120deg, #F0D060, #FDE68A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.roi-slider { accent-color: #C9962A; }
.rv { color: #F0D060 !important; }

/* ================================================================
   CASE STUDY CARD
================================================================ */
.case-study-card { background: linear-gradient(135deg, #1A0A00, #2C1510); }
.case-metric .v { background: linear-gradient(120deg, #F0D060, #FDE68A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ================================================================
   NEWSLETTER
================================================================ */
.newsletter { background: linear-gradient(135deg, var(--primary-light), white); border-color: var(--primary-soft); }
.newsletter input[type="email"]:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(139,26,46,0.1); }

/* ================================================================
   STICKY CTA BUTTON
================================================================ */
.sticky-cta {
  background: linear-gradient(135deg, #C9962A, #A67720) !important;
  box-shadow: 0 20px 40px -10px rgba(201,150,42,0.6), 0 0 0 1px rgba(201,150,42,0.25) !important;
  color: white !important;
}

/* ================================================================
   ACTIVITY TICKER
================================================================ */
.activity-ticker { background: rgba(26,10,0,0.94); border-color: rgba(201,150,42,0.3); }
.activity-ticker .at-head { color: #3DAB7E; }
.activity-ticker .at-row .num { color: #F0D060; }

/* ================================================================
   TOAST NOTIFICATIONS
================================================================ */
.toast-item.toast-critical { border-left-color: var(--primary); }
.toast-item.toast-success { border-left-color: var(--secondary); }
.toast-item.toast-warning { border-left-color: var(--warning); }

/* ================================================================
   CALENDAR / BOOKING
================================================================ */
.cal-shell { border-color: var(--gray-200); }
.cal-info { background: linear-gradient(180deg, var(--gray-100), white); border-color: var(--gray-200); }
.cal-info-host .av { background: linear-gradient(135deg, #C9962A, #8B1A2E); }
.cal-info-meta i { color: var(--primary); }
.cal-info-list li i { color: var(--secondary); }
.cal-day:hover, .cal-day.selected { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ================================================================
   SCROLL PROGRESS BAR
================================================================ */
.scroll-progress {
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary)) !important;
  background-size: 200% 100% !important;
}

/* ================================================================
   COUNTERS / STATS
================================================================ */
.counter { color: var(--primary) !important; }
[data-count] { color: var(--primary); }

/* ================================================================
   COMPARE STRIP
================================================================ */
.compare-strip { border-color: var(--gray-200); }
.compare-strip .compare-col.compare-win { background: linear-gradient(135deg, var(--primary-light), white); }
.compare-strip .compare-head.win { color: var(--primary); }
.compare-strip .compare-row.w > div { color: var(--primary); }
.compare-strip .compare-row.w > div::before { color: var(--secondary); }

/* ================================================================
   FOOTER
================================================================ */
footer {
  background: #1A0A00 !important;
  border-top: 1px solid rgba(201,150,42,0.2) !important;
}
footer h4 { color: #D4C4A8; font-family: 'Playfair Display', Georgia, serif; }
footer a { color: #A89070; }
footer a:hover { color: #F0D060 !important; }
.footer-bottom { color: #7A6550; border-top-color: rgba(201,150,42,0.12) !important; }

/* ================================================================
   ONBOARDING / STEP PAGES
================================================================ */
.onboarding-sidebar { background: linear-gradient(160deg, #1A0A00, #2C1510) !important; }
.step-active { background: rgba(201,150,42,0.15) !important; border-color: rgba(201,150,42,0.4) !important; color: #F0D060 !important; }
.step-done { color: #3DAB7E !important; }

/* ================================================================
   MOBILE / RESPONSIVE OVERRIDES
================================================================ */
@media (max-width: 768px) {
  .site-header { background: rgba(26,10,0,0.98) !important; }
}