/* Header styles - komadc.jp inspired */

:where(.l-header) {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: var(--wp--custom--z-index--fixed);
  background: var(--wp--custom--overlay--light--9);
  backdrop-filter: blur(var(--wp--preset--spacing--sm));
  box-shadow: var(--wp--custom--shadow--md);
  @media (max-width:1200px){
    display:none;
  }
}

:where(.l-header__inner) {
  margin: 0 auto;
  padding: var(--wp--preset--spacing--sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:9.3rem;
  @media (max-width: 1200px) {
    height: 6rem;
  }
}

/* Logo section */
:where(.l-header__logo-section) {
  display: flex;
  flex-direction: column;
}
:where(.l-header__logo) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

:where(.l-header__tagline) {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--gray-darker);
  font-weight: var(--wp--custom--font-weight--light);
}

:where(.l-header__logo) {
  margin: 0;
  width: 100%;
}

:where(.l-header__logo-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  text-decoration: none;
  color: var(--wp--preset--color--black);
  transition: opacity 300ms ease;
  img {
    width: var(--wp--preset--font-size--xl);
    height: var(--wp--preset--font-size--xl);
  }
}

:where(.l-header__logo-link:hover) {
  opacity: var(--wp--custom--overlay--dark--7);
}

:where(.l-header__logo-icon) {
  width: var(--wp--preset--spacing--xl);
  height: var(--wp--preset--spacing--xl);
  color: var(--wp--preset--color--primary);
}

:where(.l-header__logo-text) {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  letter-spacing: var(--wp--custom--letter-spacing--widest);
  text-decoration: none !important;
  color: var(--wp--preset--color--black);
}

:where(.l-header__nav-list) {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap:var(--wp--preset--spacing--base);
}

:where(.l-header__nav-item) {
  position: relative;
}

:where(.l-header__nav-link) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 300ms ease;
  position: relative;
  gap: var(--wp--preset--spacing--xs);
}

:where(.l-header__nav-link:hover) {
  /* Hover state handled by child elements */
}

/* Japanese text */
:where(.l-header__nav-jp) {
  font-size: var(--wp--preset--font-size--sm);
  transition: color 300ms ease;
}

:where(.l-header__nav-link:hover .l-header__nav-jp) {
  color: var(--wp--preset--color--primary);
}

/* Separator line */
:where(.l-header__nav-line) {
  display: block;
  width: var(--wp--preset--spacing--lg);
  height: var(--wp--preset--spacing--px);
  background: var(--wp--preset--color--primary);
  transition: all 300ms ease;
}

:where(.l-header__nav-link:hover .l-header__nav-line) {
  width: var(--wp--preset--spacing--xl);
}

/* English text */
:where(.l-header__nav-en) {
  font-size: var(--wp--preset--font-size--2-xs);
  font-weight: normal;
  letter-spacing: var(--wp--custom--letter-spacing--extra-wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--gray);
  transition: all 300ms ease;
}

:where(.l-header__nav-link:hover .l-header__nav-en) {
  color: var(--wp--preset--color--primary);
  opacity: 1;
}

/* Contact & Actions */
:where(.l-header__actions) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--xs);
}

/* Buttons container */
:where(.l-header__buttons) {
  display: flex;
  align-items: center;
  gap: 0;
}

:where(.l-header__contact) {
  display: flex;
  align-items: center;
}

:where(.l-header__contact-label) {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--ultra-wide);
  color: var(--wp--preset--color--gray);
  margin-right: var(--wp--preset--spacing--xs);
}

:where(.l-header__contact-number) {
  letter-spacing: var(--wp--custom--letter-spacing--ultra-wide);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  letter-spacing: var(--wp--custom--letter-spacing--wider);
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--xl);
  text-decoration: none;
  transition: color 300ms ease;
}

:where(.l-header__contact-number:hover) {
  color: var(--wp--preset--color--primary);
}
/* LINE button */
:where(.l-header__line-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--wp--preset--spacing--xl);
  width: var(--wp--preset--spacing--xl);
  background: white;
  color: #06c755;
  background: #e9fff1;
  border-radius: var(--wp--custom--border-radius--full);
  text-decoration: none;
  transition: all 300ms ease;
  margin-left: var(--wp--preset--spacing--base);
}

:where(.l-header__line-btn:hover) {
  background: #f0fff5;x
  box-shadow: 0 var(--wp--preset--spacing--2-xs)
    var(--wp--preset--spacing--base) rgba(6, 199, 85, 0.2);
}

:where(.l-header__line-btn svg) {
  width: var(--wp--preset--spacing--lg);
  height: var(--wp--preset--spacing--lg);
}

a:where(.l-header__reserve-btn:not(.wp-element-button)) {
  color: var(--wp--preset--color--white);
}
:where(.l-header__reserve-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--base);
  height: var(--wp--preset--spacing--xl);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border-radius--full);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  letter-spacing: var(--wp--custom--letter-spacing--widest);
  text-decoration: none;
  transition: all 300ms ease;
}

:where(.l-header__reserve-btn .material-symbols-outlined) {
  font-size: var(--wp--preset--font-size--lg);
}

:where(.l-header__reserve-btn:hover) {
  opacity: 0.8;
}

/* Menu button (mobile) */
:where(.l-header__menu-btn) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--wp--preset--spacing--2-xl);
  height: var(--wp--preset--spacing--2-xl);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

:where(.l-header__menu-btn) span {
  display: block;
  width: var(--wp--preset--spacing--lg);
  height: var(--wp--preset--spacing--2-xs);
  background: var(--wp--preset--color--black);
  margin: var(--wp--preset--spacing--3-xs) 0;
  transition: all 300ms ease;
}

:where(.l-header__menu-btn.is-active) span:nth-child(1) {
  transform: rotate(45deg)
    translate(
      var(--wp--preset--spacing--2-xs),
      var(--wp--preset--spacing--2-xs)
    );
}

:where(.l-header__menu-btn.is-active) span:nth-child(2) {
  opacity: 0;
}

:where(.l-header__menu-btn.is-active) span:nth-child(3) {
  transform: rotate(-45deg)
    translate(
      var(--wp--preset--spacing--2-xs),
      calc(var(--wp--preset--spacing--2-xs) * -1)
    );
}

:where(.l-header__logo-icon) {
  width: var(--wp--preset--font-size--4-xl);
  height: var(--wp--preset--font-size--4-xl);
}

:where(.l-header__nav-link) {
  padding: 0 var(--wp--preset--spacing--base);
}

:where(.l-header__nav-link)::before {
  font-size: var(--wp--preset--font-size--xs);
}