/* =========================================================================
   NEXT-GEN visual layer — Nile Cruise Hub (STAGING ONLY)
   Loads after theme.css + nile-blue.css. Pure visual overlay:
   new palette, gradients, glass, glow, motion. No layout/structure changes,
   so nothing here should break existing markup or the a11y fixes already
   shipped to nile-blue.css (rebuilds the same tokens those fixes reference).
   ========================================================================= */

:root{
  /* Deeper, richer navy + a genuine second accent (teal) instead of one gold note */
  --nch-navy:#0A1930;
  --nch-navy-2:#071021;
  --nch-gold:#D8A34A;
  --nch-gold-dark:#9C6A20;
  --nch-teal:#0F766E;          /* readable on sand/white — used as text/accent on light grounds */
  --nch-teal-bright:#2DD4BF;   /* used only on dark grounds / large decorative elements */
  --nch-sand:#F8F5EE;
  --nch-sand-2:#FFFFFF;

  --nch-glow-gold:rgba(216,163,74,.35);
  --nch-glow-teal:rgba(45,212,191,.30);
  --nch-glass-bg:rgba(255,255,255,.07);
  --nch-glass-bg-dark:rgba(7,16,33,.55);
  --nch-glass-border:rgba(255,255,255,.16);

  --nch-radius:20px;
  --nch-radius-sm:14px;
  --nch-shadow:0 26px 60px rgba(7,16,33,.22), 0 6px 18px rgba(7,16,33,.10);
  --nch-shadow-glow-gold:0 18px 46px rgba(216,163,74,.28);
  --nch-shadow-glow-teal:0 18px 46px rgba(45,212,191,.22);

  --nch-ease:cubic-bezier(.22,1,.36,1);
}

/* This site is light-only. Without this, phones in system dark mode can get
   native form controls (select popups, checkboxes, date pickers) silently
   re-themed dark by the browser -- outside the reach of any CSS on the
   control itself -- which is what made dropdown option text unreadable. */
:root{ color-scheme:light; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

html{ scroll-behavior:smooth; }

::selection{ background:var(--nch-teal-bright); color:#071021; }

/* ---------------------------------------------------------------------
   Sticky glass header
   --------------------------------------------------------------------- */
.nch-site-header{
  position:sticky;
  top:0;
  z-index:1000;
}
.nch-topbar{
  background:linear-gradient(90deg, var(--nch-navy-2), var(--nch-navy));
}
.nch-nav-wrap{
  /* NOTE: explicit backdrop-filter:none here — theme.css's base rule for
     this same selector sets backdrop-filter:blur(18px), and since this
     override never re-declared that property it kept winning, silently
     making .nch-nav-wrap the containing block for its position:fixed
     mobile-menu child again (instead of the viewport). That is the actual
     reason the mobile nav panel kept rendering shifted/clipped no matter
     what height/top fixes were applied to .nch-primary-nav itself. Solid
     translucent background instead, no blur, and the property explicitly
     cleared so nothing upstream can reintroduce it. */
  background:rgba(248,245,238,.94);
  border-bottom:1px solid rgba(10,25,48,.08);
  transition:background .25s var(--nch-ease), box-shadow .25s var(--nch-ease);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nch-primary-nav a{
  position:relative;
  transition:color .2s ease;
}
.nch-primary-nav a::after{
  content:'';
  position:absolute;
  left:10px; right:10px; bottom:2px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--nch-gold), var(--nch-teal-bright));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--nch-ease);
}
.nch-primary-nav a:hover::after,
.nch-primary-nav .current-menu-item > a::after{
  transform:scaleX(1);
}

/* ---------------------------------------------------------------------
   Buttons — gradient fill + glow + lift
   --------------------------------------------------------------------- */
