/* Soja Foods — shared design tokens + cross-page UI primitives */
:root {
  /* Refined Warm 色系 (v2) */
  --yuba-gold: #C8923C;   /* deeper, closer to real dried yuba */
  --yuba-deep: #9C6F24;
  --yuba-light: #E0B96A;

  --forest: #122b1f;
  --forest-dark: #122b1f;

  --cream: #FAF5EA;       /* warm ivory */
  --cream-soft: #FDFAF1;  /* lightest */
  --rice: #E8DCC0;        /* mid-warm for surfaces */

  --ink: #1A1A1A;
  --clay: #B54A2A;        /* soy-sauce red-brown */
  --jade: #4A6E5D;
}

/* ──────────────────────────────────────────────────────────────
   Cookie consent banner (paired with /consent.js)
   ────────────────────────────────────────────────────────────── */
.consent-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000;
  max-width: 440px; margin-left: auto;
  background: var(--forest); color: var(--cream);
  border: 1px solid rgba(245,239,223,0.15);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  padding: 0.9rem 1.05rem 0.95rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem; line-height: 1.45;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.consent-banner.cb-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
.cb-inner { position: relative; display: flex; flex-direction: column; gap: 0.65rem; }
.cb-close {
  position: absolute; bottom: -0.2rem; right: -0.2rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: rgba(245,239,223,0.4); font-size: 0.95rem; line-height: 1;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.cb-close:hover { color: var(--cream); background: rgba(245,239,223,0.08); }
.cb-text { color: rgba(245,239,223,0.85); margin: 0; padding-right: 0.4rem; }
.cb-link { color: var(--yuba-gold); border-bottom: 1px solid rgba(200,146,60,0.4); text-decoration: none; }
.cb-link:hover { color: var(--yuba-light); border-bottom-color: var(--yuba-light); }
.cb-btn {
  padding: 0.42rem 0.95rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600;
  cursor: pointer; border: none;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cb-accept { background: var(--yuba-gold); color: var(--forest); }
.cb-accept:hover { background: var(--yuba-light); }
/* Big primary "Got it" — used in permissive (non-strict) banner */
.cb-accept-large {
  display: block; width: 100%;
  padding: 0.78rem 1.4rem;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(200,146,60,0.25);
  margin-top: 0.15rem;
}
.cb-accept-large:hover { box-shadow: 0 6px 18px rgba(200,146,60,0.35); transform: translateY(-1px); }
/* Tiny "Opt out" text link — kept for CCPA but visually de-emphasized */
.cb-opt-out {
  align-self: center;
  font-size: 0.7rem; font-weight: 400;
  color: rgba(245,239,223,0.45);
  text-decoration: underline; text-underline-offset: 2px;
  margin-top: 0.1rem;
  transition: color 0.15s ease;
}
.cb-opt-out:hover { color: rgba(245,239,223,0.8); }
/* Strict region keeps the old equal-weight reject button */
.cb-reject { background: transparent; color: rgba(245,239,223,0.7); border: 1px solid rgba(245,239,223,0.22); }
.cb-reject:hover { background: rgba(245,239,223,0.08); border-color: rgba(245,239,223,0.45); color: var(--cream); }
.cb-strict .cb-buttons { display: flex; gap: 0.6rem; justify-content: flex-end; }
.cb-strict .cb-btn { padding: 0.7rem 1.5rem; font-size: 0.9rem; font-weight: 700; }
.cb-strict .cb-accept { box-shadow: 0 2px 10px rgba(200,146,60,0.22); }
.cb-strict .cb-accept:hover { box-shadow: 0 3px 14px rgba(200,146,60,0.32); }
@media (max-width: 540px) {
  .consent-banner { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; padding: 0.85rem 0.95rem; }
}

/* ─── Permissive (US) variant: full-width bottom bar ─── */
.consent-banner.cb-bar {
  left: 0; right: 0; bottom: 0;
  max-width: none; margin: 0;
  border: none; border-top: 1px solid rgba(245,239,223,0.12);
  border-radius: 0;
  padding: 0.7rem 1.5rem 0.75rem;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.18);
}
.consent-banner.cb-bar .cb-inner {
  flex-direction: row; align-items: center; gap: 1rem;
  max-width: 1440px; margin: 0 auto;
}
.consent-banner.cb-bar .cb-text { flex: 1; margin: 0; padding-right: 0; font-size: 0.8rem; }
.consent-banner.cb-bar .cb-accept-large {
  display: inline-block; width: auto; margin-top: 0;
  padding: 0.72rem 1.6rem; font-size: 0.95rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(200,146,60,0.2);
  border-radius: 999px;
}
.consent-banner.cb-bar .cb-accept-large:hover { box-shadow: 0 3px 14px rgba(200,146,60,0.3); transform: none; }
.consent-banner.cb-bar .cb-opt-out {
  align-self: center; margin-top: 0; white-space: nowrap;
  font-size: 0.74rem;
}
.consent-banner.cb-bar .cb-close {
  position: static; flex: none;
  width: 1.6rem; height: 1.6rem;
  font-size: 1.05rem;
}
@media (max-width: 720px) {
  .consent-banner.cb-bar { padding: 0.7rem 0.9rem 0.8rem; }
  .consent-banner.cb-bar .cb-inner { flex-wrap: wrap; gap: 0.55rem 0.8rem; }
  .consent-banner.cb-bar .cb-text { flex: 1 1 100%; font-size: 0.76rem; line-height: 1.4; }
  .consent-banner.cb-bar .cb-close { position: absolute; top: 0.35rem; right: 0.4rem; }
}

/* ──────────────────────────────────────────────────────────────
   Shared top-nav baseline (paired with each page's nav HTML).
   Per-page CSS may still override background / scroll behavior.
   ────────────────────────────────────────────────────────────── */
.brand-mark {
  display: flex; align-items: baseline; gap: 0.4rem;
  color: var(--forest); text-decoration: none;
}
.brand-mark .word {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 1.4rem; letter-spacing: -0.04em;
}
.brand-mark .dot  {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--yuba-gold); margin: 0 0.1rem 0.15rem;
}
.brand-mark .type {
  font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  opacity: 0.7; font-weight: 500;
}

