/**
 * Unified Header Gradient with Safe Area Support
 * Creates ONE seamless gradient from device safe area through address bar
 * Path: /assets/css/customer-header-gradient.css
 */

/* ==========================================================================
   CSS Variables for Gradient Colors
   ========================================================================== */
:root {
    /* Gradient colors */
    --header-gradient-start: #003d7a; /* Dark blue */
    --header-gradient-end: #00a7e1;   /* Light blue (Quickie brand) */
    
    /* Safe area variables with fallbacks */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* iOS 11.0-11.2 fallback using constant() */
    --safe-area-top-fallback: constant(safe-area-inset-top);
    
    /* Header heights for gradient calculation */
    --address-bar-height: 92px;
    --page-header-height: 96px;
}

/* ==========================================================================
   Unified Gradient Background on Body
   ========================================================================== */

/* Single gradient that covers safe area + address bar as one unit */
body {
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    
    /* Height covers safe area + address bar/page header */
    height: calc(var(--safe-area-top) + var(--address-bar-height));
    
    /* Unified gradient from top of viewport through address bar */
    background: linear-gradient(
        180deg,
        var(--header-gradient-start) 0%,
        var(--header-gradient-start) calc(var(--safe-area-top) * 0.4),
        var(--header-gradient-end) calc(var(--safe-area-top) + var(--address-bar-height))
    );
    
    /* High z-index to be above body but below header content */
    z-index: 9998;
    pointer-events: none;
    
    /* GPU acceleration for smooth performance */
    transform: translateZ(0);
    will-change: transform;
}

/* iOS 11.0-11.2 compatibility */
@supports (top: constant(safe-area-inset-top)) {
    body::before {
        height: calc(constant(safe-area-inset-top) + var(--address-bar-height));
        background: linear-gradient(
            180deg,
            var(--header-gradient-start) 0%,
            var(--header-gradient-start) calc(constant(safe-area-inset-top) * 0.4),
            var(--header-gradient-end) calc(constant(safe-area-inset-top) + var(--address-bar-height))
        );
    }
}

/* Page header variant (for inner pages) */
body.page-with-header::before,
body:not(.homepage)::before {
    height: calc(var(--safe-area-top) + var(--page-header-height));
    background: linear-gradient(
        180deg,
        var(--header-gradient-start) 0%,
        var(--header-gradient-start) calc(var(--safe-area-top) * 0.4),
        var(--header-gradient-end) calc(var(--safe-area-top) + var(--page-header-height))
    );
}

/* ==========================================================================
   Mobile Header Container
   ========================================================================== */

.mobile-header {
    /* Position relative to contain gradient and allow natural flow */
    position: relative;
    z-index: 10000; /* Match header.php for consistency */
}

/* ==========================================================================
   Address Bar Gradient Integration
   ========================================================================== */

.address-bar {
    /* Transparent to show unified gradient */
    background: transparent !important;
    
    /* Above gradient but allow interaction */
    position: relative;
    
    /* Maintain text readability */
    color: white !important;
    
    /* Safe area padding with gradient-aware adjustments */
    padding-top: max(40px, calc(12px + var(--safe-area-top))) !important;
}

/* iOS 11.0-11.2 compatibility for address bar */
@supports (padding: constant(safe-area-inset-top)) {
    .address-bar {
        padding-top: max(40px, calc(12px + constant(safe-area-inset-top))) !important;
    }
}

/* Ensure all address bar child elements maintain white color for readability */
.address-bar .address-content,
.address-bar .address-details,
.address-bar .address-label,
.address-bar .address-text,
.address-bar .address-arrow i,
.address-bar .location-icon i {
    color: white !important;
}

