/* =====================================================================
   The article bar: the sticky blue breadcrumb strip with its back link and
   the "Search article..." field, exactly as on the Rethinking Endometriosis
   article (the pattern for every article). Extracted from
   css/rethinking-endo.css for pages that don't load that whole stylesheet
   (regular posts, page template single.php). Its rem sizes are written out
   in px (that sheet sets a 16px root; posts use the theme's 22px root).
   ===================================================================== */
.site-breadcrumb-fixed{
  --ink:#16283c;--muted:#5f6b7a;--rule:#ddd8d0;--rule-soft:#e9e5de;--focus:#2e5c8a;
  --panel:#ffffff;--paper:#faf8f5;
  --font-body:"Work Sans",system-ui,sans-serif;
}
/* sticky needs the page wrapper not to clip vertically (see rethinking-endo.css) */
body.single-post .page-wrapper{overflow-x:clip;overflow-y:visible}
.site-breadcrumb-fixed{
  position:sticky;
  top:66px;
  z-index:99;
  background:#d7edf7f0;
}
body.page-template-page-rethinking-endo-php .page-wrapper{overflow-x:clip; overflow-y:visible;}
.site-breadcrumb{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:1440px;
  margin:0 auto;
  padding:8.8px 32px;
  border-top:1px solid var(--rule-soft);
}
.breadcrumb-back{
  display:inline-flex;
  align-items:center;
  gap:5.6px;
  font:inherit;
  font-family:var(--font-body);
  font-size:13.12px;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
}
.breadcrumb-back:hover{color:var(--ink)}
.breadcrumb-back .arrow{font-family:var(--font-body);line-height:1}

.controls{display:flex;align-items:center;gap:8px;margin-left:auto}
.search-wrap{position:relative}
.search-input{
  font:inherit;
  font-size:13.6px;
  line-height:1.2;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:20px;
  padding:5.6px 30.4px 5.6px 11.2px;
  height:34.4px;
  width:176px;
  max-width:34vw;
}
/* iOS Safari auto-zooms the page on focusing any input with a computed
   font-size under 16px — the site's own 13.6px above (13.6px, given this
   stylesheet's 16px root) was well under that, which is what made tapping
   the search field zoom the whole page in. 16px is the actual fix; it's
   kept smaller on desktop where the zoom behavior doesn't apply and the
   original size still reads fine. This has to come AFTER the base
   .search-input rule above (not inside the earlier @media(max-width:640px)
   block near the top of the file) — same selector, same specificity, so
   without that ordering the later base rule would just win and silently
   undo this override.

   16px still reads visually larger next to "Back to Insights" (13.12px).
   Since the computed font-size has to stay 16px, the whole pill is scaled
   down 0.82x (matching Back to Insights) with transform, and search-wrap
   plus every box dimension below is inflated by the inverse (1/0.82) so
   they land back at their original on-screen size once scaled — text and
   pill both end up visually at the original size, iOS just never sees a
   font-size under 16px. transform-origin is the box's own top-left corner
   (where search-wrap's box also starts), so the scaled result lines up
   exactly with search-wrap's fixed size and the clear button/dropdown,
   neither of which are part of this transform, stay put. */
@media (max-width:640px){
  .search-wrap{width:144px;height:34.4px}
  .search-input{
    font-size:16px;
    width:175.68px;
    max-width:none;
    height:41.92px;
    padding:6.83px 37.07px 6.83px 13.66px;
    border-width:1.22px;
    border-radius:999px;
    transform:scale(0.82);
    transform-origin:0 0;
  }
}
/* The browser's own native search-cancel glyph is WebKit-only (Safari
   renders one, Chrome/Firefox don't — which is why it looked entirely
   missing "on desktop" there) and can't be styled or relied on
   cross-browser, so it's replaced with the explicit #search-clear button
   below and hidden here to avoid the two ever appearing stacked in Safari. */
.search-input::-webkit-search-cancel-button{display:none}
.search-input::placeholder{color:var(--muted)}
.search-clear{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:20.8px;
  height:20.8px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--rule-soft);
  color:var(--muted);
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.search-clear:hover{background:var(--rule);color:var(--ink)}
.search-clear[hidden]{display:none}
mark.search-match{background:#ffdd7a;color:#3a2c00;border-radius:2px;padding:0 1px}
mark.search-match.is-current{background:#b5801f;color:#fff}
.search-nav{display:flex;align-items:center;gap:3.2px}
.search-nav[hidden]{display:none}
.search-count{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  min-width:38.4px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.icon-btn-sm{width:25.6px;height:25.6px}
.chev-single{
  width:6px;
  height:6px;
  border-style:solid;
  border-color:var(--muted);
  border-width:0 2px 2px 0;
}
.chev-single.chev-up{transform:rotate(-135deg)}
.chev-single.chev-down{transform:rotate(45deg)}
.icon-btn-sm:hover .chev-single{border-color:var(--ink)}

.search-suggestions{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:50;
  margin:0;
  padding:4.8px;
  list-style:none;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:4px;
  box-shadow:0 8px 20px rgba(0,0,0,0.14);
  max-height:224px;
  overflow-y:auto;
}
.search-suggestions li{margin:0}
.search-suggestions li button{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:none;
  padding:6.4px 8px;
  font-size:13.6px;
  color:var(--prose);
  border-radius:3px;
  cursor:pointer;
}
.search-suggestions li button:hover,
.search-suggestions li button.is-active{background:var(--rule-soft);color:var(--ink)}
:is(.wrap, .site-breadcrumb) button:not(.topic-chip, .section-icon, .search-clear){
  font:inherit;
  font-size:13.6px;
  background:none;
  border:1px solid var(--rule);
  border-radius:2px;
  color:var(--muted);
  padding:5.6px 12.8px;
  cursor:pointer;
}
:is(.wrap, .site-breadcrumb) button:not(.topic-chip, .section-icon, .search-clear):hover{color:var(--ink);border-color:var(--muted)}
/* Scoped to .site-breadcrumb (where the search prev/next buttons live) —
   the site's own real header "Insights" button also carries a bare
   .icon-btn class in its markup (unrelated, pre-existing theme
   convention), and an unscoped rule here was colliding with it,
   squashing it down to this circular icon-button size sitewide. */
.site-breadcrumb .icon-btn{
  width:34.4px;
  height:34.4px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

@media (max-width:640px){
  .site-breadcrumb{padding:8px 20px;flex-wrap:wrap;row-gap:6.4px}
  .controls{margin-left:0;flex:1 1 auto;justify-content:flex-end}
  .search-input{width:100%;max-width:144px}
}

/* the 22px root of regular posts leaves a baseline gap under the inline search
   field that the 16px article pages don't have; as a block it is exactly 34.4px */
.site-breadcrumb .search-input{display:block}
.site-breadcrumb-fixed{font-size:16px;line-height:1.6}

/* the bar is Work Sans at regular weight, as on the article pages; posts'
   body text is a light serif, which the bar would otherwise inherit */
.site-breadcrumb-fixed,
.site-breadcrumb-fixed .breadcrumb-back,
.site-breadcrumb-fixed .search-input,
.site-breadcrumb-fixed .search-count,
.site-breadcrumb-fixed .search-suggestions li button{font-family:var(--font-body);font-weight:400}