/* stylelint-disable no-descending-specificity -- selectors are grouped by
   component; the source order is intentional and overrides resolve correctly. */

/* ─────────────────────────────────────────────────────────────
   Joanna Summers — base theme
   Shared tokens, the BACP banner, brand header, nav, footer, and
   the content/section/form primitives reused across every page.
   Page-specific layout lives in its own stylesheet (home.css …).
   ───────────────────────────────────────────────────────────── */

/* ─── Design tokens ───────────────────────────────────────────── */

/* One green, one gold, one blue-grey ink ramp. The site previously carried
   three greens (#4f6c5e / #5b7a6b / #7a8c6e) plus a whole earth-tone palette
   hard-coded in the subpage sheets; both are gone. Do not introduce a second
   green — if something needs to sit back, change its opacity or use --light,
   not a new hue. */

:root {
  --slate: #2c3a47; /* headings, footer, dark ink */
  --mid: #41506a; /* body copy (darkened from source #4a5568 for AA) */
  --light: #5d6b80; /* secondary copy (darkened from source #718096 for AA) */
  --sand: #d7be9d; /* the one warm accent */
  --sand-deep: #c9a87c; /* one step darker — hover for gold buttons */
  --cream: #f9f7f4;
  --white: #fff;
  --accent: #4f6c5e; /* THE green — links, buttons, banner, dark brand fills */
  --border: rgb(44 58 71 / 14%);
  --serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --sans: "Jost", -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
  --maxw: 1000px;
}

/* ─── Reset ───────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  color: var(--slate);
  background: var(--cream);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─── Skip link (accessibility) ───────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--accent);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0.6rem;
  text-decoration: none;
}

/* ─── Accent banner band ──────────────────────────────────────────
   Intentionally empty (Aug 2026) — the band is decorative now that the
   MBACP strap-line has been removed. min-height keeps it visible without
   content; the p/a rules remain for if text is ever put back. */

.bacp-banner {
  min-height: 2.6rem; /* matches the height the strap-line used to give it */
  padding: 0.7rem clamp(1.5rem, 6vw, 6rem);
  text-align: center;
  color: var(--white);
  background: var(--accent);
}

.bacp-banner p {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.bacp-banner a {
  color: var(--white);
  text-decoration: underline;
}

/* ─── Brand header ────────────────────────────────────────────── */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.5rem, 6vw, 6rem);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--slate);
}

.brand-name:hover {
  color: var(--accent);
  text-decoration: none;
}

.brand-cred {
  max-width: 60ch;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--light);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ─── Primary nav (appears once pages are added to Template::NAV) ─ */

.nav-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
  text-decoration: none;
}

/* 44x44 hit area — the bars stay 28px wide, only the tappable box grows.
   At its old 28x23 it was under the 24px minimum and fiddly on a phone,
   and it is the only way to reach the nav on mobile. */

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--slate);
}

/* ─── Content + sections ──────────────────────────────────────── */

.content {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem clamp(1.5rem, 6vw, 6rem);
}

.section {
  margin-bottom: 3.5rem;
}

.section:last-child {
  margin-bottom: 0;
}

.section-title {
  display: block;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}

.section h2 {
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--slate);
}

.section p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--mid);
}

/* ─── Buttons ─────────────────────────────────────────────────── */

.btn-contact,
.btn-contact-outline,
.btn-submit {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.btn-contact,
.btn-contact-outline {
  display: block;
  width: 100%;
  padding: 0.9rem;
}

.btn-contact {
  color: var(--white);
  background: var(--accent);
  border: 1px solid var(--accent);
}

.btn-contact:hover {
  color: var(--white);
  background: var(--slate);
  border-color: var(--slate);
  text-decoration: none;
}

.btn-contact-outline {
  margin-top: 0.6rem;
  color: var(--mid);
  background: var(--white);
  border: 1px solid var(--border);
}

.btn-contact-outline:hover {
  color: var(--slate);
  border-color: var(--slate);
  text-decoration: none;
}

.btn-submit {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  color: var(--white);
  background: var(--accent);
  border: none;
}

.btn-submit:hover {
  background: var(--slate);
}

/* ─── Forms (framework Form class output) ─────────────────────── */

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--slate);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 0.2s ease;
  appearance: none;
}

.form-group select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mid) 50%),
    linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) center,
    calc(100% - 13px) center;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
}

.form-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #9a3412;
}

