/* ============================================================================
   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;
  flex-shrink: 0;  /* safe for both flex and non-flex parents */
}

.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);
}
/* ── 11. Prose — long-form article body (the /log section) ───────────────── */
/* Wraps the rendered post HTML coming from the editor. One readable column.
   Styles paragraphs, headings, links, lists, quotes, images and figures.
   Float utilities let an image sit left/right with text wrapping around it;
   below 600px every floated image drops to full width so text never gets
   squeezed into a sliver. */
.gd-prose {
  font-family: var(--gd-font-sans);
  font-size: 1rem;            /* 16px — comfortable reading size */
  line-height: 1.75;
  color: var(--gd-color-text);
  max-width: 680px;
}
.gd-prose p { margin: 0 0 var(--gd-space-5); }
.gd-prose h2 {
  font-family: var(--gd-font-serif);
  font-size: var(--gd-text-2xl);
  font-weight: 600;
  line-height: 1.25;
  margin: var(--gd-space-8) 0 var(--gd-space-3);
}
.gd-prose h3 {
  font-family: var(--gd-font-serif);
  font-size: var(--gd-text-xl);
  font-weight: 600;
  margin: var(--gd-space-6) 0 var(--gd-space-2);
}
.gd-prose a {
  color: var(--gd-color-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.gd-prose a:hover { color: var(--gd-color-green-mid); }
.gd-prose ul, .gd-prose ol { margin: 0 0 var(--gd-space-5); padding-left: 1.4em; }
.gd-prose li { margin: var(--gd-space-1) 0; }
.gd-prose blockquote {
  clear: both;            /* never collide with a floated image above it */
  display: flow-root;     /* contain its own contents as a clean block   */
  margin: var(--gd-space-6) 0;
  padding: var(--gd-space-2) var(--gd-space-5);
  border-left: 3px solid var(--gd-color-green-mid);
  color: var(--gd-color-text-mid);
  font-style: italic;
}
.gd-prose blockquote p { margin: 0; }
.gd-prose hr {
  border: 0;
  border-top: var(--gd-border-thin) solid var(--gd-color-navy-soft);
  margin: var(--gd-space-8) 0;
}

/* Images + captions */
.gd-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gd-radius);
  display: block;
}
.gd-prose figure {            /* TinyMCE caption mode wraps img + figcaption */
  margin: var(--gd-space-6) 0;
  max-width: 100%;
}
.gd-prose figcaption {
  margin-top: var(--gd-space-2);
  font-size: var(--gd-text-sm);
  color: var(--gd-color-text-muted);
  font-style: italic;
  line-height: 1.5;
}

/* Float left / right — works whether the editor floats a bare <img> or a
   <figure>. Attribute selectors catch TinyMCE's inline float styles. */
.gd-prose figure[style*="float: left"],
.gd-prose img[style*="float: left"],
.gd-prose .gd-float-left {
  float: left;
  max-width: 48%;
  margin: var(--gd-space-1) var(--gd-space-6) var(--gd-space-3) 0;
}
.gd-prose figure[style*="float: right"],
.gd-prose img[style*="float: right"],
.gd-prose .gd-float-right {
  float: right;
  max-width: 48%;
  margin: var(--gd-space-1) 0 var(--gd-space-3) var(--gd-space-6);
}
.gd-prose::after { content: ""; display: block; clear: both; }  /* contain floats */

@media (max-width: 600px) {
  .gd-prose figure[style*="float"],
  .gd-prose img[style*="float"],
  .gd-prose .gd-float-left,
  .gd-prose .gd-float-right {
    float: none !important;
    max-width: 100% !important;
    margin: var(--gd-space-5) 0 !important;
  }
}


/* ── 12. Byline — author name + small round photo (brand element) ────────── */
.gd-byline {
  display: flex;
  align-items: center;
  gap: var(--gd-space-3);
}
.gd-byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: var(--gd-border-strong) solid var(--gd-color-green-mid);
  background: var(--gd-color-green-soft);
}
.gd-byline__who { line-height: 1.3; }
.gd-byline__name {
  font-weight: 600;
  color: var(--gd-color-text);
  font-size: var(--gd-text-base);
}
.gd-byline__meta {
  font-size: var(--gd-text-sm);
  color: var(--gd-color-text-muted);
}


/* ── 13. Log index — post list rows ─────────────────────────────────────── */
.gd-postlist { display: flex; flex-direction: column; gap: var(--gd-space-5); }
.gd-postcard {
  display: block;
  text-decoration: none;
  color: inherit;
  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);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gd-postcard:hover {
  border-color: var(--gd-color-green-mid);
  box-shadow: var(--gd-shadow-card);
}
.gd-postcard__meta {
  font-size: var(--gd-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gd-color-text-muted);
  margin-bottom: var(--gd-space-1);
}
.gd-postcard__title {
  font-family: var(--gd-font-serif);
  font-size: var(--gd-text-xl);
  font-weight: 600;
  color: var(--gd-color-text);
  margin: 0 0 var(--gd-space-2);
  line-height: 1.25;
}
.gd-postcard__excerpt {
  font-size: var(--gd-text-base);
  color: var(--gd-color-text-mid);
  line-height: 1.6;
  margin: 0;
}