/**
 * Hero Header Component
 * =====================
 * Fullwidth header with featured image, overlay, and text
 * 
 * Uses Ensemble Designer CSS variables for consistent theming
 * 
 * @package Ensemble_Theme
 * @since 2.10.0
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

.et-hero-header {
    --hero-height-small: 300px;
    --hero-height-medium: 450px;
    --hero-height-large: 600px;
    --hero-height-full: 100vh;
    
    --hero-overlay-dark: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.5));
    --hero-overlay-light: rgba(255, 255, 255, var(--hero-overlay-opacity, 0.5));
    --hero-overlay-primary: rgba(var(--ensemble-primary-rgb, 37, 99, 235), var(--hero-overlay-opacity, 0.5));
    
    --hero-text-color-dark: #ffffff;
    --hero-text-color-light: var(--ensemble-text, #1a1a1a);
    
    --hero-title-size: clamp(2rem, 5vw, 3.5rem);
    --hero-subtitle-size: clamp(1rem, 2vw, 1.25rem);
    
    --hero-transition: all 0.3s ease;
}

/* ============================================
   BASE STRUCTURE
   ============================================ */

.et-hero-header {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Height variants */
.et-hero-header--small {
    min-height: var(--hero-height-small);
}

.et-hero-header--medium {
    min-height: var(--hero-height-medium);
}

.et-hero-header--large {
    min-height: var(--hero-height-large);
}

.et-hero-header--full {
    min-height: var(--hero-height-full);
}

/* ============================================
   BACKGROUND & IMAGE
   ============================================ */

.et-hero-header__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.et-hero-header__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Parallax effect */
.et-hero-header--parallax .et-hero-header__image {
    background-attachment: fixed;
}

@media (max-width: 768px) {
    /* Disable parallax on mobile for performance */
    .et-hero-header--parallax .et-hero-header__image {
        background-attachment: scroll;
    }
}

/* No image fallback */
.et-hero-header--no-image .et-hero-header__background {
    background-color: var(--ensemble-surface, #f0f0f0);
}

/* ============================================
   OVERLAY
   ============================================ */

.et-hero-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Dark overlay */
.et-hero-header--overlay-dark .et-hero-header__overlay {
    background-color: var(--hero-overlay-dark);
}

/* Light overlay */
.et-hero-header--overlay-light .et-hero-header__overlay {
    background-color: var(--hero-overlay-light);
}

/* Primary color overlay */
.et-hero-header--overlay-primary .et-hero-header__overlay {
    background-color: var(--hero-overlay-primary);
}

/* Gradient overlay (dark from bottom) */
.et-hero-header--overlay-gradient .et-hero-header__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--hero-overlay-opacity, 0.7)) 0%,
        rgba(0, 0, 0, calc(var(--hero-overlay-opacity, 0.7) * 0.5)) 40%,
        transparent 100%
    );
}

/* No overlay */
.et-hero-header--overlay-none .et-hero-header__overlay {
    display: none;
}

/* ============================================
   CONTENT
   ============================================ */

.et-hero-header__content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    width: 100%;
    padding: var(--et-space-lg, 2rem);
}

.et-hero-header__content .et-container {
    width: 100%;
    max-width: var(--et-container-width, 1200px);
    margin: 0 auto;
    display: flex;
}

/* Vertical position */
.et-hero-header--position-top .et-hero-header__content .et-container {
    align-items: flex-start;
    padding-top: var(--et-space-xl, 3rem);
}

.et-hero-header--position-center .et-hero-header__content .et-container {
    align-items: center;
}

.et-hero-header--position-bottom .et-hero-header__content .et-container {
    align-items: flex-end;
    padding-bottom: var(--et-space-xl, 3rem);
}

/* ============================================
   TEXT STYLING
   ============================================ */

.et-hero-header__text {
    max-width: 900px;
}

/* Text alignment */
.et-hero-header--align-left .et-hero-header__content .et-container {
    justify-content: flex-start;
}

.et-hero-header--align-left .et-hero-header__text {
    text-align: left;
}

.et-hero-header--align-center .et-hero-header__content .et-container {
    justify-content: center;
}

.et-hero-header--align-center .et-hero-header__text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.et-hero-header--align-right .et-hero-header__content .et-container {
    justify-content: flex-end;
}

.et-hero-header--align-right .et-hero-header__text {
    text-align: right;
    margin-left: auto;
}

