/* ==========================================================================
   Woven Within — Counseling & Art Therapy
   Palette is "colorful earthtones" from the design brief. Every color used
   for body text or links has been checked against its background and meets
   WCAG AA (4.5:1 for normal text, 3:1 for large text/UI). Brighter tones
   (sage, mustard, coral, terracotta) are reserved for accents, borders, and
   large decorative elements — never for small text on light backgrounds.
   ========================================================================== */

:root {
  /* Core palette */
  --ivory: #fbf6ef;
  --ivory-alt: #f3ede2;
  --ink: #2e2a24;

  /* Text/link-safe dark tones (all ≥4.5:1 on --ivory) */
  --olive: #4b5a2e;
  --wine: #5c1f30;
  --teal: #1f4b49;
  --deep-blue: #1c314a;
  --terracotta-deep: #8a3e22;
  --mustard-deep: #7a5a12;
  --coral-deep: #8c3a2a;

  /* Accent-only tones (decorative: borders, icons, washes, large shapes) */
  --sage: #c7d2b8;
  --sage-mid: #8fa07c;
  --mustard: #c99a2e;
  --coral: #e2725b;
  --terracotta: #c1653d;
  --wine-mid: #8c2f45;
  --deep-blue-mid: #2c4a6b;
  --teal-mid: #2e7873;

  --font-heading: "Quicksand", "Comfortaa", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;

  --max-width: 68rem;
  --radius: 1rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--olive);
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
}

p {
  margin: 0 0 1.1em;
}

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

a:hover {
  color: var(--wine);
}

:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75em 1.25em;
  border-radius: 0 0 var(--radius) 0;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header / nav ---------- */

.site-header {
  border-bottom: 1px solid var(--sage);
  background: var(--ivory);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}

.site-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--olive);
  text-decoration: none;
  line-height: 1.1;
}

.site-logo__name,
.site-logo__tagline {
  display: block;
}

.site-logo__name {
  text-transform: uppercase;
}

/* The tagline is sized and tracked so its ink spans exactly the width of
   "WOVEN WITHIN" above it — the two lines read as one block. Measured with
   the loaded web fonts (Quicksand 700 / Atkinson Hyperlegible 400):
   - font-size 0.6em of the wordmark, as before, plus 0.053em tracking
     spreads the 17.56px difference over the tagline's 23 letter gaps;
   - margin-left trims the 0.34px difference in the first glyphs' side
     bearings (C vs W), so the left ink edges line up;
   - margin-right cancels the tracking after the last letter, so the box
     ends where the ink does.
   Everything is in em, so the block stays locked if the wordmark is resized.
   Tuned to these exact words: changing the name or tagline needs re-measuring. */
.site-logo__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6em;
  letter-spacing: 0.053em;
  margin-left: -0.0236em;
  margin-right: -0.053em;
  color: var(--ink);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: 2px solid var(--olive);
  border-radius: 0.6em;
  padding: 0.5em 0.9em;
  font-family: var(--font-body);
  font-size: 1rem;
  /* Ink label for contrast at this size; the border stays olive, where the
     3:1 minimum for interface outlines is met. */
  color: var(--ink);
  cursor: pointer;
}

/* Without JavaScript, .js is never added to <html>, so the toggle stays
   hidden and .site-nav below keeps its default `display: block` — the
   full nav is always visible and reachable. Only with JS confirmed
   running do we collapse it behind the hamburger button. */
.js .nav-toggle {
  display: inline-flex;
}

.js .site-nav {
  display: none;
  width: 100%;
}

.js .site-nav.is-open {
  display: block;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-nav a {
  display: block;
  padding: 0.6em 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--ivory-alt);
}

.site-nav a[aria-current="page"] {
  color: var(--wine);
}

/* The booking button lives inside the nav, so it has to restate its look at
   nav-link specificity. Otherwise ".site-nav a" repaints it dark text on dark
   blue (about 1.6:1) and strips its padding. */
.site-nav a.book-button {
  display: inline-block;
  color: #fff;
  padding: 0.7em 1.3em;
  border-bottom: none;
}

.book-button {
  display: inline-block;
  background: var(--deep-blue-mid);
  color: #fff;
  padding: 0.7em 1.3em;
  border-radius: 2em;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-top: var(--space-1);
}

.book-button:hover {
  background: var(--deep-blue);
  color: #fff;
}

@media (min-width: 56rem) {
  .js .nav-toggle {
    display: none;
  }

  /* Same specificity as the mobile ".js .site-nav { display: none }" rule
     above; this one is later in the source, so it wins the cascade at this
     breakpoint and the nav stays visible even with JS enabled. */
  .js .site-nav {
    display: block;
    width: auto;
  }

  .site-nav ul {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    /* Items spread across the full header width; the gap is only the
       minimum spacing once the row gets crowded. Desktop only: the mobile
       menu is a column and never sees this rule. */
    gap: var(--space-3);
  }

  .site-nav a {
    border-bottom: none;
    padding: 0.3em 0;
  }

  .book-button {
    margin-top: 0;
  }
}

/* ---------- Hero ---------- */

/* Taller than its content, with the text block centered in it: the block
   sits lower (further from the menu) and more of the photo shows around it. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 62vh, 36rem);
  padding-block: var(--space-5);
  overflow: hidden;
  background: var(--ivory-alt);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

/* Title sits close to the line beneath it (was the default ~0.67em). */
.hero__content h1 {
  margin-bottom: 0.15em;
}

.hero__content .lede {
  font-size: 1.2rem;
  margin-bottom: 1.25em;
}

