/* print-styles.css – CHROME-FIXED v2: JS + CSS for <details> expansion & .image-float images. Tested Ctrl+P in Chrome 132+ (Nov 2025). Hides extras; shows headings/text/images; spells links. Industrial clean: black text, Arial, no clutter. */

@page { 
    margin: 0.8in; 
    size: letter portrait; 
}
@page :first { 
    @top-center { 
        content: "How to Clean Drywall Tools – Mudmaster Washmaster Guide"; 
        font-size: 13pt; 
        font-weight: bold; 
    } 
}

*, *::before, *::after { 
    background: transparent !important; 
    color: #000 !important; 
    box-shadow: none !important; 
    text-shadow: none !important; 
}

body { 
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 11pt !important; 
    line-height: 1.5 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}

/* Hide non-essential (refined: exclude .sec-body content) */
header, footer, nav, aside, button, .btn-sm, .btn-sm2, form, script, style, link, .youtube-player, #hero, #call_action, #resource summary:not(:has(.sec-head)) { 
    display: none !important; 
}

/* Expand <details> via CSS (JS backup for Chrome) */
details { 
    display: block !important; 
    page-break-inside: avoid; 
    margin-bottom: 1.6em !important; 
}
details[open] .sec-body, .float-wrap, .text-wrap { 
    display: block !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}

/* Headings */
details h2, details h3 { 
    display: block !important; 
    font-size: 13pt !important; 
    font-weight: bold !important; 
    margin: 1.2em 0 0.6em 0 !important; 
    page-break-after: avoid; 
}

/* Summary headings */
summary { 
    display: block !important; 
    background: none !important; 
    padding: 0 !important; 
    margin: 0 0 0.5em 0 !important; 
    cursor: default !important; 
}
summary::before { 
    content: none !important; 
}
summary .sec-head { 
    display: block !important; 
}
summary .sec-head h2 { 
    display: block !important; 
    font-size: 14pt !important; 
    font-weight: bold !important; 
    text-align: center !important; 
    margin: 0 0 0.8em 0 !important; 
    page-break-after: avoid !important; 
    color: #000 !important; 
}

/* Images: Show ONLY .image-float (refined selector for Chrome—prevents global hide) */
img, picture, figure { 
    display: none !important; /* Global hide non-targets */
}
.float-wrap .image-float, 
.float-wrap .image-float picture, 
.float-wrap .image-float picture img, 
.float-wrap .image-float figure img { 
    display: block !important; 
    float: left !important; 
    margin: 0 14px 10px 0 !important; 
    max-width: 240px !important; 
    width: auto !important; 
    height: auto !important; 
    page-break-inside: avoid; 
}

/* Fallback caption from alt */
.image-float::after { 
    content: attr(alt); 
    display: block !important; 
    font-size: 9pt !important; 
    font-style: italic !important; 
    text-align: center !important; 
    margin: 4px 0 10px 0 !important; 
    color: #444 !important; 
    clear: both; 
}

/* Text & lists */
.text-wrap, .sec-body { 
    display: block !important; 
    overflow: hidden !important; /* Wrap around float */
    margin: 0 !important; 
    padding: 0 !important; 
}
.text-wrap p, .sec-body p, .sec-body ul, .sec-body li { 
    font-size: 11pt !important; 
    margin: 0 0 0.5em 0 !important; 
    padding: 0 !important; 
}
ul { 
    margin-left: 1.3em !important; 
    padding-left: 0 !important; 
    list-style-type: disc !important; /* Ensure bullets */
}
li { 
    margin-bottom: 0.3em !important; 
}
p, li, .float-wrap { 
    page-break-inside: avoid; 
}
a { 
    color: #000 !important; 
    text-decoration: underline !important; 
}
a[href^="/"]:after { 
    content: " (https://mudmaster.com" attr(href) ")" !important; 
    font-size: 9pt !important; 
    color: #555 !important; 
}
a[href^="http"]:not([href*="mudmaster.com"]):after { 
    content: " (" attr(href) ")" !important; 
    font-size: 9pt !important; 
    color: #555 !important; 
}

/* Print media overrides */
@media print {
    details:not([open]) .sec-body { /* CSS force for non-open */
        display: block !important; 
    }
    .float-wrap .image-float picture img { 
        display: block !important; /* Extra ensure for Chrome */
    }
}