.has-error input,
.has-error textarea,
.has-error select {
  border-color: #b4543c;
}

/* Honeypot — a spam trap kept off-screen from people but seen by bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Alerts ──────────────────────────────────────────────────── */

.alert {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--slate);
  background: var(--white);
  border-left: 3px solid var(--accent);
}

.alert-success {
  border-left-color: var(--accent);
}

.alert-error {
  color: #7a2c1a;
  border-left-color: #b4543c;
}

/* ─── Footer ──────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem clamp(1.5rem, 6vw, 6rem);
  background: var(--accent);
}

.site-footer p {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 92%);
}

.site-footer a {
  color: rgb(255 255 255 / 96%);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.footer-links a {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 96%);
}

/* ─── reCAPTCHA ───────────────────────────────────────────────── */

/* Hide the floating badge — attribution shows in the footer instead.
   display:none (not visibility:hidden) so the fixed 256px widget can't add
   horizontal scroll on narrow screens. reCAPTCHA v3 still runs. */
.grecaptcha-badge {
  display: none !important;
}

.recaptcha-note {
  flex-basis: 100%;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 92%);
}

.recaptcha-note a {
  color: rgb(255 255 255 / 96%);
  text-decoration: underline;
}

/* ─── Cookie consent (themed) ─────────────────────────────────── */

#cc-main {
  --cc-font-family: var(--sans);
  --cc-bg: var(--white);
  --cc-primary-color: var(--slate);
  --cc-secondary-color: var(--mid);
  --cc-link-color: var(--accent);
  --cc-separator-border-color: var(--border);
  --cc-cookie-category-block-bg: var(--cream);
  --cc-btn-primary-bg: var(--accent);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--accent);
  --cc-btn-primary-hover-bg: var(--slate);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--slate);
  --cc-btn-secondary-bg: var(--cream);
  --cc-btn-secondary-color: var(--slate);
  --cc-btn-secondary-border-color: var(--border);
  --cc-btn-secondary-hover-bg: #eceeea;
  --cc-toggle-on-bg: var(--accent);
  --cc-toggle-on-knob-bg: #fff;
}

.cookie-settings {
  padding: 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 96%);
  background: none;
  border: 0;
  cursor: pointer;
}

.cookie-settings:hover {
  text-decoration: underline;
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (width <= 760px) {
  /* The footer sits at 0.68rem (10.88px), which is fine at desktop viewing
     distance but too small to read comfortably on a phone — and these are
     tap targets as well as text. */
  .site-footer p,
  .footer-links a,
  .cookie-settings,
  .recaptcha-note {
    font-size: 0.8rem;
  }

  /* 0.72rem (11.52px) is too small to read on a phone. */
  .brand-cred {
    font-size: 0.8rem;
  }

  .footer-links a,
  .cookie-settings {
    padding: 0.35rem 0;
  }

  .header-right {
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 0 1.25rem;
  }

  /* Hamburger sits right; the nav links drop to their own full-width row
     below and collapse until toggled. */
  .nav-toggle {
    display: flex;
    order: 2;
  }

  .site-nav {
    order: 3;
    flex-basis: 100%;
  }

  /* Collapsed by default; app.js toggles .open on #nav-menu to reveal it. */
  .nav-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-links.open {
    max-height: 60vh;
  }

  .nav-links li {
    border-top: 1px solid var(--border);
  }

  .nav-links li:first-child {
    margin-top: 0.75rem;
  }

  .nav-links a {
    display: block;
    padding: 0.75rem 0;
  }
}

/* No-JS: never trap the links behind a toggle that can't open. */
@media (width <= 760px) and (scripting: none) {
  .nav-toggle {
    display: none;
  }

  .nav-links {
    max-height: none;
  }
}

/* ─── Reduced motion ──────────────────────────────────────────── */

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

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS
   These were previously copy-pasted into every page stylesheet, which is
   why editing one page never changed the others. They live here now.
   Page stylesheets should only contain what is genuinely unique to that
   page — if you find yourself pasting a rule into a second file, it
   belongs in this section instead.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page hero (every page except the homepage, which has its own
       two-column .hero — that is a different component) ──────────── */

.page-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 45vh;
  padding-top: 5rem;
  overflow: hidden;
  background: var(--accent);
}

.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient( ellipse 80% 60% at 20% 60%, rgb(79 108 94 / 45%) 0%, transparent 65% ), radial-gradient( ellipse 100% 50% at 50% 100%, rgb(20 28 36 / 40%) 0%, transparent 50% );
}

