/* Site header — replica of the approved homepage header (Christopher's
   ruling, 2026-10-24: the homepage header styling is the keeper, identical
   on every page, mobile and desktop; only the footer may differ).
   Values measured from the standalone homepage: utility bar 34px cream,
   HCF in Manrope 800 27px #492074, nav 15px/800 #292332, Donate pill
   #492074 radius 99px, search icon-only. Loaded after the built CSS. */
.hcf-utility {
  background: #FAF8F3;
  border-bottom: 1px solid #E3DEE8;
  font-family: "Manrope", sans-serif;
}
.hcf-utility__inner {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 34px;
  font-size: 12px; font-weight: 700; letter-spacing: .025em; color: #645D6C;
}
.hcf-utility__links { display: flex; gap: 24px; }
.hcf-utility__links a { color: #645D6C; text-decoration: none; touch-action: manipulation; }
.hcf-utility__links a:hover { text-decoration: underline; }
.hcf-utility__links a:focus-visible {
  outline: 3px solid #492074; outline-offset: 3px; border-radius: 4px;
}

.gh-head {
  background: rgba(250, 248, 243, .97);
  border-bottom: 1px solid #E3DEE8;
  font-family: "Manrope", sans-serif;
  height: 91px;
}
.gh-head .gh-site-logo { text-decoration: none; }
.gh-head .gh-site-title {
  font-family: "Manrope", sans-serif;
  font-size: 27px; font-weight: 800; line-height: 1.12;
  letter-spacing: -.03em; color: #492074; margin: 0;
}
.gh-head .gh-site-logo:focus-visible {
  outline: 3px solid #492074; outline-offset: 3px; border-radius: 4px;
}

/* Top-level navigation, styled like the homepage's desktop nav */
.gh-head .nav > li > a,
.gh-head .hcf-subnav-toggle {
  font-family: "Manrope", sans-serif;
  font-size: 15px; font-weight: 800; color: #292332;
  touch-action: manipulation;
}
.gh-head .nav > li > a:hover { color: #492074; }

/* Search: icon only, like the homepage header */
.gh-head .gh-search {
  color: #492074; background: transparent;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%;
}
.gh-head .gh-search span { display: none; }
.gh-head .gh-search:focus-visible {
  outline: 3px solid #492074; outline-offset: 3px;
}

/* Contact lives in the utility bar now */
.gh-head .hcf-nav-contact { display: none; }

/* Donate pill */
.gh-head .hcf-donate-button {
  background: #492074; color: #fff;
  font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 800; line-height: 1.3;
  border-radius: 99px; padding: 12px 23px; text-decoration: none;
  touch-action: manipulation;
}
.gh-head .hcf-donate-button:hover { background: #321452; }
.gh-head .hcf-donate-button:focus-visible {
  outline: 3px solid #492074; outline-offset: 3px;
}

.gh-head .gh-burger-btn { color: #492074; }

@media (min-width: 992px) {
  /* Give the menu the room it needs so all five items stay on one line,
     as in the homepage header. */
  .gh-head-inner { grid-template-columns: auto 1fr auto; }
  .gh-head-menu { justify-self: center; }
  .gh-head .nav { flex-wrap: nowrap; align-items: center; }
  .gh-head .nav > li > a { white-space: nowrap; }
}
@media (max-width: 991px) {
  .hcf-utility__inner { min-height: 29px; justify-content: center; }
  .hcf-utility__links { display: none; }
  .gh-head { height: 73px; }
  .gh-head .hcf-donate-button { padding: 10px 16px; }
  /* Homepage mobile header: no search icon; the menu button sits at the
     right, after the Donate pill. */
  .gh-head .gh-search { display: none; }
  .gh-head .gh-burger-btn {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  }
  .gh-head .gh-head-actions { margin-right: 48px; }

  /* Mobile menu — the homepage's original dropdown panel, restored
     (Christopher, 2026-10-24). Cream panel hanging below the header,
     flat Manrope rows with arrows; the theme's slide-in is disabled. */
  .gh-head .gh-mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    width: auto; height: auto; max-height: calc(100dvh - 110px);
    overflow-y: auto; align-items: stretch;
    background: #FAF8F3;
    border-bottom: 1px solid #E3DEE8;
    box-shadow: 0 16px 20px rgba(50, 20, 82, .06);
    padding: 8px 20px 22px;
    font-family: "Manrope", sans-serif;
  }
  /* The concept menu has no dimmed backdrop — the theme's overlay stays
     as an invisible tap-to-close layer only. */
  .gh-head .gh-overlay.show { background: transparent; }
  .gh-head .gh-mobile-menu.animateRight,
  .gh-head .gh-mobile-menu.animateLeft { animation: none; }
  .gh-head .gh-mobile-menu__footer { display: none !important; }
  .hcf-mmenu__close {
    position: absolute; top: 4px; right: 12px;
    background: transparent; border: 0; padding: 6px;
    color: #645D6C; cursor: pointer;
  }
  .hcf-mmenu__close svg { width: 18px; height: 18px; }
  .hcf-mmenu__list { list-style: none; margin: 0; padding: 22px 0 0; }
  .hcf-mmenu__row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 5px; border-bottom: 1px solid #E3DEE8;
    font-size: 17px; font-weight: 800; color: #492074;
    text-decoration: none; touch-action: manipulation;
  }
  .hcf-mmenu__arrow { font-weight: 400; color: #492074; }
  .hcf-mmenu__secondary { margin-top: 4px; }
  .hcf-mmenu__srow {
    display: flex; align-items: center; width: 100%;
    padding: 12px 5px; border-bottom: 1px solid #E3DEE8;
    font-size: 13px; font-weight: 600; color: #645D6C;
    background: transparent; border-top: 0; border-left: 0; border-right: 0;
    text-decoration: none; text-align: left; cursor: pointer;
    font-family: "Manrope", sans-serif; touch-action: manipulation;
  }
  .hcf-mmenu__row:focus-visible, .hcf-mmenu__srow:focus-visible {
    outline: 3px solid #492074; outline-offset: 3px; border-radius: 4px;
  }
}

/* ------------------------------------------------------------------
   Search dialog — the homepage's original design, restored site-wide
   (Christopher, 2026-10-24). Curated links only; five popular
   starting points show before typing. Partial: search-dialog.hbs. */
.hcf-sicon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hcf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.locked { overflow: hidden; }
.hcf-search-dialog {
  border: 1px solid #E3DEE8; border-radius: 24px;
  background: #FAF8F3; color: #463E52; padding: 0;
  max-width: 600px; width: calc(100% - 32px); max-height: 88vh;
  box-shadow: 0 30px 100px rgba(29, 16, 44, .22);
  font-family: "Manrope", sans-serif;
}
.hcf-search-dialog::backdrop { background: rgba(33, 16, 47, .53); backdrop-filter: blur(5px); }
.hcf-search__inner { padding: 34px; overflow-y: auto; max-height: 88vh; }
.hcf-search__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 20px;
}
.hcf-search__head h2 {
  font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800;
  color: #492074; line-height: 1.15; letter-spacing: -0.015em; margin: 0;
  text-wrap: balance;
}
.hcf-search__close {
  background: transparent; border: 0; padding: 6px; cursor: pointer;
  color: #645D6C; touch-action: manipulation;
}
.hcf-search__wrap { position: relative; }
.hcf-search__wrap .hcf-sicon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: #492074; pointer-events: none;
}
#site-search {
  width: 100%; border: 1.5px solid #C5B6D2; background: #fff;
  border-radius: 13px; padding: 15px 14px 15px 45px;
  font-size: 16px; font-family: "Manrope", sans-serif; appearance: none;
  color: #463E52;
}
#site-search:focus-visible { outline: 3px solid #492074; outline-offset: 2px; }
#search-summary { font-size: 12px; color: #645D6C; margin: 14px 0 7px; }
.hcf-search__results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hcf-search__result {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px; border-radius: 12px; background: #fff;
  border: 1px solid #E3DEE8; text-decoration: none; touch-action: manipulation;
}
.hcf-search__result b { font-size: 17px; font-weight: 800; color: #492074; display: block; line-height: 1.3; }
.hcf-search__result small { font-size: 14px; color: #645D6C; line-height: 1.45; display: block; margin-top: 2px; }
.hcf-search__result .hcf-sicon { color: #492074; width: 18px; height: 18px; }
.hcf-search__result:hover { border-color: #492074; }
.hcf-search__result:focus-visible { outline: 3px solid #492074; outline-offset: 3px; }
.hcf-search__none { font-size: 17px; padding: 16px 4px; color: #645D6C; margin: 0; }
.hcf-search__small {
  font-size: 15px; color: #645D6C; line-height: 1.6;
  border-top: 1px solid #E3DEE8; padding-top: 16px; margin: 20px 0 0;
}
@media (max-width: 640px) {
  .hcf-search__inner { padding: 25px; }
  .hcf-search__head h2 { font-size: 26px; }
}

/* Embed guard (2026-10-24): pasted YouTube/Vimeo iframes in older posts carry
   inline styles (position:absolute; width/height:100%) meant for a wrapper
   Ghost's embed card does not provide — the iframe breaks out and covers the
   whole page. Force those embeds back into flow at 16:9. */
.kg-embed-card > :where(iframe[src*="youtube.com"], iframe[src*="vimeo.com"]) {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* Guide tables on the default template must never push the page wider than
   the phone: let the table scroll inside its own box (2026-10-24, surgery
   guide overflow catch). Caption included per the card-table rule. */
@media (max-width: 700px) {
  .gh-content table,
  .og-article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gh-content caption,
  .og-article caption {
    display: block;
    width: 100%;
  }
}

/* Default-template (og) page headers sat ~28px under the site header —
   noticeably tighter than the vo hero rhythm (64px / 48px mobile) used
   across the redesign (Christopher's catch on Treatment Options,
   2026-10-24). Lift the og article wrap to the same top spacing. */
.og-article-wrap {
  padding-top: 64px;
}
@media (max-width: 640px) {
  .og-article-wrap {
    padding-top: 48px;
  }
}

/* Breadcrumbs (2026-10-24): the base index.css lays .gh-breadcrumbs out as a
   no-wrap flex row, so long crumbs squeezed and wrapped mid-word on phones
   (the CareCircle post's trail stacked into columns). Wrap BETWEEN crumbs
   instead; each crumb stays whole on one line. */
.gh-breadcrumbs { flex-wrap: wrap; row-gap: 8px; }
.gh-breadcrumb-item { min-width: 0; }
.gh-breadcrumb-item a { white-space: nowrap; }

/* Post header spacing (2026-10-24, Christopher's screenshot: feature photo
   flush against the share icons). The bundle reset `.og h1/h2/h3/p/figure
   {margin:0}` (0,1,1) out-specifies the single-class header rules (0,1,0),
   zeroing their written top margins — measured on the mirror: tag 0 (written
   24), title 0 (16), excerpt 0 (16), figure 0 (32). Restore the written
   values (all on the --space scale) with double-qualified selectors. */
.og .og-article__tag { margin-top: 24px; }
.og .og-article__title { margin-top: 16px; }
.og .og-article__excerpt { margin-top: 16px; }
.og .og-article__fig { margin-top: 32px; }

/* Body image/video cards on default-template pages (fix 2026-10-26):
   the base theme scopes its card sizing to .gh-article-page-content
   (posts). Default-template pages render the body in .og-article, which
   never inherited those rules — editor image cards rendered at their
   raw pixel width (1120px) and broke mobile layout (home-prep page).
   These twins give .og-article the same treatment. */
.og-article .kg-card.kg-image-card,
.og-article .kg-card.kg-video-card {
  max-width: 736px;
  width: 100%;
}
.og-article .kg-card.kg-image-card img {
  width: 100%;
  height: auto;
}
.og-article .kg-card.kg-video-card video {
  width: 100%;
  height: auto;
}