/* Foodzee — vendored from design-system/packages. DO NOT EDIT BY HAND. */
/* Re-generate with: make vendor-css */
/* Foodzee Design System — Color Tokens */
/* Brand: Sky Blue #27A8E0 (primary) + Sunny Orange #F39F1E (accent) + Leaf Green
   #189048 — the triad confirmed by decomposing the wordmark logo. Light-first —
   single :root, no dark mode (a kids' marketing site doesn't need one).
   NOTE: navy #1C244B and berry #CC3366 were dropped — both turned out to be
   non-visible (navy = a hidden Poppins mobile-menu fallback; berry = an
   unstyled-anchor default that the rendered icon SVG overrides to blue). */

:root {
  /* === Brand === */
  --foodzee-primary: #27A8E0;        /* Sky Blue — logo letters, headings, buttons, links, icon bullets */
  --foodzee-primary-light: #78C0F0;  /* sky tint — washes, hovers (sampled from wordmark) */
  --foodzee-primary-deep: #1F93C8;   /* darker blue — button hover / depth */
  --foodzee-secondary: #F39F1E;      /* Sunny Orange — ACTIVE nav item, logo outline, decorative accents */
  --foodzee-secondary-light: #F7B84E;
  --foodzee-secondary-deep: #D9870A;
  --foodzee-green: #189048;          /* Leaf Green — pineapple crown (mascot), success */
  --foodzee-ink: #141313;            /* Ink — near-black for dark headings (e.g. "Get Foodzee Tips!") */
  --foodzee-brand-gradient: linear-gradient(135deg, #27A8E0, #78C0F0);

  /* === Semantic === */
  --foodzee-success: #189048;
  --foodzee-success-dim: rgba(24, 144, 72, 0.12);
  --foodzee-warning: #F39F1E;
  --foodzee-warning-dim: rgba(243, 159, 30, 0.12);
  --foodzee-danger: #E0364B;
  --foodzee-danger-dim: rgba(224, 54, 75, 0.12);
  --foodzee-info: #27A8E0;
  --foodzee-info-dim: rgba(39, 168, 224, 0.12);

  /* === Backgrounds (light-first) === */
  --foodzee-bg-base: #FFFFFF;        /* page background */
  --foodzee-bg-surface: #F3F5F8;     /* cards / section panels (e.g. newsletter) */
  --foodzee-bg-input: #FAFAFA;       /* form fields */
  /* NOTE: the hero's mint dotted panel is a background-IMAGE texture, not a solid
     fill. Reproduced as a dotted pattern in components/hero.css — do not flatten
     it to a green block. Base wash ≈ #EAF7EF. */

  /* === Text === */
  --foodzee-text-primary: #333333;   /* default body */
  --foodzee-text-secondary: #7A7A7A; /* paragraph copy (airy, low-contrast) */
  --foodzee-text-muted: #888888;     /* footer, captions, fine print */
  --foodzee-text-inverse: #FFFFFF;   /* text on color */

  /* === Borders === */
  --foodzee-border-subtle: #E5E8EB;
  --foodzee-border-medium: #D6D8D9;  /* input borders (extracted) */
  --foodzee-border-strong: #C2C6CA;
}
/* Foodzee Design System — Typography Tokens */
/* One typeface does the whole job: Niramit (Google Fonts), a friendly rounded
   humanist sans, used at both display and text sizes — a deliberate single-face
   system that keeps the brand consistent. Active weights: 400 (body) + 600
   (headings, buttons, nav). Niramit also ships 500 and 700; reserve bold for rare,
   deliberate emphasis. */

:root {
  /* === Font Families === */
  --foodzee-font-sans: 'Niramit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --foodzee-font-display: var(--foodzee-font-sans);  /* headings share Niramit — one-typeface system */

  /* === Font Sizes (role → token) ===
     The two display sizes (h1 57 / h2 44) are extracted from the live site — a
     brand fingerprint, not points on a modular grid. The rest forms a coherent
     ramp from meta to h3. Pair each size with the line-height from the ladder. */
  --foodzee-text-xs: 0.6875rem;   /* 11px — meta / footer / eyebrow (uppercase) */
  --foodzee-text-sm: 0.8125rem;   /* 13px — small / caption / label */
  --foodzee-text-btn: 0.9375rem;  /* 15px — button label (uppercase) */
  --foodzee-text-base: 1rem;      /* 16px — body, nav */
  --foodzee-text-lg: 1.1875rem;   /* 19px — lead / intro */
  --foodzee-text-xl: 1.25rem;     /* 20px — large body / small subhead */
  --foodzee-text-2xl: 1.5rem;     /* 24px */
  --foodzee-text-3xl: 1.75rem;    /* 28px — h3 / card title */
  --foodzee-text-4xl: 2.25rem;    /* 36px — large heading */
  --foodzee-text-h2: 2.75rem;     /* 44px — section heading (extracted, display tier) */
  --foodzee-text-h1: 3.5625rem;   /* 57px — hero / display heading (extracted, display tier) */

  /* === Font Weights ===
     Headings are always 600 (semibold) — never light. Body is 400. Labels and
     meta are 600. Use the lightest weight that still reads clearly. */
  --foodzee-font-normal: 400;
  --foodzee-font-medium: 500;
  --foodzee-font-semibold: 600;
  --foodzee-font-bold: 700;

  /* === Line Heights — the ladder: the bigger the type, the tighter the leading ===
     display / h1 / h2 (44px+) → tight
     h3 / lead / short multi-line headings → snug
     body / nav / short UI copy → normal
     long-form reading (articles, legal, proposal prose) → relaxed */
  --foodzee-leading-none: 1;
  --foodzee-leading-tight: 1.05;
  --foodzee-leading-snug: 1.25;
  --foodzee-leading-normal: 1.5;
  --foodzee-leading-relaxed: 1.6;

  /* === Letter Spacing ===
     Body and headings ride at normal — the rounded face reads best untracked.
     Positive tracking is reserved for uppercase micro-text: buttons, nav, meta. */
  --foodzee-tracking-normal: 0;
  --foodzee-tracking-button: 0.8px;   /* button label (extracted, uppercase) */
  --foodzee-tracking-wide: 0.05em;    /* uppercase nav / meta / eyebrows */
}
/* Foodzee Design System — Spacing, Radius & Layout Tokens */
/* Spacing is NORMALIZED to an 8px grid. The live site's 0.44/0.67rem ramp is an
   Elementor default, not a Foodzee decision — so it's replaced here. Layout
   signatures (containers, gap, pill radius) are kept verbatim as brand truth. */

:root {
  /* === Spacing (8px grid) === */
  --foodzee-space-0: 0;
  --foodzee-space-1: 0.25rem;  /* 4px */
  --foodzee-space-2: 0.5rem;   /* 8px — base unit */
  --foodzee-space-3: 0.75rem;  /* 12px */
  --foodzee-space-4: 1rem;     /* 16px */
  --foodzee-space-5: 1.5rem;   /* 24px — block gap */
  --foodzee-space-6: 2rem;     /* 32px */
  --foodzee-space-7: 2.5rem;   /* 40px */
  --foodzee-space-8: 3.5rem;   /* 56px */
  --foodzee-space-9: 5rem;     /* 80px — section rhythm */

  /* === Border Radius === */
  --foodzee-radius-sm: 2px;     /* inputs, small chips (extracted) */
  --foodzee-radius-md: 8px;     /* small cards */
  --foodzee-radius-lg: 12px;    /* cards, media frames */
  --foodzee-radius-xl: 20px;    /* large panels */
  --foodzee-radius-pill: 100px; /* buttons — brand signature (extracted) */
  --foodzee-radius-full: 9999px;

  /* === Layout (extracted, verbatim) === */
  --foodzee-content-width: 800px;  /* text-centric blocks */
  --foodzee-wide-width: 1200px;    /* full sections, hero */
  --foodzee-block-gap: 24px;       /* default vertical rhythm */
}
/* Foodzee Design System — Shadow Tokens (light-first, soft) */
/* Shadows are soft and friendly — never heavy. Two brand-native values are kept
   verbatim: the subtle card lift and the playful offset drop the theme uses. */

:root {
  /* === Elevation === */
  --foodzee-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --foodzee-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --foodzee-shadow-lg: 0 10px 20px -5px rgba(0, 0, 0, 0.12);
  --foodzee-shadow-card: 0 2px 8px rgba(50, 55, 90, 0.2);    /* subtle card lift (extracted) */
  --foodzee-shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);  /* playful offset drop (theme preset) */

  /* === Colored glow (playful hover emphasis) === */
  --foodzee-glow-primary: 0 0 20px rgba(39, 168, 224, 0.3), 0 0 50px rgba(39, 168, 224, 0.1);
  --foodzee-glow-accent: 0 0 20px rgba(243, 159, 30, 0.3);
}
/* Foodzee Design System — Button Components (Atom) */
/* Pill buttons are the brand signature: fully rounded, uppercase, 0.8px tracking,
   16px 45px padding — all kept verbatim from the live site. */

