/* --- Responsive Design System --- */

/* Mobile First Base Styles */
html {
    font-size: 16px;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Typography Responsive Adjustments */
h1 {
    font-size: var(--h1-size-mobile);
}

h2 {
    font-size: var(--h2-size-mobile);
}

p {
    font-size: var(--body-size-mobile);
}

/* Mobile Navigation Styles */
.hamburger {
    display: none;
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 2rem;
        height: 2rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }

    .hamburger-line {
        width: 2rem;
        height: 0.25rem;
        background: #1e293b; /* Dark color for visibility */
        border-radius: 10px;
        transition: all 0.3s linear;
        position: relative;
        transform-origin: 1px;
    }

    .hamburger.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg);
        background: #f8fafc; /* Light color when menu is open */
    }

    .hamburger.active .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }

    .hamburger.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg);
        background: #f8fafc; /* Light color when menu is open */
    }

    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(10, 25, 41, 0.98);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(8px);
    }

    .mobile-nav.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

.mobile-nav li {
    margin: 1rem 0;
}

.mobile-nav a {
    color: var(--text-primary);
    font-size: 1.25rem;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
    padding: 0.5rem;
    background: none;
    border: none;
}

/* Card Layouts */
.card {
    width: 100%;
    margin-bottom: 1rem;
}

/* Forms */
input, select, textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
}

/* Touch-friendly Buttons */
button, .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
}

/* Responsive Tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Grid System */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Media Queries */

/* Small devices (640px and up) */
@media (min-width: 640px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: var(--h1-size-tablet);
    }

    h2 {
        font-size: var(--h2-size-tablet);
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    .mobile-nav {
        display: none;
    }

    .desktop-nav {
        display: flex;
    }

    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large devices (1024px and up) */
@media (min-width: 1024px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: var(--h1-size-desktop);
    }

    h2 {
        font-size: var(--h2-size-desktop);
    }

    p {
        font-size: var(--body-size-desktop);
    }

    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    /* Remove hover effects on touch devices */
    a:hover, button:hover {
        transform: none !important;
    }
    
    /* Increase touch targets */
    nav a, button {
        padding: 0.75rem 1rem;
    }
}

/* Landscape Mode */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-nav {
        overflow-y: scroll;
    }
}