/* ===================================
   Cyber911 Responsive CSS
   Mobile-first breakpoints
   =================================== */

/* Breakpoints:
   - xs: 0-575px (default mobile)
   - sm: 576px+ (large phones)
   - md: 768px+ (tablets)
   - lg: 992px+ (desktops)
   - xl: 1200px+ (large desktops)
*/

/* ==================
   MOBILE STYLES (Default - 0-575px)
   ================== */

/* Hide desktop dropdown on mobile by default */
@media (max-width: 991px) {
    /* Mobile menu toggle visible */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Navigation menu - mobile styles */
    .nav-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 80px);
        flex-direction: column;
        background-color: var(--color-primary-medium);
        padding: var(--spacing-xl);
        gap: var(--spacing-md);
        align-items: flex-start;
        transition: right var(--transition-slow);
        overflow-y: auto;
        box-shadow: var(--shadow-xl);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        width: 100%;
    }

    /* Dropdown on mobile - show inline */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: var(--color-primary-dark);
        margin-top: var(--spacing-sm);
        margin-left: var(--spacing-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
    }

    .has-dropdown.active .dropdown-menu {
        max-height: 500px;
    }

    .dropdown-icon {
        margin-left: auto;
    }

    .has-dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Adjust heading sizes for mobile */
    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

    h3 {
        font-size: var(--font-size-xl);
    }

    /* Container padding on mobile */
    .container {
        padding: 0 var(--spacing-md);
    }

    /* Section spacing on mobile */
    .section {
        padding: var(--spacing-2xl) 0;
    }

    .section-lg {
        padding: var(--spacing-3xl) 0;
    }

    /* Footer grid on mobile */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Flash messages on mobile */
    .flash-messages {
        top: 90px;
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        max-width: none;
    }

    /* Grid layouts on mobile */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Cards on mobile */
    .card {
        padding: var(--spacing-lg);
    }

    /* Buttons on mobile */
    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================
   SMALL DEVICES (576px+) - Large Phones
   ================== */

@media (min-width: 576px) {
    .container {
        padding: 0 var(--spacing-lg);
    }

    h1 {
        font-size: var(--font-size-4xl);
    }

    .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .btn {
        width: auto;
    }
}

/* ==================
   MEDIUM DEVICES (768px+) - Tablets
   ================== */

@media (min-width: 768px) {
    h1 {
        font-size: var(--font-size-5xl);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    .section {
        padding: var(--spacing-3xl) 0;
    }

    .section-lg {
        padding: var(--spacing-4xl) 0;
    }

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

    .footer-bottom {
        flex-direction: row;
        text-align: left;
    }

    .grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

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

/* ==================
   LARGE DEVICES (992px+) - Desktops
   ================== */

@media (min-width: 992px) {
    /* Desktop navigation */
    .mobile-menu-toggle {
        display: none;
    }

    .nav-menu {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        background-color: transparent;
        padding: 0;
        box-shadow: none;
    }

    .nav-item {
        width: auto;
    }

    .nav-link {
        width: auto;
    }

    /* Desktop dropdown - hover behavior */
    .dropdown-menu {
        position: absolute;
        background-color: var(--color-primary-light);
        box-shadow: var(--shadow-lg);
        margin-left: 0;
        max-height: none;
        overflow: visible;
    }

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

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

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

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

/* ==================
   EXTRA LARGE DEVICES (1200px+) - Large Desktops
   ================== */

@media (min-width: 1200px) {
    .container {
        padding: 0 var(--spacing-2xl);
    }

    h1 {
        font-size: calc(var(--font-size-5xl) * 1.1);
    }
}

/* ==================
   UTILITY RESPONSIVE CLASSES
   ================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet and above */
@media (min-width: 768px) {
    .hide-tablet-up {
        display: none !important;
    }
}

/* Hide on desktop and above */
@media (min-width: 992px) {
    .hide-desktop-up {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Show only on desktop */
.show-desktop {
    display: none;
}

@media (min-width: 992px) {
    .show-desktop {
        display: block !important;
    }
}

/* ==================
   PRINT STYLES
   ================== */

@media print {
    .site-header,
    .site-footer,
    .flash-messages,
    .btn {
        display: none !important;
    }

    body {
        background-color: white;
        color: black;
    }

    a {
        text-decoration: underline;
        color: black;
    }

    .main-content {
        padding-top: 0;
    }
}