/* ============================================================
   GLISCO KITCHENS — SHARED CHROME
   Nav dropdowns, breadcrumb sub-bar, brand pattern, philosophy band.
   Loaded LAST on every page. Six brand pages (tadka-rani, mcbc,
   qulcha, haus-of-dirty, the-nashta-company, catering) inline a
   fork of style.css instead of linking it, so these rules live in
   their own file and are linked after that inline block.
   Generated markup comes from tools/build-nav.py.
============================================================ */
/* ══════════════════════════════════════════════════════════════════
   NAV DROPDOWNS  (Brands ▾ / Inside ▾)
   Hover on pointer devices, click/keyboard everywhere.
   ══════════════════════════════════════════════════════════════════ */
.nlinks li          { position:relative; }
.ndt {
  font-family:'Syne',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3, #796B60); background:none; border:none; padding:0;
  cursor:none; display:inline-flex; align-items:center; gap:6px; transition:color .2s;
  font-feature-settings:inherit;
}
.ndt:hover, .ndrop.op > .ndt, .ndt.act { color:var(--saffron, #E6783C); }
.ncar               { width:8px; height:8px; flex-shrink:0; transition:transform .25s; opacity:.55; }
.ndrop.op .ncar     { transform:rotate(180deg); }

.ndm {
  position:absolute; top:calc(100% + 16px); left:-18px; min-width:292px; z-index:950;
  background:var(--bg, #FFFFFF); border:1px solid var(--border, rgba(28,25,22,.10)); border-top:2px solid var(--saffron, #E6783C);
  box-shadow:0 18px 44px rgba(28,25,22,.13); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-7px);
  transition:opacity .22s, transform .22s, visibility .22s;
}
/* invisible bridge so the pointer can travel from label to panel */
.ndm::before        { content:''; position:absolute; top:-18px; left:0; right:0; height:18px; }
.ndrop.op > .ndm,
.ndrop:focus-within > .ndm { opacity:1; visibility:visible; transform:translateY(0); }
@media (hover:hover) and (pointer:fine) {
  .ndrop:hover > .ndm { opacity:1; visibility:visible; transform:translateY(0); }
}

.ndm a {
  display:flex; align-items:baseline; gap:12px; padding:9px 12px; white-space:nowrap;
  font-family:'Syne',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.04em;
  text-transform:none; color:var(--ink2, #3D3730); transition:background .18s, color .18s;
}
.ndm a:hover, .ndm a:focus-visible { background:var(--bg2, #F7F5F2); color:var(--saffron, #E6783C); }
.ndm a em {
  margin-left:auto; font-family:'DM Sans',sans-serif; font-style:normal;
  font-size:.62rem; font-weight:300; letter-spacing:0; color:var(--ink3, #796B60);
  overflow:hidden; text-overflow:ellipsis;
}
.ndd                { width:7px; height:7px; border-radius:50%; flex-shrink:0; align-self:center; }
.ndm hr             { border:none; border-top:1px solid var(--border, rgba(28,25,22,.10)); margin:7px 12px; }

/* Live pulse dot */
.ndlive             { position:relative; }
.ndlive .ndd        { background:#C8503C; }
.ndlive .ndd::after {
  content:''; position:absolute; inset:0; width:7px; height:7px; border-radius:50%;
  background:#C8503C; animation:ndpulse 1.9s ease-out infinite;
}
@keyframes ndpulse  { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(3.2); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .ndlive .ndd::after { animation:none; } }

/* ── Mobile drawer: grouped + scrollable ── */
#drawer {
  justify-content:flex-start; gap:0; padding:76px 26px 36px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; text-align:center;
}
/* Eight brands stacked would push the menu past a phone screen, so the
   brand group runs two-up. Everything else stays a single column. */
.dwg {
  width:100%; max-width:360px; margin:0 auto 16px;
  display:grid; grid-template-columns:1fr 1fr; gap:0 16px;
}
.dwg h6 {
  grid-column:1 / -1;
  font-family:'Syne',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink3, #796B60); margin-bottom:6px;
  padding-bottom:7px; border-bottom:1px solid var(--border, rgba(28,25,22,.10));
}
.dwg a              { font-size:clamp(.92rem,3.5vw,1.05rem); display:block; padding:6px 0; }
.dwg-1              { grid-template-columns:1fr; }
#drawer > a         { font-size:clamp(1.1rem,4.2vw,1.35rem); padding:7px 0; }
#drawer .dwcta      { margin-top:12px; color:var(--saffron, #E6783C); }

/* ── Sub-bar: breadcrumb + in-page anchors (brand & catering pages) ── */
.subnav {
  /* #nav is fixed and 68px tall; clear it or the strip renders behind it. */
  margin-top:68px;
  display:flex; align-items:center; flex-wrap:wrap; gap:0 8px;
  padding:13px 56px; background:var(--bg, #FFFFFF); border-bottom:1px solid var(--border, rgba(28,25,22,.10));
  font-family:'Syne',sans-serif; font-size:.63rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink3, #796B60);
}
.sbsep    { color:rgba(28,25,22,.2); }
.sbhere   { color:var(--ink, #1C1916); }
.sblinks  { margin-left:auto; display:flex; flex-wrap:wrap; gap:0 22px; }
.sblinks a{ color:var(--ink3, #796B60); transition:color .2s; }
.sblinks a:hover { color:var(--saffron, #E6783C); }
@media (max-width:900px) { .subnav { padding:12px 22px; } }
@media (max-width:640px) {
  .subnav  { padding:11px 18px; gap:6px 8px; }
  .sblinks { margin-left:0; width:100%; gap:0 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   BRAND PATTERN — "Rooted in India. Built for the World."
   The topographic wave artwork. Shipped as an alpha WebP (dense line
   art compresses better losslessly than lossy, so it is deliberately
   small and soft — it is only ever seen at low opacity).
   Tinted with mask-image so one asset works on light and dark bands.
   ══════════════════════════════════════════════════════════════════ */
.pat {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("../images/brand-pattern.webp");
  background-size:1100px auto; background-repeat:repeat;
  opacity:.05;
}
/* Where masking is available, tint the lines instead of using raw black. */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
  .pat {
    background-image:none; background-color:var(--pat-ink, #1C1916);
    -webkit-mask-image:url("../images/brand-pattern.webp"); mask-image:url("../images/brand-pattern.webp");
    -webkit-mask-size:1100px auto; mask-size:1100px auto;
    -webkit-mask-repeat:repeat; mask-repeat:repeat;
    opacity:.07;
  }
}
.pat-warm  { --pat-ink:#8C5A34; opacity:.15; }
.pat-light { --pat-ink:#FFFFFF; opacity:.06; }
.pat-fade  { -webkit-mask-composite:source-in; }

/* ─── PHILOSOPHY BAND ─── */
.phil {
  position:relative; overflow:hidden;
  background:var(--bg2, #F7F5F2); border-top:1px solid var(--border, rgba(28,25,22,.1));
  border-bottom:1px solid var(--border, rgba(28,25,22,.1));
  padding:96px 56px;
}
.phil-in { position:relative; z-index:1; max-width:1180px; margin:0 auto; }
.phil-ey {
  font-family:'Syne',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--saffron, #E6783C); margin-bottom:20px;
}
.phil h2 {
  font-family:'Playfair Display',serif; font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:900;
  line-height:1.04; letter-spacing:-.025em; color:var(--ink, #1C1916); margin:0 0 8px;
}
.phil h2 em { font-style:italic; font-weight:700; color:var(--saffron, #E6783C); }
.phil-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; margin-top:38px; align-items:start; }
.phil-grid p {
  font-size:.95rem; font-weight:300; line-height:1.9; color:var(--ink2, #3D3730); margin-bottom:20px;
}
.phil-grid p:last-child { margin-bottom:0; }
.phil-grid strong { font-weight:500; color:var(--ink, #1C1916); }

.phil-notes { display:flex; flex-direction:column; gap:0; }
.phil-note {
  border-top:1px solid var(--border, rgba(28,25,22,.1)); padding:18px 0 16px;
}
.phil-note:last-child { border-bottom:1px solid var(--border, rgba(28,25,22,.1)); }
.phil-note h5 {
  font-family:'Syne',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink, #1C1916); margin-bottom:7px;
}
.phil-note p {
  font-size:.83rem; font-weight:300; line-height:1.75; color:var(--ink3, #796B60); margin:0;
}

@media (max-width:900px) {
  .phil      { padding:72px 26px; }
  .phil-grid { grid-template-columns:1fr; gap:34px; }
}
@media (max-width:640px) { .phil { padding:60px 18px; } }

/* ══════════════════════════════════════════════════════════════════
   FOOTER PATTERN
   Applied through ::before rather than markup, so every footer on the
   site picks it up without touching 31 hand-maintained pages.
   ══════════════════════════════════════════════════════════════════ */
footer { position:relative; overflow:hidden; }
footer > * { position:relative; z-index:1; }
footer::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("../images/brand-pattern.webp");
  background-size:1100px auto; background-repeat:repeat;
  opacity:.05;
}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
  footer::before {
    background-image:none; background-color:#FFFFFF;
    -webkit-mask-image:url("../images/brand-pattern.webp"); mask-image:url("../images/brand-pattern.webp");
    -webkit-mask-size:1100px auto; mask-size:1100px auto;
    -webkit-mask-repeat:repeat; mask-repeat:repeat;
    opacity:.07;
  }
}
/* Light-footer pages (Ivory & Spice) need dark ink instead of white. */
.ft-light footer::before,
footer.ft-light::before { background-color:#1C1916; opacity:.06; }

/* ══════════════════════════════════════════════════════════════════
   DARK NAV  —  body class="nav-dark"
   For pages whose ground is dark (GUNSO). Set --nav-accent to the
   page's own accent so the nav belongs to the brand, not to Glisco.
   ══════════════════════════════════════════════════════════════════ */
body.nav-dark #nav {
  background:rgba(12,12,13,.82); border-bottom-color:rgba(255,255,255,.09);
}
body.nav-dark #nav.sc { background:rgba(12,12,13,.97); box-shadow:0 1px 18px rgba(0,0,0,.5); }
body.nav-dark .nlogo  { color:#FEFBF4; }
body.nav-dark .nlogo em,
body.nav-dark .nlinks a:hover, body.nav-dark .nlinks a.act,
body.nav-dark .ndt:hover, body.nav-dark .ndt.act,
body.nav-dark .ndrop.op > .ndt { color:var(--nav-accent, #E6783C); }
body.nav-dark .nlinks a, body.nav-dark .ndt { color:rgba(255,255,255,.6); }
body.nav-dark .hbg span { background:#FEFBF4; }

body.nav-dark .ndm {
  background:#141416; border-color:rgba(255,255,255,.1);
  border-top-color:var(--nav-accent, #E6783C);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
body.nav-dark .ndm a { color:rgba(255,255,255,.78); }
body.nav-dark .ndm a:hover, body.nav-dark .ndm a:focus-visible {
  background:rgba(255,255,255,.06); color:var(--nav-accent, #E6783C);
}
body.nav-dark .ndm a em { color:rgba(255,255,255,.4); }
body.nav-dark .ndm hr   { border-top-color:rgba(255,255,255,.12); }

body.nav-dark #drawer { background:#0C0C0D; }
body.nav-dark #drawer a { color:#FEFBF4; }
body.nav-dark #drawer a:hover { color:var(--nav-accent, #E6783C); }
body.nav-dark .dwg h6 { color:rgba(255,255,255,.42); border-bottom-color:rgba(255,255,255,.12); }
body.nav-dark #drawer .dwcta { color:var(--nav-accent, #E6783C); }

body.nav-dark .btn-fire {
  background:var(--nav-accent, #E6783C); border-color:var(--nav-accent, #E6783C); color:#fff;
}

/* ══════════════════════════════════════════════════════════════════
   TYPE HARMONISATION — the "Inside" pages
   Work with us / Giving / Live should read as one set. Giving and Live
   already use the shared .ey + .stitle scale; careers.html predates it
   and rolls its own sizes. These rules pull it onto the same scale
   rather than rewriting its inline stylesheet.
   ══════════════════════════════════════════════════════════════════ */
.car-eyebrow {
  font-size:.67rem !important; letter-spacing:.22em !important;
  gap:12px !important; margin-bottom:20px !important;
}
.car-eyebrow::before { width:24px !important; height:1px !important; }

.car-hero-content h1 {
  font-size:clamp(2.9rem,5.4vw,5rem) !important;
  line-height:.97 !important; letter-spacing:-.03em !important;
}
.car-intro-text h2,
.car-roles-head h2,
.car-why-content h2,
.car-openings-head h2 {
  font-size:clamp(2rem,4vw,3.3rem) !important;
  line-height:1.08 !important; letter-spacing:-.025em !important;
}
.car-hero-sub,
.car-openings-head p.lede {
  font-size:.93rem !important; line-height:1.85 !important;
}

/* Giving and Live inherit .ey/.stitle/.sbody from style.css already; this
   just keeps the hero headline on the same footing as careers'. */
.g-hero h1 { line-height:.97; letter-spacing:-.03em; }

/* ══════════════════════════════════════════════════════════════════
   NAV — one light bar on every page
   Brand pages each set their own nav ground (Qulcha purple, Haus of
   Dirty black, MCBC/Tadka/Nashta transparent-over-hero). That left the
   shared dropdown triggers and panel unreadable on several of them, and
   meant the menu changed character page to page. shared.css loads last,
   so these win: the bar is always light, always legible.

   A page can tint the hover/active state by setting --nav-accent.
   ══════════════════════════════════════════════════════════════════ */
#nav {
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border, rgba(28,25,22,.10)) !important;
  box-shadow:none;
}
#nav.sc {
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 1px 18px rgba(0,0,0,.07) !important;
}
#nav .nlogo, #nav.sc .nlogo      { color:var(--ink, #1C1916) !important; }
#nav .nlogo em                   { color:var(--nav-accent, var(--saffron, #E6783C)) !important; }
#nav .nlinks a, #nav.sc .nlinks a,
#nav .ndt,     #nav.sc .ndt      { color:var(--ink3, #796B60) !important; }
#nav .nlinks a:hover, #nav .nlinks a.act,
#nav.sc .nlinks a:hover,
#nav .ndt:hover, #nav .ndt.act,
#nav .ndrop.op > .ndt            { color:var(--nav-accent, var(--saffron, #E6783C)) !important; }
#nav .hbg span, #nav.sc .hbg span{ background:var(--ink, #1C1916) !important; }

/* Dropdown panel: explicit colours, no dependence on page variables. */
.ndm        { background:#FFFFFF !important; border-color:rgba(28,25,22,.10) !important;
              border-top-color:var(--nav-accent, var(--saffron, #E6783C)) !important; }
.ndm a      { color:#3D3730 !important; }
.ndm a:hover, .ndm a:focus-visible { background:#F7F5F2 !important;
              color:var(--nav-accent, var(--saffron, #E6783C)) !important; }
.ndm a em   { color:#796B60 !important; }
.ndm hr     { border-top-color:rgba(28,25,22,.10) !important; }

/* Mobile drawer, same reasoning. */
#drawer     { background:#FFFFFF !important; }
#drawer a   { color:var(--ink, #1C1916) !important; }
#drawer a:hover, #drawer .dwcta { color:var(--nav-accent, var(--saffron, #E6783C)) !important; }
.dwg h6     { color:#796B60 !important; border-bottom-color:rgba(28,25,22,.10) !important; }

/* ─── Cursor ───────────────────────────────────────────────────────
   The dot sat in a fixed brand colour and disappeared over dark heroes
   and photography. Difference blending inverts it against whatever is
   behind, so it stays visible on black, on purple and on a photograph
   without anything being set per page. */
#cdot  { background:#FFFFFF !important; mix-blend-mode:difference; }
#cring { border-color:#FFFFFF !important; mix-blend-mode:difference; opacity:.8; }
@supports not (mix-blend-mode:difference) {
  #cdot  { background:var(--saffron, #E6783C) !important; }
  #cring { border-color:var(--saffron, #E6783C) !important; }
}

/* Nav CTA takes the page's accent, so GUNSO's is red, FLKY's clay,
   Ivory & Spice's spice red, and everything else Glisco saffron. */
#nav .btn-fire {
  background:var(--nav-accent, var(--saffron, #E6783C)) !important;
  border-color:var(--nav-accent, var(--saffron, #E6783C)) !important;
  color:#fff !important;
}