/* ═══ MEDICAL WEIGHT LOSS MOBILE FIXES ═══ */
@media (max-width: 768px) {
    body.page-id-5381 .hero,
    body.page-id-5381 .container.grid.two-col.hero,
    body.page-id-5381 .oa-wrap .hero,
    body.page-id-5381 section.oa-wrap .container.hero {
        background: #E2DCD2 !important;
        background-color: #E2DCD2 !important;
        color: #1A1A1A !important;
    }
    /* Text inside hero: dark (but exclude buttons) */
    body.page-id-5381 .hero h1,
    body.page-id-5381 .hero h2,
    body.page-id-5381 .hero h3,
    body.page-id-5381 .hero h4,
    body.page-id-5381 .hero p,
    body.page-id-5381 .hero span,
    body.page-id-5381 .hero .eyebrow,
    body.page-id-5381 .hero strong,
    body.page-id-5381 .hero em {
        color: #1A1A1A !important;
    }
    body.page-id-5381 .hero a:not(.btn):not(.btn-primary):not(.btn-secondary) {
        color: #7A5C2E !important;
    }
    /* Primary CTA - dark bg, BEIGE text */
    body.page-id-5381 .hero a.btn-primary,
    body.page-id-5381 .hero a.btn-primary:link,
    body.page-id-5381 .hero a.btn-primary:visited,
    body.page-id-5381 .hero .btn.btn-primary {
        background: #1A1A1A !important;
        background-color: #1A1A1A !important;
        color: #E2DCD2 !important;
        border-color: #1A1A1A !important;
        -webkit-text-fill-color: #E2DCD2 !important;
    }
    body.page-id-5381 .hero a.btn-primary *,
    body.page-id-5381 .hero .btn.btn-primary * {
        color: #E2DCD2 !important;
        -webkit-text-fill-color: #E2DCD2 !important;
    }
    body.page-id-5381 .hero .btn-secondary,
    body.page-id-5381 .hero a.btn-secondary {
        background: transparent !important;
        color: #1A1A1A !important;
        border: 1.5px solid #1A1A1A !important;
    }
    body.page-id-5381 .hero .btn-secondary * {
        color: #1A1A1A !important;
    }

    /* Global overflow safety */
    body.page-id-5381 * {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    body.page-id-5381 .elementor-section,
    body.page-id-5381 .elementor-container,
    body.page-id-5381 .elementor-column {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Hero background image -> WebP */
    body.page-id-5381 .hero-img,
    body.page-id-5381 .hero .hero-img {
        background-image: url('/wp-content/uploads/2025/10/Weight-loss-image-with-scale-and-healthy-food.webp') !important;
    }
}

/* ═══ GLOBAL HEADER + DROPDOWN Z-INDEX FIX ═══ */
/* Ensure site header and its dropdowns always stack above page content */
header.site-header,
.elementor-location-header,
[data-elementor-type="header"] {
    position: relative !important;
    z-index: 9999 !important;
}
.elementor-nav-menu--dropdown,
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--main .elementor-nav-menu ul,
ul.sub-menu,
.menu-item-has-children > .sub-menu,
nav[aria-hidden="false"] {
    z-index: 10000 !important;
}

/* ═══ GLOBAL FONT-SIZE BUMP FOR CUSTOM LANDING PAGES (Apr 2026) ═══ */
/* Applies to oa-tp, oa-mp, oa-pp, oa-wl, oa-bio namespaces. Headings untouched. */

/* Paragraph body text */
.oa-tp p, .oa-tp li, .oa-tp .oa-prose p,
.oa-mp p, .oa-mp li, .oa-mp .oa-prose p,
.oa-pp p, .oa-pp li, .oa-pp .oa-prose p,
.oa-wl p, .oa-wl li,
.oa-bio p, .oa-bio li, .oa-bio .oa-prose p {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.7 !important;
}

/* Hero subtext */
.oa-tp .oa-hero__sub, .oa-wl .oa-hero__sub,
.oa-pp .oa-hero__sub, .oa-bio .oa-hero__sub {
    font-size: clamp(1.08rem, 1.4vw, 1.2rem) !important;
    line-height: 1.7 !important;
}

/* Section head subtitle paragraph */
.oa-tp .oa-sec__head p, .oa-mp .oa-sec__head p,
.oa-pp .oa-sec__head p, .oa-wl .oa-sec__head p,
.oa-bio .oa-sec__head p {
    font-size: 1.125rem !important; /* 18px for section intros */
    line-height: 1.75 !important;
}

/* FAQ body */
.oa-tp .oa-faq__body, .oa-tp .oa-faq__body p,
.oa-mp .oa-faq__body, .oa-mp .oa-faq__body p,
.oa-pp .oa-faq__body, .oa-pp .oa-faq__body p,
.oa-wl .oa-faq__body, .oa-wl .oa-faq__body p,
.oa-bio .oa-faq__body, .oa-bio .oa-faq__body p {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.75 !important;
}

/* FAQ summary (question) */
.oa-tp .oa-faq summary, .oa-mp .oa-faq summary,
.oa-pp .oa-faq summary, .oa-wl .oa-faq summary,
.oa-bio .oa-faq summary {
    font-size: 1.0625rem !important; /* 17px */
}

/* Card descriptions (pillars, timeline, cost, related, research, candidacy) */
.oa-tp .oa-step p, .oa-tp .oa-card li, .oa-tp .oa-tl p, .oa-tp .oa-cost__card p,
.oa-tp .oa-rel p, .oa-tp .oa-excl li, .oa-tp .oa-elig li, .oa-tp .oa-med li, .oa-tp .oa-med p,
.oa-mp .oa-step p, .oa-mp .oa-pcard__desc, .oa-mp .oa-elig li,
.oa-pp .oa-step p, .oa-pp .oa-cand li, .oa-pp .oa-research__item p, .oa-pp .oa-rel p, .oa-pp .oa-disclose p,
.oa-wl .oa-step p, .oa-wl .oa-card li, .oa-wl .oa-tl p, .oa-wl .oa-cost__card p,
.oa-wl .oa-rel p, .oa-wl .oa-excl li, .oa-wl .oa-elig li, .oa-wl .oa-med li, .oa-wl .oa-med p,
.oa-bio .oa-pillar p, .oa-bio .oa-family p {
    font-size: 1rem !important; /* 16px for card content, compact-but-readable */
    line-height: 1.7 !important;
}

/* Card titles (h3 inside cards) */
.oa-tp .oa-step h3, .oa-tp .oa-tl h3, .oa-tp .oa-cost__card h3, .oa-tp .oa-rel__name, .oa-tp .oa-excl h2,
.oa-mp .oa-step h3,
.oa-pp .oa-step h3, .oa-pp .oa-cand h3, .oa-pp .oa-research__item h3, .oa-pp .oa-rel__name,
.oa-wl .oa-step h3, .oa-wl .oa-tl h3, .oa-wl .oa-cost__card h3, .oa-wl .oa-rel__name, .oa-wl .oa-excl h2,
.oa-bio .oa-pillar h3 {
    font-size: 1.2rem !important; /* 19.2px */
    line-height: 1.35 !important;
}

/* Strong emphasis and inline strong text */
.oa-tp strong, .oa-mp strong, .oa-pp strong, .oa-wl strong, .oa-bio strong {
    font-weight: 500 !important;
}

/* Hero stats number/label - keep big but bump label */
.oa-tp .oa-stat span, .oa-wl .oa-stat span {
    font-size: 12px !important; /* bump from 11px */
}
.oa-mp .oa-stat span {
    font-size: 13px !important;
}

/* Mobile: slightly smaller to avoid wrapping on phone */
@media (max-width: 600px) {
    .oa-tp p, .oa-mp p, .oa-pp p, .oa-wl p, .oa-bio p,
    .oa-tp li, .oa-mp li, .oa-pp li, .oa-wl li, .oa-bio li {
        font-size: 1rem !important; /* 16px on mobile */
    }
    .oa-tp .oa-sec__head p, .oa-mp .oa-sec__head p,
    .oa-pp .oa-sec__head p, .oa-wl .oa-sec__head p,
    .oa-bio .oa-sec__head p {
        font-size: 1.05rem !important;
    }
}

/* ═══ MOBILE FIXES FOR .oa-mp HERO STATS + GENERAL RESPONSIVE POLISH (Apr 2026) ═══ */

/* oa-mp hero stats: collapse 3-column grid on mobile */
@media (max-width: 640px) {
    .oa-mp .oa-hero__stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        max-width: 100% !important;
    }
    .oa-mp .oa-stat {
        padding: 14px 16px !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 12px !important;
    }
    .oa-mp .oa-stat b {
        margin-bottom: 0 !important;
        font-size: 1.3rem !important;
        flex-shrink: 0 !important;
    }
    .oa-mp .oa-stat span {
        font-size: 11px !important;
    }
    /* oa-mp steps/pillars collapse */
    .oa-mp .oa-steps,
    .oa-mp .oa-pillars {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .oa-mp .oa-step {
        padding: 32px 24px !important;
    }
    /* Hero headline, sub text */
    .oa-mp .oa-hero h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        max-width: 100% !important;
    }
    .oa-mp .oa-hero__sub {
        font-size: 1rem !important;
    }
    /* Hero CTAs stack */
    .oa-mp .oa-hero__ctas {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .oa-mp .oa-btn {
        width: 100% !important;
    }
    /* Peptide card grid */
    .oa-mp .oa-pgrid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Compare / excl cards */
    .oa-mp .oa-compare,
    .oa-mp .oa-excl ul,
    .oa-mp .oa-cands,
    .oa-mp .oa-elig ul {
        grid-template-columns: 1fr !important;
        gap: 12px 16px !important;
    }
    /* Section padding tighter on mobile */
    .oa-mp .oa-sec {
        padding: 56px 0 !important;
    }
    .oa-mp .oa-sec__head {
        margin-bottom: 36px !important;
    }
    /* Prevent horizontal overflow in general */
    .oa-mp {
        overflow-x: hidden !important;
    }
    .oa-mp .oa-bleed {
        max-width: 100vw !important;
    }
}

/* Also apply the same mobile fix to .oa-tp and .oa-pp for safety */
@media (max-width: 640px) {
    .oa-tp .oa-hero__stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .oa-tp .oa-stat,
    .oa-tp .oa-steps,
    .oa-tp .oa-compare,
    .oa-tp .oa-cost,
    .oa-tp .oa-related,
    .oa-tp .oa-timeline,
    .oa-tp .oa-excl ul,
    .oa-tp .oa-elig ul,
    .oa-tp .oa-med ul {
        grid-template-columns: 1fr !important;
    }
    .oa-pp .oa-hero__chips {
        gap: 8px !important;
    }
    .oa-pp .oa-related,
    .oa-pp .oa-cands,
    .oa-pp .oa-steps {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Horizontal overflow safety for all namespaces */
.oa-mp, .oa-tp, .oa-pp, .oa-wl, .oa-bio {
    overflow-x: hidden;
}

/* TRT lightening (pages 5526) moved to post_content oa-mp-lighten <style> block (2026-04-22) */


/* ═══ GLOBAL .oa-mp MOBILE HERO FIX — kill top gap + stack cleanly (Apr 2026) ═══ */
/* Applies to peptides hub AND TRT (both use .oa-mp). Fixes the "image shrunk leaves gap" issue */

@media (max-width: 900px) {
    .oa-mp .oa-hero {
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 48px 20px 56px !important;
    }
    .oa-mp .oa-hero > *,
    .oa-mp .oa-hero__inner,
    .oa-mp .oa-hero .wrap {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Body content (text) comes first */
    .oa-mp .oa-hero__body,
    .oa-mp .oa-hero__content {
        order: 1 !important;
        margin-bottom: 28px !important;
    }
    /* Image sits below text, naturally sized, no gap above */
    .oa-mp .oa-hero__img {
        order: 2 !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: 58vw !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        display: block !important;
    }
    /* Stats grid already collapses (via earlier mobile rule) — make sure */
    .oa-mp .oa-hero__stats {
        grid-template-columns: 1fr !important;
    }
    /* Force every .fade element visible — no JS dependency */
    .oa-mp .fade,
    .oa-mp [class*="fade"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Force all .fade visible on mobile even outside the hero — combats WP Rocket delayed JS */
@media (max-width: 900px) {
    .oa-mp .oa-sec .fade,
    .oa-mp .oa-cta .fade {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══ KILL WHITE GAP between theme header and page content on .oa-mp pages ═══ */
/* Affects peptides hub (5421) and TRT (5526) */

body.page-id-5421,
body.page-id-5421 .site-content,
body.page-id-5421 main,
body.page-id-5421 .elementor-location-single,
body.page-id-5421 article,
body.page-id-5421 .entry-content,
body.page-id-5421 .elementor-widget-theme-post-content,
body.page-id-5421 .elementor-widget-theme-post-content > .elementor-widget-container {
    background-color: #0a0908 !important;
}

/* Also make byline strip touch the theme header cleanly — no gap */
body.page-id-5421 aside[aria-label="Medical review byline"],
body.page-id-5526 aside[aria-label="Medical review byline"] {
    margin-top: 0 !important;
    border-top: 0 !important;
}

/* Remove any entry-content top padding/margin that creates the gap */
body.page-id-5421 .entry-content,
body.page-id-5421 .elementor-widget-container,
body.page-id-5526 .entry-content,
body.page-id-5526 .elementor-widget-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ═══ KILL 38px gap between header and byline on .oa-mp pages ═══ */
body.page-id-5421 aside[aria-label="Medical review byline"],
body.page-id-5526 aside[aria-label="Medical review byline"] {
    margin-top: -1px !important;  /* seal any 1-px gap seam */
}

/* Aggressively zero out top padding/margin on ALL wrappers between header and content */
body.page-id-5421 > *:not(header):not(footer),
body.page-id-5526 > *:not(header):not(footer) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.page-id-5421 .elementor-location-single,
body.page-id-5421 [data-elementor-type="single-page"],
body.page-id-5421 .elementor-widget-wrap,
body.page-id-5421 section[data-element_type="container"],
body.page-id-5526 .elementor-location-single,
body.page-id-5526 [data-elementor-type="single-page"],
body.page-id-5526 .elementor-widget-wrap,
body.page-id-5526 section[data-element_type="container"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Also hide any elementor container that ONLY contains whitespace above our content */
body.page-id-5421 .elementor > .elementor-section-wrap > .elementor-section:first-child,
body.page-id-5526 .elementor > .elementor-section-wrap > .elementor-section:first-child {
    padding-top: 0 !important;
}

/* ═══ KILL rogue <p> tags at body level on .oa-mp pages (wpautop artifact) ═══ */
body.page-id-5421 > p,
body.page-id-5526 > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* ═══ KILL rogue wpautop <p> tags at body level on ALL custom landing pages ═══ */
body.page-id-5421 > p,  /* peptides hub */
body.page-id-5526 > p,  /* TRT */
body.page-id-7166 > p,  /* weight-loss */
body.page-id-7213 > p,  /* semaglutide */
body.page-id-7214 > p,  /* tirzepatide */
body.page-id-7257 > p,  /* oliver-morris-do bio */
body.page-id-7260 > p,  /* mots-c */
body.page-id-7261 > p,  /* cjc-1295-ipamorelin */
body.page-id-7262 > p,  /* wolverine-stack-bpc-157-tb-500 */
body.page-id-743  > p,  /* hydrafacial */
body.page-id-715  > p,  /* rf-microneedling */
body.page-id-1044 > p { /* vi-peel */
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* ═══ FORCE fade elements visible on ALL custom templates ═══ */
/* Stops WP Rocket JS delay from hiding content until user scrolls */
.oa-pp .fade, .oa-pp [class*="fade"],
.oa-tp .fade, .oa-tp [class*="fade"],
.oa-wl .fade, .oa-wl [class*="fade"],
.oa-bio .fade, .oa-bio [class*="fade"],
.oa-mp .fade, .oa-mp [class*="fade"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ═══ BRIGHTEN "Book online" ghost button in .oa-mp CTA sections ═══ */
/* Previous ghost was 5% white bg + 35% border = hard to read on dark */
.oa-mp .oa-cta .oa-btn--ghost,
.oa-mp .oa-cta__ctas .oa-btn--ghost {
    background: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    border-color: rgba(201,174,122,.85) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-weight: 500 !important;
}
.oa-mp .oa-cta .oa-btn--ghost:hover,
.oa-mp .oa-cta__ctas .oa-btn--ghost:hover {
    background: rgba(201,174,122,0.95) !important;
    color: #1a1512 !important;
    border-color: rgba(201,174,122,1) !important;
}

/* Also apply to .oa-pp dark CTA sections */
.oa-pp .oa-cta .oa-btn--ghost {
    background: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    border-color: rgba(180,154,106,.85) !important;
    font-weight: 500 !important;
}
.oa-pp .oa-cta .oa-btn--ghost:hover {
    background: rgba(180,154,106,0.95) !important;
    color: #1a1715 !important;
    border-color: rgba(180,154,106,1) !important;
}

/* ═══ Trim hero top padding on .oa-pp (peptide subpages) mobile — tighten gap below byline ═══ */
@media (max-width: 900px) {
    .oa-pp .oa-hero {
        padding-top: 28px !important;
    }
    .oa-pp .oa-hero__body {
        padding-top: 0 !important;
    }
    /* Also on .oa-tp and .oa-wl if they show the same gap */
    .oa-tp .oa-hero {
        padding-top: 28px !important;
    }
    .oa-wl .oa-hero {
        padding-top: 40px !important;
    }
}