/* Centrst chrome — the header and footer shared with the umbrella marketing
   site at centrst.com. Every page under /conform/ carries this verbatim so the
   two halves of the origin read as one site; page bodies keep their own
   register (marketing on the landing page, documentation density below it).

   Colours mirror the Tailwind palette centrst.com is built from, named here so
   the correspondence stays auditable:
     slate-900 #0f172a   slate-700 #334155   slate-200 #e2e8f0
     slate-800 #1e293b   slate-500 #64748b   slate-50  #f8fafc
     gray-900  #111827   gray-800  #1f2937   gray-400  #9ca3af  gray-300 #d1d5db

   The brand mark is an alpha mask painted with currentColor rather than an
   <img>, so it inverts correctly against the dark footer. centrst.com's own
   PNG has no alpha and shows a white tile there. */

/* One container width for the whole origin. Page bodies use the same token, so
   the brand, the nav and the first line of prose share a left edge by
   construction rather than by two layouts happening to agree. 1216px is
   centrst.com's max-w-7xl (1280px) less its lg:px-8 gutters. */
:root { --chrome-shell: min(1216px, calc(100% - 48px)); }
.chrome-shell { width: var(--chrome-shell); margin-inline: auto; }

/* The header is sticky, so an anchor jump would park its target underneath it.
   80px on desktop; the nav wraps to auto height below 1024px, hence the margin. */
:target { scroll-margin-top: 96px; }

/* Every page carries this chrome, so the motion opt-out belongs here rather
   than in one page's inline styles. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-head *, .product-bar *, .site-foot * { transition-duration: 0.01ms !important; }
}

/* The mark is 146x176, so a 40px-tall box is 33px wide. Sizing the box to the
   glyph instead of padding it to a square keeps the gap to the wordmark honest.
   The url is relative on purpose: the stylesheet sits beside the image, so the
   mount path is not restated here at all. (site-derive.mjs does now check CSS
   url() targets, but not restating the path is still better than checking a
   restatement of it.) */
.centrst-mark {
  flex: none;
  width: 33px;
  height: 40px;
  background-color: currentColor;
  -webkit-mask: url('centrst-mark.png') center / contain no-repeat;
  mask: url('centrst-mark.png') center / contain no-repeat;
}
/* Without mask support the element would paint a solid currentColor block — a
   dark square in the header, a white one in the footer. Nothing is better. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .centrst-mark { display: none; }
}

/* --- Header ------------------------------------------------------------- */

/* centrst.com's header is bg-white/95 with a backdrop blur. Opaque here on
   purpose: this chrome sits over dense documentation rather than a marketing
   hero, and 5% of body text ghosting through a sticky bar is a legibility cost
   the frosted look does not repay. At rest the two are indistinguishable. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid rgb(226 232 240 / 0.6);
}
.site-head .chrome-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0f172a;
  text-decoration: none;
}
.site-brand-name {
  font-size: 1.5rem;
  font-weight: 500;
  color: #334155;
  letter-spacing: 0.025em;
  transition: color 0.2s;
}
.site-brand:hover .site-brand-name { color: #0f172a; }
.site-brand-eyebrow {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-nav { display: flex; align-items: center; gap: 48px; }
.site-nav a { text-decoration: none; }
.site-nav-link {
  color: #334155;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  transition: color 0.2s;
}
.site-nav-link:hover { color: #0f172a; }

.site-nav-group { position: relative; }
.site-nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: 224px;
  background: #fff;
  border: 1px solid rgb(226 232 240 / 0.6);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
/* Hover for pointers, focus-within so the menu is reachable by keyboard —
   centrst.com's React version is hover-only and traps keyboard users. */
.site-nav-group:hover .site-nav-menu,
.site-nav-group:focus-within .site-nav-menu { opacity: 1; visibility: visible; }
.site-nav-menu a {
  display: block;
  padding: 12px 16px;
  color: #334155;
  font-size: 0.875rem;
  transition: background-color 0.2s, color 0.2s;
}
.site-nav-menu a:hover,
.site-nav-menu a:focus-visible { background: #f8fafc; color: #0f172a; }

.site-signin {
  background: #1e293b;
  color: #fff;
  padding: 12px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.site-signin:hover {
  background: #0f172a;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Mobile: the umbrella site collapses this nav behind a toggle. Static pages
   have no JS budget for a menu, so the links wrap under the brand instead. */
@media (max-width: 1023px) {
  .site-head .chrome-shell { height: auto; flex-wrap: wrap; gap: 12px; padding-block: 14px; }
  .site-nav { gap: 20px; width: 100%; flex-wrap: wrap; }
  .site-nav-menu {
    position: static;
    width: auto;
    margin-top: 0;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    background: none;
  }
  .site-nav-menu a { padding: 0; font-size: 0.8rem; color: #64748b; }
  .site-nav-group { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
  .site-brand-eyebrow { display: none; }
}

/* --- Product bar -------------------------------------------------------- */
/* Second tier: conForm's own navigation, sitting under the company chrome the
   way a documentation nav sits under a corporate header. */

.product-bar {
  border-bottom: 1px solid var(--rule-soft, rgb(226 232 240 / 0.6));
  background: var(--canvas, #fbfcfd);
}
.product-bar .chrome-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  flex-wrap: wrap;
}
.product-mark {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.product-mark b { color: var(--ink, #0f172a); font-weight: 650; }
.product-nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.82rem; }
.product-nav a {
  color: var(--muted, #64748b);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.product-nav a:hover { color: var(--ink, #0f172a); }
.product-nav a[aria-current='page'] { color: var(--ink, #0f172a); }

/* --- Footer ------------------------------------------------------------- */

.site-foot { background: #111827; color: #fff; }
.site-foot a { text-decoration: none; }
.site-foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-block: 64px;
}
@media (min-width: 768px) {
  .site-foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-foot-brand { grid-column: span 2; }
}
.site-foot-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #fff;
}
.site-foot-mark span { font-size: 1.5rem; font-weight: 300; letter-spacing: 0.025em; }
/* Scoped to the unclassed paragraph: a bare `.site-foot-brand p` is (0,1,1) and
   would beat .site-foot-eyebrow (0,1,0) regardless of order, silently painting
   the eyebrow at body size. Tailwind has no descendant selectors, so porting
   the React original one-to-one introduced a cascade it never had. */
.site-foot-brand > p:not([class]) {
  max-width: 28rem;
  margin: 0 0 24px;
  color: #d1d5db;
  font-size: 0.875rem;
  line-height: 1.625;
}
.site-foot-eyebrow {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.site-foot-col h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}
.site-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-foot-col a { color: #d1d5db; font-size: 0.875rem; transition: color 0.2s; }
.site-foot-col a:hover { color: #fff; }

.site-foot-bar { border-top: 1px solid #1f2937; }
.site-foot-bar .chrome-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 32px;
  color: #9ca3af;
  font-size: 0.875rem;
}
.site-foot-bar a { color: #9ca3af; transition: color 0.2s; }
.site-foot-bar a:hover { color: #fff; }
@media (min-width: 768px) {
  .site-foot-bar .chrome-shell { flex-direction: row; gap: 0; }
}