/* ==========================================================================
   CozyStay V48 Header Refinement
   Goal:
   - Make Network / Guesthouse toggle more compact
   - Make KO / EN / CN language buttons smaller
   - Preserve primary nav readability
   - Keep CTA visually dominant
   - Add refined sticky behavior
   - Improve mobile header density
   ========================================================================== */

/* ---------- Header shell ---------- */
header,
.site-header,
.header,
.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 250, 242, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header .header-inner,
.site-header .header-inner,
.header .header-inner,
.main-header .header-inner,
header > .container,
.site-header > .container {
  min-height: 72px;
}

/* ---------- Logo balance ---------- */
header .logo img,
.site-header .logo img,
.header .logo img,
.brand img,
.site-logo img {
  max-height: 54px;
  width: auto;
}

/* ---------- Network / Guesthouse toggle ---------- */
.network-toggle,
.site-toggle,
.brand-toggle,
.header-toggle,
.mode-toggle,
.segmented-toggle,
.view-toggle {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 2px !important;
}

.network-toggle button,
.site-toggle button,
.brand-toggle button,
.header-toggle button,
.mode-toggle button,
.segmented-toggle button,
.view-toggle button,
.network-toggle a,
.site-toggle a,
.brand-toggle a,
.header-toggle a,
.mode-toggle a,
.segmented-toggle a,
.view-toggle a {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.network-toggle svg,
.site-toggle svg,
.brand-toggle svg,
.header-toggle svg,
.mode-toggle svg,
.segmented-toggle svg,
.view-toggle svg {
  width: 14px !important;
  height: 14px !important;
}

/* fallback for toggle blocks containing visible Korean labels */
header :is(a,button):has(> span),
.site-header :is(a,button):has(> span) {
  line-height: 1.1;
}

/* ---------- Primary navigation ---------- */
header nav,
.site-header nav,
.header nav,
.main-nav {
  gap: 28px !important;
}

header nav a,
.site-header nav a,
.header nav a,
.main-nav a,
.nav-links a {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---------- Language buttons ---------- */
.language-switcher,
.lang-switcher,
.language-selector,
.locale-switcher,
.header-languages,
.lang-buttons {
  gap: 6px !important;
}

.language-switcher a,
.lang-switcher a,
.language-selector a,
.locale-switcher a,
.header-languages a,
.lang-buttons a,
.language-switcher button,
.lang-switcher button,
.language-selector button,
.locale-switcher button,
.header-languages button,
.lang-buttons button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Common direct language-label fallback */
header a[href*="/en"],
header a[href*="/zh"],
header a[href*="/cn"],
header a[href="/"],
.site-header a[href*="/en"],
.site-header a[href*="/zh"],
.site-header a[href*="/cn"] {
  line-height: 1.05;
}

/* ---------- CTA stays dominant ---------- */
header .cta,
.site-header .cta,
.header-cta,
.contact-cta,
.meeting-cta,
header a[href*="contact"],
header a[href*="inquiry"] {
  min-height: 44px;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* ---------- Secondary keyword strip ---------- */
.header-keywords,
.keyword-strip,
.brand-values,
.header-subnav {
  min-height: 42px;
  font-size: 12px;
  letter-spacing: .12em;
}

/* ---------- Slight compact state while scrolling ---------- */
body.v48-scrolled header,
body.v48-scrolled .site-header,
body.v48-scrolled .header,
body.v48-scrolled .main-header {
  box-shadow: 0 8px 24px rgba(23,50,77,.08);
}

body.v48-scrolled header .header-inner,
body.v48-scrolled .site-header .header-inner,
body.v48-scrolled .header .header-inner,
body.v48-scrolled .main-header .header-inner {
  min-height: 64px;
}

body.v48-scrolled header .logo img,
body.v48-scrolled .site-header .logo img,
body.v48-scrolled .header .logo img {
  max-height: 48px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  header nav,
  .site-header nav,
  .header nav,
  .main-nav {
    gap: 20px !important;
  }

  header nav a,
  .site-header nav a,
  .header nav a,
  .main-nav a {
    font-size: 15px !important;
  }

  .network-toggle button,
  .site-toggle button,
  .brand-toggle button,
  .header-toggle button,
  .mode-toggle button,
  .segmented-toggle button,
  .view-toggle button,
  .network-toggle a,
  .site-toggle a,
  .brand-toggle a,
  .header-toggle a,
  .mode-toggle a,
  .segmented-toggle a,
  .view-toggle a {
    padding: 0 13px !important;
    font-size: 13px !important;
  }

  .language-switcher a,
  .lang-switcher a,
  .language-selector a,
  .locale-switcher a,
  .header-languages a,
  .lang-buttons a,
  .language-switcher button,
  .lang-switcher button,
  .language-selector button,
  .locale-switcher button,
  .header-languages button,
  .lang-buttons button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 12px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  header,
  .site-header,
  .header,
  .main-header {
    position: sticky;
    top: 0;
  }

  header .header-inner,
  .site-header .header-inner,
  .header .header-inner,
  .main-header .header-inner {
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  header .logo img,
  .site-header .logo img,
  .header .logo img {
    max-height: 42px;
  }

  .network-toggle,
  .site-toggle,
  .brand-toggle,
  .header-toggle,
  .mode-toggle,
  .segmented-toggle,
  .view-toggle {
    height: 36px !important;
    min-height: 36px !important;
  }

  .network-toggle button,
  .site-toggle button,
  .brand-toggle button,
  .header-toggle button,
  .mode-toggle button,
  .segmented-toggle button,
  .view-toggle button,
  .network-toggle a,
  .site-toggle a,
  .brand-toggle a,
  .header-toggle a,
  .mode-toggle a,
  .segmented-toggle a,
  .view-toggle a {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  .language-switcher a,
  .lang-switcher a,
  .language-selector a,
  .locale-switcher a,
  .header-languages a,
  .lang-buttons a,
  .language-switcher button,
  .lang-switcher button,
  .language-selector button,
  .locale-switcher button,
  .header-languages button,
  .lang-buttons button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 11px !important;
  }
}