/* ============================================
   MISAL HUB — SHARED THEME (loaded LAST on every page)
   Brown = every surface / background
   Orange = text (fonts) only
   ============================================ */

:root {
  --brown-950: #1B0D05;
  --brown-900: #241109;
  --brown-800: #2E170B;
  --brown-700: #3B1E0F;
  --brown-600: #4B2913;
  --brown-500: #5E3519;
  --orange:      #FF8A1F;
  --orange-lt:   #FFB067;
  --orange-soft: #E9A066;

  /* remap the old gold palette onto the new theme */
  --gold:      #FF8A1F;
  --gold-dark: #E5750F;
  --gold-lt:   #FFA84D;
  --gold-light:#FFA84D;
  --gold-bg:   #241109;
  --gold-deep: #E5750F;
  --dark:      #FF8A1F;
  --text:      #FFB067;
  --text-lt:   #E9A066;
  --cream:     #3B1E0F;
  --cream-2:   #33190C;
  --white:     #4B2913;
  --red:       #C2570F;
  --red-dark:  #2E170B;
  --green:     #D9863F;
  --amber:     #FF8A1F;
  --olive:     #B9741F;
  --border:    rgba(255,138,31,0.28);
  --shadow:    0 10px 40px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
}

body { background: var(--brown-800); color: var(--orange-lt); }
::-webkit-scrollbar-track { background: var(--brown-900); }
::-webkit-scrollbar-thumb { background: var(--brown-500); }

/* ---------- Text: everything orange ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--orange); }
.gold, .gold-text { color: var(--orange); }
.gold-text { background: linear-gradient(120deg, #FFB067, #FF8A1F); -webkit-background-clip: text; background-clip: text; }
.section-title, .section-title.white { color: var(--orange); }
p, li, small, label { color: var(--orange-soft); }

/* text that sat on coloured/dark bands */
:is(.topbar, .navbar, .mobile-drawer, .hero, .marquee-bar, .franchise-gold-bg, .footer-gold, .cta-strip,
    .chulha-sec, .vp-sec, .extras-sec, .menu-hero, .jain-banner, .stats-cream, .about-hero)
  :is(h1, h2, h3, h4, h5, p, li, span, small, a, strong, em, label, div) { color: var(--orange-lt); }
:is(.hero, .franchise-gold-bg, .cta-strip, .chulha-sec, .menu-hero, .jain-banner) :is(h1, h2, h3, .hero-h1, .chulha-title, .mh-title, .jb-title) { color: var(--orange); }
.hero-h1 em, .mh-title em, .chulha-title span { color: var(--orange); -webkit-text-fill-color: var(--orange); }
.mb-heading, .mb-breadcrumb, .mb-breadcrumb a, .mb-breadcrumb span { color: var(--orange); }

/* ---------- Surfaces: brown ---------- */
.topbar, .marquee-bar, .extras-sec { background: var(--brown-950); }
.navbar, .navbar.scrolled { background: var(--brown-900); border-bottom: 1px solid var(--border); }
.navbar.scrolled { background: rgba(36,17,9,0.97); }
.mobile-drawer { background: var(--brown-900); }
.mobile-drawer .drawer-cta { background: var(--brown-600); border: 1px solid var(--orange); }
.nav-links a:hover, .nav-links a.active, .mobile-drawer a:hover, .mobile-drawer a.active { background: var(--brown-600); }
.nav-logo img, .footer-logo { border-color: var(--orange); }

.hero { background: linear-gradient(145deg, var(--brown-700) 0%, var(--brown-800) 60%, var(--brown-950) 100%); }
.hero-wave svg path { fill: var(--brown-800); }
.hero-bg-pattern { opacity: .6; }
.hero-eyebrow, .hero-pills span, .float-chip { background: var(--brown-600); border: 1px solid var(--border); color: var(--orange-lt); }
.hvc-inner { background: var(--brown-950); border-color: var(--border); }