.nch-btn{
  position:relative;
  overflow:hidden;
  transition:transform .2s var(--nch-ease), box-shadow .2s var(--nch-ease), opacity .2s ease;
}
.nch-btn-primary{
  background:linear-gradient(135deg, #E9BD72 0%, var(--nch-gold) 55%, #B87A28 100%) !important;
  box-shadow:var(--nch-shadow-glow-gold) !important;
}
.nch-btn-primary:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 22px 54px rgba(216,163,74,.4) !important;
}
/* backdrop-filter removed here — see .nch-hero-form-card note below for why */
.nch-btn-ghost,
.nch-btn-outline{
}
.nch-btn-ghost:hover,
.nch-btn-outline:hover{
  transform:translateY(-2px);
  box-shadow:var(--nch-shadow-glow-teal);
}

/* ---------------------------------------------------------------------
   Hero — gradient mesh + glow orbs behind the existing image/overlay
   --------------------------------------------------------------------- */
.nch-hero{
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(45,212,191,.16) 0%, rgba(45,212,191,0) 55%),
    radial-gradient(90% 90% at 0% 100%, rgba(216,163,74,.18) 0%, rgba(216,163,74,0) 60%),
    var(--nch-navy-2);
}
.nch-hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(38% 55% at 88% 12%, var(--nch-glow-teal) 0%, transparent 70%),
    radial-gradient(30% 45% at 6% 92%, var(--nch-glow-gold) 0%, transparent 70%);
  filter:blur(10px);
  animation:nch-drift 16s ease-in-out infinite alternate;
}
@keyframes nch-drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(0,-14px,0) scale(1.04); }
}
.nch-hero-copy h1{
  text-shadow:0 0 60px rgba(216,163,74,.22);
}
.nch-hero-trust span{
  transition:background .2s ease, transform .2s ease;
}
.nch-hero-trust span:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-1px);
}
.nch-hero-form-card{
  /* NOTE: no backdrop-filter here on purpose (2nd time this bit us) —
     it also breaks how mobile browsers position a native <select>'s
     open options list when the <select> lives inside a backdrop-filter
     ancestor (same root cause as the earlier nav-menu scroll bug). Solid
     near-opaque background instead, no blur. */
  position:relative;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.5);
}
.nch-hero-form-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  border-radius:var(--nch-radius) var(--nch-radius) 0 0;
  background:linear-gradient(90deg, var(--nch-gold), var(--nch-teal-bright));
}

/* ---------------------------------------------------------------------
   Cruise / post cards — lift, image zoom, glass badge
   --------------------------------------------------------------------- */
.nch-cruise-card,
.nch-post-card{
  transition:transform .3s var(--nch-ease), box-shadow .3s var(--nch-ease);
}
.nch-cruise-card:hover,
.nch-post-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--nch-shadow);
}
.nch-card-media{
  overflow:hidden;
}
.nch-card-img{
  transition:transform .5s var(--nch-ease);
}
.nch-cruise-card:hover .nch-card-img{
  transform:scale(1.06);
}
.nch-card-badge{
  background:rgba(7,16,33,.78) !important;
  border:1px solid rgba(255,255,255,.18);
  color:#fff !important;
}
.nch-img-placeholder{
  background:linear-gradient(135deg, var(--nch-navy-2) 0%, var(--nch-navy) 55%, var(--nch-teal) 100%);
}

/* ---------------------------------------------------------------------
   Why-grid — subtle hover highlight instead of plain hairlines
   --------------------------------------------------------------------- */
.nch-why-grid article{
  transition:background .25s ease;
  border-radius:var(--nch-radius-sm);
}
.nch-why-grid article:hover{
  background:linear-gradient(180deg, rgba(216,163,74,.06), transparent 60%);
}

/* ---------------------------------------------------------------------
   Dark bands (help / footer CTA) — gradient mesh instead of flat navy
   --------------------------------------------------------------------- */
.nch-help-band,
.nch-footer-cta{
  position:relative;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(45,212,191,.14) 0%, transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(216,163,74,.14) 0%, transparent 60%),
    var(--nch-navy-2);
  overflow:hidden;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.nch-site-footer{
  background:var(--nch-navy-2);
}

