/* ============================================================
   Recovery Project — shared site chrome (behavior layer)
   Loaded on EVERY page via  <link rel="stylesheet" href="/shared/site.css">
   Owns: sticky/hide-on-scroll header + persistent floating Book button.
   Safe to load anywhere: all rules are scoped to body.rp-shell.
   ============================================================ */

/* --- kill horizontal overflow site-wide (clip, not hidden, so sticky header survives) --- */
html{ overflow-x:clip; }
body.rp-shell{ overflow-x:clip; max-width:100%; }

/* --- sticky header that hides on scroll-down, returns on scroll-up --- */
body.rp-shell header{
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
body.rp-shell header.rp-hide{ transform: translateY(-120%); }
body.rp-shell header.rp-scrolled{ box-shadow: 0 6px 24px rgba(29,50,66,.10); }
/* the thin promo bar scrolls away naturally (not sticky) */

/* --- persistent floating Book button (always visible) --- */
.rp-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: 100px;
  background: #58C2CA;
  color: #12303a;
  font-family: 'Cera GR', -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(29,50,66,.28), 0 2px 6px rgba(29,50,66,.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rp-fab svg{ width: 19px; height: 19px; flex: 0 0 auto; }
.rp-fab:hover{ transform: translateY(-3px); background:#48b3bb; box-shadow: 0 16px 40px rgba(29,50,66,.34); color:#0e2830; }
.rp-fab:active{ transform: translateY(-1px); }
@media (max-width: 640px){
  .rp-fab{ right: 16px; bottom: 16px; padding: 13px 20px; font-size: .95rem; }
}
@media print{ .rp-fab{ display:none; } }

/* ============================================================
   Mobile header fixes (override each page's inline header CSS)
   ============================================================ */
@media (max-width: 768px){
  /* the "This Month's Special" top bar was hidden on mobile — show it, centered */
  body.rp-shell .top-bar{ display:flex; justify-content:center; align-items:center; padding:7px 14px; }
  body.rp-shell .top-bar-promos{ display:flex; justify-content:center; margin:0; }
  body.rp-shell .top-bar-promos a{ font-size:12px; letter-spacing:.02em; white-space:nowrap; }
  /* logo was rendering vertically stretched — lock aspect ratio */
  body.rp-shell header .logo img{ height:32px; width:auto; max-width:none; object-fit:contain; }
}

/* ============================================================
   Mobile footer fixes
   ============================================================ */
@media (max-width: 768px){
  /* subscribe form: smaller button, tidy input (16px font stops iOS zoom-on-focus) */
  .rp-footer .rpf-nl{ gap:6px; }
  .rp-footer .rpf-nl input{ padding:10px 12px; font-size:16px; }
  .rp-footer .rpf-nl button{ padding:10px 13px; font-size:.7rem; letter-spacing:.03em; white-space:nowrap; }
  /* bottom bar: Terms/Privacy share the row with the IG/FB icons; copyright drops below */
  .rp-footer .rpf-bottom{ justify-content:space-between; row-gap:14px; }
  .rp-footer .rpf-social{ order:1; }
  .rp-footer .rpf-legal{ order:2; margin:0; }
  .rp-footer .rpf-legal a{ margin-left:0; margin-right:16px; }
  .rp-footer .rpf-bottom > span{ order:3; flex-basis:100%; text-align:center; }
}

/* ============================================================
   Mobile: remove the Book button inside hero sections
   (Book is already in the header + floating corner button)
   ============================================================ */
@media (max-width: 768px){
  .exp-hero .hero-cta,
  .pep-hero .hero-cta,
  .peptide-hero .hero-cta,
  .peptide-hero-actions{ display:none !important; }
}

/* ============================================================
   Mobile footer form — stack input over a compact button (clearer)
   ============================================================ */
@media (max-width: 768px){
  .rp-footer .rpf-nl{ flex-direction:column; gap:8px; }
  .rp-footer .rpf-nl input{ width:100%; padding:11px 13px; font-size:16px; }
  .rp-footer .rpf-nl button{ align-self:flex-start; padding:9px 16px; font-size:.72rem; }
}
@media (max-width: 768px){
  .exp-hero-cta, .exp-hero .exp-hero-cta{ display:none !important; }  /* experiences-page hero Book */
}

/* ============================================================
   Mega-menu — grouped Experiences + Peptides dropdowns
   (reuses .nav-dropdown/.dropdown-menu; desktop = columns, mobile = stacked)
   ============================================================ */
.dropdown-menu.mega .mega-head{ display:block; font-family:'Cera GR',-apple-system,sans-serif; font-weight:900;
  text-transform:uppercase; font-size:.66rem; letter-spacing:.11em; color:#2b8a91; padding:10px 20px 3px; }
.dropdown-menu.mega .mega-col a{ font-size:.92rem !important; padding:7px 20px !important; }
.dropdown-menu.mega .mega-all{ color:#2b8a91 !important; font-weight:800 !important; }

@media (min-width: 769px){
  .dropdown-menu.mega{ display:block; padding:16px 10px; }
  .dropdown-menu.mega-exp{ min-width:660px; }
  .dropdown-menu.mega-pep{ min-width:430px; }
  .dropdown-menu.mega .mega-col{ display:flex; flex-direction:column; }
  .dropdown-menu.mega .mega-head:first-child{ padding-top:2px; }
}
@media (max-width: 768px){
  /* stacked accordion on mobile — columns flow vertically with their headings */
  .dropdown-menu.mega{ display:none; }
  .nav-dropdown.active .dropdown-menu.mega{ display:block; }
  .dropdown-menu.mega .mega-head{ padding-left:16px; }
}

/* mobile: rotate the dropdown chevron when its section is expanded */
@media (max-width: 768px){
  .nav-dropdown > a{ position:relative; }
  .nav-dropdown.active > a::after{ transform:rotate(180deg); }
}

/* Fix: force the mega-menu into columns regardless of each page's inline hover rules */
@media (min-width: 769px){
  .nav-dropdown .dropdown-menu.mega,
  .nav-dropdown:hover .dropdown-menu.mega{ display:block !important; }
  .dropdown-menu.mega .mega-cols{ display:grid !important; gap:0 18px; }
  .dropdown-menu.mega .mega-cols-3{ grid-template-columns:repeat(3,1fr) !important; }
  .dropdown-menu.mega .mega-cols-2{ grid-template-columns:repeat(2,1fr) !important; }
  .dropdown-menu.mega .mega-head-full{ display:block; }
}

/* ============================================================
   Home-v2 mobile fixes — LIVE IN SITE.CSS (not home-v2 inline)
   because home-v2/index.html gets regenerated by another build,
   which wipes inline edits. These persist across regeneration.
   ============================================================ */
@media (max-width: 640px){
  /* hero: cycling word ALWAYS on its own 2nd row (min-height holds the row when the word is short/empty) */
  .hp-hero h1 #heroWord{ display:block !important; min-height:1.05em; }
  /* IV drip hero image: focus the woman on the left */
  .hp-slides .hp-slide:nth-child(2){ background-position:left center !important; }
  /* peptide vial: smaller + visible contained bubbles */
  .hpv-stage{ height:300px !important; }
  .hpv-vial{ height:186px !important; }
  .hpv-benefit{ display:inline-flex !important; opacity:1 !important; font-size:.7rem !important; padding:6px 10px !important; gap:5px !important; animation:none !important; transform:none !important; white-space:nowrap; }
  .hpv-benefit.b1{ top:10% !important; left:3% !important; }
  .hpv-benefit.b2{ top:2% !important; right:4% !important; }
  .hpv-benefit.b3{ top:46% !important; right:2% !important; }
  .hpv-benefit.b4{ bottom:12% !important; right:4% !important; }
  .hpv-benefit.b5{ bottom:6% !important; left:4% !important; }
  .home-pep{ overflow-x:clip; }
}

/* Mobile: floating experience marquee (two rows, opposite directions) */
@media (max-width: 700px){
  .exp2-mq{ display:block !important; grid-template-columns:none !important; }
  .exp2-mq-row{ overflow:hidden; margin-bottom:12px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .exp2-mq-track{ display:flex; gap:12px; width:max-content; animation:exp2mq 26s linear infinite; }
  .exp2-mq-row.rev .exp2-mq-track{ animation-direction:reverse; }
  .exp2-mq .exp2-tile{ flex:0 0 auto; width:150px; height:150px; }
  @keyframes exp2mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
}

/* ===== Home mobile fixes (msg 191) — in site.css so they persist ===== */
@media (max-width: 700px){
  /* 1. contain the experience marquee so it never causes horizontal page scroll */
  .home-exp2{ overflow-x:clip; }
  .exp2-mq{ overflow:hidden; max-width:100%; }
  .exp2-mq-row{ width:100%; max-width:100%; overflow:hidden; }
}
@media (max-width: 640px){
  /* 3. community: reserve image space so photos don't shift as they load */
  .cm-masonry .cm-photo img{ aspect-ratio:4/5; object-fit:cover; height:auto; }
}

/* ============================================================
   Unified mobile menu (overrides every page's inline version so
   all pages match, and the close (X) never gets covered).
   Dropdowns show expanded when the menu is open — no fragile
   per-item collapse that kept breaking.
   ============================================================ */
@media (max-width: 768px){
  body.rp-shell header{ position:sticky; top:0; z-index:1000; }
  body.rp-shell .mobile-menu-toggle{ display:flex !important; }        /* hamburger / X always visible & on top */
  body.rp-shell nav{ display:none; }
  body.rp-shell nav.active{
    display:block !important; position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
    background:#fff !important; box-shadow:0 14px 28px rgba(0,0,0,.14) !important;
    max-height:82vh; overflow-y:auto; z-index:999; padding:6px 20px 22px !important;
  }
  body.rp-shell nav.active .nav-dropdown{ display:block; border-bottom:1px solid #eef1f2; }
  /* accordion: groups collapsed by default; tap a group to expand/collapse it */
  body.rp-shell nav.active .dropdown-menu,
  body.rp-shell nav.active .dropdown-menu.mega{ display:none !important; }
  body.rp-shell nav.active .nav-dropdown.active > .dropdown-menu,
  body.rp-shell nav.active .nav-dropdown.active > .dropdown-menu.mega{
    display:block !important; position:static !important; box-shadow:none !important; min-width:0 !important;
    grid-template-columns:1fr !important; opacity:1 !important; visibility:visible !important; transform:none !important;
    padding:2px 0 10px 12px !important; background:transparent !important;
  }
  /* chevron indicator that flips when the group is open */
  body.rp-shell nav.active .nav-dropdown > a{ display:flex !important; align-items:center; gap:8px; }
  body.rp-shell nav.active .nav-dropdown > a{ padding-right:26px !important; position:relative; }
  body.rp-shell nav.active .nav-dropdown > a::after{ content:""; position:absolute; right:6px; top:50%;
    width:8px; height:8px; border-right:2.5px solid #9aa4aa; border-bottom:2.5px solid #9aa4aa;
    margin-top:-6px; transform:rotate(45deg); transition:transform .2s ease, border-color .2s ease; }
  body.rp-shell nav.active .nav-dropdown.active > a::after{ margin-top:-2px; transform:rotate(-135deg); border-color:#2b8a91; }
  body.rp-shell nav.active .nav-dropdown:not(:has(.dropdown-menu)) > a::after{ display:none; }
  body.rp-shell nav.active .mega-head{ margin-top:6px; }
}

/* Clean hamburger→X close button + spacing so it's never cut off */
@media (max-width: 768px){
  body.rp-shell .header-actions{ gap:10px; padding-right:2px; }
  body.rp-shell .mobile-menu-toggle{ display:flex !important; position:relative; width:34px; height:34px;
    flex:0 0 auto; background:none; border:0; padding:0; margin-left:2px; }
  body.rp-shell .mobile-menu-toggle span{ position:absolute !important; left:6px; right:6px; height:2.5px !important;
    width:auto !important; background:#1D3242 !important; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  body.rp-shell .mobile-menu-toggle span:nth-child(1){ top:10px; }
  body.rp-shell .mobile-menu-toggle span:nth-child(2){ top:16px; }
  body.rp-shell .mobile-menu-toggle span:nth-child(3){ top:22px; }
  body.rp-shell .mobile-menu-toggle.active span:nth-child(1){ top:16px; transform:rotate(45deg); }
  body.rp-shell .mobile-menu-toggle.active span:nth-child(2){ opacity:0; }
  body.rp-shell .mobile-menu-toggle.active span:nth-child(3){ top:16px; transform:rotate(-45deg); }
}

/* Peptides page mobile: always show the goal image ABOVE the text (goal2 & goal4 are text-first in the DOM) */
@media (max-width: 768px){
  .goal-feature .goal-card{ display:flex !important; flex-direction:column !important; }
  .goal-feature-media{ order:-1 !important; }
  .goal-feature-content{ order:1 !important; }
}

/* Peptides mobile: swap Sleep & Men's Health card order (Men's Health first) */
@media (max-width: 760px){
  .goal-mini-b{ order:1; }   /* Men's Health -> first */
  .goal-mini-a{ order:2; }   /* Sleep & Energy -> second */
}

/* Experiences page hero: keep the cycling word's line on ONE row (no row-jump as it types) */
@media (max-width: 640px){
  .exp-hero h1:has(#rotWord){ white-space:nowrap !important; font-size:clamp(1.35rem,6vw,2rem) !important; }
  .exp-hero #rotWord{ display:inline-block; }
}

/* "All Peptides / All Experiences" link pinned to the TOP of its mega-menu */
.dropdown-menu.mega .mega-all-top{ display:block; font-weight:800 !important;
  color:#2b8a91 !important; padding:8px 20px !important; border-bottom:1px solid #eef1f2; margin-bottom:2px; }
@media (max-width: 768px){
  body.rp-shell nav.active .dropdown-menu.mega{ display:none; }
  body.rp-shell nav.active .nav-dropdown.active > .dropdown-menu.mega{ display:flex !important; flex-direction:column; }
  body.rp-shell nav.active .dropdown-menu.mega .mega-all-top{ order:-1; }
}

/* Experiences accordion: don't clip the last card (e.g. 3D Body Scan) when a group is open on mobile */
@media (max-width: 768px){
  .exp-group.open .exp-group-body{ max-height:9000px !important; }
}

/* Monthly Special page: fit the offer cards on mobile (stack + right-size fonts, no overflow) */
@media (max-width: 768px){
  .sp-feature{ grid-template-columns:1fr !important; gap:20px !important; padding:26px 20px !important; overflow-wrap:break-word; }
  .sp-feature h3{ font-size:1.4rem !important; }
  .sp-card{ padding:24px 20px !important; overflow-wrap:break-word; }
  .sp-card h3{ font-size:1.05rem !important; }
  .sp-price{ font-size:2rem !important; }
  .sp-price small{ font-size:.85rem !important; }
  .sp-feature, .sp-card{ max-width:100%; }
}

/* About page: collapse the 4-col strip on mobile (was staying 4 cols and breaking) */
@media (max-width: 768px){
  .strip-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px; }
}

/* --- SPECIALS promo bar: pinned on scroll + subtle attention shine (Troy request) --- */
body.rp-shell .top-bar{ position:sticky; top:0; z-index:1001; overflow:hidden; }
body.rp-shell header{ top:0; }            /* header pins just under the 42px SPECIALS bar */
body.rp-shell .top-bar-promos a{ position:relative; font-weight:800; }
body.rp-shell .top-bar::after{
  content:''; position:absolute; top:0; left:-45%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(88,194,202,.28), transparent);
  transform:skewX(-18deg); pointer-events:none; animation:rp-bar-shine 5.5s ease-in-out infinite;
}
@keyframes rp-bar-shine{ 0%,55%{ left:-45%; } 100%{ left:145%; } }
@media (max-width:768px){ body.rp-shell header{ top:0; } }   /* bar is 33px on mobile */
@media (prefers-reduced-motion: reduce){ body.rp-shell .top-bar::after{ animation:none; } }

/* Desktop (PC): Book button bottom-LEFT, Mindbody chat launcher bottom-RIGHT (swapped). */
@media (min-width:769px){
  body.rp-shell .rp-fab{ left:22px !important; right:auto !important; }
  #bowtie-cta,
  #bowtie-main_container{ right:20px !important; left:auto !important; }
}
/* Mobile/tablet: chat stays bottom-right, so lift the Book button above the 60px launcher. */
@media (max-width:768px){ body.rp-shell .rp-fab{ bottom: 94px; } }

/* --- Blog post hero: right-side featured image (matches L2 hero style) --- */
.post-hero-photo{ position:absolute; right:0; top:0; bottom:0; width:46%; z-index:1; }
.post-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#16232e 0%,rgba(22,35,46,.72) 40%,rgba(22,35,46,.10) 100%); }
.post-hero:has(.post-hero-photo) .post-hero-mark{ display:none; }
.post-hero:has(.post-hero-photo) .post-hero-inner .wrapn{ max-width:60%; }
@media(max-width:860px){ .post-hero-photo{ display:none; } .post-hero:has(.post-hero-photo) .post-hero-inner .wrapn{ max-width:100%; } }

/* ===== V2-HIDE: remove SPECIALS top-bar + all eyebrow text sitewide (Chad 8/7) ===== */
body.rp-shell .top-bar{ display:none !important; }
[class*="eyebrow"]{ display:none !important; }