/* ============================================================
   ANDREWBALI.COM — main.css
   Design System: Bali Dawn Light (light theme site-wide)
   Exception: .page-music uses dark theme (custom-and-sounds.html)
   Single source of truth: DEVELOPMENT_SPEC.md v1.4
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --ab-bg:          #faf8f5;
  --ab-bg-alt:      #f0fbf9;
  --ab-bg-dark:     #05111f;
  --ab-surface:     #ffffff;
  --ab-surface-alt: #f5fdfb;

  /* Brand */
  --ab-teal:        #00c4a8;
  --ab-teal-light:  #e8fbf8;
  --ab-teal-dark:   #009e88;
  --ab-coral:       #ff5e3a;
  --ab-coral-light: #fff5f2;
  --ab-gold:        #c07800;
  --ab-gold-bg:     #fff8e8;
  --ab-purple:      #7c3aed;
  --ab-purple-light:#f3eeff;

  /* Text */
  --ab-text:        #0a1628;
  --ab-text-2:      #3d5060;
  --ab-muted:       #6b7c8d;
  --ab-white:       #ffffff;

  /* Borders */
  --ab-border:      rgba(0,196,168,0.2);
  --ab-border-2:    rgba(10,22,40,0.08);

  /* Gradients */
  --grad-hero-bg:     linear-gradient(160deg, #e8fbf8 0%, #faf8f5 55%, #fff5f2 100%);
  --grad-section-alt: linear-gradient(160deg, #f0fbf9 0%, #faf8f5 100%);
  --grad-teal:        linear-gradient(135deg, #00d4b8, #00f5e0);
  --grad-sunset:      linear-gradient(135deg, #ff5e3a, #ffb020);
  --grad-brand:       linear-gradient(135deg, #00c4a8 0%, #009e88 40%, #c07800 100%);
  --grad-purple:      linear-gradient(135deg, #7c3aed, #00c4a8);
  --grad-music-bg:    radial-gradient(ellipse 80% 60% at 15% 40%, rgba(0,212,184,.12) 0%, transparent 60%),
                      radial-gradient(ellipse 60% 80% at 85% 20%, rgba(124,58,237,.15) 0%, transparent 50%),
                      linear-gradient(180deg, #05111f 0%, #040e1a 100%);

  /* Fonts */
  --font-sans:    -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --sp-2: 4px;  --sp-4: 8px;  --sp-6: 12px;  --sp-8: 16px;
  --sp-12: 24px; --sp-16: 32px; --sp-20: 40px; --sp-24: 48px;
  --sp-32: 64px; --sp-40: 80px; --sp-48: 96px; --sp-64: 128px; --sp-80: 160px;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;

  /* Shadows (light theme) */
  --shadow-sm: 0 1px 4px rgba(0,100,80,.06), 0 0 0 1px rgba(0,196,168,.1);
  --shadow-md: 0 4px 16px rgba(0,100,80,.08), 0 1px 0 rgba(0,196,168,.12);
  --shadow-lg: 0 8px 32px rgba(0,100,80,.1), 0 2px 0 rgba(0,196,168,.1);
  --shadow-xl: 0 16px 48px rgba(0,100,80,.12);
  --shadow-coral: 0 4px 20px rgba(255,94,58,.35), 0 1px 0 rgba(255,140,66,.3);

  /* Glow (Music dark section only) */
  --glow-teal-dark:  0 0 30px rgba(0,212,184,.3), 0 0 60px rgba(0,212,184,.1);
  --glow-coral-dark: 0 0 30px rgba(255,94,58,.35), 0 8px 30px rgba(255,94,58,.2);

  /* Motion */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms; --dur-normal: 300ms; --dur-slow: 600ms;
}

/* ── RESET / BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--ab-bg);
  color: var(--ab-text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(0,196,168,.25); color: var(--ab-text); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ab-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--ab-teal); border-radius: 4px; }

/* ── LAYOUT ────────────────────────────────────────────────── */
.container { max-width: 1152px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.container-sm { max-width: 800px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 64px 0; position: relative; }
.bg-alt { background: var(--ab-bg-alt); }
.bg-gradient { background: var(--grad-section-alt); }
.text-center { text-align: center; }

/* ── TYPOGRAPHY HELPERS ────────────────────────────────────── */
.h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.h3 { font-size: clamp(20px, 2.5vw, 24px); font-weight: 700; line-height: 1.25; }
.lead { font-size: clamp(17px, 2vw, 19px); color: var(--ab-text-2); }
.muted { color: var(--ab-muted); }

.grad-teal-text { background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-sunset-text { background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-brand-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-purple-text { background: var(--grad-purple); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── LOGO ──────────────────────────────────────────────────── */
.logo { font-weight: 900; font-size: 20px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 0.5em; }
.logo-icon-wrap { width: 28px; height: 28px; display: inline-flex; flex-shrink: 0; }
.logo-andrew { color: #0a1628; }
.logo-bali   { color: #00c4a8; }
.bg-dark .logo-andrew, footer .logo-andrew { color: #ffffff; }
.bg-dark .logo-bali,   footer .logo-bali   { color: #00d4b8; }

/* ── NAV ───────────────────────────────────────────────────── */
#main-nav {
  position: fixed; top: 0; left: 0; width: 100%; max-width: 100vw; overflow: hidden; z-index: 1000;
  padding: 14px 0;
  /* Default: solid background on all inner pages so content never bleeds through */
  background: rgba(250, 248, 245, 0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--ab-border);
  transition: background var(--dur-normal), box-shadow var(--dur-normal), padding var(--dur-normal);
}
#main-nav.scrolled {
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--ab-border), 0 4px 20px rgba(0,100,80,.05);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-links { display: none; list-style: none; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--ab-text-2); transition: color var(--dur-fast); }
.nav-links a:hover { color: var(--ab-teal-dark); }
.nav-right { display: flex; align-items: center; gap: 14px; }

.btn-nav-cta {
  display: none; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #ff5e3a, #ff8c42);
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: var(--r-full);
  box-shadow: var(--shadow-coral); transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(255,94,58,.45); }

.nav-hamburger {
  display: inline-flex; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px;
}
.nav-hamburger span { width: 22px; height: 2px; background: var(--ab-text); border-radius: 2px; transition: transform .3s, opacity .3s; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .btn-nav-cta { display: inline-flex; }
  .nav-hamburger { display: none; }
}

/* ── MOBILE MENU ───────────────────────────────────────────── */
#mobile-menu {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(250, 248, 245, 0.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
#mobile-menu.open { display: flex; }
#mobile-menu a { font-size: 22px; font-weight: 700; color: var(--ab-text); }
#mobile-menu a:hover { color: var(--ab-teal-dark); }
#mobile-menu .menu-close { position: absolute; top: 20px; right: 20px; background: none; border: none; }

/* ── ACTIVITIES DROPDOWN (desktop) ─────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { transition: transform var(--dur-fast); }
.nav-submenu {
  position: absolute; top: 100%; left: 50%; min-width: 240px;
  margin: 0; padding: 8px; list-style: none;
  transform: translateX(-50%) translateY(8px);
  background: rgba(250, 248, 245, 0.99);
  border: 1px solid var(--ab-border); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 50, 38, 0.14);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}
/* invisible bridge so the menu doesn't close in the gap under the trigger */
.nav-submenu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-submenu li { margin: 0; }
.nav-submenu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; white-space: nowrap; color: var(--ab-text-2); }
.nav-submenu a:hover { background: rgba(0, 150, 130, 0.09); color: var(--ab-teal-dark); }
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
/* keep submenu panel readable over the dark music nav */
body.page-music .nav-submenu { background: rgba(8, 20, 34, 0.98); border-color: rgba(255,255,255,.12); }
body.page-music .nav-submenu a { color: #cdddea; }
body.page-music .nav-submenu a:hover { background: rgba(0,212,184,.14); color: #00f5e0; }

/* ── ACTIVITIES DROPDOWN (mobile accordion) ────────────────── */
.m-dropdown { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.m-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit;
  font-size: 22px; font-weight: 700; color: var(--ab-text);
}
.m-dropdown-toggle .nav-caret { transition: transform var(--dur-fast); }
.m-dropdown-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.m-submenu { display: none; flex-direction: column; align-items: center; gap: 16px; }
.m-submenu.open { display: flex; }
#mobile-menu .m-submenu a { font-size: 17px; font-weight: 600; color: var(--ab-text-2); }
#mobile-menu .m-submenu a:hover { color: var(--ab-teal-dark); }

/* anchored activity cards clear the fixed nav when jumped to */
.activity-card[id] { scroll-margin-top: 100px; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #ff5e3a, #ff8c42);
  color: #fff; font-weight: 700; font-size: 15px;
  padding: 14px 28px; border-radius: var(--r-full);
  box-shadow: var(--shadow-coral); border: none;
  transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 36px rgba(255,94,58,.5); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.35) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.btn-primary:active::after { opacity: 1; transition: none; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid rgba(0,196,168,.5); color: var(--ab-teal-dark);
  font-weight: 600; font-size: 15px; padding: 12.5px 26px; border-radius: var(--r-full);
  background: transparent; transition: all var(--dur-fast);
}
.btn-outline:hover { background: var(--ab-teal-light); border-color: var(--ab-teal); transform: translateY(-2px); }

.btn-ghost {
  color: var(--ab-text-2); font-weight: 600; padding: 8px 4px;
  border-bottom: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.btn-ghost:hover { color: var(--ab-teal-dark); border-color: rgba(0,196,168,.3); }

.btn-block { width: 100%; }

/* WhatsApp green variant */
.btn-wa { background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 4px 20px rgba(37,211,102,.3); }
.btn-wa:hover { box-shadow: 0 8px 32px rgba(37,211,102,.45); }

/* ── SECTION LABEL ─────────────────────────────────────────── */
.section-label {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ab-teal-dark);
  border: 1px solid rgba(0,196,168,.3); background: var(--ab-teal-light);
  border-radius: var(--r-full); padding: 6px 14px; margin-bottom: 14px;
}
.section-label.coral { color: var(--ab-coral); border-color: rgba(255,94,58,.3); background: var(--ab-coral-light); }
.section-label.gold  { color: var(--ab-gold); border-color: rgba(192,120,0,.3); background: var(--ab-gold-bg); }
.section-label.purple{ color: #a78bfa; border-color: rgba(124,58,237,.3); background: rgba(124,58,237,.08); }

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--ab-surface); border: 1px solid var(--ab-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  transition: border-color var(--dur-normal), box-shadow var(--dur-normal), transform var(--dur-normal);
}
.card:hover { border-color: rgba(0,196,168,.5); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card-pad { padding: 32px; }

.card-coral { border-color: rgba(255,94,58,.2); }
.card-coral:hover { border-color: rgba(255,94,58,.5); box-shadow: 0 8px 32px rgba(255,94,58,.12); }

.card-gold { border-color: rgba(192,120,0,.2); background: var(--ab-gold-bg); }
.card-gold:hover { border-color: rgba(192,120,0,.5); box-shadow: 0 8px 32px rgba(192,120,0,.12); }

.card-teal { border-color: rgba(0,196,168,.35); box-shadow: 0 4px 20px rgba(0,196,168,.08); }

/* Animated wave top border (Service / Blog cards) */
.card-wave-top { position: relative; }
.card-wave-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, #00c4a8 20%, #00f5e0 50%, #00c4a8 80%, transparent 100%);
  background-size: 200% 100%; animation: waveShimmer 3s ease-in-out infinite;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
@keyframes waveShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── PRICE BADGE ───────────────────────────────────────────── */
.price-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,176,32,.14), rgba(255,94,58,.08));
  border: 1px solid rgba(192,120,0,.3); border-radius: var(--r-sm);
  padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--ab-gold); white-space: nowrap;
}

/* ── STATS / TRUST BAR ─────────────────────────────────────── */
.trust-num { font-size: clamp(28px, 4vw, 40px); font-weight: 900; line-height: 1; }
.trust-label { font-size: 13px; color: var(--ab-muted); margin-top: 6px; }

/* ── STEP NUMBER ───────────────────────────────────────────── */
.step-num {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,196,168,.18), rgba(0,196,168,.04));
  border: 1.5px solid rgba(0,196,168,.4); font-weight: 800; font-size: 20px; color: var(--ab-teal-dark);
}

/* ── ACTIVITY TAG / CARD ───────────────────────────────────── */
.act-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ab-surface); border: 1px solid var(--ab-border);
  border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-sm); transition: all var(--dur-fast);
}
.act-tag:hover { border-color: rgba(0,196,168,.5); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.activity-card { background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-md); transition: border-color var(--dur-normal), box-shadow var(--dur-normal), transform var(--dur-normal); }
.activity-card:hover { border-color: rgba(0,196,168,.5); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.activity-icon { font-size: 32px; }
.activity-name { font-size: 18px; font-weight: 700; margin: 10px 0 6px; }
.activity-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.activity-duration { font-size: 12px; color: var(--ab-muted); }
.activity-desc { font-size: 14px; color: var(--ab-text-2); margin-top: 10px; }
.activity-tag { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--ab-teal-dark); }

/* ── TESTIMONIAL ───────────────────────────────────────────── */
.testimonial { background: var(--ab-surface); border: 1px solid var(--ab-border); border-left: 3px solid var(--ab-teal); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-md); }
.stars { color: #ffb020; letter-spacing: 2px; }

/* ── FORM ──────────────────────────────────────────────────── */
.field {
  width: 100%; background: var(--ab-surface);
  border: 1.5px solid var(--ab-border); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 16px; color: var(--ab-text); outline: none;
  transition: border-color var(--dur-fast);
}
.field:focus { border-color: var(--ab-teal); }
.field::placeholder { color: var(--ab-muted); }

/* ── WAVE DIVIDER ──────────────────────────────────────────── */
.wave-divider { position: relative; margin-bottom: -2px; line-height: 0; }
.wave-divider svg { display: block; width: 100%; }

/* ── OCEAN ORBS / HERO BG ──────────────────────────────────── */
.hero-bg-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ocean-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: .35; animation: floatOrb var(--dur, 10s) ease-in-out infinite; }
.ocean-orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,196,168,.4), transparent 70%); top: -10%; left: -8%; --dur: 8s; }
.ocean-orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,94,58,.25), transparent 70%); top: 20%; right: -5%; --dur: 11s; animation-delay: -3s; }
.ocean-orb-3 { width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,196,168,.2), transparent 70%); bottom: 10%; left: 30%; --dur: 13s; animation-delay: -6s; }
@keyframes floatOrb { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } }

