/* =========================================================
   JARRED NAVBAR — FINAL CLEAN BUILD (Desktop + Mobile)
========================================================= */
.jarred-nav {
  --nav-h: clamp(56px, 7vw, 72px);
  --border: #cfd6c77c;
  --border-strong: #b7bfaa;
  --link: #25321f;
  --muted: #364025;
  --underline: #364025;
  --overlay-bg: #ffffff;
}

/* base */
.jarred-nav *{ box-sizing:border-box; }
.jarred-nav .navbar{ z-index:3002; position:relative; }
.jarred-nav .mobile-sheet{ z-index:4000; }
.jarred-nav .nav-overlay{ z-index:3999; }

/* ===== Desktop bar ===== */
.jarred-nav .navbar-wrap{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100vw;
  margin-left:calc(50% - 50vw);
  z-index:1000;
}
.jarred-nav .nav-spacer{ height:var(--nav-h); }

.jarred-nav .navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--nav-h);
  padding:0 clamp(120px,6vw,100px);
  background:transparent;
  transition:background-color .2s ease,box-shadow .2s ease;
}
.jarred-nav .navbar.scrolled{
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.jarred-nav .navbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--border);
  opacity:.8;
}
.jarred-nav .navbar.scrolled::after{
  background:var(--border-strong);
  opacity:1;
}

/* brand */
.jarred-nav .nav-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#111;
}
.jarred-nav .nav-brand img{
  width:clamp(96px,22vw,115px);
  height:auto;
  display:block;
}
.jarred-nav .nav-brand span{display:none;}

/* links + magic line */
.jarred-nav .nav-links{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:5px;
}
.jarred-nav .nav-links>a,
.jarred-nav .nav-links .top-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  text-decoration:none;
  color:var(--link);
  font:500 19px/var(--nav-h) Poppins,sans-serif !important;
  transition:color .2s ease;
  background:none;
  border:0;
}
.jarred-nav .nav-links a:hover,
.jarred-nav .nav-links a.is-active,
.jarred-nav .nav-links .top-link:hover{
  color:var(--link) !important;
}
.jarred-nav .magic-line{
  position:absolute;
  bottom:clamp(12px,2.2vw,18px);
  height:2px;
  background:var(--underline);
  border-radius:6px;
  left:0;
  width:0;
  opacity:0;
  transition:width .28s ease,left .28s ease,opacity .2s ease;
}

/* dropdown */
.jarred-nav .nav-item.has-sub{position:relative;}
.jarred-nav .nav-item.has-sub .dropdown{
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  min-width:200px;
  background:#fff;
  border:1px solid var(--border);
  padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease;
  z-index:5;
}
.jarred-nav .nav-item.has-sub:hover .dropdown,
.jarred-nav .nav-item.has-sub:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.jarred-nav .dropdown .sub-link{
  position:relative;
  display:block;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color:var(--muted);
  font:500 19px/1.2 Poppins,sans-serif;
  overflow:hidden;
  transition:color .2s ease;
}
.jarred-nav .dropdown .sub-link:hover{color:var(--link);}
.jarred-nav .dropdown .sub-magic-line{
  position:absolute;
  left:33%;
  bottom:6px;
  height:2.5px;
  width:0;
  background:var(--underline);
  border-radius:6px;
  transform:translateX(-50%);
  transition:width .25s ease;
}
.jarred-nav .dropdown .sub-link:hover .sub-magic-line{width:100px;}

/* ACTIVE STATES (keep desktop logic) */
.jarred-nav .nav-links > a.is-active,
.jarred-nav .nav-item.has-sub.is-active-parent > .top-link{
  color:var(--link);
}
.jarred-nav .dropdown .sub-link.is-active{ color:var(--link); }
.jarred-nav .dropdown .sub-link.is-active .sub-magic-line{ width:100px; }

/* hamburger */
.jarred-nav .hamburger{
  display:none;
  border:0;
  background:transparent;
  width:34px;
  height:34px;
  cursor:pointer;
}
.jarred-nav .hamburger .bar{
  display:block;
  width:22px;
  height:2px;
  background:#25321f;
  margin:5px auto;
  transition:transform .25s ease,opacity .2s ease;
}
.jarred-nav .hamburger[aria-expanded="true"] .bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.jarred-nav .hamburger[aria-expanded="true"] .bar:nth-child(2){
  opacity:0;
}
.jarred-nav .hamburger[aria-expanded="true"] .bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ===== Mobile fullscreen sheet ===== */
.jarred-nav .mobile-sheet[hidden]{display:none;}
.jarred-nav .mobile-sheet{
  position:fixed;
  inset:0;
  background:#fff;
  display:flex;
  flex-direction:column;
  animation:msFade .18s ease;
}
@keyframes msFade{
  from{opacity:0}
  to{opacity:1}
}
.jarred-nav .ms-top{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--border);
}

/* SAME SIZE AS DESKTOP/MOBILE NAV LOGO */
.jarred-nav .ms-brand img{
  display:block;
  height:auto;
  width:clamp(96px,22vw,115px); /* same as .nav-brand img default */
}

/* maliit gamay sa small phones (same as navbar @max-width:640) */
@media (max-width:640px){
  .jarred-nav .ms-brand img{
    width:clamp(80px,28vw,100px); /* match .nav-brand img sa mobile */
  }
}

.jarred-nav .ms-close{
  all:unset;
  cursor:pointer;
  font-size:40px;
  margin-right:5px;
  color:var(--muted);
}

