/**
 * Simple Hero Manager - Frontend Styles
 * 
 * This CSS file handles all the styling for hero sections created with the
 * Simple Hero Manager plugin. It's designed to work with any WordPress theme
 * and provides responsive behavior across all devices.
 * 
 * KEY FEATURES:
 * - Full image display using object-fit: contain (no cropping)
 * - Responsive heights (70vh desktop, 60vh tablet, 50vh mobile)
 * - 7 text position options with proper alignment
 * - Semi-transparent text backgrounds (50% opacity)
 * - Smooth transitions and hover effects
 * - Mobile-friendly with overlaid text that stays readable
 * 
 * BROWSER SUPPORT:
 * - Chrome/Edge: Full support
 * - Firefox: Full support
 * - Safari: Full support
 * - IE11: Partial support (object-fit fallback needed)
 * 
 * @package Simple_Hero_Manager
 * @version 1.0.0
 */

/* ==========================================================================
   THEME COMPATIBILITY FIXES
   Fixes for common theme issues with shortcode rendering
   ========================================================================== */

/* Remove margins from paragraph containing hero shortcode */
p .shm-hero-container {
    margin-top: -1.2em !important;
    margin-bottom: -1.2em !important;
}
/* Also target the paragraph directly if it only contains the hero */
p:only-child .shm-hero-container {
    display: block;
}
/* Nuclear option - remove space above/below hero regardless of wrapper */
.shm-hero-container {
    display: block !important;
    margin-top: -1.2em !important;
    margin-bottom: -1.2em !important;
}
/* Pull hero outside of typical theme content padding (60px common) */
.shm-hero-container {
    margin-left: -60px !important;
    margin-right: -60px !important;
    width: calc(100% + 120px) !important;
    max-width: none !important;
}
/* Handle theme's increased padding on tablet sizes */
@media (min-width: 700px) and (max-width: 958px) {
    .shm-hero-container {
        margin-left: -120px !important;
        margin-right: -120px !important;
        width: calc(100% + 240px) !important;
    }
}
/* ==========================================================================
   HERO CONTAINER
   The outer wrapper that holds everything together
   ========================================================================== */

.shm-hero-container {
    position: relative;
    width: 100%;
    height: 70vh; /* 70% of viewport height on desktop */
    overflow: hidden;
    margin: 0;
    padding: 0;
    /* Background color set via inline style (for letterboxing) */
}

/* ==========================================================================
   HERO IMAGE
   The background image with contain to show full image
   ========================================================================== */

.shm-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2; /* Above the blur layer */
    /* Add this: */
    background-color: transparent;
    pointer-events: none;
}
.shm-hero-image-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(15px) brightness(0.6); /* Less blur, much lighter */
    z-index: 1;
    transform: scale(1.02); /* Less scale */
}

.shm-hero-image-blur::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(175, 16, 42, 0.4); /* Brand maroon overlay at 40% */
    z-index: 2;
}

/* ==========================================================================
   CONTENT WRAPPER
   Positions the text overlay on top of the image
   ========================================================================== */

.shm-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 10;
    padding: 20px;
    box-sizing: border-box;
}

/* ==========================================================================
   TEXT POSITIONING CLASSES
   These classes control where the text appears on the hero
   Format: shm-position-{horizontal}-{vertical}
   ========================================================================== */

/* Center - Full Width */
.shm-position-center-center {
    justify-content: center;
    align-items: center;
}

/* Left Side */
.shm-position-left-center {
    justify-content: flex-start;
    align-items: center;
}

/* Right Side */
.shm-position-right-center {
    justify-content: flex-end;
    align-items: center;
}

/* Top Third - Full Width */
.shm-position-center-top {
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
}

/* Bottom Third - Full Width */
.shm-position-center-bottom {
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 60px;
}

/* Bottom Left Corner */
.shm-position-left-bottom {
    justify-content: flex-start;
    align-items: flex-end;
}

/* Bottom Right Corner */
.shm-position-right-bottom {
    justify-content: flex-end;
    align-items: flex-end;
}

/* ==========================================================================
   TEXT WRAPPER
   The semi-transparent box that contains the text
   ========================================================================== */

.shm-hero-text-wrapper {
    padding: 30px 40px;
    border-radius: 4px;
    max-width: 800px;
    text-align: center;
    /* Background color and text color set via inline style */
    /* Background uses rgba with 50% opacity */
}

