/**
 * Global Page Banner Styles
 * 
 * Banner that appears on all pages except home page
 * - Uses page title as banner title
 * - Uses featured image as background
 * - Responsive design
 * - Consistent styling across all pages
 */

/* ==========================================
   GLOBAL PAGE BANNER
========================================== */
.global-page-banner {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: 0; /* Remove any top margin */
    width: calc(100% - 40px);
    left: 20px;
    top: 20px;
}

.global-page-banner .banner-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    background-blend-mode: multiply;
}

.global-page-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 2;
}

.global-page-banner .banner-content {
    position: relative;
    z-index: 3;
    color: var(--banner-text-color, #ffffff);
    max-width: 100%;
}

.global-page-banner .banner-title {
    /* Use H1 font settings directly from customizer */
    font-size: var(--h1-size, 48px);
    font-weight: var(--heading-font-weight, 600);
    color: var(--banner-title-color, #ffffff);
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.global-page-banner .banner-subtitle {
    /* Use body font settings directly from customizer */
    font-family: var(--body-font-family, "dm-sans", sans-serif);
    font-size: var(--body-font-size, 16px);
    font-weight: var(--body-font-weight, 400);
    color: var(--banner-subtitle-color, rgba(255, 255, 255, 0.9));
    margin: 0.5rem 0 0;
    line-height: var(--body-line-height, 1.4);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

/* Large Desktop */
@media (max-width: 1200px) {
    .global-page-banner .banner-title {
        font-size: var(--h1-size, 48px);
    }
    
    .global-page-banner .banner-subtitle {
        font-size: var(--body-font-size, 16px);
    }
}

/* Tablet */
@media (max-width: 992px) {
    .global-page-banner {
        height: 380px;
    }
    
    .global-page-banner .banner-title {
        font-size: 42px;
        letter-spacing: -0.5px;
        text-align: center;
    }
    
    .global-page-banner .banner-subtitle {
        font-size: var(--body-font-size, 16px);
    }
}


/* Small Mobile */
@media (max-width: 480px) {    
    
    .global-page-banner .banner-subtitle {
        font-size: var(--body-font-size, 16px);
    }
}

/* ==========================================
   ACCESSIBILITY & PERFORMANCE
========================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .global-page-banner .banner-background {
        background-attachment: scroll !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .global-page-banner .banner-title,
    .global-page-banner .banner-subtitle {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    }
}

/* ==========================================
   FALLBACK STYLES
========================================== */

/* When no featured image is available */
.global-page-banner .banner-background:not([style*="background-image"]) {
    background: var(--banner-fallback-bg, linear-gradient(135deg, #0f2f45 0%, #184267 100%));
}

/* Ensure text is always readable */
.global-page-banner .banner-title {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Loading state */
.global-page-banner .banner-background[style*="background-image"] {
    transition: opacity 0.3s ease;
}

/* Print styles */
@media print {
    .global-page-banner {
        height: auto;
        background: #f8f9fa !important;
        color: #333 !important;
        padding: 2rem 0;
    }
    
    .global-page-banner .banner-overlay {
        display: none;
    }
    
    .global-page-banner .banner-title {
        color: #333 !important;
        text-shadow: none !important;
        font-size: 2rem !important;
    }
}