/* horizontal slide */
.jarred-nav .ms-pages{
  flex:1;
  display:flex;
  width:200%;
  transform:translateX(0%);
  transition:transform .32s ease;
}
.jarred-nav .ms-page{
  width:50%;
  min-width:50%;
  display:flex;
  flex-direction:column;
}
.jarred-nav .mobile-sheet.sub-open .ms-pages{
  transform:translateX(-50%);
}

/* level 1 (centered) */
.jarred-nav .ms-level1{
  align-items:center;
  justify-content:center;
  gap:36px;
  list-style:none;
  padding:0;
  margin-top:150px;
  display:flex;
  flex-direction:column;
}
.jarred-nav .ms-level1 a,
.jarred-nav .ms-open{
  all:unset;
  cursor:pointer;
  font:500 clamp(24px,5.6vw,32px)/1.2 Poppins,sans-serif;
  color:var(--muted);
}
.jarred-nav .ms-open .ms-chev{margin-left:10px;}

/* ===== Sub page (Back + Fun Facts) ===== */
@import url('https://fonts.googleapis.com/css2?family=Prociono&display=swap');

.jarred-nav .ms-page--sub{
  display:flex;
  flex-direction:column;
}
.jarred-nav .ms-head--back{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--nav-h);
  border-bottom:none;
}
.jarred-nav .ms-head--back .ms-back{
  all:unset;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(0,0,0,.45);
  font:400 clamp(18px,4.6vw,28px)/1 Poppins,sans-serif;
  margin-top:150px;
}
.jarred-nav .ms-head--back .chev{
  font-size:1.2em;
  transform:translateY(-1px);
}

/* centered sublist */
.jarred-nav .ms-sublist--serif{
  display:flex;
  flex-direction:column;
  align-items:center;
  list-style:none;
  padding:40px 16px;
  gap:25px; /* THIS controls spacing */
}
.jarred-nav .ms-sublist--serif a{
  all:unset;
  cursor:pointer;
  font:500 clamp(24px,5.6vw,32px)/1.2 Poppins,sans-serif;
  color:var(--muted);
}

/* overlay */
.jarred-nav .nav-overlay{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  display:none;
}
.jarred-nav .nav-overlay[hidden]{display:none;}

/* responsive */
@media(max-width:960px){
  .jarred-nav .nav-links{display:none;}
  .jarred-nav .hamburger{display:block;}
  .jarred-nav .navbar{padding:0 clamp(14px,5vw,56px);}
}
@media(max-width:640px){
  .jarred-nav .navbar{padding:0 16px;}
  .jarred-nav .nav-brand img{width:clamp(80px,28vw,100px);}
}

/* ===== desktop fade-in ===== */
.nv-fade .nav-brand,
.nv-fade .nav-links>a,
.nv-fade .nav-links .top-link{
  opacity:0;
  transform:translateY(6px);
}
.nv-fade-in .nav-brand{
  animation:nvUp .38s ease .05s forwards;
}
.nv-fade-in .nav-links>a:nth-child(1){
  animation:nvUp .38s ease .07s forwards;
}
.nv-fade-in .nav-links>a:nth-child(2),
.nv-fade-in .nav-links .has-sub .top-link{
  animation:nvUp .38s ease .11s forwards;
}
.nv-fade-in .nav-links>a:nth-child(3){
  animation:nvUp .38s ease .15s forwards;
}
.nv-fade-in .nav-links>a:nth-child(4){
  animation:nvUp .38s ease .19s forwards;
}
@keyframes nvUp{
  to{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   SOFT APPEAR ANIMATIONS FOR ROOT & SUB PAGES (mobile)
========================================================= */
.jarred-nav .mobile-sheet .ms-page--root .ms-level1 > li{
  opacity:0;
  transform:translateY(8px);
  animation:msSeq .36s ease forwards;
}
.jarred-nav .mobile-sheet .ms-page--root .ms-level1 > li:nth-child(1){
  animation-delay:.05s;
}
.jarred-nav .mobile-sheet .ms-page--root .ms-level1 > li:nth-child(2){
  animation-delay:.09s;
}
.jarred-nav .mobile-sheet .ms-page--root .ms-level1 > li:nth-child(3){
  animation-delay:.13s;
}
.jarred-nav .mobile-sheet .ms-page--root .ms-level1 > li:nth-child(4){
  animation-delay:.17s;
}

.jarred-nav .mobile-sheet.sub-open .ms-page--sub .ms-head--back{
  opacity:0;
  transform:translateY(-6px);
  animation:msFade .28s ease .04s forwards;
}
.jarred-nav .mobile-sheet.sub-open .ms-page--sub .ms-sublist > li{
  opacity:0;
  transform:translateY(8px);
  animation:msSeq .34s ease forwards;
}
.jarred-nav .mobile-sheet.sub-open .ms-page--sub .ms-sublist > li:nth-child(1){
  animation-delay:.08s;
}
@keyframes msSeq{
  to{
    opacity:1;
    transform:none;
  }
}

/* ============== MOBILE ACTIVE INDICATOR (like magic line) ============== */
.jarred-nav .ms-level1,
.jarred-nav .ms-sublist{
  position:relative;
}
.jarred-nav .ms-mobile-line{
  display:none;
  position:absolute;
  bottom:-10px;
  left:50%;
  width:0;
  height:2px;
  background:var(--underline);
  border-radius:3px;
  transform:translateX(-50%);
  opacity:0;
  transition:width .28s ease,left .28s ease,opacity .2s ease;
}
.jarred-nav .ms-link.is-active ~ .ms-mobile-line,
.jarred-nav .ms-sublist .ms-link.is-active ~ .ms-mobile-line{
  opacity:1;
  width:60px;
}

/* ensure Back row on top */
.jarred-nav .ms-head--back{
  position:relative;
  z-index:1;
}