/* ============================================================================
   gd-components.css — reusable component styles for grow-dammit.com
   ============================================================================
   Requires gd-tokens.css to be loaded first.

   Every component class is prefixed `.gd-` to avoid collision with any
   existing per-site styling. Components don't set page-level styles
   (margin, body bg) — those stay with each site's own stylesheet.

   Sections:
     1. Reset (minimal, scoped)
     2. Typography helpers
     3. Links
     4. Cards
     5. Info-box
     6. Section label
     7. Modal
     8. Nav — green variant (www, maps)
     9. Nav — monochrome variant (data dashboard)
    10. Drawer (mobile)
   ============================================================================ */

/* ── 1. Reset, very minimal ─────────────────────────────────────────────── */
.gd-nav, .gd-nav *,
.gd-modal, .gd-modal *,
.gd-card, .gd-info-box {
  box-sizing: border-box;
}


/* ── 2. Typography helpers ──────────────────────────────────────────────── */
.gd-heading {
  font-family: var(--gd-font-serif);
  font-weight: 600;
  color: var(--gd-color-text);
  line-height: 1.2;
}
.gd-heading-xl  { font-size: var(--gd-text-3xl); letter-spacing: -0.01em; }
.gd-heading-lg  { font-size: var(--gd-text-2xl); }
.gd-heading-md  { font-size: var(--gd-text-xl); }
.gd-heading-sm  { font-size: var(--gd-text-lg); }

.gd-text-muted  { color: var(--gd-color-text-muted); }
.gd-text-mid    { color: var(--gd-color-text-mid); }


/* ── 3. Links ───────────────────────────────────────────────────────────── */
.gd-link {
  color: var(--gd-color-green-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.gd-link:hover {
  border-bottom-color: var(--gd-color-green-mid);
}
.gd-link:focus-visible {
  outline: 2px solid var(--gd-color-green-mid);
  outline-offset: 2px;
  border-radius: var(--gd-radius-sm);
}


/* ── 4. Card ────────────────────────────────────────────────────────────── */
/* Soft surface with a thin border. Used for location/orchard summary
   cards on home, and similar overview surfaces. */
.gd-card {
  background: var(--gd-color-white);
  border: var(--gd-border-thin) solid var(--gd-color-navy-soft);
  border-radius: var(--gd-radius);
  padding: var(--gd-space-5) var(--gd-space-5);
}


/* ── 5. Info-box ────────────────────────────────────────────────────────── */
/* Strong-bordered white surface. The tooltip + overview pattern from
   the maps site. */
.gd-info-box {
  background: var(--gd-color-white);
  border: var(--gd-border-strong) solid var(--gd-color-navy);
  border-radius: var(--gd-radius);
  padding: var(--gd-space-3) var(--gd-space-4);
  box-shadow: var(--gd-shadow-card);
}
.gd-info-box__header {
  font-size: var(--gd-text-xs);
  font-weight: 600;
  color: var(--gd-color-navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: var(--gd-space-2);
  border-bottom: var(--gd-border-thin) solid #e0e0e0;
  margin-bottom: var(--gd-space-2);
}
.gd-info-box__row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: var(--gd-text-sm);
}
.gd-info-box__row strong {
  color: var(--gd-color-green-dark);
  font-weight: 600;
}


/* ── 6. Section label ───────────────────────────────────────────────────── */
/* Small uppercase tracked-out label for grouping content sections.
   Used as a header above lists, in modals, in drawer sections. */
.gd-section-label {
  font-family: var(--gd-font-sans);
  font-size: var(--gd-text-xs);
  font-weight: 600;
  color: var(--gd-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--gd-space-2);
}


/* ── 7. Modal ───────────────────────────────────────────────────────────── */
/* For About / Contact pop-ups on home (and anywhere else they're triggered
   from). JS adds `.gd-open` to both overlay and panel to show. */
.gd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 25, 45, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 1000;
}
.gd-modal-overlay.gd-open {
  opacity: 1;
  pointer-events: auto;
}

.gd-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1001;
  width: min(560px, calc(100vw - var(--gd-space-8)));
  max-height: calc(100vh - var(--gd-space-12));
  overflow-y: auto;
  background: var(--gd-color-white);
  border: var(--gd-border-strong) solid var(--gd-color-navy);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-float);
}
.gd-modal.gd-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.gd-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gd-space-4) var(--gd-space-5);
  border-bottom: var(--gd-border-thin) solid var(--gd-color-navy-soft);
}
.gd-modal__title {
  font-family: var(--gd-font-serif);
  font-size: var(--gd-text-lg);
  font-weight: 600;
  color: var(--gd-color-text);
}
.gd-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--gd-color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--gd-radius-sm);
}
.gd-modal__close:hover { color: var(--gd-color-text); }
.gd-modal__close:focus-visible {
  outline: 2px solid var(--gd-color-green-mid);
  outline-offset: 1px;
}
.gd-modal__body {
  padding: var(--gd-space-5);
  font-family: var(--gd-font-sans);
  font-size: var(--gd-text-base);
  line-height: 1.6;
  color: var(--gd-color-text-mid);
}


