/* Mak Ngah Catering — combined stylesheet (tokens + theme + runtime CSS) */
/* ===== tokens/fonts.css ===== */
/* ============================================================
   Mak Ngah Catering — Webfonts
   Saans / SaansMono are proprietary; these are Google Font
   substitutes chosen to match the editorial-warm direction:
     Display : Newsreader  (editorial serif, warm, appetizing)
     Sans/UI : Hanken Grotesk (humanist, friendly, legible)
     Mono    : JetBrains Mono (prices, tabular numerals)
   Replace with licensed brand fonts if/when available.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,18..72,400..700;1,18..72,400..600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ===== tokens/colors.css ===== */
/* ============================================================
   Mak Ngah Catering — Color tokens
   Anchor surface is a WARM CREAM, never pure white.
   System primary CTA is the brand chili-red (#982424) — the
   appetizing pop — with warm charcoal carrying all type.
   Rose (#FFD9DA) is the soft accent: tinted cards, tags, hover.
   A small "kitchen palette" (turmeric/pandan/tamarind/chili)
   lives inside menus & category chips — not brand surfaces.
   ============================================================ */

:root {
  /* ---- Brand & accent ---- */
  --brand-red: #982424;          /* primary CTA, emphasis, eyebrows */
  --brand-red-deep: #7a1a1a;     /* pressed / hover-darken */
  --brand-red-soft: #b34a4a;     /* tint for subtle emphasis */
  --rose: #ffd9da;               /* soft accent background */
  --rose-deep: #f6bfc2;          /* rose card border / divider */
  --rose-ink: #7a1a1a;           /* readable text on rose */
  --gold: #c79a3b;               /* premium accent (packages, awards) */

  /* ---- Surfaces ---- */
  --canvas: #f8f1e9;             /* default page ground — warm cream */
  --surface-1: #ffffff;          /* floating cards */
  --surface-1-warm: #fffcf8;     /* warm white alt */
  --surface-2: #f1e7da;          /* alt rows, tinted banners */
  --hairline: #e4d9cb;           /* 1px card borders */
  --hairline-soft: #efe7dc;      /* faint dividers (faq, footer) */
  --inverse-canvas: #1e1512;     /* deep warm near-black strip */
  --inverse-surface-1: #2a201c;  /* one step lighter on dark */

  /* ---- Text ---- */
  --ink: #1e1512;                /* headlines, body, labels */
  --ink-muted: #6b5f58;          /* secondary / meta */
  --ink-subtle: #8a7e76;         /* tertiary / helper */
  --ink-tertiary: #a89c92;       /* footnotes / disabled */
  --on-primary: #fff7f1;         /* text on red/charcoal CTAs */
  --inverse-ink: #f8f1e9;        /* type on dark strip */
  --inverse-ink-muted: #c5b8ac;  /* meta on dark strip */

  /* ---- Kitchen palette (menu chips, spice levels, charts) ---- */
  --turmeric: #e0a23a;           /* mild / curries */
  --pandan: #3f7d52;             /* greens / vegetarian */
  --tamarind: #9a5b2c;           /* braises / sweet-sour */
  --chili: #c5392b;              /* spicy / heat level */
  --coconut: #f3e9d7;            /* coconut / dessert tint */
  --lime-leaf: #8fb339;          /* fresh / herby */

  /* ---- Semantic ---- */
  --semantic-success: #3f7d52;
  --semantic-error: #c5392b;
  --semantic-warning: #e0a23a;
  --semantic-info: #2f6f8f;
}
/* ===== tokens/typography.css ===== */
/* ============================================================
   Mak Ngah Catering — Typography tokens
   Display  : Newsreader serif, weight 500–600, negative tracking
              that scales with size (editorial, appetizing).
   Body/UI  : Hanken Grotesk, 400 body / 500–600 labels.
   Eyebrow  : UPPERCASE, tracked, brand-red — the menu-section
              motif (a deliberate, documented divergence).
   Price    : JetBrains Mono, tabular numerals.
   Hierarchy is carried by size + weight + tracking.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Display (Newsreader serif) ---- */
  --display-xl-size: 72px;
  --display-xl-weight: 600;             /* @kind font */
  --display-xl-lh: 1.05;                /* @kind other */
  --display-xl-ls: -2px;
  --display-lg-size: 56px;
  --display-lg-weight: 600;             /* @kind font */
  --display-lg-lh: 1.08;                /* @kind other */
  --display-lg-ls: -1.4px;
  --display-md-size: 40px;
  --display-md-weight: 600;             /* @kind font */
  --display-md-lh: 1.12;                /* @kind other */
  --display-md-ls: -0.8px;
  --headline-size: 30px;
  --headline-weight: 600;               /* @kind font */
  --headline-lh: 1.18;                  /* @kind other */
  --headline-ls: -0.5px;

  /* ---- Titles & body (Hanken Grotesk) ---- */
  --card-title-size: 22px;
  --card-title-weight: 600;             /* @kind font */
  --card-title-lh: 1.25;                /* @kind other */
  --card-title-ls: -0.3px;
  --subhead-size: 20px;
  --subhead-weight: 400;                /* @kind font */
  --subhead-lh: 1.4;                    /* @kind other */
  --subhead-ls: -0.2px;
  --body-lg-size: 18px;
  --body-lg-weight: 400;                /* @kind font */
  --body-lg-lh: 1.5;                    /* @kind other */
  --body-lg-ls: -0.1px;
  --body-size: 16px;
  --body-weight: 400;                   /* @kind font */
  --body-lh: 1.5;                       /* @kind other */
  --body-ls: 0;                         /* @kind other */
  --body-sm-size: 14px;
  --body-sm-weight: 400;                /* @kind font */
  --body-sm-lh: 1.5;                    /* @kind other */
  --body-sm-ls: 0;                      /* @kind other */
  --caption-size: 12px;
  --caption-weight: 400;                /* @kind font */
  --caption-lh: 1.4;                    /* @kind other */
  --caption-ls: 0;                      /* @kind other */

  /* ---- Functional ---- */
  --button-size: 15px;
  --button-weight: 600;                 /* @kind font */
  --button-lh: 1.2;                     /* @kind other */
  --button-ls: 0;                       /* @kind other */
  --eyebrow-size: 13px;
  --eyebrow-weight: 600;                /* @kind font */
  --eyebrow-lh: 1.3;                    /* @kind other */
  --eyebrow-ls: 0.12em;                 /* @kind other */
  --mono-size: 14px;
  --mono-weight: 500;                   /* @kind font */
  --mono-lh: 1.4;                       /* @kind other */
  --mono-ls: 0;                         /* @kind other */
}
/* ===== tokens/spacing.css ===== */
/* ============================================================
   Mak Ngah Catering — Spacing tokens
   Base unit 8px. The cream canvas does the work whitespace
   would in another brand — sections breathe at --space-section.
   ============================================================ */

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* container */
  --container-max: 1240px;
  --container-pad: 24px;

  /* button padding */
  --btn-pad-y: 11px;
  --btn-pad-x: 20px;
}
/* ===== tokens/radius.css ===== */
/* ============================================================
   Mak Ngah Catering — Radius & elevation tokens
   Corners stay modest — never pill-rounded chrome, never square.
   Depth comes from white-on-cream surface change, not shadows;
   a single soft shadow token is allowed for floating menus/photos.
   ============================================================ */