.foodzee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--foodzee-space-2);
  padding: 16px 45px;                         /* brand signature */
  border-radius: var(--foodzee-radius-pill);
  font-family: var(--foodzee-font-sans);
  font-size: var(--foodzee-text-btn);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-none);
  text-transform: uppercase;
  letter-spacing: var(--foodzee-tracking-button);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.foodzee-btn:active { transform: scale(0.98); }
.foodzee-btn:focus-visible { outline: 2px solid var(--foodzee-primary); outline-offset: 2px; }

/* --- Variants --- */
.foodzee-btn-primary {
  background: var(--foodzee-primary);
  color: var(--foodzee-text-inverse);
  border-color: var(--foodzee-primary);
}
.foodzee-btn-primary:hover {
  background: var(--foodzee-primary-deep);
  border-color: var(--foodzee-primary-deep);
  transform: scale(1.02);
}

.foodzee-btn-secondary {           /* ghost / outline blue */
  background: transparent;
  color: var(--foodzee-primary);
  border-color: var(--foodzee-primary);
}
.foodzee-btn-secondary:hover {
  background: var(--foodzee-primary);
  color: var(--foodzee-text-inverse);
}

.foodzee-btn-accent {              /* orange */
  background: var(--foodzee-secondary);
  color: var(--foodzee-text-inverse);
  border-color: var(--foodzee-secondary);
}
.foodzee-btn-accent:hover {
  background: var(--foodzee-secondary-deep);
  border-color: var(--foodzee-secondary-deep);
}

