/* Jacob & Jenny site header polish — v1.3.38 */
:root{
  --jtp-header-tan:#e7cfaa;
  --jtp-header-tan-light:#f1dfc2;
  --jtp-header-ink:#292929;
  --jtp-header-line:rgba(41,41,41,.28);
}

/* Shared header color */
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner{background:var(--jtp-header-tan)!important}

/* Desktop */
#masthead .site-container{max-width:1060px}
#masthead .site-header-main-section-left,
#masthead .site-header-main-section-right{min-height:66px}
#masthead .site-branding a{color:var(--jtp-header-ink)}
#masthead .main-navigation .primary-menu-container>ul{align-items:center;gap:0}
#masthead .main-navigation .primary-menu-container>ul>li{position:relative;margin:0}
#masthead .main-navigation .primary-menu-container>ul>li>a{
  padding:10px 14px;
  color:var(--jtp-header-ink);
  line-height:1.2;
}
#masthead .main-navigation .primary-menu-container>ul>li+li:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:20px;
  background:var(--jtp-header-line);
  transform:translateY(-50%);
}

/* Featured Top Cards item: compact and centered */
#masthead .main-navigation .primary-menu-container>ul>li:has(>a[href*="top-10-cards"])>a,
#masthead .main-navigation .primary-menu-container>ul>li>a[href*="top-10-cards"]{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:144px;
  width:auto;
  background:#fff;
  border:1px solid rgba(41,41,41,.08);
  border-radius:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  margin:0 6px;
  padding:10px 13px;
}
#masthead .main-navigation .primary-menu-container>ul>li:has(>a[href*="top-10-cards"])+li:before{display:none}
#masthead .main-navigation .primary-menu-container>ul>li>a:hover{color:#111}
#masthead .main-navigation .primary-menu-container>ul>li:not(:has(>a[href*="top-10-cards"]))>a:hover{
  background:rgba(255,255,255,.24);
  border-radius:4px;
}
#masthead .main-navigation .sub-menu{border-radius:0 0 6px 6px;overflow:visible;box-shadow:0 8px 22px rgba(0,0,0,.16)}

/* Mobile drawer: same visual language as desktop. */
#mobile-drawer .drawer-content,
.popup-drawer .drawer-content{padding:28px 24px 34px}
#mobile-drawer .drawer-header,
.popup-drawer .drawer-header{min-height:56px}
#mobile-drawer .drawer-toggle,
.popup-drawer .drawer-toggle{color:var(--jtp-header-ink)!important}

#mobile-drawer .mobile-navigation ul,
.popup-drawer .mobile-navigation ul{
  border:0!important;
  box-shadow:none!important;
}

/* Top-level rows */
#mobile-drawer .mobile-navigation>div>ul>li,
.popup-drawer .mobile-navigation>div>ul>li{
  border:0!important;
  border-bottom:1px solid var(--jtp-header-line)!important;
  margin:0!important;
  background:transparent!important;
}
#mobile-drawer .mobile-navigation>div>ul>li>a,
.popup-drawer .mobile-navigation>div>ul>li>a,
#mobile-drawer .mobile-navigation>div>ul>li>.drawer-nav-drop-wrap>a,
.popup-drawer .mobile-navigation>div>ul>li>.drawer-nav-drop-wrap>a{
  padding:16px 14px!important;
  color:var(--jtp-header-ink)!important;
  font-size:18px!important;
  line-height:1.25!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Featured Top Cards mirrors desktop: white, compact, centered. */
#mobile-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"]),
.popup-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"]){
  border-bottom:0!important;
  margin:0 0 14px!important;
}
#mobile-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"])>a,
.popup-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"])>a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-height:58px!important;
  background:#fff!important;
  border:1px solid rgba(41,41,41,.09)!important;
  border-radius:6px!important;
  box-shadow:0 2px 6px rgba(0,0,0,.07)!important;
  padding:15px 16px!important;
}

