/* =========================================
   QRESTA HEALTHY EATS
========================================= */

:root{
  --green:#07833e;
  --green-dark:#063d2d;
  --ink:#111713;
  --muted:#626762;
  --cream:#fbfaf7;
  --line:#e6e6e1;
  --shadow:0 8px 22px rgba(28,43,33,.12);
}


/* =========================================
   GLOBAL
========================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:var(--cream);

  color:var(--ink);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;
}

button,
a{
  font:inherit;
}

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

button{
  cursor:pointer;
}


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

.site-header{
  height:78px;

  background:#fff;

  border-bottom:
    1px solid #e8e8e8;

  display:grid;

  grid-template-columns:
    210px
    1fr
    auto;

  align-items:center;

  padding:
    0
    3%;

  position:relative;

  z-index:20;
}


/* LOGO */

.brand{
  font-size:45px;

  line-height:1;

  font-weight:700;

  letter-spacing:-2.8px;

  color:var(--green);
}


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

.main-nav{
  display:flex;

  align-items:stretch;
  justify-content:center;

  gap:36px;

  height:100%;
}

.main-nav a{
  display:flex;

  align-items:center;

  position:relative;

  font-weight:500;

  white-space:nowrap;
}

.main-nav a.active{
  color:var(--green);

  font-weight:700;
}

.main-nav a.active::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:4px;

  border-radius:
    4px
    4px
    0
    0;

  background:var(--green);
}


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

.header-actions{
  display:flex;

  align-items:center;

  gap:23px;
}

.text-action{
  border:0;

  background:transparent;

  padding:6px;

  font-weight:500;

  white-space:nowrap;
}

.signup,
.primary-btn,
.modal-order{
  background:var(--green);

  color:#fff;

  border-radius:9px;

  font-weight:700;
}

.signup{
  padding:
    14px
    21px;
}

.menu-toggle{
  display:none;

  border:0;

  background:transparent;

  color:var(--green);

  font-size:28px;
}


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

.hero{
  height:462px;

  position:relative;

  overflow:hidden;

  background:#f7f1e9;
}


/* HERO IMAGE */

.hero-photo{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;
}


/* HERO WHITE GRADIENT */

.hero-shade{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.91) 23%,
      rgba(255,255,255,.25) 42%,
      rgba(255,255,255,0) 62%
    );
}


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

.hero-copy{
  position:relative;

  z-index:2;

  width:470px;

  padding:
    57px
    0
    0
    8.4%;
}


.hero-copy h1,
.section-heading h2,
.modal-body h2{
  font-family:
    "Playfair Display",
    Georgia,
    serif;

  color:var(--green-dark);
}


.hero-copy h1{
  font-size:58px;

  line-height:1.03;

  letter-spacing:-1.5px;

  margin:
    0
    0
    22px;
}


.hero-copy p{
  font-size:20px;

  line-height:1.5;

  color:#535956;

  margin:
    0
    0
    29px;
}


/* =========================================
   FIND HEALTHY EATS BUTTON
========================================= */

.primary-btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:250px;

  padding:
    18px
    25px;

  border:0;

  font-size:18px;

  box-shadow:
    0 9px 18px
    rgba(7,131,62,.15);
}

.primary-btn:hover{
  background:#066f36;
}


/* =========================================
   NUTRITION CARD
========================================= */

.nutrition-card{
  position:absolute;

  z-index:3;

  right:5.5%;

  top:87px;

  width:296px;

  background:
    rgba(255,255,255,.97);

  border:
    1px solid
    rgba(0,0,0,.07);

  border-radius:26px;

  padding:
    27px
    21px
    20px;

  text-align:center;

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.13);
}


/* NUTRITION ICON */

.leaf-badge{
  margin:auto;

  width:39px;

  height:39px;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:var(--green);

  color:white;

  font-size:18px;
}


/* CALORIES */

.calories{
  display:block;

  color:var(--green);

  font-size:67px;

  line-height:.98;

  margin-top:8px;
}

.calorie-label{
  display:block;

  font-size:22px;

  color:#101010;
}

.nutrition-rule{
  height:1px;

  background:#ddd;

  margin:
    14px
    0
    12px;
}


/* =========================================
   MACROS
========================================= */

.macro-grid{
  display:grid;

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

  gap:12px;
}

