/* ============================================================
   Spice & Bean — "Warm Appetite" public theme.
   Editorial food-magazine meets neighbourhood café. Augments Bootstrap 5.
   ============================================================ */
:root {
    --rp-primary: #C0492B;   /* terracotta / paprika */
    --rp-primary-dark: #9E3A20;
    --rp-accent: #E0A52E;    /* saffron / turmeric */
    --rp-dark: #2B1D14;      /* espresso */
    --rp-cream: #FBF6EE;     /* cream paper */
    --rp-cream-2: #F3EADb;
    --rp-green: #5B7553;     /* herb */
    --rp-ink: #34281F;
    --rp-muted: #8A7A6A;
    --rp-border: #E9DECC;
    --rp-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
    --rp-sans: 'Inter', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rp-bn: 'Hind Siliguri', 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--rp-sans);
    color: var(--rp-ink);
    background: var(--rp-cream);
    line-height: 1.65;
}
[lang="bn"] body, .lang-bn { font-family: var(--rp-bn); }

h1, h2, h3, h4, .display-head, .dish-name, .section-head h2 {
    font-family: var(--rp-serif);
    color: var(--rp-dark);
    font-weight: 600;
    letter-spacing: -.01em;
}
a { color: var(--rp-primary); text-decoration: none; }
a:hover { color: var(--rp-primary-dark); }

.text-primary-warm { color: var(--rp-primary) !important; }
.bg-cream { background: var(--rp-cream) !important; }
.bg-cream-2 { background: var(--rp-cream-2) !important; }
.bg-espresso { background: var(--rp-dark) !important; color: #F4ECE0; }

/* ---- Section rhythm ---- */
.section { padding: 84px 0; }
.section-sm { padding: 52px 0; }
.section-head { margin-bottom: 2.4rem; }
.section-head .eyebrow {
    font-family: var(--rp-sans); text-transform: uppercase; letter-spacing: .18em;
    font-size: .76rem; font-weight: 600; color: var(--rp-primary);
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-top: .35rem; }
.draw-rule { display: inline-block; width: 64px; height: 3px; background: var(--rp-accent); border-radius: 3px; }

/* ---- Buttons ---- */
.btn-warm { background: var(--rp-primary); border-color: var(--rp-primary); color: #fff; }
.btn-warm:hover { background: var(--rp-primary-dark); border-color: var(--rp-primary-dark); color: #fff; }
.btn-outline-warm { border: 1.5px solid var(--rp-primary); color: var(--rp-primary); background: transparent; }
.btn-outline-warm:hover { background: var(--rp-primary); color: #fff; }
.btn-accent { background: var(--rp-accent); border-color: var(--rp-accent); color: var(--rp-dark); }
.btn-accent:hover { filter: brightness(.96); color: var(--rp-dark); }
.btn-pill { border-radius: 50rem; padding-inline: 1.4rem; }

/* ---- Navbar ---- */
.site-nav { background: rgba(251,246,238,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rp-border); transition: padding .3s ease, box-shadow .3s ease; }
.site-nav.nav-shrink { box-shadow: 0 6px 22px rgba(43,29,20,.08); padding-top: 0; padding-bottom: 0; }
.navbar-brand { min-width: 0; font-family: var(--rp-serif); font-weight: 700; color: var(--rp-dark); }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-nav .nav-link { color: var(--rp-ink); font-weight: 500; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--rp-primary); }
.notice-bar { font-size: .9rem; }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.active { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,29,20,.78), rgba(43,29,20,.30)); }
.hero-inner { position: relative; min-height: 86vh; display: flex; align-items: center; }
.hero-card { background: rgba(251,246,238,.95); border-radius: 14px; padding: 2.2rem; box-shadow: 0 24px 60px rgba(43,29,20,.25); }

/* ---- Cards (NEVER height:100% on base card — use .h-100 inside a grid row) ---- */
.card, .dish-card, .menu-card, .category-card, .chef-card, .offer-card, .event-card, .blog-card, .testi-card {
    background: #fff; border: 1px solid var(--rp-border); border-radius: 16px; overflow: hidden;
}
.dish-card .card-img-top, .category-card img, .blog-card img, .event-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.chef-card .plate-img, .plate-img { border-radius: 50%; object-fit: cover; aspect-ratio: 1 / 1; width: 100%; }
.dish-name { font-size: 1.06rem; }
.price { font-family: var(--rp-serif); font-weight: 700; color: var(--rp-primary); white-space: nowrap; }

/* Dotted price leader (classic menu typesetting) */
.menu-leader { display: flex; align-items: baseline; gap: .5rem; }
.menu-leader .lead-dots { flex: 1 1 auto; border-bottom: 2px dotted var(--rp-border); transform: translateY(-.25rem); min-width: 16px; }

/* Dietary / spice chips */
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; padding: .2rem .6rem; border-radius: 50rem; background: var(--rp-cream-2); color: var(--rp-ink); }
.chip-spice i { color: var(--rp-primary); }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tab-scroll { display: flex; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; }
.tab-scroll::-webkit-scrollbar { height: 5px; }
.tab-scroll .tab { white-space: nowrap; }

