/* ════════════════════════════════════════════════════════════════════
   WPMC brand layer for MycoTracker
   ────────────────────────────────────────────────────────────────────
   MycoTracker is part of the Western Pennsylvania Mushroom Club's
   estate, not a separate product, so it wears the same palette and
   typography as wpamushroomclub.org.

   The nine app pages are plain HTML on top of Pico CSS v2, so this
   file does its work in two passes rather than by rewriting markup:

     1. Define the WPMC tokens once (--wpmc-*).
     2. Re-point Pico's own theme variables (--pico-*) at them, so
        every existing rule in every page — including the per-page
        inline styles that already say var(--pico-primary) — inherits
        the brand for free.

   Only the shared chrome (.wpmc-header / .wpmc-footer, injected by
   wpmc-chrome.js) is new markup.

   Load order matters: this file must come AFTER the Pico <link>.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Brand tokens ────────────────────────────────────────────── */
:root {
  --wpmc-green:        #14260F;  /* nav background, headings          */
  --wpmc-green-dark:   #0B1709;  /* footer background                 */
  --wpmc-green-light:  #3E5A2C;  /* lighter green chrome              */
  --wpmc-orange:       #E8833A;  /* CTAs, accents, eyebrow labels     */
  --wpmc-orange-light: #F7D4BA;  /* accent text on dark backgrounds   */
  --wpmc-cream:        #FAFAF5;  /* page background                   */
  --wpmc-cream-warm:   #F5F0E8;  /* alternate section / row hover     */
  --wpmc-border:       #E2DDD4;  /* borders                           */
  --wpmc-divider:      #D4CEC0;  /* grid gaps                         */
  --wpmc-text:         #1C1B17;  /* body text                         */
  --wpmc-text-muted:   #5C5B54;  /* secondary text                    */
  --wpmc-text-soft:    #6B6960;  /* descriptions                      */
  --wpmc-text-faint:   #7A7268;  /* metadata                          */
  --wpmc-text-faintest:#9B8E80;  /* dates, low-emphasis labels        */

  /* Brand orange is a display colour: at 2.6:1 on cream it is not
     legible as body-copy link text. For links and other small text we
     use the deeper amber the main site already carries in its
     badge/callout family (#92500F, ~5.9:1 on cream). Full-strength
     --wpmc-orange stays for large type, rules, dots and dark grounds,
     where it is doing the job it was picked for. */
  --wpmc-amber-deep:   #92500F;
  --wpmc-amber-darker: #7A3D0E;

  --wpmc-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --wpmc-sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wpmc-header-h: 84px;   /* also the offset for in-page sticky bars */
}

/* ── 2. Pico re-theme ───────────────────────────────────────────── */
/* Pico scopes its light theme at :root:not([data-theme=dark]) and its
   dark theme (under prefers-color-scheme) at :root:not([data-theme]).
   html:root:not([data-theme="dark"]) outranks both, so the club's
   light palette holds regardless of the visitor's OS setting — the
   same as wpamushroomclub.org, which has no dark mode. */