.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0,196,168,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,196,168,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

/* Hero wave clip */
.hero-section {
  position: relative; overflow: hidden;
  background: var(--grad-hero-bg);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 85% 96%, 70% 92%, 55% 96%, 40% 92%, 25% 97%, 10% 92%, 0 96%);
  padding-bottom: 6rem;
}

/* ── SURF ICON ─────────────────────────────────────────────── */
.surf-icon { display: inline-block; vertical-align: middle; }

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
/* js-reveal class is added by JS — only hide when JS is ready */
.js-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth); }
.js-ready .reveal.visible { opacity: 1; transform: translateY(0); }

/* ── WAVEFORM (music) ──────────────────────────────────────── */
.waveform { display: flex; align-items: flex-end; gap: 4px; height: 48px; }
.waveform-bar { width: 4px; border-radius: 2px; background: var(--ab-teal); opacity: .7; animation: waveform 1.2s ease-in-out infinite; }
@keyframes waveform { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* ── WHATSAPP FLOAT ────────────────────────────────────────── */
#wa-float {
  position: fixed; bottom: 24px; right: 20px; z-index: 999;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #25d366, #128c7e); color: #fff;
  font-weight: 600; font-size: 14px; padding: 14px 20px 14px 16px;
  border-radius: var(--r-full); box-shadow: 0 4px 20px rgba(37,211,102,.4);
  animation: pulseWA 3s ease-in-out infinite; transition: transform var(--dur-fast);
}
#wa-float:hover { transform: translateY(-3px) scale(1.03); }
#wa-float svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }
.wa-label { display: none; }
@keyframes pulseWA { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); } 50% { box-shadow: 0 4px 40px rgba(37,211,102,.7); } }
@media (min-width: 640px) { .wa-label { display: block; } }

