/* SkyStayTravel — unified header brand (mark + name). Load on any page with top nav. */

:root {
  --sst-logo-mark-url: url("/assets/logo-mark.svg?v=20261014-2339");
  --sst-logo-mark-header: 38px;
  --sst-logo-mark-footer: 30px;
}

nav:has(a.sst-brand),
nav:has(a.nav-brand),
header.nav:has(a.sst-brand) {
  background: linear-gradient(180deg, #0770e3 0%, #0668cf 52%, #0557b0 100%);
  border-bottom: none;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}

nav a.sst-brand,
nav a.logo,
nav a.brand,
nav a.nav-brand,
header.nav a.logo.sst-brand,
header.nav a.logo:has(.logo-mark) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.05 !important;
  flex-shrink: 0 !important;
  max-width: min(100%, 240px);
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

nav a.sst-brand:hover,
nav a.logo:hover,
nav a.brand:hover,
nav a.nav-brand:hover,
header.nav a.logo.sst-brand:hover {
  opacity: 0.94;
  color: #fff !important;
}

/* Logo mark (plane icon) — single SVG asset sitewide */
.logo-mark,
.brand-mark,
.nav-logo,
.sst-brand-mark,
.sst-logo-mark {
  width: var(--sst-logo-mark-header) !important;
  height: var(--sst-logo-mark-header) !important;
  min-width: var(--sst-logo-mark-header);
  border-radius: 10px !important;
  background-color: #ffffff !important;
  background-image: var(--sst-logo-mark-url) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.16) !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.logo-mark img,
.brand-mark img,
.nav-logo img,
.sst-brand-mark img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 10px !important;
}

/* Hide legacy inline SVG placeholders — asset comes from background image */
.brand-mark svg,
.logo-mark svg,
.nav-logo svg,
.sst-logo-mark svg,
.sst-brand-mark svg {
  display: none !important;
}

/* Name stack */
.logo-text,
.brand-text,
.nav-brand > div:last-child:not(.nav-logo):not(.logo-mark) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
  min-width: 0;
}

.logo-main,
.brand-name,
.nav-name {
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.logo-main .sky,
.brand-name .bn-sky,
.brand-name .sky,
.nav-name,
.fb-brand-text .sky,
.fb-brand-text .bn-sky {
  color: #fff !important;
}

.logo-main .stay,
.brand-name .bn-stay,
.brand-name .stay,
.fb-brand-text .stay,
.fb-brand-text .bn-stay {
  color: #ffd166 !important;
}

.fb-brand-text {
  font-weight: 900 !important;
  font-size: 0.98rem !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

.logo-tag,
.brand-tagline,
.nav-sub {
  font-size: 0.55rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

/* Route / minimal headers: text-only legacy logo */
header.nav a.logo:not(:has(.logo-mark)) {
  font-size: 1.1rem !important;
  max-width: none;
}

header.nav a.logo:not(:has(.logo-mark)) span {
  color: #ffd166 !important;
}

@media (max-width: 680px) {
  nav a.sst-brand,
  nav a.logo,
  nav a.brand,
  nav a.nav-brand,
  header.nav a.logo.sst-brand {
    gap: 8px !important;
    max-width: min(100%, 200px);
  }

  :root {
    --sst-logo-mark-header: 34px;
    --sst-logo-mark-footer: 28px;
  }

  .logo-main,
  .brand-name,
  .nav-name {
    font-size: 1.02rem !important;
  }

  .logo-tag,
  .brand-tagline,
  .nav-sub {
    font-size: 0.5rem !important;
    letter-spacing: 0.1em !important;
  }
}

@media (max-width: 380px) {
  .logo-tag,
  .brand-tagline,
  .nav-sub {
    display: none;
  }
}