/* ===========================================================
   layout-header.css — DailyFinLab Unified Header & Hero
   Theme: Light Mode Fixed
   =========================================================== */

/* ===========================================================
   🔹 Site Header Bar
   -----------------------------------------------------------
   GeneratePress 코어 CSS(style.css, priority 5)는 .site-header 에
   box-shadow/margin-bottom 을 지정하지 않고, 이 파일은 그보다 늦은
   priority(20)로 로드되므로 !important 없이도 항상 이긴다.
=========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--header-divider);
  box-shadow: none;
  margin-bottom: 0;
  background: var(--page-bg);
}

/* ===========================================================
   🔹 Header Inner (CRITICAL FIX)
   GeneratePress desktop container 대응
=========================================================== */
.site-header .inside-header.grid-container {
  display: flex;
  align-items: center;
  gap: 12px;

  /* 데스크톱 기본 높이 확보 */
  min-height: 64px;

  /* 데스크톱 패딩 */
  padding: 14px 40px;

  box-sizing: border-box;
}

/* ===========================================================
   🔹 Logo / Branding
=========================================================== */
.site-branding,
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-logo img {
  height: var(--logo-h);
  width: auto;
}

.site-branding .main-title a {
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
}

.site-branding .main-title a:hover {
  color: var(--link-hover);
}

/* ===========================================================
   🔹 Main Navigation (Desktop)
=========================================================== */
.main-navigation {
  margin-left: auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* GP 내부 래퍼 폭 간섭 제거 */
.site-header .inside-navigation,
.site-header .main-navigation {
  width: auto;
  padding: 0;
}

/* 메뉴 링크 */
.main-navigation .main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 96px;
  padding: 6px 12px;
  line-height: 32px;

  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  border-radius: 10px;

  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.main-navigation .main-nav > ul > li:hover > a {
  transform: translateY(-1px);
}

/* 활성 메뉴
   GP 자체 활성 메뉴 규칙(.main-navigation .main-nav ul li[class*="current-menu-"] > a)
   과 specificity 가 동일하지만, 이 파일이 항상 더 나중에 로드되므로
   순서만으로 이미 이긴다. body 중복 선택자와 !important 는 불필요(제거). */
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
  color: var(--accent);
  font-weight: 600;
  background: transparent;
}

/* ===========================================================
   🔹 Dropdown Menu
=========================================================== */
.main-navigation .sub-menu {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow-base);
  padding: 6px;
  background: var(--card-bg);
}

.main-navigation .sub-menu a {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text);
}

.main-navigation .sub-menu a:hover {
  background: rgba(0, 0, 0, 0.02);
}

.menu-item-has-children .dropdown-menu-toggle {
  padding-right: 0;
}

/* ===========================================================
   🔹 Mobile Menu Toggle
=========================================================== */
/* 데스크탑에서는 메뉴 토글 버튼 숨기기 */
.menu-toggle,
.mobile-menu-toggle {
  display: none;
}

/* 모바일/태블릿에서만 표시 */
@media (max-width: 900px) {
  .menu-toggle,
  .mobile-menu-toggle {
    display: inline-flex;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 10px;
    padding: 6px 8px;
    line-height: 1;
    cursor: pointer;
    /* 모바일 터치 타겟 크기 확대 (접근성) */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}

/* ===========================================================
   🔹 Responsive (Tablet / Mobile)
=========================================================== */
@media (max-width: 900px) {
  .site-header .inside-header.grid-container {
    padding: 6px 16px; /* 8px → 6px 패딩 더 축소 */
    min-height: 44px; /* 48px → 44px 높이 축소 */
  }

  .site-logo img {
    height: 24px; /* 28px → 24px 로고 크기 더 축소 */
  }

  .site-branding .main-title a {
    font-size: 15px; /* 16px → 15px 텍스트 로고 더 축소 */
  }

  .main-navigation .main-nav > ul > li > a {
    min-width: auto;
    justify-content: flex-start;
    font-size: 14px; /* 15px → 14px 메뉴 글자 크기 더 축소 */
  }

  /* 모바일 메뉴 토글 버튼: 44px 아래로 줄이면 WCAG 2.1 터치 타겟(44x44) 미달 */
  .menu-toggle,
  .mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 6px;
  }
}

@media (max-width: 768px) {
  .site-header .inside-navigation {
    margin-left: 12px;
  }
}

/* 800px 브레이크포인트는 위 900px 블록과 완전히 동일한 값을 반복해서
   전 범위가 이미 죽은 코드였다 (900px 블록이 ≤900px 를 전부 덮음) — 제거.
   1024px 는 900~1024px 구간에서만 의미가 있으므로 유지. */
@media (max-width: 1024px) {
  .site-header {
    border-bottom: 1px solid var(--header-divider);
  }

  .site-header .inside-header.grid-container {
    padding: 6px 16px;
    min-height: 44px;
  }

  .site-logo img {
    height: 24px;
  }

  .site-branding .main-title a {
    font-size: 15px;
  }

  .main-navigation .main-nav > ul > li > a {
    min-width: auto;
    font-size: 14px;
  }
}

/* Hero section moved to layout-home-hero.css */

/* ===========================================================
   🔸 가로 모드 최적화 (Header only)
=========================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .site-header .inside-header.grid-container {
    min-height: 40px;
    padding: 4px 16px;
    gap: 8px;
  }

  .site-logo img {
    height: 20px;
  }

  .site-branding .main-title a {
    font-size: 14px;
  }

  .main-navigation .main-nav > ul > li > a {
    padding: 4px 10px;
    line-height: 28px;
    font-size: 13px;
  }

  .menu-toggle,
  .mobile-menu-toggle {
    min-width: 32px;
    min-height: 32px;
    padding: 2px 4px;
  }
}

/* 초소형 가로 모드 (max-height: 400px) — base.css 에 흩어져 있던
   같은 목적의 규칙을 header.css 로 합침 */
@media (max-height: 400px) and (orientation: landscape) {
  .site-header .inside-header.grid-container {
    min-height: 36px;
  }

  .site-logo img {
    height: 18px;
  }
}