/*
Theme Name: Coffee Vibes
Author: Your Name
Version: 1.0
Description: Premium modern coffee shop theme
*/

@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-Extralight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-ExtralightItalic.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-Italic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('fonts/Sentient-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

:root {
  --dark-brown: #3b2f2f;
  --cream: #f9f4ef;
  --accent: #c89b6d;
  --green: #163732;
  --font: 'Sentient', serif;
  --max-width: 1140px;
}

h1, h2, h3, h4 {
  margin: 0;
}

h2 {
  font: 400 2rem var(--font);
}

ul {
  padding: 0;
  list-style: none;
}

.flex { display: flex }
.flf--r { flex-flow: row }
.flf--c { flex-flow: column }
.flw--w { flex-wrap: wrap }
.jc--spb { justify-content: space-between }
.jc--center {justify-content: center}
.align--center {align-items: center}
.align--self-start { align-self: self-start; }
.list-style--none {list-style: none}
.gap--05 { gap: .5rem }
.gap--1 { gap: 1rem }
.gap--2 { gap: 2rem }
.gap--3 { gap: 3rem }
.gap--5 { gap: 5rem }
.p0 {padding: 0;}
.w--30 { width: 30% }
.w--50 { width: 50% }
.w--100 { width: 100% }
.w--max { margin: 0 auto; max-width: var(--max-width); }
.w--40ch { width: clamp(240px, 40ch, calc(100% - 4rem)) }
.h--50 { height: 50% }
.h--480 { height: 720px }
.text--center {text-align: center}
.text--left {text-align: left}
.text--white {color: #fff}
.text--small {font-size: .8rem;}
.link--underlined {text-decoration: none; border-bottom: 1px solid #fff;}
.fill--color { background: var(--green) }
.color--green { color: var(--green) }
.fill--cream { background: var(--cream) }
.text--center.link--underlined { display: flex; align-self: center; }
.obj--cover { object-fit: cover }

.link--underlined.color--green {
  border-color: var(--green);
}

.link--underlined:hover {
  border-color: transparent;
}

.icon--48 { 
  width: 48px; 
  height: 48px;
}

.logo {
  font: 500 1.5rem var(--font);
}
.logo a {
  color: var(--green);
  text-decoration: none;
}

.logo a span {
  font-weight: 400;
}

body {
  margin: 0;
  font-family: var(--font);
  background: #fff;
  color: var(--dark-brown);
}

header {
  margin: 0 auto;
  max-width: 1140px;
  background: #fff;
  color: var(--green);
  padding: 20px;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}

header > div {
  align-items: center; 
}

nav ul {
  display: flex;
  flex-flow: row;
  list-style: none;
  gap: 1rem;
}

nav a {
  color: var(--green);
  margin: 0 12px;
  text-decoration: none;
  font-weight: 400;
  text-transform: lowercase;
}

.hero {
  position: relative;
  /*background: url("assets/images/hero.jpg") center/cover no-repeat;*/
  /*padding: 140px 20px;*/
  text-align: center;
  color: white;
}

/*.hero::after {
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.4);
}*/

.hero-top {
  padding: 6rem 1rem;
  width: calc(100% - 2rem);
  background: var(--green);
}

.hero-top h1 {
  margin: 0 auto;
  max-width: 1140px;
  font: 400 4rem/4.2rem var(--font);
  text-align: left;
}

.hero-sidebyside img {
  width: 64%;
  height: 100%;
  object-fit: cover;
}

.hero-sidebyside {
  /*height: 480px;*/
}

.hero-sidebyside > div {
  width: 36%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.hero h2 {
  font: 600 1.3rem var(--font);
  color: var(--green);
}

.hero p {
  font: 400 1rem var(--font);
  color: var(--green); 
}

.btn {
  cursor: pointer;
  display: inline-block;
  background: var(--green);
  color: white;
  padding: 14px 36px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  box-shadow: none;
  font: 500 1rem var(--font);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

.btn-white {
  background: #fff;
  color: var(--green);
}
.btn--coffee {
  background: #c07820;
}

input {
      height: 48px;
    border: none;
    box-shadow: none;
    font: 400 1rem var(--font); 
    padding: 0 1rem;
}

.section {
  /*max-width: 1100px;
  margin: auto;*/
  padding: 60px 20px;
}
.section.p0 {
  padding: 0 !important;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 1rem;
  width: calc(100% - 2rem);
}

.menu-item {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 24px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.menu-item img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.menu-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.testimonials, .gallery, .instagram, .newsletter {
  text-align: center;
}

.testimonials {
  padding: 80px 24px;
}

.gallery-grid, .team-grid, .instagram-grid {
  /*display: grid;*/
  /*gap: 20px;*/
  /*grid-template-columns: repeat(auto-fit,minmax(200px,1fr));*/
}

.team-grid > div {
  width: calc(50% - 3rem);
  align-items: center;
}

.team-grid h3 {
  font: 400 2.8rem/2.8rem var(--font);
  color: var(--green);
}

.team-grid h3 span {
  color: #c3a78a;
}

.team-grid img {
  aspect-ratio: 4 / 5;
    max-height: 320px;
    object-fit: cover;
}

.gallery img, .team img, .instagram img {
  /*width: 100%;*/
  /*border-radius: 10px;*/
  transition: transform 0.3s;
  aspect-ratio: 4 / 5;
}

.gallery img:hover, .team img:hover, .instagram img:hover {
  transform: scale(1.05);
}

footer {
  padding: 80px 24px;
}

footer .footer-headline {
  font: 450 1.1rem var(--font);
}

footer ul {
  margin-bottom: 3rem;
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

footer ul li a {
  font: 400 1rem var(--font);
  color: var(--green);
  text-decoration: none;
}

footer .w--max > p {
  font: 400 .9rem var(--font);
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


@media screen and (max-width: 1440px) {
  .h--480 { height: 640px }
}
@media screen and (max-width: 1140px) {
  .h--480 { height: 480px }
  .team-grid > div {
    flex-flow: column;
      align-items: self-start;
      gap: 1rem;
  }
  .list-with-icons {
    gap: 0; 
  }
}
@media screen and (max-width: 880px) {
  .hero-sidebyside {
    flex-flow: column;
    height: auto;
  }
  .hero-sidebyside img {
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
  }
  .hero-sidebyside > div {
    padding: 2rem 1rem;
    width: calc(100% - 2rem);
  }
  .hero p {
    padding: 0 1rem;
    width: calc(100% - 2rem);
  }
  .section.flf--r {
    width: 100%;
    flex-flow: column;
    height: auto;
  }
  .section.fill--color {
    width: calc(100% - 2rem);
  }
  .section.flf--r > .w--50 {
      width: 100%;
      min-height: 440px;
  }
  .list-with-icons {
    gap: 1rem; 
  }
  footer > .flf--r {
    flex-flow: column;
    gap: 3rem;
  }
}
@media screen and (max-width: 640px) {
  .hero h1 br {
    display: none;
  }
  nav {
    display: none;
  }
  .section.fill--color > .w--max {
    flex-flow: column;
  }
  .section.fill--color > .w--max .w--30 {
    width: calc(100% - 1rem);
  }
  .team-grid {
    flex-flow: column;
  }
  .team-grid img {
    aspect-ratio: 4 / 5;
    max-height: 480px;
  }
  footer > div > .w--30 {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  footer > div > .flf--r {
    flex-flow: column;
    gap: 1rem;
  }
}