/* ============================================================
   Masala Home — custom styles
   The palette below is the single place to change brand colours.
   Tailwind (see index.html config) mirrors these values.
   ============================================================ */

:root {
  /* Spice colours */
  --turmeric: #F2A900;
  --chilli:   #C1121F;
  --kashmiri: #9E1B32;
  --garam:    #6B3E26;
  --dhaniya:  #6A8E23;
  --saffron:  #E8710A;

  /* Base */
  --bg:   #FFF6E5;
  --ink:  #2B1B12;
  --cream-deep: #F7E8C9;

  /* Type */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Mukta", "Segoe UI", system-ui, sans-serif;
  --font-telugu: "Noto Sans Telugu", "Hind Guntur", var(--font-body);

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tint-speed: 520ms; /* signature 400–600ms background shift */
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-head { font-family: var(--font-head); font-weight: 600; }

/* Telugu text — Noto Sans Telugu (falls back to Hind Guntur) */
.te {
  font-family: var(--font-telugu);
  font-size: 0.95em;
  line-height: 1.6;
}

/* ---------- Signature interaction: spice colour tint ---------- */
/* Any element with .tint-surface smoothly shifts its background colour.
   main.js sets the inline background-color from the hovered/selected spice. */
.tint-surface {
  transition: background-color var(--tint-speed) var(--ease-soft);
}

/* Swatch buttons in the colour strip */
.spice-swatch {
  transition: transform 240ms var(--ease-soft), box-shadow 240ms var(--ease-soft);
  outline-offset: 3px;
}
.spice-swatch:hover,
.spice-swatch:focus-visible { transform: translateY(-4px); }
.spice-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px currentColor;
}
.spice-swatch span:first-child {
  text-align: center;
}

/* ---------- Patterns (low-opacity section backgrounds) ---------- */
/* Red Wheel mandala — radial rosette built with conic + radial gradients */
.pattern-mandala {
  background-image:
    radial-gradient(circle at center, rgba(193,18,31,0.16) 0 2px, transparent 3px),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(193,18,31,0.10) 0deg 6deg,
      transparent 6deg 12deg);
}
.pattern-mandala-dark {
  background-image:
    radial-gradient(circle at center, rgba(232,113,10,0.30) 0 2px, transparent 3px),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(232,113,10,0.16) 0deg 6deg,
      transparent 6deg 12deg);
}

/* Subtle leaf pattern — small two-tone leaf motif, tiled */
.pattern-leaf {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 8c10 8 14 20 0 32-14-12-10-24 0-32z' fill='none' stroke='%236A8E23' stroke-opacity='0.18' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 64px 64px;
}

/* ---------- Category filter pills (Products page) ---------- */
.filter-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1.5px solid rgba(43,27,18,0.18);
  background: rgba(255,255,255,0.6);
  color: var(--ink);
  border-radius: 9999px; padding: 0.45rem 0.95rem;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background-color 200ms var(--ease-soft), border-color 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.filter-btn::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 9999px;
  background: var(--dot, var(--garam)); flex: none;
}
.filter-btn:hover { border-color: currentColor; }
.filter-btn[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}

/* ---------- Product cards (borderless) ----------
   No card background, border or shadow: the pack sits directly on the page
   background and whitespace separates the columns. */
.product-card { text-align: center; }
.product-card-media { position: relative; display: grid; place-items: center; }
.product-card-media img {
  transition: transform 420ms var(--ease-soft);
  will-change: transform;
}
.product-card:hover .product-card-media img,
.product-card:focus-within .product-card-media img { transform: scale(1.04); }

