/* Initial homepage/search layout, served on the page origin to avoid a new connection before first paint.
 * Versioned snapshot of the card, header, and deal layout rules below.
 * Keep earlier versions available for cached pages; bump the filename when changing this bundle. */

/* css/cruise-card-layout.v2.css */
/* Shared layout for server-rendered and instant-search result cards.
 * Loaded separately so browsers can cache it while the full CSS loads async.
 * When changing these rules, bump the filename version and its link in
 * views/css_includes.mustache; keep previous versions for cached pages.
 * Explicit transforms do not depend on Tailwind reset variables.
 */
.cruise-card .cs-card-layout, .cruise-card .cs-card-main { display: flex; flex-direction: column; min-width: 0; }
.cruise-card .cs-card-main { flex: 1 1 0%; }
.cruise-card .cs-card-thumbnail-layout { position: relative; flex: 0 0 auto; width: 100%; height: 160px; }
.cruise-card .cruise-card-details { flex: 1 1 0%; min-width: 0; }
.cruise-card .cruise-card-price { box-sizing: border-box; flex: 0 0 auto; width: 100%; }
.cruise-card .cruise-card-stripe { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 100%; height: 32px; }
.cruise-card .cruise-card-stripe span { white-space: nowrap; }
/* Inventory snapshots may still serve the previous two-stripe template. */
.cruise-card .cruise-class-stripe.md\:hidden { display: flex; flex: 0 0 auto; width: 100%; height: 32px; }
/* Outrank the legacy .cruise-card > .flex > .flex wrapper reset. */
.cruise-card > .flex > .cruise-class-stripe.md\:hidden { min-height: 32px; }
.cruise-card .cruise-class-stripe.md\:flex { display: none; }
@media (min-width: 768px) {
    .cruise-card .cs-card-layout, .cruise-card .cs-card-main { flex-direction: row; }
    .cruise-card .cs-card-thumbnail-layout { width: 180px; }
    .cruise-card .cruise-card-price { width: 160px; }
    .cruise-card .cruise-card-stripe { width: 40px; height: auto; }
    .cruise-card .cruise-card-stripe span { transform: rotate(90deg); }
    .cruise-card .cruise-class-stripe.md\:hidden { display: none; }
    .cruise-card .cruise-class-stripe.md\:flex { display: flex; flex: 0 0 40px; width: 40px; }
    .cruise-card .cruise-class-stripe.md\:flex span { transform: rotate(90deg); }
}

/* The poster must paint correctly before the decorative async bundle. */
.cruise-card .cs-card-poster { display: contents; }
.cruise-card .cs-card-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 4; }
.cruise-card .cs-card-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; pointer-events: none; }
.cruise-card .cs-card-map.is-ready { opacity: 1; }

/* css/components/logos.v3.css */
.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 {
  min-width: 0;
  max-width: 100%;
  display: block;
  height: 100%;
}

/* Outrank the legacy fixed-height logo rule, regardless of load order. */
.logo-container .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));
  }
}

/* Match ocean.js's still-tile scale (9230 / zoom). The canvas retains its
   existing fade and paints the animated ocean over this immediately visible layer. */
.cs-ocean-still {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url('/assets/ocean-still.v1.webp') repeat 0 0 / auto 4013px;
}
.cs-ocean-still--map { background-size: auto 1538px; }
.cs-ocean-still--sailing { background-size: auto 1742px; }
/* ocean.js's no-GPU fallback assigns an inline background to the canvas.
   The still is already painted underneath; prevent a second, late LCP image. */
.cs-ocean-still + #cs-sea { background-image: none !important; }