:root {
  /* ---- Radius ---- */
  --radius-xs: 4px;    /* chips, badges */
  --radius-sm: 6px;    /* inline tags */
  --radius-md: 8px;    /* buttons, inputs */
  --radius-lg: 12px;   /* feature / pricing cards, faq rows */
  --radius-xl: 16px;   /* photo / mockup tiles */
  --radius-xxl: 24px;  /* oversized CTA banners */
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---- Elevation (used sparingly — food photos & overlays only) ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(30, 21, 18, 0.04);
  --shadow-2: 0 10px 30px -12px rgba(30, 21, 18, 0.18);
  --shadow-photo: 0 24px 60px -28px rgba(30, 21, 18, 0.32);

  /* hairline border helper */
  --border-hairline: 1px solid var(--hairline);
}
/* ===== tokens/base.css ===== */
/* ============================================================
   Mak Ngah Catering — base reset + typographic utility classes
   Optional helpers so specimen cards / kits can apply the type
   scale without re-declaring every property. Components style
   themselves via the raw custom properties.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display (serif) ---- */
.mn-display-xl { font-family: var(--font-display); font-size: var(--display-xl-size); font-weight: var(--display-xl-weight); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); }
.mn-display-lg { font-family: var(--font-display); font-size: var(--display-lg-size); font-weight: var(--display-lg-weight); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); }
.mn-display-md { font-family: var(--font-display); font-size: var(--display-md-size); font-weight: var(--display-md-weight); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); }
.mn-headline   { font-family: var(--font-display); font-size: var(--headline-size); font-weight: var(--headline-weight); line-height: var(--headline-lh); letter-spacing: var(--headline-ls); }