/* --- Sizes --- */
.foodzee-btn-sm { padding: 12px 30px; font-size: var(--foodzee-text-sm); }
.foodzee-btn-lg { padding: 18px 55px; font-size: var(--foodzee-text-base); }

/* --- Square submit (newsletter) — extracted: radius 2px, sentence case --- */
.foodzee-btn-square {
  border-radius: var(--foodzee-radius-sm);
  padding: 9px 18px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--foodzee-text-base);
}

/* --- States --- */
.foodzee-btn:disabled,
.foodzee-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Foodzee Design System — Card Components (Molecule) */

.foodzee-card {
  background: var(--foodzee-bg-base);
  border-radius: var(--foodzee-radius-lg);
  box-shadow: var(--foodzee-shadow-card);
  padding: var(--foodzee-space-6);
}

/* Flat surface variant — section panel, no lift */
.foodzee-card-surface {
  background: var(--foodzee-bg-surface);
  box-shadow: none;
}

.foodzee-card__title {
  color: var(--foodzee-primary);   /* section headings render blue on the live site */
  font-size: var(--foodzee-text-3xl);
  font-weight: var(--foodzee-font-semibold);
  margin: 0 0 var(--foodzee-space-3);
}

.foodzee-card__body {
  color: var(--foodzee-text-secondary);
  line-height: var(--foodzee-leading-normal);
}
/* Foodzee Design System — FAQ Accordion (Molecule) */
/* Native <details>/<summary> styled to brand — no JS needed. */

.foodzee-faq { max-width: var(--foodzee-content-width); margin: 0 auto; }

.foodzee-faq__item { border-bottom: 1px solid var(--foodzee-border-subtle); }
.foodzee-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--foodzee-space-4);
  padding: var(--foodzee-space-4) 0;
  color: var(--foodzee-ink);
  font-weight: var(--foodzee-font-semibold);
  font-size: var(--foodzee-text-lg);
}
.foodzee-faq__item summary::-webkit-details-marker { display: none; }
.foodzee-faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--foodzee-primary);
  font-size: 1.5em;
  line-height: 1;
  transition: transform 200ms ease;
}
.foodzee-faq__item[open] summary::after { content: "\2013"; }

