Beach Resort Landing

/* ── Beach Resort palette — teal · sand · coral ─────────────────────────── */
:root {
  --teal: #0e7c7b;
  --teal-light: #2aa9a8;
  --teal-d: #085e5d;
  --teal-pale: #e0f3f3;
  --sand: #f7f4ef;
  --sand-2: #ece7dc;
  --sand-3: #ddd7cc;
  --coral: #e8624a;
  --coral-light: #f07f6a;
  --coral-d: #c44d37;
  --ocean: #1a6b8a;
  --ocean-deep: #0d4a63;
  --ink: #1a2326;
  --ink-2: #2e3d44;
  --stone: #6e7e84;
  --line: rgba(26, 35, 38, 0.1);
  --line-strong: rgba(26, 35, 38, 0.18);
  --font-body: "Poppins", system-ui, sans-serif;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-soft: 0 4px 24px rgba(14, 124, 123, 0.1);
  --shadow-deep: 0 16px 48px rgba(26, 35, 38, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
p + p {
  margin-top: 0.9em;
}

/* ── Typography helpers ── */
.eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 10px;
}
h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.2;
}
em {
  font-style: italic;
  color: var(--coral);
}

/* ── Section base ── */
.section {
  padding: 96px 7vw;
}
.section-header {
  max-width: 540px;
  margin-bottom: 52px;
}
.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 8px;
}
.section-header.centered {
  max-width: 100%;
  text-align: center;
}

/* ── Site Nav ── */
.site-nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 7vw;
  transition: background 0.3s, padding 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}
.site-nav.scrolled {
  background: rgba(10, 70, 80, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 7vw;
  box-shadow: var(--shadow-deep);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}
.nav-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--coral);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}
.nav-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: white;
}
.nav-cta {
  background: var(--coral);
  color: white;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--r-xl);
  transition: background 0.2s;
}
.nav-cta:hover {
  background: var(--coral-light);
}

/* ── Sticky CTA band ── */
.sticky-cta {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--teal-d);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 7vw;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -4px 24px rgba(14, 124, 123, 0.22);
}
.sticky-cta.visible {
  transform: translateY(0);
}
.sticky-cta p {
  font-size: 0.9rem;
  font-weight: 500;
}
.sticky-btn {
  background: var(--coral);
  color: white;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--r-xl);
  transition: background 0.2s;
  flex-shrink: 0;
}
.sticky-btn:hover {
  background: var(--coral-light);
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 7vw;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--ocean-deep) 0%,
    var(--ocean) 35%,
    var(--teal) 65%,
    #1a8c8b 100%
  );
  z-index: 0;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 100% 60% at 50% 100%,
      rgba(232, 98, 74, 0.18) 0%,
      transparent 60%
    ), radial-gradient(ellipse 80% 40% at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}
/* Simulated waves/ripples on the hero */
.hero-bg::before {
  content: "";
  position: absolute;
  bottom: 60px;
  inset-inline: 0;
  height: 200px;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 18px,
    rgba(255, 255, 255, 0.04) 18px,
    rgba(255, 255, 255, 0.04) 20px
  );
  border-radius: 50% 50% 0 0 / 20px;
  opacity: 0.6;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-top: 70px;
}
.hero .eyebrow {
  color: var(--teal-pale);
}
.hero-title {
  font-size: clamp(2.6rem, 6vw, 5rem);
  color: white;
  font-weight: 700;
  line-height: 1.1;
  margin: 10px 0 20px;
  letter-spacing: -0.02em;
}
.hero-title em {
  color: var(--coral-light);
  font-style: italic;
}
.hero-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 40px;
  max-width: 460px;
  line-height: 1.7;
}
.hero-wave {
  position: absolute;
  bottom: -1px;
  inset-inline: 0;
  z-index: 2;
  line-height: 0;
}
.hero-wave svg {
  width: 100%;
  height: 60px;
  display: block;
}