/* Soft spray of the spice colour behind the pack */
.product-card-glow {
  position: absolute; inset: 10% 6% 6%;
  background: radial-gradient(closest-side, var(--accent, #F2A900), transparent 72%);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 420ms var(--ease-soft);
  pointer-events: none;
}
.product-card:hover .product-card-glow,
.product-card:focus-within .product-card-glow { opacity: 0.3; }

/* "View details" label on hover */
.product-card-cta {
  position: absolute; left: 50%; bottom: 6px;
  transform: translate(-50%, 6px);
  opacity: 0;
  transition: opacity 300ms var(--ease-soft), transform 300ms var(--ease-soft);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); background: rgba(255, 246, 229, 0.9);
  padding: 0.3rem 0.7rem; border-radius: 9999px; white-space: nowrap;
}
.product-card:hover .product-card-cta,
.product-card:focus-within .product-card-cta { opacity: 1; transform: translate(-50%, 0); }

/* Product detail: gallery thumbnails */
.product-thumb {
  width: 72px; height: 72px; padding: 6px; cursor: pointer;
  background: rgba(255, 255, 255, 0.7); border-radius: 0.75rem;
  opacity: 0.72;
  transition: opacity 240ms var(--ease-soft), transform 240ms var(--ease-soft);
}
.product-thumb:hover,
.product-thumb.is-active { opacity: 1; transform: translateY(-2px); }

/* ---------- Home add-ons ---------- */
/* Dish strip: horizontal scroll of dish + the pack that makes it */
.dish-card {
  flex: 0 0 auto; width: 15rem; text-align: center; padding-bottom: 1.25rem;
  transition: transform 300ms var(--ease-soft);
}
.dish-card:hover { transform: translateY(-4px); }
/* Dish strip: continuous right-to-left scroll. The track holds two identical
   groups so translateX(-50%) loops seamlessly, matching the marquee pattern.
   JS duplicates the group only when motion is allowed. */
.dish-strip { overflow: hidden; }
.dish-track { will-change: transform; }
.dish-strip.is-scrolling .dish-track { animation: dish-scroll 48s linear infinite; }
.dish-strip.is-scrolling:hover .dish-track,
.dish-strip.is-scrolling:focus-within .dish-track { animation-play-state: paused; }
@keyframes dish-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Red Wheel range: cards on the dark kashmiri panel ----------
   Every card is a flex column so the Buy Now button can be pinned to the
   bottom with margin-top:auto. The image well has a fixed height on every
   breakpoint and the pack is object-fit contained inside it, so nothing can
   overlap the text below and all three packs share one baseline. */
.rw-card {
  position: relative; text-align: center;
  display: flex; flex-direction: column;
  height: 100%;                     /* equal height across the grid row */
  padding: 1.5rem 1rem; border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  transition: background 300ms var(--ease-soft), transform 300ms var(--ease-soft);
  border: none;
}
.rw-card:hover, .rw-card:focus-within { background: rgba(255, 255, 255, 0.14); transform: translateY(-4px); }

/* Text block grows to fill the card so the button lands at the bottom. */
.rw-body { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Image well: fixed height, centred, no background/border/padding/overflow. */
.rw-media {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  height: 280px;                     /* mobile */
  margin-bottom: 1.5rem;             /* >= 24px gap before the text */
  background: none; border: none; padding: 0; border-radius: 0; overflow: hidden;
}
.rw-media img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;               /* never taller than the well */
  transition: transform 420ms var(--ease-soft); will-change: transform;
}
.rw-card:hover .rw-media img, .rw-card:focus-within .rw-media img { transform: scale(1.03); }
@media (min-width: 768px) { .rw-media { height: 340px; } }

/* Text sits in normal flow, no absolute positioning or negative margins. */
/* Matches the previous markup: h3 (font-head, 600) at text-lg, and .te (0.95em of text-sm). */
.rw-name { font-family: var(--font-head); font-size: 1.125rem; line-height: 1.25; font-weight: 600; }
.rw-te {
  font-family: var(--font-telugu); font-size: 0.95em; line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}
.rw-tagline { font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); margin-top: 0.5rem; }

/* Size row always present; min-height keeps the height identical when empty. */
.rw-sizes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.375rem; margin-top: 0.75rem; min-height: 1.75rem;
}
.rw-size {
  font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 9999px;
  color: rgba(255, 255, 255, 0.95);
  border: none;                       /* plain text, no chip outline */
}

/* Dev-only "Image pending" badge: top-left of the CARD, above the image. */
.rw-flag {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  color: #FFF6E5; background: #E8710A;
  white-space: nowrap;                /* never clipped */
}

