/* ======================================================
   Classical Cafe Restaurant
   Main Stylesheet

   Design:
   - Organic natural restaurant aesthetic
   - Emerald + Forest color palette
   - Responsive layouts
   - Clean modern typography
   - No scroll animations

====================================================== */



/* ======================================================
   ROOT VARIABLES
====================================================== */


:root {


    --emerald:
    #10B981;


    --forest:
    #064E3B;


    --cream:
    #F8FAF8;


    --white:
    #FFFFFF;


    --dark:
    #1F2937;


    --gray:
    #6B7280;


    --border:
    #E5E7EB;


    --shadow:
    0 10px 30px rgba(0,0,0,.08);


    --radius:
    14px;


    --transition:
    .3s ease;


}





/* ======================================================
   RESET
====================================================== */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:
    "Inter",
    Arial,
    sans-serif;


    background:
    var(--cream);


    color:
    var(--dark);


    line-height:
    1.7;

}



img {

    max-width:100%;

    display:block;

}



a {

    text-decoration:none;

    color:inherit;

}



ul {

    list-style:none;

}





/* ======================================================
   GLOBAL CONTAINERS
====================================================== */


.container {

    width:min(1200px, 90%);

    margin:auto;

}



.section {

    padding:
    80px 0;

}





.grid-2 {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:50px;

    align-items:center;

}





/* ======================================================
   TYPOGRAPHY
====================================================== */


h1,
h2,
h3 {


    font-family:
    "Playfair Display",
    serif;


    color:
    var(--forest);


    line-height:
    1.25;


}



h1 {

    font-size:
    clamp(2.5rem,5vw,4.5rem);

}



h2 {

    font-size:
    clamp(2rem,4vw,3rem);

}



h3 {

    font-size:
    1.4rem;

}



p {

    margin-bottom:
    18px;

}



.section-tag {


    display:inline-block;


    color:
    var(--emerald);


    font-weight:
    700;


    text-transform:
    uppercase;


    letter-spacing:
    1px;


    margin-bottom:
    12px;

}





/* ======================================================
   HEADER / NAVIGATION
====================================================== */


.header {


    position:fixed;


    top:0;


    left:0;


    width:100%;


    background:
    rgba(255,255,255,.95);


    backdrop-filter:
    blur(10px);


    z-index:1000;


}



.nav-container {


    height:85px;


    display:flex;


    justify-content:space-between;


    align-items:center;


}



.logo {


    display:flex;


    flex-direction:column;


    color:
    var(--forest);

}



.logo-main {


    font-family:
    "Playfair Display",
    serif;


    font-size:
    1.5rem;


    font-weight:700;

}



.logo-sub {


    font-size:
    .8rem;


    color:
    var(--emerald);


    letter-spacing:
    2px;

}





.nav-links {


    display:flex;


    gap:25px;


}



.nav-links a {


    font-weight:
    600;


    transition:
    var(--transition);

}



.nav-links a:hover,
.nav-links .active {


    color:
    var(--emerald);

}





.hamburger {


    display:none;


    background:none;


    border:0;


    cursor:pointer;


}



.hamburger span {


    display:block;


    width:28px;


    height:3px;


    background:
    var(--forest);


    margin:5px;

}





/* ======================================================
   BUTTONS
====================================================== */


.btn {


    display:inline-block;


    padding:
    13px 28px;


    border-radius:
    50px;


    font-weight:
    700;


    transition:
    var(--transition);


}



.btn-primary {


    background:
    var(--emerald);


    color:
    white;

}



.btn-primary:hover {


    background:
    var(--forest);


}





.btn-light {


    background:
    white;


    color:
    var(--forest);

}



.btn-light:hover {


    transform:
    translateY(-3px);


}





/* ======================================================
   HERO / CTA
====================================================== */


.cta {


    background:
    linear-gradient(
    135deg,
    var(--forest),
    var(--emerald)
    );


    color:white;


    padding:
    100px 0;


    text-align:center;


}