/* ── Widget ── */
.widget {
  display: flex;
  align-items: stretch;
  background: white;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  max-width: 720px;
}
.widget-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  min-width: 0;
}
.widget-field label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--stone);
  font-weight: 600;
  margin-bottom: 4px;
}
.widget-field input,
.widget-field select {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  width: 100%;
  cursor: pointer;
}
.widget-sep {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  margin: 8px 0;
}
.widget-btn {
  background: var(--coral);
  color: white;
  border: none;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0 26px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.widget-btn:hover {
  background: var(--coral-d);
}

/* ── Rooms ── */
.rooms {
  background: var(--sand);
}
.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.room-card {
  background: white;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
  box-shadow: var(--shadow-soft);
}
.room-card:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-6px);
}
.room-card.featured {
  box-shadow: 0 0 0 2px var(--coral), var(--shadow-soft);
}
.room-img {
  height: 210px;
  flex-shrink: 0;
  position: relative;
}
.room-img-1 {
  background: linear-gradient(145deg, #2a8a5a 0%, #1e7a6a 40%, #0e6060 80%, #1a8c8b 100%);
}
.room-img-2 {
  background: linear-gradient(
    145deg,
    var(--ocean-deep) 0%,
    var(--ocean) 40%,
    var(--teal) 70%,
    #2aa9a8 100%
  );
}
.room-img-3 {
  background: linear-gradient(
    145deg,
    #1a3a4a 0%,
    var(--ocean-deep) 35%,
    var(--ocean) 65%,
    var(--teal-light) 100%
  );
}
.room-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: white;
  color: var(--teal-d);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.room-badge.best {
  background: var(--coral);
  color: white;
}
.room-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.room-cat {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--teal);
  font-weight: 600;
}
.room-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2px;
  color: var(--ink);
}
.room-desc {
  font-size: 0.84rem;
  color: var(--stone);
  line-height: 1.6;
  flex: 1;
}
.room-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.room-perks span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--teal-pale);
  padding: 4px 10px;
  border-radius: var(--r-xl);
}
.room-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.room-rate {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal-d);
}
.room-btn {
  background: var(--teal);
  color: white;
  border: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: background 0.2s;
}
.room-btn:hover {
  background: var(--teal-d);
}

/* ── Story ── */
.story {
  background: var(--sand-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.story-img {
  height: 520px;
  border-radius: var(--r-lg);
  background: linear-gradient(
    155deg,
    var(--ocean-deep) 0%,
    var(--ocean) 30%,
    var(--teal) 60%,
    #2aa9a8 85%,
    #e0f3f3 100%
  );
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.story-img::before {
  content: "~~ ~~~~ ~~ ~~~";
  position: absolute;
  bottom: 40px;
  left: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 2rem;
  letter-spacing: 8px;
  line-height: 1.8;
}
.story-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.story-text h2 {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  margin-bottom: 16px;
}
.story-text h2 em {
  color: var(--teal);
}
.story-text p {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.75;
}
.pull-quote {
  background: white;
  border-left: 4px solid var(--coral);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
}
.pull-quote p {
  font-size: 0.92rem;
  color: var(--ink);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}
.pull-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--stone);
  font-style: normal;
  font-weight: 600;
}

/* ── Visit ── */
.visit {
  background: white;
}
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 4px;
}
.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hours-card {
  background: var(--sand);
  border-radius: var(--r-md);
  padding: 22px 18px;
  border: 1px solid var(--line);
}
.hours-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.hours-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.hours-card p {
  font-size: 0.8rem;
  color: var(--stone);
  line-height: 1.55;
  margin: 0;
}
.visit-map {
  height: 100%;
  min-height: 340px;
}
.map-placeholder {
  height: 100%;
  min-height: 340px;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.map-water {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--teal-pale) 0%, #c8eaea 30%, #a8d8d8 60%, #7cc0c0 100%);
}
.map-shore {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 40%;
  background: linear-gradient(180deg, #e8e0d4 0%, var(--sand-3) 100%);
  border-radius: 60% 60% 0 0;
}
.map-pin {
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--coral);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.map-placeholder > p {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  z-index: 2;
}

/* ── Reserve ── */
.reserve {
  background: linear-gradient(160deg, var(--teal-d) 0%, var(--ocean-deep) 60%, var(--ink) 100%);
  padding: 96px 7vw;
}
.reserve-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.reserve-header {
  text-align: center;
  margin-bottom: 48px;
}
.reserve-header .eyebrow {
  color: var(--teal-pale);
}
.reserve-header h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: white;
  margin: 8px 0 12px;
}
.reserve-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.65;
}
.reserve-form {
  background: white;
  border-radius: var(--r-lg);
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-deep);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-row.triple {
  grid-template-columns: 1fr 1fr 1fr;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field.full {
  grid-column: 1 / -1;
}
.form-field label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stone);
  font-weight: 600;
}
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--sand);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--teal);
  background: white;
}
.form-field input.error,
.form-field select.error {
  border-color: var(--coral-d);
}
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.nights-calc {
  font-size: 0.84rem;
  color: var(--stone);
  font-weight: 500;
}
.nights-calc strong {
  color: var(--teal-d);
}
.submit-btn {
  background: var(--coral);
  color: white;
  border: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 13px 30px;
  border-radius: var(--r-xl);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s;
}
.submit-btn:hover {
  background: var(--coral-d);
  transform: translateY(-1px);
}

