/* ==========================================================================
   Best Community Care — Temporary Business Continuity Site
   Brand colors sourced from the confirmed transactional email templates:
     teal #397c88  (primary — 4.76:1 on white, passes WCAG AA)
     lime #9acc3c  (accent ONLY — 1.9:1 on white, MUST NOT carry text)

   Lime is used sparingly and on purpose: the header rule and the hero
   slogan. Structural rules use teal, which reads calmer and more clinical.
   ========================================================================== */

:root {
  --teal:        #397c88;
  --teal-dark:   #2f6470;
  --teal-tint:   #edf4f5;   /* closing band */
  --teal-wash:   #f5f9f9;   /* quiet band — notice, services */
  --lime:        #9acc3c;
  --ink:         #24333a;
  --ink-muted:   #4a5c63;
  --line:        #dde5e7;
  --bg:          #ffffff;

  --wrap:        1080px;
  --gap:         1.25rem;
  --radius:      6px;
  --focus:       #b3541e;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;          /* 16px — prevents iOS zoom-on-focus */
  line-height: 1.65;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

/* Editorial headings: tight, balanced, never orphaned. */
h1, h2, h3 {
  margin: 0 0 0.5em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: 1.8125rem;
  line-height: 1.14;
  letter-spacing: -0.021em;
}

h2 {
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.013em;
  margin-bottom: 0.5rem;
}

h3 {
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Focus & skip link ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The default focus color is tuned for light backgrounds and does not carry
   enough contrast against the dark teal footer. White reads at 6.6:1 there. */
.site-footer :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

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

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.375rem;
}

/* Sections carry no default divider. Transitions are handled deliberately
   per section below — space, hairline, or tonal band — so the page does not
   read as a stack of identical slabs. */
section { padding: 2.75rem 0; }

.section-intro {
  color: var(--ink-muted);
  max-width: 56ch;
  margin-bottom: 1.75rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;                 /* ≥44px tap target */
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}

.btn-primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--teal-dark);
  border-color: #b9cdd1;
}
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: var(--teal);
  background: var(--teal-wash);
  color: var(--teal-dark);
}

.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 2px solid var(--lime);
  padding: 1.125rem 0;
  background: #fff;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.site-logo { flex: 0 0 auto; }
.site-logo img { width: 168px; height: 65px; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-switch {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--teal-dark);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
}
.lang-switch:hover { background: var(--teal-wash); }

/* Header call button is hidden on the smallest screens — the sticky
   bottom bar covers that case and avoids a cramped two-row header. */
.header-actions .btn { display: none; }

/* ---------- Status notice ----------
   Deliberately quiet. It must be read, not lead: the hero headline is the
   page's primary message. Small type, a wash background rather than a
   saturated band, and a hairline instead of a border. */
.notice {
  background: var(--teal-wash);
  border-bottom: 1px solid var(--line);
  padding: 0.875rem 0;
}
.notice p {
  margin: 0;
  max-width: 78ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.notice strong {
  color: var(--teal-dark);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero { padding: 2.5rem 0 3rem; }

.hero-media {
  margin-bottom: 1.75rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 563;   /* reserves space, prevents layout shift */
  object-fit: cover;
}

.hero-copy h1 {
  max-width: 20ch;
  margin-bottom: 0.75rem;
}

.hero-copy p {
  color: var(--ink-muted);
  max-width: 50ch;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The brand slogan, set as a quiet pull-quote. This is the one place lime
   appears in the body of the page. */
.hero-tagline {
  color: var(--teal-dark);
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--lime);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ---------- Locations ----------
   Was three bordered boxes; now three ruled columns. Same information,
   markedly less template. */
section[aria-labelledby="loc-title"] {
  border-top: 1px solid var(--line);
}

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

.card {
  border: 0;
  border-top: 2px solid var(--teal);
  border-radius: 0;
  background: none;
  padding: 1.125rem 0 1.5rem;
  display: flex;
  flex-direction: column;
}
.card + .card { margin-top: 0.25rem; }

.card h3 {
  margin-bottom: 0.375rem;
  color: var(--ink);
  font-weight: 700;
}

.card address {
  font-style: normal;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
  flex: 1 1 auto;
}

/* Directions read as a link, not a third button competing with the hero
   CTAs. Padding preserves the 44px target. */
.card .btn {
  align-self: flex-start;
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--teal-dark);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.card .btn:hover,
.card .btn:focus {
  background: none;
  color: var(--teal);
  text-decoration-thickness: 2px;
}

/* ---------- Services ----------
   Tonal band, so the transition from Locations needs no divider. */
.services { background: var(--teal-wash); }

.service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
}

.service-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

/* ---------- Insurance ----------
   Intentionally the shortest section on the page: one idea, one paragraph,
   set slightly larger. Compact padding keeps it from reading as a full
   section and breaks the repetitive rhythm. */
section[aria-labelledby="ins-title"] { padding: 2.25rem 0; }

section[aria-labelledby="ins-title"] .section-intro {
  margin-bottom: 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  color: var(--ink);
}

/* ---------- About ----------
   The photograph fades to white at its edges, so framing it in a rounded
   box with a grey backdrop made it read as stock art in a card. Unframed,
   it sits on the page like real practice photography. */
section[aria-labelledby="about-title"] { padding: 3rem 0; }

.about-media {
  margin-bottom: 1.5rem;
  border-radius: 0;
  overflow: visible;
}
.about-media img {
  width: 100%;
  aspect-ratio: 900 / 633;
  object-fit: cover;
}

.about-copy p {
  color: var(--ink-muted);
  max-width: 58ch;
}
.about-copy strong { color: var(--ink); }

/* ---------- Contact ----------
   The closing band. The phone number is the largest single element on the
   page after the headline, because calling is the only action that matters
   while the production site is down. */
.contact {
  background: var(--teal-tint);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.contact-list li {
  padding: 0.875rem 0;
  border-bottom: 1px solid #d7e4e6;
}
.contact-list li:last-child { border-bottom: 0; }

.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 0.1875rem;
}

.contact-value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--teal-dark);
  text-decoration: none;
  word-break: break-word;
}
.contact-value:hover { text-decoration: underline; }

