/* ============================================================
   Forma Health - shared site chrome (mast + secondary bar)
   Load AFTER tokens.css + base.css, BEFORE page styles.
   Mast matches public/index.html (solid --paper, Archivo normal
   width uppercase nav + CTA pills, square corners) as of 2026-09-18.
   Page styles must NOT redeclare .mast-wrap / .mast CTAs - this file
   is the single source. Protective rules at the end beat common
   leftovers (blur, pills, sticky).
   ============================================================ */

:root {
  --chrome-mast-h: 60px;
  --chrome-sub-h: 44px; /* single-row approx; grows with wrap in layout */
}

/* Container used by mast / sub (editorial pages may lack .wrap) */
.mast-wrap .wrap,
.chrome-sub .wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---- Primary mast ---- */
.mast-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  background: var(--paper); /* solid - no blur / transparency */
  border-bottom: 1px solid var(--rule);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mast {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mast .mark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-stretch: 100%;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.mast .mark .dot {
  width: 6px;
  height: 6px;
  background: var(--terra);
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-3px);
}

.mast nav {
  display: flex;
  gap: 28px;
}

.mast nav a {
  font-family: var(--serif);
  font-stretch: 100%; /* normal width - body is often 125% expanded */
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

.mast nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mast nav a:hover { color: var(--ink); }
.mast nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.mast nav a.active,
.mast nav a[aria-current="page"] {
  color: var(--ink);
}
.mast nav a.active::after,
.mast nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.mast .actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mast .login-link {
  font-family: var(--serif);
  font-stretch: 100%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-decoration: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 8px 16px;
  border-radius: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.mast .login-link:hover {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.mast .cta-pill {
  font-family: var(--serif);
  font-stretch: 100%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--terra);
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 0;
  transition: background 0.2s ease;
  white-space: nowrap;
  transform: none;
}

.mast .cta-pill:hover {
  background: var(--charcoal);
  transform: none;
}
.mast .cta-pill:active { transform: none; }

@media (max-width: 760px) {
  .mast nav { display: none; } /* hide mid-nav on mobile */
  .mast { gap: 12px; }
  .mast .mark { font-size: 18px; }
  .mast .login-link { padding: 7px 14px; font-size: 12.5px; }
  .mast .cta-pill { padding: 8px 14px; font-size: 12.5px; }
}

/* ---- Secondary contextual bar (Hone-style under mast) ---- */
.chrome-sub {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--chrome-mast-h);
  z-index: 49;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.chrome-sub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 40px;
}

.chrome-sub .crumb {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-55);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.chrome-sub .crumb a {
  color: var(--ink-70);
  text-decoration: none;
}
.chrome-sub .crumb a:hover { color: var(--ink); }
.chrome-sub .crumb .sep { color: var(--ink-30); user-select: none; }
.chrome-sub .crumb .here { color: var(--ink); }

.chrome-sub .hub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.chrome-sub .hub-chips a {
  font-family: var(--serif);
  font-stretch: 100%;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-70);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 6px 10px;
  border-radius: 0;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.chrome-sub .hub-chips a:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
}

.chrome-sub .hub-chips a.is-active,
.chrome-sub .hub-chips a[aria-current="page"] {
  border-color: var(--terra);
  color: var(--paper);
  background: var(--terra);
}

@media (max-width: 640px) {
  .chrome-sub-inner {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 12px;
  }
  .chrome-sub .hub-chips {
    justify-content: flex-start;
    width: 100%;
    gap: 6px;
  }
  .chrome-sub .hub-chips a {
    padding: 6px 9px;
    font-size: 10px;
  }
}

/* Promo bar pages (saadan / lavt): mast shifts down; keep sub in sync if present */
.promo-bar:not(.is-dismissed) ~ .mast-wrap { top: 36px; }
.promo-bar:not(.is-dismissed) ~ .chrome-sub { top: calc(36px + var(--chrome-mast-h)); }
.promo-bar.is-dismissed ~ .mast-wrap { top: 0; }
.promo-bar.is-dismissed ~ .chrome-sub { top: var(--chrome-mast-h); }

/* ---- Body offset helpers ----
   Pages with shared mast should clear the fixed bar.
   Prefer class on <body>:
     .has-chrome      -> mast only (~60px)
     .has-chrome-sub  -> mast + secondary (~104px+)
*/
body.has-chrome.chrome-pad > main:first-of-type,
body.has-chrome.chrome-pad > .page:first-of-type {
  padding-top: var(--chrome-mast-h);
}
body.has-chrome-sub.chrome-pad > main:first-of-type,
body.has-chrome-sub.chrome-pad > .page:first-of-type {
  padding-top: calc(var(--chrome-mast-h) + var(--chrome-sub-h));
}

/* Editorial articles: keep content clear of mast + sub (mobile chips wrap) */
body.has-chrome-sub .article-wrap {
  padding-top: 140px;
}
@media (max-width: 640px) {
  body.has-chrome-sub .article-wrap {
    padding-top: 136px; /* mast ~54 + wrapped sub ~70+ */
  }
}

/* Scroll margin for in-page anchors under fixed chrome */
.has-chrome [id] { scroll-margin-top: 96px; }
.has-chrome-sub [id] { scroll-margin-top: 136px; }

/* ---- Protective overrides (beat leftover page mast CSS) ----
   Do not copy mast rules into page <style>. If a page still does,
   these keep chrome identical: solid paper, fixed, Archivo, square. */
body.has-chrome .mast-wrap {
  position: fixed !important;
  background: var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.has-chrome .mast .login-link,
body.has-chrome .mast .cta-pill,
body.has-chrome .mast-wrap .login-link,
body.has-chrome .mast-wrap .cta-pill {
  border-radius: 0 !important;
  font-family: var(--serif) !important;
  font-stretch: 100% !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 400 !important;
  transform: none !important;
}
body.has-chrome .mast .cta-pill:hover,
body.has-chrome .mast .cta-pill:active,
body.has-chrome .mast-wrap .cta-pill:hover,
body.has-chrome .mast-wrap .cta-pill:active {
  transform: none !important;
}
body.has-chrome .mast nav a,
body.has-chrome .mast-wrap nav a {
  font-family: var(--serif) !important;
  font-stretch: 100% !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

/* Frontpage-style square end-CTAs on chrome pages (not funnel /start pills) */
body.has-chrome .cta-strip .btn,
body.has-chrome-sub .cta-strip .btn {
  border-radius: 0;
}