html:root:not([data-theme="dark"]) {
  color-scheme: light;

  --pico-font-family-sans-serif: var(--wpmc-sans);
  --pico-font-family: var(--wpmc-sans);
  --pico-border-radius: 0.5rem;

  --pico-background-color: var(--wpmc-cream);
  --pico-color: var(--wpmc-text);
  --pico-muted-color: var(--wpmc-text-muted);
  --pico-muted-border-color: var(--wpmc-border);
  --pico-text-selection-color: rgba(232, 131, 58, .25);

  --pico-h1-color: var(--wpmc-green);
  --pico-h2-color: var(--wpmc-green);
  --pico-h3-color: var(--wpmc-green);
  --pico-h4-color: var(--wpmc-text);
  --pico-h5-color: var(--wpmc-text);
  --pico-h6-color: var(--wpmc-text-muted);

  /* Links / accents */
  --pico-primary: var(--wpmc-amber-deep);
  --pico-primary-hover: var(--wpmc-amber-darker);
  --pico-primary-focus: rgba(232, 131, 58, .5);
  --pico-primary-underline: rgba(146, 80, 15, .4);
  --pico-primary-hover-underline: var(--wpmc-amber-darker);

  /* Primary buttons: solid dark green + white. The brand's orange pill
     (.wpmc-btn below) is a display CTA; at the size and density of this
     tool's buttons white-on-orange would not clear WCAG AA, and the
     main site's dark-green/white pairing is just as much the brand. */
  --pico-primary-background: var(--wpmc-green);
  --pico-primary-border: var(--wpmc-green);
  --pico-primary-inverse: #fff;
  --pico-primary-hover-background: var(--wpmc-green-light);
  --pico-primary-hover-border: var(--wpmc-green-light);

  --pico-secondary: var(--wpmc-text-muted);
  --pico-secondary-hover: var(--wpmc-text);
  --pico-secondary-background: var(--wpmc-green-light);
  --pico-secondary-border: var(--wpmc-green-light);
  --pico-secondary-inverse: #fff;
  --pico-secondary-hover-background: var(--wpmc-green);
  --pico-secondary-hover-border: var(--wpmc-green);
  --pico-secondary-focus: rgba(62, 90, 44, .35);
  --pico-secondary-underline: rgba(92, 91, 84, .4);

  --pico-contrast: var(--wpmc-green);
  --pico-contrast-hover: var(--wpmc-green-dark);
  --pico-contrast-background: var(--wpmc-green);
  --pico-contrast-border: var(--wpmc-green);
  --pico-contrast-inverse: #fff;

  --pico-card-background-color: #fff;
  --pico-card-border-color: var(--wpmc-border);
  --pico-card-sectioning-background-color: var(--wpmc-cream-warm);
  --pico-card-box-shadow: 0 1px 2px rgba(40, 30, 10, .06);
  --pico-box-shadow: 0 1px 2px rgba(40, 30, 10, .06);
  --pico-dropdown-background-color: #fff;
  --pico-dropdown-border-color: var(--wpmc-border);
  --pico-dropdown-hover-background-color: var(--wpmc-cream-warm);

  --pico-table-border-color: var(--wpmc-border);
  --pico-table-row-stripped-background-color: var(--wpmc-cream-warm);

  --pico-form-element-background-color: #fff;
  --pico-form-element-border-color: var(--wpmc-divider);
  --pico-form-element-color: var(--wpmc-text);
  --pico-form-element-placeholder-color: var(--wpmc-text-faintest);
  --pico-form-element-active-background-color: #fff;
  --pico-form-element-active-border-color: var(--wpmc-green-light);
  --pico-form-element-focus-color: var(--wpmc-green-light);
  --pico-form-element-selected-background-color: var(--wpmc-green-light);
  --pico-switch-checked-background-color: var(--wpmc-green-light);
  --pico-range-thumb-color: var(--wpmc-green-light);
  --pico-range-active-border-color: var(--wpmc-green-light);
  --pico-progress-color: var(--wpmc-green-light);
  --pico-loading-spinner-opacity: .6;

  --pico-blockquote-border-color: var(--wpmc-orange);
  --pico-blockquote-footer-color: var(--wpmc-text-faint);
  --pico-mark-background-color: #FEF3E2;
  --pico-mark-color: var(--wpmc-amber-deep);
  --pico-code-background-color: var(--wpmc-cream-warm);
  --pico-code-color: var(--wpmc-text-muted);
  --pico-accordion-border-color: var(--wpmc-border);
  --pico-accordion-close-summary-color: var(--wpmc-green);
  --pico-accordion-open-summary-color: var(--wpmc-green-light);
  --pico-accordion-active-summary-color: var(--wpmc-green-light);
  --pico-tooltip-background-color: var(--wpmc-green);
  --pico-tooltip-color: #fff;
  --pico-modal-overlay-background-color: rgba(11, 23, 9, .55);
}

/* ── 3. Typography ──────────────────────────────────────────────── */
/* Serif for the display sizes only. h4–h6 are used as small in-app
   labels, where DM Sans stays readable — this mirrors the main site,
   whose .h4 is also sans. */
h1, h2, h3,
.wpmc-serif {
  font-family: var(--wpmc-serif);
  font-weight: 400;
  letter-spacing: -.01em;
}
h4, h5, h6 { font-weight: 600; letter-spacing: -.005em; }

/* Small all-caps orange label above a heading — the main site's
   .eyebrow, kept for the app chrome. */
