/* Safari-specific fixes for the about page hero section */
@supports (-webkit-touch-callout: none) {
    /* General Safari fixes */
    html, body {
        overflow-x: hidden;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    section, div {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    /* Fix for Safari hero section overflow */
    .about-hero {
        position: relative;
        overflow: hidden; /* Prevent content from overflowing */
        width: 100%;
        box-sizing: border-box;
        padding-top: 200px !important;
        padding-bottom: 100px !important;
        display: flex; /* Use flexbox for better control */
        flex-direction: column;
        align-items: center;
    }
    
    .about-hero .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .about-hero h1 {
        width: 100%;
        font-size: 2.8rem !important; /* Slightly smaller font on Safari */
        word-break: keep-all; /* Prevent unwanted word breaks */
        white-space: normal;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .about-hero p {
        width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.3rem !important;
        text-align: center;
    }
    
    /* Fix for Safari on MacBook specifically */
    @media screen and (min-width: 1024px) and (max-width: 1440px) {
        .about-hero {
            padding-top: 180px !important;
            padding-bottom: 80px !important;
        }
        
        .about-hero h1 {
            font-size: 2.6rem !important;
        }
        
        .about-hero p {
            font-size: 1.2rem !important;
        }
    }
    
    /* Additional fix for Safari on very large screens */
    @media screen and (min-width: 1441px) {
        .about-hero h1 {
            max-width: 90%;
        }
    }
    
    /* Mobile Safari fix */
    @media screen and (max-width: 767px) {
        .about-hero {
            padding-top: 150px !important;
            padding-bottom: 60px !important;
        }
        
        .about-hero h1 {
            font-size: 2.2rem !important;
        }
        
        .about-hero p {
            font-size: 1.1rem !important;
        }
    }
    
    /* Fix for hero section in all pages for Safari */
    .hero-section, .hero {
        overflow: hidden !important;
        width: 100% !important;
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    .hero-content {
        width: 100% !important;
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Fix for PWA banner in Safari */
    .pwa-banner {
        -webkit-transform: translateX(-50%) translateY(20px) !important;
        transform: translateX(-50%) translateY(20px) !important;
    }
    
    /* Fix for Safari form display issues */
    .form-group input, 
    .form-group select, 
    .form-group textarea {
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 4px !important;
    }
    
    /* Fix Safari flexbox issues */
    .row {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    }
    
    /* Fix Safari sticky positioning */
    .sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
    
    /* Enhanced Safari fixes for index.php hero section */
    .hero .container {
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
        -webkit-align-items: center !important;
        align-items: center !important;
    }
    
    .hero-content h1 {
        -webkit-transform: none !important;
        transform: none !important;
        position: relative !important;
        width: 100% !important;
        max-width: 600px !important;
    }
    
    .hero-content p {
        -webkit-transform: none !important;
        transform: none !important;
        position: relative !important;
        width: 100% !important;
        max-width: 600px !important;
    }
    
    .hero-clock {
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
        max-width: 500px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Mobile Safari specific fixes for hero */
    @media screen and (max-width: 992px) {
        .hero .container {
            -webkit-flex-direction: column !important;
            flex-direction: column !important;
            padding-top: 80px !important;
        }
        
        .hero-content {
            -webkit-align-items: center !important;
            align-items: center !important;
            text-align: center !important;
            max-width: 100% !important;
        }
        
        .hero-clock {
            position: relative !important;
            max-width: 90% !important;
            margin: 20px auto !important;
        }
    }
}