/* header.css */

/* 헤더를 감싸는 컨테이너 */
.header {
  position: sticky;
  top: 0px;
  z-index: 999;
}

/* 1) 상단 바(OUR PRESENCE, NEWS, CAREERS, CONTACT US, BLOG) */
.top-bar-container {
  display: flex; /* Flexbox 적용 */
  justify-content: center; /* 자식 요소(centered) 중앙 정렬 */
  background-color: coral; /* 배경색 */
  width: 100%; /* 전체 너비 */
  z-index: 1; /* .logo-nav-bar-container보다 낮은 z-index */
  color: whi;
}

.top-bar {
  max-width: 1296px; /* 최대 너비 제한 */
  width: 100%; /* 부모의 너비를 따라감 */
  display: flex; /* Flexbox */
  justify-content: flex-end; /* 내부 콘텐츠 오른쪽 정렬 */
  padding: 4px 20px; /* 좌우 패딩 */
  font-weight: normal;
  
}

.top-nav {
  display: flex;
  /* gap이 적용되도록 flex 설정 */
  gap: 20px;
  /* 각 a 태그 간 간격 설정 */
}

.top-nav a {  
  text-decoration: none;
  color: black;
  font-size: 12px;
  font-weight: normal;
}

/* 로고-내비 한 줄에 배치하는 박스의 부모 컨테이너 */
.logo-nav-bar-container {
  display: flex;
  justify-content: center;  
  width: 100%;  
  background-color: white;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);   
}

/* 로고와 내비게이션을 감싸는 박스 */
.logo-nav-bar {
  max-width: 1296px;
  /* 최대 너비 */
  width: 100%;
  /* 부모 컨테이너 너비에 맞게 */
  display: flex;
  justify-content: space-between;
  /* 양쪽 끝 정렬 */
  align-items: center;
  /* 세로 정렬 */
  padding: 0px 20px;
  /* 패딩 추가 */
  background-color: white;
  /* 배경색 */
}

/* 왼쪽 로고+태그라인+배지 */
.logo-section {
  display: flex;
  align-items: center;
  text-decoration: none; /* 링크 밑줄 제거 */
}

.logo-link {
  display: flex; /* 링크 내부 가로 정렬 */
  align-items: center; /* 이미지와 텍스트를 세로로 가운데 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
}

.logo-link:hover .tagline {
  text-decoration: underline; /* 마우스 오버 시 텍스트 강조 */
}

/* 로고 이미지 */
.logo-section img {
  max-height: 46px;
  /* 로고 크기 제한 */
}

/* 오른쪽 내비게이션 */
.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;  
}

/* 햄버거 버튼 기본 숨김 */
.hamburger-button {
  display: none; /* 데스크탑에서 숨김 */
}

.main-nav a {
  display: inline-block; /* 인라인 요소 대신 inline-block 추천 */
  position: relative;
  text-decoration: none;
  color: black;
  font-size: 16px;
  font-weight: bold;
  /* padding, line-height으로 세로 공간을 조금 확보해주면 좋습니다 */
  padding: 5px 0;
  line-height: 1.2;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* 혹은 bottom: -2px 등으로 조정 */
  width: 0;
  height: 2px;
  background-color: coral;
  transition: width 0.3s ease-in-out;
}

.main-nav a:hover::after {
  width: 100%;
}


/* 로고 옆에 텍스트와 배지를 세로로 배치하고 싶다면 */
.text-and-badge {
  display: flex;
  flex-direction: column;  
}

/* 태그라인 */
.tagline {
  font-size: 14px;
  font-weight: bold;
  color: #ee6344;
  padding-top: 16px;
}