/* ============================================================
   THEME: the only CSS file you change for each client.
   Colours, fonts and corner roundness live here. site.css reads
   these variables, so the whole site follows along.
   ============================================================ */

:root {
  /* Brand colours */
  --brand: #0d7f78;         /* main colour: buttons, links, logo square */
  --on-brand: #ffffff;      /* text on --brand */
  --accent: #ff8a65;        /* call buttons and small highlights */
  --on-accent: #2b1005;     /* text on --accent */

  /* Big bands: hero, page headers and footer */
  --hero: #dff2ee;
  --on-hero: #12312e;

  /* Page colours */
  --bg: #ffffff;            /* page background */
  --surface: #f0f8f6;       /* every second section, form background */
  --text: #15302d;          /* body text */
  --muted: #4b6562;         /* secondary text */
  --line: #d6e8e4;          /* borders and dividers */

  /* Fonts. System fonts load instantly; to use a Google Font, see README.md. */
  --font-heading: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, Nunito, "Varela Round", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-weight: 700;
  --heading-case: none;      /* none, or uppercase */
  --heading-tracking: -0.015em;
  --heading-stretch: normal; /* normal, or condensed for fonts that have a narrow version */

  /* Shape: 0 = sharp corners, 10px = soft, 20px = very round */
  --radius: 18px;
}

/* Extras for this site */
:root {
  --footer-bg: #0f3b38;
  --on-footer: #e6f5f2;
  --photo-shadow: 0 24px 50px rgb(13 127 120 / 0.22);
}

/* ------------------------------------------------------------
   nope. demo only: the "this is a demo" bar and notes.
   Not part of the client template.
   ------------------------------------------------------------ */
.demo-bar {
  padding: 9px var(--gutter);
  background: #0a0a0a;
  color: #fbfbf8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}
.demo-bar a { color: #c8ff00; font-weight: 700; }
.demo-bar a:focus-visible { outline-color: #c8ff00; }
.demo-bar__tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  background: #c8ff00;
  color: #0a0a0a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.demo-bar__cta { white-space: nowrap; }
.demo-note {
  max-width: 70ch;
  margin-bottom: 28px;
  padding: 12px 16px;
  background: var(--surface);
  border-left: 6px solid #c8ff00;
  color: var(--muted);
  font-size: 0.95rem;
}
.demo-note strong { color: var(--text); }