/*
Theme Name: UMH Article Theme (Plan B)
Theme URI: https://urologyandmenshealth.com
Description: Shortcode-based magazine article layout for Urology and Men's Health. Uses CSS viewport-breakout to escape Astra container constraints. Activate alongside Astra parent theme.
Author: Urology and Men's Health
Version: 2.6
Template: astra
*/

/* ═══════════════════════════════════════════════════════════════
   UMH ARTICLE THEME v2.6 — PLAN B
   ───────────────────────────────────────────────────────────────
   v2.6 CHANGES:
   - Tightened vertical spacing below hero section (56px to 40px).
   - Forced left-alignment for callout boxes to match paragraph text.

   v2.5 CHANGES (kept):
   - CRITICAL BUG FIX: Removed `overflow-x: hidden` from desktop
     .umh-wrap. That property was killing position: sticky on the
     TOC and rail by breaking the sticky containing-block chain.
     The mobile horizontal-scroll prevention is now scoped strictly
     inside the 820px media query (where viewport-breakout is also
     disabled, so it doesn't need overflow management at all).
   - STICKY ENFORCEMENT: Added explicit align-self: start and
     height: max-content to .umh-toc and .umh-rail so they
     correctly stick instead of stretching to match the article
     column's height. -webkit-sticky added for Safari.
   - HERO DECK SPACING: Made spacing fix more aggressive — switched
     from margin-bottom on hero-deck to using a dedicated divider
     gap. Hero-meta now has explicit padding-top of 16px (was 8px)
     and margin-top of 12px to physically separate from the deck.

   v2.4 CHANGES (kept):
   - Mobile viewport-breakout disabled below 820px (proper fix).
   - Hero deck font-weight 500, max-width 95%, margin-bottom 40px.
   - TOC scroll-spy hardened: both IntersectionObserver and
     requestAnimationFrame scroll listener running together.
   - Console.log markers for debuggability.

   v2.3 CHANGES (kept):
   - Hero top-aligned, cover image uses object-fit: contain.
   - TOC active state slimmed to thin bar + bold text.
   - Rail width 320 → 280, thumbnail height 130 → 110.
   - All Read Next + Rail underlines killed via !important.

   v2.2 CHANGES (kept):
   - Hide Astra entry-header and post-navigation duplicates.
   - SVG sizing for hero action buttons.
   - TOC filter for "In This Guide" / Rank Math TOC block.
   ───────────────────────────────────────────────────────────────
   Brand:      Teal #008f8c · Hover #007a78 · Navy #0b1a2d
   Body bg:    #fbfaf7
   Font:       Inter (Google Fonts)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. ASTRA OVERRIDES (kill duplicates that show above/below)
   ═══════════════════════════════════════════════════════════════ */

/* Hide Astra's native entry-header on single posts (we render our own hero) */
body.single-post .entry-header,
body.single-post header.entry-header,
body.single-post .ast-single-post .entry-header,
body.single-post article.ast-article-single > .entry-header {
    display: none !important;
}

/* Hide Astra's post-navigation footer (we render our own Read Next section) */
body.single-post .post-navigation,
body.single-post nav.navigation.post-navigation,
body.single-post .ast-pagination,
.umh-wrap ~ .post-navigation,
.umh-wrap ~ .ast-single-related-posts-container {
    display: none !important;
}

/* Hide Astra's narrow-container constraint when shortcode is on the page */
body.single-post.ast-narrow-container .entry-content[data-ast-blocks-layout] > * {
    max-width: none;
}


/* ═══════════════════════════════════════════════════════════════
   2. VIEWPORT BREAKOUT (the critical layout fix)
   ═══════════════════════════════════════════════════════════════ */
.umh-wrap {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fbfaf7;
    color: #0b1a2d;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    box-sizing: border-box;
}

.umh-wrap *,
.umh-wrap *::before,
.umh-wrap *::after {
    box-sizing: border-box;
}

.umh-wrap a { color: #008f8c; }


/* ═══════════════════════════════════════════════════════════════
   3. SCROLL PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.umh-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #008f8c;
    z-index: 9999;
    width: 0%;
    transition: width 0.15s ease-out;
}


/* ═══════════════════════════════════════════════════════════════
   4. PAGE SHELL
   ═══════════════════════════════════════════════════════════════ */
.umh-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}


/* ═══════════════════════════════════════════════════════════════
   5. BREADCRUMBS
   ═══════════════════════════════════════════════════════════════ */
