/* ==========================================================
   nav.css — SumFlat global navigation (all pages)
   Dropdown nav, hamburger, mobile overlay
   ========================================================== */

:root{
  --green:#22b573;
  --green-d:#1ea366;
  --green-l:#e8f5ee;
  --blue:#5b9fd5;
  --ink:#2d3a3f;
  --ink-2:#566066;
  --line:#e3e8ec;
}

/* ===== Desktop nav ===== */
nav.main{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:500}

/* direct top-level links (non-dropdown) */
nav.main > a.nav-link{
  color:var(--ink);position:relative;padding:6px 2px;
  transition:color .2s;white-space:nowrap;display:flex;align-items:center;
}
nav.main > a.nav-link:hover,
nav.main > a.nav-link.current{color:var(--green)}
nav.main > a.nav-link.current::after{
  content:'';position:absolute;bottom:-2px;left:2px;right:2px;
  height:2px;background:var(--green);border-radius:2px;
}

/* dropdown wrapper */
.nav-item{position:relative;display:flex;align-items:center}

/* clickable parent label (span or a) */
.nav-item > .nav-link{
  color:var(--ink);padding:6px 2px;
  transition:color .2s;cursor:pointer;
  display:flex;align-items:center;gap:4px;
  white-space:nowrap;font-size:14px;font-weight:500;
}
.nav-item:hover > .nav-link,
.nav-item > .nav-link.current{color:var(--green)}
.nav-item > .nav-link.current::after{
  content:'';position:absolute;bottom:-2px;left:2px;right:2px;
  height:2px;background:var(--green);border-radius:2px;
}

/* chevron icon */
.dd-chev{width:13px;height:13px;flex-shrink:0;opacity:.6;transition:transform .2s,opacity .2s;stroke:currentColor;fill:none}
.nav-item:hover .dd-chev{transform:rotate(180deg);opacity:1}

/* dropdown panel */
.nav-dropdown{
  position:absolute;top:calc(100% + 6px);left:50%;
  transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:6px;min-width:178px;
  box-shadow:0 16px 36px -8px rgba(0,0,0,.12),0 4px 10px -4px rgba(0,0,0,.06);
  opacity:0;visibility:hidden;
  transition:opacity .18s,visibility .18s,transform .18s;
  z-index:300;pointer-events:none;
}
.nav-item:hover .nav-dropdown{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.nav-dropdown a{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;font-size:13.5px;font-weight:600;
  color:var(--ink);border-radius:8px;
  transition:color .15s,background .15s;white-space:nowrap;
  position:relative;
}
.nav-dropdown a::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--green-l);flex-shrink:0;transition:background .15s;
}
.nav-dropdown a:hover{color:var(--green);background:var(--green-l)}
.nav-dropdown a:hover::before{background:var(--green)}

/* ===== Hamburger toggle ===== */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;
  padding:6px;border-radius:10px;transition:background .2s;
}
.nav-toggle:hover{background:var(--green-l)}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transform-origin:center;
  transition:width .3s,transform .35s,opacity .25s,background .2s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;width:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Mobile nav overlay ===== */
