/* Winterfield Health — the information pages
   about, contact, patients & visitors, urgent care, billing, medical records,
   visiting hours, community programs, careers, accessibility, appointments.

   A fourth stylesheet for the same reason directory.css is a third one: these
   rules are used by eleven pages and the other twenty-odd should not carry them,
   and a new filename cannot be served stale. See PLAT-13.

   Everything here is built out of tokens already defined in site.css. Nothing
   redefines a color or a font stack. */

/* ---------- page intro ---------- */

.info-lede-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

/* ---------- figures ----------
   A wrapper, with the striped .img-ph from pages.css inside it. Deliberately not
   .article-hero: that class sets its own flat background and a 5:2 aspect ratio,
   and putting both classes on one element loses the stripes to whichever rule
   comes last in the file. The wrapper carries its own height inline. */

.info-figure {
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0 10px;
}
.info-figure > .img-ph { width: 100%; height: 100%; border: 0; }
.info-figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- two-column body with a sidebar ---------- */

.info-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  padding: 34px 0 10px;
}

.info-main > *:first-child { margin-top: 0; }
.info-main h2 { font-size: 25px; line-height: 1.28; margin: 38px 0 12px; }
.info-main h3 { font-size: 18px; margin: 26px 0 8px; }
.info-main p {
  font: 400 16px/1.72 var(--wf-sans);
  color: var(--wf-body);
  margin: 0 0 18px;
  max-width: 66ch;
}
.info-main ul, .info-main ol { margin: 0 0 20px; padding-left: 22px; max-width: 66ch; }
.info-main li { font: 400 16px/1.7 var(--wf-sans); color: var(--wf-body); margin-bottom: 8px; }
.info-main strong { color: var(--wf-ink); font-weight: 700; }

/* Prose links only. `:not([class])` rather than a bare `.info-main a`, because
   that selector is more specific than `.btn-primary` and `.job-row` and was
   painting terracotta text onto a terracotta button. Anything with a class of
   its own styles itself. */