.foodzee-faq__answer {
  padding: 0 0 var(--foodzee-space-4);
  color: var(--foodzee-text-secondary);
  line-height: var(--foodzee-leading-relaxed);
}
.foodzee-faq__answer p { margin: 0 0 var(--foodzee-space-3); }
.foodzee-faq__answer > :last-child { margin-bottom: 0; }
/* Foodzee Design System — Feature Icon-List (Molecule) */
/* Used in "The Games". Circular sky-blue bullets (the live site's bullet icons
   render blue). Swap to a check-mark SVG if you want closer parity. */

.foodzee-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--foodzee-space-4);
}

.foodzee-feature-list__item {
  display: flex;
  gap: var(--foodzee-space-3);
  align-items: flex-start;
}

.foodzee-feature-list__bullet {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: var(--foodzee-radius-full);
  background: var(--foodzee-primary);
  margin-top: 3px;
}

.foodzee-feature-list__text { color: var(--foodzee-text-secondary); }
.foodzee-feature-list__text b { color: var(--foodzee-ink); font-weight: var(--foodzee-font-semibold); }
/* Foodzee Design System — Site Footer (Organism) */
/* Two parts: a newsletter band (form + family photo, orange accent between) and a
   meta bar (Privacy/Support links + copyright + social icons). */

/* ---- Newsletter band ----
   Full-bleed: a tiled food-pattern wash fills the left (behind the form) to the
   viewport's left edge; the family photo bleeds to the right edge; an orange block
   sits at the photo's lower-left. The food-pattern image is set inline (Jekyll asset). */
.foodzee-newsletter-band {
  background-color: #F4F7E5;            /* pale food wash behind the pattern */
  background-repeat: repeat;
  background-size: 104px;
}
.foodzee-newsletter-band__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  /* left content aligns to the centered container; right has no padding so the photo bleeds */
  padding-inline-start: max(var(--foodzee-space-4), calc((100% - var(--foodzee-wide-width)) / 2 + var(--foodzee-space-4)));
  padding-inline-end: 0;
}
.foodzee-newsletter-band__content {
  background: transparent;
  align-self: center;
  padding-block: var(--foodzee-space-8);
  padding-inline-end: var(--foodzee-space-7);
}
.foodzee-newsletter-band__accent {            /* orange block at the photo's lower-left */
  align-self: end;
  width: 92px;
  height: 52%;
  background: var(--foodzee-secondary);
}
.foodzee-newsletter-band__media {
  background-size: cover;
  background-position: center;
  min-height: 420px;
}
@media (max-width: 768px) {
  .foodzee-newsletter-band__inner { grid-template-columns: 1fr; padding-inline-end: var(--foodzee-space-4); }
  .foodzee-newsletter-band__content { padding-inline-end: 0; padding-block: var(--foodzee-space-7); }
  .foodzee-newsletter-band__accent { display: none; }
  .foodzee-newsletter-band__media { min-height: 240px; margin-inline-end: calc(-1 * var(--foodzee-space-4)); }
}

/* ---- Meta bar ---- */
.foodzee-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--foodzee-space-5);
  flex-wrap: wrap;
  max-width: var(--foodzee-wide-width);
  margin: 0 auto;
  padding: var(--foodzee-space-6) var(--foodzee-space-4);
  border-top: 1px solid var(--foodzee-border-subtle);
}

.foodzee-footer__links {
  display: flex;
  gap: var(--foodzee-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.foodzee-footer__copy {
  color: var(--foodzee-text-muted);
  font-size: var(--foodzee-text-xs);
  margin: 0;
}

/* ---- Social icons ---- */
.foodzee-socials {
  display: flex;
  gap: var(--foodzee-space-3);
  align-items: center;
}
.foodzee-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--foodzee-radius-full);
  color: var(--foodzee-text-inverse);
  background: var(--foodzee-primary);
  transition: background 200ms ease;
}
.foodzee-social:hover { background: var(--foodzee-primary-deep); }
.foodzee-social svg { width: 16px; height: 16px; fill: currentColor; }
/* Foodzee Design System — Game Cards (Molecule) */
/* "The Games" — three phone mockups, each with a bold game name + description.
   On the live site this is a swiper carousel; we render a static 3-up grid. */

