/* 
 * Hero Section Styles
 * Full-width hero image for all pages
 * With size variations based on page type
 */

/* Hero Container - Full Width */
.hero-section {
    position: relative;
    width: 100%;
    background-color: rgba(0, 0, 0, 1); /* Darker background to match reference */
    overflow: visible; /* Allow image to extend beyond container */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 9rem; /* Default top padding for all pages */
    padding-bottom: 0; /* Default: no padding bottom */
    margin-bottom: 2rem;
    z-index: 1; /* Ensure it's below the header */
    margin-top: 0;
}

.hero-hosting {
    padding-top: 11rem;
    margin-bottom: 0.5rem;
}

/* Post meta container for Best Green Web Hosting post */
.post-meta-container {
    margin-bottom: 2rem;
}

.post-meta-container .entry-meta {
    display: flex;
    justify-content: center;
}

/* Standard height and padding for pages */
.page:not(.home) .hero-section {
    min-height: 200px; /* Ensure consistent height across pages and posts */
    padding-bottom: 0rem; /* No bottom padding for single posts and pages */
}

/* Homepage hero spacing */
.home .hero-section {
    padding-top: 7rem; 
    padding-bottom: 0rem;
    min-height: 600px; /* Add explicit min-height to prevent layout shifts */
    height: auto; /* Allow expansion if needed */
}

/* Hero Background - Base Styles */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
}

/* Homepage specific background color */
.home .hero-bg {
    background-color: rgba(0, 0, 0, 1);
}

/* SVG background container for all pages except homepage */
.hero-bg-svg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px; /* Fixed height for consistency across all pages */
    z-index: 0;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .hero-bg-svg-container {
        height: 100%; /* Full height on mobile to ensure coverage */
        min-height: 500px; /* Maintain minimum height */
        width: 150%; /* Extend beyond screen width to ensure full coverage */
        left: -25%; /* Center the wider SVG */
    }
}

/* Styling for the inlined SVG */
.hero-bg-svg {
    position: absolute;
    top: 20px; /* Shifted up by 30px from the top to match original positioning */
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5; /* Adjust opacity to control SVG visibility */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

/* Hero Content */
.hero-content {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: var(--site-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0rem var(--site-padding) 2rem;
    color: rgba(252, 252, 252, 0.85);
    z-index: 2;
}

/* Page Icon Styles */
.page-icon {
    display: flex;
    justify-content: center;
}

.page-icon__image {
    height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Two-column layout for homepage hero */
.hero-content-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--site-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 0;
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    color: rgba(252, 252, 252, 0.85);
    z-index: 2;
    box-sizing: border-box;
}

.hero-content-column--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-top: 1rem;
    padding-bottom: 10rem;
    min-height: 400px; /* Add explicit min-height to prevent layout shifts */
}

.hero-content-column--image {
    position: relative;
    display: flex;
    align-items: flex-end; /* Align image to bottom of container */
    justify-content: center; /* Center horizontally within column */
    overflow: visible;
    max-width: 100%; /* Ensure container doesn't exceed column width */
}

/* Homepage specific image column alignment */
.home .hero-content-column--image {
    justify-content: flex-end; /* Align to right side but within constraints */
    padding-right: 0; /* Remove any potential right padding */
}

/* Hero image styling - base styles for all pages */
.hero-image {
    width: auto; /* Allow natural width based on height */
    height: auto; /* Maintain aspect ratio */
    max-height: 720px; /* Match the original SVG height */
    z-index: 3;
    margin-bottom: 0; /* No negative margin needed with cropped image */
}

/* Homepage specific hero image sizing */
.home .hero-image {
    width: 100%; /* Base width */
    max-width: 595px; /* Original width matching the SVG dimensions */
    height: auto; /* Maintain aspect ratio */
    margin-left: auto; /* Push to right edge of container */
    /* Removed redundant transform property */
    /* Simplified performance properties */
    will-change: transform; /* Hint to browser to create a compositor layer */
}

/* No need for homepage-specific overrides since image is pre-cropped */

/* Single post specific hero spacing - CONSOLIDATED with earlier rule */

/* Single post hero content max-width for desktop */
@media (min-width: 768px) {
    .single .hero-content {
        max-width: 1000px;
        margin: 0 auto;
    }
}

/* Hero Title - For hero sections with dark backgrounds */
.hero-title {
    font-size: clamp(2.1rem, 7vw, 3.5rem);
    margin-bottom: 0.75rem;
    color: rgba(252, 252, 252, 1); /* Light text for dark backgrounds */
    text-shadow: none;
    line-height: 1.2;
    /* Optimize for LCP performance */
    min-height: 3.5rem; /* Reserve space to prevent layout shifts */
    font-display: swap; /* Ensure text renders even if font is still loading */
    contain: layout; /* Optimize rendering performance */
    will-change: transform; /* Hint for browser optimization */
}

/* Adjust spacing when hero title follows category pill */
.hero-categories + .hero-title {
    margin-top: 1rem; /* Increased negative margin to pull the title much closer to the pill */
}

/* Larger hero title for homepage */
.home .hero-title {
    font-size: clamp(2.25rem, 2rem + 3vw, 4.2rem);
    margin-bottom: 1rem;
    line-height: 1.1;
}

/* Text emphasis for hero titles */
.gradient-text {
    display: inline-block;
    font-weight: 800;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}

/* Hero Subtitle - Smaller by default */
.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    max-width: 800px;
    margin-bottom: 1.5rem;
    text-shadow: none;
    line-height: 1.4;
}