.special, .testimonials, .usal-sec, .combo-sec, .sand-sec, .jain-sec, .story-section, .serving-since,
.founders-section, .gallery-section, .pitch-section, .partner-section, .shines-section, .process-section { background: var(--brown-800); }
.about, .contact, .misal-sec, .snacks-sec, .bev-sec, .thali-sec, .puri-sec, .why-section, .values-section { background: var(--brown-700); }
.stats-cream { background: var(--brown-900); }
.franchise-gold-bg, .footer-gold, .cta-strip { background: linear-gradient(145deg, var(--brown-900), var(--brown-950)); }
.chulha-sec { background: linear-gradient(135deg, var(--brown-950), var(--brown-800)); }
.vp-sec { background: var(--brown-900); }
.menu-hero { background: linear-gradient(135deg, var(--brown-950), var(--brown-800) 60%, var(--brown-950)); }
.jain-banner { background: linear-gradient(135deg, var(--brown-950), var(--brown-700)); }
.apply-section, .apply-form-wrap { background: var(--brown-700); }

/* cards */
.special-card, .testi-card, .contact-card, .af, .franchise-form-card, .mitem, .sitem, .thali-card, .snack-item,
.bev-card, .sand-item, .puri-list li, .ji, .strip-list, .combo-item, .vp-item, .tl-content, .value-card,
.founder-card, .partner-card, .why-card, .shine-card, .pv-card, .pv-badge, .fr-perk, .model-card, .chulha-items li,
.ep, .float-chip, .map-wrap, .customer-card, .sc-info, .tc-top {
  background: var(--brown-600); border-color: var(--border);
}
.testi-card.highlight, .featured-card, .featured-item, .wide-item, .tc-featured, .pc-wide, .vp-feature, .si-highlight, .si-mega, .bev-special {
  background: var(--brown-500); border-color: var(--orange);
}
.sc-img-1, .sc-img-2, .sc-img-3 { background: linear-gradient(135deg, var(--brown-950), var(--brown-700)); }
.sc-banner.red, .sc-banner.green, .sc-banner.amber { background: linear-gradient(135deg, var(--brown-500), var(--brown-950)); }
.sc-adj, .sc-noun { color: var(--orange); }
.tc-includes li, .tc-includes, .combo-item { background-color: transparent; }
.tc-includes li { background: var(--brown-700); border-color: var(--border); }
.ci-1, .ci-2, .ci-3, .ci-4 { background: var(--brown-600); border-left-color: var(--orange); }
.tl-content:hover, .special-card:hover { border-color: var(--orange); }
.timeline::before { background: linear-gradient(180deg, transparent, var(--orange), transparent); }
.tl-icon { background: var(--brown-600); color: var(--orange); box-shadow: 0 0 0 6px var(--brown-800), 0 0 0 8px var(--orange); }
.tc-quote { color: rgba(255,138,31,.25); }
.tc-av { background: var(--brown-500); color: var(--orange); border: 1px solid var(--orange); }
.testi-card.highlight .tc-av { background: var(--brown-700); }
.sc-badge, .tc-badge, .chulha-badge, .mi-ribbon, .premium-ribbon, .seasonal-tag, .mc-ribbon {
  background: var(--brown-700) !important; color: var(--orange); border: 1px solid var(--orange);
}
.pill-tag, .sec-tag, .mh-badge, .chulha-tag, .jb-cat { background: var(--brown-600); border-color: var(--border); color: var(--orange); }
.pill-tag.light { background: var(--brown-600); color: var(--orange); }
.open-badge { background: var(--brown-700); }

/* buttons */
.btn-gold, .sc-btn, .btn-franchise, .btn-white, .btn-outline-w, .btn-outline-white, .btn-outline-gold,
.btn-outline-dark, .btn-outline-gold-dark, .qp, .jain-pill, .submit-btn, .scroll-top {
  background: var(--brown-600); color: var(--orange); border: 1.5px solid var(--orange); box-shadow: none;
}
.btn-gold:hover, .sc-btn:hover, .btn-franchise:hover, .btn-white:hover, .btn-outline-w:hover, .btn-outline-white:hover,
.btn-outline-gold:hover, .btn-outline-dark:hover, .btn-outline-gold-dark:hover, .qp:hover, .jain-pill:hover, .scroll-top:hover {
  background: var(--brown-500); color: var(--orange); box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.btn-outline-w, .btn-outline-white, .btn-outline-dark { background: transparent; }
.btn-outline-dark:hover { background: var(--brown-600); }
.btn:hover, .btn-gold:hover { color: var(--orange); }

/* forms */
.franchise-form-card input, .franchise-form-card select, .franchise-form-card textarea,
.apply-form-card input, .apply-form-card select, .apply-form-card textarea {
  background: var(--brown-800); color: var(--orange); border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--orange-soft); opacity: .7; }