/* ── Footer ── */
.site-footer {
  background: var(--ink);
  color: rgba(247, 244, 239, 0.55);
  text-align: center;
  padding: 28px 7vw;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.footer-brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.01em;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal-d);
  color: white;
  padding: 12px 26px;
  border-radius: var(--r-xl);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-deep);
  white-space: nowrap;
  z-index: 999;
  border-top: 3px solid var(--coral);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .story {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .story-img {
    height: 320px;
  }
}
@media (max-width: 960px) {
  .room-grid {
    grid-template-columns: 1fr 1fr;
  }
  .visit-grid {
    grid-template-columns: 1fr;
  }
  .nav-links {
    display: none;
  }
  .form-row.triple {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .section {
    padding: 64px 5vw;
  }
  .room-grid {
    grid-template-columns: 1fr;
  }
  .hours-grid {
    grid-template-columns: 1fr 1fr;
  }
  .widget {
    flex-direction: column;
    border-radius: var(--r-md);
  }
  .widget-btn {
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: 16px;
  }
  .widget-sep {
    width: auto;
    height: 1px;
    margin: 0 14px;
  }
  .form-row,
  .form-row.triple {
    grid-template-columns: 1fr;
  }
  .reserve-form {
    padding: 24px 20px;
  }
  .sticky-cta {
    flex-direction: column;
    gap: 10px;
    padding: 12px 5vw;
    text-align: center;
  }
}

// ── Toast ────────────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
  toast.textContent = msg;
  toast.hidden = false;
  clearTimeout(showToast._t);
  showToast._t = setTimeout(() => (toast.hidden = true), 2200);
}

// ── Sticky nav + CTA band ────────────────────────────────────────────────────
const siteNav = document.getElementById("siteNav");
const stickyCta = document.getElementById("stickyCta");
const heroEl = document.getElementById("home");

