/* ===== RESPONSIVE CSS — Zoha Organic Classic ===== */

:root {
    --transition-menu: 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 1002;
    transition: var(--transition);
    padding: 4px;
}

.mobile-toggle:hover { color: var(--amber-gold); }

@media (max-width: 992px) {
    header { padding: 14px 0; }
    .mobile-toggle { display: block; }

    #nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 100%);
        height: 100vh;
        background: rgba(253, 251, 246, 0.99);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: var(--transition-menu);
        z-index: 1001;
        border-left: 2px solid var(--amber-gold);
        box-shadow: -8px 0 40px rgba(13, 66, 23, 0.18);
    }

    #nav.active { right: 0; }

    #nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 0;
    }

    #nav ul li a {
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-weight: 600;
        color: var(--green);
        font-family: 'Playfair Display', serif;
    }

    #nav ul li a:hover,
    #nav ul li a.active { color: var(--amber); }

    .nav-actions .btn { display: none; }

    .hero-content {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center;
        width: 90%;
        max-width: 600px;
        padding: 0 16px;
    }

    .slide-subtitle { padding-left: 0; }
    .slide-subtitle::before { display: none; }
    .hero-content h1 { font-size: 2.8rem; }
    .hero-content p { font-size: 1.05rem; margin-left: auto; margin-right: auto; }
    .hero-btns { justify-content: center; }
    .slider-btn { width: 44px; height: 44px; font-size: 0.95rem; }
    .prev-btn { left: 12px; }
    .next-btn { right: 12px; }

    .about-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; }
    .about-text h2 { font-size: 2.4rem; }
    .about-features { grid-template-columns: 1fr 1fr; justify-items: start; text-align: left; max-width: 480px; margin: 28px auto 0; }
    .about-image { max-width: 520px; margin: 0 auto; }
    .about-image-frame { display: none; }

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

    .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
    .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }

    .review-card { flex: 0 0 calc((100% - 22px) / 2); padding: 24px; }

    .find-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
    .contact-detail { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .detail-text h4 { text-align: center; }
    .map-wrapper { height: 360px; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-col h4::after { left: 0; transform: none; }
}

@media (max-width: 768px) {
    section { padding: 72px 0; }
    .section-header h2 { font-size: 2.1rem; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
    .hero-content h1 { font-size: 2.4rem; }
    .about-text h2 { font-size: 2.1rem; }
    .reviews .section-header { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 600px) {
    section { padding: 56px 0; }
    .section-header { margin-bottom: 44px; }
    .section-header h2 { font-size: 1.9rem; }
    .hero-content h1 { font-size: 2.1rem; }
    .hero-btns { flex-direction: column; gap: 14px; align-items: center; }
    .hero-btns .btn { width: 100%; max-width: 280px; text-align: center; }
    .menu-tabs { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
    .menu-tab { font-size: 0.76rem; padding: 9px 14px; }
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 155px; }
    .gallery-item:nth-child(1) { grid-column: span 2; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .footer-col img.logo-img { margin: 0 auto 16px; }
    .opening-hours li { gap: 8px; }
    .app-buttons { flex-direction: row; justify-content: center; }
    .footer-bottom p { flex-direction: column; gap: 12px; }
    .logo img { height: 48px; }
    .review-card { flex: 0 0 100%; }
    .about-features { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 210px; }
    .gallery-item:nth-child(1) { grid-column: span 1; }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content p { font-size: 0.92rem; }
    .about-text h2 { font-size: 1.8rem; }
    .find-title { font-size: 2.2rem; }
    .slider-btn { width: 36px; height: 36px; font-size: 0.88rem; }
    .section-header h2 { font-size: 1.75rem; }
    .app-buttons { flex-direction: column; align-items: center; }
}

body.menu-open { overflow: hidden; }