/* ===========================================================
   Angie's Sailabration — shared styles
   Used by index.html, ship.html, destinations.html
   =========================================================== */

:root{
  --ocean-900:#04283c;
  --ocean-800:#07405c;
  --ocean-600:#0b6c86;
  --teal-400:#2bb6b0;
  --coral:#ff6b5b;
  --mango:#ff9f45;
  --gold:#e7bf6a;
  --sand:#fdf6ec;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--sand);
  color:var(--ocean-900);
  -webkit-font-smoothing:antialiased;
}

.display{font-family:'Playfair Display',Georgia,serif;}
.script-accent{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;}
.eyebrow{letter-spacing:.32em;text-transform:uppercase;}

.gold-rule{
  height:1px;width:76px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.gradient-text{
  background:linear-gradient(95deg,#ffd9a0 0%,var(--gold) 30%,#ffb37a 62%,var(--coral) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(4,40,60,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(231,191,106,.18);
}
.nav-link{
  color:rgba(255,255,255,.72);
  font-size:.9rem;font-weight:500;
  padding:.4rem 0;
  position:relative;
  transition:color .18s ease;
  white-space:nowrap;
}
.nav-link:hover{color:#fff;}
.nav-link.active{color:var(--gold);}
.nav-link.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--gold);border-radius:2px;
}
.nav-cta{
  background:linear-gradient(100deg,var(--mango),var(--coral));
  color:#fff;font-weight:600;font-size:.85rem;
  padding:.55rem 1.25rem;border-radius:999px;
  white-space:nowrap;
  transition:transform .2s ease,filter .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);filter:saturate(1.1);}
/* Compact CTA so the RSVP button still fits in the bar at 375px. */
.nav-cta-sm{font-size:.78rem;padding:.45rem .9rem;}

/* ---------- Mobile menu (under 640px) ---------- */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:40px;padding:0 8px;
  border-radius:.6rem;
  border:1px solid rgba(231,191,106,.28);
  background:rgba(255,255,255,.06);
}
.nav-toggle-bar{
  display:block;width:100%;height:2px;border-radius:2px;
  background:var(--gold);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.nav-menu{
  border-top:1px solid rgba(231,191,106,.18);
  background:rgba(4,40,60,.97);
  padding:.25rem 1.25rem .85rem;
}
.nav-menu-link{
  display:block;padding:.85rem .25rem;
  font-size:1rem;font-weight:500;
  color:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-menu-link:last-child{border-bottom:0;}
.nav-menu-link.active{color:var(--gold);font-weight:600;}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(255,159,69,.55) 0%, rgba(255,159,69,0) 55%),
    radial-gradient(110% 80% at 12% 15%, rgba(255,107,91,.45) 0%, rgba(255,107,91,0) 60%),
    linear-gradient(165deg,#062f45 0%, #07405c 38%, #0b6c86 68%, #1c9a9a 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 78% 14%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 46% 8%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 28% 55%, rgba(255,255,255,.35), transparent);
}
.hero-inner{position:relative;z-index:2;}

.hero-photo{
  position:absolute;inset:0;z-index:1;
  background-position:center 28%;
  background-size:cover;background-repeat:no-repeat;
  opacity:.28;mix-blend-mode:luminosity;
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,47,69,.55) 0%,rgba(6,47,69,.25) 45%,rgba(28,154,154,.55) 100%);
}

.wave{display:block;width:100%;height:auto;}

/* ---------- Surfaces ---------- */
.glass{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.card{
  background:#fff;
  border:1px solid rgba(4,40,60,.07);
  box-shadow:0 1px 2px rgba(4,40,60,.04),0 12px 32px -18px rgba(4,40,60,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(4,40,60,.42);}

.port-badge{
  background:linear-gradient(135deg,var(--teal-400),var(--ocean-600));
  color:#fff;
}

/* ---------- Buttons ---------- */
.btn-sun{
  background:linear-gradient(100deg,var(--mango),var(--coral));
  box-shadow:0 10px 30px -8px rgba(255,107,91,.65);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-sun:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(255,107,91,.75);filter:saturate(1.08);}
.btn-sun:active{transform:translateY(0);}

button[disabled]{opacity:.6;cursor:not-allowed;}
button[disabled]:hover{transform:none;}

/* ---------- Stat tiles ---------- */
.stat{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:1rem;
  padding:1.1rem .75rem;
  text-align:center;
}
.stat-num{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;color:#fff;line-height:1;
  font-size:1.6rem;
}
.stat-label{
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:.5rem;
}

/* ---------- Feature list ---------- */
.tick{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.925rem;line-height:1.6;color:#3d5f70;
}
.tick::before{
  content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.55rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal-400),var(--ocean-600));
}

