/* ── Sticky Navbar Pro v4 — Travel Agency Edition ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --snp-bg:         #faf7f2;
  --snp-text:       #1c1712;
  --snp-accent:     #c8860a;
  --snp-accent-2:   #2d4a3e;
  --snp-height:     80px;
  --snp-blur:       blur(24px) saturate(1.9) brightness(1.03);
  --snp-border:     rgba(180,140,60,.13);
  --snp-ease:       cubic-bezier(.4,0,.2,1);
  --snp-spring:     cubic-bezier(.34,1.56,.64,1);
  --snp-dur:        .28s;
  --snp-drop-dur:   .22s;
  --snp-radius:     12px;
  --snp-shadow:     0 1px 0 rgba(200,134,10,.08), 0 8px 40px rgba(28,23,18,.07);
  --snp-glass-bg:   color-mix(in srgb, var(--snp-bg) 88%, transparent);
}

/* ── Shell ──────────────────────────────────────────────── */
#snp-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--snp-height);
  background: var(--snp-glass-bg);
  backdrop-filter: var(--snp-blur);
  -webkit-backdrop-filter: var(--snp-blur);
  border-bottom: 1px solid var(--snp-border);
  box-shadow: var(--snp-shadow);
  animation: snp-in .6s var(--snp-ease) both;
  transition:
    background   var(--snp-dur) var(--snp-ease),
    box-shadow   var(--snp-dur) var(--snp-ease),
    border-color var(--snp-dur) var(--snp-ease),
    transform    var(--snp-dur) var(--snp-ease);
}

/* Thin gold accent line at very top */
#snp-navbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--snp-accent) 30%,
    color-mix(in srgb, var(--snp-accent) 60%, #e8b84b) 50%,
    var(--snp-accent) 70%,
    transparent 100%
  );
  opacity: .7;
  transition: opacity var(--snp-dur);
}

@keyframes snp-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

#snp-navbar.snp-transparent-top {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
#snp-navbar.snp-transparent-top::before { opacity: 0; }
#snp-navbar.snp-transparent-top .snp-logo-text,
#snp-navbar.snp-transparent-top .snp-nav__link,
#snp-navbar.snp-transparent-top .snp-icon-btn { color: #fff; }

#snp-navbar.snp-scrolled {
  background: var(--snp-glass-bg) !important;
  backdrop-filter: var(--snp-blur) !important;
  -webkit-backdrop-filter: var(--snp-blur) !important;
  border-bottom-color: var(--snp-border) !important;
  box-shadow: var(--snp-shadow) !important;
}
#snp-navbar.snp-scrolled::before { opacity: .7; }
#snp-navbar.snp-hidden { transform: translateY(-110%) !important; }

/* Compact shrink on scroll */
#snp-navbar.snp-scrolled .snp-inner {
  height: calc(var(--snp-height) * 0.875);
}
#snp-navbar.snp-scrolled .snp-logo-wordmark,
#snp-navbar.snp-scrolled .snp-logo-text {
  font-size: 1.3rem;
}

/* ── 3-column inner layout ─────────────────────────────── */
.snp-inner {
  max-width: 1340px;
  margin: 0 auto;
  height: var(--snp-height);
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  transition: height var(--snp-dur) var(--snp-ease);
}

.snp-slot { display: flex; align-items: center; }
.snp-slot--left   { justify-content: flex-start; }
.snp-slot--center { justify-content: center; }
.snp-slot--right  { justify-content: flex-end; gap: .5rem; }

/* ── Logo ───────────────────────────────────────────────── */
.snp-logo {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; flex-shrink: 0;
  transition: opacity var(--snp-dur);
}
.snp-logo:hover { opacity: .78; }
.snp-logo:focus-visible { outline: 2px solid var(--snp-accent); outline-offset: 4px; border-radius: 4px; }

.snp-logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem; font-weight: 500;
  color: var(--snp-text); line-height: 1;
  letter-spacing: .025em;
  transition: font-size var(--snp-dur) var(--snp-ease);
}
.snp-logo-img { display: block; width: auto; object-fit: contain; }

/* ── Desktop Nav ────────────────────────────────────────── */
.snp-nav {
  list-style: none;
  display: flex; align-items: center;
  margin: 0; padding: 0; gap: 0;
}

.snp-nav__item { position: relative; }

.snp-nav__link {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .5rem 1rem;
  font-family: 'Jost', sans-serif;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--snp-text);
  text-decoration: none; background: none; border: none; cursor: pointer;
  position: relative;
  white-space: nowrap;
  border-radius: 8px;
  transition: color var(--snp-dur), background var(--snp-dur);
}

.snp-nav__link:hover {
  color: var(--snp-accent);
  background: color-mix(in srgb, var(--snp-accent) 6%, transparent);
}