/* Adjust location icon and arrow backgrounds for gradient */
.address-bar .location-icon,
.address-bar .address-arrow {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.address-bar .location-icon:hover,
.address-bar .address-arrow:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ==========================================================================
   Page Header Gradient Integration (for inner pages)
   ========================================================================== */

.page-header {
    /* Transparent to show unified gradient */
    background: transparent !important;
    
    /* Above gradient but allow interaction */
    position: relative;
    
    /* Maintain text readability */
    color: white !important;
    
    /* Safe area padding with gradient-aware adjustments */
    padding-top: max(40px, calc(12px + var(--safe-area-top))) !important;
    
    /* Subtle border using gradient-compatible color */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* iOS 11.0-11.2 compatibility for page header */
@supports (padding: constant(safe-area-inset-top)) {
    .page-header {
        padding-top: max(40px, calc(12px + constant(safe-area-inset-top))) !important;
    }
}

/* Page header text elements */
.page-header .page-title,
.page-header .back-button {
    color: white !important;
}

.page-header .back-button {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.page-header .back-button:hover,
.page-header .back-button:active {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ==========================================================================
   WebView-specific Gradient Adjustments
   ========================================================================== */

body.webview::before {
    /* Ensure gradient works in WebView with fallback height */
    height: calc(max(40px, var(--safe-area-top)) + var(--address-bar-height));
}

body.webview .address-bar,
body.webview .page-header {
    /* Transparent background to show gradient */
    background: transparent !important;
}

/* ==========================================================================
   Search Container Compatibility
   ========================================================================== */

/* Ensure search container doesn't interfere with gradient */
.search-container {
    /* White background to separate from gradient area */
    background: #ffffff !important;
    position: relative;
    z-index: 10; /* Proper stacking within header */
    
    /* Minimal styling for clean separation */
    margin-top: 0;
    box-shadow: none !important;
    border: none !important;
    padding: 0 18px;
}

/* ==========================================================================
   Device-specific Adjustments
   ========================================================================== */

/* iPhone X and newer (with notch) */
@supports (padding: env(safe-area-inset-top)) {
    @media only screen 
        and (device-width: 375px) 
        and (device-height: 812px) 
        and (-webkit-device-pixel-ratio: 3),
        only screen 
        and (device-width: 414px) 
        and (device-height: 896px) 
        and (-webkit-device-pixel-ratio: 2),
        only screen 
        and (device-width: 414px) 
        and (device-height: 896px) 
        and (-webkit-device-pixel-ratio: 3),
        only screen 
        and (device-width: 390px) 
        and (device-height: 844px) 
        and (-webkit-device-pixel-ratio: 3),
        only screen 
        and (device-width: 428px) 
        and (device-height: 926px) 
        and (-webkit-device-pixel-ratio: 3) {
        
        /* Optimized gradient for notched devices */
        body::before {
            /* Smoother gradient transition for larger safe areas */
            background: linear-gradient(
                180deg,
                var(--header-gradient-start) 0%,
                var(--header-gradient-start) calc(var(--safe-area-top) * 0.3),
                var(--header-gradient-end) calc(var(--safe-area-top) + var(--address-bar-height))
            );
        }
    }
}

/* Android devices with display cutouts */
@media screen and (min-aspect-ratio: 37/18) {
    body::before {
        /* Adjust gradient for Android cutout devices */
        background: linear-gradient(
            180deg,
            var(--header-gradient-start) 0%,
            var(--header-gradient-start) 20px,
            var(--header-gradient-end) calc(20px + var(--address-bar-height))
        );
    }
}

/* ==========================================================================
   Landscape Orientation Support
   ========================================================================== */

@media (orientation: landscape) {
    body::before {
        /* Adjust gradient height for landscape */
        height: calc(var(--safe-area-top) + 80px);
        background: linear-gradient(
            180deg,
            var(--header-gradient-start) 0%,
            var(--header-gradient-start) calc(var(--safe-area-top) * 0.3),
            var(--header-gradient-end) calc(var(--safe-area-top) + 80px)
        );
    }
    
    /* iOS 11.0-11.2 landscape compatibility */
    @supports (top: constant(safe-area-inset-top)) {
        body::before {
            height: calc(constant(safe-area-inset-top) + 80px);
            background: linear-gradient(
                180deg,
                var(--header-gradient-start) 0%,
                var(--header-gradient-start) calc(constant(safe-area-inset-top) * 0.3),
                var(--header-gradient-end) calc(constant(safe-area-inset-top) + 80px)
            );
        }
    }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* Reduce gradient complexity on low-end devices */
@media (prefers-reduced-motion: reduce) {
    body::before {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body::before {
        /* Stronger gradient for better contrast */
        background: linear-gradient(
            180deg,
            var(--header-gradient-start) 0%,
            var(--header-gradient-start) calc(var(--safe-area-top) * 0.6),
            var(--header-gradient-end) calc(var(--safe-area-top) + var(--address-bar-height))
        );
    }
    
    /* Increase text contrast */
    .address-bar,
    .page-header {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
}

/* Dark mode adjustments (if needed in future) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Darker gradient for dark mode */
        --header-gradient-start: #002547;
        --header-gradient-end: #005a8a;
    }
}