/* ── PHOTO PLACEHOLDER (temporary, until real photos provided) ─ */
.photo-ph {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--grad-hero-bg); border: 1px solid var(--ab-border);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.photo-ph .photo-ph-inner { padding: 24px; color: var(--ab-muted); }
.photo-ph .photo-ph-emoji { font-size: 56px; }
.photo-ph .photo-ph-note { font-size: 13px; margin-top: 8px; }

/* ── FOOTER ────────────────────────────────────────────────── */
footer.site-footer { background: #040d18; color: #c8e8f4; padding: 64px 0 32px; border-top: 1px solid rgba(0,212,184,.12); }
footer.site-footer a { color: #8aa6bd; transition: color var(--dur-fast); }
footer.site-footer a:hover { color: #00d4b8; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-top: 24px; text-align: center; font-size: 13px; color: #5a7488; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ── LANG SWITCHER ─────────────────────────────────────────── */
.lang-switcher { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.lang-btn { background: none; border: none; color: var(--ab-text-2); padding: 4px 6px; border-radius: var(--r-sm); transition: color var(--dur-fast), background var(--dur-fast); letter-spacing: 0.05em; }
.lang-btn:hover, .lang-btn.active { color: var(--ab-teal-dark); background: var(--ab-teal-light); }
.lang-sep { color: var(--ab-border); user-select: none; }

/* ── GRID UTILITIES ────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   MUSIC PAGE DARK THEME OVERRIDE (.page-music)
   ============================================================ */
body.page-music { background: var(--ab-bg-dark); color: var(--ab-white); }
body.page-music #main-nav.scrolled { background: rgba(5,17,31,.9); box-shadow: 0 1px 0 rgba(0,212,184,.15); }
body.page-music .nav-links a { color: #8aa6bd; }
body.page-music .nav-links a:hover { color: #00d4b8; }
body.page-music .logo-andrew { color: #fff; }
body.page-music .logo-bali { color: #00d4b8; }
body.page-music .nav-hamburger span { background: #fff; }
/* color logo only on all pages */
body.page-music .lang-btn { color: #8aa6bd; }
body.page-music .lang-btn.active, body.page-music .lang-btn:hover { color: #00d4b8; background: rgba(0,212,184,.1); }

.card-glass {
  background: rgba(13, 36, 64, 0.6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 212, 184, 0.15); border-radius: var(--r-lg);
  transition: border-color var(--dur-normal), box-shadow var(--dur-normal), transform var(--dur-normal);
}
.card-glass:hover { border-color: rgba(0, 212, 184, 0.45); box-shadow: var(--glow-teal-dark); transform: translateY(-4px); }

/* ── NAV LOGO IMG + PHOTO HERO ─────────────────────────────── */
.nav-logo-img { height: 48px; width: auto; display: block; }
.nav-logo-white { display: none; }
.nav-logo-color { display: block; }
/* Over a dark hero (before scroll): show the white logo, hide the color one.
   When the nav scrolls into its solid light bar, the color logo returns. */
body.hero-dark  #main-nav:not(.scrolled) .nav-logo-color,
body.page-music #main-nav:not(.scrolled) .nav-logo-color { display: none; }
body.hero-dark  #main-nav:not(.scrolled) .nav-logo-white,
body.page-music #main-nav:not(.scrolled) .nav-logo-white { display: block; }
/* Music page nav stays dark even when scrolled — keep the light logo throughout (never the dark one) */
body.page-music #main-nav .nav-logo-color { display: none; }
body.page-music #main-nav .nav-logo-white { display: block; }

/* Hero with real photo background */
.hero-photo {
  background-image:
    linear-gradient(180deg, rgba(5,17,31,.30) 0%, rgba(5,17,31,.55) 55%, rgba(5,17,31,.78) 100%),
    url(/assets/images/hero-sunset.jpg?v=2);
  background-size: cover, cover;
  background-position: center, center 60%;
  background-repeat: no-repeat;
}
.hero-photo .h1 { color: #ffffff; }
.hero-photo .lead { color: #e8eef4; }
.hero-photo .lead strong { color: #00f5e0; }
.hero-photo .section-label { background: rgba(232,251,248,.92); }
.hero-photo .hero-trust span { color: #dbe6ef; }

/* Nav content adapts when sitting over a dark hero (body.hero-dark) */
body.hero-dark #main-nav:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
/* Music page: transparent nav over dark hero, dark when scrolled */
body.page-music #main-nav:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
body.hero-dark #main-nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,.92); }
body.hero-dark #main-nav:not(.scrolled) .nav-links a:hover { color: #00f5e0; }
body.hero-dark #main-nav:not(.scrolled) .nav-hamburger span { background: #fff; }
/* color logo always shown — no white-logo version */

/* ── ACTIVITIES PAGE: FILTER BAR ───────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ab-surface); border: 1px solid var(--ab-border);
  color: var(--ab-text-2); font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: var(--r-full); box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast);
}
.filter-btn:hover { border-color: rgba(0,196,168,.5); color: var(--ab-teal-dark); }
.filter-btn.active { background: var(--ab-teal-dark); border-color: var(--ab-teal-dark); color: #fff; box-shadow: var(--shadow-md); }

/* ── ACTIVITY PRICE CARD (affiliate) — clean, low-clutter ──── */
.activity-card { display: flex; flex-direction: column; padding: 24px; }
.activity-card .activity-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.activity-emoji { font-size: 30px; line-height: 1; flex-shrink: 0; }
.activity-card .activity-name { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25; }
/* category: plain small label under the name (no pill) */
.activity-card .activity-category {
  display: block; border: none; background: none; padding: 0; margin: 3px 0 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ab-muted);
}
/* price: plain bold text (no box) */
.price-row { margin: 0 0 14px; }
.activity-card .price-badge {
  display: inline; background: none; border: none; padding: 0;
  font-size: 15px; font-weight: 800; color: var(--ab-gold); white-space: nowrap;
}
/* Andrew's note: subtle left accent, no filled box */
.andrew-note {
  border-left: 3px solid var(--ab-teal); background: none; border-radius: 0;
  padding: 1px 0 1px 14px; margin: 0 0 18px;
  font-size: 14px; line-height: 1.55; color: var(--ab-text-2); font-style: italic;
}
.andrew-tag {
  display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ab-teal-dark);
  background: none; border: none; padding: 0; margin: 0 0 6px;
}
/* buttons pinned to card bottom so a whole row lines up */
.affiliate-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.affiliate-btn {
  flex: 1; min-width: 110px; text-align: center;
  font-weight: 700; font-size: 13px; padding: 10px 12px; border-radius: var(--r-md);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast); color: #fff;
}
.affiliate-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.affiliate-btn.viator  { background: linear-gradient(135deg, #1c8e7c, #16776a); }
.affiliate-btn.gyg     { background: linear-gradient(135deg, #ff5533, #e8472a); }
.affiliate-btn.agoda   { background: linear-gradient(135deg, #5392f9, #2f6fe0); }
.affiliate-btn.booking { background: linear-gradient(135deg, #1f5fb0, #003580); }

/* ── STAY (accommodation) CARD — with cover image ──────────── */
.stay-card { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.stay-card__img { position: relative; width: 100%; height: 200px; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.stay-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.stay-card:hover .stay-card__img img { transform: scale(1.04); }
.stay-tag {
  position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.stay-tag--budget   { background: #f0dcae; color: #5a3e00; }
.stay-tag--midrange { background: var(--ab-teal-dark); color: #fff; }
.stay-tag--luxury   { background: #1a1a1a; color: #f5e6c8; }
.stay-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.stay-card__body h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.stay-desc { font-size: 14px; color: var(--ab-text-2); margin-bottom: 14px; }
.stay-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ab-muted); margin-bottom: 16px; }
.stay-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ── PAGE HERO (small, for inner pages) ────────────────────── */
.page-hero {
  position: relative; overflow: hidden; background: var(--grad-hero-bg);
  padding: 140px 0 56px; text-align: center;
}

/* ── BLOG ARTICLE CTA BOX (used in posts/_template.html) ───── */
.blog-cta-box {
  background: linear-gradient(135deg, var(--ab-teal-dark), var(--ab-teal));
  color: #fff; border-radius: var(--r-lg); padding: 32px;
  margin: 48px 0 16px; text-align: center; box-shadow: var(--shadow-lg);
}
.blog-cta-box h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; color: #fff; }
.blog-cta-box p  { opacity: .92; margin-bottom: 22px; }
.blog-cta-box .btn-primary { background: #fff; color: var(--ab-teal-dark); }
.blog-cta-box .btn-primary:hover { box-shadow: 0 8px 28px rgba(0,0,0,.18); }

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}