/* Arrow controls: subtle vertical divider, same as desktop separator tone. */
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap,
.popup-drawer .mobile-navigation .drawer-nav-drop-wrap{
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap .drawer-sub-toggle,
.popup-drawer .mobile-navigation .drawer-nav-drop-wrap .drawer-sub-toggle{
  border:0!important;
  border-left:1px solid var(--jtp-header-line)!important;
  color:var(--jtp-header-ink)!important;
  width:54px;
  background:transparent!important;
  box-shadow:none!important;
}

/* Submenus: lighter tan, indented, no giant boxed block. */
#mobile-drawer .mobile-navigation .sub-menu,
.popup-drawer .mobile-navigation .sub-menu{
  background:transparent!important;
  margin:0!important;
  padding:2px 0 4px 16px!important;
  border:0!important;
  box-shadow:none!important;
}
#mobile-drawer .mobile-navigation .sub-menu li,
.popup-drawer .mobile-navigation .sub-menu li{
  background:rgba(255,255,255,.20)!important;
  border:0!important;
  border-bottom:1px solid rgba(41,41,41,.12)!important;
  box-shadow:none!important;
}
#mobile-drawer .mobile-navigation .sub-menu li:last-child,
.popup-drawer .mobile-navigation .sub-menu li:last-child{border-bottom:0!important}
#mobile-drawer .mobile-navigation .sub-menu a,
.popup-drawer .mobile-navigation .sub-menu a,
#mobile-drawer .mobile-navigation .sub-menu .drawer-nav-drop-wrap>a,
.popup-drawer .mobile-navigation .sub-menu .drawer-nav-drop-wrap>a{
  padding:13px 14px!important;
  color:#343434!important;
  font-size:15px!important;
  line-height:1.3!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#mobile-drawer .mobile-navigation .sub-menu a:hover,
.popup-drawer .mobile-navigation .sub-menu a:hover{background:rgba(255,255,255,.28)!important}

/* Keep nested submenus readable without introducing dark blocks. */
#mobile-drawer .mobile-navigation .sub-menu .sub-menu,
.popup-drawer .mobile-navigation .sub-menu .sub-menu{
  padding-left:12px!important;
  background:rgba(255,255,255,.10)!important;
}
#mobile-drawer .mobile-navigation .sub-menu .sub-menu a,
.popup-drawer .mobile-navigation .sub-menu .sub-menu a{font-size:14px!important;padding:12px 14px!important}

@media(max-width:767px){
  #mobile-drawer .drawer-content,
  .popup-drawer .drawer-content{padding-left:20px;padding-right:20px}
}

/* v1.3.38 interaction + desktop/mobile consistency */
/* Keep desktop separators visible above hovered menu backgrounds. */
#masthead .main-navigation .primary-menu-container>ul>li+li:before{
  z-index:3;
  pointer-events:none;
}
#masthead .main-navigation .primary-menu-container>ul>li>a{
  position:relative;
  z-index:1;
}

/* Main navigation hover treatment: same warm language on desktop and mobile. */
#masthead .main-navigation .primary-menu-container>ul>li:not(:has(>a[href*="top-10-cards"]))>a:hover,
#masthead .main-navigation .primary-menu-container>ul>li:not(:has(>a[href*="top-10-cards"]))>a:focus-visible{
  background:rgba(255,255,255,.30)!important;
  color:#161616!important;
}

/* Featured Top Cards hover: remains white, but clearly interactive. */
#masthead .main-navigation .primary-menu-container>ul>li:has(>a[href*="top-10-cards"])>a:hover,
#masthead .main-navigation .primary-menu-container>ul>li>a[href*="top-10-cards"]:hover,
#masthead .main-navigation .primary-menu-container>ul>li:has(>a[href*="top-10-cards"])>a:focus-visible,
#masthead .main-navigation .primary-menu-container>ul>li>a[href*="top-10-cards"]:focus-visible{
  background:#fffaf2!important;
  border-color:rgba(41,41,41,.18)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.10)!important;
  transform:translateY(-1px);
}

/* Desktop dropdowns now match the warm mobile hierarchy instead of using charcoal blocks. */
#masthead .main-navigation .sub-menu{
  background:#f4e4ca!important;
  border:1px solid rgba(41,41,41,.10)!important;
  border-radius:0 0 7px 7px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.13)!important;
  overflow:visible!important;
}
#masthead .main-navigation .sub-menu li,
#masthead .main-navigation .sub-menu li.menu-item{
  background:transparent!important;
  border-bottom:1px solid rgba(41,41,41,.12)!important;
}
#masthead .main-navigation .sub-menu li:last-child{border-bottom:0!important}
#masthead .main-navigation .sub-menu a{
  color:var(--jtp-header-ink)!important;
  background:transparent!important;
}
#masthead .main-navigation .sub-menu a:hover,
#masthead .main-navigation .sub-menu a:focus-visible{
  color:#111!important;
  background:rgba(255,255,255,.40)!important;
}
#masthead .main-navigation .sub-menu .sub-menu{
  border-radius:0 7px 7px 0!important;
}

