/* Peptide Works homepage -- pw-home.php / pw-home/pw-home-template.php
 *
 * Deliberately small. The template keeps the approved design's inline styles
 * byte-for-byte (see the header comment there for why that is safe in a
 * template file), so the only rules here are the ones an inline style CANNOT
 * express: @font-face, hovers, media queries, the photo-pending placeholder.
 *
 * Every rule that overrides an inline declaration needs !important. Not a code
 * smell -- an inline style beats a stylesheet rule whatever its specificity, so
 * without it these silently do nothing. The design's own media queries carried
 * !important for exactly this reason.
 */

/* ---- fonts ---------------------------------------------------------------
 * Self-hosted, same files and same declarations as pw-blog.css. The design
 * linked Google Fonts; nothing in this suite reaches a CDN for type. Paths are
 * relative to this stylesheet, so they resolve inside pw-home/ wherever the
 * mu-plugins folder lives. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/newsreader-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}

/* ---- page ground ---------------------------------------------------------
 * Scoped to #pw-home, NOT to body. The static page owned the whole document and
 * could set body styles; here the theme's header and footer sit either side of
 * this main element and must not be restyled by it. */
#pw-home{
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#16191B;
  background:#FFFFFF;
  -webkit-font-smoothing:antialiased;
}
#pw-home *{box-sizing:border-box;}
#pw-home a{color:#1D5C2C;text-decoration:none;}
#pw-home a:hover{color:#123D1D;}
#pw-home ::selection{background:rgba(29,92,44,0.16);}

/* The HTML `hidden` attribute is only a UA-stylesheet display:none, so any
   element carrying an inline display ignores it and renders anyway. The FAQ
   answers are hidden this way, so this rule is what makes the accordion work
   rather than showing every answer at once. */
#pw-home [hidden]{display:none !important;}

/* ---- the card grid moved out --------------------------------------------
 * Hovers, the photo-pending placeholder and the WooCommerce price shaping now
 * live in pw-bestsellers.css, scoped to .pw-bs, because /popular-peptides/
 * renders the same card through [pw_best_sellers]. This sheet keeps only what
 * is genuinely the homepage's.
 */

/* ---- media queries -------------------------------------------------------
 * The one thing inline styles cannot express. The chrome breakpoints from the
 * static page (.pw-desknav, .pw-search, .pw-burger, .pw-msearch, .pw-promo-txt,
 * .pw-foot, .pw-pay) are NOT here: that markup is the theme's header and footer
 * now, and rules for elements this page does not emit are just future
 * confusion. */
@media (max-width:980px){
  #pw-home .pw-hero{grid-template-columns:1fr !important;gap:22px !important;min-height:0 !important;}
  #pw-home .pw-hero-art{justify-self:start !important;}
  /* Copy sits over the image on narrow screens, so the scrim turns vertical. */
  #pw-home .pw-hero-scrim{background:linear-gradient(178deg,rgba(244,248,241,0.97) 0%,rgba(244,248,241,0.93) 58%,rgba(244,248,241,0.62) 100%) !important;}
  #pw-home .pw-trust{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  #pw-home .pw-2col{grid-template-columns:1fr !important;}
  #pw-home .pw-why{grid-template-columns:1fr !important;}
}
@media (max-width:760px){
  #pw-home .pw-grid{grid-template-columns:repeat(2,1fr) !important;}
  #pw-home .pw-trust{grid-template-columns:repeat(2,1fr) !important;}
  #pw-home .pw-verify{grid-template-columns:1fr !important;}
  #pw-home .pw-h1{font-size:38px !important;}
  #pw-home .pw-h2{font-size:29px !important;}
}
@media (max-width:520px){
  #pw-home .pw-grid{grid-template-columns:1fr !important;}
  #pw-home .pw-trust{grid-template-columns:1fr !important;}
}

/* ---- grid children must be allowed to shrink -----------------------------
 * A grid item defaults to `min-width:auto`, which means it can never be
 * narrower than its own min-content -- so `grid-template-columns:1fr` computed
 * to 381px inside a 332px container and the page scrolled sideways on any
 * phone under ~396px (iPhone SE/13 mini at 375, plenty of Androids at 360).
 * Pre-existing since the port, found while fixing the mobile header.
 */
#pw-home .pw-2col > *,
#pw-home .pw-why > *,
#pw-home .pw-verify > *,
#pw-home .pw-trust > *,
#pw-home .pw-grid > *{min-width:0;}

/* The FAQ row is an inline `display:flex` with the question as an anonymous
 * flex item, and an anonymous flex item still gets `min-width:auto` -- so a
 * longer question refused to wrap and shoved the +/- sign outside the button
 * (to x=394 in a 360px viewport). A grid with a `minmax(0,1fr)` text track can
 * shrink, so the question wraps and the sign stays put. !important because the
 * display it overrides is inline on the element.
 */
#pw-home .pw-faqbtn{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  /* And the theme puts `white-space:nowrap` on buttons, so the question could
     not wrap at any width -- the real cause. The grid above stops the sign
     being shoved out; this is what lets the text reflow. */
  white-space:normal;
  text-wrap:pretty;
}