/* GENERATED by scripts/build-guides.mjs -- do not edit.
 *
 * The header and footer rules from src/site/site.css, cut out between its
 * chrome:start and chrome:end markers so the static guide pages under
 * /guides/<slug>/ wear the same chrome as the React pages and cannot drift from
 * them. Change the styling in site.css; this file follows on the next build.
 */

.bp {
  /* Sampled from the supplied logo artwork. These were previously the nearest
     Tailwind teal and orange, which were close but not the brand; the wordmark
     and the buttons now agree. Keep in step with --brand-teal and
     --brand-orange in index.css, which cover the app and the admin. */
  --bp-teal: #009389;
  --bp-teal-dark: #00766e;
  --bp-teal-wash: #f0fdfa;
  --bp-orange: #fc5f13;
  --bp-orange-wash: #fff7ed;

  --bp-ink: #0f172a;
  --bp-body: #475569;
  --bp-faint: #94a3b8;
  --bp-line: #e2e8f0;
  --bp-surface: #ffffff;
  --bp-shell: #f8fafc;

  --bp-radius: 18px;
  --bp-radius-lg: 26px;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--bp-body);
  background: var(--bp-surface);
  font-feature-settings: 'cv11', 'ss01';
}

.bp h1,
.bp h2,
.bp h3,
.bp h4 {
  color: var(--bp-ink);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  font-weight: 700;
}

.bp p {
  margin: 0;
  line-height: 1.65;
}

.bp-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- buttons ---------- */

.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bp-btn-primary {
  background: var(--bp-teal);
  color: #fff;
}

.bp-btn-primary:hover {
  background: var(--bp-teal-dark);
}

.bp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bp-line);
}

.bp-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.5rem;
}

/* The static guide pages get only the marked sections of this file, never
   index.css, so the wordmark colours are declared here as well. Inside .bp
   these win on specificity over the copies in index.css; the values are the
   same, so which one applies does not matter. */
.bp .logo-book {
  color: var(--bp-teal);
}

.bp .logo-private {
  color: var(--bp-orange);
}

/* No gap: "Book" and "Private" are one word, set in two colours by .logo-book
   and .logo-private. Both the header and the footer here sit on light
   surfaces, so neither needs the white treatment the app footer uses. */
.bp-brand {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--bp-ink);
  text-decoration: none;
}

.bp-header-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
}

.bp-header-link {
  color: var(--bp-body);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.bp-header-link:hover {
  color: var(--bp-teal-dark);
}

.bp-cta-short {
  display: none;
}

@media (max-width: 760px) {
  .bp-header-nav {
    gap: 1rem;
  }

  .bp-header-link.is-secondary {
    display: none;
  }
}

/* Below this the full CTA wording stops fitting beside the logo and Guides. */
@media (max-width: 520px) {
  .bp-cta-long {
    display: none;
  }

  .bp-cta-short {
    display: inline;
  }

  .bp-header-cta {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.bp-footer {
  padding: 4rem 0 2.5rem;
  background: var(--bp-shell);
  border-top: 1px solid var(--bp-line);
}

.bp-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
}

@media (max-width: 820px) {
  .bp-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bp-footer-blurb {
  max-width: 28ch;
  margin-top: 0.9rem;
  font-size: 0.93rem;
}

.bp-footer h5 {
  margin: 0 0 0.9rem;
  color: var(--bp-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bp-footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-footer a {
  color: var(--bp-body);
  font-size: 0.93rem;
  text-decoration: none;
}

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

.bp-practitioner {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--bp-line);
  font-size: 0.93rem;
}

.bp-practitioner a {
  color: var(--bp-teal-dark);
  font-weight: 600;
}

.bp-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  margin-top: 1.4rem;
  font-size: 0.86rem;
  color: var(--bp-faint);
}

.bp-footer-bottom .bp-spacer {
  margin-left: auto;
}

.bp-contact {
  font-size: 0.86rem;
}

.bp-contact a {
  color: var(--bp-teal-dark);
  font-weight: 600;
}

.bp-disclaimer {
  width: 100%;
  margin-top: 0.4rem;
  color: var(--bp-faint);
  font-size: 0.86rem;
}

/* The guide pages set a tall body line-height for long-form reading, which the
   footer lists would otherwise inherit and sit too far apart. */
.bp-header,
.bp-footer {
  line-height: 1.5;
}