/* ============================================================
 * Greenfield — shared site stylesheet
 * Loaded by every page. Defines design tokens, base reset, the
 * page-width container, and the floating title nav. Page-specific
 * styles live inside each page's own <style> block.
 * ============================================================ */

:root {
  /* Brand palette */
  --white:      #FFFFFF;
  --black:      #000000;
  --cream:      #FBFAF5;
  --page-bg:    #F1EEE4;
  --ink:        #1F4D2B;
  --green:      #3B7A3F;
  --green-dark: #2A5C2E;
  --green-soft: #6BA85F;
  --green-bg:   #E6F1DC;
  --rule:       #D6D2C2;
  --muted:      #6B7A6E;
  --danger:     #8C3B2A;

  /* Type stacks */
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout — the single source of truth for page width across the site.
     Any page wrapper using .page (and the .topnav) tracks these values, so
     the nav bar and page body always line up. */
  --page-max:    1400px;
  --page-gutter: 1.5rem;   /* horizontal breathing room per side */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Reserve scrollbar space whether or not the page actually scrolls. Prevents
   the centered nav bar from "jittering" wider/narrower across pages. */
html {
  height: 100%;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Standard page container. Use as <main class="page"> on every page so the
   body content stays aligned with the floating nav bar above it. */
.page {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--page-max);
  margin: 0 auto;
}

/* ============================================================
 * Floating title nav (markup lives in includes/topnav.php)
 * ============================================================ */

.topnav {
  margin: 1.25rem auto;
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--page-max);
  background: var(--white);
  border: 1.5px solid var(--green);
  border-radius: 14px;
  padding: clamp(0.35rem, 0.75vw, 0.55rem) clamp(0.75rem, 1.5vw, 1.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 4px 18px rgba(31, 77, 43, 0.10), 0 1px 2px rgba(31, 77, 43, 0.06);
  font-family: var(--font-head);
  box-sizing: border-box;
}

.topnav .brand {
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 0.18s;
}
.topnav .brand:hover { color: var(--green-dark); }
.topnav .brand:focus-visible {
  outline: 2px solid var(--green-soft);
  outline-offset: 4px;
  border-radius: 4px;
}
.topnav .brand .dot {
  width: 0.65rem;
  height: 0.65rem;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}
.topnav .brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.topnav .brand-title {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: -0.01em;
  line-height: 1;
}
.topnav .brand-subtitle {
  font-weight: 500;
  font-size: clamp(0.6rem, 0.8vw, 0.7rem);
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1;
  margin-top: 0.18rem;
  white-space: nowrap;
}
.topnav .brand:hover .brand-subtitle { color: var(--green-dark); }

.topnav ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.topnav ul a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--green);
  border-radius: 8px;
  background: var(--white);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.topnav ul a:hover {
  background: var(--green-bg);
  border-color: var(--green-soft);
}
.topnav ul a.active,
.topnav ul a.active:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

/* The Home link only appears inside the mobile dropdown — on desktop the
   brand text already serves as the home link. */
.topnav ul .nav-home-mobile { display: none; }

/* Hamburger menu toggle. Hidden on desktop; shown only at narrow widths. */
.topnav .menu-toggle {
  display: none;
  background: var(--white);
  border: 1.5px solid var(--green);
  color: var(--ink);
  border-radius: 8px;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.18s, border-color 0.18s;
}
.topnav .menu-toggle:hover {
  background: var(--green-bg);
  border-color: var(--green-soft);
}
.topnav .menu-toggle:focus-visible {
  outline: 2px solid var(--green-soft);
  outline-offset: 2px;
}
.topnav .menu-toggle svg { display: block; }

@media (max-width: 560px) {
  /* Reposition the menu as a dropdown anchored under the nav bar. */
  .topnav { position: relative; }
  .topnav .menu-toggle { display: inline-flex; }
  .topnav ul {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 12rem;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--white);
    border: 1.5px solid var(--green);
    border-radius: 14px;
    padding: 0.6rem;
    box-shadow: 0 6px 22px rgba(31, 77, 43, 0.12);
    z-index: 30;
  }
  .topnav.menu-open ul { display: flex; }
  .topnav ul .nav-home-mobile { display: list-item; }
  .topnav ul a {
    display: block;
    text-align: center;
    padding: 0.55rem 1rem;
  }
}

@media (max-width: 420px) {
  /* On the narrowest phones, drop the subtitle to keep the nav bar tight. */
  .topnav .brand-subtitle { display: none; }
}