/* Top-level mobile rows now have the same hover feedback as their submenu items. */
#mobile-drawer .mobile-navigation>div>ul>li:not(:has(>a[href*="top-10-cards"]))>a:hover,
.popup-drawer .mobile-navigation>div>ul>li:not(:has(>a[href*="top-10-cards"]))>a:hover,
#mobile-drawer .mobile-navigation>div>ul>li:not(:has(>a[href*="top-10-cards"]))>.drawer-nav-drop-wrap:hover,
.popup-drawer .mobile-navigation>div>ul>li:not(:has(>a[href*="top-10-cards"]))>.drawer-nav-drop-wrap:hover{
  background:rgba(255,255,255,.26)!important;
}

/* Featured mobile card uses the same interactive treatment as desktop. */
#mobile-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"])>a:hover,
.popup-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"])>a:hover,
#mobile-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"])>a:focus-visible,
.popup-drawer .mobile-navigation>div>ul>li:has(>a[href*="top-10-cards"])>a:focus-visible{
  background:#fffaf2!important;
  border-color:rgba(41,41,41,.18)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.10)!important;
  transform:translateY(-1px);
}

/* v1.3.39 final header polish */
/* Remove the remaining legacy yellow from the header shell / overscroll reveal. */
#masthead,
#masthead .site-main-header-wrap,
#masthead .site-header-row-container,
#masthead .site-header-row-container-inner,
#masthead .site-header-row,
#masthead .site-header-section{
  background-color:var(--jtp-header-tan)!important;
}

/* Older category templates still use the former yellow hero color. */
body.category .entry-hero-container-inner,
body.category .entry-hero-container-inner .entry-header,
body.category .entry-hero-container-inner .site-container{
  background-color:var(--jtp-header-tan)!important;
}

/* Keep hover/current backgrounds inside each label so the | separators own their space. */
#masthead .main-navigation .primary-menu-container>ul>li:not(:has(>a[href*="top-10-cards"]))>a{
  margin-left:5px;
  margin-right:5px;
  padding-left:9px;
  padding-right:9px;
}

/* Current location: darker muted tan, distinct from the light hover state. */
#masthead .main-navigation .primary-menu-container>ul>li.current-menu-item:not(:has(>a[href*="top-10-cards"]))>a,
#masthead .main-navigation .primary-menu-container>ul>li.current-menu-ancestor:not(:has(>a[href*="top-10-cards"]))>a,
#masthead .main-navigation .primary-menu-container>ul>li.current_page_item:not(:has(>a[href*="top-10-cards"]))>a,
#masthead .main-navigation .primary-menu-container>ul>li.current_page_ancestor:not(:has(>a[href*="top-10-cards"]))>a{
  background:#d8b98c!important;
  color:#171717!important;
  border-radius:4px;
}
#masthead .main-navigation .sub-menu li.current-menu-item>a,
#masthead .main-navigation .sub-menu li.current-menu-ancestor>a,
#masthead .main-navigation .sub-menu li.current_page_item>a,
#masthead .main-navigation .sub-menu li.current_page_ancestor>a{
  background:#d8b98c!important;
  color:#171717!important;
  font-weight:600;
}

/* Top Cards keeps its featured white identity, with a stronger current-page cue. */
#masthead .main-navigation .primary-menu-container>ul>li.current-menu-item:has(>a[href*="top-10-cards"])>a,
#masthead .main-navigation .primary-menu-container>ul>li.current_page_item:has(>a[href*="top-10-cards"])>a{
  background:#fff8ed!important;
  border-color:#b58c55!important;
  box-shadow:inset 0 -3px 0 #b58c55,0 2px 7px rgba(0,0,0,.08)!important;
}

