/* Winterfield Health — doctor directory and care centers
   Loaded only by doctors-services.php. Extends site.css and pages.css rather
   than repeating them; every token here is already defined in site.css.

   Kept as a third stylesheet for the same reason pages.css exists: a new
   filename cannot be served stale, and these rules are used by exactly one page
   so the other 37 should not carry them. See PLAT-13. */

/* ---------- shared section bar ---------- */

.dir-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 0 14px;
  border-bottom: 1px solid var(--wf-hairline-strong);
  margin-bottom: 20px;
}
.dir-bar h2 { font-size: 26px; }

.dir-controls { display: flex; gap: 14px; flex-wrap: wrap; }
.dir-field { display: flex; flex-direction: column; gap: 4px; }
.dir-field span {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.dir-field input,
.dir-field select {
  font: 400 14.5px var(--wf-sans);
  padding: 9px 12px;
  min-width: 210px;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 4px;
  background: #FFF;
  color: var(--wf-ink);
}
.dir-field input:focus,
.dir-field select:focus {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 1px;
  border-color: var(--wf-terracotta);
}

.dir-status {
  font: 600 13px var(--wf-sans);
  color: var(--wf-muted);
  margin: 0 0 20px;
}

/* A jumped-to heading otherwise lands hard against the top of the viewport.
   The .page-jump row itself is in pages.css, since the info pages use it too. */
#dir-h, #centers-h { scroll-margin-top: 18px; }

/* ---------- clinician cards ---------- */

/* One flat grid, surname order, no specialty headings. Changed 2026-07-30:
   23 specialties over 26 people made the grouped version almost all heading. */
.dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}

.dir-card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: #FFF;
  border: 1px solid var(--wf-hairline);
  border-radius: 8px;
  padding: 14px 16px;
}

/* Initials, not a stock headshot. Twenty-six invented faces is a lot of
   generated art for a directory, and an empty photo frame reads as broken. */
.dir-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wf-tint);
  color: var(--wf-terracotta);
  font: 700 16px var(--wf-sans);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dir-body { flex: 1; min-width: 0; }
.dir-body h3 { font: 600 16.5px var(--wf-serif); line-height: 1.28; }
.dir-spec {
  font: 700 11px var(--wf-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wf-olive);
  margin: 4px 0 0;
}
.dir-loc {
  font: 400 13px/1.5 var(--wf-sans);
  color: var(--wf-body);
  margin: 5px 0 0;
}
.dir-npi {
  font: 400 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--wf-muted);
  margin: 5px 0 0;
}

.dir-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.dir-more {
  font: 700 12px var(--wf-sans);
  color: var(--wf-terracotta);
  text-decoration: none;
}
.dir-more:hover { text-decoration: underline; }

.dir-empty {
  font: 400 15px var(--wf-sans);
  color: var(--wf-body);
  background: var(--wf-tint);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 0 0 30px;
}

/* ---------- care centers ---------- */

.centers-sub { font-size: 13.5px; color: var(--wf-muted); margin: 0; }

.center-grid {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 14px;
}
.center-card {
  background: #FFF;
  border: 1px solid var(--wf-hairline);
  border-radius: 8px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.center-card.is-flagship {
  border-color: var(--wf-terracotta);
  background: var(--wf-tint);
  grid-column: span 2;
}
.center-card h3 { font-size: 19px; line-height: 1.28; text-wrap: pretty; }
.center-tag {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wf-olive);
  margin: 6px 0 0;
}
.center-addr {
  font: 400 13.5px/1.6 var(--wf-sans);
  font-style: normal;
  color: var(--wf-body);
  margin: 12px 0 0;
}
.center-staff {
  font: 400 13px/1.55 var(--wf-sans);
  color: var(--wf-body);
  margin: 10px 0 0;
}
.center-vol {
  font: 400 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--wf-muted);
  margin: 10px 0 0;
}
.center-link {
  font: 700 13px var(--wf-sans);
  color: var(--wf-terracotta);
  text-decoration: none;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--wf-hairline);
}
.center-link:hover { text-decoration: underline; }

/* ---------- staff and patient sign-in band ---------- */

.portal-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--wf-ink);
  color: var(--wf-on-ink);
  border-radius: 10px;
  padding: 30px 34px;
  margin: 10px 0 50px;
}
.portal-cta h2 { font-size: 23px; color: var(--wf-on-ink); }
.portal-cta p {
  font: 400 14.5px/1.6 var(--wf-sans);
  color: var(--wf-on-ink-muted);
  margin: 8px 0 0;
  max-width: 58ch;
}
.portal-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-quiet-line {
  background: transparent;
  border: 1px solid var(--wf-on-ink-dim);
  color: var(--wf-on-ink);
}
.btn-quiet-line:hover {
  background: rgba(250, 245, 239, .1);
  color: var(--wf-on-ink);
}

@media (max-width: 720px) {
  .center-card.is-flagship { grid-column: span 1; }
  .dir-field input, .dir-field select { min-width: 0; width: 100%; }
  .dir-controls { width: 100%; }
  .dir-field { flex: 1 1 100%; }
  .dir-card { flex-wrap: wrap; }
  .dir-actions { flex-direction: row; align-items: center; width: 100%; }
}