/*=====================================================
  SAVANNA'S COFFEE HOUSE
  Ataru
  Date: 07052025
=====================================================*/

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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

:root{

    /* Colors */
    --cream:#F8F5F0;
    --tan:#E8DED2;
    --brown:#6B4A36;
    --dark:#2D241F;
    --light:#FFFFFF;
    --accent:#A56A43;
    --accent-light:#C58A5A;
    --footer:#221A16;

    /* Borders */
    --border:#D8CCC0;

    /* Fonts */
    --heading:'Gelasio', serif;
    --body:'Google Sans', sans-serif;

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

    /* Layout */
    --max-width:1200px;

}

/*========================
  BASE
=========================*/

html,
body{
    width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

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

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--heading);

    color:var(--dark);

    font-weight:600;

    letter-spacing:.03em;

    line-height:1.2;

}

h1{

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

}

h2{

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

}

h3{

    font-size:1.8rem;

}

.accenth3{

    color:var(--accent-light);

}

p,
ul{

    margin-bottom:1.25rem;
    font-family:var(--body);

}

ul li{

    text-align:left;

}

.subtitle{

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.9rem;

    color:var(--accent);

    font-weight:bold;

}

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

.wrapper{

    width:min(92%,1100px);

    margin:auto;

}

.section{

    padding:5rem 0;

}

hr {  
    border:0;
    height:1px;
    background:var(--accent-light);
    margin:3rem 0;
}

/*=========================================
    CONTACT FORM
=========================================*/

form{

    max-width:800px;

    margin:0 auto;

}

fieldset{

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

    border-radius:16px;

    padding:2rem;

    margin-bottom:2rem;

    background:var(--light);

}

legend{

    font-family:var(--heading);

    font-size:1.3rem;

    color:var(--brown);

    padding:0 .5rem;

}

.flex-form{

    display:flex;

    flex-direction:column;

    margin-bottom:1.5rem;

}

.flex-form label{

    margin-bottom:.5rem;

    font-weight:600;

}

.flex-form input,
.flex-form textarea{

    padding:.9rem;

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

    border-radius:10px;

    font-family:var(--body);

    font-size:1rem;

}

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

    outline:none;

    border-color:var(--accent);

}

textarea{

    resize:vertical;

}

.flex-buttons{

    display:flex;

    gap:1rem;

    justify-content:center;

    flex-wrap:wrap;

}

.flex-buttons input{

    padding:.9rem 2rem;

    border:none;

    border-radius:40px;

    background:var(--accent);

    color:white;

    cursor:pointer;

    transition:.3s;

    font-family:var(--body);

}

.flex-buttons input:hover{

    background:var(--brown);

}

@media (max-width:768px){

    fieldset{

        padding:1.5rem;

    }

    .flex-buttons{

        flex-direction:column;

    }

    .flex-buttons input{

        width:100%;

    }

}

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

nav{

    background:rgba(248,245,240,.96);

    position:sticky;

    top:0;

    z-index:1000;

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

}

.nav-container{

    width:90%;

    max-width:var(--max-width);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.2rem 0;

}

.logo{

    font-family:var(--heading);

    font-size:1.9rem;

    color:var(--brown);

}

.nav-links{

    display:flex;

    gap:2rem;

}

.nav-links a{

    font-weight:600;

    position:relative;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--accent);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

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

header{

    width:100%;

    height:clamp(300px,55vw,700px);

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:var(--tan);

}

.header-content{

    max-width:700px;

}

.header-content p{

    font-size:1.1rem;

}

header img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

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

.btn{

    display:inline-block;

    margin-top:1rem;

    padding:.9rem 2rem;

    background:var(--accent);

    color:white;

    border-radius:40px;

    transition:.3s;

}

.btn:hover{

    background:var(--brown);

}

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

.card-grid{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:1.5rem;

    flex-wrap:wrap;

    margin-top:2rem;

}

.card{

    width:280px;

    background:var(--light);

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;

}

.container-card{

    width:100%;

    background:var(--light);

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.container-card img{

    width:100%;

    height:500px;

    object-fit:cover;

}
}

.card:hover{

    transform:translateY(-8px);

}

.card img{

    width:100%;

    height:180px;

    object-fit:cover;

}

.card-content{

    padding:1.75rem;

}

.card-content h3{

    margin-bottom:.75rem;

}

.card-content p{

    color:#555;

}

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

.gallery{

    display:grid;

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

    grid-auto-rows:180px;

    gap:12px;

    margin-top:2rem;

}

.gallery img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:14px;

}

.gallery .large{

    grid-column:span 2;

    grid-row:span 2;

}

.gallery .wide{

    grid-column:span 2;

}

.gallery .tall{

    grid-row:span 2;

}

/*========================
  SINGLE COLUMN
=========================*/

.single-column{

    max-width:900px;

    margin:auto;

}

/*========================
  THREE COLUMN GRID
=========================*/

.three-column{

    display:grid;

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

    gap:2rem;

    align-items:start;

}

/*=========================================
    TWO COLUMN LAYOUT
=========================================*/

.two-column{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:3rem;

    margin:4rem auto;

    align-items:start;

}

.menu-column{

    background:var(--light);

    padding:2rem;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.menu-column h2{

    margin-bottom:1.5rem;

    padding-bottom:.75rem;

    border-bottom:2px solid var(--accent);

}

.menu-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:1rem;

    padding:1rem 0;

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

}

.menu-item:last-child{

    border-bottom:none;

}

.menu-info h3{

    font-size:1.2rem;

    margin-bottom:.25rem;

}

.menu-info p{

    margin:0;

    color:#666;

    font-size:.95rem;

}

.price{

    font-weight:bold;

    color:var(--accent);

    white-space:nowrap;

}

@media (max-width:768px){

    .two-column{

        grid-template-columns:1fr;

    }

}

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

footer{

    background:var(--footer);

    color:white;

    text-align:center;

    padding:2.5rem 0;

}

footer p{

    margin:0;

}

.footer-container{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:3rem;

    flex-wrap:wrap;

}

.footer-address{

    text-align:left;

}

.footer-links{

    display:flex;

    margin-top:auto;

    gap:2rem;

    flex-wrap:wrap;

    color:var(--accent-light);

    font-family:var(--body);

}

.footer-links a{

    transition:.3s;

}

.footer-links a:hover{

    color:var(--accent-light);

}

@media(max-width:768px){

.footer-container{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.footer-address{

    text-align:center;

}

.footer-links{

    justify-content:center;

}

}

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

@media(max-width:1000px){

.five-column{

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

}

}

@media(max-width:768px){

.nav-container{

    flex-direction:column;

    gap:1rem;

}

.nav-links{

    flex-wrap:wrap;

    justify-content:center;

    gap:1rem;

}

header{

    min-height:45vh;

    padding:3rem 0;

}

.five-column{

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

}

}

@media(max-width:550px){

.five-column{

    grid-template-columns:1fr;

}

.section{

    padding:3rem 0;

}

}

@media(max-width:900px){

.gallery{

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

}

}

@media(max-width:600px){

.gallery{

    grid-template-columns:1fr;

    grid-auto-rows:220px;

}

.gallery .large,
.gallery .wide,
.gallery .tall{

    grid-column:span 1;

    grid-row:span 1;

}

}

@media (max-width: 768px){

    .three-column{
        grid-template-columns:1fr;
    }

}