/**
 * Section: Install Guide
 *
 * Long-form installation guide typography. Loaded by
 * page-templates/install-guide.php via trunorth_enqueue_section('install-guide').
 *
 * Body text sized to match Accuspan-style product pages (~24px on wide
 * screens using --font-body). Uses !important on the core type rules so it
 * beats any inherited page-wide styling. Narrow reading column so lines
 * don't stretch across the whole viewport.
 */

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.install-guide-hero {
    position: relative !important;
    width: 100% !important;
    /* Taller so the title never crashes into the fixed nav even with a long
       page title */
    min-height: calc(var(--vw) * 40) !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
    background: #1a1a1a !important;
    /* Hero starts at very top of page, sitting behind the fixed header. The
       dark hero background keeps the header's white nav text visible until
       the user scrolls past 50px and the .scrolled class kicks in (solid
       white header with dark text). */
    margin-top: 0 !important;
    z-index: 1 !important; /* stay under the fixed nav (z-index: 1000) */
}

.install-guide-hero.no-image {
    /* Brand-red banner fallback when no image is set — still dark enough
       for the header's white nav text to remain visible. */
    background: linear-gradient(135deg, #C22127 0%, #8a1719 100%) !important;
    min-height: calc(var(--vw) * 30) !important;
}

.install-guide-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

.install-guide-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.install-guide-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: calc(var(--vw) * 4) calc(var(--vw) * 5) calc(var(--vw) * 3) !important;
    color: #ffffff !important;
}

.install-guide-hero-eyebrow {
    font-family: "Open Sans Condensed", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-size: var(--font-body) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    margin: 0 0 0.5em !important;
}

.install-guide-hero-title {
    font-family: "Open Sans Condensed", sans-serif !important;
    text-transform: uppercase !important;
    font-size: var(--font-h1) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    margin: 0 !important;
    max-width: 60ch !important;
}

/* ── MAIN CONTENT ─────────────────────────────────────────────────────────── */

.install-guide-main {
    /* Hero already provides the top clearance from the fixed header, so we
       just need normal internal padding here. */
    padding: calc(var(--vw) * 4) calc(var(--vw) * 5) calc(var(--vw) * 5) !important;
    background: #ffffff !important;
}

.install-guide-content {
    max-width: 880px !important;
    margin: 0 auto !important;
    font-family: "Montserrat", sans-serif !important;
    color: #1a1a1a !important;
    /* Match Accuspan/product body copy — smaller than legal-page defaults */
    font-size: var(--font-body) !important;
    line-height: 1.6 !important;
}

.install-guide-header {
    margin-bottom: calc(var(--vw) * 2) !important;
    padding-bottom: calc(var(--vw) * 1.5) !important;
    border-bottom: 1px solid #e6e6e6 !important;
}

.install-guide-header h1 {
    font-family: "Open Sans Condensed", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: var(--font-h2) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: #1a1a1a !important;
}

.install-guide-content h2,
.install-guide-content h3,
.install-guide-content h4 {
    font-family: "Open Sans Condensed", sans-serif !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 2em !important;
    margin-bottom: 0.5em !important;
    line-height: 1.2 !important;
}

.install-guide-content h2 { font-size: var(--font-h3) !important; }
.install-guide-content h3 { font-size: var(--font-h4) !important; }
.install-guide-content h4 { font-size: var(--font-medium) !important; }

.install-guide-content p,
.install-guide-content ul,
.install-guide-content ol,
.install-guide-content li {
    font-size: var(--font-body) !important;
    line-height: 1.6 !important;
    margin: 0 0 1em !important;
}

.install-guide-content ul,
.install-guide-content ol {
    padding-left: 1.4em !important;
}

.install-guide-content li {
    margin-bottom: 0.4em !important;
}

.install-guide-content strong,
.install-guide-content b {
    font-weight: 700 !important;
}

.install-guide-content a {
    color: #C22127 !important;
    text-decoration: underline !important;
}

.install-guide-content a:hover {
    color: #8a1719 !important;
}

.install-guide-content hr {
    margin: 2.5em 0 !important;
    border: 0 !important;
    border-top: 1px solid #e6e6e6 !important;
}

/* Figures — constrain diagram images so they don't blow up on wide screens */
.install-guide-content figure,
.install-guide-content .install-figure {
    margin: 1.5em auto !important;
    text-align: center !important;
    max-width: 100% !important;
}

.install-guide-content figure img,
.install-guide-content .install-figure img,
.install-guide-content img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 4px !important;
}

/* ── INTRO BLURB ──────────────────────────────────────────────────────────── */

.install-guide-content .install-guide-intro {
    font-size: var(--font-body) !important;
    line-height: 1.6 !important;
    color: #444 !important;
    margin: 0.5em 0 1.5em !important;
    padding-bottom: 1em !important;
    border-bottom: 1px solid #e6e6e6 !important;
    font-style: italic !important;
}

/* ── VIDEO ────────────────────────────────────────────────────────────────── */

.install-guide-content .install-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em 0 2em !important;
    background: #000 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
}

.install-guide-content .install-video-wrap video,
.install-guide-content video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

/* ── DOWNLOAD BUTTON ──────────────────────────────────────────────────────── */

.install-guide-content .install-download {
    margin: 1.5em 0 2em !important;
    text-align: center !important;
}

.install-guide-content .install-download-btn {
    display: inline-block !important;
    padding: 0.9em 2em !important;
    background: #C22127 !important;
    color: #ffffff !important;
    font-family: "Open Sans Condensed", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: var(--font-body) !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    border: 2px solid #C22127 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.install-guide-content .install-download-btn:hover {
    background: #ffffff !important;
    color: #C22127 !important;
}

.install-guide-content figcaption {
    font-size: var(--font-small) !important;
    color: #666 !important;
    margin-top: 0.5em !important;
    font-style: italic !important;
}

@media (max-width: 768px) {
    .install-guide-main {
        padding: calc(var(--vw) * 6) calc(var(--vw) * 5) !important;
    }
}