.header_logo {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 255;
  padding: 0 1rem;
}

.header_logo_inner {
  max-width: 80rem; /* matches max-w-7xl */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo-container {
  /* Stay at full size until hitting 40% of viewport width */
  width: min(303px, 40vw);
  height: min(40px, calc(40vw * 0.132)); /* Maintain aspect ratio: 40/303 = 0.132 */
  display: flex;
  align-items: center;
}

.logo-container:first-child {
  justify-content: flex-start;
}

.logo-container:last-child {
  justify-content: flex-end;
}

.logo-link {
  display: block;
  height: 100%;
}

.cruisesheet-logo-header,
.header_line_logo {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Invert logos when on dark backgrounds */
.header_logo--inverted .cruisesheet-logo-header {
  filter: brightness(0) invert(1);
}

/* Logo and navigation group */
.logo-nav-group {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Navigation links */
.header-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Right side of the header: menu, plus the line logo on cruise pages */
.header-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.nav-link {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #666;
}

/* Invert nav links on dark backgrounds */
.header_logo--inverted .nav-link {
  color: #fff;
}

.header_logo--inverted .nav-link:hover {
  color: #ccc;
}

/* Lux sits in a pill so it stays legible on any header. Dark-text (light
   background) headers get an ink pill with gold text; inverted (dark
   background) headers get a gold pill with ink text. */
.nav-link--lux {
  color: #e2be62;
  background: linear-gradient(135deg, rgba(26,47,74,.9), rgba(13,28,48,.92));  /* subtle ink wash */
  padding: 3px 12px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.08em;
}

.nav-link--lux:hover {
  color: #f2d98d;
}

.header_logo--inverted .nav-link--lux {
  color: #10233a;
  background: linear-gradient(135deg, #f2d98d, #cf9f3f);
}

.header_logo--inverted .nav-link--lux:hover {
  color: #10233a;
  filter: brightness(1.06);
}

/* Reserve room for Menu before allowing the primary logo to shrink. */
.logo-nav-group > .logo-container {
  width: min(257.55px, calc((100vw - 120px) * .85));
  height: min(34px, calc((100vw - 120px) * 0.11221122));
  flex-shrink: 0;
}

/* ---- Browse groups (Destinations / Cruise Lines / Popular Ships) ---- */
.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link--group {
  background: none;
  border: 0;
  padding: 0 14px 0 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: inherit;
  position: relative;
}

/* chevron drawn from a border so it inherits the link colour (black or inverted white) */
.nav-link--group::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}

.nav-group.is-open .nav-link--group::after {
  transform: translateY(-30%) rotate(225deg);
}

.nav-link--group:focus-visible,
.nav-menu-btn:focus-visible,
.nav-sheet__close:focus-visible {
  outline: 2px solid #fed470;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Panel is fixed-positioned by script (the header lives inside the hero's
   overflow:hidden, so an absolute panel would clip on short heroes). Always
   white on ink, whatever the header behind it is doing. */
.nav-panel {
  position: fixed;
  z-index: 400;
  min-width: 232px;
  max-width: calc(100vw - 24px);
  background: #fff;
  color: #131943;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px -12px rgba(11, 23, 40, 0.35), 0 0 0 1px rgba(19, 25, 67, 0.06);
}

.nav-panel__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 0 6px;
}

.nav-panel--3col .nav-panel__cols {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.nav-panel a {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  color: #131943;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background: #eef5f7;
  color: #006279;
  outline: none;
}

.nav-panel__all {
  margin: 6px 4px 0;
  padding-top: 8px !important;
  border-top: 1px solid #e3e9ef;
  color: #006279 !important;
  font-weight: 700 !important;
}

/* Cruise line rows carry the line's square mark left of the name (the same
   _square_80 webp the result cards use, so it is already at the edge). A mark
   that fails to load hides but keeps its slot so the names stay aligned. */
.nav-panel .nav-line-link,
.nav-acc__list .nav-line-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-line-logo {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Learn-more hover: the trailing arrow nudges right while the link is hovered. */
.nav-panel__all::after,
.nav-acc__all::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-panel__all:hover::after,
.nav-acc__all:hover::after {
  transform: translateX(2px);
}

/* ---- Menu button + full-screen sheet ----
   The hamburger only exists at narrow widths (the media query below turns it
   on when the primary nav collapses); at wide widths its place is taken by
   the My Account link. */
.nav-account-link {
  display: inline-flex;
  align-items: center;
}

.nav-menu-btn {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  align-items: center;
  gap: 8px;
}

.nav-menu-btn__bars {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fff;
  color: #131943;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  max-width: 100vw;
  padding: 0 16px 32px;
  -webkit-overflow-scrolling: touch;
}

.nav-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--menu-header-height, 72px);
  border-bottom: 1px solid #e3e9ef;
  margin-bottom: 8px;
}

.nav-sheet__logo {
  position: absolute;
  left: var(--menu-logo-left, 16px);
  top: var(--menu-logo-top, 16px);
  width: var(--menu-logo-width, 257.55px);
  height: var(--menu-logo-height, 34px);
}
.nav-sheet__logo img {
  height: 100%;
  width: 100%;
}


.nav-sheet__close {
  position: absolute;
  right: var(--menu-button-right, 16px);
  top: var(--menu-button-center, 36px);
  transform: translateY(-50%);
  background: none;
  border: 1px solid #c9d3dc;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #131943;
  cursor: pointer;
}

.nav-acc {
  border-bottom: 1px solid #e3e9ef;
}

.nav-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-family: Gabarito, Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-acc summary::-webkit-details-marker { display: none; }

.nav-acc summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #006279;
  border-bottom: 2px solid #006279;
  transform: rotate(45deg);
  margin-right: 6px;
  transition: transform 0.2s;
}

.nav-acc[open] summary::after {
  transform: rotate(225deg);
}

.nav-acc__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 12px;
  padding: 0 0 14px;
}

