/*
  Base layer: reset, global typography baseline, headings, links, forms, utilities.
  Colour / font-family / line-height are set ONCE here and inherited downstream.
  Heading styles are defined for both real tags (h1–h6) and class equivalents
  (.h1–.h6) so editors can apply the heading look to any text without emitting a
  heading tag (SEO-safe). This file is also loaded into the TinyMCE editor.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* The `hidden` attribute must always win: components set `display` on elements
   they also toggle via [hidden] (JS disclosures, tabs, the accordion), and an
   author `display` rule would otherwise override the UA `[hidden]` reset. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor-link targets clear the FIXED header (--header-spacer) with a medium
     spacer of breathing room, instead of hiding underneath it. */
  scroll-padding-top: calc(var(--header-spacer) + var(--space-m));
}

body {
  font-family: var(--font-sans-serif);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* TEMP: clamp horizontal overflow while we track down what's bleeding past the
     viewport. `clip` (not `hidden`) so it doesn't create a scroll container and
     break position:sticky/fixed descendants. Remove once the real source is fixed. */
  overflow-x: clip;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ---- Headings ----
   Type scale (Nunito): H1 40→60, H2 32→48, H3 24→36, H4 20→24. Line-height is
   110% throughout on desktop; H3/H4 relax to 120% on mobile (media query below). */
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
  line-height: 1.1;
  text-wrap: balance;
  /* Space below scales with the heading size (1em) but is capped so the big
     display headings don't get an oversized gap. */
  margin-block-end: min(1em, 1.5rem);
}

/* Display headings: title font (Nunito) bold, brand orange. */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-heading);
}

/* H4: title font (Nunito) semibold, high-contrast text colour. */
h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-text);
}

/* Smaller sub headings: body font, high-contrast text colour. */
h5, .h5, h6, .h6 {
  font-family: var(--font-sans-serif);
  font-weight: 700;
  color: var(--color-text);
}

h1, .h1 { font-size: var(--text-h1); }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); }
h4, .h4 { font-size: var(--text-h4); }
h5, .h5 { font-size: var(--text-h5); }
h6, .h6 { font-size: var(--text-h6); }

/* Mobile relaxes H3/H4 line-height to 120% per the type scale. */
@media (max-width: 47.999rem) {
  h3, .h3, h4, .h4 { line-height: 1.2; }
}

/* Class equivalents must override inherited element sizing when applied to a tag. */
.h1, .h2, .h3, .h4, .h5, .h6 {
  display: block;
  margin-block-end: min(1em, 1.5rem);
}

.chapeau {
  display: block;
  margin-block-end: 1rem;
  font-family: var(--font-sans-serif);
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-black);               /* always pure black… */
}

/* …except on dark surfaces (the footer / any .bg-green-dark row), where it
   flips to white. The hero sets its own white chapeau over the photo. */
.bg-green-dark .chapeau {
  color: var(--color-white);
}

/* Drop the chapeau a touch on mobile so it sits further below the title. */
@media (max-width: 47.999rem) {
  .chapeau {
    font-size: 0.8125rem;                    /* 13px */
  }
}

.lead {
  font-size: var(--text-lead);
}

/* ---- Flow & text ---- */
p, ul, ol, blockquote, figure {
  margin-block-end: var(--space-s);
}

/* Not as desired for some pages */
/* .wpb_content_element:has(+ .btn),
p:has(+ .btn) {
  margin-block-end: 1rem;
} */

:is(p, ul, ol, blockquote, figure):last-child {
  margin-block-end: 0;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

a:hover {
  color: color-mix(in srgb, var(--color-link) 80%, black);
}

figure,
.vc_single_image-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Accessibility ---- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.visually-hidden:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-white);
  color: var(--color-green-dark);
  border-radius: var(--radius-sm);
}

.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--distance-to-edge);
}

/* Buttons live in components/button.css (.btn / .btn-primary). */