/* Vancouver Walk-In Clinics — core stylesheet
   Palette: clinical teal + calm green, tuned for healthcare directories. */

:root {
  --teal-900: #06414c;
  --teal-800: #075263;
  --teal-700: #0a6b7c;
  --teal-600: #0d8496;
  --teal-100: #d9eef1;
  --teal-50:  #eef8fa;

  --green-700: #0e7a53;
  --green-600: #12a870;
  --green-100: #d8f3e6;

  --amber-700: #8a5a00;
  --amber-100: #fdf0d5;

  --red-700: #a8321f;
  --red-600: #c8452f;
  --red-100: #fbe4e0;

  --ink:      #12232a;
  --ink-soft: #40555e;
  --ink-mute: #63767f;
  --line:     #dbe4e8;
  --line-soft:#eaf0f2;
  --paper:    #ffffff;
  --shell:    #f5f9fa;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(6, 65, 76, .06), 0 1px 3px rgba(6, 65, 76, .05);
  --shadow-md: 0 4px 16px rgba(6, 65, 76, .08);
  --wrap: 1140px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--shell);
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--teal-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-900); }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; color: var(--teal-900); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.85rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); margin-top: 2em; }
h3 { font-size: 1.18rem; margin-top: 1.6em; }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap-narrow { max-width: 760px; margin-inline: auto; padding-inline: 20px; }

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

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--teal-900); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 2px; border-radius: 4px; }