/* ---------------------------------------------------------------------
   Focus states — visible, on-brand, doesn't regress a11y
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.nch-btn:focus-visible{
  outline:2px solid var(--nch-teal-bright);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------
   Scroll-reveal hook (class toggled by nextgen.js)
   --------------------------------------------------------------------- */
.nch-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--nch-ease), transform .6s var(--nch-ease);
}
.nch-reveal.nch-in{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================================
   NEXT-GEN v2 — pushed further (STAGING). Appended after the v1 layer.
   ========================================================================= */

/* ---- Custom scrollbar ---- */
html{ scrollbar-color: var(--nch-gold) var(--nch-sand); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--nch-sand); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--nch-gold), var(--nch-teal));
  border-radius:999px;
  border:2px solid var(--nch-sand);
}
::-webkit-scrollbar-thumb:hover{ background:var(--nch-teal-bright); }

/* ---- Hero: bolder glow, gradient-clipped headline ---- */
.nch-hero::before{
  background:
    radial-gradient(42% 60% at 88% 10%, rgba(45,212,191,.34) 0%, transparent 72%),
    radial-gradient(34% 50% at 4% 96%, rgba(216,163,74,.32) 0%, transparent 72%);
  filter:blur(6px);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)){
  .nch-hero-copy h1{
    background:linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 30%, var(--nch-gold) 62%, var(--nch-teal-bright) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
.nch-hero-copy h1{
  font-size:clamp(44px,6.4vw,72px);
  letter-spacing:-.02em;
}
.nch-eyebrow::before{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  margin-right:8px;
  border-radius:50%;
  background:var(--nch-teal-bright);
  box-shadow:0 0 10px var(--nch-teal-bright);
  vertical-align:middle;
}

/* ---- Shimmering gradient ring around the hero search card ---- */
.nch-hero-form-card{ position:relative; }
.nch-hero-form-card::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg, var(--nch-gold), var(--nch-teal-bright), var(--nch-gold));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:nch-border-shimmer 7s linear infinite;
  pointer-events:none;
}
@keyframes nch-border-shimmer{
  0%{ background-position:0% 50%; }
  100%{ background-position:220% 50%; }
}

/* ---- Cards: deeper lift, shine sweep, brighter shadow ---- */
.nch-cruise-card,
.nch-post-card{
  position:relative;
}
.nch-cruise-card:hover,
.nch-post-card:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 70px rgba(7,16,33,.28), 0 10px 24px rgba(216,163,74,.14);
}
.nch-cruise-card::after,
.nch-post-card::after{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);
  transition:left .75s var(--nch-ease);
  pointer-events:none;
  z-index:2;
}
.nch-cruise-card:hover::after,
.nch-post-card:hover::after{ left:130%; }

/* ---- Primary button: same shine sweep as cards ---- */
.nch-btn-primary{ position:relative; overflow:hidden; }
.nch-btn-primary::after{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--nch-ease);
  pointer-events:none;
}
.nch-btn-primary:hover::after{ left:130%; }

/* ---- Light sections: quiet gradient wash so the page doesn't go flat between dark bands ---- */
.nch-intro{
  background:
    radial-gradient(55% 75% at 92% 0%, rgba(216,163,74,.08) 0%, transparent 62%),
    radial-gradient(48% 65% at 0% 100%, rgba(15,118,110,.07) 0%, transparent 62%),
    var(--nch-sand);
}
.nch-why-grid{
  background:radial-gradient(80% 100% at 50% 0%, rgba(216,163,74,.05) 0%, transparent 70%);
}

/* ---- a11y fix: nile-blue.css darkened .nch-eyebrow to #94641E (4.70:1 on
   light grounds), but that value drops to ~2-3.7:1 on this layer's dark hero
   backgrounds -- the same failure mode .nch-help-band .nch-eyebrow was
   already patched for, just not extended to these sections. Restore the
   passing gold there (7.75:1 on navy). ---- */
.nch-hero .nch-eyebrow,
.nch-cruise-hero .nch-eyebrow,
.nch-page-hero-dark .nch-eyebrow{
  color:var(--nch-gold);
}

