/*
 * K13 brand layer: palette and type applied on top of every other stylesheet.
 *
 *   Main cream background  #FEFAF2  page and section backgrounds
 *   Primary green          #20493C  headings, body text, primary buttons, dark sections
 *   Warm white             #FFFCF2  text on green backgrounds
 *   Muted sage             #8B917C  subtle accents, borders, secondary details
 *   Sand beige             #DCC6AC  accent panels and form backgrounds
 *
 * Font: "Helvetica Neue", Helvetica, Arial, sans-serif.
 * Headings 400 / -0.03em / 1.1. Body 400 / 1.5. Buttons and labels 500.
 *
 * The !important flags beat typography and colours saved in Elementor
 * (Site Settings and individual widgets), which print after theme CSS.
 */

:root {
  --k13-brand-cream: #FEFAF2;
  --k13-brand-green: #20493C;
  --k13-brand-warm-white: #FFFCF2;
  --k13-brand-sage: #8B917C;
  --k13-brand-sand: #DCC6AC;
  --k13-brand-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Elementor global colours, in case pages reference them. */
  --e-global-color-primary: var(--k13-brand-green);
  --e-global-color-secondary: var(--k13-brand-sand);
  --e-global-color-text: var(--k13-brand-green);
  --e-global-color-accent: var(--k13-brand-sage);
}

html,
body.k13-body {
  background-color: var(--k13-brand-cream);
}

body.k13-body {
  color: var(--k13-brand-green);
  font-family: var(--k13-brand-font) !important;
  font-weight: 400;
  line-height: 1.5;
}

/* One family everywhere, except icon fonts and code. */
.k13-body :not(i, code, pre, kbd, samp, svg, svg *, .dashicons, [class*="eicon"], [class^="fa"], [class*=" fa-"], [class*="icon-"]) {
  font-family: var(--k13-brand-font) !important;
}

/* Body copy */
.k13-body :is(p, li, dd, blockquote, figcaption) {
  font-weight: 400;
  line-height: 1.5;
}

/* Headings */
.k13-body :is(h1, h2, h3, h4, h5, h6, .k13-h1, .k13-h2, .k13-h3, .k13-h4, .h2, .k13-h2__boxed, .elementor-heading-title) {
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

/* Buttons and labels */
.k13-body :is(
  button,
  input[type="submit"],
  input[type="button"],
  .wp-element-button,
  .elementor-button,
  .wpcf7-submit,
  label,
  .k13-tag,
  .k13-tag__label,
  [class*="btn"],
  [class*="button"],
  [class*="__cta"],
  [class*="__label"]
),
.k13-body :is(button, .elementor-button, [class*="btn"], [class*="button"], [class*="__cta"]) * {
  font-weight: 500 !important;
}

/* Labels are set in heading tags in places; keep them label-weight. */
.k13-body :is(h1, h2, h3, h4, h5, h6).k13-tag__label {
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
}

/* Text selection and focus in the brand colours. */
.k13-body ::selection {
  background-color: var(--k13-brand-sand);
  color: var(--k13-brand-green);
}
.k13-body :is(a, button, [role="button"], input, textarea, select):focus-visible {
  outline-color: var(--k13-brand-green);
}

/* Native form controls default to the palette. */
.k13-body :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]), textarea, select) {
  color: var(--k13-brand-green);
  border-color: var(--k13-brand-sage);
}
.k13-body :is(input, textarea)::placeholder {
  color: var(--k13-brand-sage);
}