select option { background: var(--brown-800); color: var(--orange); }
.form-field label { color: var(--orange-lt); }

/* dividers */
.gold-divider { background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.stat-divider, .ps-div { background: var(--border); }
.sn, .ss, .ps-n { color: var(--orange); }
.footer-bottom, .footer-bottom p { color: var(--orange-soft); border-color: var(--border); }
.footer-social-icons a, .fs-btn { background: var(--brown-600); border: 1px solid var(--border); color: var(--orange); }

/* misc tinted washes that were gold/white */
.pv-bg-circle { background: var(--brown-700); border-color: var(--orange); }
.pc-dot { background: rgba(255,138,31,.08); }
.about-plate, .fs-plate { background: linear-gradient(160deg, var(--brown-500), var(--brown-950)); }
.about-ring-outer, .about-ring-mid { border-color: var(--border); }
.jain-block { border-color: var(--border); }
.ji, .jb-cat { color: var(--orange); }
.ji small { color: var(--orange-soft); }

/* ---------- Dish photos (home cards + menu items) ---------- */
.sc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sc-img .sc-banner, .sc-img .sc-mascot { z-index: 2; }
.order-row { display: flex; gap: 8px; margin: 0 18px 18px; }
.order-row a {
  flex: 1; text-align: center; padding: 10px 8px; border-radius: 50px; font-size: .78rem; font-weight: 700;
  text-decoration: none; background: var(--brown-700); color: var(--orange); border: 1.5px solid var(--orange);
  transition: all .28s;
}
.order-row a:hover { background: var(--brown-500); transform: translateY(-2px); }
.order-inline { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.dish-img { width: 68px; height: 68px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.sand-item .dish-img, .bev-card .dish-img, .thali-card .dish-img { width: 100%; height: 130px; margin-bottom: 10px; }
.thali-card .dish-img { border-radius: 0; height: 160px; margin: 0; border: 0; }
.combo-item .dish-img { width: 88px; height: 88px; }

/* ---------- Home hero video ---------- */
.hero-video-card { width: min(100%, 560px); height: auto; aspect-ratio: 16 / 9; }
.hvc-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hvc-inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-grid { grid-template-columns: 1.15fr 1fr; }
.stat-block .sn { font-size: 2.4rem; }

/* ---------- Best sellers: photo cards, 3 across ---------- */
@media (min-width: 1025px) { .special-grid { grid-template-columns: repeat(3, 1fr); } }
.special-card .sc-img { height: auto; aspect-ratio: 1 / 1; }
.special-card .sc-photo { position: static; display: block; }
.special-card .sc-info { padding-bottom: 22px; }

/* ---------- Founders ---------- */
.founders-two { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.founder-photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 640px) { .founders-two { grid-template-columns: 1fr; } }

/* ---------- Home hero: full-bleed video background ---------- */
.hero { min-height: min(88vh, 780px); display: flex; flex-direction: column; justify-content: center; padding: 0; background: var(--brown-950); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(27,13,5,.88) 0%, rgba(27,13,5,.6) 45%, rgba(27,13,5,.25) 100%),
              linear-gradient(0deg, rgba(46,23,11,1) 0%, rgba(46,23,11,0) 22%); }
.hero-grid { position: relative; z-index: 2; grid-template-columns: 1fr; padding: 90px 24px 110px; }
.hero-text { max-width: 620px; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
@media (max-width: 1024px) {
  .hero-grid { text-align: left; }
  .hero-btns, .hero-pills { justify-content: flex-start; }
  .hero-overlay { background: linear-gradient(0deg, rgba(27,13,5,.85), rgba(27,13,5,.55)); }
}
.hero-text { text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.hero-text .btn, .hero-pills span, .hero-eyebrow { text-shadow: none; }