/* css/pages/deal-layout.css */
/* homepage: the search floats over the ocean in a dark glass pill; the hero
       is generative so it simply renders taller here */
    .map_holder { height: 496px !important; transition: height .6s cubic-bezier(.4,0,.2,1); }
    .map_holder > .absolute.bottom-0 { display: none; } /* cred row would sit under the pill */
    .cs-hero-search { position: relative; z-index: 40; margin-top: -268px; padding: 0 16px 56px; transition: margin-top .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1); }
    /* headline rides higher so open water shows between it and the search */
    .map_holder .map_cover { align-items: flex-start !important; padding-top: 92px; }
    .cs-hero-pill { position: relative; z-index: 2; max-width: 76rem; margin: 0 auto; background: linear-gradient(to bottom right, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 42%), rgba(9, 20, 36, .26); backdrop-filter: blur(9px) saturate(1.4); -webkit-backdrop-filter: blur(9px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .22); border-radius: 24px; padding: 14px 20px 8px; box-shadow: 0 24px 60px -18px rgba(5, 15, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(255, 255, 255, .06); transition: max-width .5s cubic-bezier(.4,0,.2,1), border-radius .5s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease, padding .45s ease; }
    .cs-hero-cred { position: relative; z-index: 1; max-width: 76rem; margin: 20px auto 0; opacity: .85; filter: brightness(0) invert(1); }
    .cs-hero-pill .search-panel { background: none !important; box-shadow: none !important; }
    /* docked: after a search the pill morphs into a full-width bar flush under
       the ocean hero (also the static form of the results-page search bar) */
    .cs-hero-search.is-docked { padding: 0; }
    /* JS sets .map_holder height + .cs-hero-search margin-top so the waves
       compress up to meet the bar's bottom; .no-anim applies it instantly on
       a fresh results-page load */
    .cs-hero-search.no-anim, .cs-hero-search.no-anim .cs-hero-pill, .map_holder.no-anim { transition: none !important; }
    .cs-hero-search.is-docked .cs-hero-pill { max-width: 100%; border-radius: 0; background: linear-gradient(to bottom right, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 42%), rgba(9, 20, 36, .26); border-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px -8px rgba(5, 15, 30, .4); padding: 10px 20px 4px; }
    .cs-hero-search.is-docked .cs-hero-cred { display: none; }
    /* A clean edge between the water and the page body. */
    body[data-search-sidebar] .map_holder::after { display: none; }
    body[data-search-sidebar="home"]:not(.cs-search-layout-ready) main > .container { padding-top: 24px; }

    @media (max-width: 639px) {
      /* A taller mobile hero accommodates the stacked search fields. */
      .map_holder { height: 736px !important; }
      /* the inline 4rem on the headline needs the !important to lose */
      .map_holder .header_name { font-size: 42px !important; }
      /* Breathing room above the first category. */
      .cs-hp-band:first-of-type { padding-top: 16px; }
      /* Match the hero reduction in the pull-up and bottom spacing so the
         search controls and credibility row retain their positions. */
      .cs-hero-search { margin-top: -496px; padding: 0 10px 80px; }
      .cs-hero-cred { opacity: .85; } /* waves run behind it now — white knockout like desktop */
      .map_holder .map_cover { padding-top: 82px; }
      .cs-hero-cred span { display: none; }
      .cs-hero-cred img { max-width: 100%; }
      .cs-hero-pill { padding: 10px 12px 4px; border-radius: 18px; }
    }
    @media (max-width: 1023px) and (min-width: 640px) {
      /* Tablet fields wrap to two rows; lift the search block to keep the
         credibility row comfortably inside the water. */
      .map_holder { height: 556px !important; }
      .map_holder .header_name { font-size: clamp(36px, 6vw, 56px) !important; }
      .map_holder .header_name span.block { display: inline; }
      .cs-hero-search { margin-top: -354px; }
    }
    
    /* Results pages render already docked: the ocean is a fixed strip and the
       bar sits in normal flow below it, so first paint matches the docked end
       state — no JS-applied shrink, no jump. The strip keeps the search-page
       header height independent of the homepage spacing. */
    :where(body.results-page) .map_holder { height: 228px !important; }
    :where(body.results-page) .cs-hero-search { margin-top: 0; padding: 0; }
    @media (max-width: 639px) {
      :where(body.results-page) .map_holder { height: 290px !important; }
    }

/* css/components/hero-typewriter.v4.css */
/* Keep the meaningful heading text stable; animate only generated content. */
.hero-word-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hero-word-slot { white-space: nowrap; }
#rotating-word { color: #FFB3D9; }
#rotating-word::before { content: attr(data-word); }
@media (prefers-reduced-motion: reduce) {
    #typewriter-cursor { display: none; }
}