.wpmc-eyebrow {
  font-size: 12px;
  color: var(--wpmc-amber-deep);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── 4. Buttons ─────────────────────────────────────────────────── */
button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"] {
  border-radius: 999px;
  font-weight: 600;
}
/* --pico-border-radius is softer now; keep checkboxes square-cornered so
   they stay visually distinct from the radio buttons beside them. */
[type="checkbox"] { border-radius: .25rem; }

/* Brand pills, for chrome CTAs. Primary is the main site's solid
   orange; secondary is the same shape, transparent with a hairline. */
.wpmc-btn, .wpmc-btn--secondary {
  display: inline-block;
  padding: 13px 30px;
  font-family: var(--wpmc-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.wpmc-btn { background: var(--wpmc-orange); color: #fff; border-color: var(--wpmc-orange); }
.wpmc-btn:hover { background: var(--wpmc-amber-deep); border-color: var(--wpmc-amber-deep); }
.wpmc-btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); font-weight: 500; }
.wpmc-btn--secondary:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

/* ── 5. Header ──────────────────────────────────────────────────── */
/* 84px sticky green bar, matching wpamushroomclub.org. */
.wpmc-header {
  background: var(--wpmc-green);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: var(--wpmc-sans);
  /* Pico pads every direct body>header; the bar sets its own height, and
     --wpmc-header-h has to stay honest for the sticky offsets below. */
  padding-block: 0;
  /* Matches wpamushroomclub.org: a one-pixel inset highlight so the bar keeps a
     defined lower edge instead of dissolving into whatever sits beneath it. */
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.09);
}
.wpmc-header__inner {
  min-height: var(--wpmc-header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Wordmark — the way back to the club's main site. */
.wpmc-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
/* LOGO-PLACEHOLDER (WPM-136): un-vectorized raster club mark. */
.wpmc-header__mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}
.wpmc-header__wordmark {
  font-family: var(--wpmc-serif);
  font-size: 28px;
  line-height: 1;
  color: #fff;
  letter-spacing: -.3px;
}
.wpmc-header__brand:hover .wpmc-header__wordmark { color: var(--wpmc-orange-light); }

/* App name, hung off the wordmark so the hierarchy — club first,
   tool second — is legible at a glance. */
.wpmc-header__app {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wpmc-orange-light);
  flex-shrink: 0;
}
.wpmc-header__app::before {
  content: "";
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, .18);
}
.wpmc-header__app:hover { color: var(--wpmc-orange); }

