/* ─── MauLagi Bali Getaway - small global polish ─── */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Nav: at top, soft dark scrim + white text. After scroll, frosted sand bg + dark text. */
#nav { position: fixed; }
#nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 42, 36, 0.55) 0%, rgba(15, 42, 36, 0.25) 60%, rgba(15, 42, 36, 0) 100%);
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: -1;
}
#nav.scrolled::before { opacity: 0; }

#nav.scrolled {
  background-color: rgba(250, 247, 242, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(15, 42, 36, 0.08);
}

/* Top-state link + logo colors — desktop nav only, NOT the mobile drawer */
#nav:not(.scrolled) > div > nav a,
#nav:not(.scrolled) .brand-text { color: #faf7f2; }
#nav:not(.scrolled) .brand-text:hover { color: #e9c8a8; }

/* Mobile drawer always dark text regardless of scroll position */
#mobileMenu a { color: #0f2a24 !important; }

/* Animated underline on desktop nav links only */
#nav > div > nav a {
  position: relative;
  padding-bottom: 2px;
}
#nav > div > nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #c97b4f; /* clay-500 */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
#nav > div > nav a:hover::after { transform: scaleX(1); }
#nav:not(.scrolled) .brand-mark {
  background-color: rgba(250, 247, 242, 0.95);
  color: #0f2a24;
}
#nav.scrolled .brand-text { color: #0f2a24; }
#nav.scrolled .brand-mark { background-color: #0f2a24; color: #faf7f2; }

/* FAQ disclosure */
details > summary::-webkit-details-marker { display: none; }

/* ─── Hero photo: slow Ken Burns zoom (CSS-only, infinite loop) ─── */
@media (prefers-reduced-motion: no-preference) {
  #top picture img {
    transform-origin: 55% 60%;
    animation: kenBurns 22s ease-in-out infinite alternate;
  }
  @keyframes kenBurns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.10); }
  }
}

/* Smooth transitions used by the JS-driven intro reveal */
.hero-anim,
#top .hero-overlay,
#nav {
  transition: opacity .9s ease, transform .9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─── Gallery tiles - figure with caption + zoom-on-hover ─── */
.ml-tile {
  cursor: zoom-in;
  isolation: isolate;          /* force stacking context so transforms get clipped */
  transform: translateZ(0);    /* belt-and-suspenders for older WebKit */
}
/* Hover hint - small expand glyph in top-right when hovering a tile */
.ml-tile::after {
  content: "";
  position: absolute;
  top: .75rem; right: .75rem;
  width: 36px; height: 36px;
  border-radius: 9999px;
  background:
    rgba(0,0,0,.45)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' y1='3' x2='14' y2='10'/><line x1='3' y1='21' x2='10' y2='14'/></svg>")
    center / 18px 18px no-repeat;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 2;
}
.ml-tile:hover::after,
.ml-tile:focus-visible::after { opacity: 1; }

/* ─── Lightbox modal ─── */
.ml-lb {
  position: fixed; inset: 0;
  background: rgba(10, 14, 12, 0.94);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.ml-lb.is-open { display: flex; opacity: 1; }
.ml-lb-stage {
  position: relative;
  max-width: min(96vw, 1600px);
  max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem;
  user-select: none;
  margin: 0;
}
.ml-lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 6rem);   /* leave headroom for the caption below */
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #1a1f1c;
}
.ml-lb-cap {
  width: min(92vw, 720px);
  text-align: center;
  color: #f5efe6;
  pointer-events: none;
  flex-shrink: 0;
}
.ml-lb-tag {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: #d8a779; margin-bottom: .35rem;
}
.ml-lb-desc { font-size: 13.5px; line-height: 1.5; color: rgba(245,239,230,.82); }