/* ---- Sans titles + body ---- */
.mn-card-title { font-family: var(--font-sans); font-size: var(--card-title-size); font-weight: var(--card-title-weight); line-height: var(--card-title-lh); letter-spacing: var(--card-title-ls); }
.mn-subhead    { font-family: var(--font-sans); font-size: var(--subhead-size); font-weight: var(--subhead-weight); line-height: var(--subhead-lh); letter-spacing: var(--subhead-ls); }
.mn-body-lg    { font-family: var(--font-sans); font-size: var(--body-lg-size); font-weight: var(--body-lg-weight); line-height: var(--body-lg-lh); letter-spacing: var(--body-lg-ls); }
.mn-body       { font-family: var(--font-sans); font-size: var(--body-size); font-weight: var(--body-weight); line-height: var(--body-lh); }
.mn-body-sm    { font-family: var(--font-sans); font-size: var(--body-sm-size); font-weight: var(--body-sm-weight); line-height: var(--body-sm-lh); }
.mn-caption    { font-family: var(--font-sans); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-lh); }

/* ---- Functional ---- */
.mn-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--brand-red);
}
.mn-price {
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* ===== website/_shared/theme.css ===== */
/* ============================================================
   Mak Ngah Catering — Website theme
   Editorial hospitality direction: warm terracotta + slate navy
   over cream, with script + serif display type. Layered ON TOP
   of the design-system tokens (styles.css) — this file owns the
   website's bespoke look only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Allura&display=swap');

:root {
  /* ---- Accent: logo red ---- */
  --t-accent:        #982424;
  --t-accent-deep:   #7c1b1b;
  --t-accent-soft:   #e0a6a6;
  --t-accent-tint:   #f0d6d6;
  --t-accent-tint-2: #f9eaea;

  /* ---- Slate navy ---- */
  --t-navy:      #3c4856;
  --t-navy-band: #44515f;
  --t-navy-deep: #2b333d;

  /* ---- Grounds ---- */
  --t-cream:   #f6efe5;
  --t-cream-2: #efe5d6;
  --t-ivory:   #fffdf9;
  --t-white:   #ffffff;

  /* ---- Ink ---- */
  --t-ink:         #2a2521;
  --t-ink-muted:   #6f655b;
  --t-ink-soft:    #968c80;
  --t-on-dark:     #f5efe5;
  --t-on-dark-mut: #c7c0b5;
  --t-hairline:    #e6dccc;
  --t-hairline-2:  #efe7da;

  /* ---- Type ---- */
  --t-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --t-script: 'Allura', cursive;
  --t-sans:   'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --t-mono:   'JetBrains Mono', ui-monospace, monospace;

  --t-max: 1240px;
}

