/* Mobile viewport height fix for iOS and other mobile browsers */

:root {
    --vh: 1vh; /* Default, will be updated by JS */
}

/* Fix full-height sections on mobile browsers */
@media (max-width: 768px) {
    .hero {
        height: calc(100 * var(--vh)) !important;
        min-height: calc(100 * var(--vh)) !important;
    }

    /* Fix modal heights on mobile */
    .modal-content {
        max-height: calc(90 * var(--vh));
    }
    
    /* Fix menu height on mobile */
    .menu-items {
        height: calc(100 * var(--vh));
    }
    
    /* Fix position of fixed elements on iOS */
    .glass-header {
        position: fixed !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
      /* Improve scrolling behavior */
    html, body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        height: auto !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    /* Fix for iOS scroll bounce without breaking layout */
    html {
        position: relative !important;
        min-height: 100% !important;
    }
    
    body {
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* Make all interactive elements have a visible focus state for accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* For touch devices, only show focus on keyboard navigation */
@media (hover: none) {
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible),
    input:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible),
    select:focus:not(:focus-visible) {
        outline: none;
    }
}