/* =========================================================
GENERAL
========================================================= */

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

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #f8f5f0;
color: #2d211b;
line-height: 1.6;
}

a {
text-decoration: none;
color: inherit;
}

img {
max-width: 100%;
}

button,
input,
textarea {
font: inherit;
}

.section {
width: min(1150px, 90%);
margin: 0 auto;
padding: 100px 0;
}

.center {
text-align: center;
}

/* =========================================================
IMAGE PLACEHOLDERS
========================================================= */

.image__placeholder {
background: #d8d0c7;
border: 2px dashed #a99e92;

min-height: 250px;

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

color: #6d6259;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;

}

.image__placeholder span {
pointer-events: none;
}

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

.header {
background: #f8f5f0;
border-bottom: 1px solid #e2dcd5;
}

.navbar {
width: min(1150px, 90%);
margin: 0 auto;

min-height: 80px;

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

}

.logo {
font-size: 25px;
font-weight: bold;
color: #4b2e20;
}

.nav__links {
display: flex;
gap: 35px;
}

.nav__links a {
color: #5d5148;
font-size: 15px;
transition: 0.2s ease;
}

.nav__links a:hover,
.nav__links a.active {
color: #9a5c32;
}

.menu__button {
display: none;

border: none;
background: none;

font-size: 28px;
cursor: pointer;

}

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

.hero {
width: min(1150px, 90%);
margin: 0 auto;

min-height: 650px;

display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 70px;
}

.eyebrow {
color: #a15f35;
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 15px;
}

.hero h1 {
font-family: Georgia, serif;
font-size: 68px;
line-height: 1.05;
margin-bottom: 25px;
}

.hero h1 span {
color: #9a5c32;
}

.hero__text {
max-width: 550px;
color: #6c625a;
font-size: 18px;
margin-bottom: 35px;
}

.hero__image {
min-height: 500px;
}

.hero__buttons {
display: flex;
gap: 15px;
}

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

.button {
display: inline-block;

padding: 14px 24px;

border-radius: 4px;

font-size: 14px;
font-weight: bold;

transition: 0.2s ease;

}

.button--primary {
background: #4b2e20;
color: white;
}

.button--primary:hover {
background: #70432c;
}

.button--secondary {
border: 1px solid #4b2e20;
color: #4b2e20;
}

.button--secondary:hover {
background: #4b2e20;
color: white;
}

.button__wrapper {
margin-top: 50px;
}

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

.section__heading {
max-width: 650px;
margin-bottom: 60px;
}

.section__heading.center {
margin-left: auto;
margin-right: auto;
}

.section__heading h2,
.location h2,
.contact h2 {
font-family: Georgia, serif;
font-size: 44px;
line-height: 1.15;
margin-bottom: 20px;
}

.section__heading p {
color: #6c625a;
}

/* =========================================================
INTRO
========================================================= */

.intro {
border-top: 1px solid #e3ddd6;
}

.intro__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}

.intro__image {
min-height: 500px;
}

.intro__content h3 {
font-family: Georgia, serif;
font-size: 32px;
margin-bottom: 20px;
}

.intro__content p {
color: #6c625a;
margin-bottom: 20px;
}

.text__link {
color: #9a5c32;
font-weight: bold;
}

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

.card__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.coffee__card {
background: white;
border: 1px solid #e4ddd5;
}

.card__image {
min-height: 280px;
border: none;
}

.card__content {
padding: 25px;
}

.card__content h3 {
font-family: Georgia, serif;
font-size: 24px;
margin-bottom: 10px;
}

.card__content p {
color: #6c625a;
}

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

.gallery {
border-top: 1px solid #e3ddd6;
}

.gallery__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-auto-rows: 260px;
gap: 15px;
}

.gallery__grid .image__placeholder {
min-height: 0;
}

.gallery__large {
grid-row: span 2;
}

/* =========================================================
LOCATION
========================================================= */

.location {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;

border-top: 1px solid #e3ddd6;

}

.location__content > p {
color: #6c625a;
margin-bottom: 25px;
}

.location__details {
display: flex;
gap: 50px;
margin: 30px 0;
}

.location__details h3 {
font-size: 16px;
margin-bottom: 5px;
}

.location__details p {
color: #6c625a;
font-size: 14px;
}

.map__placeholder {
min-height: 450px;
background: #dedbd5;
border: 2px dashed #aaa198;

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

color: #716960;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;

}

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

.page__hero {
padding: 110px 20px 90px;
text-align: center;
background: #eee8df;
}

.page__hero h1 {
font-family: Georgia, serif;
font-size: 60px;
margin-bottom: 20px;
}

.page__hero > p:last-child {
max-width: 600px;
margin: 0 auto;
color: #6c625a;
}

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