/* ---- Buttons (pill, uppercase-ish, terracotta) ---- */
.t-btn {
  font-family: var(--t-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  white-space: nowrap;
}
.t-btn--primary { background: var(--t-accent); color: #fff; box-shadow: 0 6px 20px rgba(152,36,36,0.26); }
.t-btn--primary:hover { background: var(--t-accent-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(152,36,36,0.34); }
.t-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.t-btn--ghost:hover { background: #fff; color: var(--t-ink); border-color: #fff; }
.t-btn--outline { background: transparent; color: var(--t-accent); border-color: var(--t-accent); }
.t-btn--outline:hover { background: var(--t-accent); color: #fff; }
.t-btn--dark { background: var(--t-navy); color: #fff; }
.t-btn--dark:hover { background: var(--t-navy-deep); transform: translateY(-2px); }
.t-btn--wa { background: #178440; color: #fff; }
.t-btn--wa:hover { background: #137036; transform: translateY(-2px); }
.t-btn--lg { padding: 16px 36px; font-size: 13.5px; }

/* ---- Scalloped "seigaiha" wave band ---- */
.t-waves {
  background-color: var(--t-navy-band);
  background-image:
    radial-gradient(circle at 50% 150%, rgba(255,255,255,0.07) 24%, transparent 25%),
    radial-gradient(circle at 0%   150%, rgba(255,255,255,0.07) 24%, transparent 25%),
    radial-gradient(circle at 100% 150%, rgba(255,255,255,0.07) 24%, transparent 25%);
  background-size: 52px 26px;
}

/* ---- Layout helpers ---- */
.t-wrap { max-width: var(--t-max); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* ---- Animations (transform-only entrance — content stays visible even if the
   animation never advances, e.g. in static capture / throttled iframes) ---- */
@keyframes t-fade-up { from { transform: translateY(24px); } to { transform: none; } }
.t-rise { animation: t-fade-up .85s cubic-bezier(.22,.61,.36,1) both; }
.t-rise-2 { animation-delay: .12s; }
.t-rise-3 { animation-delay: .24s; }
.t-rise-4 { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .t-rise { transform: none !important; }
}

/* ---- Global mobile safety ---- */
img { max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }

/* ---- Responsive grid utilities used across pages ---- */
@media (max-width: 980px) {
  .t-cols-2 { grid-template-columns: 1fr !important; }
  .t-overlap-img { position: static !important; width: 100% !important; margin: 0 !important; }
  .t-overlap-card { margin: -48px 20px 0 !important; width: auto !important; }
  /* Stack the home overlap rows (image + floating card) on tablet/phone */
  .t-wrap:has(> .t-overlap-img) { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; }
  .t-overlap-img img { height: auto !important; max-height: 60vh; }
}
@media (max-width: 860px) {
  .t-hide-mobile { display: none !important; }
}
@media (max-width: 720px) {
  .t-cols-3 { grid-template-columns: 1fr !important; }
  .t-cols-4 { grid-template-columns: 1fr 1fr !important; }
  .t-wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
  .t-cols-4 { grid-template-columns: 1fr !important; }
  .t-btn--lg { padding: 14px 26px; font-size: 12.5px; }
}
/* ===== runtime-injected CSS (from Nav.js / WhatsApp.js useEffect) ===== */
.mn-nd{display:flex!important}
.mn-nm{display:none!important}
@media(max-width:880px){.mn-nd{display:none!important}.mn-nm{display:flex!important}}
@keyframes mn-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.40); } 50% { box-shadow: 0 0 0 10px rgba(37,211,102,0); } }
.mn-wa-btn { animation: mn-pulse 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mn-wa-btn { animation: none; } }
html,body{margin:0;background:var(--t-cream);}

/* ===== interactivity helpers (native Astro rewrite) ===== */
/* Gallery filter */
.mn-gal-item[hidden]{display:none!important}
/* FAQ accordion */
.mn-faq-answer{display:none}
.mn-faq-item.open .mn-faq-answer{display:block}
.mn-faq-item.open .mn-faq-q{background:var(--t-accent-tint-2)!important}
.mn-faq-item.open .mn-faq-q .mn-faq-chevron{transform:rotate(180deg)}
.mn-faq-cat[hidden]{display:none!important}
/* Packages tabs */
.mn-pkg-cat[hidden]{display:none!important}
/* Lightbox */
#mn-lightbox{position:fixed;inset:0;z-index:300;background:rgba(26,20,16,0.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
#mn-lightbox[hidden]{display:none}

/* ===== Site navigation (Astro-authored, replaces React TopNav) ===== */
.mn-header{position:sticky;top:0;left:0;right:0;z-index:120;transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;background:rgba(246,239,229,0.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--t-hairline);}
.mn-header.is-overlay{position:fixed;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid transparent;}
.mn-header.is-overlay.solid{background:rgba(246,239,229,0.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--t-hairline);}
.mn-header-row{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.mn-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.mn-logo img{height:34px;display:block;}
.mn-logo .logo-light{display:none;}
.mn-header.is-overlay:not(.solid) .mn-logo .logo-dark{display:none;}
.mn-header.is-overlay:not(.solid) .mn-logo .logo-light{display:block;}
.mn-navlinks{gap:30px;align-items:center;}
.mn-navlink{font-family:var(--t-sans);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-ink-muted);text-decoration:none;transition:color .2s ease;white-space:nowrap;padding-bottom:4px;border-bottom:2px solid transparent;}
.mn-navlink:hover{color:var(--t-accent);}
.mn-navlink.active{color:var(--t-accent);border-bottom-color:var(--t-accent);}
.mn-header.is-overlay:not(.solid) .mn-navlink{color:rgba(255,255,255,0.92);}
.mn-header.is-overlay:not(.solid) .mn-navlink.active{color:#fff;border-bottom-color:var(--t-accent);}
.mn-actions{display:flex;align-items:center;gap:14px;}
.mn-phone{align-items:center;gap:7px;text-decoration:none;color:var(--t-ink);}
.mn-phone span{font-family:var(--t-sans);font-size:13px;font-weight:600;white-space:nowrap;}
.mn-header.is-overlay:not(.solid) .mn-phone{color:#fff;}
.mn-header.is-overlay:not(.solid) .mn-phone svg{stroke:#fff;}
.mn-burger{align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:4px;width:38px;height:38px;color:var(--t-ink);}
.mn-header.is-overlay:not(.solid) .mn-burger{color:#fff;}
.mn-burger .icon-x{display:none;}
.mn-menu{position:fixed;top:0;left:0;right:0;bottom:0;z-index:115;background:var(--t-cream);padding:88px 28px 40px;overflow-y:auto;display:none;flex-direction:column;}
.mn-menu.open{display:flex;}
body.mn-menu-open .mn-burger .icon-menu{display:none;}
body.mn-menu-open .mn-burger .icon-x{display:block;}
body.mn-menu-open{overflow:hidden;}
.mn-menu a.mn-menu-link{font-family:var(--t-serif);font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--t-ink);text-decoration:none;padding:15px 0;border-bottom:1px solid var(--t-hairline-2);}
.mn-menu a.mn-menu-link.active{color:var(--t-accent);}
.mn-menu-ctas{display:flex;flex-direction:column;gap:12px;margin-top:28px;}