/* ==========================================================================
   SkyAirways - Sticky Header with Glass Morphism
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header Shell
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 56px;
  background-color: var(--rb-header-bg);
  color: var(--rb-header-text);
  transition: background-color var(--rb-transition),
    backdrop-filter var(--rb-transition), box-shadow var(--rb-transition);
}

.site-header.header--scrolled {
  background-color: rgba(26, 31, 94, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .site-header.header--scrolled {
  background-color: rgba(15, 17, 23, 0.88);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-header.header--scrolled {
    background-color: rgba(15, 17, 23, 0.88);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Desktop height */
@media (min-width: 1024px) {
  .site-header {
    height: 64px;
  }

  .header__inner {
    padding-inline: 32px;
  }
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header__logo img {
  /* Sized by HEIGHT, not width. The old artwork was 2.47:1 so a fixed width
     gave a sensible height by accident; the SkyAirways lockup is 6.54:1 and
     the same width rendered it a third as tall. Driving off height keeps the
     logo's presence in the bar fixed and lets the width follow the lockup. */
  height: 24px;
  width: auto;
}

@media (min-width: 1024px) {
  .header__logo img {
    height: 32px;
  }
}

/* Dark theme: swap RB header logo to white-text variant.
   Selector was `.header__logo img[data-logo="rb"]`, but data-logo sits on the
   anchor in index.html and is absent altogether on the eight content pages, so
   it never matched and the navy lettering vanished into the dark header.
   Targeting the image inside .header__logo covers every page without needing a
   data attribute on each one. */
[data-theme="dark"] .header__logo img {
  content: url("/assets/rb-logos/rb-logo-white-font-embelem.svg?v=414bd70d5d");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .header__logo img {
    content: url("/assets/rb-logos/rb-logo-white-font-embelem.svg?v=414bd70d5d");
  }
}

/* --------------------------------------------------------------------------
   Desktop Navigation
   -------------------------------------------------------------------------- */
.header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.header__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rb-header-text);
  border-radius: var(--rb-radius);
  transition: color var(--rb-transition), background-color var(--rb-transition);
  white-space: nowrap;
}

.header__nav-link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background-color: var(--rb-gold);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--rb-transition);
}

.header__nav-link:hover::after,
.header__nav-link.is-active::after {
  transform: scaleX(1);
}

.header__nav-link:hover {
  color: var(--rb-accent-hover);
}

.header__nav-link:focus-visible {
  outline: 2px solid var(--rb-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header Actions (right side)
   -------------------------------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1024px) {
  .header__actions {
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   Language Toggle Dropdown
   -------------------------------------------------------------------------- */
.lang-toggle {
  position: relative;
}

.lang-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rb-header-text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--rb-radius);
  cursor: pointer;
  transition: background-color var(--rb-transition);
}

.lang-toggle__btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.lang-toggle__btn:focus-visible {
  outline: 2px solid var(--rb-gold);
  outline-offset: 2px;
}

.lang-toggle__btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--rb-transition);
}

.lang-toggle.is-open .lang-toggle__btn svg {
  transform: rotate(180deg);
}

.lang-toggle__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background-color: var(--rb-card);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  box-shadow: var(--rb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--rb-transition), transform var(--rb-transition),
    visibility var(--rb-transition);
  z-index: 1010;
}

.lang-toggle.is-open .lang-toggle__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-toggle__option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--rb-text);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rb-transition);
}

.lang-toggle__option:first-child {
  border-radius: var(--rb-radius) var(--rb-radius) 0 0;
}

.lang-toggle__option:last-child {
  border-radius: 0 0 var(--rb-radius) var(--rb-radius);
}

.lang-toggle__option:hover {
  background-color: var(--rb-surface);
}

.lang-toggle__option.is-active {
  color: var(--rb-accent);
  font-weight: 600;
}

.lang-toggle__option:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Theme Toggle Button
   -------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--rb-header-text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--rb-transition), transform var(--rb-transition);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(15deg);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--rb-gold);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Sun icon visible in dark mode, moon in light mode */
.theme-toggle__sun {
  display: none;
}

.theme-toggle__moon {
  display: block;
}

[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle__sun {
    display: block;
  }

  :root:not([data-theme]) .theme-toggle__moon {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   "My Booking" CTA Button
   -------------------------------------------------------------------------- */
.header__cta {
  display: none;
}

@media (min-width: 768px) {
  .header__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--rb-navy);
    background-color: var(--rb-gold);
    border: none;
    border-radius: var(--rb-radius);
    cursor: pointer;
    transition: background-color var(--rb-transition),
      box-shadow var(--rb-transition), transform var(--rb-transition);
  }

  .header__cta:hover {
    background-color: var(--rb-accent-hover);
    box-shadow: 0 2px 12px rgba(27, 184, 245, 0.4);
    transform: translateY(-1px);
  }

  .header__cta:active {
    transform: translateY(0);
  }

  .header__cta:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   Mobile Hamburger Button
   -------------------------------------------------------------------------- */
.header__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1020;
}

@media (min-width: 1024px) {
  .header__hamburger {
    display: none;
  }
}

.header__hamburger:focus-visible {
  outline: 2px solid var(--rb-gold);
  outline-offset: 2px;
}

.hamburger-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 18px;
}

.hamburger-icon span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--rb-header-text);
  border-radius: 1px;
  transition: transform var(--rb-transition), opacity var(--rb-transition);
}

.hamburger-icon span:nth-child(1) {
  transform: translateY(-7px);
}

.hamburger-icon span:nth-child(3) {
  transform: translateY(7px);
}

/* X state when open */
.header__hamburger.is-open .hamburger-icon span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.header__hamburger.is-open .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.header__hamburger.is-open .hamburger-icon span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile Drawer
   -------------------------------------------------------------------------- */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background-color: var(--rb-header-bg);
  color: var(--rb-header-text);
  z-index: 1010;
  transform: translateX(100%);
  transition: transform var(--rb-transition);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1005;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rb-transition), visibility var(--rb-transition);
}

.mobile-drawer__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .mobile-drawer,
  .mobile-drawer__overlay {
    display: none !important;
  }
}

.mobile-drawer__content {
  padding: 72px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-drawer__link {
  display: block;
  padding: 14px 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--rb-header-text);
  border-radius: var(--rb-radius);
  transition: background-color var(--rb-transition), color var(--rb-transition);
}

.mobile-drawer__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--rb-gold);
}

.mobile-drawer__link.is-active {
  color: var(--rb-gold);
  background: rgba(27, 184, 245, 0.1);
}

.mobile-drawer__link:focus-visible {
  outline: 2px solid var(--rb-gold);
  outline-offset: 2px;
}

.mobile-drawer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 12px 0;
}

.mobile-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rb-navy);
  background-color: var(--rb-gold);
  border: none;
  border-radius: var(--rb-radius);
  cursor: pointer;
  transition: background-color var(--rb-transition);
}

.mobile-drawer__cta:hover {
  background-color: var(--rb-accent-hover);
}

.mobile-drawer__cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.header--scrolled,
  .header__nav-link::after,
  .lang-toggle__dropdown,
  .hamburger-icon span,
  .mobile-drawer,
  .mobile-drawer__overlay {
    transition: none;
  }

  .theme-toggle:hover {
    transform: none;
  }
}