/* Custom CSS for clean, professional styling */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}


/* Starry background for hero */
.bg-stars {
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
}

/* Clean focus states and transitions */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #F59E0B;
    outline-offset: 2px;
}

/* Consistent transitions */
a, button, input, textarea, select {
    transition: all 0.2s ease;
}

/* Hover states */
a:hover {
    color: #1E3A8A;
}

button:hover {
    transform: translateY(-1px);
}

/* Navigation styles */
nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-link {
    position: relative;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: #F59E0B;
    transition: width 0.2s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Mobile navigation */
.mobile-nav-link {
    transition: background-color 0.2s ease;
}

.mobile-nav-link:hover {
    background-color: rgba(30, 58, 138, 0.05);
}

/* Mobile menu frosted glass effect */
#mobile-menu > div {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* Contact form enhancements */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #1E3A8A;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #F59E0B;
}


/* Enhanced typography */
body {
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.font-magical {
    line-height: 1.3;
    letter-spacing: -0.02em;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    letter-spacing: -0.01em;
}

p {
    line-height: 1.7;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Ensure readable text sizes */
    body {
        font-size: 16px;
    }
    
    /* Better mobile typography */
    .font-magical {
        line-height: 1.3;
    }
    
    /* Larger touch targets */
    button, 
    a[role="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better form inputs on mobile */
    input, 
    textarea, 
    select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
    }
    
    /* Mobile spacing adjustments */
    section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Better mobile hero */
    #hero {
        padding: 80px 16px 60px;
    }
    
    /* Improved mobile navigation */
    nav {
        padding: 0 16px;
    }
    
    /* Better mobile cards */
    .grid {
        gap: 16px;
    }
    
    /* Mobile headshot adjustments */
    #about .grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    #about img {
        width: 200px;
        height: 200px;
    }
}

/* Print styles */
@media print {
    nav, footer {
        display: none;
    }
    
    body {
        color: black;
        background: white;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}