/* ==========================================================================
   SECOND SERVING HEADER + NAV
   CLEAN REWRITE WITH WORKING SHRINK SYSTEM
   ========================================================================== */

:root{
  /* sizing */
  --header-logo-row-h: 170px;
  --header-nav-row-h: 50px;
  --header-h: calc(var(--header-logo-row-h) + var(--header-nav-row-h));
  --logo-scale: 1;

  /* colors */
  --header-bg: #f2efe9;
  --header-border: #ddd;
  --divider: #ccc;
  --text-main: #333;
  --link-hover: #5c7c3a;
  --nav-cta-bg: #5c7c3a;
  --nav-cta-bg-hover: #4e6c31;

  /* layout */
  --header-shell-max: 1400px;
  --header-side-pad: 20px;
  --logo-max-w: 350px;
  --logo-max-w-mobile: 280px;
}

/* =========================
   SHRUNK STATE
   ========================= */

body.ss-header-shrink{
  --header-logo-row-h: 64px;
  --header-nav-row-h: 40px;
  --header-h: calc(var(--header-logo-row-h) + var(--header-nav-row-h));
  --logo-scale: 0.82;
}

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

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 9999;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);

  transition: height .22s ease, box-shadow .22s ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body.ss-header-shrink .site-header{
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

#header-spacer{
  height: var(--header-h);
  transition: height .22s ease;
}

/* =========================
   CONTAINER
   ========================= */

.header-shell{
  max-width: var(--header-shell-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--header-side-pad);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

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

.header-inner{
  height: var(--header-logo-row-h);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;

  transition: height .22s ease, padding .22s ease;
}

/* =========================
   LOGO
   ========================= */

.site-branding{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 0;
}

.site-branding-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 0;
}

.brand-logo{
  width:100%;
  max-width: var(--logo-max-w);
  height:auto;
  display:block;

  transform: scale(var(--logo-scale));
  transform-origin: center;
  transition: transform .22s ease;
}

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

.header-divider{
  display:none;
}

/* =========================
   NAV
   ========================= */

.site-nav{
  height: var(--header-nav-row-h);
  display:flex;
  justify-content:center;
  align-items:center;
  border-top:1px solid var(--divider);

  transition: height .22s ease;
}

.custom-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}

.custom-nav > li{
  margin:0;
  padding:0;
}

.custom-nav > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: calc(var(--header-nav-row-h) - 8px);
  min-height: 32px;
  color: var(--text-main);
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  padding:0 2px;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}

/* hover + current page color */
.custom-nav > li > a:hover,
.custom-nav > li.current-menu-item > a,
.custom-nav > li.current_page_item > a,
.custom-nav > li.current-menu-ancestor > a{
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/* Optional CTA */
.custom-nav > li.ss-nav-cta > a{
  height:auto;
  min-height:38px;
  padding:8px 14px;
  border-radius:10px;
  border-bottom:0;
  background:var(--nav-cta-bg);
  color:#fff;
}

.custom-nav > li.ss-nav-cta > a:hover,
.custom-nav > li.ss-nav-cta.current-menu-item > a,
.custom-nav > li.ss-nav-cta.current_page_item > a,
.custom-nav > li.ss-nav-cta.current-menu-ancestor > a{
  background:var(--nav-cta-bg-hover);
  color:#fff;
  border-bottom-color:transparent;
}

/* =========================
   TAGLINE / EXTRA INTRO
   ========================= */

.ss-header-intro{
  display:none;
}

.immediate-help{
  margin:0;
  font-weight:600;
  letter-spacing:.02em;
  opacity:.85;
}

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

#nav-toggle{
  display:none;
}

@media (max-width:768px){

  :root{
    --header-logo-row-h: 84px;
    --header-nav-row-h: auto;
    --header-h: 84px;
    --logo-max-w: var(--logo-max-w-mobile);
  }

  body.ss-header-shrink{
    --header-logo-row-h: 72px;
    --header-h: 72px;
    --logo-scale: 0.86;
  }

  .header-inner{
    padding-right: 52px;
  }

  #nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    border:1px solid var(--header-border);
    background:#fff;
    color:var(--text-main);
    border-radius:10px;
    padding:8px 12px;
    line-height:1;
    cursor:pointer;
  }

  .site-nav{
    display:none;
    height:auto;
    padding:10px 0 14px;
    border-top:1px solid var(--divider);
    background:var(--header-bg);
  }

  .site-nav.is-open{
    display:flex;
  }

  .custom-nav{
    width:100%;
    flex-direction:column;
    gap:10px;
  }

  .custom-nav > li > a{
    height:auto;
    min-height:36px;
    font-size:15px;
    line-height:1.2;
  }

  .custom-nav > li.ss-nav-cta > a{
    padding:7px 12px;
  }

  #header-spacer{
    height: var(--header-h);
  }
}

.header-inner{
  align-items: flex-end; /* pushes logo downward */
  padding-top: 0px;   /* fine-tune */
    padding-bottom: 5px;   /* fine-tune */
}