/* Title */
.et-hero-header__title {
    font-family: var(--ensemble-font-heading, system-ui, sans-serif);
    font-size: var(--hero-title-size);
    font-weight: var(--ensemble-heading-weight, 700);
    line-height: 1.2;
    margin: 0 0 0.5em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Subtitle */
.et-hero-header__subtitle {
    font-family: var(--ensemble-font-body, system-ui, sans-serif);
    font-size: var(--hero-subtitle-size);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Text colors based on overlay */
.et-hero-header--overlay-dark .et-hero-header__title,
.et-hero-header--overlay-dark .et-hero-header__subtitle,
.et-hero-header--overlay-gradient .et-hero-header__title,
.et-hero-header--overlay-gradient .et-hero-header__subtitle,
.et-hero-header--overlay-primary .et-hero-header__title,
.et-hero-header--overlay-primary .et-hero-header__subtitle {
    color: var(--hero-text-color-dark);
}

.et-hero-header--overlay-light .et-hero-header__title,
.et-hero-header--overlay-light .et-hero-header__subtitle {
    color: var(--hero-text-color-light);
}

/* No overlay - auto detect based on image brightness (fallback dark) */
.et-hero-header--overlay-none .et-hero-header__title,
.et-hero-header--overlay-none .et-hero-header__subtitle {
    color: var(--hero-text-color-dark);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* No image fallback text */
.et-hero-header--no-image .et-hero-header__title,
.et-hero-header--no-image .et-hero-header__subtitle {
    color: var(--ensemble-text, #1a1a1a);
    text-shadow: none;
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

.et-hero-header__scroll {
    position: absolute;
    bottom: var(--et-space-lg, 2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.et-hero-header__scroll-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    color: #ffffff;
    cursor: pointer;
    transition: var(--hero-transition);
    animation: et-hero-bounce 2s infinite;
}

.et-hero-header__scroll-indicator:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(2px);
}

.et-hero-header__scroll-indicator svg {
    width: 24px;
    height: 24px;
}

/* Light overlay scroll indicator */
.et-hero-header--overlay-light .et-hero-header__scroll-indicator {
    background: rgba(0, 0, 0, 0.1);
    color: var(--ensemble-text, #1a1a1a);
}

.et-hero-header--overlay-light .et-hero-header__scroll-indicator:hover {
    background: rgba(0, 0, 0, 0.2);
}

@keyframes et-hero-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .et-hero-header {
        --hero-title-size: clamp(1.75rem, 4vw, 2.5rem);
        --hero-subtitle-size: clamp(0.95rem, 1.8vw, 1.125rem);
    }
}

@media (max-width: 768px) {
    .et-hero-header {
        --hero-height-small: 250px;
        --hero-height-medium: 350px;
        --hero-height-large: 450px;
    }
    
    .et-hero-header__content {
        padding: var(--et-space-md, 1.5rem);
    }
    
    .et-hero-header__text {
        max-width: 100%;
    }
    
    /* Center text on mobile for better readability */
    .et-hero-header--align-left .et-hero-header__content .et-container,
    .et-hero-header--align-right .et-hero-header__content .et-container {
        justify-content: center;
    }
    
    .et-hero-header--align-left .et-hero-header__text,
    .et-hero-header--align-right .et-hero-header__text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .et-hero-header {
        --hero-height-small: 200px;
        --hero-height-medium: 300px;
        --hero-height-large: 400px;
    }
    
    .et-hero-header__scroll-indicator {
        width: 40px;
        height: 40px;
    }
    
    .et-hero-header__scroll-indicator svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   PAGE INTEGRATION
   ============================================ */

/* Remove default page header when using hero */
.et-page--hero .et-page-header {
    display: none;
}

/* Adjust content spacing after hero */
.et-page--hero .et-page-content {
    padding-top: var(--et-space-xl, 3rem);
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

[data-mode="dark"] .et-hero-header--no-image .et-hero-header__background,
.dark-mode .et-hero-header--no-image .et-hero-header__background {
    background-color: var(--ensemble-surface, #2c2c2c);
}

[data-mode="dark"] .et-hero-header--no-image .et-hero-header__title,
[data-mode="dark"] .et-hero-header--no-image .et-hero-header__subtitle,
.dark-mode .et-hero-header--no-image .et-hero-header__title,
.dark-mode .et-hero-header--no-image .et-hero-header__subtitle {
    color: var(--ensemble-text, #e0e0e0);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .et-hero-header {
        min-height: auto !important;
        page-break-inside: avoid;
    }
    
    .et-hero-header__overlay,
    .et-hero-header__scroll {
        display: none !important;
    }
    
    .et-hero-header__title,
    .et-hero-header__subtitle {
        color: #000 !important;
        text-shadow: none !important;
    }
}