/*
 * Shared tan/green theme, applied app-wide (2026-08-10). Same
 * birch/bark/moss/sage palette and parchment-speckle background as
 * circlesoffriendship.com (parent domain), layered on top of Pico's CSS
 * variables rather than replacing Pico. Linked from every template's
 * <head> via _theme_head.php, right after the Pico CDN link so these
 * overrides win the cascade.
 *
 * Page-specific layout rules (home.php's .hero/.features/.cta, etc.)
 * stay in that page's own <style> block - this file is only the parts
 * every page shares.
 */
/*
 * !important on the --pico-* overrides: Pico's own bundle sets these
 * inside :root:not([data-theme="dark"]) (specificity 0,2,0,0), which
 * outranks a plain :root override (0,1,0,0) regardless of stylesheet
 * order - caught 2026-08-10 when links/buttons stayed Pico's default
 * blue instead of moss. Custom properties accept !important same as any
 * other declaration, so this wins outright instead of chasing selector
 * specificity.
 */
:root {
  --birch: #f2ede4;
  --bark: #2a2118;
  --moss: #5c7a5e;
  --sage: #8aaa8c;
  --rule: rgba(92, 122, 94, 0.2);
  --pico-font-family: 'Jost', sans-serif !important;
  --pico-primary: var(--moss) !important;
  --pico-primary-hover: var(--bark) !important;
  --pico-primary-background: var(--moss) !important;
  --pico-primary-hover-background: var(--bark) !important;
  --pico-primary-border: var(--moss) !important;
  --pico-primary-hover-border: var(--bark) !important;
  --pico-primary-underline: var(--rule) !important;
  --pico-primary-focus: rgba(92, 122, 94, 0.35) !important;
  --pico-primary-inverse: #fff !important;
  --pico-color: var(--bark) !important;
  --pico-background-color: var(--birch) !important;
  --pico-h1-color: var(--bark) !important;
  --pico-muted-color: rgba(42, 33, 24, 0.55) !important;
  --pico-muted-border-color: var(--rule) !important;
  --pico-card-background-color: rgba(255, 255, 255, 0.55) !important;
  --pico-card-border-color: var(--rule) !important;
}

body {
  background-color: var(--birch);
  background-image: url('/assets/parchment-speckle.jpg');
  background-repeat: repeat;
  background-size: 512px 512px;
  /* Short-content pages (a form, an empty list) shouldn't cut the
     speckle off partway down - the background must cover the full
     viewport even when <body> itself is shorter than that. */
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
}

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--moss);
}

nav strong a {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
}