.foodzee-games {
  max-width: var(--foodzee-wide-width);
  margin: 0 auto;
  padding: var(--foodzee-space-8) var(--foodzee-space-4) var(--foodzee-space-9);
  text-align: center;
}
.foodzee-games__title {
  font-size: var(--foodzee-text-h2);
  color: var(--foodzee-primary);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-tight);
  margin: 0 0 var(--foodzee-space-3);
}
.foodzee-games__intro {
  color: var(--foodzee-text-secondary);
  line-height: var(--foodzee-leading-relaxed);
  max-width: 60ch;
  margin: 0 auto var(--foodzee-space-8);
}
.foodzee-games__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--foodzee-space-6);
}

.foodzee-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--foodzee-space-4);
}
.foodzee-game-card__media img {
  max-height: 420px;
  width: auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.16));
}
.foodzee-game-card__text {
  color: var(--foodzee-text-secondary);
  line-height: var(--foodzee-leading-normal);
  max-width: 34ch;
}
.foodzee-game-card__text b { color: var(--foodzee-ink); font-weight: var(--foodzee-font-semibold); }

@media (max-width: 768px) {
  .foodzee-games__grid { grid-template-columns: 1fr; gap: var(--foodzee-space-8); }
}
/* Foodzee Design System — Site Header (Organism) */
/* Logo left, nav + "Get App" pill on the right. Full nav on desktop; collapses to
   a hamburger-toggled panel under 900px. */

.foodzee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--foodzee-space-6);
  flex-wrap: wrap;
  max-width: var(--foodzee-wide-width);
  margin: 0 auto;
  padding: var(--foodzee-space-4);
  background: var(--foodzee-bg-base);
}

.foodzee-header__brand { display: inline-flex; align-items: center; }
/* specificity bump so it wins over the generic .foodzee-logo img (56px) default */
.foodzee-header .foodzee-header__brand img { height: 120px; width: auto; display: block; }

.foodzee-header__actions {
  display: flex;
  align-items: center;
  gap: var(--foodzee-space-6);
}

/* Hamburger toggle — hidden on desktop */
.foodzee-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--foodzee-ink);
  cursor: pointer;
  border-radius: var(--foodzee-radius-md);
}
.foodzee-header__toggle:hover { background: var(--foodzee-bg-surface); }
.foodzee-header__toggle svg { width: 26px; height: 26px; }

@media (max-width: 900px) {
  .foodzee-header .foodzee-header__brand img { height: 56px; }   /* smaller on mobile */
  .foodzee-header__toggle { display: inline-flex; order: 3; }
  .foodzee-header__actions {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--foodzee-space-4);
    padding-top: var(--foodzee-space-4);
    display: none;
  }
  .foodzee-header.is-open .foodzee-header__actions { display: flex; }
  .foodzee-header .foodzee-nav { flex-direction: column; gap: var(--foodzee-space-4); }
}
/* Foodzee Design System — Hero (Organism) */
/* Two-column: headline + lead + CTA on the left; a food-pattern panel holding the
   app phone image on the right. The right panel BLEEDS to the viewport's right edge
   (rounded on the left, flush on the right) while the left content stays aligned to
   the centered page container. The panel background image (a tiled food pattern) is
   set per-page via inline style — the component only provides the layout. */

.foodzee-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--foodzee-space-7);
  align-items: center;
  /* full content width; left padding aligns content to the centered container,
     no right padding so the panel reaches the edge */
  padding-block: var(--foodzee-space-8);
  padding-inline-start: max(var(--foodzee-space-4), calc((100% - var(--foodzee-wide-width)) / 2 + var(--foodzee-space-4)));
  padding-inline-end: 0;
  overflow-x: clip;
}

.foodzee-hero__title {
  font-size: var(--foodzee-text-h1);
  color: var(--foodzee-primary);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-tight);
  margin: 0 0 var(--foodzee-space-4);
}

.foodzee-hero__lead {
  font-size: var(--foodzee-text-lg);
  color: var(--foodzee-text-secondary);
  line-height: var(--foodzee-leading-relaxed);
  margin: 0 0 var(--foodzee-space-5);
}

