/* ==========================================================================
   Riley Phinisi — site header and primary navigation.

   Layout follows neptunecruisekomodo.com: brand left, horizontal nav with
   hover dropdown panels through the middle, booking CTA right, and a drawer
   below the desktop breakpoint. Palette and type are Riley's own.

   Plain CSS on purpose — the theme ships a prebuilt tailwind.min.css, so any
   utility class not already compiled into it silently does nothing. Colours
   are set explicitly because the theme's @layer base forces
   `p, span, li, b, i, strong, h1–h6 { color: #000 }`.
   ========================================================================== */

.site-header {
  --n-gold: #c4a265;
  --n-gold-soft: #dcc08d;
  --n-line: rgba(196, 162, 101, 0.22);
  --n-panel: rgba(10, 10, 10, 0.97);
  --n-text: rgba(255, 255, 255, 0.82);
  --n-dim: rgba(255, 255, 255, 0.45);
  --n-shell: min(1320px, 100% - 2.5rem);
  --n-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  padding-block: 1.1rem;
  background: transparent;
  transition: padding 0.35s var(--n-ease), background-color 0.35s var(--n-ease),
    border-color 0.35s var(--n-ease), backdrop-filter 0.35s var(--n-ease);
  border-bottom: 1px solid transparent;
}

/* Soft scrim so the brand and links stay legible over a bright hero photo.
   Fades out once the solid scrolled background takes over. */
.site-header::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: -1;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    transparent 100%
  );
  transition: opacity 0.35s var(--n-ease);
}

.site-header.scrolled::before {
  opacity: 0;
}

.site-header.scrolled {
  padding-block: 0.6rem;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--n-line);
}

/* The base layer blacks these out for the original light design. */
.site-header :where(b, i, li, span, strong) {
  color: inherit;
}

.rp-hdr {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  width: var(--n-shell);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.rp-hdr__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.rp-hdr__brand img {
  display: block;
  width: auto;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
  transition: height 0.35s var(--n-ease);
}

.site-header.scrolled .rp-hdr__brand img {
  height: 58px;
}

/* --------------------------------------------------------------------------
   Primary navigation
   -------------------------------------------------------------------------- */

.rp-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.rp-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.85rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-nav__item {
  position: relative;
  margin: 0;
}

.rp-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.45rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--n-text);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  transition: color 0.25s var(--n-ease), text-shadow 0.35s var(--n-ease);
}

.site-header.scrolled .rp-nav__link {
  text-shadow: none;
}

.rp-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--n-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--n-ease);
}

.rp-nav__link:hover,
.rp-nav__link:focus-visible,
.rp-nav__item.is-current > .rp-nav__link {
  color: #fff;
}

.rp-nav__link:hover::after,
.rp-nav__link:focus-visible::after,
.rp-nav__item.is-current > .rp-nav__link::after {
  transform: scaleX(1);
  transform-origin: left;
}

.rp-nav__caret {
  flex: none;
  width: 11px;
  height: 11px;
  opacity: 0.55;
  transition: transform 0.3s var(--n-ease), opacity 0.3s var(--n-ease);
}

.rp-nav__item--has-panel:hover .rp-nav__caret,
.rp-nav__item--has-panel:focus-within .rp-nav__caret {
  opacity: 1;
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Dropdown panel
   -------------------------------------------------------------------------- */

.rp-nav__panel {
  position: absolute;
  top: calc(100% + 1.35rem);
  left: 50%;
  z-index: 20;
  min-width: 21rem;
  max-width: calc(100vw - 3rem);
  padding: 0.5rem;
  background: var(--n-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--n-line);
  border-radius: 4px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.25s var(--n-ease), transform 0.25s var(--n-ease),
    visibility 0.25s var(--n-ease);
}

/* Invisible bridge so the pointer can cross the gap without the panel closing. */
.rp-nav__panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1.55rem;
  height: 1.55rem;
}

.rp-nav__item--has-panel:hover .rp-nav__panel,
.rp-nav__item--has-panel:focus-within .rp-nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.rp-nav__panel ul {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-nav__panel li {
  margin: 0;
}

.rp-nav__panel-link {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 0.25s var(--n-ease);
}

.rp-nav__panel-link:hover,
.rp-nav__panel-link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

.rp-nav__panel-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.25s var(--n-ease);
}

.rp-nav__panel-link:hover .rp-nav__panel-title,
.rp-nav__panel-link:focus-visible .rp-nav__panel-title {
  color: var(--n-gold);
}