.umh-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 28px;
}
.umh-breadcrumb a { color: #64748b; text-decoration: none; transition: color 0.15s ease; }
.umh-breadcrumb a:hover { color: #008f8c; }
.umh-breadcrumb .umh-bc-sep { color: #cbd5e1; font-size: 14px; }
.umh-breadcrumb .umh-bc-current { color: #0b1a2d; }


/* ═══════════════════════════════════════════════════════════════
   6. HERO
   ═══════════════════════════════════════════════════════════════ */
.umh-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    margin-bottom: 40px; /* Reduced from 56px to tighten vertical spacing */
    align-items: start;
}
.umh-hero-text { display: flex; flex-direction: column; justify-content: flex-start; }
.umh-hero h1 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0b1a2d;
    margin: 0 0 20px;
}
.umh-hero-deck {
    font-size: 18px;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 36px;
    font-weight: 500;
    max-width: 95%;
}
.umh-hero-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 24px;
    margin-top: 12px;
    padding-top: 16px;
    padding-bottom: 24px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.umh-hero-author { display: flex; align-items: center; gap: 14px; }
.umh-hero-author img {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; border: 2px solid #e2e8f0;
}
.umh-meta-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: #64748b; margin-bottom: 4px;
}
.umh-meta-value { font-size: 14px; color: #0b1a2d; font-weight: 600; line-height: 1.3; }
.umh-meta-creds {
    font-size: 11px; color: #64748b; font-weight: 500;
    margin-top: 2px; letter-spacing: 0.2px;
}
.umh-hero-divider { height: 36px; width: 1px; background: #e2e8f0; }
.umh-hero-actions { display: flex; gap: 8px; margin-left: auto; }

/* Action buttons (share / save) */
.umh-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.umh-action-btn:hover {
    background: #e8f8f5;
    color: #008f8c;
    border-color: #008f8c;
}
.umh-action-btn svg {
    width: 18px !important;
    height: 18px !important;
    display: block;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.umh-hero-img {
    border-radius: 16px; overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    aspect-ratio: 1200 / 630;
    width: 100%;
    position: relative;
}
.umh-hero-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   7. 3-COLUMN MAIN GRID
   ═══════════════════════════════════════════════════════════════ */
.umh-main {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    gap: 40px;
    align-items: start;
    overflow: visible !important;
}

.umh-wrap,
.umh-page,
.umh-main,
body.single-post .ast-container,
body.single-post .site-content,
body.single-post #content,
body.single-post .ast-article-single {
    overflow: visible !important;
}


/* ═══════════════════════════════════════════════════════════════
   8. LEFT: STICKY TOC
   ═══════════════════════════════════════════════════════════════ */
.umh-toc {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
    height: max-content !important;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; padding: 22px 20px;
}
.umh-toc h3 {
    font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; color: #64748b; margin: 0 0 16px;
}
.umh-toc-nav { display: flex; flex-direction: column; gap: 2px; }
.umh-toc-link {
    display: block !important; 
    padding: 8px 0 8px 14px !important;
    border: none !important;
    border-left: 2px solid transparent !important;
    color: #475569 !important; 
    font-size: 13.5px !important; 
    font-weight: 500 !important;
    text-decoration: none !important; 
    line-height: 1.45 !important;
    transition: color 0.15s ease, border-color 0.15s ease;
    cursor: pointer !important; 
    background: transparent !important;
    background-color: transparent !important; 
    text-align: left !important;
    font-family: inherit !important; 
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.umh-toc-link:hover { color: #008f8c !important; }
.umh-toc-link.active {
    color: #008f8c !important;
    font-weight: 700 !important;
    border-left: 2px solid #008f8c !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.umh-toc-link[data-skip="1"] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   9. CENTER: ARTICLE BODY
   ═══════════════════════════════════════════════════════════════ */
.umh-article { min-width: 0; max-width: 100%; }
.umh-article h1 { display: none; }
.umh-article h2 {
    font-size: 28px; font-weight: 800; letter-spacing: -0.3px;
    color: #0b1a2d; margin: 44px 0 16px; line-height: 1.25;
    scroll-margin-top: 24px;
}
.umh-article h3 {
    font-size: 21px; font-weight: 700; color: #0b1a2d;
    margin: 32px 0 12px; line-height: 1.3;
}
.umh-article p {
    font-size: 16.5px; line-height: 1.75;
    color: #1f2937; margin: 0 0 18px;
}
.umh-article ul, .umh-article ol {
    font-size: 16.5px; line-height: 1.75;
    color: #1f2937; padding-left: 24px; margin: 0 0 20px;
}
.umh-article li { margin-bottom: 8px; }
.umh-article img {
    max-width: 100%; height: auto;
    border-radius: 12px; border: 1px solid #e2e8f0;
}
.umh-article figure { margin: 28px 0; }
.umh-article figcaption { display: none; }
.umh-article strong { color: #0b1a2d; font-weight: 700; }
.umh-article a:not(.umh-related-link):not(.umh-content-link) {
    color: #008f8c; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}

/* Force callout boxes to flush left with standard text */
.umh-article .umh-box-summary,
.umh-article .umh-box-clinical,
.umh-article .umh-box-warning {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   10. RIGHT: STICKY RAIL
   ═══════════════════════════════════════════════════════════════ */
.umh-rail {
    display: flex; flex-direction: column; gap: 24px;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
    height: max-content !important;
}

.umh-rail a,
.umh-rail a:hover,
.umh-rail a:visited,
.umh-rail a:focus,
.umh-rail a * {
    text-decoration: none !important;
}

.umh-rail-card {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; padding: 22px 20px;
}
.umh-rail-card h3 {
    font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; color: #64748b; margin: 0 0 18px;
}

.umh-rail-related { display: flex; flex-direction: column; gap: 16px; }
.umh-rail-item {
    display: flex; flex-direction: column; gap: 8px;
    text-decoration: none !important; color: inherit;
}
.umh-rail-thumb {
    position: relative; border-radius: 8px; overflow: hidden;
    height: 110px;
    background: #fff;
}
.umh-rail-thumb img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.3s ease;
}
.umh-rail-item:hover .umh-rail-thumb img { transform: scale(1.05); }

.umh-rail-badge {
    display: none !important;
}

.umh-rail-title {
    font-size: 13.5px;
    font-weight: 700; color: #0b1a2d;
    line-height: 1.4; transition: color 0.15s ease;
    text-decoration: none !important;
}
.umh-rail-item:hover .umh-rail-title { color: #008f8c; }

.umh-rail-tools { display: flex; flex-direction: column; gap: 10px; }
.umh-rail-tool {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: #fbfaf7;
    border: 1px solid #e2e8f0; border-radius: 8px;
    text-decoration: none; color: #0b1a2d;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.umh-rail-tool:hover { border-color: #008f8c; background: #f0fafa; }
.umh-tool-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%; background: #e8f8f5;
    color: #008f8c; display: flex;
    align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.umh-rail-tool:hover .umh-tool-icon { background: #008f8c; color: #fff; }
.umh-tool-icon svg {
    width: 18px; height: 18px;
    stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.umh-tool-label { font-size: 13.5px; font-weight: 700; color: #0b1a2d; line-height: 1.3; }

.umh-rail-optin {
    background: linear-gradient(180deg, #fbf8f3 0%, #f0fafa 100%);
    border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 24px 20px; text-align: center;
}
.umh-rail-optin-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: #008f8c; color: #fff;
    display: inline-flex; align-items: center;
    justify-content: center; margin-bottom: 14px;
}
.umh-rail-optin-icon svg {
    width: 22px; height: 22px;
    stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.umh-rail-optin h4 {
    font-size: 16px; font-weight: 800; color: #0b1a2d;
    margin: 0 0 8px; line-height: 1.3;
}
.umh-rail-optin p { font-size: 13px; color: #475569; margin: 0 0 16px; line-height: 1.5; }
.umh-rail-optin input {
    width: 100%; padding: 11px 14px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 13.5px; margin-bottom: 10px; font-family: inherit;
    background: #fff;
}
.umh-rail-optin input:focus { outline: none; border-color: #008f8c; box-shadow: 0 0 0 3px rgba(0,143,140,0.12); }
.umh-rail-optin button {
    width: 100%; padding: 12px;
    background: #008f8c; color: #fff; border: none;
    border-radius: 6px; font-size: 12px; font-weight: 800;
    letter-spacing: 0.8px; text-transform: uppercase;
    cursor: pointer; transition: background 0.15s ease; font-family: inherit;
}
.umh-rail-optin button:hover { background: #007a78; }


/* ═══════════════════════════════════════════════════════════════
   11. READ NEXT
   ═══════════════════════════════════════════════════════════════ */
.umh-readnext { margin-top: 80px; padding-top: 48px; border-top: 1px solid #e2e8f0; }

.umh-readnext a,
.umh-readnext a:hover,
.umh-readnext a:visited,
.umh-readnext a:focus,
.umh-readnext a *,
.umh-readnext h2,
.umh-readnext h3,
.umh-readnext h4,
.umh-readnext p {
    text-decoration: none !important;
}

.umh-readnext-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.umh-readnext h2 {
    font-size: 28px; font-weight: 800; color: #0b1a2d;
    margin: 0; letter-spacing: -0.3px;
}
.umh-readnext-hub {
    font-size: 13px; font-weight: 700; color: #008f8c;
    text-decoration: none !important; padding: 10px 18px;
    border: 1px solid #008f8c; border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    background: #fff;
}
.umh-readnext-hub:hover { background: #008f8c; color: #fff; }
.umh-readnext-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }

.umh-readnext-feature {
    display: flex; flex-direction: column; gap: 16px;
    text-decoration: none !important; color: inherit;
}
.umh-rn-img {
    border-radius: 14px; overflow: hidden; height: 320px;
    background: #fff;
}
.umh-rn-img img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.5s ease;
}
.umh-readnext-feature:hover .umh-rn-img img { transform: scale(1.04); }
.umh-readnext-feature h3 {
    font-size: 26px; font-weight: 800; color: #0b1a2d;
    line-height: 1.2; margin: 0; letter-spacing: -0.3px;
    transition: color 0.15s ease;
    text-decoration: none !important;
}
.umh-readnext-feature:hover h3 { color: #008f8c; }
.umh-readnext-feature p {
    font-size: 15px; color: #475569; margin: 0; line-height: 1.6;
    text-decoration: none !important;
}

.umh-readnext-list {
    display: flex; flex-direction: column; gap: 24px; justify-content: space-between;
}
.umh-readnext-row {
    display: flex; gap: 18px; text-decoration: none !important;
    color: inherit; align-items: flex-start;
}
.umh-rn-thumb {
    width: 140px; height: 100px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden; background: #fff;
}
.umh-rn-thumb img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.3s ease;
}
.umh-readnext-row:hover .umh-rn-thumb img { transform: scale(1.05); }
.umh-readnext-row h4 {
    font-size: 17px; font-weight: 700; color: #0b1a2d;
    line-height: 1.3; margin: 0 0 6px;
    transition: color 0.15s ease;
    text-decoration: none !important;
}
.umh-readnext-row:hover h4 { color: #008f8c; }
.umh-readnext-row p {
    font-size: 13.5px; color: #64748b; margin: 0; line-height: 1.5;
    text-decoration: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .umh-main { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
    .umh-toc { display: none; }
}
@media (max-width: 900px) {
    .umh-readnext-grid { grid-template-columns: 1fr; gap: 32px; }
    .umh-rn-img { height: 240px; }
    .umh-readnext-feature h3 { font-size: 22px; }
}
@media (max-width: 820px) {
    .umh-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    .umh-page { padding: 24px 16px 60px; max-width: 100%; }
    .umh-hero { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .umh-hero h1 { font-size: 30px; }
    .umh-hero-deck { font-size: 16px; margin-bottom: 24px; }
    .umh-hero-img { aspect-ratio: 1200 / 630; }
    .umh-hero-meta { gap: 16px; }
    .umh-hero-divider { display: none; }
    .umh-hero-actions { margin-left: 0; }

    .umh-main { grid-template-columns: 1fr; gap: 32px; }

    .umh-rail {
        position: static !important;
        height: auto !important;
    }
    .umh-toc {
        display: block !important;
        position: static !important;
        height: auto !important;
        max-height: none !important;
        margin-bottom: 32px;
    }

    .umh-rn-thumb { width: 100px; height: 70px; }
    .umh-readnext-row h4 { font-size: 15px; }
    .umh-readnext-row p { font-size: 13px; }

    .umh-article h2 { font-size: 24px; }
    .umh-article p, .umh-article ul, .umh-article ol { font-size: 16px; }
    .umh-readnext h2 { font-size: 24px; }
}

@media (max-width: 480px) {
    .umh-page { padding: 16px 12px 48px; }
    .umh-breadcrumb {
        font-size: 10px;
        gap: 6px;
        flex-wrap: wrap;
    }
    .umh-hero h1 { font-size: 26px; }
    .umh-hero-author img { width: 48px; height: 48px; }

    .umh-article > *,
    .umh-article .umh-box-summary,
    .umh-article .umh-box-clinical,
    .umh-article .umh-box-warning {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .umh-hero-author {
        flex-wrap: wrap;
    }
    .umh-meta-creds {
        font-size: 10.5px;
        word-break: normal;
    }
}