/**
 * Modern Navigation Menu
 * Uses Flexbox and SVG background images (same as original)
 */

/* CSS Custom Properties */
:root {
  --nav-bg: #000;
  --nav-text: #fff;
  --nav-line-color: #fff;
  --nav-transition-duration: 0.4s;
  --nav-item-gap: 97px;
  --nav-item-gap-mobile: 30px;
}

/* Hide old navigation content but keep button */
.use-modern-nav .glnav {
  display: none !important;
}

/* Sidebar base transition - when showing back, small delay to prevent flash */
.about-sidebar,
.mobile-bottom-nav {
  transition: opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s;
}

/* Hide sidebar and other elements when menu is open - instant hide, no delay */
body.modern-nav-open .about-sidebar,
body.modern-nav-open .mobile-bottom-nav {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0s ease 0s, visibility 0s ease 0s;
}

/* Modern Navigation Container */
.modern-nav {
  --nav-visibility: hidden;
  --nav-opacity: 0;
  --nav-pointer: none;
  
  position: fixed;
  visibility: var(--nav-visibility);
  opacity: var(--nav-opacity);
  pointer-events: var(--nav-pointer);
  
  z-index: 100;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--nav-bg);
  transition: opacity var(--nav-transition-duration) ease, visibility var(--nav-transition-duration) ease;
}

.modern-nav.is-open {
  --nav-visibility: visible;
  --nav-opacity: 1;
  --nav-pointer: auto;
}

/* Navigation Content - Flexbox Layout */
.modern-nav__content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Navigation List - All items in one row */
.modern-nav__list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: var(--nav-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Navigation Item */
.modern-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.modern-nav.is-open .modern-nav__item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays */
.modern-nav.is-open .modern-nav__item:nth-child(1) { transition-delay: 0.1s; }
.modern-nav.is-open .modern-nav__item:nth-child(2) { transition-delay: 0.15s; }
.modern-nav.is-open .modern-nav__item:nth-child(3) { transition-delay: 0.2s; }
.modern-nav.is-open .modern-nav__item:nth-child(4) { transition-delay: 0.25s; }
.modern-nav.is-open .modern-nav__item:nth-child(5) { transition-delay: 0.3s; }
.modern-nav.is-open .modern-nav__item:nth-child(6) { transition-delay: 0.35s; }
.modern-nav.is-open .modern-nav__item:nth-child(7) { transition-delay: 0.4s; }

/* Reset delays when closing */
.modern-nav:not(.is-open) .modern-nav__item {
  transition-delay: 0s;
}

/* Navigation Link */
.modern-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--nav-text);
}

/* Vertical Line Indicator */
.modern-nav__line {
  width: 1px;
  height: 15px;
  background: var(--nav-line-color);
  margin-bottom: 25px;
  transform-origin: top center;
  transition: transform 0.3s ease;
}

.modern-nav__link:hover .modern-nav__line {
  transform: scaleY(2);
}

/* Text - Use SVG background images like original */
.modern-nav__text {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  text-indent: -9999px;
  text-align: left;
}

/* TOP */
.modern-nav__item--top .modern-nav__text {
  width: 12px;
  height: 54px;
  background-image: url("../images/glnav/glnav__new-item-top-ttl.svg");
}

/* ABOUT */
.modern-nav__item--about .modern-nav__text {
  width: 12px;
  height: 102px;
  background-image: url("../images/glnav/glnav__new-item-about-ttl.svg");
}

/* BUSINESS */
.modern-nav__item--business .modern-nav__text {
  width: 10px;
  height: 154px;
  background-image: url("../images/glnav/glnav__new-item-business-ttl.svg");
}

/* STYLE */
.modern-nav__item--style .modern-nav__text {
  width: 10px;
  height: 94px;
  background-image: url("../images/glnav/glnav__new-item-style-ttl.svg");
}

/* 新卒採用 */
.modern-nav__item--fresh .modern-nav__text {
  width: 20px;
  height: 97px;
  background-image: url("../images/glnav/glnav__item-recruit-newgraduate-ttl.svg");
}

/* 中途採用 */
.modern-nav__item--career .modern-nav__text {
  width: 20px;
  height: 97px;
  background-image: url("../images/glnav/glnav__item-mid-career-recruitment-ttl.svg");
}

/* インタビュー */
.modern-nav__item--interview .modern-nav__text {
  width: 20px;
  height: 149px;
  background-image: url("../images/glnav/glnav__item-interview-ttl.svg");
}

/* Hide the new button - we use the original glnav__btn-open */
.modern-nav-btn {
  display: none !important;
}

/* Mobile Styles - Two row layout */
@media screen and (max-width: 768px) {
  
  .modern-nav__list {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto auto;
    gap: 40px 35px;
    padding: 0;
  }
  
  /* Row 1: TOP, ABOUT, BUSINESS, STYLE (right to left becomes grid columns) */
  .modern-nav__item--top { grid-column: 4; grid-row: 1; }
  .modern-nav__item--about { grid-column: 3; grid-row: 1; }
  .modern-nav__item--business { grid-column: 2; grid-row: 1; }
  .modern-nav__item--style { grid-column: 1; grid-row: 1; }
  
  /* Row 2: 新卒採用, 中途採用, インタビュー (positioned in columns 2-4) */
  .modern-nav__item--fresh { grid-column: 4; grid-row: 2; }
  .modern-nav__item--career { grid-column: 3; grid-row: 2; }
  .modern-nav__item--interview { grid-column: 2; grid-row: 2; }
  
  .modern-nav__line {
    height: 10px;
    margin-bottom: 12px;
  }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
  .modern-nav__content {
    padding: 0;
  }
  
  .modern-nav__list {
    gap: 47px 60px;
  }
  
  .modern-nav__line {
    height: 15px;
    margin-bottom: 10px;
  }
}