/* Responsive Design */

/* Mobile and Tablet Adjustments (max-width: 768px) */
@media (max-width: 768px) {
    /* Navigation Adjustments */
    .mega-menu {
        width: 100%;
        transform: none;
        left: 0;
        padding: 10px;
    }
    
    .mega-menu .row {
        flex-direction: column;
    }
    
    .nav-item.dropdown .mega-menu {
        transform: none;
        left: 0;
    }

    .mega-menu .col-md-4 {
        padding: 5px 15px;
        width: 100%;
    }

    .mega-menu .dropdown-item {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    /* Make dropdown position relative on mobile */
    .dropdown {
        position: relative;
    }

    /* Existing Vouchers Section Adjustments */
    .voucher-content {
        background: linear-gradient(
            to left,
            rgba(226, 235, 234, 0) 0%,
            rgba(226, 235, 234, 0.8) 20%,
            rgba(226, 235, 234, 0.9) 50%,
            rgba(226, 235, 234, 1) 100%
        );
    }

    /* Hero Section Adjustments - handled by base/hero.css */

    .location-link img {
        height: 200px;
    }

    /* Vouchers Page Specific Adjustments */
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .voucher-container {
        flex-direction: column;
        align-items: center;
    }
    
    .voucher-card {
        width: 100%;
        max-width: 300px;
    }

    .vouchers-hero h1 {
        font-size: 2rem;
    }

    /* CTA Section Adjustments */
    .cta {
        padding-top: 60px 0;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-text {
        font-size: 1.1rem;
        padding: 0 20px;
    }

    /* Ensure dropdowns are fully visible in mobile view */
    .nav-item.dropdown .dropdown-menu {
        position: static; /* Ensure it doesn't use absolute positioning */
        width: 100%; /* Make sure it takes the full width of the parent */
        transform: none; /* Remove any transform that might offset it */
        padding: 0; /* Remove padding to avoid overflow */
        margin: 0; /* Remove margin to avoid overflow */
    }

    .nav-item.dropdown .dropdown-item {
        padding: 0.5rem 1rem; /* Ensure consistent padding */
        text-align: left; /* Align text to the left */
    }
}

/* Larger Screen Adjustments (min-width: 769px) */
@media (min-width: 769px) {
    /* Mega Menu Adjustments */
    .mega-menu {
        width: 600px;
        padding: 20px;
    }

    .mega-menu .row {
        width: 100%;
        margin: 0;
    }

    .mega-menu .col-md-4 {
        padding: 10px 15px;
    }

    /* Existing Vouchers Section Adjustments */
    .voucher-card,
    .voucher-card:last-child {
        width: calc(33.333% - 14px); /* Three cards per row on larger screens */
    }

    .voucher-price {
        font-size: 2rem;
    }

    .voucher-description,
    .purchase-btn {
        font-size: 1rem;
    }

    .voucher-content {
        padding: 25px;
    }
}

/* Add any additional responsive styles here */