/* =====================================================
   FINGERLICK RESTAURANT
   STYLE.CSS
   PART 1 - GLOBAL + NAVBAR + HERO
===================================================== */

/*=========================
  GOOGLE FONT FALLBACK
==========================*/

:root{

    /* COLORS */

    --bg:#FFF9F2;
    --surface:#FFFFFF;

    --primary:#F25C3A;
    --primary-dark:#D84A2A;

    --secondary:#F7A928;

    --accent:#2E8B57;

    --text:#243041;
    --text-light:#6F7682;

    --border:#ECE5DA;

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

    --radius:18px;

    --transition:.35s ease;

    --container:1180px;

}


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

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button,
input,
textarea{

    font:inherit;

}


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

h1,
h2,
h3,
h4{

    font-family:'Playfair Display',serif;

    font-weight:700;

    color:var(--text);

}

h1{

    font-size:clamp(2.8rem,6vw,5rem);

}

h2{

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

}

h3{

    font-size:1.5rem;

}

p{

    color:var(--text-light);

}


/*=========================
LAYOUT
==========================*/

.container{

    width:min(92%,var(--container));

    margin:auto;

}

.section{

    padding:4.5rem 0;

}

.section-heading{

    text-align:center;

    margin-bottom:2.5rem;

}

.section-heading h2{

    position:relative;

    display:inline-block;

    padding-bottom:.5rem;

}

.section-heading h2::after{

    content:"";

    width:70px;

    height:4px;

    background:var(--primary);

    border-radius:20px;

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:0;

}


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

.hero-button,
.reservation-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 36px;

    color:#fff;

    font-weight:600;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    background-size:200% 200%;

    transition:.4s ease;

    box-shadow:
        0 12px 25px rgba(242,92,58,.25);

}

.hero-button:hover,
.reservation-button:hover{

    background-position:right center;

    transform:translateY(-4px);

}


/*=========================
NAVBAR
==========================*/

.site-header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

}

/*=========================
PREMIUM GLASS NAVBAR
==========================*/

.navbar{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    padding:18px 0;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,.12);

    transition:.35s ease;

}

.navbar.scrolled{

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

    border-bottom:1px solid rgba(0,0,0,.05);

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

}

.logo{
    font-family:'Playfair Display',serif;
    font-size:2rem;
    color:#fff;
    font-weight:700;
    transition:var(--transition);
}

.logo img {
    height: 70px;
    width: auto;
    display: block;
}

.navbar.scrolled .logo{

    color:var(--primary);

}

.nav-menu{

    display:flex;

    gap:2rem;

}

.nav-link{

    color:#fff;

    font-weight:500;

    transition:var(--transition);

    position:relative;

}

.navbar.scrolled .nav-link{

    color:var(--text);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}
.nav-link.active{
    color: var(--secondary);
}

.nav-link.active::after{
    width: 100%;
}


/*=========================
HAMBURGER
==========================*/

.hamburger{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

}

.hamburger-line{

    display:block;

    width:28px;

    height:3px;

    background:#fff;

    margin:6px 0;

    transition:.3s;

}

.navbar.scrolled .hamburger-line{

    background:var(--text);

}


/*=========================
HERO
==========================*/
.hero{
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 120px 0 80px;
}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(15,25,40,.58);

}
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
    animation: heroReveal .9s ease;
}

@keyframes heroReveal{

    from{

        opacity:0;

        transform:
            translateY(40px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

.hero-title{

    color:#fff;

    margin-bottom:1rem;

}

.hero-tagline{
    color:#F3F3F3;
    font-size:1.15rem;
    margin-bottom:1.5rem;
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
}


/*=========================
ANIMATIONS
==========================*/

.fade-in{

    opacity:0;

    transform:translateY(35px);

    transition:.8s ease;

}

.fade-in.show{

    opacity:1;

    transform:translateY(0);

}

.slide-left{

    opacity:0;

    transform:translateX(-50px);

    transition:.8s ease;

}

.slide-left.show{

    opacity:1;

    transform:translateX(0);

}

.slide-right{

    opacity:0;

    transform:translateX(50px);

    transition:.8s ease;

}

.slide-right.show{

    opacity:1;

    transform:translateX(0);

}


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

@media(max-width:768px){

.nav-menu{

    position:fixed;

    top:80px;

    right:-100%;

    width:260px;

    background:#fff;

    flex-direction:column;

    padding:2rem;

    gap:1.4rem;

    box-shadow:var(--shadow);

    transition:.35s;

}

.nav-menu.active{

    right:20px;

}

.nav-link{

    color:var(--text);

}
   .hamburger{
        display:block;
    }
}
.logo{

    font-size:1.7rem;

    }
/* =========================
   HEADER / NAVBAR
   ========================= */

.navbar {
    /* your navbar styles */
}
.nav-menu {
    /* your menu styles */
}

.hero{

    min-height:90vh;

}

.hero-tagline{

    font-size:1rem;

}

.section{

    padding:3.5rem 0;

}

/*=====================================================
    ABOUT
======================================================*/

.about-content{

    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    align-items:center;

}

.about-text{

    display:flex;
    flex-direction:column;
    gap:1.2rem;

}

.about-text p{

    font-size:1rem;
    line-height:1.9;

}

.about-image{

    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:var(--shadow);

    animation:floatImage 8s ease-in-out infinite;

}

.about-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;

}

.about-image:hover img{

    transform:scale(1.06);

}


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

.menu{

    background:#FFFDFC;

}

.menu-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:1.8rem;

}

.menu-card{

    background:var(--surface);
    border-radius:var(--radius);
    padding:1.7rem;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
    overflow:hidden;

}

.menu-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:var(--primary);

}

