/*======================================================
    FEKETERIGÓ 1.0
    STYLE.CSS
======================================================*/


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

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

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

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;

    color:#2F2F2F;

    background:#F8F6F2;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

}


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

:root{

    --green:#23402C;

    --green-dark:#1B3122;

    --gold:#B8924A;

    --gold-light:#D7B36A;

    --white:#FFFFFF;

    --light:#F8F6F2;

    --gray:#777777;

    --border:#ECE7DE;

    --shadow:

        0 15px 40px rgba(0,0,0,.08);

    --radius:14px;

    --transition:.35s;

}


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

h1,
h2,
h3,
h4{

    font-family:

        'Cormorant Garamond',
        serif;

    font-weight:600;

    color:var(--green);

}

h1{

    font-size:clamp(3rem,7vw,6rem);

    line-height:1.1;

}

h2{

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

}

h3{

    font-size:1.5rem;

}

p{

    color:#555;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    width:100%;

    display:block;

}


/*======================================================
    CONTAINER
======================================================*/

.container{

    width:min(1180px,92%);

    margin:auto;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--gold);

    color:white;

}

.btn-primary:hover{

    background:#C9A65A;

    transform:translateY(-2px);

}

.btn-secondary{

    border:2px solid white;

    color:white;

}

.btn-secondary:hover{

    background:white;

    color:var(--green);

}


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

section{

    padding:100px 0;

}

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-subtitle{

    color:var(--gold);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.8rem;

    margin-bottom:15px;

}

.section-description{

    max-width:700px;

    margin:20px auto 0;

}


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

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 7%;

    transition:.4s;

}

.navbar.scrolled{

    background:rgba(248,246,242,.96);

    backdrop-filter:blur(14px);

    box-shadow:

        0 8px 25px rgba(0,0,0,.08);

}

.logo a{

    display:flex;

    flex-direction:column;

}

.logo-main{

    font-size:2rem;

    letter-spacing:2px;

    color:white;

    transition:.3s;

}

.logo-sub{

    color:white;

    letter-spacing:3px;

    font-size:.75rem;

}

.navbar.scrolled .logo-main,

.navbar.scrolled .logo-sub{

    color:var(--green);

}

#menu{

    display:flex;

    gap:38px;

    list-style:none;

}

#menu a{

    color:white;

    font-weight:500;

    transition:.3s;

}

.navbar.scrolled #menu a{

    color:var(--green);

}

#menu a:hover{

    color:var(--gold);

}

.btn-book{

    background:var(--gold);

    color:white;

    padding:14px 24px;

    border-radius:999px;

    transition:.3s;

}

.btn-book:hover{

    background:var(--green);

}

.hamburger{

    display:none;

    width:44px;

    height:44px;

    background:none;

    border:none;

    cursor:pointer;

}

.hamburger span{

    display:block;

    width:28px;

    height:3px;

    margin:6px auto;

    background:white;

    transition:.3s;

}

.navbar.scrolled .hamburger span{

    background:var(--green);

}


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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        url("../img/hero.webp")

        center center/cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(0,0,0,.45),

            rgba(0,0,0,.55)

        );

}

.hero-content{

    position:relative;

    z-index:2;

    width:min(850px,90%);

    text-align:center;

    color:white;

}

.hero-top{

    letter-spacing:6px;

    color:white;

    margin-bottom:18px;

}

.hero h1{

    color:white;

    margin-bottom:28px;

}

.hero-text{

    font-size:1.2rem;

    color:white;

    max-width:700px;

    margin:auto;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}
/*======================================================
    QUICK INFO
======================================================*/

.quick-info{

    background:#ffffff;

    margin-top:-70px;

    position:relative;

    z-index:20;

}

.quick-info .container{

    display:grid;

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

    gap:30px;

}