.wpmc-header__nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-left: auto;
  /* Pico styles bare <nav> as space-between; these two are laid out by
     their own gap, so opt out of that. */
  justify-content: flex-start;
}
.wpmc-header__nav a {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.wpmc-header__nav a:hover,
.wpmc-header__nav a:focus-visible,
.wpmc-header__nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.wpmc-header__utility {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* Explicit route home, alongside the wordmark link. */
.wpmc-backlink {
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.wpmc-backlink:hover { color: var(--wpmc-orange-light); text-decoration: underline; }

/* Auth controls, re-homed from the old Pico nav. */
.wpmc-header__auth { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255, 255, 255, .82); }
.wpmc-header__auth a[role="button"],
.wpmc-header__auth button {
  --pico-color: #fff;
  --pico-border-color: rgba(255, 255, 255, .45);
  --pico-background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  font-size: .8rem;
  padding: .3rem .8rem;
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
}
.wpmc-header__auth a[role="button"]:hover,
.wpmc-header__auth button:hover {
  --pico-background-color: rgba(255, 255, 255, .1);
  --pico-border-color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
  color: #fff;
}
.wpmc-header__auth a:not([role="button"]) { color: var(--wpmc-orange-light); }

/* Focus states: visible against the dark bar. */
.wpmc-header a:focus-visible,
.wpmc-header button:focus-visible {
  outline: 2px solid var(--wpmc-orange);
  outline-offset: 2px;
}

/* Below 1450px the bar is too narrow to carry the wordmark, the nav and
   both utility items on one line. The wordmark still links home and the
   footer always carries the explicit back-link, so the short one in the
   bar is what gives way first — on the two pages that also show auth
   controls. */
@media (max-width: 1535px) {
  .wpmc-header__nav a { font-size: 14px; padding: 8px 11px; }
  .wpmc-header__app { letter-spacing: .12em; }
  .wpmc-header--auth .wpmc-backlink { display: none; }
}

/* Narrower than Pico's xl container the bar stacks. It stops being
   sticky at the same moment, and --wpmc-header-h drops to 0 so the
   pages' own sticky sub-headers go back to top: 0. */
@media (max-width: 1279px) {
  :root { --wpmc-header-h: 0px; }
  .wpmc-header { position: static; }
  .wpmc-header__inner { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .wpmc-header__nav { margin-left: 0; width: 100%; order: 3; }
  .wpmc-header__utility { margin-left: auto; }
  .wpmc-header--auth .wpmc-backlink { display: inline; }
}
@media (max-width: 560px) {
  .wpmc-header__app { display: none; }
  .wpmc-backlink { display: none; }
  .wpmc-header--auth .wpmc-backlink { display: none; }
}

/* ── 6. Footer ──────────────────────────────────────────────────── */
.wpmc-footer {
  background: var(--wpmc-green-dark);
  font-family: var(--wpmc-sans);
  margin-top: 64px;
  padding: 48px 0 0;
}
.wpmc-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.wpmc-footer__brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wpmc-footer__wordmark { font-family: var(--wpmc-serif); font-size: 32px; color: #fff; letter-spacing: -.5px; }
.wpmc-footer__org { font-size: 13px; color: rgba(255, 255, 255, .35); }
.wpmc-footer__links { display: flex; justify-content: flex-start; gap: 8px 28px; flex-wrap: wrap; padding: 26px 0; }
.wpmc-footer__links a { color: rgba(255, 255, 255, .6); font-size: 15px; text-decoration: none; }
.wpmc-footer__links a:hover { color: var(--wpmc-orange-light); }
.wpmc-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wpmc-footer__bar p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .28); }
.wpmc-footer a:focus-visible, .wpmc-footer button:focus-visible {
  outline: 2px solid var(--wpmc-orange);
  outline-offset: 3px;
}

/* ── Shared chrome container ────────────────────────────────────── */
/* Mirrors Pico's own .container breakpoints so the bar and the footer
   line up with the page content between them at every width. Declared
   after both blocks above, since a media query adds no specificity and
   a later plain rule would otherwise win. */
.wpmc-header__inner,
.wpmc-footer__inner {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--pico-spacing, 1rem);
  padding-right: var(--pico-spacing, 1rem);
}
@media (min-width: 576px)  { .wpmc-header__inner, .wpmc-footer__inner { max-width: 510px;  padding-left: 0; padding-right: 0; } }
@media (min-width: 768px)  { .wpmc-header__inner, .wpmc-footer__inner { max-width: 700px;  } }
@media (min-width: 1024px) { .wpmc-header__inner, .wpmc-footer__inner { max-width: 950px;  } }
@media (min-width: 1280px) { .wpmc-header__inner, .wpmc-footer__inner { max-width: 1200px; } }
@media (min-width: 1536px) { .wpmc-header__inner, .wpmc-footer__inner { max-width: 1450px; } }

/* ── 7. App shell ───────────────────────────────────────────────── */
body { background: var(--wpmc-cream); color: var(--wpmc-text); }
/* The header used to live inside .container; now it sits above it. */
body > main.container, body > .container { padding-top: 2rem; }

/* In-page sticky bars (year headers, the species search box) offset
   themselves by --wpmc-header-h so they clear the club bar rather than
   sliding under it. */

/* Big stat numerals read as display type — serif, brand green. */
.summary-card .num,
.summary-card .number {
  font-family: var(--wpmc-serif);
  color: var(--wpmc-green) !important;
  font-weight: 400 !important;
}
.summary-card .label {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wpmc-text-faintest) !important;
  font-weight: 700;
}
.summary-card {
  background: #fff;
  border-color: var(--wpmc-border) !important;
  border-radius: 16px !important;
}

/* Table rows pick up the main site's warm hover. */
tbody tr:hover { background: var(--wpmc-cream-warm); }
thead th { color: var(--wpmc-text-faintest); }

/* Never let a focus ring disappear. */
:focus-visible { outline-color: var(--wpmc-orange); }

@media print {
  .wpmc-header, .wpmc-footer { display: none !important; }
}