/* ╔══════════════════════════════════════════════════════════════════════════╗
   shared.css — :root variables + utilities. Imported by style.css and admin.css.
   Palette built from the Communicate Canterbury logo (sage green #5D9378).
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap");

:root {
  /* ── Brand: sage green ─────────────────────────────────────────────── */
  --sage:        #5d9378;
  --sage-dark:   #436b56;
  --sage-deep:   #2f4d3d;   /* headings / deep ink-green */
  --sage-light:  #8fbfa3;
  --sage-pale:   #e7f1ea;
  --sage-paler:  #f3f8f4;

  /* ── Warm neutrals ─────────────────────────────────────────────────── */
  --cream:       #faf8f3;
  --sand:        #f1ece1;   /* warm section background */
  --sand-deep:   #e7e0d0;
  --gold:        #c79a47;   /* small warm accent */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --ink:         #2a3a30;
  --text:        #2a3a30;
  --text-muted:  #5f7066;
  --text-light:  #8a988e;

  /* ── Lines / surfaces ──────────────────────────────────────────────── */
  --border:      #d9e1d9;
  --border-soft: #e8ede7;
  --white:       #ffffff;

  /* ── Aliases used by shared contact-form styles ────────────────────── */
  --navy:        var(--sage-deep);
  --teal:        var(--sage);

  /* ── Admin status colours ──────────────────────────────────────────── */
  --red:         #c0392b;
  --green:       #2e7d52;

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Geometry ──────────────────────────────────────────────────────── */
  --max-width:   1140px;
  --radius:      10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --transition:  0.22s ease;

  /* ── Shadows (green-tinted) ────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(47, 77, 61, 0.08);
  --shadow-md:   0 6px 24px rgba(47, 77, 61, 0.10);
  --shadow-lg:   0 14px 44px rgba(47, 77, 61, 0.16);

  /* ── nice-select accent ────────────────────────────────────────────── */
  --ns-accent: var(--sage);
  --ns-accent-shadow: rgba(93, 147, 120, 0.18);
}

/* ── Reset / base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--sage-dark); text-decoration: none; }
a:hover { color: var(--sage); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--sage-deep);
  line-height: 1.18;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-sand { background: var(--sand); }
.section-pale { background: var(--sage-paler); }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.5rem;
}
.section-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 0.5rem; }
.section-intro { color: var(--text-muted); max-width: 46rem; font-size: 1.08rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 0.8rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: var(--transition); text-align: center; line-height: 1.2;
}
.btn-primary { background: var(--sage); color: #fff; border-color: var(--sage); }
.btn-primary:hover { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.btn-secondary { background: #fff; color: var(--sage-deep); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--sage); color: var(--sage-dark); }
.btn-ghost { background: transparent; color: var(--sage-dark); border-color: transparent; }
.btn-lg { font-size: 1.1rem; padding: 0.95rem 1.9rem; }
.btn-sm { font-size: 0.85rem; padding: 0.45rem 0.9rem; }

/* ── Utilities ───────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.mx-auto     { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.m-0 { margin: 0; }
.hidden { display: none !important; }
.narrow { max-width: 46rem; }

/* Visually hidden but still read by screen readers — for labels the design carries
   in a <legend> instead, where a duplicate visible label would look wrong. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Long-form body copy (About, How I help, legal pages) ────────────── */
.prose { max-width: 46rem; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.3rem; color: var(--sage-deep); margin: 1.75rem 0 0.6rem; }
.prose h3 { font-size: 1.1rem; color: var(--sage-deep); margin: 1.4rem 0 0.5rem; }
.prose ul { margin: 0 0 1rem 1.2rem; list-style: disc; }
.prose li { margin-bottom: 0.4rem; line-height: 1.7; }
.prose strong { color: var(--sage-deep); }

/* ── Native form controls ────────────────────────────────────────────── */
input[type="date"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; transition: opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

input[type="file"]::file-selector-button {
  background: var(--sage); color: #fff; border: none;
  padding: .5rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 700;
  cursor: pointer; margin-right: .75rem; transition: background .15s;
  font-family: var(--font-body);
}
input[type="file"]:hover::file-selector-button { background: var(--sage-dark); }

/* ── Site credit (subtle designer attribution) ─────────────────────────────── */
.site-credit {
  text-align: center;
  font-size: .72rem;
  padding: .7rem 1rem;
  opacity: .5;
}
/* Scoped under `footer` so the inherited footer-text colour beats any site-wide
   `a:hover` rule — without this, hover could recolour the link to the background. */
footer .site-credit a { color: inherit; text-decoration: none; }
footer .site-credit a:hover,
footer .site-credit a:focus { color: inherit; text-decoration: underline; }