/* Right-hand panel — tiled food-pattern background (set inline) + phone image.
   Rounded on the left, flush (bleeds) on the right. */
.foodzee-hero__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAF7EF;            /* soft fallback wash behind the pattern */
  background-repeat: repeat;
  background-size: 22%;
  border-radius: var(--foodzee-radius-xl) 0 0 120px;
  min-height: 360px;
  padding: var(--foodzee-space-7);
}
.foodzee-hero__panel img {
  max-height: 520px;
  width: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18));
}

@media (max-width: 768px) {
  .foodzee-hero {
    grid-template-columns: 1fr;
    padding-block: var(--foodzee-space-6);
    padding-inline-end: var(--foodzee-space-4);   /* restore right padding for the stacked text */
  }
  .foodzee-hero__title { font-size: var(--foodzee-text-4xl); }
  .foodzee-hero__panel {
    margin-inline-end: calc(-1 * var(--foodzee-space-4));  /* still bleed right on mobile */
    border-radius: var(--foodzee-radius-xl) 0 0 64px;
  }
  .foodzee-hero__panel img { max-height: 420px; }
}
/* Foodzee Design System — All Components */

/* Atoms */

/* Molecules */

/* Organisms */
/* Foodzee Design System — Input Components (Atom) */

.foodzee-input {
  font-family: var(--foodzee-font-sans);
  font-size: var(--foodzee-text-base);
  color: var(--foodzee-text-primary);
  background: var(--foodzee-bg-input);
  border: 1px solid var(--foodzee-border-medium);
  border-radius: var(--foodzee-radius-sm);
  padding: 11px 14px;                       /* extracted */
  width: 100%;
  transition: border-color 200ms ease;
}

.foodzee-input::placeholder { color: var(--foodzee-text-muted); }

.foodzee-input:focus {
  outline: none;
  border-color: var(--foodzee-primary);
}

.foodzee-input--invalid { border-color: var(--foodzee-danger); }

/* Textarea variant */
textarea.foodzee-input { min-height: 150px; resize: vertical; line-height: var(--foodzee-leading-normal); }

/* Stacked form layout (contact / beta) */
.foodzee-form { max-width: var(--foodzee-content-width); margin: 0 auto; display: flex; flex-direction: column; gap: var(--foodzee-space-4); }
.foodzee-form__row { display: flex; gap: var(--foodzee-space-4); }
.foodzee-form__row > * { flex: 1; }
.foodzee-form__label { font-weight: var(--foodzee-font-semibold); color: var(--foodzee-ink); font-size: var(--foodzee-text-sm); margin-bottom: calc(-1 * var(--foodzee-space-2)); }
.foodzee-form .foodzee-btn { align-self: flex-start; }
@media (max-width: 600px) { .foodzee-form__row { flex-direction: column; } }
/* Foodzee Design System — Library hub + Resource cards (Organism/Molecule) */
/* "LIBRARY" hero on a food-pattern wash, filter pills, and a 3-up card grid. */

.foodzee-library-hero {
  background-color: #EAF7EF;
  background-repeat: repeat;
  background-size: 22%;
  text-align: center;
  padding: var(--foodzee-space-8) var(--foodzee-space-4);
}
.foodzee-library-hero__title {
  color: var(--foodzee-primary);
  font-size: var(--foodzee-text-h1);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-tight);
  margin: 0 0 var(--foodzee-space-3);
}
.foodzee-library-hero__intro {
  color: var(--foodzee-text-secondary);
  max-width: 70ch;
  margin: 0 auto var(--foodzee-space-5);
  line-height: var(--foodzee-leading-relaxed);
}

/* Filter pills */
.foodzee-filters {
  display: flex;
  justify-content: center;
  gap: var(--foodzee-space-3);
  flex-wrap: wrap;
}
.foodzee-filter {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--foodzee-text-sm);
  font-weight: var(--foodzee-font-semibold);
  color: var(--foodzee-text-secondary);
  padding: 6px 18px;
  border-radius: var(--foodzee-radius-pill);
  cursor: pointer;
  transition: all 150ms ease;
}
.foodzee-filter:hover { color: var(--foodzee-primary); }
.foodzee-filter.is-active { background: var(--foodzee-primary); color: var(--foodzee-text-inverse); }

