/* r14 (3 Nov 2026): one button system, site-wide. Change the shape everywhere with --btn-radius.
   Primary = deep green, white text. Secondary = outlined, dark text. Tabs/chips/inputs share the radius only.
   Loaded last on index, privacy and terms (and on Journal pages once Bloggy adds the <link>). */
:root {
  --btn-radius: 10px;
  --btn-h: 48px;
  --btn-pad-x: 22px;
  --btn-font: 600 15px/1.2 "Work Sans", Arial, sans-serif;
  --btn-primary-bg: #355f36;
  --btn-primary-bg-hover: #284e29;
  --btn-primary-fg: #fff;
  --btn-secondary-fg: #20291e;
  --btn-secondary-border: #20291e;
  --btn-secondary-bg-hover: rgba(32, 41, 30, .07);
}

/* display is left to each component (some are hidden at certain widths). */
/* Shared shape + type for every primary and secondary button */
html body :is(.header-cta, .mobile-nav-cta, #bw-hero-entry button, .cf8-cta, .button, .dx-btn, .bw-root .bw-bubble) {
  align-items: center; border-radius: var(--btn-radius); box-sizing: border-box; font: var(--btn-font);
  gap: 8px; justify-content: center; letter-spacing: 0; min-height: var(--btn-h); padding: 0 var(--btn-pad-x);
  text-decoration: none; text-transform: none; white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

/* Primary */
html body :is(.header-cta, .mobile-nav-cta, #bw-hero-entry button, .cf8-cta, .button-dark, .dx-btn-primary, .bw-root .bw-bubble) {
  background: var(--btn-primary-bg); border: 0; color: var(--btn-primary-fg);
}
html body :is(.header-cta, .mobile-nav-cta, #bw-hero-entry button, .cf8-cta, .button-dark, .dx-btn-primary, .bw-root .bw-bubble):hover {
  background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg);
}

/* Secondary */
html body :is(.button-outline, .dx-btn-secondary, .button.consult-soon) {
  background: transparent; border: 1.5px solid var(--btn-secondary-border); color: var(--btn-secondary-fg);
}
html body :is(.button-outline, .dx-btn-secondary):hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-fg); }
html body .button.consult-soon { border-style: dashed; opacity: .75; cursor: not-allowed; }

/* Hero: email field + button joined on desktop, stacked on mobile; same radius */
html body #bw-hero-email { border-radius: var(--btn-radius) 0 0 var(--btn-radius); height: var(--btn-h); }
html body #bw-hero-entry button { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; height: var(--btn-h); flex-basis: auto; }
@media (max-width: 770px) {
  html body #bw-hero-email, html body #bw-hero-entry button { border-radius: var(--btn-radius); }
}

/* Tabs, chips and pickers: same corner shape (their own size/colours stay) */
html body :is(.cf8-tab, .bld-tab, .bld-pick, .tools-jump a) { border-radius: var(--btn-radius); }

/* Header CTA is a block-level anchor in the base CSS; centre its label where it is shown */
@media (min-width: 721px) { html body .header-cta { display: inline-flex; } }
/* Flat buttons everywhere except the floating chat bubble */
html body :is(.header-cta, .mobile-nav-cta, #bw-hero-entry button, .cf8-cta, .button, .dx-btn) { box-shadow: none; }