/* ==========================================================================
   RESPONSIVE - All Media Queries
   ========================================================================== */

/* Tablet (992px and below) */
@media (max-width: 992px) {
    /* Layout adjustments */
    .featured-grid {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

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

    /* Remove scale effect on pricing cards */
    .news-card[style*="transform: scale(1.05)"] {
        transform: scale(1) !important;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    /* Top Bar Mobile */
    .top-bar {
        padding: 6px 0;
    }

    .top-bar-content {
        font-size: 0.75rem;
    }

    .date-time {
        font-size: 0.75rem;
    }

    /* Hide social links on mobile */
    .top-bar-content .social-links {
        display: none;
    }

    /* Main Header Mobile */
    .main-header {
        padding: 15px 0;
    }

    .header-content {
        flex-wrap: wrap;
        position: relative;
    }

    .logo-image {
        max-height: 40px;
    }

    /* Hide navigation by default on mobile */
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 20px;
        z-index: 999;
        width: 100%;
    }

    /* Show navigation when mobile-open class is added */
    .main-nav.mobile-open {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .main-nav ul li {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
    }

    .main-nav ul li:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Hide desktop header actions on mobile */
    .header-actions {
        display: none !important;
    }

    /* Show menu toggle button on mobile */
    .menu-toggle {
        display: block !important;
    }

    /* Mobile Authentication Buttons */
    .main-nav.mobile-open .mobile-auth-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 2px solid var(--border-color);
    }

    /* Mobile User Info (when logged in) */
    .mobile-user-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px;
        background: var(--bg-light);
        border-radius: 6px;
        font-weight: 600;
        color: var(--text-dark);
        font-size: 1rem;
    }

    .mobile-user-info i {
        font-size: 1.25rem;
        color: var(--primary-color);
    }

    /* Mobile Login Button */
    .btn-mobile-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 15px 20px;
        background: white;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
        transition: var(--transition-base);
        box-sizing: border-box;
        min-height: 50px;
    }

    .btn-mobile-login:hover {
        background: var(--primary-color);
        color: white;
    }

    .btn-mobile-login i {
        font-size: 1.1rem;
    }

    /* Mobile Register Button */
    .btn-mobile-register {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 15px 20px;
        background: var(--primary-color);
        color: white;
        border: 2px solid var(--primary-color);
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
        transition: var(--transition-base);
        box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3);
        box-sizing: border-box;
        min-height: 50px;
    }

    .btn-mobile-register:hover {
        background: #d62839;
        border-color: #d62839;
        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
    }

    .btn-mobile-register i {
        font-size: 1.1rem;
    }

    /* Mobile Logout Button */
    .btn-mobile-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 14px 20px;
        background: white;
        color: #dc3545;
        border: 2px solid #dc3545;
        border-radius: 6px;
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
        transition: var(--transition-base);
    }

    .btn-mobile-logout:hover {
        background: #dc3545;
        color: white;
    }

    .btn-mobile-logout i {
        font-size: 1.1rem;
    }

    /* Add bottom border to login button container */
    .main-nav.mobile-open .mobile-auth-buttons .btn-mobile-login {
        margin-bottom: 15px;
    }

    /* Add border to button wrapper if login is in a container */
    .main-nav.mobile-open .mobile-auth-buttons > *:not(:last-child) {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 2px solid var(--primary-color);
    }

    /* Ensure last item doesn't have bottom border */
    .main-nav.mobile-open .mobile-auth-buttons > *:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Content adjustments */
    .article-content h2 {
        font-size: 1.5rem;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .top-bar-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .top-bar-content .date-time span {
        font-size: 0.7rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* Registration Form - Stack name fields on mobile */
    .form-name-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .register-container {
        padding: 30px 20px;
    }

    .register-header h1 {
        font-size: 2rem;
    }
}