.menu-card:hover,
.testimonial-card:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:
        0 18px 45px rgba(0,0,0,.12);

}

.menu-category{

    color:var(--primary);
    margin-bottom:1.4rem;
    padding-bottom:.6rem;
    border-bottom:2px solid rgba(242,92,58,.15);

}

.menu-list{

    display:flex;
    flex-direction:column;
    gap:1.3rem;

}

.menu-item{

    display:grid;
    grid-template-columns:1fr auto;
    gap:.7rem;
    align-items:start;

}

.menu-item h4{

    font-family:'Poppins',sans-serif;
    font-size:1.05rem;
    font-weight:600;
    color:var(--text);

}

.menu-item p{

    grid-column:1;
    font-size:.92rem;
    color:var(--text-light);

}

.menu-item span{

    grid-row:1 / span 2;
    grid-column:2;

    background:var(--secondary);

    color:#fff;

    min-width:58px;

    text-align:center;

    padding:.45rem .75rem;

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    align-self:center;

    transition:var(--transition);

}

.menu-item:hover span{

    background:var(--accent);
    transform:scale(1.08);

}

.menu-item:not(:last-child){

    padding-bottom:1rem;
    border-bottom:1px dashed var(--border);

}


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

@media (min-width:768px){

.about-content{

    grid-template-columns:1fr 1fr;
    gap:3rem;

}

.menu-grid{

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

}

}


/*=====================================================
    DESKTOP
======================================================*/

@media (min-width:1100px){

.about-content{

    gap:4rem;

}

.menu-grid{

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

}

.menu-card{

    padding:2rem;

}

.about-text p{

    font-size:1.05rem;

}

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

.gallery{

    background:var(--surface);

}

.gallery-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:1rem;

}

.gallery-item{

    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    cursor:pointer;

}

.gallery-item img{

    transition:
        transform .6s ease,
        filter .6s ease;

}

.gallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(.85);

}

.gallery-item::before{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(36,48,65,.65),
        rgba(36,48,65,0));
    opacity:0;
    transition:var(--transition);
    z-index:1;

}

.gallery-item::after{

    content:"+";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:var(--primary);
    font-size:2rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:var(--transition);
    z-index:2;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item:hover::before,
.gallery-item:hover::after{

    opacity:1;

}


/*=====================================================
    LIGHTBOX (Prepared for JavaScript)
======================================================*/

.lightbox{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    z-index:9999;

}

.lightbox.active{

    opacity:1;
    visibility:visible;

}

.lightbox img{

    width:min(92%,950px);
    border-radius:12px;

}

.lightbox-close{

    position:absolute;
    top:30px;
    right:40px;
    color:#fff;
    font-size:2.5rem;
    cursor:pointer;

}


/*=====================================================
    RESERVATIONS
======================================================*/

.reservations{

    background:var(--bg);

}

.reservation-form{

    max-width:760px;
    margin:auto;
    background:var(--surface);
    padding:2rem;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid var(--border);

}

.form-group{

    display:flex;
    flex-direction:column;
    margin-bottom:1.3rem;

}

.form-group label{

    margin-bottom:.45rem;
    font-weight:600;
    color:var(--text);

}

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

    width:100%;
    padding:.95rem 1rem;
    border:2px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    outline:none;
    transition:var(--transition);

}

.form-group textarea{

    resize:vertical;
    min-height:150px;

}

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

    border-color:var(--primary);
    box-shadow:0 0 0 5px rgba(242,92,58,.15);

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#9CA3AF;

}

.reservation-button{

    width:100%;
    border:none;
    cursor:pointer;
    margin-top:.6rem;
    font-size:1rem;

}

.reservation-button:hover{

    letter-spacing:.5px;

}


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

@media (min-width:768px){

.gallery-grid{

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

}

.reservation-form{

    padding:2.5rem;

}

}


/*=====================================================
    DESKTOP
======================================================*/

@media (min-width:1100px){

.gallery-grid{

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

}

.gallery-item img{

    height:280px;

}

.reservation-form{

    max-width:850px;
    padding:3rem;

}

}
/*=====================================================
    TESTIMONIALS
======================================================*/

.testimonials{

    background:var(--surface);

}

.testimonial-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;

}

.testimonial-card{

    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:2rem 1.6rem;
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
    overflow:hidden;

}

