/* Peptide Works -- static text pages (policies, info, sitemap).
 *
 * These pages were the last thing still wearing the old theme's type: Rufina at
 * 64px/700 for H1 and 48px/700 for H2, against Inter body copy. The product
 * pages have used Source Serif 4 at 42px/500 since the redesign, so a customer
 * moving from a product to the shipping policy changed typeface AND jumped two
 * heading sizes.
 *
 * Headings only. The body copy was ALREADY Inter 15px/400, which is what the
 * PDP uses -- there was nothing to fix there, and rewriting measure or spacing
 * on ten pages of legal copy is a layout change, not a font change.
 *
 * Scoped to body.pw-textpage, added by pw-textpages.php to an explicit list of
 * slugs. Not `is_page()`: that would also catch the cart, checkout, account and
 * anything else built as a page, several of which WooCommerce styles itself.
 */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('fonts/source-serif4-var.woff2') format('woff2');}

body.pw-textpage h1,
body.pw-textpage h2,
body.pw-textpage h3,
body.pw-textpage h4{font-family:'Source Serif 4',Georgia,serif !important;font-weight:500 !important;letter-spacing:-0.012em;color:#16191B;}

/* Sizes are the PDP's, so the two surfaces read as one site. The old 64/48 was
   not a style choice so much as an Elementor default nobody revisited. */
body.pw-textpage h1{font-size:clamp(30px,3.4vw,42px) !important;line-height:1.06 !important;}
body.pw-textpage h2{font-size:clamp(22px,2.4vw,30px) !important;line-height:1.15 !important;}
body.pw-textpage h3{font-size:clamp(18px,1.8vw,22px) !important;line-height:1.25 !important;}
body.pw-textpage h4{font-size:clamp(16px,1.5vw,18px) !important;line-height:1.3 !important;}

/* Measure capped so a full line runs ~100 characters.
 *
 * These pages ran at 139-156 characters per line against the PDP's 72 -- roughly
 * double a comfortable measure, on copy whose entire purpose is being read. 100
 * is a deliberate midpoint: a real improvement without reflowing the pages so
 * far from what the client is used to that it reads as a redesign they did not
 * ask for.
 *
 * Headings are exempt: they are short, and wrapping a 42px H1 early looks like a
 * mistake rather than a measure. */
/* `.page-content` is the real container: these pages use the THEME's default
   page template (body.page-template-default), not an Elementor one, so there is
   no .elementor-widget-* wrapper to hang this on. The Elementor selectors are
   kept for the pages in the list that ARE Elementor-built. */
body.pw-textpage .page-content p,
body.pw-textpage .page-content li,
body.pw-textpage .elementor-widget-text-editor p,
body.pw-textpage .elementor-widget-text-editor li,
body.pw-textpage .entry-content p,
body.pw-textpage .entry-content li{max-width:90ch;}

/* ---- "On this page" rail -------------------------------------------------
 * Two columns: rail left, document right. Left because that is where these
 * pages' peers put it (Microsoft, Google) and where the eye looks for it on a
 * document; the hub's equivalent rail sits right because it shares that column
 * with a references list.
 *
 * The rail is sticky, so it stays available through a 1,800-word document
 * rather than scrolling away after the first screen.
 */
/* The site header becomes FIXED at the top of the viewport once you scroll --
   an Elementor sticky element, 121px tall, which is not visible in the DOM until
   you actually scroll (at rest the header is position:static). Everything that
   positions against the top of the screen has to clear it.
   Measured, not guessed: scroll the page, then look for position:fixed elements
   near the top. */
:root{--pw-sticky-header:78px;--pw-header-clear:16px;} /* 121px until pw-header.css tightened the row, 2026-09-12 */
/* The mobile header is TALLER than the desktop one -- 141px against 121px -- so
   a single value leaves every anchor jump 4px behind it on a phone. Measured at
   each breakpoint rather than assumed to shrink. */
@media (max-width:1024px){ :root{--pw-sticky-header:120px;} }

body.pw-textpage .pw-page-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:start;}
body.pw-textpage .pw-page-body{min-width:0;}

/* max-height + scroll: a long rail must not run past the bottom of the screen
   and strand its last entries -- terms is fine at 4 items, but the rule has to
   hold for whatever the client writes next. */
