/*
Theme Name: Pepi Health
Theme URI: https://pepihealth.net
Author: Pepi Health
Description: Block theme for Pepi Health / The Pepi Girl. Cream header, spruce hero with email signup, goal cards, evidence-rated Peptide Guide, and a spruce footer.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pepi-health
*/

/* Tokens (same names as the design handoff). Colors are also in theme.json. */
:root{
  --spruce:#1F3A34;--spruce-dark:#173029;--sage:#8FA894;--sage-pale:#E3E9E1;
  --clay:#C9553C;--clay-dark:#A9432E;--blush:#E6D9D2;
  --cream:#F2EEE4;--white:#FFFFFF;--ink:#4A4740;--text:#55524C;--muted:#8A857C;
  --hairline:#DED8CC;--field:#DAD4C8;
  --radius:10px;--margin:72px;--section:96px;--gutter:20px;
  --ease:cubic-bezier(.2,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
a:hover{text-underline-offset:3px}
:focus-visible{outline:2px solid rgba(31,58,52,.35);outline-offset:2px}
h1,h2,h3{text-wrap:pretty}

/*
 * Every rule that sets a margin is prefixed with .wp-site-blocks so it always
 * beats WordPress's own block-gap margins, whatever order the stylesheets load in.
 */
.wp-site-blocks .wrap{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:var(--margin);padding-right:var(--margin)}
.wp-site-blocks .eyebrow{margin:0 0 16px;font-size:13px;font-weight:700;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wp-site-blocks .eyebrow.on-dark{color:var(--sage)}

/* Buttons (core Button block) */
.wp-site-blocks .wp-block-button__link{display:inline-flex;align-items:center;height:52px;padding:0 26px;line-height:1;white-space:nowrap;font-weight:700;font-size:16px;text-decoration:none;transition:background-color 120ms var(--ease),transform 120ms var(--ease)}
.wp-site-blocks .wp-block-button__link:hover{color:#fff;text-decoration:none}
.wp-site-blocks .wp-block-button__link:active{transform:scale(.985)}
/* Plain buttons (signup form) */
.btn{white-space:nowrap;display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:999px;border:0;font:700 16px/1 Figtree,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background-color 120ms var(--ease),transform 120ms var(--ease)}
.btn-clay{background:var(--clay);color:#fff}
.btn-clay:hover{background:var(--clay-dark);color:#fff}
.btn:active{transform:scale(.985)}

/* Header (sticky, 6px blur) */
.site-header{position:sticky;top:0;z-index:100;background:rgba(242,238,228,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--hairline)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.brand{flex:none;white-space:nowrap;display:flex;align-items:center;gap:12px;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--spruce)}
.brand:hover{color:var(--spruce);text-decoration:none}
.brand img{display:block}
.site-header .wp-block-navigation{font-size:16px}
.site-header .wp-block-navigation .wp-block-navigation__container{gap:32px;align-items:center}
.site-header .wp-block-navigation-item__content{white-space:nowrap;color:var(--ink);text-decoration:none}
.site-header .wp-block-navigation-item__content:hover{color:var(--spruce);text-decoration:underline;text-underline-offset:3px}
.site-header .nav-cta .wp-block-navigation-item__content{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--clay);color:#fff;font-size:15px;font-weight:700;transition:background-color 120ms var(--ease),transform 120ms var(--ease)}
.site-header .nav-cta .wp-block-navigation-item__content:hover{background:var(--clay-dark);color:#fff;text-decoration:none}
.site-header .nav-cta .wp-block-navigation-item__content:active{transform:scale(.985)}
.site-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--cream)!important;color:var(--ink)!important}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:20px;align-items:flex-start}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:20px}
.site-header .wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content{height:48px;padding:0 24px;font-size:16px}

/* Hero */
.hero{background:var(--spruce);padding:64px 0 120px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:56px;align-items:center}
.hero-copy{min-width:0}
.wp-site-blocks .hero h1{margin:2px 0 0;color:var(--cream)}
.wp-site-blocks .hero .lead{margin:22px 0 0;max-width:520px;font-size:20px;line-height:1.5;color:var(--cream)}
.wp-site-blocks .signup-pill{margin:32px 0 0;max-width:560px;height:60px;background:#fff;border-radius:999px;display:flex;align-items:center;gap:12px;padding:0 7px 0 22px}
.signup-pill input[type=email]{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 17px Figtree,system-ui,sans-serif;color:var(--ink)}
.signup-pill .btn{height:46px;padding:0 22px;font-size:15px}
.wp-site-blocks .hint{margin:12px 0 0;font-size:14px;line-height:1.4;color:var(--sage)}
.signup-pill .hp{display:none}

/* Hero photo rotator: five Image blocks, crossfade + slow zoom. Captions are the slide labels. */
.hero-photo{height:480px}
.hero-rotator{position:relative;border-radius:var(--radius);overflow:hidden;background:#2A4A42}
.wp-site-blocks .hero-rotator .wp-block-image{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1400ms var(--ease)}
.wp-site-blocks .hero-rotator .wp-block-image.is-active{opacity:1}
.hero-rotator .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 7000ms linear}
.hero-rotator .wp-block-image.is-active img{transform:scale(1.04)}
.hero-rotator .wp-block-image figcaption{display:none}
.hero-rotator .wp-block-image:nth-of-type(1) img{object-position:62% 60%}
.hero-rotator .wp-block-image:nth-of-type(2) img{object-position:45% 50%}
.hero-rotator .wp-block-image:nth-of-type(3) img{object-position:45% 55%}
.hero-rotator .wp-block-image:nth-of-type(4) img{object-position:40% 45%}
.hero-rotator .wp-block-image:nth-of-type(5) img{object-position:52% 30%}
.hero-meta{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:flex;justify-content:space-between;align-items:center}
.hero-label{font:700 12px/1 Figtree,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--spruce);background:var(--cream);padding:9px 14px;border-radius:999px}
.hero-dots{display:flex;gap:8px;background:var(--spruce);padding:9px 12px;border-radius:999px}
.hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(242,238,228,.45);cursor:pointer}
.hero-dots button.is-active{background:#E4A93A}
.hero-dots button:focus-visible{outline:2px solid rgba(242,238,228,.6);outline-offset:2px}

/* Goals panel overlapping the hero by 72px */
.goals{max-width:1280px;margin-left:auto;margin-right:auto;padding:0 48px}
.wp-site-blocks .goals-panel{position:relative;margin-top:-72px;background:var(--cream);border-radius:var(--radius);padding:48px 24px 0}
.wp-site-blocks .goals-panel h2{margin:0 0 32px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.goal-card{position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid transparent;transition:border-color 180ms var(--ease)}
.goal-card:hover{border-color:var(--field)}
.wp-site-blocks .goal-card .wp-block-image{margin:0;height:220px}
.goal-card .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover;background:var(--sage-pale);border-radius:0}
.goal-grid .goal-card:nth-child(1) img{object-position:68% 40%}
.goal-grid .goal-card:nth-child(2) img{object-position:40% 45%}
.goal-grid .goal-card:nth-child(3) img{object-position:50% 55%}
.goal-grid .goal-card:nth-child(4) img{object-position:50% 45%}
.goal-card .body{padding:20px 22px 24px}
.wp-site-blocks .goal-card h3{margin:0}
.goal-card h3 a{color:var(--spruce);text-decoration:none}
.goal-card h3 a:hover{color:var(--spruce);text-decoration:none}
/* the whole card is the link */
.goal-card h3 a::after{content:"";position:absolute;inset:0}

/* Sections */
.wp-site-blocks .section{margin-top:var(--section)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.wp-site-blocks .section-head{margin-bottom:32px}
.wp-site-blocks .section-head p{margin:0}
.wp-site-blocks .section-head .eyebrow{margin-bottom:16px}
.wp-site-blocks .more{margin:0;font-size:17px;font-weight:700}
.more a{text-decoration:none}
.more a:hover{text-decoration:underline}
.card{background:#fff;border-radius:var(--radius);padding:26px;border:1px solid transparent}
.card svg{display:block;width:28px;height:28px;color:var(--sage)}
.wp-site-blocks .card h3{margin:20px 0 0}
.wp-site-blocks .card p:not(.badge){margin:8px 0 18px;font-size:15px;line-height:1.5}
.badge{display:inline-block;margin:0;font-size:12px;font-weight:700;line-height:1;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;color:var(--spruce)}
.badge-early{background:var(--blush)}
.badge-moderate{background:var(--sage-pale)}
.badge-strong{background:var(--spruce);color:var(--cream)}

/* Access matters */
.access{background:var(--spruce);border-radius:var(--radius);display:grid;grid-template-columns:minmax(0,1fr) 440px;overflow:hidden}
.access-copy{padding:56px}
.wp-site-blocks .access h2{color:var(--cream);font-size:clamp(28px,3vw,38px)}
.wp-site-blocks .access-copy p:not(.eyebrow){margin:18px 0 0;max-width:560px;color:var(--cream)}
.wp-site-blocks .access .wp-block-buttons{margin-top:30px}
.wp-site-blocks .access-figure{position:relative;margin:0;min-height:380px;background:var(--cream)}
.access-figure img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.access-figure figcaption{position:absolute;left:20px;bottom:20px;margin:0;font-size:12px;font-weight:700;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--spruce);background:var(--cream);padding:8px 12px;border-radius:999px}

/* Footer */
.wp-site-blocks .site-footer{margin-top:var(--section);background:var(--spruce);padding:36px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer .brand{font-size:18px;color:var(--cream)}
.wp-site-blocks .compliance{margin:0;font-size:14px;color:var(--sage)}
.wp-site-blocks .handle{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}

/* Pages and posts (not the homepage) */
.wp-site-blocks .page-main{padding-top:56px}
.wp-site-blocks .page-main .wp-block-post-title{margin-bottom:32px}
.wp-site-blocks .wp-block-post-content > * + *{margin-block-start:1.25em}
.wp-site-blocks .wp-block-post-content > h2,.wp-site-blocks .wp-block-post-content > h3{margin-block-start:1.75em}
.wp-site-blocks .page-main .wp-block-post-template > li + li{margin-top:40px}

/* Responsive */
@media (max-width:1024px){
  :root{--margin:40px;--section:72px}
  .hero-grid,.access{grid-template-columns:1fr}
  .hero-photo{height:360px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goals{padding:0 16px}
}
/* Menu collapses into the hamburger overlay at 900px and below (core only does this at 600px) */
@media (max-width:900px){
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
@media (max-width:640px){
  :root{--margin:20px;--section:56px}
  .grid-4{grid-template-columns:1fr}
  .wp-site-blocks .signup-pill{height:auto;flex-direction:column;align-items:stretch;border-radius:var(--radius);padding:8px}
  .signup-pill input[type=email]{flex:none;height:44px;padding:0 12px}
  .section-head{flex-direction:column;align-items:flex-start}
  .access-copy{padding:32px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .wp-site-blocks .hero-rotator .wp-block-image{transition:opacity 420ms var(--ease)!important}
  .hero-rotator .wp-block-image img{transform:none!important;transition:none!important}
}