/* Additional Mobile Improvements */

/* Better mobile spacing and font sizing */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .profile-container {
        margin-bottom: 0;
    }
    
    section {
        padding: 25px 15px;
        margin: 12px 8px;
    }
    
    /* Make sure content doesn't get hidden under fixed nav */
    section:target {
        scroll-margin-top: 60px;
    }
    
    /* Improved mobile menu */
    nav {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: -webkit-sticky; /* iOS support */
    }
    
    .mobile-nav-toggle {
        top: 5px;
    }
    
    /* Better tap targets and spacing */
    #kontakt p {
        padding: 8px 0;
    }
    
    #kontakt a {
        display: inline-block;
        padding: 5px 0;
    }
    
    /* Adjust profile image to better fit mobile */
    .profile-image-container {
        max-width: 100%;
    }
    
    /* Fix overflowing text */
    p, li {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    header {
        padding: 30px 15px;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    header p {
        font-size: 0.9rem;
    }
    
    .profile-content p {
        font-size: 0.95rem;
    }
    
    /* Ensure menu doesn't cover too much screen */
    nav.active ul {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* Fix iOS scrolling issues with fixed elements */
@supports (-webkit-touch-callout: none) {
    nav {
        position: sticky;
    }
}

/* Add smooth animation to menu to prevent jarring experience */
nav ul {
    transition: all 0.3s ease;
}

/* Improve scrolling behavior */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px; /* Match the height of your fixed navbar */
}