body.pw-textpage .pw-page-nav{position:sticky;top:calc(var(--pw-sticky-header) + var(--pw-header-clear));max-height:calc(100vh - var(--pw-sticky-header) - 48px);overflow-y:auto;background:#F7F9F6;border:1px solid rgba(22,25,27,0.10);border-radius:14px;padding:16px 16px 14px;}
body.pw-textpage .pw-page-nav-title{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:#66706B;margin-bottom:11px;}
body.pw-textpage .pw-page-nav ol{list-style:none;margin:0;padding:0;}
body.pw-textpage .pw-page-nav li{margin:0;}
body.pw-textpage .pw-page-nav a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:baseline;padding:5px 0;font-size:13.5px;line-height:1.35;color:#3C443E;text-decoration:none;}
body.pw-textpage .pw-page-nav a:hover{color:#1D5C2C;}
body.pw-textpage .pw-page-nav-num{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#66706B;}
/* Every item is numbered, H3s included.
   Hiding the number on H3s was the first attempt and it read wrong: most of
   these pages have ONE H2 and several H3s, and the two render at nearly the same
   size in the document -- so the rail showed a single "01" above three
   unnumbered items, implying a hierarchy the page does not visibly have. A flat
   numbered list matches what the reader actually sees, with a small indent left
   as the only hint of depth. */
body.pw-textpage .pw-page-nav-h3 a{font-size:13px;color:#5C6660;}
body.pw-textpage .pw-page-nav-h3 .pw-page-nav-text{padding-left:8px;}

/* Anchor targets must clear the fixed header, or every jump lands with the
   heading hidden underneath it. 104px was the first value here and it was simply
   wrong -- the header is 121px, so every jump put the heading 17px behind it. */
body.pw-textpage .pw-page-body :is(h2,h3)[id]{scroll-margin-top:calc(var(--pw-sticky-header) + var(--pw-header-clear));}

@media (max-width:1024px){
  /* Below this the two columns leave the document too narrow to read, which is
     the problem the measure cap exists to fix. Rail goes above, unsticky. */
  body.pw-textpage .pw-page-layout{grid-template-columns:1fr;}
  body.pw-textpage .pw-page-nav{position:static;margin-bottom:22px;}
  body.pw-textpage .pw-page-nav ol{columns:2;column-gap:22px;}
}
@media (max-width:560px){
  body.pw-textpage .pw-page-nav ol{columns:1;}
}

/* ---- /payment-information/ ----------------------------------------------
 * Short page, so the copy sits in a card rather than floating on the page at
 * full width -- the same card the contact form and the PDP use.
 *
 * `.page-content` is the container (theme default page template, no Elementor
 * wrapper). The measure cap above still applies inside it; the card just gives
 * the text an edge to sit against.
 */
body.page-id-820 .page-content{
  background:#FFFFFF;border:1px solid rgba(22,25,27,0.11);border-radius:16px;
  padding:clamp(22px,3vw,40px);
  max-width:900px;
}
body.page-id-820 .page-content > *:first-child{margin-top:0;}
body.page-id-820 .page-content > *:last-child{margin-bottom:0;}
body.page-id-820 .page-content h2{margin-top:1.6em;}
body.page-id-820 .page-content h2:first-of-type{margin-top:0;}
body.page-id-820 .page-content ul{margin:0 0 1.1em;padding-left:1.15em;}
body.page-id-820 .page-content li{margin:0 0 5px;}

/* The accepted-payment-methods strip. 352x47 at native size, so it is left at
   its own scale rather than stretched across the card. */
body.page-id-820 .pw-pay-methods{margin:4px 0 1.6em;}
body.page-id-820 .pw-pay-methods img{display:block;width:352px;max-width:100%;height:auto;}

/* ---- /about-us/ ----------------------------------------------------------
 * The hero band is deleted (scripts/tidy-about-page.php), so the first content
 * section is now the top of the page and its 80px of Elementor padding reads as
 * the same dead space the hero was removed for.
 */
body.page-id-191 .elementor > .e-con:first-child > .e-con-inner{padding-top:34px;}

/* "Vision" followed its paragraph with no separation, so Mission's copy and
   Vision's heading ran together as one block of text. */
body.page-id-191 h2{margin-top:1.5em;}
body.page-id-191 h2:first-of-type{margin-top:0.6em;}