.rw-buy {
  display: inline-block; width: 100%; max-width: 10rem;
  margin: 1.5rem auto 0;              /* auto top pushes it to the card bottom */
  flex: 0 0 auto;
  text-align: center; padding: 0.5rem 1rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 700;
  color: #2B1B12; background: #FFF6E5;
  transition: background 200ms var(--ease-soft), transform 200ms var(--ease-soft);
}
.rw-buy:hover { background: #ffffff; transform: translateY(-1px); }

/* Customer reviews: compact single card, quote above a one-line credit. */
.tst-nav {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 9999px;
  color: var(--ink); background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(43, 27, 18, 0.15);
  transition: background 200ms var(--ease-soft), transform 200ms var(--ease-soft);
}
.tst-nav:hover { background: #fff; transform: translateY(-1px); }
[data-testimonial-dots] button {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  transition: background 200ms var(--ease-soft);
}
/* Real dish photo. object-fit: contain so no dish is ever cropped. */
.dish-ph-img {
  display: block; height: 11rem; border-radius: 1rem; overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(43, 27, 18, 0.08);
}
.dish-ph-img img {
  width: 100%; height: 100%; object-fit: contain; padding: 0.5rem;
  transition: transform 300ms var(--ease-soft);
}
.dish-card:hover .dish-ph-img img { transform: scale(1.05); }

/* Slow rolling marquee of dish names */
.marquee { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; animation: marquee 48s linear infinite; }
.marquee-group { display: inline-flex; align-items: center; gap: 2rem; padding-right: 2rem; font-family: var(--font-head); font-size: 1.4rem; }
.marquee-group > span { opacity: 0.55; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* FAQ accordion */
.faq-item { background: rgba(255, 255, 255, 0.7); border-radius: 1rem; padding: 1rem 1.25rem; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--chilli); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }

/* Placeholder content the client still has to replace */
.placeholder-flag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--saffron); background: rgba(232, 113, 10, 0.14);
  padding: 0.25rem 0.6rem; border-radius: 9999px;
}

/* Coming-soon products: names only, no card and no image */
.upcoming-name {
  font-weight: 600; font-size: 0.9rem; line-height: 1.2;
  padding: 0.5rem 1rem; border-radius: 9999px;
  color: var(--accent, var(--ink));
  border: 1.5px solid currentColor;
  opacity: 0.9;
  }

/* The list is filled in by JS after load. Without a reserved min-height it
   grows from 0 and pushes the "custom blends" block down, which is the main
   source of layout shift on the products page at mobile widths. */
[data-upcoming-list] { min-height: 175px; }
@media (min-width: 640px) { [data-upcoming-list] { min-height: 84px; } }
@media (min-width: 1024px) { [data-upcoming-list] { min-height: 38px; } }

/* Same reason: the category filter bar is injected by JS, so reserve the
   height it will occupy or the whole grid jumps down on first paint. */
[data-filter-bar] { min-height: 320px; }
@media (min-width: 640px) { [data-filter-bar] { min-height: 180px; } }
@media (min-width: 1024px) { [data-filter-bar] { min-height: 86px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; border-radius: 9999px;
  padding: 0.8rem 1.6rem; line-height: 1;
  transition: transform 200ms var(--ease-soft), background-color 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--chilli); color: #fff; }
.btn-primary:hover { background: #9E1B32; }
.btn-whatsapp { background: #25D366; color: #06331a; }
.btn-whatsapp:hover { background: #1ebe5a; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* Buy Now on product cards — picks up each product's --accent colour */
.btn-buy { background: transparent; color: var(--accent, var(--chilli)); border: 2px solid var(--accent, var(--chilli)); }
.btn-buy:hover { background: var(--accent, var(--chilli)); color: var(--bg); }

/* ---------- Scroll reveal (subtle, light) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tint-surface { transition: none; }
  .product-card, .btn, .spice-swatch { transition: none; }
  .marquee-track { animation: none; }
  .dish-strip.is-scrolling .dish-track { animation: none; }
  .dish-strip { overflow-x: auto; }
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--ink); color: var(--bg);
  padding: 0.6rem 1rem; border-radius: 0.5rem; z-index: 100;
  transition: top 200ms var(--ease-soft);
}
.skip-link:focus { top: 1rem; }

/* Focus visibility */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===================== HERO SECTION ===================== */
.hero-bg {
  background-image: url('../img/hero.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 38vw;
}

.hero-overlay {
  background: linear-gradient(to right, rgba(43, 27, 18, 0.88) 0%, rgba(43, 27, 18, 0.6) 50%, rgba(43, 27, 18, 0.15) 100%);
}

.hero-heading {
  color: #FFF6E5;
}

.hero-subheading {
  color: #F2D9A8;
}

.hero-lead {
  color: #FFF6E5;
}

.hero-te {
  color: #F2D9A8;
}

.hero-tagline {
  color: #FFF6E5;
}

.hero-badge {
  background-color: rgba(0, 0, 0, 0.35);
  color: #86efac;
}

.hero-badge-dot {
  background-color: #86efac;
}

/* Mobile (< 768px): text overlaid on hero image with dark tint */
@media (max-width: 767px) {
  .hero-bg {
    background-position: 70% center;
    min-height: auto;
  }
  .hero-overlay {
    background: linear-gradient(to bottom, rgba(43, 27, 18, 0.88) 0%, rgba(43, 27, 18, 0.78) 60%, rgba(43, 27, 18, 0.65) 100%);
  }
}