/* ---------- Emergency bar ---------- */
.emergency-bar {
  background: var(--red-700);
  color: #fff;
  font-size: .875rem;
  text-align: center;
  padding: 7px 20px;
}
.emergency-bar a { color: #fff; font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--teal-700);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.brand-mark svg { width: 19px; height: 19px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; color: var(--teal-900); font-size: 1.02rem; letter-spacing: -.02em; }
.brand-sub { font-size: .72rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }

.nav-toggle {
  margin-left: auto; display: none; background: none; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; cursor: pointer; color: var(--teal-900); font-size: .9rem;
}

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none;
  color: var(--ink-soft); font-size: .93rem; font-weight: 500;
}
.site-nav a:hover { background: var(--teal-50); color: var(--teal-800); }
.site-nav a[aria-current="page"] { background: var(--teal-100); color: var(--teal-900); font-weight: 600; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; order: 3; margin-left: 0; padding-bottom: 12px; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 2px; }
  .header-inner { flex-wrap: wrap; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(165deg, var(--teal-800) 0%, var(--teal-700) 55%, var(--teal-600) 100%);
  color: #fff;
  padding: 54px 0 60px;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero .lede { font-size: 1.12rem; max-width: 62ch; color: #dcf0f4; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.22); }
.hero-stat strong { display: block; font-size: 1.7rem; line-height: 1.1; }
.hero-stat span { font-size: .86rem; color: #c6e6ec; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: .97rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
}
.btn-primary { background: #fff; color: var(--teal-800); }
.btn-primary:hover { background: var(--teal-50); color: var(--teal-900); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-solid { background: var(--teal-700); color: #fff; }
.btn-solid:hover { background: var(--teal-800); color: #fff; }
.btn-outline { border-color: var(--line); background: var(--paper); color: var(--teal-800); }
.btn-outline:hover { border-color: var(--teal-600); color: var(--teal-900); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .84rem; color: var(--ink-mute); padding: 14px 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "›"; margin-left: 6px; color: var(--line); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--ink-mute); }

/* ---------- Layout ---------- */
main { display: block; }
.section { padding: 46px 0; }
.section-tight { padding: 30px 0; }
.section-alt { background: var(--paper); border-block: 1px solid var(--line); }

.page-head { padding: 30px 0 8px; }
.page-head .lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 68ch; }

/* min(Npx, 100%) keeps the track floor from exceeding the container: a bare
   minmax(300px, 1fr) forces a 300px column inside a 265px container on a 320px
   phone and pushes the whole page sideways. */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ---------- Clinic cards ---------- */
.clinic-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 20px 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.clinic-card h3, .clinic-card h2 { margin: 0; font-size: 1.1rem; }
.clinic-card h3 a, .clinic-card h2 a { text-decoration: none; color: var(--teal-900); }
.clinic-card h3 a:hover, .clinic-card h2 a:hover { text-decoration: underline; }
.clinic-meta { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.clinic-meta strong { color: var(--ink); font-weight: 600; }
/* Only the button row floats to the card's bottom edge. Anchoring the tag row
   instead leaves a gap in the middle of every short card in a stretched grid. */
.clinic-card .card-actions { margin-top: auto; padding-top: 4px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.card-actions a {
  font-size: .87rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: 9px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--teal-800);
}
.card-actions a:hover { border-color: var(--teal-600); background: var(--teal-50); }
.card-actions a.primary { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.card-actions a.primary:hover { background: var(--teal-800); }

/* ---------- Tags & badges ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--teal-50); color: var(--teal-800);
  border: 1px solid var(--teal-100);
}
.tag-upcc { background: var(--green-100); color: var(--green-700); border-color: #b6e7ce; }
.tag-emergency { background: var(--red-100); color: var(--red-700); border-color: #f3cec7; }
.tag-note { background: var(--amber-100); color: var(--amber-700); border-color: #f2ddb3; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status-open { color: var(--green-600); }
.status-closed { color: var(--ink-mute); }
.status-unknown { color: var(--amber-700); }

/* ---------- Filter bar ---------- */
.filter-bar {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; display: grid; gap: 12px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.filter-bar label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.filter-row { display: grid; gap: 12px; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 720px) { .filter-row { grid-template-columns: 1fr; } }
.filter-bar input, .filter-bar select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: .95rem; background: var(--paper); color: var(--ink);
}
.filter-count { font-size: .88rem; color: var(--ink-mute); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
/* Column headers only. Row headers (<th scope="row">) hold clinic and hospital
   names and full sentences: they must stay sentence case and must be allowed to
   wrap, or the table is forced wider than its container and scrolls on desktop. */
thead th {
  background: var(--teal-50); color: var(--teal-900); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
tbody th { font-weight: 600; color: var(--ink); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td a[href^="tel:"] { white-space: nowrap; }

/* ---------- Panels & callouts ---------- */
.panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.callout {
  border-left: 4px solid var(--teal-600); background: var(--teal-50);
  padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin: 22px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout-warn { border-left-color: var(--red-600); background: var(--red-100); }
.callout-tip { border-left-color: var(--green-600); background: var(--green-100); }

.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green-600); font-weight: 700;
}

/* ---------- FAQ ---------- */
.faq details {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 15px 18px; font-weight: 600; color: var(--teal-900);
  list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--teal-600); flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 18px 4px; color: var(--ink-soft); }

/* ---------- Hours table ---------- */
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: .94rem;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .day { color: var(--ink-soft); }
.hours-list .is-today { font-weight: 700; color: var(--teal-800); }

/* ---------- Clinic detail ---------- */
/* padding-block, never the `padding` shorthand: this element is also a .wrap,
   and the shorthand would wipe out its horizontal gutter. */
.clinic-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; padding-block: 26px 50px; }
.clinic-layout > * { min-width: 0; }
@media (max-width: 940px) { .clinic-layout { grid-template-columns: 1fr; } }
.sidebar { position: sticky; top: 90px; display: grid; gap: 16px; min-width: 0; }
@media (max-width: 940px) { .sidebar { position: static; } }
.sidebar .panel h2 { margin-top: 0; font-size: 1.05rem; }

.keyfacts { list-style: none; padding: 0; margin: 0; }
.keyfacts li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .94rem; }
.keyfacts li:last-child { border-bottom: 0; }
.keyfacts .k { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); }

/* ---------- Link lists ---------- */
.link-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); list-style: none; padding: 0; margin: 0; }
.link-card {
  display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px 18px; text-decoration: none; box-shadow: var(--shadow-sm);
}
.link-card:hover { border-color: var(--teal-600); box-shadow: var(--shadow-md); }
.link-card strong { display: block; color: var(--teal-900); font-size: 1.02rem; margin-bottom: 3px; }
.link-card span { color: var(--ink-soft); font-size: .89rem; }

.inline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.inline-list a {
  display: inline-block; padding: 6px 13px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--teal-800);
}
.inline-list a:hover { border-color: var(--teal-600); background: var(--teal-50); }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
/* When .prose sits on the .wrap itself, keep the container full width so
   headings and tables share the page's left edge, and cap only the running text.
   Shrinking the whole container instead makes the section look indented against
   the full-width blocks above and below it. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > p, .wrap.prose > ul, .wrap.prose > ol, .wrap.prose > .callout { max-width: 72ch; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .5em; }
/* Utility lists manage their own indentation — `.prose ul` outranks their own
   `padding: 0`, which otherwise pushes hours rows and checklists out of
   alignment with the body copy beside them. */
.prose .checklist,
.prose .hours-list,
.prose .keyfacts,
.prose .inline-list,
.prose .link-cards { padding-left: 0; }
.prose h2 { padding-top: .2em; }
.toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 30px; }
.toc h2 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 4px; font-size: .94rem; }

.updated { font-size: .84rem; color: var(--ink-mute); }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-900); color: #c3dfe4; padding: 46px 0 26px; margin-top: 40px; font-size: .93rem; }
.site-footer h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
.site-footer a { color: #c3dfe4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.footer-bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); font-size: .85rem; color: #9dc4cc; }
.footer-bottom p { margin: 0 0 8px; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-mute); }
.small { font-size: .88rem; }
.hidden { display: none !important; }

@media print {
  .site-header, .site-footer, .emergency-bar, .filter-bar, .hero-actions { display: none; }
  body { background: #fff; font-size: 12pt; }
}