/*
Theme Name: Child Theme for Veoke
Author: Brian Choi
Template: onikon
Version: 1.0
*/

html .headerContainer header .headerInnerContainer .logoContainer {
  width: 300px !important;
  display: flex;
  align-items: center;
  position: relative;
}

.headerContainer header .headerInnerContainer .logoContainer .orginal-logo,
.headerContainer header .headerInnerContainer .logoContainer .sticky-logo {
  display: flex;
  align-items: center;
  height: 100%;
  transition: opacity 0.35s ease;
}

.headerContainer header .headerInnerContainer .logoContainer .sticky-logo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.headerContainer header .headerInnerContainer .logoContainer .orginal-logo {
  opacity: 1;
}

.headerContainer header .headerOuter.sticky .headerInnerContainer .logoContainer .orginal-logo {
  opacity: 0;
  pointer-events: none;
}

.headerContainer header .headerOuter.sticky .headerInnerContainer .logoContainer .sticky-logo {
  opacity: 1;
  pointer-events: auto;
}

.headerContainer header .headerInnerContainer .logoContainer a img {
  display: block;
  width: auto;
  max-height: 90px;
  max-width: 100%;
  transition: max-height 0.35s ease;
}

.headerContainer header .headerOuter.sticky .headerInnerContainer .logoContainer a img {
  max-height: 52px;
}

.headerContainer header .headerOuter,
.headerContainer header .headerInnerContainer {
  transition: height 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.headerContainer header .headerOuter.sticky {
  position: fixed !important;
  top: 0;
  bottom: unset;
  width: 100%;
  max-width: 100%;
  min-height: auto;
  height: 100px;
  background: #ffffff !important;
  z-index: 10000;
}

.headerContainer header .headerOuter.sticky .headerInnerContainer {
  height: 100px !important;
  background: #ffffff;
}

#footer-container .footer-inner-container .footer-info .office-logo-container img {
  max-width: 257px !important;
}

#footer-container .footer-inner-container .footer-logo img {
  width: 100% !important;
}

.page-content-listing {
  max-width: 1280px !important;
  margin: auto;
  text-align: center;
  padding: 0px 15px;
}

body .themeContainer .themeInnerContainer {
  padding: 0;
}

/*
 * Parent theme sets overflow-x:hidden on both html and body.
 * That makes overflow-y compute to auto on both → double vertical scrollbars.
 * Keep a single scrollport on html only.
 */
html {
  overflow-x: clip !important;
  /* 부모 테마의 이중 스크롤바 유발 방지 */
}

body {
  overflow-x: clip !important;
  /* overflow-y는 기본값으로 둬야 모바일 메뉴 오픈 시 JS가 스크롤을 잠글 수 있음 */
}
/* ===== Mobile header (80px sticky/non-sticky) ===== */
@media screen and (max-width: 767px) {
  .headerContainer {
    height: auto !important;
    min-height: 0 !important;
  }

  .headerContainer header {
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  html body .headerContainer header .headerOuter,
  html body .headerContainer header .headerOuter.sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 80px !important;
    min-height: 80px !important;
    z-index: 10000;
  }

  html body .headerContainer header .headerInnerContainer,
  html body .headerContainer header .headerOuter.sticky .headerInnerContainer {
    height: 80px !important;
    min-height: 80px !important;
    overflow: visible;
  }

  html body .headerContainer header .headerInnerContainer .logoContainer {
    width: auto !important;
    max-width: calc(100% - 56px) !important;
  }

  html body .headerContainer header .headerInnerContainer .logoContainer a img {
    max-height: 58px !important;
  }

  html body .headerContainer header .headerOuter.sticky .headerInnerContainer .logoContainer a img {
    max-height: 52px !important;
  }

  /*
   * Off-canvas menu was position:absolute; right:-300px → document width 늘어나서
   * body에 가로/세로 스크롤이 걸림. fixed + translate로 화면 밖으로만 밀어 body 스크롤 방지.
   */
  .headerContainer header .headerInnerContainer .navigationContainer {
	position: fixed !important;
    top: 0 !important;
    bottom: 0 !important; /* 100dvh 대신 bottom: 0을 사용하여 주소창 버그 해결 */
    right: 0 !important;
    left: auto !important;
    width: 300px !important;
    max-width: 80% !important;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden !important;
    opacity: 1 !important;
    z-index: 10001;
  }
/* 모바일 메뉴가 열렸을 때 (스크롤 속성 추가) */
  .headerContainer header .headerInnerContainer .navigationContainer.openMobileMenu {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    /* 추가된 필수 iOS 모바일 스크롤 최적화 속성 */
    -webkit-overflow-scrolling: touch !important; 
    overscroll-behavior: none !important; /* 메뉴 끝에서 스크롤 시 배경이 딸려 올라가는 현상 원천 차단 */
  }

  /*
   * overflow-x: hidden 을 html+body 둘 다에 걸면 overflow-y 가 auto 로 계산되어
   * 이중 스크롤바가 생김. html 만 clip, body 는 visible 유지.
   */
  html {
    overflow-x: clip;
  }

  body {
    overflow: visible !important;
  }

  /* Inner pages: white bar */
  .headerContainer header .headerOuter {
    background: #ffffff !important;
    box-shadow: 0px 2px 4px -4px rgba(0, 0, 0, 0.3);
  }

  /* Home: transparent until sticky */
  body.home .headerContainer header .headerOuter,
  body.page-template-front-page-php .headerContainer header .headerOuter {
    background: transparent !important;
    box-shadow: none !important;
    max-width: 100dvw !important;
  }

  body.home .headerContainer header .headerOuter.sticky,
  body.page-template-front-page-php .headerContainer header .headerOuter.sticky {
    background: #ffffff !important;
    box-shadow: 0px 2px 4px -4px rgba(0, 0, 0, 0.3) !important;
  }

  body.home .headerContainer header .headerOuter.sticky .headerInnerContainer,
  body.page-template-front-page-php .headerContainer header .headerOuter.sticky .headerInnerContainer {
    background: #ffffff;
  }

  body.home .headerContainer header .headerOuter .mobileMenuIcon i,
  body.page-template-front-page-php .headerContainer header .headerOuter .mobileMenuIcon i {
    color: #ffffff !important;
  }

  body.home .headerContainer header .headerOuter.sticky .mobileMenuIcon i,
  body.page-template-front-page-php .headerContainer header .headerOuter.sticky .mobileMenuIcon i {
    color: #162533 !important;
  }

  /* Banner pages: parent uses calc(150px + 13%) — far too tall under 80px header */
  .headerContainer .headerBackgroundContainer {
    padding-top: 80px !important;
    min-height: 180px !important;
  }

  .headerContainer .headerBackgroundContainer .titleContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 28px 16px !important;
    border-bottom: none !important;
  }

  /* Templates that hide banner and use 230px top padding for desktop header */
  .who-primary-container,
  .vlog-primary-container,
  .story-primary-container,
  .blog-primary-container,
  .mission-primary-container,
  .happy-primary-container,
  .event-primary-container,
  .evaluation-primary-container,
  .contact-container,
  .container-content {
    padding-top: 110px !important;
  }
}

/* 네비게이션이 열려있을 때 body 스크롤 강제 잠금 (최신 브라우저용) */
body:has(.openMobileMenu) {
  overflow: hidden !important;
}