#mobile-nav{display:none;position:fixed;inset:0;z-index:200;overflow:hidden}
#mobile-nav.is-active{display:block}
.mnav-backdrop{
  position:absolute;inset:0;
  background:rgba(20,30,26,.55);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .45s;
}
#mobile-nav.is-active .mnav-backdrop{opacity:1}
#mobile-nav.is-closing .mnav-backdrop{opacity:0}
.mnav-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(88vw,360px);
  background:linear-gradient(160deg,#162520 0%,#1c2e28 60%,#162020 100%);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);overflow:hidden;
}
#mobile-nav.is-active .mnav-panel{transform:translateX(0)}
#mobile-nav.is-closing .mnav-panel{transform:translateX(100%)}
.mnav-deco{position:absolute;pointer-events:none;inset:0}
.mnav-deco::before{
  content:'';position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,181,115,.18) 0%,transparent 70%);
  top:-80px;right:-80px;
}
.mnav-deco::after{
  content:'';position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,159,213,.12) 0%,transparent 70%);
  bottom:60px;left:-40px;
}
.mnav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.mnav-logo{display:flex;align-items:center;gap:8px}
.mnav-logo-mark{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#5b9fd5 0%,#22b573 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-family:'Montserrat',sans-serif;font-size:14px;
}
.mnav-logo-name{font-weight:800;font-size:16px;color:#fff;font-family:'Montserrat','Noto Sans JP',sans-serif}
.mnav-close{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s;color:#fff;
}
.mnav-close:hover{background:rgba(34,181,115,.25);border-color:rgba(34,181,115,.5);transform:rotate(90deg)}
.mnav-close svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
.mnav-links{flex:1;overflow-y:auto;padding:8px 0 20px}
.mnav-links a{
  display:flex;align-items:center;gap:16px;
  padding:0 24px;height:60px;
  color:rgba(255,255,255,.7);
  font-size:15.5px;font-weight:700;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;overflow:hidden;
  transition:color .25s,background .25s;
  opacity:0;transform:translateX(28px);
}
.mnav-links a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--green);transform:scaleY(0);
  transition:transform .25s;transform-origin:bottom;
}
.mnav-links a:hover{color:#fff;background:rgba(255,255,255,.04)}
.mnav-links a:hover::before{transform:scaleY(1)}
.mnav-num{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:var(--green);min-width:24px;opacity:.8}
/* sub-items (dropdown children) */
.mnav-links a.mnav-sub{
  height:48px;padding-left:64px;
  font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.5);
  border-bottom-color:rgba(255,255,255,.03);
}
.mnav-links a.mnav-sub::before{background:var(--green-l)}
.mnav-links a.mnav-sub:hover{color:rgba(255,255,255,.85)}

/* animation delays (9 total slots) */
#mobile-nav.is-active .mnav-links a{animation:mnavSlide .45s cubic-bezier(.16,1,.3,1) both}
#mobile-nav.is-active .mnav-links a:nth-child(1){animation-delay:.10s}
#mobile-nav.is-active .mnav-links a:nth-child(2){animation-delay:.14s}
#mobile-nav.is-active .mnav-links a:nth-child(3){animation-delay:.17s}
#mobile-nav.is-active .mnav-links a:nth-child(4){animation-delay:.20s}
#mobile-nav.is-active .mnav-links a:nth-child(5){animation-delay:.23s}
#mobile-nav.is-active .mnav-links a:nth-child(6){animation-delay:.26s}
#mobile-nav.is-active .mnav-links a:nth-child(7){animation-delay:.28s}
#mobile-nav.is-active .mnav-links a:nth-child(8){animation-delay:.30s}
#mobile-nav.is-active .mnav-links a:nth-child(9){animation-delay:.32s}
@keyframes mnavSlide{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}

.mnav-cta{padding:20px 24px 32px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;opacity:0;transform:translateY(16px)}
#mobile-nav.is-active .mnav-cta{animation:mnavFadeUp .4s cubic-bezier(.16,1,.3,1) .4s both}
@keyframes mnavFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mnav-cta-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:52px;border-radius:999px;
  background:var(--green);color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 8px 24px -8px rgba(34,181,115,.7);
  transition:background .2s,transform .15s;
}
.mnav-cta-btn:hover{background:var(--green-d);transform:translateY(-1px)}
.mnav-cta-btn .arr{
  width:14px;height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center/contain;
}

/* ===== Breadcrumb (shared) ===== */
.breadcrumb{padding:16px 0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.breadcrumb a{color:var(--ink-2);transition:color .2s}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb svg{width:12px;height:12px;opacity:.5}

/* ===== Responsive breakpoint ===== */
@media(max-width:768px){
  nav.main{display:none}
  .nav-toggle{display:flex}
}