/* Mylapore Tiffin Room: banana-leaf green, turmeric and brass.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --soft: #EEF4E8;
  --ink: #1F2416;
  --muted: #5B6152;
  --line: #E1E6D8;
  --line-strong: #C9D2BC;
  --leaf: #1E5B37;
  --leaf-deep: #143F26;
  --turmeric: #F2B705;
  --brass: #A8752E;
  --brand: #1E5B37;
  --brand-hover: #143F26;
  --brand-ink: #FFFFFF;
  --brand-text: #1E5B37;
  --accent: #F2B705;
  --accent-ink: #1F2416;
  --eyebrow: #8A5E1F;
  --ok: #1C8A3A;
  --head: "Rozha One", Georgia, serif;
  --body: "Hind Madurai", system-ui, sans-serif;
  --radius: 10px;
  --radius-lg: 18px;
  --wrap: 1180px;
  --gap: 20px;
  --tools-top: 76px;
}
body { font-size: 1.04rem; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.005em; }
.eyebrow { letter-spacing: .14em; }
.btn { font-weight: 600; }
.btn svg { width: 20px; height: 20px; }
.btn-turmeric { background: var(--turmeric); color: var(--ink); }
.btn-turmeric:hover { background: #FFC92E; }
.btn-outline-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline-light:hover { border-color: #fff; }
.kolam { width: 40px; height: 40px; color: var(--turmeric); }
.text-link { color: var(--leaf); font-weight: 600; text-underline-offset: 5px; }

/* ---------- header ---------- */
.header { background: var(--leaf); color: #fff; }
.header .wrap { min-height: 76px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.logo span { display: grid; line-height: 1.05; }
.logo b { font: 400 1.65rem var(--head); }
.logo small { font-size: .72rem; letter-spacing: .08em; color: #CFE3C8; }
.nav a { color: #E4F0DE; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav a[aria-current="page"] { color: var(--turmeric); font-weight: 600; }
.header .btn-primary { background: var(--turmeric); color: var(--ink); }
.header .btn-primary:hover { background: #FFC92E; }
.header .cart-count { background: var(--leaf); color: #fff; }
.nav-toggle { border-color: rgba(255,255,255,.4); color: #fff; }
:root { --menu-bg: var(--leaf); }

/* ---------- hero + serving board (signature) ---------- */
.hero { padding-block: clamp(40px, 6vw, 80px); background: radial-gradient(circle at 12% 0%, #FFF4C9 0, transparent 38%), var(--soft); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr minmax(0, 470px); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(2.7rem, 6vw, 4.8rem); line-height: 1.02; margin: 14px 0 20px; color: var(--leaf-deep); }
.hero h1 em { display: block; font-style: normal; color: var(--brass); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 600; color: var(--muted); }

.board { position: relative; padding: 26px 26px 20px; border-radius: 22px; background: #173A26; color: #F5F1E2; box-shadow: inset 0 0 0 10px #4A2F17, inset 0 0 0 12px #6E4A26, 0 30px 60px -30px rgba(20,63,38,.8); }
.board::after { content: ""; position: absolute; inset: 12px; border-radius: 12px; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%); pointer-events: none; }
.board-title { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; font: 400 1.4rem var(--head); color: var(--turmeric); }
.board-title .kolam { width: 30px; height: 30px; }
.board-list { list-style: none; display: grid; gap: 8px; }
.session { position: relative; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(245,241,226,.25); opacity: .62; transition: opacity .3s, background .3s; }
.session h3 { font-size: 1.35rem; color: #fff; }
.s-time { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #C9DCC0; }
.s-items { font-size: .95rem; color: #E7E1CC; }
.s-badge { display: none; position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: var(--turmeric); color: var(--ink); font-size: .74rem; font-weight: 700; }
.session.is-now { opacity: 1; background: rgba(242,183,5,.12); border: 1px solid var(--turmeric); }
.session.is-now .s-badge { display: block; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .55; } }
.board-now { padding: 12px 6px 0; font-size: .92rem; color: #C9DCC0; }

/* ---------- favourites ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.sec-head h2, .sec-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--leaf-deep); }
.fav-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .fav-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fav-grid { grid-template-columns: 1fr; } }
.fav { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.fav-art { background: #FFF6D8; padding: 14px 24px 0; }
.fav:nth-child(3n+2) .fav-art { background: var(--soft); }
.fav:nth-child(3n) .fav-art { background: #F6EBDD; }
.fav-body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.fav-body h3 { display: flex; align-items: center; gap: 8px; font: 700 1.15rem var(--body); }
.fav-body p { color: var(--muted); font-size: .95rem; }
.fav-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; }
.photo-note { margin-top: 14px; }

/* ---------- meals on a leaf ---------- */
.leaf-section { background: var(--leaf-deep); color: #F5F1E2; }
.leaf-section .eyebrow { color: var(--turmeric); }
.leaf-section h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 10px 0 14px; color: #fff; }
.leaf-section .lede { color: #D6E3CF; }
.leaf-section .btn-primary { background: var(--turmeric); color: var(--ink); }
.leaf-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .leaf-grid { grid-template-columns: 1fr; } }
.leaf-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center; }
@media (max-width: 520px) { .leaf-wrap { grid-template-columns: 1fr; } }
.leaf { width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.leaf-key { display: grid; gap: 6px; padding-left: 1.4em; font-size: .95rem; }
.leaf-key li::marker { color: var(--turmeric); font-weight: 700; }

/* ---------- craft, reviews ---------- */
.craft-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 26px; }
@media (max-width: 860px) { .craft-grid { grid-template-columns: 1fr; } }
.craft-grid li { padding: 24px; border-radius: var(--radius-lg); background: var(--soft); border-top: 4px solid var(--brass); }
.craft-grid h3 { font-size: 1.5rem; color: var(--leaf-deep); margin-bottom: 8px; }
.craft-grid p { color: var(--muted); }
.quote-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 24px; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-grid blockquote { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; border-radius: var(--radius-lg); background: #FFF6D8; }
.quote-grid p { font-size: 1.08rem; }
.quote-grid footer { font-weight: 600; color: var(--muted); font-size: .9rem; }

/* ---------- inner pages ---------- */
.page-head { background: var(--soft); border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.page-head h1 { color: var(--leaf-deep); }
.menu-cat-head h2 { color: var(--leaf-deep); }
.menu-cat-head { border-bottom-color: var(--leaf); }
.tag { background: #FFF1BF; color: #6B4A00; }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 64px); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 16px; font-size: 1.06rem; }
.prose h2 { font-size: 2rem; color: var(--leaf-deep); }
.promise { list-style: none; display: grid; gap: 12px; }
.promise li { padding: 16px 18px; border-radius: var(--radius); background: var(--soft); border-left: 4px solid var(--turmeric); }
.promise b { display: block; font: 400 1.3rem var(--head); color: var(--leaf-deep); }

/* ---------- CTA + footer ---------- */
.cta-band { background: var(--leaf); color: #fff; padding-block: clamp(40px, 6vw, 72px); }
.cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.cta-band p { margin-top: 6px; color: #D6E3CF; max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer { position: relative; background: var(--leaf-deep); color: #D6E3CF; --footer-line: rgba(255,255,255,.14); padding-top: 0; }
.kolam-band { height: 22px; margin-bottom: 48px; background: radial-gradient(circle, var(--turmeric) 2px, transparent 2.5px) 0 0 / 22px 22px, var(--leaf); opacity: .9; }
.footer h2 { color: var(--turmeric); opacity: 1; }
.f-about { margin: 14px 0 10px; max-width: 34ch; }
.footer .credit a { color: #fff; }

/* ---------- coffee page ---------- */
.brew-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 3px solid var(--brass); }
.brew-steps li { padding: 22px 22px 0 0; }
.brew-steps li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.b-time { font-weight: 700; color: var(--brass); letter-spacing: .06em; }
.brew-steps h2 { font-size: 1.8rem; color: var(--leaf-deep); margin: 6px 0 8px; }
.brew-steps p:last-child { color: var(--muted); }
@media (max-width: 860px) { .brew-steps { grid-template-columns: 1fr; } .brew-steps li, .brew-steps li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
.brew-home { background: var(--soft); }
.brew-home h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--leaf-deep); margin: 10px 0 12px; }
.brew-art { max-width: 280px; margin-top: 20px; border-radius: var(--radius-lg); }