/* ===== GEOMASTER SOLUTIONS - RESPONSIVE (Dark Tech) ===== */

/* ===== MOBILE BASE ===== */
.menu-toggle { display: flex; }

.nav-menu {
    position: fixed;
    top: 0; right: -100%;
    width: 85%; max-width: 350px;
    height: 100vh;
    background-color: var(--bg-card);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--space-20) + var(--space-4)) var(--space-8) var(--space-8);
    gap: 0;
    transition: right var(--transition-fast);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    z-index: 999;
    border-left: 1px solid var(--border-accent);
}

.nav-menu.active { right: 0; }
.nav-menu li { width: 100%; }

.nav-menu a {
    color: var(--text-primary) !important;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    width: 100%;
    font-size: var(--text-base);
}

.nav-menu .nav-cta { margin-top: var(--space-4); }
.nav-menu .nav-cta a { display: block; text-align: center; border-bottom: none; }

.nav-dropdown {
    position: static;
    opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none;
    padding: 0; min-width: unset;
    background: rgba(0, 240, 255, 0.03);
    border-radius: var(--radius);
    margin: var(--space-1) 0;
    backdrop-filter: none;
}

.nav-dropdown a {
    padding-left: var(--space-10) !important;
    font-size: var(--text-sm) !important;
    border-bottom-color: var(--border-subtle) !important;
}

.has-dropdown > a::after { display: none; }

.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
.form-row { grid-template-columns: 1fr; }

/* ===== >= 576px ===== */
@media (min-width: 576px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== >= 768px ===== */
@media (min-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr 1fr; }
}

/* ===== >= 992px ===== */
@media (min-width: 992px) {
    h1 { font-size: var(--text-5xl); }

    .menu-toggle { display: none; }

    .nav-menu {
        position: static;
        width: auto; max-width: none; height: auto;
        background-color: transparent;
        flex-direction: row; align-items: center;
        padding: 0; gap: var(--space-1);
        box-shadow: none; overflow-y: visible;
        border-left: none;
    }

    .nav-menu li { width: auto; }

    .nav-menu a {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
        border-bottom: none;
        width: auto;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .nav-menu a:hover, .nav-menu a.active {
        color: var(--accent) !important;
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    }

    .nav-menu .nav-cta { margin-top: 0; margin-left: var(--space-2); }
    .nav-menu .nav-cta a { display: inline-flex; }

    .nav-dropdown {
        position: absolute;
        opacity: 0; visibility: hidden;
        transform: translateY(10px);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border-accent);
        padding: var(--space-2) 0;
        min-width: 240px;
        background: var(--bg-card);
        border-radius: var(--radius);
        backdrop-filter: blur(20px);
    }

    .nav-menu li:hover > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

    .nav-dropdown a {
        padding: var(--space-3) var(--space-6) !important;
        font-size: var(--text-sm) !important;
        border-bottom: none !important;
        color: var(--text-primary) !important;
    }

    .nav-dropdown a:hover {
        background-color: var(--accent-light);
        color: var(--accent) !important;
        text-shadow: none;
    }

    .has-dropdown > a::after { display: inline; }

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

/* ===== >= 1200px ===== */
@media (min-width: 1200px) {
    .section-header h2 { font-size: var(--text-3xl); }
}