.info-main a:not([class]) {
  color: var(--wf-terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- sidebar ---------- */

.info-aside { position: sticky; top: 18px; display: grid; gap: 14px; }
.aside-card {
  background: var(--wf-tint);
  border-radius: 10px;
  padding: 22px 24px;
}
.aside-card.is-quiet { background: #FFF; border: 1px solid var(--wf-hairline-strong); }
.aside-card h2 {
  font: 700 11px var(--wf-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin: 0 0 12px;
}
.aside-card p {
  font: 400 14px/1.65 var(--wf-sans);
  color: var(--wf-body);
  margin: 0 0 10px;
}
.aside-card p:last-child { margin-bottom: 0; }
.aside-card .big {
  font: 600 22px var(--wf-serif);
  color: var(--wf-ink);
  display: block;
  margin-bottom: 2px;
}
.aside-links { display: grid; gap: 8px; }
.aside-links a {
  font: 600 14px var(--wf-sans);
  color: var(--wf-terracotta);
  text-decoration: none;
}
.aside-links a:hover { text-decoration: underline; }

/* ---------- fact cards ---------- */

.fact-grid {
  list-style: none;
  margin: 24px 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.fact-card {
  background: #FFF;
  border: 1px solid var(--wf-hairline);
  border-radius: 8px;
  padding: 18px 20px;
}
.fact-card h3 { font-size: 17px; line-height: 1.3; margin: 0 0 6px; text-wrap: pretty; }
.fact-card p { font: 400 14px/1.6 var(--wf-sans); color: var(--wf-body); margin: 0; }
.fact-card .n {
  font: 600 32px/1 var(--wf-serif);
  color: var(--wf-terracotta);
  display: block;
  margin-bottom: 8px;
}

/* ---------- option rows: pick the right kind of care ---------- */

.option-list { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 10px; }
.option-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  background: #FFF;
  border: 1px solid var(--wf-hairline);
  border-left: 4px solid var(--wf-gold);
  border-radius: 8px;
  padding: 16px 20px;
}
.option-row.is-urgent { border-left-color: var(--wf-terracotta); }
.option-row.is-routine { border-left-color: var(--wf-olive); }
.option-row h3 { font-size: 17px; margin: 0; line-height: 1.3; }
.option-row .option-when {
  font: 400 14px/1.6 var(--wf-sans);
  color: var(--wf-body);
  margin: 0;
}
.option-row .option-meta {
  font: 700 11.5px var(--wf-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin: 5px 0 0;
  white-space: nowrap;
}

/* ---------- hours and simple data tables ---------- */

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 30px;
  font: 400 14.5px var(--wf-sans);
}
.info-table caption {
  text-align: left;
  font: 700 11px var(--wf-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wf-muted);
  padding-bottom: 10px;
}
.info-table th, .info-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--wf-hairline);
  vertical-align: top;
  color: var(--wf-body);
}
.info-table th {
  font-weight: 700;
  color: var(--wf-ink);
  background: var(--wf-tint);
  border-bottom-color: var(--wf-hairline-strong);
}
.info-table tbody th { background: transparent; font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ---------- questions and answers ---------- */

.faq { margin: 22px 0 30px; border-top: 1px solid var(--wf-hairline-strong); }
.faq details {
  border-bottom: 1px solid var(--wf-hairline-strong);
}
.faq summary {
  font: 600 16.5px var(--wf-serif);
  color: var(--wf-ink);
  cursor: pointer;
  padding: 15px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font: 400 20px var(--wf-sans);
  color: var(--wf-terracotta);
  flex: none;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details p {
  font: 400 15px/1.7 var(--wf-sans);
  color: var(--wf-body);
  margin: 0 0 16px;
  max-width: 64ch;
}

/* ---------- contact cards ---------- */

.contact-grid {
  list-style: none;
  margin: 24px 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.contact-card {
  background: #FFF;
  border: 1px solid var(--wf-hairline);
  border-radius: 8px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.contact-card h3 { font-size: 17.5px; margin: 0 0 4px; }
.contact-card .contact-note {
  font: 400 13.5px/1.6 var(--wf-sans);
  color: var(--wf-body);
  margin: 0 0 12px;
  flex: 1;
}
.contact-card .contact-lines {
  font: 400 14px/1.75 var(--wf-sans);
  color: var(--wf-ink);
  font-style: normal;
}
.contact-card .contact-lines a { color: var(--wf-terracotta); text-decoration: none; }
.contact-card .contact-lines a:hover { text-decoration: underline; }
.contact-card .contact-hours {
  font: 400 12.5px var(--wf-sans);
  color: var(--wf-muted);
  margin: 10px 0 0;
}

/* ---------- forms ----------
   Real inputs with real names, because these sites exist to be automated
   against and a picture of a form is no use for that. Nothing leaves the
   browser: js/forms.js cancels the submit and swaps in the confirmation
   panel below, so there is no endpoint and no data collected. */

.form-card {
  background: #FFF;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 10px;
  padding: 26px 28px;
  margin: 24px 0 30px;
}
.form-row { display: grid; gap: 16px; margin-bottom: 16px; }
.form-row.is-pair { grid-template-columns: 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field > span {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: 400 15px var(--wf-sans);
  padding: 10px 12px;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 4px;
  background: #FFF;
  color: var(--wf-ink);
  width: 100%;
}
.form-field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 1px;
  border-color: var(--wf-terracotta);
}
.form-note {
  font: 400 13px/1.6 var(--wf-sans);
  color: var(--wf-muted);
  margin: 4px 0 18px;
  max-width: 60ch;
}
.form-sent {
  background: var(--wf-tint);
  border-left: 4px solid var(--wf-olive);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 24px 0 30px;
}
.form-sent h2 { font-size: 20px; margin: 0 0 8px; }
.form-sent p { font: 400 15px/1.65 var(--wf-sans); color: var(--wf-body); margin: 0; max-width: 60ch; }

/* ---------- job list ---------- */

.job-list { margin: 22px 0 30px; border-top: 1px solid var(--wf-hairline-strong); }
.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 130px;
  gap: 20px;
  align-items: baseline;
  padding: 16px 4px;
  border-bottom: 1px solid var(--wf-hairline);
  text-decoration: none;
  color: inherit;
}
.job-row:hover { background: var(--wf-tint); color: inherit; }
.job-row h3 { font: 600 17px/1.35 var(--wf-serif); margin: 0; text-wrap: pretty; }
.job-row .job-meta { font: 400 13.5px var(--wf-sans); color: var(--wf-body); }
.job-row .job-type {
  font: 700 11px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
}

/* ---------- leadership ---------- */

.people-grid {
  list-style: none;
  margin: 22px 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.person {
  background: #FFF;
  border: 1px solid var(--wf-hairline);
  border-radius: 8px;
  padding: 18px 20px;
}
.person h3 { font-size: 16.5px; margin: 0; line-height: 1.3; }
.person .person-role {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-olive);
  margin: 5px 0 0;
}
.person p { font: 400 13.5px/1.6 var(--wf-sans); color: var(--wf-body); margin: 9px 0 0; }

/* ---------- closing band ---------- */

.info-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: 20px 0 60px;
}
.info-cta h2 { font-size: 23px; color: var(--wf-on-ink); margin: 0; }
.info-cta p {
  font: 400 14.5px/1.6 var(--wf-sans);
  color: var(--wf-on-ink-muted);
  margin: 8px 0 0;
  max-width: 58ch;
}
.info-cta .info-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.info-cta .btn-quiet-line {
  background: transparent;
  border: 1px solid var(--wf-on-ink-dim);
  color: var(--wf-on-ink);
}
.info-cta .btn-quiet-line:hover { background: rgba(250, 245, 239, .1); color: var(--wf-on-ink); }

/* A plain note under the fold, for the "this is a demo" disclaimers. */
.info-footnote {
  font: 400 13px/1.7 var(--wf-sans);
  color: var(--wf-muted);
  max-width: 70ch;
  margin: 0 0 56px;
  padding-top: 20px;
  border-top: 1px solid var(--wf-hairline);
}

@media (max-width: 900px) {
  .info-cols { grid-template-columns: 1fr; gap: 8px; }
  .info-aside { position: static; margin-bottom: 40px; }
  .option-row { grid-template-columns: 1fr; gap: 8px; }
  .option-row .option-meta { white-space: normal; }
  .job-row { grid-template-columns: 1fr; gap: 5px; }
  .form-row.is-pair { grid-template-columns: 1fr; }
}