/* JBD Planters brand system, cloned from jbdplanters.com (GeneratePress Global Colors + GB Pro Global Styles).
   Token names match the WP Global Color slugs so CSS written here pastes into Additional CSS unchanged.
   Brand rule: page designs change layout only; fonts, colors and button styles come from this file. */
:root {
  color-scheme: light;
  /* GeneratePress Global Colors (exact slugs from jbdplanters.com) */
  --header: #FEF6EB;           /* page background */
  --cream-100: #f4eade;        /* header background, light sections */
  --surface-inverse: #042233;  /* navy: headings, footer top */
  --surface-accent: #a33e0d;   /* rust: top bar, eyebrows, CTA band */
  --surface-sand: #dcc1a7;     /* footer bottom bar */
  --gold-500: #de9a22;         /* italic accents, current nav item, footer eyebrows */
  --gold-600: #cd8312;         /* solid buttons */
  --gold-700: #a8690c;         /* .Yellowsolid hover (hex in GB global style) */
  --contrast: #222222;         /* body text */
  --contrast-2: #575760;       /* secondary text */
  --grey: #4F4D47;
  --base-3: #ffffff;
  --line: rgb(4 34 51 / 12%);  /* hairlines, as used in the live footer */

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; /* .h1 .h2 .h3 global styles */
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;            /* body, nav, eyebrow, buttons */

  --container: 1380px;
  --gutter: clamp(20px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--header);
  color: var(--contrast);
  font: 400 15px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* GB Pro Global Styles, names and values exactly as on jbdplanters.com */
.h1, .h2, .h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.005em; color: var(--surface-inverse); text-wrap: balance; }
.h1 { font-size: 56px; line-height: 1.12; }
.h2 { font-size: 40px; line-height: 1.12; margin-bottom: 20px; }
.h3 { font-size: 22px; line-height: 1.25; }
@media (max-width: 767px) { .h1 { font-size: 46px; } .h2 { font-size: 32px; } }
/* Italic second line in headings, e.g. "start at home." on the homepage */
.h1 em, .h2 em { font-style: italic; color: var(--gold-500); }

.eyebrow { font: 600 11px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--surface-accent); margin-bottom: 12px; }

.Yellowsolid {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 10px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  background: var(--gold-600); color: var(--base-3); border: 1px solid var(--gold-600); border-radius: 2px; padding: 15px 36px;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.Yellowsolid:is(:hover, :focus-visible) { background: var(--gold-700); border-color: var(--gold-700); }
/* Outline sibling for dark/rust bands: same shape and type, cream outline */
.Yellowsolid--outline { background: transparent; border-color: var(--cream-100); color: var(--cream-100); }
.Yellowsolid--outline:is(:hover, :focus-visible) { background: var(--cream-100); border-color: var(--cream-100); color: var(--surface-inverse); }

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }