/* ===========================================
   MEXICANO - Responsive Styles
   Mobile-first responsive breakpoints
   =========================================== */

/* ===========================================
   LARGE DESKTOP (1400px+)
   =========================================== */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .container-lg {
        max-width: 1540px;
    }

    .hero-title {
        font-size: 5rem;
    }

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

    .grid-4 {
        gap: var(--space-xl);
    }
}

/* ===========================================
   DESKTOP (1200px - 1399px)
   =========================================== */

@media (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }

    .hero-title {
        font-size: 4rem;
    }

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

/* ===========================================
   LAPTOP (992px - 1199px)
   =========================================== */

@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .hero-title {
        font-size: 3.5rem;
    }

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

    .hero-subtitle {
        font-size: var(--text-lg);
    }

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

    /* Footer adjustments */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }

    /* Stats section */
    .hero-stats-inner {
        gap: var(--space-2xl);
    }
}

/* ===========================================
   TABLET (768px - 991px)
   =========================================== */

@media (max-width: 991px) {
    :root {
        --space-3xl: 3rem;
    }

    .container {
        max-width: 720px;
    }

    /* Typography */
    .hero-title {
        font-size: 3rem;
    }

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

    .page-hero-title {
        font-size: 2.5rem;
    }

    /* Grid adjustments */
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Navigation - Mobile Menu */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: var(--bg-dark);
        flex-direction: column;
        padding: 6rem var(--space-xl) var(--space-xl);
        transition: var(--transition-normal);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
        z-index: 9999; /* Highest z-index to ensure menu is clickable */
        overflow-y: auto;
        pointer-events: auto !important; /* Force menu to receive clicks */
    }

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

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

    .nav-link {
        display: block;
        padding: var(--space-md);
        font-size: var(--text-lg);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        pointer-events: auto !important; /* Force links to be clickable */
        cursor: pointer !important;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover,
    .nav-link.active {
        color: var(--gold-primary);
        background: rgba(255, 179, 0, 0.1);
    }

    .menu-toggle {
        display: flex;
        z-index: var(--z-overlay);
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Mobile menu overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-normal);
        z-index: 9998; /* Just below nav-menu */
    }

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

    /* Hero adjustments */
    .hero-ultra {
        min-height: 85vh;
    }

    .hero-cta {
        flex-direction: column;
        gap: var(--space-md);
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 320px;
    }

    /* Stats */
    .hero-stats-inner {
        flex-wrap: wrap;
        gap: var(--space-xl);
        justify-content: space-around;
    }

    .hero-stat {
        flex: 0 0 40%;
    }

    /* Contact form grid */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    /* Split sections */
    .split-section {
        grid-template-columns: 1fr;
    }

    .split-section .content {
        order: 2;
    }

    .split-section .image {
        order: 1;
    }

    /* Testimonial slider */
    .testimonial-slider {
        padding: 0 var(--space-md);
    }

    /* Gallery */
    .gallery-card img {
        height: 250px;
    }

    /* Menu card */
    .menu-card img {
        height: 180px;
    }

    /* Floating icons - reduce */
    .floating-icon:nth-child(n+5) {
        display: none;
    }
}

/* ===========================================
   MOBILE LARGE (576px - 767px)
   =========================================== */

@media (max-width: 767px) {
    :root {
        --space-2xl: 2rem;
        --space-3xl: 2.5rem;
    }

    .container {
        max-width: 540px;
        padding: 0 var(--space-md);
    }

    /* Typography */
    .hero-title {
        font-size: 2.5rem;
    }

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

    .page-hero-title {
        font-size: 2rem;
    }

    .hero-subtitle,
    .page-hero-subtitle {
        font-size: var(--text-base);
    }

    /* Grid - Single column */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

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

    .section-header {
        margin-bottom: var(--space-xl);
    }

    /* Buttons full width */
    .btn {
        width: 100%;
        text-align: center;
    }

    .btn-group {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* Hero */
    .hero-ultra {
        min-height: 100svh;
    }

    .page-hero {
        min-height: 35vh;
        padding-top: 60px;
    }

    .scroll-indicator {
        bottom: 15px;
    }

    .scroll-indicator span {
        font-size: var(--text-xs);
    }

    /* Stats */
    .hero-stats-inner {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .hero-stat {
        flex: 0 0 45%;
    }

    .hero-stat-number {
        font-size: var(--text-2xl);
    }

    .hero-stat-label {
        font-size: var(--text-xs);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    /* Cards */
    .card {
        padding: var(--space-lg);
    }

    .menu-card img {
        height: 200px;
    }

    .gallery-card img {
        height: 220px;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Filter buttons */
    .filter-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .filter-btn {
        flex: 0 0 auto;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }

    /* Map */
    .map-container {
        height: 300px;
    }

    /* FAQ Accordion */
    .accordion-header {
        padding: var(--space-md);
        font-size: var(--text-base);
    }

    .accordion-body {
        padding: 0 var(--space-md) var(--space-md);
    }

    /* Service options */
    .service-options {
        grid-template-columns: 1fr;
    }

    /* Parallax CTA */
    .parallax-cta-title {
        font-size: 1.75rem;
    }

    /* Location section */
    .location-info {
        flex-direction: column;
        text-align: center;
    }

    /* Animated elements - hide most */
    .animated-line,
    .hero-particles {
        display: none;
    }

    .floating-icon {
        display: none;
    }
}

/* ===========================================
   MOBILE SMALL (< 576px)
   =========================================== */

@media (max-width: 575px) {
    :root {
        --space-xl: 1.5rem;
        --space-2xl: 1.75rem;
    }

    .container {
        padding: 0 var(--space-md);
    }

    /* Typography - Further reduction */
    .hero-title {
        font-size: 2rem;
    }

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

    .page-hero-title {
        font-size: 1.75rem;
    }

    /* Navbar */
    .navbar {
        padding: var(--space-sm) 0;
    }

    .navbar .container {
        padding: 0 var(--space-sm);
    }

    .logo {
        font-size: var(--text-lg);
    }

    .nav-menu {
        width: 100%;
        max-width: none;
        padding: 5rem var(--space-md) var(--space-md);
    }

    /* Hero badge */
    .hero-badge {
        font-size: var(--text-xs);
        padding: var(--space-xs) var(--space-md);
    }

    /* Stats - 2x2 grid */
    .hero-stats-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .hero-stat {
        padding: var(--space-sm);
    }

    /* Section badge */
    .section-badge {
        font-size: var(--text-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    /* Cards - Minimal padding */
    .card {
        padding: var(--space-md);
    }

    .card-icon {
        width: 50px;
        height: 50px;
        font-size: var(--text-xl);
    }

    /* Menu cards */
    .menu-card img {
        height: 160px;
    }

    .menu-card-content {
        padding: var(--space-md);
    }

    .menu-card h4 {
        font-size: var(--text-lg);
    }

    /* Gallery cards */
    .gallery-card img {
        height: 180px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: var(--space-md);
    }

    .testimonial-text {
        font-size: var(--text-sm);
    }

    /* Forms */
    .form-input {
        padding: var(--space-sm) var(--space-md);
    }

    .form-label {
        font-size: var(--text-sm);
    }

    /* Buttons */
    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }

    .btn-lg {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-base);
    }

    /* Filter buttons - scrollable */
    .filter-buttons {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: var(--space-sm);
        margin-bottom: var(--space-md);
        -webkit-overflow-scrolling: touch;
    }

    .filter-btn {
        flex-shrink: 0;
    }

    /* Breadcrumb */
    .page-hero-breadcrumb {
        font-size: var(--text-xs);
    }

    /* Footer */
    .footer {
        padding: var(--space-xl) 0;
    }

    .footer-title {
        font-size: var(--text-lg);
    }

    .social-links {
        justify-content: center;
    }

    /* Contact info items */
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    /* Map */
    .map-container {
        height: 250px;
    }

    /* Lightbox */
    .lightbox-content {
        padding: var(--space-sm);
    }

    .lightbox-close {
        top: var(--space-sm);
        right: var(--space-sm);
    }

    /* Notification */
    .notification {
        margin: var(--space-sm);
        padding: var(--space-md);
        font-size: var(--text-sm);
    }
}

/* ===========================================
   LANDSCAPE MOBILE
   =========================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-ultra {
        min-height: auto;
        padding: var(--space-3xl) 0;
    }

    .page-hero {
        min-height: auto;
        padding: var(--space-2xl) 0;
        padding-top: calc(var(--space-2xl) + 60px);
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        margin-bottom: var(--space-md);
    }

    .scroll-indicator {
        display: none;
    }

    .hero-stats {
        position: relative;
    }
}

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

@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .navbar,
    .footer,
    .scroll-indicator,
    .hero-floating-icons,
    .hero-animated-lines,
    .hero-particles,
    .menu-toggle,
    .btn,
    .lightbox,
    .notification {
        display: none !important;
    }

    .hero-ultra,
    .page-hero {
        min-height: auto;
        padding: var(--space-md);
    }

    .section {
        padding: var(--space-md) 0;
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* ===========================================
   HIGH CONTRAST MODE
   =========================================== */

@media (prefers-contrast: high) {
    :root {
        --bg-dark: #000000;
        --bg-secondary: #111111;
        --bg-card: #1a1a1a;
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --border-light: 2px solid rgba(255, 255, 255, 0.3);
    }

    .btn {
        border: 2px solid currentColor;
    }

    .card {
        border-width: 2px;
    }
}

/* ===========================================
   DARK MODE (for systems that support it)
   =========================================== */

@media (prefers-color-scheme: dark) {
    /* Already dark theme, but ensure consistency */
    :root {
        color-scheme: dark;
    }
}

/* ===========================================
   TOUCH DEVICE OPTIMIZATIONS
   =========================================== */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 48px;
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .filter-btn {
        min-height: 44px;
    }

    /* Remove hover effects on touch */
    .card:hover,
    .menu-card:hover,
    .gallery-card:hover {
        transform: none;
    }

    .gallery-card-overlay {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(10, 10, 18, 0.8) 0%,
            transparent 50%
        );
    }

    .gallery-card-zoom {
        display: none;
    }
}