.macro{
  border-radius:13px;

  padding:
    12px
    4px
    10px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:1px;

  background:#eff4e8;
}

.macro.carbs{
  background:#fff4df;
}

.macro.fat{
  background:#fff0e6;
}

.macro-icon{
  font-size:16px;

  color:#3a9d3b;
}

.carbs .macro-icon{
  color:#e4a000;
}

.fat .macro-icon{
  color:#f16720;
}

.macro small{
  font-size:12px;
}

.macro strong{
  font-size:18px;
}


/* =========================================
   PARTNER RESTAURANTS
========================================= */

.partners{
  padding:
    20px
    0
    27px;

  overflow:hidden;

  background:
    linear-gradient(
      #fffdf9,
      #faf9f5
    );
}


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

.section-heading{
  text-align:center;

  margin-bottom:8px;
}

.section-heading h2{
  font-size:32px;

  margin:
    0
    0
    3px;
}

.section-heading p{
  margin:0;

  color:#666;

  font-size:16px;
}


/* CALORIE MATCH MESSAGE */

.section-heading .match-message{
  min-height:20px;

  margin-top:5px;

  color:var(--green);

  font-size:14px;

  font-weight:700;
}


/* =========================================
   SLIDER
========================================= */

.slider-shell{
  position:relative;

  width:100%;
  max-width:1450px;

  padding:
    0
    5.3%;

  margin:
    10px
    auto
    0;
}

.restaurant-slider{
  display:flex;

  gap:14px;

  overflow-x:auto;

  padding:
    3px
    3px
    12px;

  scroll-snap-type:
    x mandatory;

  scroll-behavior:smooth;

  scrollbar-width:none;
}

.restaurant-slider::-webkit-scrollbar{
  display:none;
}


/* =========================================
   RESTAURANT CARD
========================================= */

.restaurant-card{
  flex:
    0
    0
    318px;

  background:#fff;

  border:
    1px solid
    #ededeb;

  border-radius:17px;

  overflow:hidden;

  box-shadow:
    0 4px 10px
    rgba(0,0,0,.09);

  scroll-snap-align:start;

  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.restaurant-card:hover{
  transform:
    translateY(-3px);

  box-shadow:var(--shadow);
}


/* RESTAURANT IMAGE */

.restaurant-card img{
  width:100%;

  height:153px;

  object-fit:cover;

  display:block;
}


/* CARD BODY */

.card-body{
  padding:
    11px
    13px
    13px;
}

.card-body h3{
  font-size:19px;

  line-height:1.1;

  margin:
    0
    0
    4px;
}

.cuisine{
  color:#696d68;

  font-size:13px;

  margin:
    0
    0
    4px;
}


/* =========================================
   MATCHING DISH
========================================= */

.dish-match{
  margin:
    0
    0
    7px;

  color:#315d3e;

  font-size:12px;
}

.dish-match strong{
  color:var(--green);
}


/* =========================================
   CARD FEATURES
========================================= */

.feature-row{
  display:flex;

  align-items:center;

  gap:7px;

  font-size:12px;

  color:#666;

  white-space:nowrap;

  margin-bottom:6px;
}

.feature-row .leaf{
  color:#47a52d;
}


/* =========================================
   RATING
========================================= */

.rating{
  font-size:14px;

  margin:
    0
    0
    10px;
}

.rating .star{
  color:#f2b500;
}


/* =========================================
   ORDER BUTTON
========================================= */

.order-btn{
  width:100%;

  height:40px;

  border:0;

  background:var(--green);

  color:#fff;

  border-radius:9px;

  font-weight:700;
}

.order-btn:hover{
  background:#066f36;
}


/* =========================================
   SLIDER ARROWS
========================================= */

.slider-arrow{
  position:absolute;

  z-index:5;

  top:47%;

  transform:
    translateY(-50%);

  width:48px;

  height:48px;

  border:
    1px solid
    #e5e5e5;

  border-radius:50%;

  background:#fff;

  color:#111;

  font-size:37px;

  line-height:1;

  box-shadow:
    0 3px 12px
    rgba(0,0,0,.1);
}

.slider-arrow.left{
  left:1%;
}

.slider-arrow.right{
  right:1%;
}


/* =========================================
   SLIDER TRACK
========================================= */

.scroll-track{
  height:6px;

  max-width:1025px;

  margin:
    2px
    auto
    0;

  background:#e1e2df;

  border-radius:99px;

  overflow:hidden;
}

.scroll-track span{
  display:block;

  width:43%;

  height:100%;

  border-radius:inherit;

  background:#969794;

  transform:
    translateX(0);

  transition:
    transform .08s linear;
}


/* =========================================
   GLOBAL MODAL
========================================= */

.modal{
  position:fixed;

  inset:0;

  z-index:1000;

  display:none;

  place-items:center;

  padding:22px;
}

.modal.open{
  display:grid;
}


/* BACKDROP */

.modal-backdrop{
  position:absolute;

  inset:0;

  background:
    rgba(5,22,14,.66);

  backdrop-filter:
    blur(4px);
}


/* =========================================
   RESTAURANT MODAL
========================================= */

.modal-card{
  position:relative;

  z-index:1;

  width:min(
    820px,
    94vw
  );

  max-height:92vh;

  overflow:auto;

  background:#fff;

  border-radius:24px;

  display:grid;

  grid-template-columns:
    44%
    56%;

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.32);

  animation:
    modalIn .22s ease-out;
}