.cta h1,
.cta h2 {


    color:white;

}



.cta p {


    max-width:700px;


    margin:
    20px auto 35px;


}





/* ======================================================
   SECTION HEADINGS
====================================================== */


.section-heading {


    text-align:center;


    max-width:750px;


    margin:
    0 auto 50px;


}





/* ======================================================
   FEATURE CARDS
====================================================== */


.features-grid {


    display:grid;


    grid-template-columns:
    repeat(4,1fr);


    gap:25px;


}



.feature-box {


    background:white;


    padding:35px;


    border-radius:
    var(--radius);


    box-shadow:
    var(--shadow);


    text-align:center;


    transition:
    var(--transition);


}



.feature-box:hover {


    transform:
    translateY(-5px);


}



.feature-box i {


    font-size:
    2rem;


    color:
    var(--emerald);


    margin-bottom:
    15px;


}

/* ======================================================
   MENU CARDS
====================================================== */


.menu-grid {


    display:grid;


    grid-template-columns:
    repeat(3,1fr);


    gap:30px;


}



.menu-card {


    background:
    white;


    border-radius:
    var(--radius);


    overflow:hidden;


    box-shadow:
    var(--shadow);


    transition:
    var(--transition);


}



.menu-card:hover {


    transform:
    translateY(-6px);


}



.menu-card img {


    width:100%;


    height:240px;


    object-fit:cover;


}



.menu-card-content {


    padding:
    25px;


}



.menu-card-content h3 {


    margin-bottom:
    10px;


}



.price {


    display:block;


    margin-top:
    15px;


    color:
    var(--emerald);


    font-weight:
    800;


    font-size:
    1.2rem;


}





/* ======================================================
   IMAGE / WELCOME SECTIONS
====================================================== */


.welcome-image img {


    width:100%;


    border-radius:
    var(--radius);


    box-shadow:
    var(--shadow);


}



.welcome-content {


    max-width:
    600px;


}





/* ======================================================
   CONTACT LIST
====================================================== */


.contact-list {


    margin:
    25px 0;


}



.contact-list li {


    display:flex;


    align-items:center;


    gap:12px;


    margin-bottom:
    15px;


}



.contact-list i {


    color:
    var(--emerald);


}





/* ======================================================
   CONTACT FORMS
====================================================== */


.contact-form {


    background:
    white;


    padding:
    35px;


    border-radius:
    var(--radius);


    box-shadow:
    var(--shadow);


}



.form-group {


    margin-bottom:
    20px;


}



.form-group label {


    display:block;


    font-weight:
    600;


    margin-bottom:
    8px;


}



.form-group input,
.form-group textarea,
.form-group select {


    width:100%;


    padding:
    14px;


    border:
    1px solid var(--border);


    border-radius:
    10px;


    font-family:
    inherit;


    font-size:
    1rem;


}



.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {


    outline:none;


    border-color:
    var(--emerald);


}





/* ======================================================
   MAP
====================================================== */


.map-container {


    width:100%;


    min-height:400px;


}



.map-container iframe {


    width:100%;


    height:400px;


    border:0;


    border-radius:
    var(--radius);


}





/* ======================================================
   GALLERY
====================================================== */


.gallery-grid {


    display:grid;


    grid-template-columns:
    repeat(3,1fr);


    gap:25px;


}



.gallery-item {


    overflow:hidden;


    border-radius:
    var(--radius);


    cursor:pointer;


}



.gallery-item img {


    width:100%;


    height:300px;


    object-fit:cover;


    transition:
    var(--transition);


}



.gallery-item:hover img {


    transform:
    scale(1.05);


}





/* ======================================================
   SOCIAL LINKS
====================================================== */


.social-links {


    display:flex;


    gap:15px;


}



.social-links a {


    width:38px;


    height:38px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:
    50%;


    background:
    var(--forest);


    color:white;


    transition:
    var(--transition);


}



