/* ---------- Buttons & links ---------- */

.btn {
  display: inline-block;
  background-color: var(--cb-600);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 12px 24px;
  border: 1px solid var(--cb-600);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.btn:hover {
  background-color: var(--cb-700);
  border-color: var(--cb-700);
}

.text-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-600);
  text-decoration: none;
}

.text-link:hover {
  color: var(--cb-700);
  text-decoration: underline;
}

/* ---------- Rule list (the kit's clear-space list pattern) ---------- */

/* Used where the content is a short set of parallel facts. Rules rather than
   boxes: four bordered cards in a row would be four times the chrome for the
   same eight words each. */
.rule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--sand);
}

.rule-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--sand);
}

.rule-list h2,
.rule-list h3 {
  margin: 0 0 4px;
}

.rule-list p {
  margin: 0;
  color: var(--cocoa);
  max-width: 46em;
}

.rule-list p + p {
  margin-top: 8px;
}

.rule-list a {
  color: var(--cb-600);
  font-weight: 600;
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* auto-fill packs as many 220px+ cards as fit (4 at full width) instead of
   jumping at fixed breakpoints. */
.card-grid--staff {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  background-color: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--r-lg);
  padding: 28px;
}

.card h3 {
  margin-top: 0;
}

.card p {
  color: var(--cocoa);
}

.section--alt .card {
  border-color: var(--sand);
}

/* ---------- Staff directory ---------- */

.staff-filters {
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  /* Full width on phones so the boxes share both edges. */
  align-items: stretch;
  gap: 16px;
}

@media (min-width: 500px) {
  /* One column sized to the widest box (the Office chips), capped at the
     container, so search and Office share an exact width instead of the
     search bar stopping short at an arbitrary max. */
  .staff-filters {
    display: grid;
    grid-template-columns: minmax(0, max-content);
  }
}

.staff-filters__search-field {
  position: relative;
  width: 100%;
}

.staff-filters__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  color: var(--stone);
  /* Let clicks on the icon land in the input underneath. */
  pointer-events: none;
}

.staff-filters__search {
  font: inherit;
  width: 100%;
  padding: 11px 16px 11px 44px;
  border: 1px solid var(--sand);
  /* Same radius and height as the Office box so the two read as one set.
     The input is the box, so it needs no wrapper. */
  border-radius: var(--r-lg);
  background-color: var(--paper);
  color: var(--ink);
}

/* Boxed, with the label beside its chips, so the label visibly scopes to
   them. An unboxed label read as a heading for the staff grid below. */
.staff-filters__box {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--sand);
  /* Outline only: a tint fill would match the callout and card
     placeholders around it and blur the distinction again. Not a full
     pill: on narrow screens or for Specialty the box is several rows tall. */
  border-radius: var(--r-lg);
}

/* Uppercase comes from CSS so screen readers still hear "Office", not
   letters. */
.staff-filters__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-600);
}

/* Equal-width columns on narrow screens: wrapped flex chips have different
   widths, so the rows came out ragged. Flow layout returns at 532px, the
   narrowest width where the four Office chips fit on one line. */
.staff-filters__chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.staff-filters__chips .chip {
  text-align: center;
}

@media (min-width: 532px) {
  .staff-filters__chips {
    display: flex;
    flex-wrap: wrap;
  }
}

.chip {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--cocoa);
  background-color: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--cb-400);
  color: var(--cb-700);
}

.chip[aria-pressed="true"] {
  background-color: var(--cb-600);
  border-color: var(--cb-600);
  color: var(--cream);
}

.staff-filters__empty {
  color: var(--stone);
}

/* Therapist page only: the same-day availability nudge, set above the
   filters so it reads before the visitor starts narrowing the list. */
.staff-callout {
  background-color: var(--cb-100);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 14px 20px;
  margin: 0 0 32px;
  width: fit-content;
}

/* The underline is the clickable cue; the offset keeps it clear of the
   descenders on the pink fill. */
.staff-callout a {
  font-weight: 600;
  text-underline-offset: 3px;
}

.staff-callout a:hover {
  color: var(--cb-800);
}

/* Photo bleeds to the card edges, so the card drops its padding and moves
   it onto the text body instead. position:relative anchors the name
   button's stretched overlay. */
.staff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.staff-card:hover {
  transform: translateY(-4px);
  border-color: var(--cb-400);
  box-shadow: 0 8px 24px rgb(72 16 30 / 0.08);
}

/* The button's own outline would only ring the name, so the card draws it. */
.staff-card:has(.staff-card__open:focus-visible) {
  outline: 2px solid var(--cb-400);
  outline-offset: 2px;
}

.staff-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.staff-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 24px;
  background-color: var(--cb-100);
  color: var(--cb-600);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.staff-card__body {
  padding: 18px 20px;
}

/* A person's name reads as a title, not a UI subhead, so it takes the serif
   rather than the sans H3 token. */
.staff-card__name {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 4px;
}