/* ---- Sticky header: strengthen once scrolled (class set by nextgen.js) ---- */
.nch-site-header.nch-scrolled .nch-nav-wrap{
  background:rgba(248,245,238,.94);
  box-shadow:0 14px 34px rgba(7,16,33,.14);
}

/* ---- Cruise page tabs: gradient active state to match the rest ---- */
.nch-tab-buttons button.active{
  background:linear-gradient(135deg, #E9BD72 0%, var(--nch-gold) 60%, #B87A28 100%) !important;
  box-shadow:var(--nch-shadow-glow-gold);
}


/* =========================================================================
   NEXT-GEN v3 — mobile menu scroll fix (STAGING)
   The panel is a floating card, not a full-screen overlay, so the page
   behind it was still scrollable while it was open. Give the page a scroll
   lock (toggled by nextgen.js) and let the panel itself scroll internally
   if its content is ever taller than the space between the header and the
   bottom of the screen.
   ========================================================================= */
/* NOTE: top+bottom alone (both set, height:auto) was supposed to make
   this stretch to fill the gap, but in this cascade it was computing to
   ~30px (just the padding) instead of the real available height — verified
   with an actual headless-browser render, not just CSS reasoning. Giving it
   an explicit height sidesteps whatever was breaking the auto-stretch. */
/* Scoped to the same breakpoint theme.css uses to switch .nch-primary-nav
   into position:fixed (the collapsed/hamburger nav). Outside this width the
   nav is a normal inline flex row in the header and must NOT get an
   explicit height/overflow — that leaked onto desktop earlier and turned
   the nav into a huge scrollable box with a visible scrollbar. */
@media(max-width:1060px){
  .nch-primary-nav{
    bottom:auto;
    height:calc(100vh - 144px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .admin-bar .nch-primary-nav{
    height:calc(100vh - 176px);
  }
}
body.nch-scroll-locked{
  overflow:hidden;
}


/* =========================================================================
   NEXT-GEN v4 — custom mobile dropdown for the hero search form (STAGING)
   Replaces the native <select> popup (which some mobile browsers render as
   a tiny detached box) with a real in-page menu. The original <select>
   stays in the DOM, visually hidden, so the form still submits normally.
   ========================================================================= */
.nch-cselect-native-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.nch-cselect{ position:relative; }
.nch-cselect-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--nch-border);
  border-radius:14px;
  padding:14px 16px;
  background:#fff;
  font:inherit;
  color:var(--nch-text);
  cursor:pointer;
  text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.nch-cselect-trigger:hover{ border-color:var(--nch-gold); }
.nch-cselect.is-open .nch-cselect-trigger{
  border-color:var(--nch-teal);
  box-shadow:0 0 0 3px rgba(15,118,110,.14);
}
.nch-cselect-caret{
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid var(--nch-muted);
  border-bottom:2px solid var(--nch-muted);
  transform:rotate(45deg);
  transition:transform .2s var(--nch-ease);
  margin-top:-3px;
}
.nch-cselect.is-open .nch-cselect-caret{
  transform:rotate(-135deg);
  margin-top:3px;
  border-color:var(--nch-teal);
}
.nch-cselect-list{
  list-style:none;
  margin:8px 0 0;
  padding:6px;
  background:#fff;
  border:1px solid var(--nch-border);
  border-radius:14px;
  box-shadow:var(--nch-shadow);
  max-height:260px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:none;
}
.nch-cselect.is-open .nch-cselect-list{ display:block; }
.nch-cselect-option{
  display:block;
  width:100%;
  border:0;
  background:none;
  text-align:left;
  font:inherit;
  font-size:15px;
  color:var(--nch-text);
  padding:11px 12px;
  border-radius:10px;
  cursor:pointer;
}
.nch-cselect-option:hover,
.nch-cselect-option:focus-visible{ background:var(--nch-sand); }
.nch-cselect-option[aria-selected="true"]{
  color:var(--nch-teal);
  font-weight:700;
  background:rgba(15,118,110,.08);
}