/* Resource grid + cards */
.foodzee-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--foodzee-space-6);
  max-width: var(--foodzee-wide-width);
  margin: 0 auto;
  padding: var(--foodzee-space-8) var(--foodzee-space-4);
}
.foodzee-resource-card { display: flex; flex-direction: column; }
.foodzee-resource-card__media {
  display: block;
  border-radius: var(--foodzee-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.foodzee-resource-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foodzee-resource-card__title {
  color: var(--foodzee-ink);
  font-size: var(--foodzee-text-xl);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-snug);
  margin: var(--foodzee-space-3) 0 6px;
}
.foodzee-resource-card__title a { color: inherit; text-decoration: none; }
.foodzee-resource-card__title a:hover { color: var(--foodzee-primary); }
.foodzee-resource-card__cats { color: var(--foodzee-text-muted); font-size: var(--foodzee-text-sm); }

@media (max-width: 768px) {
  .foodzee-resource-grid { grid-template-columns: 1fr; }
}

/* Single article */
.foodzee-article {
  max-width: var(--foodzee-content-width);
  margin: 0 auto;
  padding: var(--foodzee-space-8) var(--foodzee-space-4);
}
.foodzee-article__title {
  color: var(--foodzee-primary);
  font-size: var(--foodzee-text-h2);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-tight);
  margin: 0 0 var(--foodzee-space-2);
}
.foodzee-article__cats {
  color: var(--foodzee-text-muted);
  font-size: var(--foodzee-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--foodzee-tracking-wide);
  margin: 0 0 var(--foodzee-space-5);
}
.foodzee-article__media { border-radius: var(--foodzee-radius-lg); overflow: hidden; margin-bottom: var(--foodzee-space-6); }
.foodzee-article__media img { width: 100%; display: block; }
.foodzee-article__back { display: inline-block; margin-top: var(--foodzee-space-7); }
/* Foodzee Design System — Link Components (Atom) */

.foodzee-link {
  color: var(--foodzee-primary);
  font-weight: var(--foodzee-font-semibold);
  text-decoration: none;
  transition: color 200ms ease;
}
.foodzee-link:hover {
  color: var(--foodzee-primary-deep);
  text-decoration: underline;
}

/* Meta link — uppercase, muted (footer / fine print) */
.foodzee-link-meta {
  color: var(--foodzee-text-muted);
  font-size: var(--foodzee-text-xs);
  font-weight: var(--foodzee-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--foodzee-tracking-wide);
  text-decoration: none;
}
.foodzee-link-meta:hover { color: var(--foodzee-primary); }
/* Foodzee Design System — Logo (Atom) */
/* The brand mark is a WORDMARK IMAGE — "Foodzee" in bubbly sky-blue letters with
   an orange/amber outline + drop shadow, the pineapple mascot integrated into the
   wordmark, and the tagline "MAKING MEALTIME A GAME NIGHT!" beneath. The pineapple
   is a mascot element WITHIN the logo, never the logo on its own.
   Canonical asset: design-system/assets/foodzee-logo.png (transparent PNG). */

.foodzee-logo {
  display: inline-block;
  line-height: 0;
}
.foodzee-logo img {
  display: block;
  width: auto;
  height: 56px;          /* header default; ~304px wide at the live site's ratio */
}
.foodzee-logo--sm img { height: 40px; }
.foodzee-logo--lg img { height: 88px; }
/* Foodzee Design System — Navigation (Molecule) */
/* Top-nav links are muted GRAY + uppercase (Niramit 600, 16px). The ACTIVE item
   turns orange — orange is a state signal here, not the default link color.
   (Verified against the live site's visible menu, not the hidden mobile one.) */