/* Mirror current-location treatment in the mobile hierarchy. */
#mobile-drawer .mobile-navigation>div>ul>li.current-menu-item:not(:has(>a[href*="top-10-cards"]))>a,
#mobile-drawer .mobile-navigation>div>ul>li.current-menu-ancestor:not(:has(>a[href*="top-10-cards"]))>.drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation>div>ul>li.current_page_item:not(:has(>a[href*="top-10-cards"]))>a,
#mobile-drawer .mobile-navigation>div>ul>li.current_page_ancestor:not(:has(>a[href*="top-10-cards"]))>.drawer-nav-drop-wrap,
.popup-drawer .mobile-navigation>div>ul>li.current-menu-item:not(:has(>a[href*="top-10-cards"]))>a,
.popup-drawer .mobile-navigation>div>ul>li.current-menu-ancestor:not(:has(>a[href*="top-10-cards"]))>.drawer-nav-drop-wrap{
  background:#d8b98c!important;
}
#mobile-drawer .mobile-navigation .sub-menu li.current-menu-item,
#mobile-drawer .mobile-navigation .sub-menu li.current-menu-ancestor,
#mobile-drawer .mobile-navigation .sub-menu li.current_page_item,
.popup-drawer .mobile-navigation .sub-menu li.current-menu-item,
.popup-drawer .mobile-navigation .sub-menu li.current-menu-ancestor,
.popup-drawer .mobile-navigation .sub-menu li.current_page_item{
  background:#d8b98c!important;
}
#mobile-drawer .mobile-navigation>div>ul>li.current-menu-item:has(>a[href*="top-10-cards"])>a,
#mobile-drawer .mobile-navigation>div>ul>li.current_page_item:has(>a[href*="top-10-cards"])>a,
.popup-drawer .mobile-navigation>div>ul>li.current-menu-item:has(>a[href*="top-10-cards"])>a{
  background:#fff8ed!important;
  border-color:#b58c55!important;
  box-shadow:inset 0 -3px 0 #b58c55,0 2px 7px rgba(0,0,0,.08)!important;
}

/* v1.3.40 separator spacing fix
 * The vertical | separators live in their own gutter now, so hover/current
 * backgrounds never visually absorb the divider.
 */
@media (min-width:768px){
  #masthead .main-navigation .primary-menu-container>ul>li:not(:has(>a[href*="top-10-cards"])){
    padding-left:6px;
    padding-right:6px;
  }
  #masthead .main-navigation .primary-menu-container>ul>li:not(:has(>a[href*="top-10-cards"]))>a{
    margin-left:0!important;
    margin-right:0!important;
    padding-left:9px;
    padding-right:9px;
    border-radius:4px;
  }
  #masthead .main-navigation .primary-menu-container>ul>li+li:before{
    left:0;
    z-index:5;
  }
  /* The first normal nav item after the featured card does not need a divider. */
  #masthead .main-navigation .primary-menu-container>ul>li:has(>a[href*="top-10-cards"])+li{
    padding-left:0;
  }
  #masthead .main-navigation .primary-menu-container>ul>li:has(>a[href*="top-10-cards"])+li:before{
    display:none!important;
  }
}


/* v1.3.42 category hero background fix.
 * v1.3.41 accidentally wrote this block with escaped newline text, so the browser
 * ignored it. Paint both the Kadence hero shell and its inner layers the same tan. */
body.category .entry-hero-container,
body.category .entry-hero-container-inner,
body.category .entry-hero-container .entry-hero-container-inner,
body.category .entry-hero-container .entry-header,
body.category .entry-hero-container .site-container,
body.category .entry-hero-layout-standard,
body.category .entry-hero-layout-standard .entry-hero-container-inner,
body.category .entry-hero-layout-standard .entry-header,
body.category .entry-hero-layout-standard .site-container,
body.category #inner-wrap .entry-hero-container,
body.category #inner-wrap .entry-hero-container-inner {
  background:var(--jtp-header-tan)!important;
  background-color:var(--jtp-header-tan)!important;
}

/* v1.3.43 category archive hero color fix.
 * Kadence renders the archive title as an .entry-hero section with a
 * .hero-section-overlay layer. The overlay was the remaining legacy yellow
 * visible on the left/right sides, so paint every hero layer consistently. */
body.category .entry-hero,
body.category section.entry-hero,
body.category .archive-hero-section,
body.category .entry-hero-container-inner,
body.category .entry-hero-container-inner .hero-section-overlay,
body.category .entry-hero-container-inner .hero-container,
body.category .entry-hero-container-inner .hero-container.site-container,
body.category .entry-hero-container-inner .entry-header,
body.category .entry-hero-container-inner::before,
body.category .entry-hero-container-inner::after,
body.category .hero-section-overlay {
  background:var(--jtp-header-tan)!important;
  background-color:var(--jtp-header-tan)!important;
  background-image:none!important;
}