/* Phone is first in the list and is the primary action. */
.contact-list li:first-child { padding-top: 0.25rem; }
.contact-list li:first-child .contact-value {
  font-size: 1.625rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  display: inline-block;
}

.contact-note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--teal-dark);
  color: #fff;
  padding: 2.5rem 0;
  /* clears the sticky mobile call bar */
  padding-bottom: calc(2.5rem + 72px);
}

.site-footer a { color: #fff; }

.footer-logo {
  background: #fff;
  display: inline-block;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.footer-logo img { width: 148px; height: 57px; }

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.footer-social a {
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-social a:hover { text-decoration: underline; }

.footer-meta {
  font-size: 0.875rem;
  color: #d4e4e7;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 1.25rem;
}
.footer-meta p { margin-bottom: 0.25rem; }

/* ---------- Sticky mobile call bar ---------- */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
}

/* ==========================================================================
   Tablet — 600px and up
   ========================================================================== */
@media (min-width: 600px) {
  h1 { font-size: 2.1875rem; }
  h2 { font-size: 1.4375rem; }

  section { padding: 3.25rem 0; }

  .hero { padding: 3.25rem 0 3.75rem; }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .hero-actions .btn { width: auto; }

  .service-list { grid-template-columns: repeat(2, 1fr); }

  .header-actions .btn { display: inline-flex; }

  section[aria-labelledby="ins-title"] { padding: 2.75rem 0; }
  section[aria-labelledby="about-title"] { padding: 3.75rem 0; }
  .contact { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* Location cards go straight from 1 column to 3, skipping the 2-column stage.
   Three cards in a 2-column grid always leave the third one orphaned; keeping
   all three identical in a single row reads as intentional at tablet width. */
@media (min-width: 760px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2rem;
  }
  .card + .card { margin-top: 0; }
  .card { padding-bottom: 0; }
}

/* ==========================================================================
   Desktop — 900px and up
   ========================================================================== */
@media (min-width: 900px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.5rem; }

  section { padding: 4rem 0; }

  /* Hero: asymmetric split, copy leading. Extra bottom space lets the
     headline breathe before the first divider. */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4.25rem 1.375rem 4.75rem;
    max-width: var(--wrap);
    margin: 0 auto;
  }
  .hero > .wrap { padding: 0; max-width: none; }
  .hero-media { margin-bottom: 0; order: 2; }
  .hero-copy  { order: 1; }

  .hero-copy h1 { max-width: 16ch; margin-bottom: 1rem; }
  .hero-copy p { font-size: 1.125rem; max-width: 46ch; }
  .hero-actions { margin-top: 2rem; }

  .service-list { grid-template-columns: repeat(3, 1fr); }

  section[aria-labelledby="ins-title"] { padding: 3rem 0; }

  section[aria-labelledby="about-title"] { padding: 4.5rem 0; }

  .about-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 3.5rem;
    align-items: center;
  }
  .about-media { margin-bottom: 0; }

  /* Two columns, weighted toward the contact details. The note is tied to
     the details with a rule so it reads as a closing remark rather than
     text floating in empty space. */
  .contact { padding-top: 4rem; padding-bottom: 4rem; }
  .contact-inner {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 0 4rem;
    align-items: start;
  }
  .contact-note {
    margin-top: 0.25rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--teal);
  }

  /* Sticky bar is mobile-only; the header button takes over */
  .call-bar { display: none; }
  .site-footer { padding-bottom: 2.5rem; }
}

/* ---------- Print ---------- */
@media print {
  .call-bar, .skip-link, .notice, .hero-actions { display: none; }
  body { color: #000; }
  section { padding: 1rem 0; }
}