function onScroll() {
  const heroBottom = heroEl.getBoundingClientRect().bottom;
  siteNav.classList.toggle("scrolled", window.scrollY > 60);
  // Show the sticky CTA band once the hero is fully scrolled past
  const show = heroBottom < 0;
  stickyCta.classList.toggle("visible", show);
  stickyCta.setAttribute("aria-hidden", String(!show));
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll(); // run once on load

// ── Nights calculator helper ─────────────────────────────────────────────────
function calcNights(inVal, outVal) {
  if (!inVal || !outVal) return 0;
  const nights = Math.round((new Date(outVal) - new Date(inVal)) / 864e5);
  return nights > 0 ? nights : 0;
}
function fmtNights(n) {
  return n === 1 ? "1 night" : `${n} nights`;
}

// ── Hero widget ──────────────────────────────────────────────────────────────
const wCheckIn = document.getElementById("wCheckIn");
const wCheckOut = document.getElementById("wCheckOut");
const widgetNights = document.getElementById("widgetNights");

// Seed with defaults (9–12 Jun 2026)
wCheckIn.value = "2026-06-09";
wCheckOut.value = "2026-06-12";

function updateWidgetLabel() {
  const n = calcNights(wCheckIn.value, wCheckOut.value);
  widgetNights.textContent = n > 0 ? `${fmtNights(n)} · ` : "";
}
updateWidgetLabel();

wCheckIn.addEventListener("change", () => {
  if (wCheckOut.value && wCheckOut.value <= wCheckIn.value) {
    const d = new Date(wCheckIn.value);
    d.setDate(d.getDate() + 1);
    wCheckOut.value = d.toISOString().slice(0, 10);
  }
  updateWidgetLabel();
});
wCheckOut.addEventListener("change", updateWidgetLabel);

document.getElementById("widgetSearch").addEventListener("click", () => {
  const n = calcNights(wCheckIn.value, wCheckOut.value);
  if (n <= 0) {
    showToast("Please select valid check-in and check-out dates.");
    return;
  }
  showToast(`Checking availability · ${fmtNights(n)} from ${wCheckIn.value}`);
});

// ── Room cards ───────────────────────────────────────────────────────────────
document.querySelectorAll(".room-btn").forEach((btn) => {
  btn.addEventListener("click", () => {
    const room = btn.dataset.room;
    showToast(`Opening reservation for "${room}" →`);
  });
});

// ── Reserve form ─────────────────────────────────────────────────────────────
const rIn = document.getElementById("rIn");
const rOut = document.getElementById("rOut");
const rName = document.getElementById("rName");
const rEmail = document.getElementById("rEmail");
const nightsCalc = document.getElementById("nightsCalc");

// Seed defaults
rIn.value = "2026-06-09";
rOut.value = "2026-06-12";

// Rate map per room type
const RATES = { "": 180, garden: 180, ocean: 340, cliff: 680 };

function updateNightsCalc() {
  const n = calcNights(rIn.value, rOut.value);
  const roomType = document.getElementById("rRoom").value;
  const rate = RATES[roomType] || 180;
  if (n > 0) {
    const total = n * rate;
    nightsCalc.innerHTML = `<strong>${fmtNights(n)}</strong> · from €${total.toLocaleString()} (direct −10%)`;
  } else {
    nightsCalc.textContent = "";
  }
}
updateNightsCalc();

rIn.addEventListener("change", () => {
  if (rOut.value && rOut.value <= rIn.value) {
    const d = new Date(rIn.value);
    d.setDate(d.getDate() + 1);
    rOut.value = d.toISOString().slice(0, 10);
  }
  updateNightsCalc();
});
rOut.addEventListener("change", updateNightsCalc);
document.getElementById("rRoom").addEventListener("change", updateNightsCalc);

document.getElementById("reserveForm").addEventListener("submit", (e) => {
  e.preventDefault();
  let valid = true;

  // Clear errors
  [rName, rEmail, rIn, rOut].forEach((el) => el.classList.remove("error"));

  if (!rName.value.trim()) {
    rName.classList.add("error");
    valid = false;
  }
  const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRe.test(rEmail.value.trim())) {
    rEmail.classList.add("error");
    valid = false;
  }
  if (calcNights(rIn.value, rOut.value) <= 0) {
    rIn.classList.add("error");
    rOut.classList.add("error");
    valid = false;
  }

  if (!valid) {
    showToast("Please complete all required fields.");
    return;
  }

  const firstName = rName.value.trim().split(" ")[0];
  const n = calcNights(rIn.value, rOut.value);
  showToast(`Booking request sent! See you soon, ${firstName} · ${fmtNights(n)}`);
  document.getElementById("reserveForm").reset();
  nightsCalc.textContent = "";
});

