/* ns-chrome.css — shared NapaServe site chrome (nav + drawer + footer) for
   standalone public/ pages that live outside the React SPA and therefore can't
   import NavBar.jsx / Footer.jsx. Pair with /ns-chrome.js, which injects the
   markup. Single source of truth for static-page chrome — change the links in
   ns-chrome.js and the styles here, and every static page updates.
   Palette + type mirror NavBar.jsx / Footer.jsx. */

:root {
  --ns-cream: #F5F0E8;
  --ns-surface: #EDE8DE;
  --ns-ink: #2C1810;
  --ns-accent: #8B5E3C;
  --ns-muted: #7A6A50;
  --ns-dim: #8B7355;
  --ns-rule: rgba(44,24,16,0.12);
  --ns-serif: 'Libre Baskerville', Georgia, serif;
  --ns-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, Helvetica, Arial, sans-serif;
}

/* nav bar */
.ns-nav { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 24px; background: var(--ns-cream); border-bottom: 1px solid var(--ns-rule); font-family: var(--ns-sans); box-sizing: border-box; }
.ns-nav-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ns-wordmark { font-family: var(--ns-serif); font-size: 19px; font-weight: 700; color: var(--ns-ink); text-decoration: none; flex-shrink: 0; }
.ns-tagline { font-size: 11px; color: var(--ns-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-hamburger { background: none; border: 1px solid var(--ns-rule); cursor: pointer; padding: 7px 10px;
  display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.ns-hamburger span { display: block; width: 18px; height: 1.5px; background: var(--ns-muted); transition: transform .2s, opacity .2s; }
.ns-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ns-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ns-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* drawer */
.ns-overlay { position: fixed; inset: 0; z-index: 999; }
.ns-overlay[hidden], .ns-drawer[hidden] { display: none; }
.ns-drawer { position: fixed; top: 52px; right: 0; width: 260px; background: var(--ns-cream);
  border: 1px solid var(--ns-rule); border-top: none; box-shadow: 0 8px 24px rgba(44,24,16,0.1);
  z-index: 1000; max-height: calc(100vh - 52px); overflow-y: auto; font-family: var(--ns-sans); box-sizing: border-box; }
.ns-drawer-home { display: block; padding: 14px 20px; font-size: 13px; font-weight: 700; color: var(--ns-accent);
  text-decoration: none; border-bottom: 1px solid var(--ns-rule); }
.ns-group { padding: 10px 0; border-bottom: 1px solid var(--ns-rule); }
.ns-group:last-child { border-bottom: none; }
.ns-group-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ns-dim); padding: 4px 20px 2px; }
.ns-group-desc { font-size: 11px; color: #7A6B50; padding: 0 20px 6px; line-height: 1.4; }
.ns-drawer a.ns-link { display: block; font-size: 13px; font-weight: 600; color: var(--ns-muted); text-decoration: none; padding: 8px 20px; }
.ns-drawer a.ns-link:hover { background: var(--ns-surface); }
.ns-drawer a.ns-current { color: var(--ns-accent); background: var(--ns-surface); }

/* footer */
.ns-footer { padding: 48px 28px 28px; background: var(--ns-cream); border-top: 1px solid var(--ns-rule); margin-top: 0; font-family: var(--ns-sans); }
.ns-footer-inner { max-width: 1160px; margin: 0 auto; }
.ns-fbrand { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--ns-rule); }
.ns-fbrand-n { font-family: var(--ns-serif); font-size: 20px; font-weight: 700; color: var(--ns-ink); margin: 0 0 4px; }
.ns-fbrand-d { font-size: 14px; color: var(--ns-dim); margin: 0; }
.ns-fgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--ns-rule); }
.ns-fcol h4 { font-size: 13px; font-weight: 700; color: var(--ns-ink); margin: 0 0 12px; }
.ns-fcol a { display: block; font-size: 14px; color: var(--ns-muted); padding: 3px 0; text-decoration: none; }
.ns-fcol a:hover { color: var(--ns-accent); }
.ns-fbottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.ns-fbottom span, .ns-fbottom a { font-size: 14px; color: var(--ns-dim); text-decoration: none; }
.ns-fver { font-size: 11px; color: var(--ns-dim); opacity: .8; }
/* newsletter row */
.ns-fgrid-news { display: grid; grid-template-columns: 1fr 3fr; gap: 16px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ns-rule); }
.ns-fnews-copy { font-size: 14px; color: var(--ns-muted); margin: 0 0 12px; max-width: 520px; line-height: 1.6; }
.ns-sub-form { display: flex; gap: 8px; max-width: 460px; flex-wrap: wrap; }
.ns-sub-in { flex: 1; min-width: 140px; background: transparent; border: none; border-bottom: 1px solid var(--ns-rule);
  padding: 8px 0; font-family: var(--ns-sans); font-size: 13px; color: var(--ns-ink); outline: none; }
.ns-sub-in:focus { border-color: var(--ns-accent); }
.ns-sub-in::placeholder { color: var(--ns-dim); }
.ns-sub-btn { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--ns-ink);
  color: var(--ns-cream); border: none; padding: 10px 18px; cursor: pointer; white-space: nowrap; font-family: var(--ns-sans); }
.ns-sub-btn:disabled { opacity: .6; cursor: default; }
.ns-sub-msg { font-size: 14px; font-family: var(--ns-sans); margin: 8px 0 0; }
@media (max-width: 900px) { .ns-fgrid { grid-template-columns: 1fr 1fr; } .ns-fgrid-news { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ns-tagline { display: none; } }