.testimonial-card::before{

    content:"❝";
    position:absolute;
    top:18px;
    right:22px;
    font-size:4rem;
    color:rgba(242,92,58,.12);
    font-family:serif;
    line-height:1;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.testimonial-quote{

    font-style:italic;
    color:var(--text-light);
    margin-bottom:1.5rem;
    line-height:1.8;

}

.testimonial-name{

    color:var(--primary);
    font-family:'Poppins',sans-serif;
    font-size:1rem;
    font-weight:600;

}

/* Ready for future JavaScript slider */

.testimonial-slide{

    display:none;

}

.testimonial-slide.active{

    display:block;

}


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

.site-footer{

    background:#243041;
    color:#F8F8F8;
    padding:4rem 0 2rem;

}

.footer-container{

    display:grid;
    grid-template-columns:1fr;
    gap:2rem;

}

.site-footer h3{

    color:#fff;
    margin-bottom:1rem;
    font-size:1.35rem;

}

.site-footer p{

    color:#D9DCE3;
    margin-bottom:.7rem;

}

.footer-contact,
.footer-hours,
.footer-social,
.footer-map{

    display:flex;
    flex-direction:column;

}

/*=====================================================
    FOOTER SOCIAL ICONS
======================================================*/

.footer-social{

    display:flex;
    flex-direction:row;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;

}


.footer-social a{

    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:var(--transition);

}


.footer-social i{

    width:42px;
    height:42px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

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

    font-size:1.1rem;

    transition:var(--transition);

}


.footer-social a:hover i{

    background:var(--primary);

    transform:translateY(-4px);

}


.footer-social a:hover{

    color:var(--secondary);

}


/* Mobile adjustment */

@media(max-width:768px){

    .footer-social{

        justify-content:flex-start;

    }

}

/* Map */

.map-placeholder{

    width:100%;
    height:220px;
    border-radius:16px;
    background:rgba(255,255,255,.08);
    border:2px dashed rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#D9DCE3;
    font-weight:500;

}

.map-placeholder::before{

    content:"Google Map";

}

/* Copyright */

.footer-bottom{

    margin-top:3rem;
    padding-top:1.5rem;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.12);

}

.footer-bottom p{

    color:#D9DCE3;
    margin:0;

}


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

@media (min-width:768px){

.testimonial-grid{

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

}

.footer-container{

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

}

}


/*=====================================================
    DESKTOP
======================================================*/

@media (min-width:1100px){

.testimonial-grid{

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

}

.footer-container{

    grid-template-columns:1.2fr 1fr 1fr 1.3fr;
    gap:2.5rem;

}

.site-footer{

    padding:5rem 0 2rem;

}

}
/*=====================================================
    PART 5
    UTILITIES • ANIMATIONS • RESPONSIVE POLISH
======================================================*/


/*=========================
UTILITY CLASSES
==========================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.hidden{

    display:none !important;

}

.visible{

    display:block !important;

}

.w-100{

    width:100%;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mt-3{

    margin-top:3rem;

}

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mb-3{

    margin-bottom:3rem;

}


/*=========================
SECTION TRANSITIONS
==========================*/

section{

    position:relative;

}

section:not(.hero){

    animation:fadeSection .8s ease;

}

@keyframes fadeSection{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================
IMAGE IMPROVEMENTS
==========================*/

img{

    max-width:100%;

    height:auto;

    border-radius:inherit;

}


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

a{

    transition:var(--transition);

}

a:hover{

    opacity:.95;

}


/*=========================
BUTTON ACTIVE STATE
==========================*/

.hero-button:active,
.reservation-button:active{

    transform:scale(.97);

}


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

input,
textarea,
button{

    -webkit-tap-highlight-color:transparent;

}

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

    outline:3px solid rgba(247,169,40,.45);

    outline-offset:3px;

}


/*=========================
CUSTOM SCROLLBAR
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F2EFE9;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/*=========================
TEXT SELECTION
==========================*/

::selection{

    background:var(--secondary);

    color:#fff;

}


/*=========================
SMOOTH IMAGE HOVER
==========================*/

.about-image img,
.gallery-item img{

    will-change:transform;

}


/*=========================
TABLET IMPROVEMENTS
==========================*/

@media (min-width:768px){

    .container{

        width:min(90%,var(--container));

    }

    .section{

        padding:5rem 0;

    }

}


/*=========================
LAPTOP
==========================*/

@media (min-width:1024px){

    .section{

        padding:5.5rem 0;

    }

    .hero-content{

        max-width:820px;

    }

}


/*=========================
LARGE DESKTOP
==========================*/

@media (min-width:1400px){

    :root{

        --container:1280px;

    }

    .hero-title{

        font-size:5.4rem;

    }

    .hero-tagline{

        font-size:1.2rem;

    }

}


/*=========================
REDUCED MOTION
==========================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}


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

@media print{

.navbar,
.hamburger,
.hero-button,
.reservation-button,
.footer-social{

    display:none;

}

body{

    background:#fff;

}
/*=========================
FOOTER YEAR
==========================*/


}

/*=========================
END OF STYLESHEET
==========================*/