/* =========================================
   MODAL ANIMATION
========================================= */

@keyframes modalIn{

  from{

    opacity:0;

    transform:
      translateY(18px)
      scale(.98);

  }

  to{

    opacity:1;

    transform:none;

  }

}


/* =========================================
   MODAL CLOSE
========================================= */

.modal-close{
  position:absolute;

  right:14px;

  top:14px;

  z-index:2;

  width:40px;

  height:40px;

  border:0;

  border-radius:50%;

  background:
    rgba(255,255,255,.94);

  font-size:28px;

  line-height:1;

  color:#222;

  box-shadow:
    0 2px 8px
    rgba(0,0,0,.12);
}


/* =========================================
   MODAL IMAGE
========================================= */

.modal-image{
  width:100%;
  height:100%;
  min-height:430px;

  object-fit:contain;
  object-position:center;

  background:#f7f4ed;
}


/* =========================================
   MODAL CONTENT
========================================= */

.modal-body{
  padding:
    45px
    36px
    35px;
}

.modal-kicker{
  display:inline-block;

  color:var(--green);

  font-size:12px;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:1.3px;

  margin-bottom:9px;
}

.modal-body h2{
  font-size:35px;

  line-height:1.12;

  margin:
    0
    0
    8px;
}

.modal-meta{
  color:#6c706c;

  margin:
    0
    0
    18px;
}

.modal-description{
  color:#454a46;

  font-size:16px;

  line-height:1.65;

  margin:
    0
    0
    20px;
}


/* =========================================
   MODAL FEATURES
========================================= */

.modal-features{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-bottom:24px;
}

.modal-features span{
  background:#f2f7ef;

  border:
    1px solid
    #e1ecd9;

  border-radius:999px;

  padding:
    7px
    10px;

  font-size:12px;

  color:#475145;
}


/* =========================================
   MODAL ORDER
========================================= */

.modal-order{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  padding:
    15px
    18px;

  font-size:16px;
}

.modal-order span{
  font-size:22px;
}


/* PREVENT PAGE SCROLL */

body.modal-open{
  overflow:hidden;
}


/* =========================================
   CALORIE GOAL MODAL
========================================= */

.goal-card{
  position:relative;

  z-index:1;

  width:min(
    510px,
    94vw
  );

  max-height:92vh;

  overflow:auto;

  background:#fff;

  border-radius:25px;

  padding:
    35px
    38px
    31px;

  text-align:center;

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.32);

  animation:
    modalIn .22s ease-out;
}


/* =========================================
   CALORIE ICON
========================================= */

.goal-icon{
  width:58px;

  height:58px;

  margin:
    0
    auto
    13px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#eaf6ec;

  font-size:29px;
}


/* =========================================
   CALORIE TITLE
========================================= */

.goal-card h2{
  margin:
    2px
    0
    10px;

  color:var(--green-dark);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:34px;
}


/* CALORIE DESCRIPTION */

.goal-card > p{
  margin:
    0
    auto
    22px;

  max-width:390px;

  color:#606661;

  font-size:15px;

  line-height:1.55;
}


/* =========================================
   CALORIE FORM
========================================= */

.goal-card form{
  text-align:left;
}

