/* =========================
   Emerald Eats Overrides
   (keep this file LAST)
   ========================= */

/* ---------- Header sizing (single source of truth) ---------- */
:root{
  --header-bg: #0f6b4f;
  --header-link: #cadb28;
  --header-link-hover: #ffffff;

  /* Adjust these 2 to taste */
  --header-pad-y: 18px;
  --logo-max-h: 92px;          /* makes "Emerald Eats" bigger */
  --header-total-h: 170px;     /* must match your visual header height */
}

/* fixed header */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  background: var(--header-bg) !important;
  padding: var(--header-pad-y) 0 !important;
  overflow: hidden; /* prevents spill */
}

/* push page below header */
body{
  padding-top: var(--header-total-h) !important;
}

/* Navbar layout: 2-row grid */
.site-header .navbar{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;

  display: grid;
  grid-template-columns: 90px 1fr 90px; /* left logo | center | right logo */
  grid-template-rows: auto auto;        /* row1: wordmark, row2: links */
  align-items: center;
  row-gap: 12px;
}

/* left/right badges */
.nav-logo-left{ grid-column: 1; grid-row: 1; justify-self: start; }
.nav-logo-right{ grid-column: 3; grid-row: 1; justify-self: end; }

.nav-logo img{
  height: 54px;
  width: auto;
  display: block;
}

/* center wordmark (Emerald Eats image) */
.nav-center{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-center-logo{
  width: min(780px, 80vw);
  max-height: var(--logo-max-h);
  height: auto;
  display: block;
  object-fit: contain;
}

/* nav links row */
.navmenu{
  grid-column: 2;
  grid-row: 2;

  display: flex;
  justify-content: center;
  gap: 34px;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* links */
.navmenu a{
  color: var(--header-link) !important;
  font-family: 'Cantarell', sans-serif;
  font-weight: 700;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

.navmenu a:hover{
  color: var(--header-link-hover) !important;
}

/* highlight/active should NOT be stuck on About */
.navmenu a.active{
  color: var(--header-link-hover) !important;
}

/* ---------- Mobile behavior ---------- */
/* show hamburger only on mobile/tablet */
.mobile-nav-toggle{
  display: none;
}

/* On smaller screens: hide right logo, show hamburger, collapse menu */
@media (max-width: 991px){
  :root{
    --header-total-h: 135px;
    --logo-max-h: 72px;
  }

  .nav-logo-right{ display: none; }

  .site-header .navbar{
    grid-template-columns: 60px 1fr 60px;
    row-gap: 10px;
  }

  .mobile-nav-toggle{
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    color: var(--header-link);
    font-size: 30px;
    cursor: pointer;
  }

  /* hide menu until opened */
  .navmenu{
    display: none;
  }

  body.mobile-nav-active .navmenu{
    display: flex;
    position: fixed;
    top: var(--header-total-h);
    left: 0;
    right: 0;
    background: var(--header-bg);
    padding: 18px 0 !important;
    flex-direction: column;
    gap: 16px;
    z-index: 9998;
  }
}

/* ---------- Hero: ensure it starts nicely under header ---------- */
.hero.section{
  background: #cfe8d6 !important;
  padding-top: 70px;
}

/* ---------- What We Do background (not white) ---------- */
.what-we-do{
  background: #cfe8d6 !important; /* change to #0f6b4f if you meant dark green */
}

/* FIX: your .navmenu is a UL, but template expects .navmenu as a wrapper.
   Force it visible on desktop. */
@media (min-width: 992px) {
  ul.navmenu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 34px !important;

    margin: 10px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;

    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  ul.navmenu li {
    display: list-item !important;
  }

  ul.navmenu a {
    display: inline-block !important;
    color: #cadb28 !important;
    font-weight: 700;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
  }

  ul.navmenu a:hover {
    color: #ffffff !important;
  }
}
.site-header .navbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.nav-center {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
/* ===== Emerald Eats header nav (conflict-free) ===== */

/* allow 2 rows: logo + links */
.site-header {
  background: #0f6b4f !important;
  overflow: visible !important;   /* IMPORTANT: stop clipping */
}

/* stack logo + links in the middle */
.site-header .nav-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* make the wordmark bigger */
.site-header .nav-center-logo {
  width: min(780px, 80vw) !important;
  max-height: 95px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto 10px !important;
}

/* FORCE the nav links to show (desktop) */
.site-header ul.ee-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 34px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  position: relative !important;
  z-index: 99999 !important;

  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* link styling */
.site-header ul.ee-nav a {
  color: #cadb28 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.site-header ul.ee-nav a:hover {
  color: #ffffff !important;
}

/* mobile: hide links + show hamburger */
@media (max-width: 991px) {
  .site-header ul.ee-nav {
    display: none !important;
  }
}

/* ===============================
   Emerald Eats Header (Clean)
   =============================== */

:root{
  --ee-green: #0f6b4f;
  --ee-yellow: #cadb28;
  --ee-header-height-desktop: 170px;
  --ee-header-height-mobile: 140px;
}

/* fixed header */
.ee-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--ee-green);
  padding: 18px 0 12px;
}

/* push page under header */
body{
  padding-top: var(--ee-header-height-desktop);
}

/* inner layout */
.ee-header__inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;

  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  column-gap: 18px;
}

/* badges */
.ee-header__badge img{
  height: 54px;
  width: auto;
  display: block;
}

/* center stack */
.ee-header__center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* BIG wordmark */
.ee-header__logo{
  width: min(820px, 78vw);
  max-height: 95px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}

/* desktop nav */
.ee-nav{
  display: flex;
  gap: 34px;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
  list-style: none;
}

.ee-nav a{
  color: var(--ee-yellow);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  line-height: 1;
}

.ee-nav a:hover{
  color: #fff;
}

/* burger hidden on desktop */
.ee-burger{
  display: none;
}

/* ===============================
   Mobile
   =============================== */
@media (max-width: 991px){
  body{ padding-top: var(--ee-header-height-mobile); }

  .ee-header__inner{
    grid-template-columns: 60px 1fr 60px;
  }

  .ee-header__badge--right{
    display: none;
  }

  .ee-header__logo{
    width: min(520px, 80vw);
    max-height: 72px;
    margin-bottom: 8px;
  }

  /* hide links until burger opened */
  .ee-nav{
    display: none;
  }

  .ee-burger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    justify-self: end;
  }

  .ee-burger span{
    display: block;
    width: 26px;
    height: 2px;
    background: var(--ee-yellow);
  }

  /* dropdown menu when open */
  body.ee-menu-open .ee-nav{
    display: flex;
    flex-direction: column;
    gap: 16px;

    position: fixed;
    top: var(--ee-header-height-mobile);
    left: 0;
    right: 0;

    background: var(--ee-green);
    padding: 18px 0;
    z-index: 9998;
  }
}
/* Make text inside service cards not look/behave like a typical link */
.service-card{
  color: inherit;
  text-decoration: none;
}

.service-card:hover,
.service-card:focus{
  text-decoration: none;
}

.service-card .service-card__desc{
  color: inherit;
  text-decoration: none;
  cursor: default; /* optional: prevents "text feels like link" */
}

/* Optional: prevent blue highlight on tap (mobile) */
.service-card{
  -webkit-tap-highlight-color: transparent;
}