/* ---------- Photos ---------- */
.photo{
  position:relative;overflow:hidden;
  background:#e8dcc9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23b3a189' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>") center/48px 48px no-repeat;
}
.photo-img{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.polaroid{
  background:#fff;padding:.7rem .7rem 0;
  box-shadow:0 14px 34px -16px rgba(4,40,60,.5);
  transition:transform .3s ease;
}
.polaroid:hover{transform:rotate(0deg) scale(1.03);}
.tilt-l{transform:rotate(-2.5deg);}
.tilt-r{transform:rotate(2deg);}

/* ---------- Urgency band ---------- */
.urgency{background:linear-gradient(135deg,#7a1f2b 0%, #b8342f 45%, #e0663a 100%);}
.count-box{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);
}

/* ---------- Form ---------- */
.field{
  width:100%;border-radius:.85rem;
  border:1px solid rgba(4,40,60,.16);
  background:#fff;padding:.9rem 1rem;
  font-size:1rem;color:var(--ocean-900);
  transition:border-color .18s ease, box-shadow .18s ease;
  appearance:none;
}
.field::placeholder{color:#8fa3ae;}
.field:focus{
  outline:none;border-color:var(--teal-400);
  box-shadow:0 0 0 4px rgba(43,182,176,.18);
}
select.field{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2307405c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;
  padding-right:2.6rem;
}
.label{
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#4c6b7c;margin-bottom:.45rem;display:block;
}
.field[aria-invalid="true"]{
  border-color:var(--coral);
  box-shadow:0 0 0 4px rgba(255,107,91,.15);
}
.fs-msg:empty{display:none;}
.fs-field-error{
  display:block;margin-top:.4rem;
  font-size:.8rem;font-weight:500;color:#d64535;
}
.fs-field-error:empty{display:none;}
.fs-error-box{
  border-radius:.85rem;border:1px solid rgba(214,69,53,.3);
  background:#fff1ef;color:#a8291c;
  padding:.9rem 1.1rem;font-size:.9rem;font-weight:500;margin-bottom:1.25rem;
}
.fs-success-box{
  border-radius:1.25rem;border:1px solid rgba(43,182,176,.35);
  background:linear-gradient(135deg,#effbf7,#e6f6fb);
  color:#07405c;padding:2.25rem 1.5rem;text-align:center;
  font-size:1.05rem;font-weight:600;
}

/* ---------- RSVP confirmation modal ---------- */
.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
}
.modal[hidden]{display:none;}
.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(4,40,60,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.modal-card{
  position:relative;z-index:1;
  width:100%;max-width:26rem;
  background:#fff;border-radius:1.5rem;
  padding:2.25rem 1.75rem 1.75rem;
  text-align:center;
  box-shadow:0 30px 70px -20px rgba(4,40,60,.55);
  animation:modal-in .22s ease-out;
}
@keyframes modal-in{
  from{opacity:0;transform:translateY(12px) scale(.97);}
  to{opacity:1;transform:none;}
}
.modal-check{
  width:56px;height:56px;margin:0 auto 1.1rem;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal-400),var(--ocean-600));
  color:#fff;
}
.modal-title{
  font-size:1.6rem;font-weight:700;line-height:1.2;
  color:var(--ocean-900);margin-bottom:.6rem;
}
.modal-body{
  font-size:.95rem;line-height:1.6;color:#3d5f70;
  margin-bottom:1.5rem;
}
.modal-btn{
  width:100%;color:#fff;font-weight:600;
  padding:.85rem 1rem;border-radius:999px;
}
@media (prefers-reduced-motion:reduce){
  .modal-card{animation:none;}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .card:hover{transform:none;}
  .tilt-l,.tilt-r{transform:none;}
  .polaroid:hover{transform:none;}
  .hero-photo{opacity:.22;}
  .stat-num{font-size:1.35rem;}
}