.nav-acc__list a {
  display: block;
  padding: 8px 4px;
  color: #131943;
  font-size: 0.95rem;
  text-decoration: none;
}

/* A single panel moves between the desktop portal and mobile accordion. */
.nav-panel-slot .nav-panel { grid-column: 1 / -1; position: static; min-width: 0; max-width: none; padding: 0; box-shadow: none; transform: none; filter: none; }
.nav-panel-slot .nav-panel__cols { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; }
.nav-panel-slot .nav-panel a { padding: 8px 4px; font-size: .95rem; white-space: normal; }
.nav-panel-slot .nav-panel__all { margin: 0; border-top: 0; }

.nav-sheet__links {
  display: grid;
  gap: 2px;
  padding-top: 8px;
}

.nav-sheet__links a {
  display: block;
  padding: 12px 0;
  font-family: Gabarito, Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #131943;
  text-decoration: none;
  border-bottom: 1px solid #e3e9ef;
}

.nav-sheet__lux {
  color: #a8812f !important;
  letter-spacing: 0.04em;
}

/* Modal open/close for the sheet: script flips [hidden]; the sheet scales
   up from 0.96 with a fade and dips back out on the faster close clock.
   Self-contained here (the header ships before cs.css finishes loading). */
.nav-sheet {
  transform-origin: top right;
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
              display 250ms allow-discrete;
}

.nav-sheet[hidden] {
  display: none;
  opacity: 0;
  transform: scale(0.96);
  transition-duration: 150ms;
}

@starting-style {
  .nav-sheet:not([hidden]) {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* Accordion expand: the <details> content grows to its natural height
   (interpolate-size) while the list fades in from a 2px blur. Browsers
   without ::details-content support keep the fade and snap the height. */
.nav-acc {
  interpolate-size: allow-keywords;
}

.nav-acc::details-content {
  height: 0;
  overflow: hidden;
  transition: height 250ms cubic-bezier(0.22, 1, 0.36, 1),
              content-visibility 250ms allow-discrete;
}

.nav-acc[open]::details-content {
  height: auto;
}

.nav-acc__list {
  opacity: 0;
  filter: blur(2px);
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-acc[open] .nav-acc__list {
  opacity: 1;
  filter: blur(0);
}

/* content-visibility skips the closed list's style, so the open state has
   no before-change style to transition from; give it one explicitly. */
@starting-style {
  .nav-acc[open] .nav-acc__list {
    opacity: 0;
    filter: blur(2px);
  }
}

/* Collapse links before sacrificing the full-size primary logo. */
@media (max-width: 1100px) {
  .header-nav {
    display: none;
  }

  .nav-menu-btn {
    display: inline-flex;
  }

  .nav-account-link {
    display: none;
  }

  /* Menu sits at the far right edge; a cruise line's logo, when present,
     moves inboard of it at a size that fits beside the site logo instead of
     pushing the button toward the middle (or itself off-screen). */
  .header-right {
    gap: 0.75rem;
    flex-shrink: 1;
    min-width: 0;
  }

  .header-right .nav-menu-btn {
    order: 2;
  }

  .header-right .logo-container {
    width: min(160px, 24vw);
    height: min(40px, calc(24vw * 0.132));
  }
}