/* ── 8. Nav — green variant (www, maps) ─────────────────────────────────── */
/* Single-bar nav at every breakpoint. The bar has two flex children:
   the brand (mark + wordmark) on the left, and the cross-site links on
   the right. The hamburger appears only at tablet+mobile, replacing the
   inline cross-site links with a drawer.

   The global nav never carries the page title — the page's own header
   below it (if any) handles that. Keeps the chrome single-purpose. */

.gd-nav {
  font-family: var(--gd-font-sans);
  position: sticky;
  top: 0;
  z-index: 100;
}

.gd-nav__bar {
  background: var(--gd-color-green-dark);
  color: var(--gd-color-white);
  padding: 12px var(--gd-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gd-space-4);
  min-height: 56px;
}

/* Left side: hamburger (mobile/tablet) + brand */
.gd-nav__left {
  display: flex;
  align-items: center;
  gap: var(--gd-space-3);
  min-width: 0; /* allow wordmark to truncate if absurdly narrow */
}
.gd-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--gd-space-3);
  text-decoration: none;
  color: var(--gd-color-white);
}
.gd-nav__mark {
  display: block;
  flex-shrink: 0;
}
.gd-nav__wordmark {
  font-family: var(--gd-font-sans);
  font-size: var(--gd-text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gd-color-white);
  line-height: 1;
}

/* Right side: cross-site links */
.gd-nav__sites {
  display: flex;
  gap: var(--gd-space-6);
  font-size: var(--gd-text-sm);
  align-items: center;
  flex-shrink: 0;
}
.gd-nav__sites a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 4px 0;
  transition: color 120ms ease;
  line-height: 1;
}
.gd-nav__sites a:hover { color: var(--gd-color-white); }
.gd-nav__sites a[aria-current="page"] {
  color: var(--gd-color-white);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--gd-color-green-mid);
}
.gd-nav__sites a:focus-visible {
  outline: 2px solid var(--gd-color-green-mid);
  outline-offset: 3px;
  border-radius: var(--gd-radius-sm);
}

/* Hamburger: hidden by default (desktop), shown at tablet+mobile */
.gd-nav__hamburger {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--gd-radius-sm);
  flex-shrink: 0;
}
.gd-nav__hamburger:focus-visible {
  outline: 2px solid var(--gd-color-green-mid);
  outline-offset: 2px;
}
.gd-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gd-color-white);
  border-radius: 2px;
}

/* TABLET (720–1099px): inline cross-site nav, no hamburger. Same as desktop. */

/* MOBILE (<720px): hamburger appears, inline sites hide, drawer takes over */
@media (max-width: 719px) {
  .gd-nav__bar {
    padding: 12px var(--gd-space-4);
    min-height: 48px;
  }
  .gd-nav__hamburger { display: flex; }
  .gd-nav__sites { display: none; }
  .gd-nav__wordmark { font-size: var(--gd-text-sm); }
}


/* ── 9. Nav — monochrome variant (data dashboard) ───────────────────────── */
/* The data dashboard's body uses Inter + monochrome. The nav still appears
   green to identify the brand, but with subtle tweaks so it sits over the
   monochrome aesthetic without clashing — slightly thinner, less shadow. */
.gd-nav--mono .gd-nav__bar {
  background: var(--gd-color-green-dark);
  padding-top: 10px;
  padding-bottom: 10px;
}
.gd-nav--mono {
  /* Use Inter inside the data-site nav for visual continuity with the
     dashboard body, but keep the wordmark style consistent with brand. */
  font-family: 'Inter', var(--gd-font-sans);
}
.gd-nav--mono .gd-nav__wordmark {
  font-family: 'Inter', var(--gd-font-sans);
}


/* ── 10. Drawer (mobile) ────────────────────────────────────────────────── */
.gd-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 25, 45, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 99;
}
.gd-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 80vw);
  background: var(--gd-color-warm-white);
  border-right: var(--gd-border-thin) solid var(--gd-color-navy-soft);
  z-index: 101;
  transform: translateX(-100%);
  transition: transform 220ms ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 719px) {
  .gd-drawer-overlay { display: block; }
  .gd-drawer { display: block; }
  .gd-drawer-overlay.gd-open { opacity: 1; pointer-events: auto; }
  .gd-drawer.gd-open { transform: translateX(0); }
}

.gd-drawer__header {
  background: var(--gd-color-green-dark);
  color: var(--gd-color-white);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gd-drawer__close {
  background: none;
  border: none;
  color: var(--gd-color-white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--gd-radius-sm);
}
.gd-drawer__close:focus-visible {
  outline: 2px solid var(--gd-color-green-mid);
  outline-offset: 2px;
}

.gd-drawer__section {
  padding: 14px 16px 8px;
}
.gd-drawer__section + .gd-drawer__section {
  border-top: var(--gd-border-thin) solid var(--gd-color-navy-soft);
  margin-top: 4px;
}

.gd-drawer__sites a {
  display: block;
  padding: 9px 10px;
  font-size: var(--gd-text-base);
  color: var(--gd-color-text);
  text-decoration: none;
  border-radius: var(--gd-radius-sm);
  border-left: 3px solid transparent;
  margin-bottom: 1px;
}
.gd-drawer__sites a[aria-current="page"] {
  color: var(--gd-color-green-dark);
  font-weight: 600;
  background: var(--gd-color-green-soft);
  border-left-color: var(--gd-color-green-mid);
  border-radius: 0;
}
.gd-drawer__sites a:hover {
  background: rgba(8, 25, 45, 0.04);
}