// ── Smooth scroll ────────────────────────────────────────────────────────────
document.querySelectorAll('a[href^="#"]').forEach((a) => {
  a.addEventListener("click", (e) => {
    const target = document.querySelector(a.getAttribute("href"));
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  });
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Azul Shores Resort · Algarve</title>
  </head>
  <body>

    <!-- ── Sticky Nav ── -->
    <nav class="site-nav" id="siteNav">
      <a class="nav-brand" href="#">
        <span class="nav-mark">AZ</span>
        <span class="nav-name">Azul Shores</span>
      </a>
      <ul class="nav-links">
        <li><a href="#rooms">Rooms</a></li>
        <li><a href="#story">About</a></li>
        <li><a href="#visit">Find us</a></li>
      </ul>
      <a class="nav-cta" href="#reserve">Book now</a>
    </nav>

    <!-- ── Sticky CTA band (appears after hero) ── -->
    <div class="sticky-cta" id="stickyCta" aria-hidden="true">
      <p>Azul Shores Resort · Algarve, Portugal</p>
      <a href="#reserve" class="sticky-btn">Book your stay</a>
    </div>

    <!-- ── Hero ── -->
    <section class="hero" id="home">
      <div class="hero-bg"></div>
      <div class="hero-inner">
        <p class="eyebrow">Algarve · Portugal</p>
        <h1 class="hero-title">Where every morning<br />starts with the <em>sea.</em></h1>
        <p class="hero-sub">Beachfront villas, three pools, and an ocean horizon that goes on forever.</p>

        <!-- Widget -->
        <div class="widget" id="heroWidget">
          <div class="widget-field">
            <label for="wCheckIn">Check-in</label>
            <input type="date" id="wCheckIn" />
          </div>
          <div class="widget-sep"></div>
          <div class="widget-field">
            <label for="wCheckOut">Check-out</label>
            <input type="date" id="wCheckOut" />
          </div>
          <div class="widget-sep"></div>
          <div class="widget-field">
            <label for="wGuests">Guests</label>
            <select id="wGuests">
              <option value="1">1 guest</option>
              <option value="2" selected>2 guests</option>
              <option value="3">3 guests</option>
              <option value="4">4 guests</option>
            </select>
          </div>
          <button class="widget-btn" id="widgetSearch">
            <span id="widgetNights"></span>Check availability
          </button>
        </div>
      </div>
      <!-- Wave divider -->
      <div class="hero-wave">
        <svg viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="#f7f4ef"/>
        </svg>
      </div>
    </section>

    <!-- ── Rooms & experiences ── -->
    <section class="rooms section" id="rooms">
      <header class="section-header">
        <p class="eyebrow">Accommodations</p>
        <h2>Sun-drenched rooms<br />for every kind of stay.</h2>
      </header>
      <div class="room-grid">
        <article class="room-card">
          <div class="room-img room-img-1">
            <span class="room-badge">Sea view</span>
          </div>
          <div class="room-body">
            <p class="room-cat">Garden</p>
            <h3>Garden Bungalow</h3>
            <p class="room-desc">A bright 28 m² bungalow surrounded by bougainvillea, with a private terrace and outdoor shower steps from the main pool.</p>
            <div class="room-perks">
              <span>🌿 Terrace</span>
              <span>🏊 Pool access</span>
              <span>🌅 Garden view</span>
            </div>
            <div class="room-footer">
              <span class="room-rate">From €180 / night</span>
              <button class="room-btn" data-room="Garden Bungalow">Select</button>
            </div>
          </div>
        </article>

        <article class="room-card featured">
          <div class="room-img room-img-2">
            <span class="room-badge best">Best seller</span>
          </div>
          <div class="room-body">
            <p class="room-cat">Beachfront</p>
            <h3>Ocean Suite</h3>
            <p class="room-desc">A 52 m² suite on the front dune with panoramic ocean views, a plunge pool, and a king bed angled toward the sunrise.</p>
            <div class="room-perks">
              <span>🌊 Ocean view</span>
              <span>🛁 Plunge pool</span>
              <span>🍳 Breakfast incl.</span>
            </div>
            <div class="room-footer">
              <span class="room-rate">From €340 / night</span>
              <button class="room-btn" data-room="Ocean Suite">Select</button>
            </div>
          </div>
        </article>

        <article class="room-card">
          <div class="room-img room-img-3">
            <span class="room-badge">Exclusive</span>
          </div>
          <div class="room-body">
            <p class="room-cat">Cliff-top</p>
            <h3>Cliff Villa</h3>
            <p class="room-desc">A stand-alone 80 m² villa perched on the western cliff, with an infinity pool, outdoor dining terrace, and butler service.</p>
            <div class="room-perks">
              <span>♾️ Infinity pool</span>
              <span>🍽️ Butler service</span>
              <span>🌅 Sunset views</span>
            </div>
            <div class="room-footer">
              <span class="room-rate">From €680 / night</span>
              <button class="room-btn" data-room="Cliff Villa">Select</button>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- ── Story / About ── -->
    <section class="story section" id="story">
      <div class="story-img"></div>
      <div class="story-content">
        <div class="story-text">
          <p class="eyebrow">Our story</p>
          <h2>Born from the<br /><em>light</em> of this coast.</h2>
          <p>Azul Shores was built by the Costa family in 1998 on a private stretch of Praia da Luz. Two decades later, it remains family-run — and fiercely committed to the unhurried rhythm of this particular piece of coast.</p>
          <p>Thirty-two rooms. A restaurant that opens at sunset. A spa carved into the cliff. And a staff-to-guest ratio that means your name will be known by breakfast.</p>
        </div>
        <blockquote class="pull-quote">
          <p>"The kind of place you keep coming back to — not because you have to, but because nowhere else quite feels the same."</p>
          <cite>— Ana Ribeiro, guest since 2019</cite>
        </blockquote>
      </div>
    </section>

    <!-- ── Visit ── -->
    <section class="visit section" id="visit">
      <header class="section-header centered">
        <p class="eyebrow">Plan your visit</p>
        <h2>Hours &amp; Location</h2>
      </header>
      <div class="visit-grid">
        <div class="hours-grid">
          <div class="hours-card">
            <p class="hours-icon">🏖️</p>
            <h3>Beach &amp; Pools</h3>
            <p>07:00 – 21:00 daily</p>
          </div>
          <div class="hours-card">
            <p class="hours-icon">🍽️</p>
            <h3>Restaurant</h3>
            <p>Breakfast 07:30 – 10:30<br />Dinner 19:00 – 22:30</p>
          </div>
          <div class="hours-card">
            <p class="hours-icon">💆</p>
            <h3>Spa &amp; Wellness</h3>
            <p>09:00 – 20:00 daily<br />Booking advised</p>
          </div>
          <div class="hours-card">
            <p class="hours-icon">🛎️</p>
            <h3>Reception</h3>
            <p>24 hours · 7 days<br />+351 282 000 100</p>
          </div>
        </div>
        <div class="visit-map">
          <div class="map-placeholder">
            <div class="map-water"></div>
            <div class="map-shore"></div>
            <div class="map-pin"></div>
            <p>Azul Shores Resort<br />Praia da Luz, Algarve</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ── Reserve ── -->
    <section class="reserve section" id="reserve">
      <div class="reserve-wrap">
        <div class="reserve-header">
          <p class="eyebrow">Reserve your stay</p>
          <h2>Book direct &amp; save 10%</h2>
          <p class="reserve-sub">Best rate guaranteed when you book directly with us. Free cancellation up to 48h before arrival.</p>
        </div>
        <form class="reserve-form" id="reserveForm" novalidate>
          <div class="form-row">
            <div class="form-field">
              <label for="rName">Full name</label>
              <input type="text" id="rName" placeholder="Maria Costa" autocomplete="name" />
            </div>
            <div class="form-field">
              <label for="rEmail">Email</label>
              <input type="email" id="rEmail" placeholder="[email protected]" autocomplete="email" />
            </div>
          </div>
          <div class="form-row triple">
            <div class="form-field">
              <label for="rIn">Arrival</label>
              <input type="date" id="rIn" />
            </div>
            <div class="form-field">
              <label for="rOut">Departure</label>
              <input type="date" id="rOut" />
            </div>
            <div class="form-field">
              <label for="rRoom">Room type</label>
              <select id="rRoom">
                <option value="">Any available</option>
                <option value="garden">Garden Bungalow</option>
                <option value="ocean">Ocean Suite</option>
                <option value="cliff">Cliff Villa</option>
              </select>
            </div>
          </div>
          <div class="form-field full">
            <label for="rNotes">Requests or questions</label>
            <textarea id="rNotes" rows="3" placeholder="Special occasions, dietary needs, early check-in…"></textarea>
          </div>
          <div class="form-actions">
            <p class="nights-calc" id="nightsCalc"></p>
            <button type="submit" class="submit-btn">Reserve now →</button>
          </div>
        </form>
      </div>
    </section>

    <!-- ── Footer ── -->
    <footer class="site-footer">
      <p class="footer-brand">Azul Shores Resort</p>
      <p>Praia da Luz, Algarve, Portugal · +351 282 000 100</p>
      <p>© 2026 Azul Shores · All rights reserved</p>
    </footer>

    <div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
    <script src="script.js"></script>
  </body>
</html>