/* ================================================
   MITHYOS SAFARI-SPECIFIC FIXES
   File: safari-fixes.css
   Purpose: Address Safari-specific layout issues
   ================================================ */

/* Safari Header Layout Fix
   Problem: Safari compresses header vertically, causing logo and tagline stacking issues
   Solution: Force adequate height and proper flexbox alignment */

/* Primary Safari Detection - Modern Method */
@supports (-webkit-appearance: none) and (not (appearance: none)) {
    
    .header-titles-wrapper {
        min-height: 80px !important;
        padding: 15px 0 !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    .header-titles {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 16px !important;
        flex-wrap: nowrap !important;
    }
    
    .site-logo.faux-heading {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
    
    .site-logo.faux-heading a {
        display: block !important;
        line-height: 1 !important;
    }
    
    .site-logo.faux-heading img {
        display: block !important;
        height: auto !important;
        max-height: 55px !important;
        width: auto !important;
        max-width: 55px !important;
        object-fit: contain !important;
    }
    
    .site-description {
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: inherit !important;
    }
}

/* Fallback Safari Detection - WebKit Method */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Only applies to WebKit browsers */
    .header-titles-wrapper:not(:root:root) {
        min-height: 78px !important;
        padding: 12px 0 !important;
    }
    
    .header-titles:not(:root:root) {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }
}

/* Safari Mobile Responsive Adjustments */
@supports (-webkit-appearance: none) and (not (appearance: none)) {
    @media (max-width: 768px) {
        .header-titles-wrapper {
            min-height: 65px !important;
            padding: 10px 0 !important;
        }
        
        .header-titles {
            gap: 12px !important;
        }
        
        .site-logo.faux-heading img {
            max-height: 45px !important;
            max-width: 45px !important;
        }
        
        .site-description {
            font-size: 13px !important;
        }
    }
    
    @media (max-width: 480px) {
        .header-titles-wrapper {
            min-height: 60px !important;
            padding: 8px 0 !important;
        }
        
        .header-titles {
            gap: 10px !important;
        }
        
        .site-logo.faux-heading img {
            max-height: 40px !important;
            max-width: 40px !important;
        }
        
        .site-description {
            font-size: 12px !important;
        }
    }
}

/* Legacy Safari Support (older versions) */
_::-webkit-full-page-media, _:future, :root .header-titles-wrapper {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    min-height: 75px !important;
    padding: 12px 0 !important;
}

_::-webkit-full-page-media, _:future, :root .header-titles {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Safari-specific flex fixes for logo alignment */
@supports (-webkit-appearance: none) {
    .header-titles-wrapper {
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }
    
    .site-logo.faux-heading {
        -webkit-flex-shrink: 0 !important;
        flex-shrink: 0 !important;
        -webkit-align-self: center !important;
        align-self: center !important;
    }
    
    .site-description {
        -webkit-flex: 1 !important;
        flex: 1 !important;
        -webkit-align-self: center !important;
        align-self: center !important;
    }
}

/* Debug mode - uncomment to visualize layout on Safari */
/*
@supports (-webkit-appearance: none) and (not (appearance: none)) {
    .header-titles-wrapper {
        border: 2px solid red !important;
    }
    .header-titles {
        border: 2px solid blue !important;
    }
    .site-logo {
        border: 2px solid green !important;
    }
    .site-description {
        border: 2px solid orange !important;
    }
}
*/