.menu__section {
border-bottom: 1px solid #e3ddd6;
}

.menu__heading {
display: grid;
grid-template-columns: 1fr 300px;
gap: 60px;
align-items: center;

margin-bottom: 50px;

}

.menu__heading h2 {
font-family: Georgia, serif;
font-size: 42px;
}

.menu__image {
min-height: 200px;
}

.menu__items {
display: flex;
flex-direction: column;
}

.menu__item {
display: flex;
justify-content: space-between;
gap: 30px;

padding: 25px 0;

border-top: 1px solid #ddd5cc;

}

.menu__item h3 {
font-family: Georgia, serif;
font-size: 21px;
margin-bottom: 5px;
}

.menu__item p {
color: #756b63;
font-size: 15px;
}

.menu__item > span {
font-weight: bold;
color: #9a5c32;
white-space: nowrap;
}

/* =========================================================
SEASONAL
========================================================= */

.seasonal {
width: min(1150px, 90%);
margin: 100px auto;

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

background: #e9dfd3;

}

.seasonal__image {
min-height: 400px;
}

.seasonal__content {
padding: 60px;
}

.seasonal__content h2 {
font-family: Georgia, serif;
font-size: 40px;
line-height: 1.15;
margin-bottom: 20px;
}

.seasonal__content p {
color: #6c625a;
margin-bottom: 30px;
}

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

.contact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
}

.contact__info > p:not(.eyebrow) {
color: #6c625a;
}

.contact__details {
margin-top: 40px;

display: grid;
grid-template-columns: 1fr 1fr;
gap: 35px;

}

.contact__details h3 {
font-size: 16px;
margin-bottom: 8px;
}

.contact__details p {
color: #6c625a;
font-size: 14px;
}

.contact__form {
background: white;
padding: 40px;

border: 1px solid #e2dbd3;

}

.contact__form h2 {
font-family: Georgia, serif;
font-size: 30px;
margin-bottom: 30px;
}

.contact__form label {
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: 7px;
}

.contact__form input,
.contact__form textarea {
width: 100%;

border: 1px solid #d6cec5;
background: #faf8f5;

padding: 13px;
margin-bottom: 20px;

outline: none;

}

.contact__form input:focus,
.contact__form textarea:focus {
border-color: #9a5c32;
}

.contact__form textarea {
resize: vertical;
}

.contact__form button {
border: none;
cursor: pointer;
}

.map__section {
padding-top: 0;
}

.map__large {
min-height: 500px;
}

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

.footer {
background: #30231d;
color: #eee7df;
padding: 70px 0 25px;
}

.footer__main {
width: min(1150px, 90%);
margin: 0 auto;

display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 80px;

padding-bottom: 60px;

}

.footer__logo {
font-family: Georgia, serif;
font-size: 28px;
}

.footer__main p {
color: #b9ada4;
margin-top: 10px;
}

.footer__links {
display: flex;
flex-direction: column;
gap: 8px;
}

.footer__links h3 {
color: white;
margin-bottom: 10px;
}

.footer__links a {
color: #b9ada4;
}

.footer__links a:hover {
color: white;
}

.footer__bottom {
width: min(1150px, 90%);
margin: 0 auto;

padding-top: 25px;

border-top: 1px solid #51443d;

color: #91847b;
font-size: 13px;

}

/* =========================================================
BASIC RESPONSIVENESS
========================================================= */

@media (max-width: 850px) {

.nav__links {
    display: none;
}

.menu__button {
    display: block;
}

.hero,
.intro__grid,
.location,
.seasonal,
.contact {
    grid-template-columns: 1fr;
}

.hero {
    padding: 70px 0;
}

.hero h1 {
    font-size: 50px;
}

.hero__image {
    min-height: 350px;
}

.card__grid {
    grid-template-columns: 1fr;
}

.gallery__grid {
    grid-template-columns: 1fr 1fr;
}

.gallery__large {
    grid-row: auto;
}

.menu__heading {
    grid-template-columns: 1fr;
}

.seasonal__content {
    padding: 40px;
}

.footer__main {
    grid-template-columns: 1fr 1fr;
}

}

@media (max-width: 550px) {

.section {
    padding: 70px 0;
}

.hero h1 {
    font-size: 42px;
}

.section__heading h2,
.location h2,
.contact h2 {
    font-size: 35px;
}

.page__hero h1 {
    font-size: 45px;
}

.hero__buttons {
    flex-direction: column;
}

.button {
    text-align: center;
}

.location__details,
.contact__details {
    grid-template-columns: 1fr;
    display: grid;
}

.gallery__grid {
    grid-template-columns: 1fr;
}

.footer__main {
    grid-template-columns: 1fr;
    gap: 35px;
}

.menu__item {
    flex-direction: column;
    gap: 5px;
}

}