/* ---------- 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;
  gap: 16px;
}

.staff-filters__search-field {
  position: relative;
  max-width: 420px;
}

.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: 12px 16px 12px 44px;
  border: 1px solid var(--sand);
  border-radius: var(--r-pill);
  background-color: var(--paper);
  color: var(--ink);
}

/* Grid, not flex-wrap: flex-wrap decides per group whether the chips fit
   beside the label, so one group could sit inline while the next stacked. */
.staff-filters__group {
  display: grid;
  gap: 8px 12px;
}

/* Same size as the chips it introduces, so it reads as a label for them
   rather than a section caption. */
.staff-filters__label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cocoa);
}

.staff-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.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) {
  /* One label column shared by both groups (subgrid), sized to the widest
     label, so the chips start on the same left edge with no dead space.
     Baseline lines each label up with its first row of chips. */
  .staff-filters {
    display: grid;
    grid-template-columns: max-content 1fr;
  }

  .staff-filters > * {
    grid-column: 1 / -1;
  }

  .staff-filters__group {
    grid-template-columns: subgrid;
    align-items: baseline;
  }

  .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;
  }
}