/* Larger hero subtitle for homepage */
.home .hero-subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    margin-bottom: 2rem;
}

/* Category pill */
.hero-categories {
    margin-bottom: 0;
}

.category-pill {
    display: inline-block;
    background-color: var(--c-primary, #00c481);
    color: #000;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    text-decoration: none;
    margin-bottom: 0;
    text-shadow: none;
}

.category-pill:hover {
    background-color: #00b070;
    color: #000;
}

/* Hero excerpt */
.hero-excerpt {
    font-size: clamp(1.2rem, 3vw, 1.35rem);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    max-width: 880px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: none;
}

/* Hero Buttons Container */
.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/**
 * Hero Buttons and Text Styling Utilities
 */
/* Hero Button - Specific adjustments only */
.hero-button,
.hero-buttons .btn-secondary {
    padding: 0.75rem 2rem; /* Slightly larger padding than default */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 8rem;
    }
    
    /* Convert two-column to single column on mobile */
    .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        /* Keep the site's standard horizontal padding */
        padding-left: var(--site-padding);
        padding-right: var(--site-padding);
    }
    
    .hero-content-column--text {
        order: 1;
        text-align: center;
        padding-bottom: 2rem;
    }
    
    .hero-content-column--image {
        order: 2;
        margin-top: 0rem;
    }
    
    .hero-image {
        transform: translateY(15%);
        max-width: 90%;
        margin-bottom: -2rem;
    }
    
    .home .hero-image {
        transform: translateY(10%);
        max-width: 85%;
        margin-left: auto;
        margin-right: auto; /* Center on mobile */
        margin-bottom: -2.5rem;
    }
    
    /* Center buttons on mobile */
    .hero-content-column--text .hero-buttons {
        justify-content: center;
    }
    
    .home .hero-section {
        padding-bottom: 3rem;
    }
    
    .page:not(.home) .hero-section {
        padding-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding-top: 7rem;
    }
    
    .home .hero-section {
        padding-bottom: 4rem;
    }
    
    .page:not(.home) .hero-section {
        padding-bottom: 2rem;
    }
    
    .post-type-archive-toolkit .hero-section {
        padding-bottom: 2rem;
    }
    
    .hero-content {
        padding: 1rem;
    }
    
    .hero-buttons {
        justify-content: center;
        width: 100%;
    }
}