/*!
Theme Name: ZAUQ Restaurant
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: zauq-restaurant
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ZAUQ Restaurant is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Custom font classes */
.font-marcellus {
    font-family: 'Marcellus', serif;
}

.font-inter {
    font-family: 'Jost', sans-serif;
}

.font-jost {
    font-family: 'Jost', sans-serif;
}
.menu-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .menu-title {
            text-align: center;
            color: #B98934;
            font-size: 3rem;
            margin-bottom: 50px;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: bold;
        }
        .cards-section {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 40px;
        }
        .menu-card {
            background: transparent;
            border: 2px solid #B98934;
            border-radius: 12px;
            padding: 20px;
            /* box-shadow: 0 8px 20px rgba(185, 137, 52, 0.5); */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            max-height: 600px;
            overflow-y: auto;
        }
        .menu-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px #B98934;
        }
        .card-title {
            color: #B98934;
            font-size: 2rem;
            margin-bottom: 15px;
            padding-bottom: 4px;
            border-bottom: 3px solid #B98934;
            text-align: center;
            letter-spacing: 2px;
        }
        .menu-category {
            margin-bottom: 15px;
        }
        .category-name {
            color: #fff;
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 8px;
            /* text-transform: uppercase; */
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .category-name i {
            color: #B98934;
            font-size: 1.2rem;
            width: 20px;
        }
        .menu-items {
            list-style: none;
            padding-left: 0;
        }
        .menu-items li {
            color: #5c3a21;
            font-size: 0.9rem;
            line-height: 1.5;
            padding: 3px 0;
            padding-left: 20px;
            position: relative;
        }
        .menu-items li:before {
            content: "•";
            color: #8b6f47;
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        .sub-category {
            margin-left: 20px;
            margin-top: 6px;
        }
        .sub-category-name {
            color: #6b4e3d;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 4px;
            font-style: italic;
        }
        .note {
            color: #8b6f47;
            font-size: 0.9rem;
            font-style: italic;
            margin-top: 8px;
            padding-left: 20px;
        }
/* Tailwind configuration for custom fonts */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base styles */
@layer base {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    body {
        font-family: 'Jost', sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        padding-top: 0;
        color: #261C06;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Marcellus', serif;
    }
}

/* Custom navbar styles */
@layer components {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 2rem 0rem;
        transition: all 0.3s ease;
        border-top: 3px solid #DBB34C !important;
        width: 100%;
    }

    .navbar.scrolled {
        background: rgba(51, 43, 34, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .navbar-link {
        @apply font-medium relative pb-1 transition-all duration-300;
        position: relative;
        color: #E5E5E5;
        /* Light gray/off-white */
    }

    .navbar-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: #B89B5F;
        /* Golden color */
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .navbar-link:hover {
        color: #FFFFFF;
        /* Pure white on hover */
    }

    .navbar-link:hover::after {
        width: 100%;
    }

    .navbar-link.active {
        color: #FFFFFF;
        /* Pure white for active */
    }

    .navbar-link.active::after {
        width: 100%;
        background-color: #B89B5F;
        /* Golden color */
    }

    /* Logo styling when navbar is scrolled */
    .navbar.scrolled .navbar-logo {
        color: #B89B5F;
        /* Golden color for logo when scrolled */
    }
 .navbar-links {
    border-bottom: 2px solid #B89B5F !important;
    padding-bottom: 20px;
}
 .gallery-nav-next,
.gallery-nav-prev {
    color: #000000 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
}

.gallery-nav-next:after,
.gallery-nav-prev:after {
    font-size: 16px !important;
    font-weight: bold !important;
}

.gallery-pagination .swiper-pagination-bullet {
    background: #d1d5db !important;
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 4px !important;
}

.gallery-pagination .swiper-pagination-bullet-active {
    background: #000000 !important;
}

/* Mobile Menu Styles */
#mobile-menu {
    z-index: 9999;
}

#mobile-menu .absolute.inset-0 {
    z-index: 1;
}
#mobile-menu .absolute.right-0 {
    z-index: 2;
}

  

    /* Mobile responsive adjustments */
    @media (max-width: 768px) {
        .navbar-container {
            @apply flex-col space-y-4;
        }

        .navbar-links {
            @apply space-x-4;
        }

        .navbar-logo {
            @apply order-first mb-4;
        }
    }

    /* Hero section styles */
    .hero-section {
        position: relative;
        width: 100%;

        z-index: 1;
    }

    .hero-content {
        animation: fadeInUp 1s ease-out;
    }

    .hero-title {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero-description {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    .hero-button {
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    }

    .hero-button:hover {
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile hero adjustments */
    @media (max-width: 768px) {





        .hero-button {
            @apply py-3 px-6 text-base;
        }
    }

    /* About Us section styles */
    

    .about-title {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .about-subtitle {
        letter-spacing: 0.1em;
    }

    .food-overlay {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .food-overlay:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .read-more-btn {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    }

    .read-more-btn:hover {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

    /* Buffet section styles */
    .buffet-section {
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    }

    .buffet-title {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .price-tag {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .price-tag:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .menu-category {
        transition: all 0.3s ease;
    }

  

    .menu-item {
        transition: color 0.3s ease;
    }

    .menu-item:hover {
        color: #f59e0b;
        cursor: pointer;
    }

    .category-icon {
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
    }

    /* Reservation section styles */
    .reservation-section {
        background-attachment: fixed;
    }

    .reservation-form {
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .form-input {
        transition: all 0.3s ease;
    }

    .form-input:focus {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
    }

    .reservation-button {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    }

    .reservation-button:hover {
        background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

    .form-icon {
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
    }

    /* Custom select styling */
    .custom-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    /* Gallery section styles */
    

    .gallery-item {
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .gallery-item img {
        transition: transform 0.3s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.1);
    }

    .gallery-overlay {
        background: linear-gradient(45deg, rgba(245, 158, 11, 0.8), rgba(217, 119, 6, 0.8));
    }

    .instagram-icon {
        filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    }

    .gallery-button {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    }

    .gallery-button:hover {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

    /* Responsive gallery grid */
    @media (max-width: 768px) {
        .gallery-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .gallery-item {
            height: 200px;
        }
    }

    /* Dish of the Week section styles */
    .dish-section {
        background-attachment: fixed;
    }

    .dish-card {
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        animation: slideInUp 0.8s ease-out;
    }

    .dish-title {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .star-rating {
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
    }

    .thumbnail-container {
        transition: all 0.3s ease;
    }

    .thumbnail-container:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .carousel-arrow {
        transition: all 0.3s ease;
    }

    .carousel-arrow:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .dish-description {
        text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile dish card adjustments */
    @media (max-width: 768px) {
        .dish-card {
            margin: 0 1rem;
            padding: 1.5rem;
        }

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

        .thumbnail-container {
            width: 4rem;
            height: 4rem;
        }

        .carousel-arrow {
            width: 2rem;
            height: 2rem;
        }
    }

    /* Testimonials section styles */
    .testimonial-section {
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    }

    .testimonial-card {
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .testimonial-title {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .testimonial-subtitle {
        letter-spacing: 0.05em;
    }

    .customer-avatar {
        border: 3px solid #f59e0b;
        transition: all 0.3s ease;
    }

    .testimonial-card:hover .customer-avatar {
        transform: scale(1.1);
        border-color: #d97706;
    }

    .star-rating {
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
    }

    .testimonial-quote {
        position: relative;
    }

  

    /* Swiper customization */
    .testimonial-swiper {
        padding: 20px 0 60px 0;
    }

    .testimonial-nav-next,
    .testimonial-nav-prev {
        color: #f59e0b !important;
        background: white !important;
        border-radius: 50% !important;
        width: 50px !important;
        height: 50px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }

    .testimonial-nav-next:hover,
    .testimonial-nav-prev:hover {
        background: #f59e0b !important;
        color: white !important;
        transform: scale(1.1) !important;
    }

    .testimonial-nav-next::after,
    .testimonial-nav-prev::after {
        font-size: 18px !important;
        font-weight: bold !important;
    }

    .testimonial-pagination {
        bottom: 10px !important;
    }

    .testimonial-pagination .swiper-pagination-bullet {
        background: #d1d5db !important;
        opacity: 1 !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 6px !important;
        transition: all 0.3s ease !important;
    }

    .testimonial-pagination .swiper-pagination-bullet-active {
        background: #f59e0b !important;
        transform: scale(1.2) !important;
    }

    /* Mobile testimonial adjustments */
    @media (max-width: 768px) {
        .testimonial-card {
            margin: 0 0.5rem;
            padding: 1.5rem;
        }

        .testimonial-nav-next,
        .testimonial-nav-prev {
            width: 40px !important;
            height: 40px !important;
        }

        .testimonial-nav-next::after,
        .testimonial-nav-prev::after {
            font-size: 14px !important;
        }
    }

    /* FAQ section styles */
    .faq-section {
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    }

    .faq-title {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .faq-subtitle {
        letter-spacing: 0.05em;
    }

    .faq-item {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }

    .faq-item:hover {
        border-left-color: #f59e0b;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .faq-question {
        transition: all 0.3s ease;
        position: relative;
    }

    .faq-question:hover {
        background-color: #fef3c7;
    }

    .faq-icon {
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }

    .faq-question:hover .faq-icon {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

    .faq-icon-text {
        transition: all 0.3s ease;
        user-select: none;
    }

    .faq-answer {
        transition: all 0.3s ease;
        border-top: 1px solid #f3f4f6;
    }

    .faq-answer p {
        animation: fadeInUp 0.3s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile FAQ adjustments */
    @media (max-width: 768px) {
        .faq-question {
            padding: 1rem;
        }

        .faq-answer {
            padding: 0 1rem 1rem 1rem;
        }

        .faq-answer div {
            margin-left: 0;
        }

        .faq-icon {
            width: 2rem;
            height: 2rem;
        }

        .faq-icon-text {
            font-size: 1rem;
        }
    }

    /* Footer section styles */
    .footer-section {
        background-attachment: fixed;
    }

    .footer-logo {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .footer-heading {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        position: relative;
    }

    .footer-heading::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, #B89B5F, #DBB34C);
    }

    .footer-link {
        position: relative;
        transition: all 0.3s ease;
    }

    .footer-link::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 2px;
        background: #f59e0b;
        transition: width 0.3s ease;
    }

    .footer-link:hover::before {
        width: 6px;
    }

    .social-icon {
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }

    .social-icon:hover {
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
    }

    .contact-item {
        transition: all 0.3s ease;
    }

    .contact-item:hover {
        transform: translateX(5px);
    }

    .contact-icon {
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
    }

    .footer-copyright {

        border-top: 1px solid #B98934;
    }

    /* Mobile footer adjustments */
    @media (max-width: 768px) {
        .footer-section {
            padding: 3rem 0;
        }

        .footer-logo {
            text-align: center;
            margin-bottom: 2rem;
        }

        .footer-heading {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .footer-heading::after {
            left: 50%;
            transform: translateX(-50%);
        }

        .social-icon {
            width: 2.5rem;
            height: 2.5rem;
        }

        .contact-item {
            text-align: center;
        }

        .footer-link::before {
            display: none;
        }
    }
}

.hero-title {
    color: #FFF;
    font-family: 'Marcellus', serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 117%;
}

.hero-description {
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 134%;
}

.primary-btn {
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 134%;
    display: inline-flex;
    height: 52px;
    padding: 18px 24px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #B98934;
    width: fit-content;
}
.text-description{
    color: #777;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 134%; 
}

/* Gradient border for menu categories */
.gradient-border {
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, #C89A3B, #624B1D) 1;
}
.img-white{
    filter: brightness(0) invert(1);
}

/* Customer Reviews Swiper Styles */
.customer-reviews-next,
.customer-reviews-prev {
    color: #000000 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
}

.customer-reviews-next:after,
.customer-reviews-prev:after {
    font-size: 16px !important;
    font-weight: bold !important;
}

.customer-reviews-pagination .swiper-pagination-bullet {
    background: #d1d5db !important;
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 4px !important;
}

.customer-reviews-pagination .swiper-pagination-bullet-active {
    background: #000000 !important;
}

/* Mobile Menu Styles */
#mobile-menu {
    z-index: 9999;
}

#mobile-menu .absolute.inset-0 {
    z-index: 1;
}

#mobile-menu .absolute.right-0 {
    z-index: 2;
}

@media (max-width: 1023px) {
    .navbar nav {
        position: relative;
    }
    
    .mobile-menu-btn {
        position: relative;
        z-index: 50;
    }
}
@media (max-width: 768px) {
    .primary-btn{
        font-size: 14px;
        height: 40px;
        padding: 10px 16px;
    }
    .text-description{
        line-height: 1.2;
        font-size: 16px;
    }
}