.goal-card label{
  display:block;

  margin-bottom:7px;

  color:#323833;

  font-size:13px;

  font-weight:700;
}


/* =========================================
   CALORIE INPUT
========================================= */

.goal-input-wrap{
  position:relative;
}

.goal-input-wrap input{
  width:100%;

  height:58px;

  padding:
    0
    72px
    0
    17px;

  border:
    2px solid
    #dce5dc;

  border-radius:12px;

  outline:none;

  color:#152019;

  background:#fff;

  font-size:20px;

  font-weight:700;

  transition:
    border-color .2s,
    box-shadow .2s;
}

.goal-input-wrap input:focus{
  border-color:var(--green);

  box-shadow:
    0 0 0 4px
    rgba(7,131,62,.1);
}


/* CAL UNIT */

.goal-input-wrap span{
  position:absolute;

  right:17px;

  top:50%;

  transform:
    translateY(-50%);

  color:#7b817c;

  font-size:14px;

  font-weight:700;
}


/* =========================================
   ERROR MESSAGE
========================================= */

.goal-error{
  min-height:18px;

  margin:
    5px
    0
    2px !important;

  color:#b42318 !important;

  font-size:12px !important;
}


/* =========================================
   SHOW MATCHES BUTTON
========================================= */

.goal-submit{
  width:100%;

  height:52px;

  border:0;

  border-radius:10px;

  background:var(--green);

  color:#fff;

  font-weight:800;

  font-size:16px;
}

.goal-submit:hover{
  background:#066f36;
}


/* =========================================
   OR DIVIDER
========================================= */

.goal-divider{
  display:flex;

  align-items:center;

  gap:12px;

  margin:
    20px
    0
    16px;

  color:#989d99;

  font-size:12px;
}

.goal-divider::before,
.goal-divider::after{
  content:"";

  flex:1;

  height:1px;

  background:#e5e7e5;
}


/* =========================================
   HEALTH PAGE LINK
========================================= */

.health-profile-link{
  display:flex;

  justify-content:
    space-between;

  align-items:center;

  width:100%;

  padding:
    14px
    16px;

  border:
    1px solid
    #cfe2d2;

  border-radius:10px;

  color:var(--green);

  background:#f7fbf7;

  font-weight:800;
}

.health-profile-link:hover{
  background:#edf7ee;
}


/* =========================================
   HEALTH PAGE NOTE
========================================= */

