/* =========================================================================
   NOD REBRAND 2025 — design-system override layer
   Loaded AFTER main.css. Provides the new tan/beige + serif visual system.
   Original Bootstrap utility classes (d-flex, row, col-*, btn...) still work;
   we only override colors, fonts, borders, radii and add new component classes.
   ========================================================================= */

/* Noto Sans SC (思源黑体, SIL OFL — Google's release of Source Han Sans)
   is NOT registered here: its unicode-range sliced @font-face rules live in
   noto-sc.css, loaded before this file from index.html. Helvetica Neue /
   Arial / Microsoft YaHei were removed from every stack (client copyright
   requirement). */

:root {
  /* --- brand palette (tan / beige / gold / ink) --- */
  --tan-050: #faf6f0;   /* lightest section bg */
  --tan-100: #f5f0e9;   /* page / section bg */
  --tan-150: #efe6d9;   /* card bg */
  --tan-200: #e9ddcb;   /* deeper card / block bg */
  --tan-300: #d9c7a8;   /* nav + footer bg */
  --tan-350: #cbb08a;   /* button / divider gold-light */
  --gold-400: #cdb287;  /* gold accent */
  --gold-500: #c2a15e;  /* primary gold (headings / buttons) */
  --gold-600: #a9894e;  /* gold hover */
  --ink-900: #2e2a24;   /* near-black text */
  --ink-700: #4a453c;   /* body text */
  --ink-500: #7a7263;   /* muted text */

  /* --- typography ---
     Client brand faces, same as the original site:
       display/headings = Zapf Humanist 601 (see css.css @font-face)
       body/sans        = Inter
     Both faces are Latin-only, so Chinese glyphs fall through to the
     self-hosted Noto Sans SC (思源黑体, sliced by unicode-range in
     noto-sc.css) — the site-wide CJK default, per the client's correction.
     The 'Noto Serif SC' face (思源宋体 Bold, css.css) is NOT in these stacks:
     it is reserved for the Products banner copy, which pins it explicitly.
     Per the client's copyright requirement the stacks carry NO system
     CJK/Latin fallbacks beyond the generic families (no Helvetica Neue /
     Arial / Microsoft YaHei / PingFang SC). */
  --nk-serif: 'Zapf Humanist 601', Georgia, 'Times New Roman', 'Noto Sans SC', serif;
  --nk-sans: 'Inter', 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;
}

/* ---- base ---- */
body {
  font-family: var(--nk-sans);
  color: var(--ink-700);
  background-color: var(--tan-050);
}
html, body {
  /* Rebrand uses full-bleed heroes / grids; never allow horizontal scroll. */
  overflow-x: hidden;
}

/* The main nav is position:fixed (sticky breaks under overflow-x:hidden) and
   no longer occupies flow — pad the body so page content starts below it.
   Home's hero pulls itself back up under the transparent bar via a matching
   negative margin-top. */
body { padding-top: 74px; }
@media (max-width: 991px) {
  body { padding-top: 60px; }
}
/* Story page owns its top offset: its banner paints a nav-colored strip
   under the fixed bar itself, so the global body padding would add a second
   74px gap on top of it. */
body:has(.nk-story) { padding-top: 0; }

/* Legacy font classes from the original site. .font-new-de was the bolder
   "Demi" cut used on big headings; .font-new / .font-new-inter map to the
   regular serif / sans stacks. */
.font-new-de { font-family: 'Zapf Humanist 601 Demi', var(--nk-serif) !important; }
.font-new { font-family: var(--nk-serif) !important; }
.font-new-inter { font-family: var(--nk-sans) !important; }

/* serif heading / display helper */
.nk-serif { font-family: var(--nk-serif) !important; }
.nk-sans { font-family: var(--nk-sans) !important; }

/* ---- color helpers ---- */
.nk-bg-tan { background-color: var(--tan-100) !important; }
.nk-bg-tan-150 { background-color: var(--tan-150) !important; }
.nk-bg-tan-200 { background-color: var(--tan-200) !important; }
.nk-bg-tan-300 { background-color: var(--tan-300) !important; }
.nk-bg-gold { background-color: var(--gold-500) !important; }
.nk-text-gold { color: var(--gold-600) !important; }
.nk-text-ink { color: var(--ink-700) !important; }
.nk-text-dark { color: var(--ink-900) !important; }
.nk-text-muted { color: var(--ink-500) !important; }

/* ---- buttons (gold / outline) ---- */
.nk-btn-gold {
  background-color: var(--gold-500) !important;
  color: var(--tan-050) !important;
  border: none !important;
  border-radius: 0;
  letter-spacing: 0.06em;
  font-family: var(--nk-sans) !important;
  text-transform: uppercase;
}
.nk-btn-gold:hover { background-color: var(--gold-600) !important; color: #fff !important; }

.nk-btn-outline {
  background: transparent !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--ink-700) !important;
  border-radius: 0;
  letter-spacing: 0.06em;
  font-family: var(--nk-sans) !important;
  text-transform: uppercase;
}
.nk-btn-outline:hover { background-color: var(--ink-700) !important; color: var(--tan-050) !important; }

.nk-btn-outline-light {
  background: transparent !important;
  color: var(--tan-050) !important;
  border: 1px solid var(--tan-050) !important;
  border-radius: 0;
  letter-spacing: 0.06em;
  font-family: var(--nk-sans) !important;
  text-transform: uppercase;
}
.nk-btn-outline-light:hover { background-color: var(--tan-050) !important; color: var(--ink-900) !important; }

/* ---- section title / eyebrow ---- */
.nk-eyebrow {
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-family: var(--nk-sans) !important;
  font-weight: 600;
}
.nk-display-serif {
  font-family: var(--nk-serif) !important;
  color: var(--ink-900);
  font-weight: 400;
}
.nk-display-gold {
  font-family: var(--nk-serif) !important;
  color: var(--gold-600);
  font-weight: 400;
}

/* ---- generic card ---- */
.nk-card {
  background-color: var(--tan-150);
  border: 1px solid var(--tan-200);
  border-radius: 10px;
  overflow: hidden;
}

/* fix brand logo swap for the new drinkNOD wordmark */
.nk-brand .logo-show { display: block; }
.nk-brand .logo-hide { display: none; }

/* Non-rebranded pages (contact / faq) reuse the fixed solid nav: clear the
   old hero-under-nav offset so content isn't hidden behind the 74px bar. */
.write_container { padding-top: 26px; }
.container.bs-docs-container { padding-top: 40px; }

/* Shop / About / Products pages: content sits directly on the footer —
   cancel the footer's global margin-top there. */
body:has(.nk-shop) .nk-footer,
body:has(.nk-story) .nk-footer,
body:has(.nk-prod-page) .nk-footer { margin-top: 0; }