/* BP-WEB-TESTSITE-01 -- structural CSS for the Clearwater Home Cleaning demo build.
   Base layout/nav/hero/service/form/FAQ/footer rules are reused verbatim from
   SOURCES/09_typography_application_lab/SPECIMENS/shared/base.css (same tokens,
   same components) -- extended with the additional components this 5-page build
   needs (page-hero, cta-band, detail-categories, not-included list, process
   steps, about layout, select styling) that Source 09's single-page specimen
   never required. Non-typographic: type.css supplies font tokens. */

:root {
  --container: 72rem;
  --gutter: 1.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --radius: 0.5rem;
  --focus-ring: 3px solid #2b6cb0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg, #fff);
  color: var(--ink, #16181d);
  font-family: var(--font-body);
  line-height: var(--body-line-height, 1.6);
}
img, svg { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #16181d;
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 100;
}
.skip-link:focus {
  left: var(--gutter);
  top: var(--space-2);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Nav ---- */
.site-nav {
  border-bottom: 1px solid var(--hairline, #e6e6e6);
  background: var(--nav-bg, #fff);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  gap: var(--space-2);
}
.brand {
  font-family: var(--font-display);
  font-weight: var(--brand-weight, 700);
  font-size: clamp(1.0625rem, 4.2vw, 1.375rem);
  letter-spacing: var(--brand-tracking, 0);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.nav-links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--nav-weight, 500);
  font-size: var(--nav-size, 1rem);
}
.nav-links a:hover { text-decoration: underline; }
.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
/* .nav-links a.nav-cta (not just .nav-cta) so this outranks the .nav-links a rule
   above on specificity -- a plain .nav-cta lost that fight silently (both apply,
   .nav-links a wins on the tiebreak), leaving the CTA rendered in --ink text on
   an --accent background instead of --accent-ink. Found by BP-WEB-TESTSITE-01's
   own contrast audit (measured 3.46:1, not the intended white-on-accent value). */
.nav-links a.nav-cta {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  padding: 0.6em 1.2em;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none !important;
}
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--hairline, #ccc);
  border-radius: var(--radius);
  padding: 0.5em 0.65em;
  font: inherit;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Breakpoint held at 60rem (960px) -- reused from Source 09's own 768px-overlap
   fix (TEST_RESULTS/nav-768-overlap.md): a brand name + 4 links + CTA button
   that fits at 960px+ does not fit at 768px, so the compact/hamburger nav is
   kept through tablet portrait rather than forced inline too early. */
@media (max-width: 59.9375rem) {
  .nav-links { display: none; }
  .nav-links.is-open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; left: 0; right: 0; top: 4.5rem; background: var(--nav-bg,#fff); border-bottom: 1px solid var(--hairline,#e6e6e6); padding: var(--space-2) var(--gutter) var(--space-3); z-index: 50; }
  .nav-toggle { display: inline-block; }
  .site-nav { position: relative; }
}

/* ---- Hero (Home -- full hero with lede) ---- */
.hero {
  padding-block: var(--space-6) var(--space-5);
  background: var(--hero-bg, #f7f5f2);
}
.hero .wrap { max-width: 48rem; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight, 700);
  font-size: var(--h1-size, clamp(2.25rem, 5vw, 3.75rem));
  line-height: var(--h1-line-height, 1.05);
  letter-spacing: var(--h1-tracking, -0.01em);
  margin: 0 0 var(--space-3);
  color: var(--ink);
  text-wrap: balance;
}
.hero .lede {
  font-family: var(--font-body);
  font-size: var(--lede-size, 1.25rem);
  line-height: 1.6;
  color: var(--ink-muted, #4a4f57);
  max-width: 38rem;
  margin: 0 0 var(--space-4);
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-family: var(--font-body);
  font-weight: var(--btn-weight, 600);
  font-size: 1rem;
  letter-spacing: var(--btn-tracking, 0);
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn:hover { filter: brightness(0.92); }
.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Page hero (Services/detail/About/Contact -- shorter, no lede required) ---- */
.page-hero {
  padding-block: var(--space-5) var(--space-4);
  background: var(--hero-bg, #f7f5f2);
}
.page-hero .wrap { max-width: 48rem; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight, 700);
  font-size: var(--h1-size-page, clamp(2rem, 4.2vw, 3rem));
  line-height: var(--h1-line-height, 1.1);
  letter-spacing: var(--h1-tracking, -0.01em);
  margin: 0 0 var(--space-2);
  color: var(--ink);
  text-wrap: balance;
}
.page-hero .lede {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-muted, #4a4f57);
  max-width: 38rem;
  margin: 0;
}

/* ---- Service section (cards) ---- */
.service {
  padding-block: var(--space-6);
}
.service h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight, 700);
  font-size: var(--h2-size, clamp(1.75rem, 3vw, 2.5rem));
  line-height: var(--h2-line-height, 1.15);
  letter-spacing: var(--h2-tracking, 0);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.service .body-copy {
  font-size: var(--body-size, 1.0625rem);
  max-width: 42rem;
  color: var(--ink-muted, #4a4f57);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.service-card {
  border: 1px solid var(--hairline, #e6e6e6);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}
.service-card h3 {
  font-family: var(--font-display);
  font-weight: var(--h3-weight, 600);
  font-size: 1.1875rem;
  margin: 0 0 0.4em;
}
.service-card p { margin: 0 0 var(--space-2); font-size: 0.9375rem; color: var(--ink-muted, #4a4f57); flex-grow: 1; }
.service-card a { font-weight: 600; color: var(--accent); text-decoration: none; }
.service-card a:hover { text-decoration: underline; }
@media (max-width: 47.9375rem) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ---- Service detail: category breakdown ---- */
.detail-categories {
  padding-block: var(--space-6);
  background: var(--hero-bg, #f7f5f2);
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.category-card {
  background: var(--bg, #fff);
  border: 1px solid var(--hairline, #e6e6e6);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.category-card h3 {
  font-family: var(--font-display);
  font-weight: var(--h3-weight, 600);
  font-size: 1.125rem;
  margin: 0 0 var(--space-2);
}
.category-card ul { margin: 0; padding-left: 1.1em; color: var(--ink-muted, #4a4f57); font-size: 0.9375rem; }
.category-card li { margin-bottom: 0.4em; }
@media (max-width: 47.9375rem) {
  .category-grid { grid-template-columns: 1fr; }
}

.schedule-options {
  padding-block: var(--space-5);
}
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.schedule-card {
  border: 1px solid var(--hairline, #e6e6e6);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}
.schedule-card .freq {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  display: block;
  margin-bottom: 0.3em;
}
@media (max-width: 47.9375rem) {
  .schedule-grid { grid-template-columns: 1fr; }
}

.not-included {
  padding-block: var(--space-5);
}
.not-included .wrap { max-width: 42rem; }
.not-included ul { padding-left: 1.2em; color: var(--ink-muted, #4a4f57); }
.not-included li { margin-bottom: 0.5em; }

/* ---- About: process steps + narrative ---- */
.about-story {
  padding-block: var(--space-6);
}
.about-story .wrap { max-width: 42rem; }
.about-story p { color: var(--ink-muted, #4a4f57); font-size: var(--body-size, 1.0625rem); }

.process-steps {
  padding-block: var(--space-6);
  background: var(--hero-bg, #f7f5f2);
}
.process-list {
  list-style: none;
  counter-reset: step;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.process-list li {
  counter-increment: step;
  background: var(--bg, #fff);
  border: 1px solid var(--hairline, #e6e6e6);
  border-radius: var(--radius);
  padding: var(--space-3);
  position: relative;
}
.process-list li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  margin-bottom: var(--space-2);
}
.process-list h3 { font-family: var(--font-display); font-weight: var(--h3-weight, 600); font-size: 1.0625rem; margin: 0 0 0.4em; }
.process-list p { margin: 0; font-size: 0.9375rem; color: var(--ink-muted, #4a4f57); }
@media (max-width: 47.9375rem) {
  .process-list { grid-template-columns: 1fr; }
}

.values-strip {
  padding-block: var(--space-5);
}
.values-strip .wrap { max-width: 42rem; }

/* ---- CTA band ---- */
.cta-band {
  padding-block: var(--space-5);
  background: var(--ink, #16181d);
  text-align: center;
}
.cta-band .wrap { max-width: 36rem; }
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight, 700);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  margin: 0 0 var(--space-2);
}
.cta-band p { color: #d8d5cd; margin: 0 0 var(--space-3); }

/* ---- Form ---- */
.contact {
  padding-block: var(--space-6);
  background: var(--form-bg, #f7f5f2);
}
.contact .wrap { max-width: 34rem; }
.contact .form-note {
  background: #fff;
  border: 1px solid var(--hairline-strong, #b9bec6);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  color: var(--ink-muted, #4a4f57);
  margin-bottom: var(--space-3);
}
.field { margin-bottom: var(--space-3); }
.field .hint { display: block; font-size: 0.8125rem; color: var(--ink-muted, #4a4f57); margin-top: 0.3em; }
label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--label-weight, 600);
  font-size: var(--label-size, 0.9375rem);
  margin-bottom: 0.4em;
}
input, textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.9em;
  border: 1px solid var(--hairline-strong, #b9bec6);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: var(--focus-ring); outline-offset: 1px; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #b3261e;
}
.field .error {
  display: none;
  color: #b3261e;
  font-size: 0.8125rem;
  margin-top: 0.3em;
}
.field.has-error .error { display: block; }
.confirmation {
  display: none;
  background: #eef6ec;
  border: 1px solid #7fb069;
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-3);
}
.confirmation.is-visible { display: block; }
.confirmation h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.4em; }
.confirmation p { margin: 0; color: var(--ink-muted, #4a4f57); }

/* ---- FAQ ---- */
.faq { padding-block: var(--space-6); }
.faq h2 { font-family: var(--font-display); font-size: var(--h2-size, 2rem); margin-bottom: var(--space-3); }
.faq-item { border-bottom: 1px solid var(--hairline, #e6e6e6); }
.faq-item summary {
  cursor: pointer;
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: var(--faq-q-weight, 600);
  font-size: 1.0625rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+ "; }
.faq-item[open] summary::before { content: "\2212 "; }
.faq-item p {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted, #4a4f57);
  font-size: var(--body-size, 1rem);
  max-width: 42rem;
}
.faq-link { padding-block: 0 var(--space-5); }

footer {
  padding-block: var(--space-4);
  border-top: 1px solid var(--hairline, #e6e6e6);
  font-size: 0.875rem;
  color: var(--ink-muted, #4a4f57);
}

.synthetic-note {
  font-size: 0.8125rem;
  color: #8a8f98;
  border-top: 1px dashed #d9dce0;
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  max-width: 42rem;
}

.breadcrumb {
  font-size: 0.875rem;
  color: var(--ink-muted, #4a4f57);
  padding-block: var(--space-2);
}
.breadcrumb a { color: var(--ink-muted, #4a4f57); }