/* Adjust max-width for side positions */
.shm-position-left-center .shm-hero-text-wrapper,
.shm-position-right-center .shm-hero-text-wrapper,
.shm-position-left-bottom .shm-hero-text-wrapper,
.shm-position-right-bottom .shm-hero-text-wrapper {
    max-width: 500px;
}

/* Text alignment for left positions */
.shm-position-left-center .shm-hero-text-wrapper,
.shm-position-left-bottom .shm-hero-text-wrapper {
    text-align: left;
}

/* Text alignment for right positions */
.shm-position-right-center .shm-hero-text-wrapper,
.shm-position-right-bottom .shm-hero-text-wrapper {
    text-align: right;
}

/* ==========================================================================
   TEXT ELEMENTS
   Styling for headline, subheadline, and button
   ========================================================================== */

.shm-hero-headline {
    margin: 0 0 15px 0;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2;
    /* Color inherited from wrapper */
}

.shm-hero-subheadline {
    margin: 0 0 20px 0;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.5;
    /* Color inherited from wrapper */
}

/* Remove bottom margin from last text element if no button */
.shm-hero-text-wrapper > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   BUTTON
   Call-to-action button styling
   ========================================================================== */

.shm-hero-button {
    display: inline-block;
    padding: 12px 30px;
    margin-top: 10px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Background color and text color set via inline style */
}

.shm-hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.shm-hero-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   ERROR MESSAGE
   Displayed when shortcode is invalid
   ========================================================================== */

.shm-error {
    padding: 20px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
}

/* ==========================================================================
   TABLET RESPONSIVE (768px - 1024px)
   Slightly smaller hero height, adjust text sizing
   ========================================================================== */

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .shm-hero-container {
        height: 60vh; /* 60% of viewport height on tablets */
    }
    
    .shm-hero-headline {
        font-size: 2em;
    }
    
    .shm-hero-subheadline {
        font-size: 1.1em;
    }
    
    .shm-hero-text-wrapper {
        padding: 25px 35px;
    }
    
    .shm-position-center-top {
        padding-top: 40px;
    }
    
    .shm-position-center-bottom {
        padding-bottom: 40px;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE (up to 767px)
   Smallest hero height, most compact text, full-width overlay
   ========================================================================== */

@media screen and (max-width: 767px) {
    .shm-hero-container {
        height: 50vh; /* 50% of viewport height on mobile */
    }
    
    .shm-hero-content {
        padding: 15px;
    }
    
    .shm-hero-text-wrapper {
        padding: 20px 25px;
        max-width: 100%; /* Full width on mobile */
        width: 100%;
    }
    
    /* All positions become center on mobile for better readability */
    .shm-position-left-center .shm-hero-text-wrapper,
    .shm-position-right-center .shm-hero-text-wrapper,
    .shm-position-left-bottom .shm-hero-text-wrapper,
    .shm-position-right-bottom .shm-hero-text-wrapper {
        text-align: center;
        max-width: 100%;
    }
    
    .shm-hero-headline {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    
    .shm-hero-subheadline {
        font-size: 1em;
        margin-bottom: 15px;
    }
    
    .shm-hero-button {
        padding: 10px 25px;
        font-size: 0.9em;
    }
    
    .shm-position-center-top {
        padding-top: 30px;
    }
    
    .shm-position-center-bottom {
        padding-bottom: 30px;
    }
}

/* ==========================================================================
   SMALL MOBILE (up to 480px)
   Extra small screens need even more compact styling
   ========================================================================== */

@media screen and (max-width: 480px) {
    .shm-hero-container {
        height: 45vh; /* Even smaller on very small phones */
    }
    
    .shm-hero-headline {
        font-size: 1.1em;
    }
    
    .shm-hero-subheadline {
        font-size: 0.9em;
    }
    
    .shm-hero-text-wrapper {
        padding: 15px 20px;
    }
    
    .shm-hero-button {
        padding: 8px 20px;
        font-size: 0.85em;
    }
}

/* ==========================================================================
   PRINT STYLES
   Optimized for printing (if needed)
   ========================================================================== */

@media print {
    .shm-hero-container {
        height: auto;
        min-height: 400px;
        page-break-inside: avoid;
    }
    
    .shm-hero-button {
        border: 1px solid #000;
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   Improved focus states and screen reader support
   ========================================================================== */
.shm-hero-button:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
    .shm-hero-text-wrapper {
        border: 2px solid currentColor;
    }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .shm-hero-button {
        transition: none;
    }
    
    .shm-hero-button:hover {
        transform: none;
    }
}