.quick-info article{

    background:white;

    border-radius:var(--radius);

    padding:40px 30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.quick-info article:hover{

    transform:translateY(-8px);

}

.quick-info .icon{

    font-size:2.4rem;

    margin-bottom:18px;

}

.quick-info h3{

    margin-bottom:15px;

}


/*======================================================
    FEATURED FOOD
======================================================*/

.food-grid{

    width:min(1180px,92%);

    margin:auto;

    display:grid;

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

    gap:35px;

}

.food-card{

    overflow:hidden;

    background:white;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.35s;

}

.food-card:hover{

    transform:translateY(-10px);

}

.food-card img{

    aspect-ratio:1/1;

    object-fit:cover;

}

.food-content{

    padding:28px;

}

.food-content h3{

    margin-bottom:15px;

}

.center{

    text-align:center;

    margin-top:50px;

}


/*======================================================
    ROOMS PREVIEW
======================================================*/

.rooms-preview{

    width:min(1180px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.rooms-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.rooms-image img{

    height:100%;

    object-fit:cover;

}

.rooms-content p{

    margin:25px 0;

}

.feature-list{

    list-style:none;

    margin:35px 0;

}

.feature-list li{

    padding:10px 0;

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

}


/*======================================================
    ADVANTAGES
======================================================*/

.advantages{

    background:white;

}

.advantages-grid{

    width:min(1180px,92%);

    margin:auto;

    display:grid;

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

    gap:28px;

}

.advantages article{

    background:#F8F6F2;

    padding:45px;

    border-radius:var(--radius);

    text-align:center;

    transition:var(--transition);

}

.advantages article:hover{

    background:var(--green);

    color:white;

    transform:translateY(-8px);

}

.advantages article:hover h3{

    color:white;

}

.advantages span{

    display:inline-flex;

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--gold);

    color:white;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:20px;

}


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

.gallery-grid{

    width:min(1180px,92%);

    margin:auto;

    display:grid;

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

    gap:20px;

}

.gallery-grid img{

    aspect-ratio:4/3;

    object-fit:cover;

    border-radius:18px;

    transition:.35s;

}

.gallery-grid img:hover{

    transform:scale(1.03);

}


/*======================================================
    CONTACT CTA
======================================================*/

.contact-cta{

    background:var(--green);

    color:white;

    text-align:center;

}

.contact-box{

    width:min(760px,92%);

    margin:auto;

}

.contact-box h2{

    color:white;

    margin-bottom:20px;

}

.contact-box p{

    color:rgba(255,255,255,.9);

    margin-bottom:40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


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

footer{

    background:#16271B;

    color:#ddd;

    padding:70px 0 30px;

}

.footer-grid{

    width:min(1180px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}

.footer-grid h3,

.footer-grid h4{

    color:white;

    margin-bottom:18px;

}

.footer-grid ul{

    list-style:none;

}

.footer-grid li{

    margin-bottom:10px;

}

.footer-grid a{

    color:#ddd;

    transition:.3s;

}

.footer-grid a:hover{

    color:var(--gold);

}

.copyright{

    text-align:center;

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    font-size:.9rem;

}


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

@media(max-width:1024px){

    .food-grid,

    .gallery-grid{

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

    }

    .advantages-grid{

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

    }

    .rooms-preview{

        grid-template-columns:1fr;

    }

    .rooms-content{

        text-align:center;

    }

}


@media(max-width:768px){

    .navbar{

        padding:18px 6%;

    }

    .hamburger{

        display:block;

    }

    #menu{

        position:fixed;

        top:82px;

        left:0;

        width:100%;

        background:white;

        flex-direction:column;

        gap:0;

        display:none;

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

    }

    #menu.active{

        display:flex;

    }

    #menu li{

        border-bottom:1px solid #ececec;

    }

    #menu a{

        display:block;

        padding:18px 30px;

        color:var(--green);

    }

    .btn-book{

        display:none;

    }

    .quick-info .container{

        grid-template-columns:1fr;

    }

    .food-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .advantages-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    section{

        padding:70px 0;

    }

    .hero{

        min-height:90vh;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

}


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

.food-card,
.quick-info article,
.gallery-grid img,
.advantages article,
.rooms-image{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.food-card:hover,
.quick-info article:hover,
.gallery-grid img:hover,
.rooms-image:hover{

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

}

/*======================================================
    RÓLUNK OLDAL
======================================================*/

.page-hero{

    min-height:55vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    background:

        url("../img/restaurant05.webp")

        center/cover;

    text-align:center;

}

.page-hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(20,35,25,.65);

}

.page-hero-content{

    position:relative;

    z-index:2;

    color:white;

    padding:40px 20px;

}

.page-hero h1{

    color:white;

    margin-bottom:20px;

}

.page-hero-content > p:last-child{

    color:white;

    font-size:1.15rem;

}


/*======================================================
    BEMUTATKOZÁS
======================================================*/

.about-intro,
.about-environment,
.about-accommodation{

    width:min(1180px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-intro-image,
.about-environment-image,
.about-accommodation-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-intro-image img,
.about-environment-image img,
.about-accommodation-image img{

    aspect-ratio:4/5;

    object-fit:cover;

}

.about-intro-content p,
.about-environment-content p,
.about-accommodation-content p{

    margin:22px 0;

}

.about-intro-content h2,
.about-environment-content h2,
.about-accommodation-content h2{

    margin-bottom:25px;

}


/*======================================================
    KÖRNYEZET
======================================================*/

.about-environment{

    background:white;

    max-width:none;

    width:100%;

    padding:100px max(4%,calc((100% - 1180px)/2));

}

.about-environment-image{

    order:2;

}


/*======================================================
    KONYHA
======================================================*/

.about-kitchen{

    background:#F8F6F2;

}

.kitchen-grid{

    width:min(1180px,92%);

    margin:auto;

    display:grid;

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

    gap:30px;

}

.kitchen-card{

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.kitchen-card:hover{

    transform:translateY(-8px);

}

.kitchen-card img{

    aspect-ratio:4/3;

    object-fit:cover;

}

.kitchen-card-content{

    padding:30px;

}

.kitchen-card-content h3{

    margin-bottom:15px;

}


/*======================================================
    SZÁLLÁS
======================================================*/

.about-accommodation{

    padding-top:100px;

    padding-bottom:100px;

}

.about-accommodation-content{

    padding:20px 0;

}


/*======================================================
    ZÁRÓ CTA
======================================================*/

.about-closing{

    background:

        linear-gradient(

            rgba(25,50,35,.88),

            rgba(25,50,35,.88)

        ),

        url("../img/restaurant04.webp")

        center/cover;

    text-align:center;

}

.about-closing-content{

    width:min(760px,92%);

    margin:auto;

}

.about-closing h2{

    color:white;

    margin-bottom:25px;

}

.about-closing p{

    color:rgba(255,255,255,.9);

    margin-bottom:35px;

}

.about-closing .section-subtitle{

    color:var(--gold-light);

}


/*======================================================
    RÓLUNK – MOBIL
======================================================*/

@media(max-width:768px){

    .page-hero{

        min-height:45vh;

    }

    .about-intro,
    .about-environment,
    .about-accommodation{

        grid-template-columns:1fr;

        gap:35px;

        padding-top:60px;

        padding-bottom:60px;

    }

    .about-environment{

        padding-left:4%;

        padding-right:4%;

    }

    .about-environment-image{

        order:initial;

    }

    .about-intro-image img,
    .about-environment-image img,
    .about-accommodation-image img{

        aspect-ratio:4/3;

    }

    .kitchen-grid{

        grid-template-columns:1fr;

    }

    .about-intro-content,
    .about-environment-content,
    .about-accommodation-content{

        text-align:center;

    }

}