.social-links a:hover {


    background:
    var(--emerald);


}





/* ======================================================
   FOOTER
====================================================== */


.footer {


    background:
    var(--forest);


    color:white;


    padding:
    25px 0;


}



.footer-content {


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;


}



.footer p {


    margin:0;


    font-size:
    .9rem;


}





/* ======================================================
   HERO SLIDER SUPPORT
====================================================== */


.hero {


    position:relative;


}



.slide {


    display:none;


}



.slide.active {


    display:block;


}



.slider-btn {


    position:absolute;


    top:50%;


    transform:
    translateY(-50%);


    background:white;


    border:0;


    padding:12px;


    cursor:pointer;


    border-radius:50%;


}



.slider-btn.prev {


    left:20px;


}



.slider-btn.next {


    right:20px;


}





.slider-dots {


    display:flex;


    justify-content:center;


    gap:10px;


}



.dot {


    width:12px;


    height:12px;


    border-radius:50%;


    background:
    #ccc;


    cursor:pointer;


}



.dot.active {


    background:
    var(--emerald);


}

/* ======================================================
   RESPONSIVE DESIGN
====================================================== */


/* ======================================================
   TABLET DEVICES
====================================================== */


@media (max-width: 1024px) {


    .features-grid {


        grid-template-columns:
        repeat(2,1fr);


    }



    .menu-grid {


        grid-template-columns:
        repeat(2,1fr);


    }



    .gallery-grid {


        grid-template-columns:
        repeat(2,1fr);


    }



    .grid-2 {


        gap:35px;


    }



}





/* ======================================================
   MOBILE NAVIGATION
====================================================== */


@media (max-width: 850px) {



    .hamburger {


        display:block;


        z-index:1100;


    }




    .navbar {


        position:fixed;


        top:85px;


        right:-100%;


        width:280px;


        height:calc(100vh - 85px);


        background:white;


        padding:40px 25px;


        box-shadow:
        var(--shadow);


        transition:
        var(--transition);


    }





    .navbar.active {


        right:0;


    }





    .nav-links {


        flex-direction:column;


        gap:25px;


    }





    .hamburger.active span:nth-child(1) {


        transform:
        rotate(45deg)
        translate(6px,6px);


    }




    .hamburger.active span:nth-child(2) {


        opacity:0;


    }




    .hamburger.active span:nth-child(3) {


        transform:
        rotate(-45deg)
        translate(6px,-6px);


    }





    .grid-2 {


        grid-template-columns:
        1fr;


    }



}





/* ======================================================
   SMALL MOBILE
====================================================== */


@media (max-width: 600px) {



    .container {


        width:
        92%;


    }




    .section {


        padding:
        55px 0;


    }





    .features-grid {


        grid-template-columns:
        1fr;


    }





    .menu-grid {


        grid-template-columns:
        1fr;


    }





    .gallery-grid {


        grid-template-columns:
        1fr;


    }





    .menu-card img {


        height:
        220px;


    }





    .gallery-item img {


        height:
        250px;


    }





    .footer-content {


        flex-direction:
        column;


        text-align:center;


    }





    .cta {


        padding:
        70px 0;


    }





    .contact-form {


        padding:
        25px;


    }




}





/* ======================================================
   ACCESSIBILITY
====================================================== */


button,
a {


    -webkit-tap-highlight-color:
    transparent;


}



button:focus,
a:focus,
input:focus,
textarea:focus {


    outline:
    3px solid rgba(16,185,129,.35);


}





/* ======================================================
   SMOOTH MICRO INTERACTIONS
====================================================== */


.btn,
.feature-box,
.menu-card,
.social-links a,
.gallery-item {


    transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;


}





/* ======================================================
   PRINT SUPPORT
====================================================== */


@media print {


    .header,
    .footer,
    .btn {


        display:none;


    }



    body {


        background:white;


    }


}