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

ul {list-style-type: none;}

:root {
    --text: #222;
    --title: #222;
    --bg: white;
    --code-bg: #232936;
    --link: #ED896D;
    --green: #649328;
    --brown: #a9796a;
    --header-height: 102px;
  }
  /* @media (prefers-color-scheme: dark) {
    :root {
      --text: rgba(255, 255, 255, 0.88);
      --title: white;
      --bg: rgb(40, 44, 53);
      --code-bg: #191d27;
      --link: #F5B82E;
      --green: #649328;
      --brown: #a9796a;

    }
  } */

body {
    --font-size-date: 14px;
    --font-size-h1: 40px;
    --font-size-h2: 29px;
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--text)
}

a {
    color: var(--green);
    text-decoration: none;
}
.section-content,
.header-content,
.footer-content {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

@media screen and (max-width: 1200px) {
    .section-content,
    .header-content,
    .footer-content {
        max-width: 740px;
        margin: 0 auto;
        padding: 0 20px 80px;
    }
}

@media screen and (max-width: 768px) {
    .section-content,
    .header-content,
    .footer-content {
        width: 87.5%;
        min-width: 300px;
        margin: 0 auto;
        padding: 0 20px 80px;
    }
}

section + section {
    padding-top: 80px;
}

.visually-hidden {
    position: absolute;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(0 0 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

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

header {
    position: sticky;
    top: 0;
    /* background-color: var(--bg); */
    z-index: 20;
    border-bottom: 1px solid rgba(128, 128, 128, 0.169);
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(251,251,253,0.8);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 20px;
}

.header-content nav.full ul {
    display: flex;
    gap: 1em;
    margin-bottom: 2px;
}

.header-content nav.mini {
    display: none;
}

@media screen and (max-width: 768px) {
    .header-content nav.full {
        display: none;
    }

    .header-content nav.mini {
        display: block;
    }
}

.header-content nav.mini ul {
    position: absolute;
    top: 106px;
    left: 0;
    width: 100%;
    padding: 0px;
    text-align: center;
    background-color: white;
    height: 0;
    overflow: hidden;
    transition: all .2s ease-out;
    font-size: 40px;
    line-height: 58px;
    font-weight: 300;
}

#menuToggle {
    display: none;
}

#menuToggle:checked + label + ul {
    height: 330px;
    padding: 20px
}

#menuToggle + label .open {
    display: none;
}

#menuToggle:checked + label .open {
    display: block;
}

#menuToggle:checked + label .closed {
    display: none;
}

.header-logo {
    width: 173px;
    height: 62px;
}

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

.section-hero {
    background-image: url('/assets/hero.jpeg');
    height: calc(100vh - var(--header-height));
    background-origin: center;
    background-size:cover
}

.darken {
    height: 100%;
    background-color: rgba(0,0,0,.15);
}

.section-hero .section-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5em;
}

.hero-logo {
    text-align: center;
    color: white;
}

@media screen and (max-width: 768px) {
    .hero-logo img{
        width: 85%;
        min-width: 300px;
    }

    .logo-sub-heading {
        font-size: 24px;
        line-height: 28px;
    }
}

.section-hero .cta-list {
    display: flex;
    gap: 2em;
}
.section-hero .cta-btn {
    text-decoration: none;
    font-size: x-large;
    padding: .3em 1em;
    background-color: var(--bg);
    color: var(--green);
    border-radius: .1em;
    transition: background .3s ease-out, color .3s ease-out;
}

.section-hero .cta-btn:hover {
    background-color: var(--green);
    color: white;
}

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

h2 {
    font-size: 44px;
    line-height: 48px;
}

h3 {
    font-size: 32px;
    line-height: 36px;
}

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

.section-about  {
    background-color: var(--green);
    color: white;
}

/*======================*/
.section-food .section-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 400px 400px;
    gap: 20px;
}



@media screen and (max-width: 768px) {
    .section-food .section-content {
        display: flex;
        flex-direction: column;
    }
}

.section-food .section-title {
    grid-row: 1;
    grid-column: 1 / span 2;
}

.card {
    border-radius: 20px;
    overflow: clip;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .1s ease-out;
}

@media screen and (max-width: 768px) {
    .card {
        width: 100%;
        max-width: 300px;
        height: 400px;
        margin: 0 auto;
    }
}

.card a {
    text-decoration: none;
    background-color: red;
}

.card:hover {
   transform: scale(1.01);
    
}

.section-food .food-menu {
    background-image: url('/assets/menu_wrap.jpeg');
}

.section-food .food-special {
    background-image: url('/assets/menu_shelf_food_TEMP.webp');
}

.section-food .food-deserts {
    background-image: url('/assets/sweets_TEMP.jpg');
}

.section-food .food-frozen {
    background-image: url('/assets/menu_food_TEMP.jpg');
}

.card-contents {
    color: white;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(255,255,255,0) 50%); 
}

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

footer {
    padding-top: 56px;
    background-color: var(--brown);
    color: white
}

footer h3 {
    margin-bottom: 10px;
}

.footer-content {

}

.footer-row-1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.footer-row-2 {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1200px) {
    .footer-row-1 {
        flex-wrap: wrap;
        gap: 20px;
        /* flex-direction: column; */
    }
}

@media screen and (max-width: 768px) {
    .footer-row-2 {
        flex-direction: column;
        gap: 20px;
    }
}

footer .map {
    width: 400px;
    border-radius: 20px;
    overflow: hidden;
}

@media screen and (max-width: 1200px) {
    footer .map {
        width: 100%
    }
}

.footer-content .address {  }

.footer-content .hours {

  }

.footer-content .contact {  }

.footer-content .hours table td {
    padding-right: 1em;
}

/* .footer-content .social { grid-area: 4 / 1 / 5 / 2; } */


.footer-content .footer-logo {   }
.footer-logo img {
    width: 300px;
}
.footer-content .credit {  } 

.social-buttons {
    display: flex;
    gap: 10px;
}



/* catering */

.section-catering {
    background-color: hsl(0, 0%, 95%);
    color:#191d27
}

.section-catering h2, .section-catering h3, .section-catering p {
    margin-bottom: 20px;
}

.section-catering .pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 400px;
    text-align: center;
    column-gap: 20px;
    margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
    .section-catering .pricing {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 400px);
        row-gap: 20px;
    }

    .section-catering .option {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

.pricing div {
    padding: 20px;
    background-color: white;
    border-radius: 20px;
}

/* SECONDARY PAGES */

.page-secondary .secondary-hero {
    background-color: var(--green);
    color: white;
    margin-bottom: 0;
    text-align: center;
    font-style: italic;
}

.secondary-hero .section-content {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* menu page */
.section-menu h3 {
    margin-bottom: 10px;
}
.section-menu h4 {
    font-size: 20px;
    line-height: 24px;
    margin: 10px 0 5px;
    color: var(--green);
    font-weight: 600;
}

.section-menu ul li:nth-child(even) h4 {
    color: var(--brown)
}

.section-menu .description {
    font-style: italic;
}