.page-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem clamp(1.5rem, 6vw, 6rem);
  max-width: 800px;
}

.page-hero .hero-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--cream);
  display: block;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fade-up 1s 0.3s ease forwards;
}

.page-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fade-up 1s 0.5s ease forwards;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--sand);
}

.page-hero .hero-divider {
  width: 50px;
  height: 1px;
  background: var(--sand);
  margin: 1.5rem auto;
  opacity: 0;
  animation: fade-up 1s 0.7s ease forwards;
}

.page-hero .hero-sub {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  line-height: 1.85;
  color: rgb(249 247 244 / 92%);
  opacity: 0;
  animation: fade-up 1s 0.9s ease forwards;
}

/* ─── Page section container ─────────────────────────────────── */

/* NOTE: these two mirror .section h2 / .section p above. Subpage sections used
   to be class="section", so they inherited those rules — and because
   `.section p` (0,1,1) outranks a page's own `.credential-body` (0,1,0), the
   generic rule was silently winning. Kept here so the rename changed nothing
   visually. Worth deleting once you are happy for pages to honour their own
   typography — see the note in the handover. */
.page-section h2 {
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--slate);
}

.page-section p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--mid);
}

.page-section {
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  max-width: 1100px;
  margin: 0 auto;
}

/* ─── Section labels, separators ─────────────────────────────── */

.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sand);
  opacity: 0.4;
  max-width: 80px;
}

.section-label-light {
  color: var(--cream);
}

.separator {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  max-width: 1100px;
  margin: 0 auto;
  opacity: 0.3;
}

.separator span {
  flex: 1;
  height: 1px;
  background: var(--sand);
}

.sep-diamond {
  width: 7px;
  height: 7px;
  background: var(--sand);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ─── Intro block (label + display heading + body) ───────────── */

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem 6rem;
  align-items: start;
}

.intro-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--slate);
  position: sticky;
  top: 5rem;
}

.intro-title em {
  font-style: italic;
  color: var(--accent);
}

.intro-body p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--mid);
  margin-bottom: 1.4rem;
}

/* ─── Closing statement / CTA block ──────────────────────────── */

.statement-block {
  background: var(--accent);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
}

.statement-block::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgb(215 190 157 / 8%);
  top: -200px;
  right: -100px;
}

.statement-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 5rem;
  align-items: center;
}

.statement-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.25;
}

.statement-title em {
  font-style: italic;
  color: var(--sand);
}

.statement-body p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgb(249 247 244 / 92%);
  margin-bottom: 1.2rem;
}

/* ─── Entrance reveal (CSS-only; the CSP blocks inline JS) ───── */

@keyframes fade-up {
from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 1;
  transform: none;
  animation: fade-up 0.8s ease both;
}

.d1 {
  animation-delay: 0.15s;
}

.d2 {
  animation-delay: 0.3s;
}

.d3 {
  animation-delay: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .page-hero .hero-eyebrow,
  .page-hero h1,
  .page-hero .hero-divider,
  .page-hero .hero-sub {
    animation: none;
    opacity: 1;
  }
}

/* ─── Buttons ─────────────────────────────────────────────────────
   Three variants, defined ONCE. .btn-contact / .btn-submit sit on light
   backgrounds, .btn-gold on the dark hero and green CTA blocks, and
   .btn-contact-outline is the secondary. They all DARKEN on hover.
   Page stylesheets must not redefine these — a page-level rule that set
   only the hover background previously inherited white text from here
   and produced white-on-white. Add a variant here instead. ────────── */

.btn-gold {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.9rem 2.2rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  color: var(--slate);
  background: var(--sand);
  border: 1px solid var(--sand);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.btn-gold:hover {
  color: var(--slate);
  background: var(--sand-deep);
  border-color: var(--sand-deep);
  text-decoration: none;
}

/* ─── Focus ───────────────────────────────────────────────────────
   One ring, inverted by surface. outline-offset places it on whatever is
   BEHIND the element, so light surfaces get a dark ring and dark ones a
   pale ring. ─────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn-contact:focus-visible,
.btn-contact-outline:focus-visible,
.btn-submit:focus-visible,
.btn-gold:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible,
.page-hero a:focus-visible,
.statement-block a:focus-visible {
  outline-color: var(--cream);
}