.ml-lb-btn {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 9999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #f5efe6;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.ml-lb-btn:hover { background: rgba(255,255,255,.22); }
.ml-lb-btn:active { transform: scale(.94); }
.ml-lb-btn svg { width: 22px; height: 22px; }
.ml-lb-close { top: 1rem; right: 1rem; }
.ml-lb-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.ml-lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.ml-lb-prev:active { transform: translateY(-50%) scale(.94); }
.ml-lb-next:active { transform: translateY(-50%) scale(.94); }
.ml-lb-counter {
  position: absolute;
  top: 1.1rem; left: 1.25rem;
  color: rgba(245,239,230,.7);
  font-size: 12px; letter-spacing: .15em;
  z-index: 2;
}
@media (max-width: 640px) {
  .ml-lb-prev { left: .5rem; }
  .ml-lb-next { right: .5rem; }
  .ml-lb-close { top: .5rem; right: .5rem; }
  .ml-lb-img { max-height: calc(92vh - 7.5rem); }
}
body.ml-lb-open { overflow: hidden; }

/* ─── Nearby section: tabs + horizontal carousel ─── */
.nb-tabs { -webkit-tap-highlight-color: transparent; }
.nb-tab {
  font-size: 13.5px;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid rgba(26, 58, 47, 0.12);
  color: rgba(26, 58, 47, 0.7);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.nb-tab:hover { background: rgba(255,255,255,.55); color: #1a3a2f; }
.nb-tab.is-active {
  background: #1a3a2f;
  color: #f5efe6;
  border-color: #1a3a2f;
}

.nb-panel { display: none; }
.nb-panel.is-active { display: block; animation: nbFade .3s ease; }
@keyframes nbFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Mobile/tablet: horizontal swipeable carousel; Desktop: clean wrap-grid */
.nb-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 1.25rem;
  padding-bottom: .75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nb-track::-webkit-scrollbar { height: 6px; }
.nb-track::-webkit-scrollbar-thumb { background: rgba(26,58,47,.18); border-radius: 999px; }
@media (min-width: 640px) { .nb-track { grid-auto-columns: 48%; } }
@media (min-width: 1024px) {
  .nb-track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}
@media (min-width: 1280px) {
  .nb-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.nb-card {
  scroll-snap-align: start;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26,58,47,.06);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.nb-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(26,58,47,.10); }

.nb-card-img {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
}
.nb-card-img::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}
.nb-emoji {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}

.nb-card-body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.nb-dist {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c97b4f;
  margin-bottom: .35rem;
}
.nb-card-title { font-family: "Fraunces", serif; font-size: 19px; font-weight: 500; color: #1a3a2f; margin-bottom: .4rem; line-height: 1.25; }
.nb-card-desc  { font-size: 13.5px; line-height: 1.55; color: rgba(26, 58, 47, 0.72); }

/* Gradients - 15 distinct earthy/tropical palettes */
.nb-grad-1  { background: linear-gradient(135deg,#f0a06a,#c97b4f 55%,#5a2f1d); }
.nb-grad-2  { background: linear-gradient(135deg,#7fb8c9,#3d6f7a 60%,#1a3a4a); }
.nb-grad-3  { background: linear-gradient(135deg,#e8d4a8,#b8956b 55%,#6e4f30); }
.nb-grad-4  { background: linear-gradient(135deg,#5fa8a0,#2e6b6f 60%,#143536); }
.nb-grad-5  { background: linear-gradient(135deg,#f3c98a,#d49960 55%,#7a4f2c); }
.nb-grad-6  { background: linear-gradient(135deg,#aed4d4,#5d9b9b 60%,#2a4f55); }
.nb-grad-7  { background: linear-gradient(135deg,#c98b6a,#8a4830 55%,#3d1d12); }
.nb-grad-8  { background: linear-gradient(135deg,#d8b274,#9a7440 55%,#4a3015); }
.nb-grad-9  { background: linear-gradient(135deg,#9bc3b8,#4a8278 60%,#1c4239); }
.nb-grad-10 { background: linear-gradient(135deg,#e0b890,#a07a55 55%,#523a25); }
.nb-grad-11 { background: linear-gradient(135deg,#b8a890,#7d6b58 60%,#3a3026); }
.nb-grad-12 { background: linear-gradient(135deg,#d0c98a,#8a8a4a 55%,#3f4220); }
.nb-grad-13 { background: linear-gradient(135deg,#e88f8f,#b04848 55%,#591f1f); }
.nb-grad-14 { background: linear-gradient(135deg,#f0b888,#c98060 55%,#6e3a26); }
.nb-grad-15 { background: linear-gradient(135deg,#a8c890,#5d8a4a 55%,#284223); }

/* ─── Currency dropdown: full-width edge-to-edge under 680px ─── */
@media (max-width: 679px) {
  #ccyMenu {
    position: fixed !important;
    top: 4.5rem !important;          /* sits just below the sticky nav */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}
.ml-tile-img {
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden; /* prevents the rare 1px hairline gap on scale */
}
.ml-tile:hover .ml-tile-img { transform: scale(1.06); }

/* Mobile gallery: near-square tiles for better visual impact */
@media (max-width: 580px) {
  .ml-tile-img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

.ml-tile-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 4rem 1.5rem 1.4rem;
  color: #faf7f2;
  background: linear-gradient(to top,
    rgba(15, 42, 36, 0.92) 0%,
    rgba(15, 42, 36, 0.65) 40%,
    rgba(15, 42, 36, 0.20) 75%,
    rgba(15, 42, 36, 0) 100%);
  pointer-events: none;
}
.ml-tile-tag {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e9c8a8;          /* clay-300 */
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.ml-tile-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 247, 242, 0.95);
  max-width: 52ch;
}
@media (min-width: 768px) {
  .ml-tile-cap { padding: 5rem 1.75rem 1.6rem; }
  .ml-tile-tag { font-size: 11.5px; margin-bottom: 0.6rem; }
  .ml-tile-desc { font-size: 14.5px; line-height: 1.55; }
}

/* Gallery masonry must always be visible - opt out of any reveal/IO interference */
#gallery .ml-tile { opacity: 1 !important; transform: none !important; }

/* ─── Lead form fields - unified .ml-input ─── */
.ml-input {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #0f2a24;
  background-color: #ffffff;
  border: 1px solid #d9cdb6;          /* a touch stronger than sand-200 */
  border-radius: 0.75rem;             /* rounded-xl */
  padding: 0.75rem 1rem;
  min-height: 48px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ml-input::placeholder { color: rgba(15, 42, 36, 0.4); }
.ml-input:hover { border-color: #b89a6f; }
.ml-input:focus {
  outline: none;
  border-color: #0f2a24;
  box-shadow: 0 0 0 3px rgba(201, 123, 79, 0.18);
  background-color: #ffffff;
}

/* Custom select chevron */
.ml-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f2a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Date inputs - flatpickr-driven, but keep our calendar icon on the visible alt-input */
.ml-date,
.ml-input.flatpickr-input,
.ml-input.flatpickr-alt-input,
input.flatpickr-input + input.ml-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f2a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M16 3v4M8 3v4M3 10h18'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* ─── Flatpickr brand theme - jungle / sand / clay (compact) ─── */
.flatpickr-calendar {
  background: #faf7f2;
  border-radius: 14px;
  box-shadow: 0 14px 40px -10px rgba(15, 42, 36, 0.25);
  border: 1px solid rgba(15, 42, 36, 0.08);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  width: 280px;
  padding: 6px;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: #faf7f2; }
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days { width: 100%; }
.dayContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0; }

.flatpickr-months { padding: 4px 4px 6px; }
.flatpickr-months .flatpickr-month { height: 34px; line-height: 34px; }
.flatpickr-current-month { padding: 4px 0 0; height: 30px; font-size: 14px; }
.flatpickr-current-month .numInputWrapper { width: 56px; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-family: "Fraunces", ui-serif, Georgia, serif !important;
  font-weight: 500;
  font-size: 14px;
  color: #0f2a24 !important;
}
.flatpickr-monthDropdown-months { padding: 2px 4px; }
.flatpickr-current-month input.cur-year { padding: 0 0 0 4px; }

.flatpickr-weekdays { height: 28px; }
.flatpickr-weekday {
  font-family: "Inter", sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,42,36,0.5) !important;
  font-weight: 500 !important;
  height: 28px; line-height: 28px;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: #0f2a24; color: #0f2a24; padding: 8px; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #c97b4f; }

.flatpickr-day {
  color: #0f2a24;
  border-radius: 8px;
  border: 1px solid transparent;
  height: 34px;
  line-height: 32px;
  max-width: 36px;
  font-size: 13px;
}
.flatpickr-day.today {
  border-color: #c97b4f;
  color: #c97b4f;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: rgba(201, 123, 79, 0.12);
  border-color: rgba(201, 123, 79, 0.25);
  color: #0f2a24;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
  background: #0f2a24;
  border-color: #0f2a24;
  color: #faf7f2;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(15, 42, 36, 0.3);
}
.flatpickr-day.flatpickr-disabled { background: transparent; }

.numInputWrapper:hover { background: rgba(201, 123, 79, 0.08); }
.numInputWrapper span.arrowUp:after { border-bottom-color: #0f2a24; }
.numInputWrapper span.arrowDown:after { border-top-color: #0f2a24; }

/* Inline error toast for date validation */
#dateErr.show { display: block; animation: fadeIn .15s ease; }

/* ─── Language switcher polish ─── */
/* Outline ring while the dropdown is open */
.lang-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(201, 123, 79, 0.35);
}

/* Visually hidden helper (for accessible label inside the icon button) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Language menu animation */
#langMenu { animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile bottom CTA - give some bottom padding so content isn't hidden */
@media (max-width: 767px) {
  body { padding-bottom: 84px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; transform: none; opacity: 1; }
}

/* Active-season banner uses flex when revealed */
#seasonalActive:not(.hidden) { display: flex; flex-direction: column; }