/* ═══════════════════════════════════════════════════════════════════
   Rekha's Kitchen · Brand theme (logo browns, cream and tan)
   Loaded after style.css on every page. Page colours were moved to the
   same palette; this file adds the logo, script accents and motion.
═══════════════════════════════════════════════════════════════════ */
:root {
  --rk-espresso: #24130A;
  --rk-cocoa:    #3B1E0E;
  --rk-brown:    #6B3A1E;
  --rk-caramel:  #8B5A2B;
  --rk-tan:      #C9A97A;
  --rk-sand:     #E3CBA4;
  --rk-cream:    #FBF5EC;
  --rk-ease:     cubic-bezier(.2,.9,.25,1);
  --nav-h:       76px !important;
}

::selection { background: var(--rk-sand); color: var(--rk-espresso); }
html { scrollbar-color: var(--rk-tan) var(--rk-cream); }

/* ── Logo ─────────────────────────────────────────────────────────── */
.rk-logo { display: block; width: auto; height: auto; max-width: none; }
.rk-logo--nav    { height: 66px; transition: transform .35s var(--rk-ease); filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
.brand:hover .rk-logo--nav { transform: rotate(-3deg) scale(1.04); }
.rk-logo--footer { height: 120px; margin-bottom: 4px; }
.rk-logo--auth   { height: 96px; }
.rk-logo--admin  { height: 64px; margin-bottom: 4px; }
.admin-brand { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
@media (max-width: 600px) { .rk-logo--nav { height: 56px; } .rk-logo--footer { height: 100px; } }

/* ── Type: script accents like the "Rekha's" in the logo ─────────── */
h1 em, h2 em, h3 em {
  font-family: 'Kaushan Script', 'Playfair Display', cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
}
.hero h1 em { color: var(--rk-sand) !important; }

/* ── Buttons: warm lift on hover ─────────────────────────────────── */
.btn { transition: transform .25s var(--rk-ease), box-shadow .25s ease, background .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover, .btn-saffron:hover { box-shadow: 0 10px 28px rgba(139,90,43,.35); }
.btn:active { transform: translateY(0) scale(.98); }

/* ── Cards: gentle lift and photo zoom ───────────────────────────── */
.dish-card { transition: transform .35s var(--rk-ease), box-shadow .35s ease; }
.dish-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(36,19,10,.14); }
.dish-card .dish-img img { transition: transform .8s var(--rk-ease); }
.dish-card:hover .dish-img img { transform: scale(1.07); }
.cat-tile { transition: transform .3s var(--rk-ease), box-shadow .3s ease, background .3s ease; }
.cat-tile:hover { transform: translateY(-4px) rotate(-1deg); }

/* ── Home hero: slow Ken Burns on the photo, warm grade ──────────── */
.hero-bg { animation: rkKen 24s ease-in-out infinite alternate; filter: sepia(.18) saturate(1.05); will-change: transform; }
@keyframes rkKen {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}
.h-card { transition: transform .35s var(--rk-ease), box-shadow .35s ease; }
.h-card:hover { transform: translateX(-6px); }

/* ── Scroll reveal (classes added by rekha-theme.js) ─────────────── */
.rk-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s var(--rk-ease); transition-delay: var(--rk-d, 0s); }
.rk-reveal.rk-in { opacity: 1; transform: none; }

/* ── Little steam curl next to section headings on the home page ─── */
.rk-steam-h { position: relative; }

/* ── Footer warmth ───────────────────────────────────────────────── */
.footer { background: linear-gradient(180deg, var(--rk-cocoa), var(--rk-espresso)) !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .rk-reveal { opacity: 1; transform: none; transition: none; }
  .dish-card, .btn, .cat-tile, .h-card { transition: none; }
}

/* ═══ Light cream navbar with the brown logo ═══════════════════════ */
.navbar { background: rgba(251,245,236,.9) !important; border-bottom: 1px solid rgba(107,58,30,.12) !important; }
.navbar.scrolled { background: rgba(251,245,236,.97) !important; box-shadow: 0 6px 30px rgba(36,19,10,.10) !important; }
.navbar .rk-logo--nav { filter: none; }
.navbar .nav-links a { color: rgba(59,30,14,.72) !important; }
.navbar .nav-links a:hover, .navbar .nav-links a.active { color: var(--rk-cocoa) !important; background: rgba(139,90,43,.09) !important; }
.navbar .nav-links a::after { background: var(--rk-caramel) !important; }
.navbar .icon-btn { color: var(--rk-brown) !important; background: #fff !important; border-color: rgba(107,58,30,.16) !important; }
.navbar .icon-btn:hover { background: var(--rk-sand) !important; color: var(--rk-cocoa) !important; }
.navbar .icon-btn .badge { border-color: var(--rk-cream) !important; background: #C0392B !important; }
.navbar .btn-ghost { background: transparent !important; color: var(--rk-cocoa) !important; border: 1.5px solid rgba(107,58,30,.3) !important; }
.navbar .btn-ghost:hover { background: var(--rk-cocoa) !important; color: #fff !important; }
.navbar .user-pill { color: var(--rk-cocoa) !important; background: #fff !important; border: 1px solid rgba(107,58,30,.16) !important; }
.navbar .hamburger { background: #fff !important; border: 1px solid rgba(107,58,30,.16) !important; }
.navbar .hamburger span { background: var(--rk-cocoa) !important; }
.mobile-nav { background: rgba(251,245,236,.98) !important; border-bottom: 1px solid rgba(107,58,30,.12); }
.mobile-nav a { color: var(--rk-cocoa) !important; }
.mobile-nav a:hover { background: rgba(139,90,43,.09) !important; }
.mobile-nav-divider { background: rgba(107,58,30,.12) !important; }
.mobile-nav .btn-ghost { background: transparent !important; color: var(--rk-cocoa) !important; border: 1.5px solid rgba(107,58,30,.3) !important; }

/* Primary actions: caramel, with a fresh leaf accent for small highlights */
:root { --rk-leaf: #5E8C3A; }
.btn-primary, .btn-saffron { background: linear-gradient(135deg, #A86B34, #7A4321) !important; color: #fff !important; }

/* ═══ Home hero: full-width salad video, lighter warm overlay ════════ */
.hero { background: #2A1408 !important; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-bg { z-index: 0; opacity: .85 !important; }
.hero-overlay {
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(36,19,10,.86) 0%, rgba(36,19,10,.62) 42%, rgba(36,19,10,.08) 75%, rgba(36,19,10,0) 100%),
    linear-gradient(180deg, rgba(36,19,10,.25) 0%, rgba(36,19,10,0) 30%, rgba(36,19,10,0) 70%, rgba(36,19,10,.45) 100%) !important;
}
.hero-blob { display: none !important; }
.hero .eyebrow { color: #F6E7CF !important; background: rgba(251,245,236,.12) !important; border-color: rgba(251,245,236,.3) !important; backdrop-filter: blur(6px); }
.hero .h-card { background: rgba(251,245,236,.14) !important; border: 1px solid rgba(251,245,236,.28) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero .h-card-badge { background: var(--rk-leaf) !important; color: #fff !important; }
.hero .btn-ghost { background: rgba(251,245,236,.12) !important; color: #fff !important; border: 1.5px solid rgba(251,245,236,.55) !important; backdrop-filter: blur(6px); }
.hero .btn-ghost:hover { background: #fff !important; color: var(--rk-cocoa) !important; }
.hero-stats span { color: #fff !important; }
@media (max-width: 860px) {
  .hero-overlay { background: linear-gradient(180deg, rgba(36,19,10,.6), rgba(36,19,10,.5) 50%, rgba(36,19,10,.75)) !important; }
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
/* photo fallback matches the first video frame while it loads */
.hero-bg { background-image: url('../video/rk-hero-poster.jpg') !important; background-position: center !important; }