nav.top .nav-links,
.nav-links {
  font-size: 0.85rem; font-weight: 500; gap: 1.75rem;
}
nav.top .nav-links a,
.nav-links a { color: inherit; text-decoration: none; }

.wholesale-pill,
.cta-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--yuba-gold); color: var(--forest);
  padding: 0.5rem 1.1rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid var(--yuba-gold);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.wholesale-pill:hover,
.cta-pill:hover { background: var(--yuba-light); border-color: var(--yuba-light); }

/* ──────────────────────────────────────────────────────────────
   Shared footer (3-col with newsletter / contact column)
   Used on: index, what-is-yuba, recipes, press
   Wholesale + privacy/terms keep their own context footers.
   ────────────────────────────────────────────────────────────── */
footer {
  background: var(--forest); color: rgba(245, 239, 223, 0.7);
  padding: 4rem 0 2.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
footer a { color: inherit; text-decoration: none; }
/* Unified footer inner width across all pages — overrides per-page .container caps */
footer > .container { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { footer > .container { padding: 0 3rem; } }
.footer-top {
  display: grid; gap: 3rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) { .footer-top { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }
.footer-brand .brand-mark { color: var(--cream); margin-bottom: 1.25rem; }
.footer-brand .brand-mark .word { font-size: 1.75rem; }
.footer-tagline {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 1.15rem; color: rgba(245, 239, 223, 0.55);
  max-width: 300px; line-height: 1.5;
}
.footer-col h4 {
  font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--yuba-gold); margin-bottom: 1rem; font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.5rem; font-size: 0.88rem; }
.footer-col a:hover { color: var(--cream); }
.footer-signup p {
  font-size: 0.85rem; color: rgba(245, 239, 223, 0.55);
  margin-bottom: 0.75rem; line-height: 1.5;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 239, 223, 0.08);
  font-size: 0.75rem; color: rgba(245, 239, 223, 0.4);
}
.footer-bottom .links { display: flex; gap: 1.25rem; }
.footer-bottom a:hover { color: rgba(245, 239, 223, 0.8); }

/* ──────────────────────────────────────────────────────────────
   Display-outline — text filled with the real soybean photo
   (used as a brand accent across headlines on every page)
   ────────────────────────────────────────────────────────────── */
.display-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: #C8923C;
  background-image: url('img/soybeans-bg.webp');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
@media (max-width: 900px), (hover: none) {
  .display-outline { background-attachment: scroll; }
}

/* Solid gold accent — same brand color as display-outline,
   without the image texture. Use for emphasis at smaller weight. */
.accent-gold { color: #C8923C; }