/* Animated underline bar */
.snp-nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 1rem; right: 1rem;
  height: 1.5px;
  background: linear-gradient(90deg, var(--snp-accent), color-mix(in srgb, var(--snp-accent) 60%, #e8b84b));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.snp-nav__item--active > .snp-nav__link::after { transform: scaleX(1); }
.snp-nav__item--active > .snp-nav__link { color: var(--snp-accent); }

/* Chevron */
.snp-chevron {
  flex-shrink: 0;
  transition: transform var(--snp-dur) var(--snp-ease);
  opacity: .45;
}
.snp-nav__item--has-dropdown:hover .snp-chevron,
.snp-nav__item--has-dropdown > .snp-nav__link[aria-expanded="true"] .snp-chevron {
  transform: rotate(180deg); opacity: .75;
}

/* ── Dropdown ───────────────────────────────────────────── */
.snp-dropdown {
  list-style: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: color-mix(in srgb, var(--snp-bg) 98%, white);
  border: 1px solid var(--snp-border);
  border-radius: var(--snp-radius);
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 20px 60px rgba(28,23,18,.12),
    0 2px 8px rgba(200,134,10,.06);
  padding: .5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    opacity   var(--snp-drop-dur) var(--snp-ease),
    transform var(--snp-drop-dur) var(--snp-ease),
    visibility 0s var(--snp-drop-dur);
}

.snp-nav__item--has-dropdown:hover .snp-dropdown,
.snp-nav__item--has-dropdown > .snp-nav__link[aria-expanded="true"] + .snp-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity   var(--snp-drop-dur) var(--snp-ease),
    transform var(--snp-drop-dur) var(--snp-ease),
    visibility 0s 0s;
}

/* Arrow tip */
.snp-dropdown::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: color-mix(in srgb, var(--snp-bg) 98%, white);
  border-left: 1px solid var(--snp-border);
  border-top: 1px solid var(--snp-border);
}

.snp-dropdown__link {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem;
  font-family: 'Jost', sans-serif;
  font-size: .7rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--snp-text); text-decoration: none;
  border-radius: 7px;
  transition:
    background var(--snp-dur),
    color var(--snp-dur),
    padding-left .2s cubic-bezier(.34,1.56,.64,1);
}
.snp-dropdown__link:hover {
  background: color-mix(in srgb, var(--snp-accent) 7%, transparent);
  color: var(--snp-accent);
  padding-left: 1.4rem;
}
.snp-dropdown__item--active .snp-dropdown__link {
  color: var(--snp-accent); font-weight: 500;
  background: color-mix(in srgb, var(--snp-accent) 7%, transparent);
}

/* ── Right Side ─────────────────────────────────────────── */
.snp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer;
  color: var(--snp-text); border-radius: 9px;
  text-decoration: none;
  transition:
    background var(--snp-dur),
    color var(--snp-dur),
    transform .18s cubic-bezier(.34,1.56,.64,1);
}
.snp-icon-btn:hover {
  background: color-mix(in srgb, var(--snp-accent) 8%, transparent);
  color: var(--snp-accent);
  transform: scale(1.1);
}

.snp-right-divider {
  width: 1px; height: 22px;
  background: linear-gradient(to bottom, transparent, var(--snp-border), transparent);
  flex-shrink: 0; margin: 0 .15rem;
}

/* ── CTA Buttons ─────────────────────────────────────────── */
a.snp-cta-outline {
  display: inline-flex; align-items: center;
  padding: .46rem 1.15rem;
  font-family: 'Jost', sans-serif;
  font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--snp-text) !important; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--snp-text) 25%, transparent);
  border-radius: 100px;
  transition:
    background var(--snp-dur),
    border-color var(--snp-dur),
    color var(--snp-dur),
    transform .18s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
}
a.snp-cta-outline:hover {
  background: color-mix(in srgb, var(--snp-text) 6%, transparent);
  border-color: var(--snp-text);
  transform: translateY(-1px);
}