.rp-nav__panel-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--n-dim);
}

/* --------------------------------------------------------------------------
   Right-hand actions
   -------------------------------------------------------------------------- */

/* Also carries .right-section, which app.js animates on load. */
.rp-hdr__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Booking CTA
   -------------------------------------------------------------------------- */

.rp-hdr__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--n-gold);
  border-radius: 999px;
  background: linear-gradient(135deg, #c4a265 0%, #a68a50 100%);
  color: #14100a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s var(--n-ease), box-shadow 0.3s var(--n-ease);
}

.rp-hdr__cta:hover {
  color: #14100a;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(196, 162, 101, 0.32);
}

.rp-hdr__cta i {
  font-size: 1rem;
  color: #14100a !important;
}

/* --------------------------------------------------------------------------
   Drawer toggle
   -------------------------------------------------------------------------- */

.rp-hdr__toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(196, 162, 101, 0.4);
  border-radius: 50%;
  background: rgba(196, 162, 101, 0.12);
  cursor: pointer;
  transition: background-color 0.3s var(--n-ease);
}

.rp-hdr__toggle:hover {
  background: rgba(196, 162, 101, 0.24);
}

.rp-hdr__toggle span {
  display: block;
  width: 19px;
  height: 2px;
  margin-inline: auto;
  border-radius: 1px;
  background: var(--n-gold);
  transition: transform 0.3s var(--n-ease), opacity 0.2s var(--n-ease);
}

body.rp-menu-open .rp-hdr__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.rp-menu-open .rp-hdr__toggle span:nth-child(2) {
  opacity: 0;
}

body.rp-menu-open .rp-hdr__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Drawer (below the desktop breakpoint)
   -------------------------------------------------------------------------- */

.rp-drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--n-ease), visibility 0.35s var(--n-ease);
}

body.rp-menu-open .rp-drawer__scrim {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1079px) {
  /* app.js hides the header on scroll by setting a transform on .site-header.
     A transformed ancestor becomes the containing block for its fixed
     descendants, which left the drawer sized to the header instead of the
     viewport. Body scroll is locked while the drawer is open, so dropping the
     transform for that window costs nothing and restores viewport anchoring.
     The !important beats GSAP's inline style, which carries none. */
  body.rp-menu-open .site-header {
    transform: none !important;
  }

  .rp-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: block;
    width: min(360px, 86vw);
    padding: 6.5rem 1.5rem 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #0a0a0a;
    border-left: 1px solid var(--n-line);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s var(--n-ease), visibility 0.4s var(--n-ease);
  }

  body.rp-menu-open .rp-nav {
    transform: none;
    visibility: visible;
  }

  .rp-hdr__toggle {
    display: flex;
  }

  .rp-hdr__cta {
    display: none;
  }

  .rp-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .rp-nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .rp-nav__link {
    justify-content: space-between;
    width: 100%;
    padding-block: 1rem;
    font-size: 1rem;
  }

  .rp-nav__link::after {
    display: none;
  }

  /* Panels become accordions, driven by .is-open from nav.js. */
  .rp-nav__panel {
    position: static;
    min-width: 0;
    max-width: none;
    padding: 0 0 0.75rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
  }

  .rp-nav__panel::before {
    display: none;
  }

  .rp-nav__item.is-open .rp-nav__panel {
    display: block;
  }

  .rp-nav__item.is-open .rp-nav__caret {
    transform: rotate(180deg);
  }

  .rp-nav__item--has-panel:hover .rp-nav__panel,
  .rp-nav__item--has-panel:focus-within .rp-nav__panel {
    transform: none;
  }

  .rp-nav__panel-link {
    padding: 0.55rem 0.75rem;
    border-left: 1px solid rgba(196, 162, 101, 0.25);
  }

  .rp-nav__panel-desc {
    display: none;
  }

  /* The CTA reappears at the foot of the drawer. */
  .rp-nav__drawer-cta {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
  }

  .rp-nav__drawer-cta .rp-hdr__cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 1080px) {
  .rp-nav__drawer-cta {
    display: none;
  }
}

@media (max-width: 600px) {
  .site-header {
    --n-shell: min(1320px, 100% - 1.75rem);
  }

  .rp-hdr__brand img {
    height: 58px;
  }

  .site-header.scrolled .rp-hdr__brand img {
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .rp-drawer__scrim {
    transition-duration: 0.01ms !important;
  }
}