/*
Theme Name: Blunapress Portfolio
Theme URI: https://blunapress.com
Author: Blunapress
Description: Professional Editorial Photography Portfolio. Custom Port of Abisko with Sticky Hero and Wall of White.
Version: 99.0.0
Update URI: false
Text Domain: blunapress
*/

/* --------------------------------- */
/*	ULTIMATE STICKY HERO & TYPOGRAPHY
/* --------------------------------- */

/* 1. Root Layering */
html, body {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. THE IMAGE (Bottom Layer) */
.fixed-hero-base,
.wp-block-cover.fixed-hero-base {
    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    width: 100vw !important;
    height: 80vh !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Ensure the native cover image also follows fixed rules */
.wp-block-cover.fixed-hero-base img.wp-block-cover__image-background {
    position: absolute !important; /* Relative to its fixed parent */
    top: 0 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

.hero-overlay,
.wp-block-cover.fixed-hero-base .wp-block-cover__background {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3) !important;
    z-index: 2 !important;
}

/* 3. THE HERO TEXT (Middle Layer - Balanced) */
.hero-text-area,
.wp-block-cover.fixed-hero-base .wp-block-cover__inner-container {
    height: 80vh !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure post title inside cover follows editorial style */
.wp-block-cover.fixed-hero-base .wp-block-post-title {
    font-family: var(--wp--preset--font-family--editorial-sans), sans-serif !important;
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-text-area h1 { 
    font-family: var(--wp--preset--font-family--editorial-sans), sans-serif !important;
    font-size: 3.5rem !important; /* Balanced large size */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-text-area p { 
    font-family: var(--wp--preset--font-family--editorial-sans), sans-serif !important;
    font-size: 1.1rem !important; /* Balanced medium size */
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #ffffff !important;
    margin-top: 15px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* 3.5 THE SPACER (The "Window" for sticky effect) */
.hero-spacer {
    height: 80vh !important;
    background: transparent !important;
    width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: none;
}

/* 4. THE WHITE CONTENT BOX (Top Layer - Covers the Image) */
.white-content-box, 
main#wp--skip-link--target,
.site-main-content {
    background-color: #ffffff !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    z-index: 20 !important;
    padding: 0 !important;
}

.white-content-box {
    padding: 50px 0 0 0 !important; /* 50px top margin between hero and content */
    min-height: 100vh;
}

.inner-constrained {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. FIXED 100px HEADER */
header.site-header, .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eee;
    display: flex !important;
    align-items: center;
}

.site-header .alignwide {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 0 40px !important;
}

.site-header img { height: 45px !important; width: auto !important; }
.site-header p { font-size: 0.9rem !important; font-style: italic !important; margin: 0 !important; color: #000 !important; }
.site-header .wp-block-navigation { margin-left: auto !important; }

/* 6. EDITORIAL CONTENT RULES (Internal Constraints) */
.wp-block-post-content,
.entry-content,
.lang-en,
.lang-es {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* THE RECURSIVE CENTERING:
   Target children of the post content AND children of language groups.
   EXCLUDE Navigation to prevent menu crash.
*/
.wp-block-post-content > :where(:not(.alignfull):not(.alignwide):not(.blunapress-scrolly-container):not(.wp-block-navigation)),
.lang-en > :where(:not(.alignfull):not(.alignwide):not(.blunapress-scrolly-container):not(.wp-block-navigation)),
.lang-es > :where(:not(.alignfull):not(.alignwide):not(.blunapress-scrolly-container):not(.wp-block-navigation)) {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Wide blocks (1000px) */
.wp-block-post-content > .alignwide,
.lang-en > .alignwide,
.lang-es > .alignwide {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* FULL WIDTH ESCAPE:
   Force scrolly and alignfull to 100vw at all costs.
*/
.alignfull,
.blunapress-scrolly-container,
.scrolly-section {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 7. FOOTER SPACING */
footer, .wp-block-template-part-footer {
    margin-top: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 60px !important;
    background: #ffffff !important;
    border-top: 1px solid #eee;
    position: relative;
    z-index: 30; /* Higher than hero (z-index: 1) and same layer as white-content-box (z-index: 20) */
}

/* 8. MOBILE OPTIMIZATION (iPhone 16 Pro Max & General Mobile) */
@media (max-width: 768px) {
    /* Reduce Header Height */
    header.site-header, .site-header {
        height: 60px !important;
    }
    
    .site-header .alignwide {
        padding: 0 15px !important;
    }

    .site-header img { 
        height: 25px !important; 
    }

    .site-header p {
        display: none !important;
    }

    /* Adjust Hero for Mobile */
    .fixed-hero-base,
    .wp-block-cover.fixed-hero-base {
        top: 60px !important;
        height: 50vh !important;
    }

    .hero-text-area,
    .wp-block-cover.fixed-hero-base .wp-block-cover__inner-container,
    .hero-spacer {
        height: 50vh !important;
    }

    .hero-text-area h1,
    .wp-block-cover.fixed-hero-base .wp-block-post-title {
        font-size: 1.8rem !important;
    }

    /* GLOBAL MOBILE PADDING (Force text away from screen edges) */
    .white-content-box,
    .wp-block-post-content,
    .entry-content,
    .lang-en,
    .lang-es,
    .inner-constrained {
        padding-left: 25px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .white-content-box {
        padding-top: 30px !important;
    }

    /* Tighten Typography (Fixing the "High Space" issue) */
    body, p, li {
        font-size: 1rem !important; 
        line-height: 1.4 !important; /* Tighter line spacing */
    }

    h1, h2, h3 {
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
        letter-spacing: -0.02em !important;
    }

    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.3rem !important; }

    /* Shrink Footer for Mobile */
    footer, .wp-block-template-part-footer {
        padding-top: 50px !important;
        padding-bottom: 30px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    footer p, 
    .wp-block-template-part-footer p {
        font-size: 0.75rem !important; /* Smaller copyright */
        line-height: 1.2 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #999;
    }
}