a.snp-cta-solid {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .48rem 1.35rem;
  font-family: 'Jost', sans-serif;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #fff !important; text-decoration: none;
  background: linear-gradient(135deg, var(--snp-accent) 0%, color-mix(in srgb, var(--snp-accent) 80%, #8b4513) 100%);
  border-radius: 100px;
  white-space: nowrap;
  box-shadow:
    0 2px 12px color-mix(in srgb, var(--snp-accent) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition:
    opacity var(--snp-dur),
    box-shadow var(--snp-dur),
    transform .18s cubic-bezier(.34,1.56,.64,1);
}
a.snp-cta-solid:hover {
  opacity: .92;
  box-shadow:
    0 6px 24px color-mix(in srgb, var(--snp-accent) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-1px);
}
a.snp-cta-solid:active { transform: translateY(0); }

/* ── Search Bar ─────────────────────────────────────────── */
.snp-search-bar {
  background: color-mix(in srgb, var(--snp-bg) 95%, transparent);
  backdrop-filter: var(--snp-blur);
  -webkit-backdrop-filter: var(--snp-blur);
  border-top: 1px solid var(--snp-border);
  max-height: 0; overflow: hidden;
  transition: max-height .38s var(--snp-ease), padding .38s;
}
.snp-search-bar.is-open { max-height: 80px; padding: .9rem 0; }
.snp-search-bar form {
  max-width: 580px; margin: 0 auto;
  display: flex; align-items: center; gap: .75rem;
  padding: 0 3rem;
}
.snp-search-input {
  flex: 1; border: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--snp-accent) 30%, transparent);
  background: transparent; padding: .5rem .3rem;
  font-family: 'Jost', sans-serif; font-size: .9rem; font-weight: 300;
  letter-spacing: .06em; color: var(--snp-text);
  outline: none; transition: border-color var(--snp-dur);
}
.snp-search-input::placeholder {
  color: color-mix(in srgb, var(--snp-text) 35%, transparent);
  font-style: italic;
}
.snp-search-input:focus { border-bottom-color: var(--snp-accent); }
.snp-search-bar button[type=submit] {
  background: none; border: none; cursor: pointer;
  color: var(--snp-accent); display: flex; align-items: center;
  padding: .4rem; border-radius: 7px;
  transition: opacity var(--snp-dur), transform .18s cubic-bezier(.34,1.56,.64,1);
}
.snp-search-bar button[type=submit]:hover { opacity: .75; transform: scale(1.1); }

/* ── Hamburger ──────────────────────────────────────────── */
.snp-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: none;
  border: 1px solid var(--snp-border);
  border-radius: 9px; cursor: pointer; color: var(--snp-text);
  transition: background var(--snp-dur), border-color var(--snp-dur), transform .18s cubic-bezier(.34,1.56,.64,1);
}
.snp-hamburger:hover {
  background: color-mix(in srgb, var(--snp-accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--snp-accent) 30%, transparent);
  transform: scale(1.05);
}
.snp-ham-open  { display: block; }
.snp-ham-close { display: none; }
.snp-hamburger.is-open .snp-ham-open  { display: none; }
.snp-hamburger.is-open .snp-ham-close { display: block; }

/* ── Mobile Drawer ──────────────────────────────────────── */
.snp-mobile-drawer {
  display: none; overflow: hidden; max-height: 0;
  background: color-mix(in srgb, var(--snp-bg) 97%, transparent);
  border-top: 1px solid var(--snp-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: max-height .42s var(--snp-ease);
}
.snp-mobile-drawer.is-open { max-height: 660px; }

.snp-mobile-nav { list-style: none; margin: 0; padding: .75rem 0; }
.snp-mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .82rem 2rem;
  font-family: 'Jost', sans-serif;
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--snp-text); text-decoration: none;
  background: none; border: none; width: 100%; cursor: pointer;
  position: relative;
  transition: color var(--snp-dur), background var(--snp-dur);
}
.snp-mobile-nav__link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 2.5px; height: 55%;
  background: linear-gradient(to bottom, var(--snp-accent), color-mix(in srgb, var(--snp-accent) 60%, #e8b84b));
  border-radius: 2px;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.snp-mobile-nav__link:hover,
.snp-mobile-nav__link.snp-active {
  background: color-mix(in srgb, var(--snp-accent) 5%, transparent);
  color: var(--snp-accent);
}
.snp-mobile-nav__link:hover::before,
.snp-mobile-nav__link.snp-active::before { transform: translateY(-50%) scaleY(1); }

.snp-mobile-nav__link--parent .snp-chevron { transition: transform var(--snp-dur); }
.snp-mobile-nav__item--has-sub.is-open .snp-chevron { transform: rotate(180deg); }

.snp-mobile-sub {
  list-style: none; padding: 0; max-height: 0; overflow: hidden;
  background: color-mix(in srgb, var(--snp-accent) 3%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--snp-accent) 20%, transparent);
  margin-left: 2rem;
  transition: max-height .35s var(--snp-ease);
}
.snp-mobile-nav__item--has-sub.is-open .snp-mobile-sub { max-height: 440px; }
.snp-mobile-sub__link {
  display: block; padding: .6rem 1.25rem;
  font-family: 'Jost', sans-serif;
  font-size: .69rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--snp-text) 62%, transparent); text-decoration: none;
  transition: color var(--snp-dur), padding-left .2s;
}
.snp-mobile-sub__link:hover { color: var(--snp-accent); padding-left: 1.55rem; }

.snp-mobile-ctas {
  display: flex; gap: .75rem; padding: 1.25rem 2rem 2rem;
  border-top: 1px solid var(--snp-border); flex-wrap: wrap;
}
.snp-mobile-ctas a { flex: 1; justify-content: center; text-align: center; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .snp-slot--center { display: none !important; }
  .snp-slot--right > a.snp-cta-outline { display: none !important; }
  .snp-hamburger { display: flex !important; }
  .snp-mobile-drawer { display: block; }
  .snp-inner { grid-template-columns: 1fr auto; }
  .snp-slot--right { gap: .4rem; }
  .snp-right-divider { display: none; }
}
@media (max-width: 600px) {
  .snp-slot--right > a.snp-cta-solid { display: none !important; }
  .snp-inner { padding: 0 1.5rem; }
  .snp-search-bar form { padding: 0 1.5rem; }
}