/* Open-now pill */
.open-pill { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; padding: .25rem .7rem; border-radius: 50rem; }
.open-pill.is-open { background: rgba(46,125,82,.12); color: #2E7D52; }
.open-pill.is-closed { background: rgba(192,73,43,.12); color: var(--rp-primary); }

/* ---- Footer ---- */
.site-footer { background: var(--rp-dark); color: #E8DCCB; border-top: 4px solid var(--rp-primary); }
.site-footer a { color: #E8DCCB; }
.site-footer a:hover { color: var(--rp-accent); }
.site-footer h5 { color: #fff; font-family: var(--rp-serif); }
.footer-credit a { color: var(--rp-accent); }

/* ---- Floating actions ---- */
.float-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; display: flex; flex-direction: column; gap: .6rem; }
.float-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 20px rgba(43,29,20,.25); font-size: 1.3rem; }
.float-btn.wa { background: #25D366; }
.float-btn.call { background: var(--rp-primary); }
.float-btn.cart { background: var(--rp-dark); position: relative; }
.float-btn .cart-badge { position: absolute; top: -4px; right: -4px; background: var(--rp-accent); color: var(--rp-dark); font-size: .7rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 50rem; display: grid; place-items: center; padding: 0 .2rem; }
.fa-top { position: fixed; left: 1rem; bottom: 1rem; z-index: 1030; width: 46px; height: 46px; border-radius: 50%; background: var(--rp-primary); color: #fff; border: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.fa-top.show { opacity: 1; pointer-events: auto; }

/* ---- Rich text (blog post / static page body) ---- */
.page-content { line-height: 1.85; color: var(--rp-ink, #3a2e24); }
.page-content > :first-child { margin-top: 0; }
.page-content h2, .page-content h3, .page-content h4 { font-family: var(--rp-serif); margin-top: 1.6rem; margin-bottom: .75rem; }
.page-content p { margin-bottom: 1.1rem; }
.page-content img { border-radius: 12px; margin: 1rem 0; }
.page-content ul, .page-content ol { margin-bottom: 1.1rem; padding-left: 1.4rem; }
.page-content blockquote { border-left: 4px solid var(--rp-primary); padding: .25rem 0 .25rem 1rem; margin: 1.25rem 0; color: #6b5a4b; font-style: italic; }
.page-content a { color: var(--rp-primary); }

/* ---- Opening hours table (branches) ---- */
.hours-table th, .hours-table td { border-color: rgba(43,29,20,.08); padding: .4rem .25rem; }

/* ============================================================
   Global mobile safety-net (PP gotchas #29 / #31).
   ============================================================ */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
.container, .container-fluid { overflow-wrap: break-word; }
h1, h2, h3, h4, p, a, span, li { overflow-wrap: break-word; }
.page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.min-w-0 { min-width: 0; }

@media (max-width: 991.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
    .section { padding: 60px 0; }
    .hero-inner { min-height: 70vh; }
}
@media (max-width: 767px) {
    .section, .page-hero { padding: 44px 0; }
    .hero-card { padding: 1.5rem; }
}
@media (max-width: 480px) {
    .float-btn { width: 46px; height: 46px; font-size: 1.15rem; }
}

@media print {
    .site-nav, .site-footer, .float-stack, .fa-top { display: none !important; }
}