.goal-note{
  display:block;

  margin-top:10px;

  color:#8a8f8b;

  font-size:11px;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

  .site-header{
    grid-template-columns:
      165px
      1fr
      auto;
  }

  .main-nav{
    gap:19px;
  }

  .main-nav a{
    font-size:14px;
  }

  .header-actions{
    gap:10px;
  }

  .text-action span{
    display:none;
  }

  .hero-copy{
    padding-left:5%;
  }

  .nutrition-card{
    right:3%;
  }

  .restaurant-card{
    flex-basis:290px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:760px){


  /* HEADER */

  .site-header{
    height:66px;

    padding:
      0
      18px;

    grid-template-columns:
      1fr
      auto;
  }

  .brand{
    font-size:36px;
  }

  .menu-toggle{
    display:block;
  }

  .header-actions{
    display:none;
  }


  /* MOBILE NAVIGATION */

  .main-nav{
    display:none;

    position:absolute;

    top:66px;

    left:0;

    right:0;

    height:auto;

    background:#fff;

    padding:
      14px
      20px
      20px;

    box-shadow:
      0 10px 25px
      rgba(0,0,0,.12);

    flex-direction:column;

    gap:0;

    align-items:stretch;
  }

  .main-nav.open{
    display:flex;
  }

  .main-nav a{
    padding:
      12px
      2px;
  }

  .main-nav a.active::after{
    height:2px;
  }


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

  .hero{
    height:680px;
  }

  .hero-photo{
    height:55%;

    top:auto;

    bottom:0;

    object-position:center;
  }

  .hero-shade{
    background:
      linear-gradient(
        180deg,
        #fff 0%,
        #fff 38%,
        rgba(255,255,255,.25) 58%,
        transparent 78%
      );
  }

  .hero-copy{
    width:auto;

    padding:
      32px
      22px
      0;

    text-align:center;
  }

  .hero-copy h1{
    font-size:44px;
  }

  .hero-copy p{
    font-size:17px;
  }

  .primary-btn{
    min-width:220px;

    padding:
      15px
      20px;
  }


  /* =====================================
     MOBILE NUTRITION
  ====================================== */

  .nutrition-card{
    top:306px;

    right:18px;

    width:192px;

    padding:
      13px
      10px
      11px;

    border-radius:18px;
  }

  .leaf-badge{
    width:28px;

    height:28px;

    font-size:12px;
  }

  .calories{
    font-size:43px;
  }

  .calorie-label{
    font-size:15px;
  }

  .macro-grid{
    gap:5px;
  }

  .macro{
    padding:
      7px
      2px;
  }

  .macro small{
    font-size:9px;
  }

  .macro strong{
    font-size:13px;
  }


  /* =====================================
     MOBILE RESTAURANTS
  ====================================== */

  .partners{
    padding-top:22px;
  }

  .section-heading{
    padding:
      0
      18px;
  }

  .section-heading h2{
    font-size:27px;
  }

  .slider-shell{
    padding:
      0
      18px;
  }

  .restaurant-card{
    flex-basis:82vw;

    max-width:320px;
  }

  .slider-arrow{
    display:none;
  }

  .scroll-track{
    width:70%;

    height:5px;
  }

  .restaurant-card img{
    height:165px;
  }


  /* =====================================
     MOBILE RESTAURANT MODAL
  ====================================== */

  .modal-card{
    grid-template-columns:1fr;

    max-width:470px;
  }

  .modal-image{
    height:235px;

    min-height:0;
  }

  .modal-body{
    padding:
      27px
      23px
      24px;
  }

  .modal-body h2{
    font-size:29px;
  }


  /* =====================================
     MOBILE CALORIE MODAL
  ====================================== */

  .goal-card{
    width:94vw;

    padding:
      30px
      20px
      25px;
  }

  .goal-card h2{
    font-size:29px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:390px){

  .hero-copy h1{
    font-size:39px;
  }

  .nutrition-card{
    right:12px;
  }

  .restaurant-card{
    flex-basis:85vw;
  }

}
/* =========================================
   QRESTA.CO BRAND OVERRIDE
========================================= */

.brand{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  line-height:1;
  text-decoration:none;
}

.brand span{
  color:var(--green);
  font-size:42px;
  font-weight:700;
  letter-spacing:-2px;
}

.brand small{
  margin-top:4px;
  margin-left:3px;

  color:#555;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* MOBILE */
@media(max-width:768px){

  .brand span{
    font-size:34px;
  }

  .brand small{
    font-size:8px;
    letter-spacing:1.5px;
  }

}
/* =========================================
   MOBILE HERO - KEEP DESKTOP LAYOUT
========================================= */

@media (max-width:760px){

  .hero{
    height:462px !important;
    position:relative;
    overflow:hidden;
  }

  /* FULL BACKGROUND IMAGE */
  .hero-photo{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover;
    object-position:center;
  }

  /* SAME LEFT-TO-RIGHT DESKTOP GRADIENT */
  .hero-shade{
    position:absolute;
    inset:0;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 28%,
        rgba(255,255,255,.48) 48%,
        rgba(255,255,255,0) 72%
      ) !important;
  }

  /* LEFT HERO CONTENT */
  .hero-copy{
    position:relative;
    z-index:2;

    width:57% !important;

    padding:
      55px
      0
      0
      5% !important;

    text-align:left !important;
  }

  .hero-copy h1{
    font-size:clamp(31px, 8vw, 44px) !important;
    line-height:1.02;
    margin-bottom:15px;
  }

  .hero-copy p{
    font-size:14px !important;
    line-height:1.4;
    margin-bottom:20px;
  }

  /* BUTTON */
  .primary-btn{
    min-width:0 !important;
    width:auto;

    padding:13px 16px !important;

    font-size:14px;
  }

  /* NUTRITION CARD STAYS ON RIGHT */
  .nutrition-card{
    top:92px !important;
    right:3% !important;

    width:clamp(120px, 33vw, 165px) !important;

    padding:
      14px
      9px
      12px !important;

    border-radius:18px;
  }

  .nutrition-card .calories{
    font-size:35px !important;
  }

  .nutrition-card .calorie-label{
    font-size:12px !important;
  }

}