/* Light / dark rhythm for inner pages, matching the homepage.
   Add class="tone" to <body> and link this file after style.css.
   Dark sections keep the brand forest green from style.css;
   light bands all use one colour, var(--light). (.t-cream is kept as an alias.) */


/* ---------- Shared light-band look ---------- */
.tone .t-light,.tone .t-cream{color:var(--ink-soft)}
.tone .t-light{background:var(--light)}
.tone .t-cream{background:var(--light)}
/* .wrap sections: paint the band edge to edge without changing the HTML */
.tone .t-light.wrap{box-shadow:0 0 0 100vmax var(--light);clip-path:inset(0 -100vmax)}
.tone .t-cream.wrap{box-shadow:0 0 0 100vmax var(--light);clip-path:inset(0 -100vmax)}

/* Section headings (emblem, gold eyebrow, gold uppercase title, intro line) */
.tone :is(.t-light,.t-cream) .rm-cat-head h2{color:var(--gold-ink)}
.tone :is(.t-light,.t-cream) .vc-eyebrow{color:var(--gold-ink)}
.tone :is(.t-light,.t-cream) .lc-lede{color:var(--ink-soft)}

/* ================= EVENT CATERING ================= */

/* Intro + stats: one LIGHT band (stats band also covers the space above the marquee) */
.tone .ec-intro{margin-bottom:0}
.tone .ec-intro-head h2{color:var(--ink)}
.tone .ec-intro-body p{color:var(--ink-soft)}
.tone .ec-intro-body p:first-child{color:var(--ink)}
.tone .ec-intro-body p:first-child::first-letter{color:var(--gold-ink)}
.tone .ec-stats.t-light{clip-path:inset(0 -100vmax -100px)}
.tone .ec-stats{border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.tone .ec-stats>div+div{border-left-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.tone .ec-stats dt{color:var(--gold-ink)}
.tone .ec-stats dd{color:var(--ink-soft)}

/* Cuisines: CREAM band, photo accordion unchanged; Why section starts right after it */
.tone .ec-cuisines{padding-bottom:110px}
.tone .ec-why{margin-top:0}

/* "We Cater For" joins the Why section: same green, no double gap above,
   and the same breathing room below before the white band */
.tone .ec-events{background:var(--forest);padding:0 0 110px}

/* FAQ (dark): equal space below the cards before the white enquiry band */
.tone .ec-faq{padding-bottom:120px;box-shadow:none}

/* Process timeline: LIGHT band with white cards */
.tone .ec-process{padding-bottom:110px}
.tone .ec-timeline span{background:var(--light);color:var(--gold-ink)}
.tone .ec-timeline li:hover span{background:var(--orange);border-color:var(--orange);color:#fff}
.tone .ec-timeline li>div{background:#fff;border-color:color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 7%,transparent)}
.tone .ec-timeline h3{color:var(--ink)}
.tone .ec-timeline p{color:var(--ink-soft)}

/* Enquiry: LIGHT band, form in dark ink; contact card keeps its photo */
.tone .ec-enquire{margin-bottom:0}
.tone .ec-enquire .contact-form-col h2{color:var(--ink)}
.tone .ec-enquire .contact-form-col>p{color:var(--ink-soft)}
.tone .ec-enquire .lc-terms{color:var(--ink-soft)}
.tone .ec-enquire .lc-terms a{color:var(--gold-ink)}
.tone .ec-enquire .form-status{color:var(--ink)}

/* Enquiry forms on any light band (the #_ in :is() lifts specificity
   above the per-form #id rules in style.css) */
.tone :is(.t-light,.t-cream,#_) form :is(input:not([type=checkbox]),select,textarea){color:var(--ink);border-bottom-color:color-mix(in srgb,var(--gold-ink) 60%,transparent);color-scheme:light}
.tone :is(.t-light,.t-cream,#_) form select option{background:#fff;color:var(--ink)}
.tone :is(.t-light,.t-cream,#_) form ::placeholder{color:#6E6A63;opacity:1}
.tone :is(.t-light,.t-cream,#_) form :is(input,select,textarea):focus{border-bottom-color:var(--gold-ink)}

/* ================= OTHER PAGES (all except Event Catering) =================
   Inside a light band the "on dark" colours swap to their "on light" partners,
   so every page's text, gold titles and lines read correctly without
   re-styling each element. Dark cards or photo cards inside a light band
   get the original colours back with .t-dark-island. */
:root{--on-dark-cream:var(--cream);--on-dark-muted:var(--muted);--on-dark-muted-2:var(--muted-2);--on-dark-gold:var(--gold)}
.tone main:not(.ec) .t-light{--cream:var(--ink);--text:var(--ink);--muted:var(--ink-soft);--muted-2:var(--ink-soft);--gold:var(--gold-ink)}
.tone main:not(.ec) .t-light :is(.t-dark-island,.button.filled,.contact-submit,.wd-seal,.gd-seal,.gd-menu-card,.av-centre,.vc-ticker,.pd-panels>li){--cream:var(--on-dark-cream);--text:var(--on-dark-cream);--muted:var(--on-dark-muted);--muted-2:var(--on-dark-muted-2);--gold:var(--on-dark-gold)}

/* Headings and text that were set to plain white for dark bands */
.tone main:not(.ec) .t-light :is(
  .pd-intro h2,.pd-occ-list h3,
  .lc-intro-text h2,.lc-step-list h3,
  .wd-intro-text h2,.wd-gd-text h2,
  .cc-promise h3,.cc-styles-grid h3,.cc-step-row h3,
  .gd-intro-text h2,.gd-occ-grid h3,
  .gj-row-text h3,
  .av-how-text h2,
  .bk-hours h3,
  .contact-details h2,.contact-cols h3,.contact-form-col h2,
  .rm-sub,.rm-item-head h4,
  .vc-text h2){color:var(--ink)}
.tone main:not(.ec) .t-light.gj-intro>h2{color:var(--ink)}
.tone main:not(.ec) .t-light :is(.contact-form-col>p,.lc-enq-lede,.pp-value,.contact-cols a){color:var(--ink-soft)}
.tone main:not(.ec) .t-light :is(.pp-value,.contact-cols a):hover{color:var(--gold-ink)}

/* See-through green boxes become white cards, as on Event Catering */
.tone main:not(.ec) .t-light :is(.bk-hours,.gd-occ-grid>article){background:#fff;border-color:color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 7%,transparent)}

.tone main:not(.ec) .t-light .bk-embed{background:#fff}
/* Step numbers: light circle with gold number, as on Event Catering */
.tone main:not(.ec) .t-light .lc-step-list li>span{background:var(--light);color:var(--gold-ink)}
.tone main:not(.ec) .t-light .lc-step-list li:hover>span{background:var(--orange);border-color:var(--orange);color:#fff}

/* Two light .wrap bands in a row: overlap by 1px so no hairline seam shows */
.tone main:not(.ec) .t-light.wrap{clip-path:inset(-1px -100vmax)}
.tone main:not(.ec) .t-light.wrap+.t-light.wrap{margin-top:-2px;padding-top:calc(var(--seam-pt,120px) + 2px)}

/* Spacing: light bands carry their own bottom space, so the next dark
   section starts cleanly at the band edge */
.tone main:not(.ec) :is(.lc-steps,.wd-menu,.cc-intro,.cc-styles,.cc-steps,.gd-occasions,.gd-menu,.gj-occasions,.gj-thali,.vc-intro).t-light{padding-bottom:120px}
.tone main:not(.ec) :is(.lc-included,.wd-quote,.cc-dishes,.gd-promise){margin-top:0}
.tone .gj .lc-marquee{margin-top:0}
/* Dark sections that end right on their content get the same space before a light band */
.tone main:not(.ec) :is(.lc-faq,.lc-occasions){padding-bottom:120px}
/* Menus: every category band gets equal space below its last dish */
.tone main:not(.ec) .rm-cat{padding-bottom:90px}
.tone main:not(.ec) .vc-key{padding-bottom:100px}
.tone main:not(.ec) .rm-menu+.booking{margin-top:60px}
.tone main:not(.ec) .contact-main.t-light+.booking{padding-top:120px}

/* ================= AFFILIATED VENUES (light design) ================= */
/* Stats bar floats across the hero edge as a white card */
.tone .av-strip{z-index:2;background:#fff;border-color:color-mix(in srgb,var(--gold) 55%,transparent);outline-color:color-mix(in srgb,var(--gold) 22%,transparent);box-shadow:0 24px 50px color-mix(in srgb,var(--ink) 12%,transparent)}
.tone .av-strip>div+div{border-left-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.tone .av-strip dt{color:var(--gold-ink)}
.tone .av-strip dd{color:var(--ink-soft)}
/* Venn: soft gold-tinted circles that deepen where they overlap */
.tone .av-how .av-circle{background:color-mix(in srgb,var(--gold) 9%,#fff);border-color:color-mix(in srgb,var(--gold) 60%,transparent);mix-blend-mode:multiply}
.tone .av-how .av-centre{box-shadow:0 0 0 6px var(--light),0 0 0 7px color-mix(in srgb,var(--gold) 45%,transparent),0 14px 30px color-mix(in srgb,var(--orange) 30%,transparent)}
/* Filters */
.tone .av-filter{background:#fff;color:var(--ink-soft);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.tone .av-filter:hover{border-color:var(--gold-ink);color:var(--ink)}
.tone .av-filter[aria-pressed=true]{background:var(--gold-ink);border-color:var(--gold-ink);color:#fff}
/* Venue cards: white rectangles with one landscape photo, name and enquiry link */
.tone .av-card{align-items:stretch;text-align:left;min-height:0;padding:0;border-radius:8px;background:#fff;border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);box-shadow:0 12px 30px color-mix(in srgb,var(--ink) 6%,transparent);overflow:hidden}
.tone .av-card::after{display:none}
.tone .av-card:hover{border-color:var(--gold-ink);transform:translateY(-4px);box-shadow:0 22px 44px color-mix(in srgb,var(--ink) 12%,transparent)}
.tone .av-photo{aspect-ratio:3/2;overflow:hidden;background:var(--forest)}
.tone .av-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.tone .av-card:hover .av-photo img{transform:scale(1.05)}
.tone .av-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px 24px;border-top:3px solid var(--gold-ink)}
.tone .av-card h3{flex:1;display:block;margin:0 0 18px;padding:0;font-size:24px;line-height:1.2;color:var(--ink)}
.tone .av-link{color:var(--ink)}
.tone .av-link:hover{color:var(--gold-ink)}

/* ================= GUJARATI CATERING (light design) ================= */
/* Occasions: each story sits on its own white panel; photo keeps its gold offset frame */
.tone .gj-rows{gap:40px}
.tone .gj-row{padding:30px;gap:70px;background:#fff;border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);border-radius:16px;box-shadow:0 18px 44px color-mix(in srgb,var(--ink) 6%,transparent)}
.tone .gj-row:nth-child(odd) .gj-row-text{padding-right:40px}
.tone .gj-row:nth-child(even) .gj-row-text{padding-left:40px}
.tone .gj-row-img img{box-shadow:18px 18px 0 -1px #fff,18px 18px 0 0 var(--gold-ink)}
.tone .gj-row:nth-child(even) .gj-row-img img{box-shadow:-18px 18px 0 -1px #fff,-18px 18px 0 0 var(--gold-ink)}
.tone .gj-row:nth-child(odd) .gj-row-img{padding:0 18px 18px 0}
.tone .gj-row:nth-child(even) .gj-row-img{padding:0 0 18px 18px}
.tone .gj-row-text li{background:var(--light);color:var(--ink-soft)}
/* Thali: a white plate with gold rings and white bowls */
.tone .gj-plate{border:2px solid var(--gold-ink);background:radial-gradient(circle,#fff 0%,#fff 58%,color-mix(in srgb,var(--gold) 10%,#fff) 100%);box-shadow:inset 0 0 0 14px #fff,inset 0 0 0 15px var(--gold-ink),0 0 0 12px #fff,0 0 0 13px color-mix(in srgb,var(--gold) 45%,transparent),0 30px 60px color-mix(in srgb,var(--ink) 10%,transparent)}
.tone .gj-plate-centre{background:var(--light);border-color:var(--gold-ink);box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 7px color-mix(in srgb,var(--gold) 40%,transparent)}
.tone .gj-plate-centre b{color:var(--gold-ink)}
.tone .gj-plate-centre small{color:var(--ink-soft)}
.tone .gj-plate li span{background:#fff;color:var(--ink);border-color:color-mix(in srgb,var(--gold) 70%,transparent);box-shadow:0 8px 20px color-mix(in srgb,var(--ink) 8%,transparent);transition:background .25s,color .25s,border-color .25s}
.tone .gj-plate li span:hover{background:var(--orange);border-color:var(--orange);color:#fff}

@media(max-width:767px){
  .tone .ec-stats.t-light{clip-path:inset(0 -100vmax -70px)}
  .tone .ec-cuisines,.tone .ec-process{padding-bottom:80px}
  .tone .ec-events{padding-bottom:80px}
  .tone .ec-faq{padding-bottom:80px}
  .tone main:not(.ec) :is(.lc-steps,.wd-menu,.cc-intro,.cc-styles,.cc-steps,.gd-occasions,.gd-menu,.gj-occasions,.gj-thali,.vc-intro).t-light{padding-bottom:80px}
  .tone main:not(.ec) .contact-main.t-light+.booking{padding-top:80px}
  .tone main:not(.ec) .rm-cat{padding-bottom:70px}
  .tone main:not(.ec) .vc-key{padding-bottom:80px}
  .tone main:not(.ec) :is(.lc-faq,.lc-occasions){padding-bottom:80px}
  .tone .gj-rows{gap:28px}
  .tone .gj-row{padding:18px 18px 26px;gap:26px}
  .tone .gj-row:nth-child(n) .gj-row-text{padding:0 6px}
  .tone .gj-row:nth-child(n) .gj-row-img{padding:0 10px 10px 0}
  .tone .gj-row:nth-child(n) .gj-row-img img{box-shadow:10px 10px 0 -1px #fff,10px 10px 0 0 var(--gold-ink)}
  .tone .gj-plate{box-shadow:0 20px 40px color-mix(in srgb,var(--ink) 8%,transparent)}
  .tone main:not(.ec) .t-light.wrap+.t-light.wrap{--seam-pt:80px}
}