/* Two-line welcome: first line as before, second line set apart.
   --italic: same face, italic.  --heading: the rounded heading face. */
.hero__welcome span {
  display: block;
}

.hero__welcome--italic .hero__welcome-line2 {
  font-style: italic;
}

.hero__welcome--heading .hero__welcome-line2 {
  font-family: var(--font-heading);
  font-weight: 500;
}

/* Home page section headings (Mission, Core Values, closing section) */
.section-title {
  text-align: center;
}

/* ---------- Value cards ---------- */

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

@media (min-width: 40rem) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .values-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.value-card {
  background: var(--ivory-alt);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.value-card__media {
  aspect-ratio: 4 / 3;
  background: var(--sage);
  overflow: hidden;
}

.value-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.value-card__body {
  padding: var(--space-2);
}

.value-card h3 {
  color: var(--wine);
  margin-bottom: 0.3em;
}

/* ---------- Generic content sections ---------- */

.section {
  padding-block: var(--space-4);
}

.section--alt {
  background: var(--ivory-alt);
}

.section--washed {
  position: relative;
  overflow: hidden;
}

.section--washed .section__bg {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  z-index: 0;
}

.section--washed .section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section--washed > .container {
  position: relative;
  z-index: 1;
}

/* The reading column. Centered within the page container, so pages that
   nest it inside .container (About, Fees, Resources, Contact, Offerings)
   have equal left and right margins, like the pages where .container and
   .prose are the same element (Home, Approach). */
.prose {
  max-width: 42rem;
  margin-inline: auto;
}

.prose h2,
.prose h3 {
  margin-top: 1.6em;
}

figure {
  margin: var(--space-3) 0;
}

figure img {
  border-radius: var(--radius);
}

.bio-photo {
  max-width: 16rem;
  margin: 0 0 var(--space-3);
}

.bio-photo img {
  border-radius: var(--radius);
}

@media (min-width: 40rem) {
  .bio-photo {
    float: right;
    margin: 0 0 var(--space-3) var(--space-3);
  }
}

/* Photos inserted into page text through the CMS */
.prose img.body-image {
  border-radius: var(--radius);
  margin-block: var(--space-2);
}

/* Consecutive photos in page text, grouped into a row at build time.
   Each item grows in proportion to its photo's width/height (--ratio), so
   all photos share one height, keep their natural shape, and fill the
   column. Phones stack them at full width. */
.image-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block: var(--space-2);
}

.image-row__item {
  flex: var(--ratio) 1 0;
  min-width: 0;
}

.image-row__item picture {
  display: block;
}

.prose .image-row img.body-image {
  width: 100%;
  height: auto;
  margin-block: 0;
}

@media (max-width: 40rem) {
  .image-row {
    flex-direction: column;
  }

  .image-row__item {
    flex: none;
    width: 100%;
  }
}

figcaption {
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.8;
  margin-top: 0.5em;
}

.todo {
  display: inline-block;
  background: var(--mustard);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: 0.4em;
  margin: 0.2em 0;
}

.callout {
  background: var(--sage);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-block: var(--space-3);
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ---------- Contact form ---------- */

.contact-form {
  background: var(--ivory-alt);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 34rem;
}

.form-instructions {
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.form-field {
  margin-bottom: var(--space-2);
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35em;
}

/* Full-strength ink, not a faded one: these hints are small text, and at
   75% they drop below the 4.5:1 contrast minimum on the darker background
   colors the CMS allows. */
.form-field .hint {
  font-size: 0.85rem;
  margin-top: 0.25em;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  padding: 0.7em 0.8em;
  border: 2px solid var(--sage-mid);
  border-radius: 0.5em;
  background: #fff;
  color: var(--ink);
}

.form-field textarea {
  min-height: 8em;
  resize: vertical;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-2);
}

fieldset legend {
  font-weight: 700;
  padding: 0 0 0.35em;
}

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice-group label {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.choice-group input,
.consent-field input {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--olive);
  flex-shrink: 0;
}

fieldset.form-field .hint {
  margin: 0 0 0.5em;
}

.consent-field label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-weight: 400;
}

.consent-field input {
  margin-top: 0.25em;
}

.submit-button {
  background: var(--wine-mid);
  color: #fff;
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.8em 1.6em;
  border-radius: 2em;
  cursor: pointer;
}

.submit-button:hover {
  background: var(--wine);
}

.form-status {
  margin-top: var(--space-2);
  font-weight: 700;
}

/* Ink rather than olive: this line is small bold text, so it needs 4.5:1,
   which olive can't hold against the darker CMS background colors. The
   headings above it are large text and keep the olive. */
.form-status[data-state="success"] {
  color: var(--ink);
}

.form-status[data-state="error"] {
  color: var(--wine);
}

/* honeypot field, hidden from sighted users and screen readers */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The content area paints its own background, so a page can set its own
   color (--ivory on <main>) while the header and footer keep the site-wide
   one. flow-root keeps child margins inside it, and the space above the
   footer (formerly the footer's top margin) is main's bottom padding, so
   it takes the page's color too. */
main {
  display: flow-root;
  background: var(--ivory);
  padding-bottom: var(--space-5);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--ivory);
  padding-block: var(--space-4);
}

.site-footer a {
  color: var(--sage);
}

.site-footer a:hover {
  color: var(--ivory);
}

.footer-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-grid h2 {
  color: var(--ivory);
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

.footer-badge img {
  background: var(--ivory);
  border-radius: 0.4em;
  padding: 0.3em;
}

.footer-bottom {
  border-top: 1px solid rgba(251, 246, 239, 0.2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-size: 0.9rem;
  opacity: 0.9;
}