/* Stretched link: the ::after covers the whole card, making it one big hit
   area while the accessible name stays the clinician's name. */
.staff-card__open {
  font: inherit;
  color: var(--cb-700);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.staff-card__open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.staff-card__open:focus-visible {
  outline: none;
}

.staff-card:hover .staff-card__open {
  color: var(--cb-400);
}

.staff-card__title {
  margin-bottom: 10px;
}

.staff-card__facts {
  margin: 10px 0 0;
  font-size: var(--size-body-s);
  line-height: 1.4;
  color: var(--cocoa);
}

.staff-card__facts dd {
  margin: 0 0 4px;
}

.staff-card__facts dd:last-child {
  margin-bottom: 0;
}

/* Labeled Offices/Specialties list inside the bio dialog. */
.staff-card__meta {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linen);
  font-size: var(--size-body-s);
  color: var(--stone);
}

.staff-card__meta dt {
  font-size: var(--size-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--stone);
}

.staff-card__meta dd {
  margin: 2px 0 10px;
  color: var(--cocoa);
}

.staff-card__meta dd:last-child {
  margin-bottom: 0;
}

/* Waitlist note, styled after the kit's badge-rec pill. */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--cb-100);
  color: var(--cb-700);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  margin-bottom: 16px;
}

/* ---------- Staff bio dialog ---------- */

/* Mobile: a full-width sheet pinned to the bottom, where a thumb can reach
   the close button. Becomes a centered card at 768px (see below). */
.staff-bio {
  width: 100%;
  max-width: 100vw;
  max-height: 85vh;
  margin: auto 0 0;
  padding: 0;
  border: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background-color: var(--cream);
  color: var(--ink);
  overflow-y: auto;
}

.staff-bio::backdrop {
  background-color: rgb(33 27 26 / 0.55); /* --ink; custom props don't reach ::backdrop in all browsers */
}

.staff-bio__inner {
  position: relative;
  padding: 32px 24px;
}

.staff-bio__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  font-size: 28px;
  line-height: 1;
  color: var(--cocoa);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.staff-bio__close:hover {
  background-color: var(--cb-100);
  color: var(--cb-700);
}

.staff-bio__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 24px;
  padding-right: 32px;
}

.staff-bio__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.staff-bio__name {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 4px;
}

.staff-bio__header .badge {
  margin: 8px 0 0;
}

.staff-bio__body p {
  color: var(--cocoa);
}

.staff-bio__cta {
  margin-top: 24px;
}

body:has(dialog[open]) {
  overflow: hidden;
}

/* ---------- Forms ---------- */

.form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sentence-case labels, not the 12px caps used for captions. Uppercase
   micro-type is fine as decoration and poor as an input label. */
.form-field label {
  font-size: var(--size-body-s);
  font-weight: 600;
  color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--sand);
  border-radius: var(--r-sm);
  background-color: var(--paper);
  color: var(--ink);
}

/* Stone, not mist: mist lands around 2.6:1 against paper, which fails AA even
   for hint text. Stone clears 5:1 and still reads as secondary. */
.form-field input::placeholder,
.form-field textarea::placeholder,
.staff-filters__search::placeholder {
  color: var(--stone);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--mist);
}

.form .btn {
  align-self: flex-start;
}

/* The form hands off to the visitor's mail client rather than posting, so
   say so before they press the button and get surprised by a compose window. */
.form-note {
  margin: 0;
  font-size: var(--size-body-s);
  color: var(--cocoa);
}

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

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.contact-aside {
  padding-top: 8px;
}

.contact-aside h2 {
  font-size: var(--size-h2);
  margin-bottom: 4px;
}

.contact-aside p {
  color: var(--cocoa);
  font-size: var(--size-body-l);
}

.contact-aside .office__name {
  font-size: 19px;
}

.contact-aside .rule-list {
  margin-top: 24px;
}

.contact-aside .rule-list li {
  padding: 14px 0;
}

/* The aside runs at body size, a step up from the footer's small text, and
   its own paragraph color would otherwise outrank the muted fax gray. */
.contact-aside .office__fax {
  font-size: var(--size-body);
  color: var(--stone);
}

/* ---------- Utilities ---------- */

/* Hidden on screen but still read by screen readers, e.g. the card's dt
   labels, which sighted users infer from context. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Breakpoints (components) ---------- */

/* 768px and up: tablet */
@media (min-width: 768px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 64px;
  }

  .staff-bio {
    width: min(640px, 100vw - 32px);
    margin: auto;
    border-radius: var(--r-lg);
  }

  .staff-bio__inner {
    padding: 40px;
  }

  .staff-bio__photo {
    width: 160px;
    height: 160px;
  }
}

/* 880px and up: search and filter boxes share a row. Below this, the
   search bar would shrink under ~300px next to the Office box, so they
   stack at equal width instead. A long group (Specialty) wraps onto its
   own row. */
@media (min-width: 880px) {
  .staff-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .staff-filters__search-field {
    flex: 1 1 300px;
    max-width: 420px;
  }
}