.foodzee-nav {
  display: flex;
  align-items: center;
  gap: var(--foodzee-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.foodzee-nav__link {
  color: var(--foodzee-text-secondary);   /* #7A7A7A — inactive */
  font-weight: var(--foodzee-font-semibold);
  font-size: var(--foodzee-text-base);
  text-transform: uppercase;
  letter-spacing: var(--foodzee-tracking-wide);
  text-decoration: none;
  transition: color 200ms ease;
}
.foodzee-nav__link:hover { color: var(--foodzee-secondary); }
.foodzee-nav__link.is-active { color: var(--foodzee-secondary); } /* active = orange */
/* Foodzee Design System — Newsletter Panel (Molecule) */
/* Surface-colored panel; Ink-Navy heading at section scale; a name + email row
   with a small square submit button (foodzee-btn-square). */

.foodzee-newsletter {
  background: var(--foodzee-bg-surface);
  border-radius: var(--foodzee-radius-lg);
  padding: var(--foodzee-space-7);
}

.foodzee-newsletter__title {
  color: var(--foodzee-ink);
  font-size: var(--foodzee-text-h2);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-tight);
  margin: 0 0 var(--foodzee-space-3);
}

.foodzee-newsletter__body {
  color: var(--foodzee-text-secondary);
  margin: 0 0 var(--foodzee-space-5);
}

.foodzee-newsletter__form {
  display: flex;
  gap: var(--foodzee-space-2);
  flex-wrap: wrap;
}
.foodzee-newsletter__form .foodzee-input { width: auto; flex: 1 1 160px; }
/* Foodzee Design System — Prose / Long-form (Molecule) */
/* Long-form typography for articles and legal pages. Headings in the brand ramp,
   airy body, blue links. */

.foodzee-prose {
  color: var(--foodzee-text-secondary);
  line-height: var(--foodzee-leading-relaxed);
  font-size: var(--foodzee-text-base);
}
.foodzee-prose > :first-child { margin-top: 0; }
.foodzee-prose h1 {
  color: var(--foodzee-primary);
  font-size: var(--foodzee-text-h2);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-tight);
  margin: 0 0 var(--foodzee-space-4);
}
.foodzee-prose h2 {
  color: var(--foodzee-primary);
  font-size: var(--foodzee-text-3xl);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-snug);
  margin: var(--foodzee-space-7) 0 var(--foodzee-space-3);
}
.foodzee-prose h3 {
  color: var(--foodzee-ink);
  font-size: var(--foodzee-text-xl);
  font-weight: var(--foodzee-font-semibold);
  margin: var(--foodzee-space-6) 0 var(--foodzee-space-2);
}
.foodzee-prose p { margin: 0 0 var(--foodzee-space-4); }
.foodzee-prose ul, .foodzee-prose ol { margin: 0 0 var(--foodzee-space-4); padding-left: var(--foodzee-space-5); }
.foodzee-prose li { margin-bottom: var(--foodzee-space-2); }
.foodzee-prose a { color: var(--foodzee-primary); font-weight: var(--foodzee-font-semibold); text-decoration: none; }
.foodzee-prose a:hover { text-decoration: underline; }
.foodzee-prose strong { color: var(--foodzee-ink); font-weight: var(--foodzee-font-semibold); }
.foodzee-prose hr { border: none; border-top: 1px solid var(--foodzee-border-subtle); margin: var(--foodzee-space-6) 0; }
/* Foodzee Design System — Split Media + Text (Molecule) */
/* Two-column row: an app phone image on one side, heading + copy + CTA on the
   other. Add .foodzee-split--media-right to flip the image to the right. */

.foodzee-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--foodzee-space-8);
  align-items: center;
  max-width: var(--foodzee-wide-width);
  margin: 0 auto;
  padding: var(--foodzee-space-8) var(--foodzee-space-4);
}

.foodzee-split__media {
  display: flex;
  justify-content: center;
}
.foodzee-split__media img {
  max-height: 560px;
  width: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.16));
}

.foodzee-split__title {
  font-size: var(--foodzee-text-h2);
  color: var(--foodzee-primary);
  font-weight: var(--foodzee-font-semibold);
  line-height: var(--foodzee-leading-tight);
  margin: 0 0 var(--foodzee-space-4);
}
.foodzee-split__body { color: var(--foodzee-text-secondary); }
.foodzee-split__body p { margin: 0 0 var(--foodzee-space-4); line-height: var(--foodzee-leading-relaxed); }

/* Flip: image on the right (text reads first in DOM) */
.foodzee-split--media-right .foodzee-split__media { order: 2; }

@media (max-width: 768px) {
  .foodzee-split { grid-template-columns: 1fr; }
  .foodzee-split--media-right .foodzee-split__media { order: 0; }
  .foodzee-split__media img { max-height: 440px; }
}