/* ==========================================================
   JAMES & CALLI — SHARED DIMENSIONS
   Measured at Chrome 100% zoom on a 1470px viewport.
   All widths below are CSS-pixel maximums, not fixed widths.
   ========================================================== */
/* One shared Google Fonts request, including Latin-extended macron glyphs. */
@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Jost:wght@400;500;700&family=Caveat:wght@500;600&family=Pinyon+Script&display=swap");


:root {
  --paper: #fbf8e8;
  --red: #ad0800;
  --schedule-red: #a10000;
  --schedule-muted: #d7958a;

  --photo-width: 860px;
  --title-width: 1048px;
  --body-width: 860px;
  --page-gutter: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 55px; }
body { margin: 0; background: var(--paper); color: var(--red); font: 400 16px/1.52 Jost, Arial, sans-serif; }
a { color: inherit; }
img { max-width: 100%; }

/* ==========================================================
   LAYOUT: 860PX SECTION BANNERS / 22PX TEXT GUTTERS
   ========================================================== */
.layout {
  width: min(var(--photo-width), 100%);
  margin-inline: auto;
}

/* Photos: 860px on laptop, full viewport width on portrait phones.
   Text blocks inside this frame keep their separate 22px gutters. */
.section > .layout {
  width: min(var(--photo-width), 100%);
  max-width: 100%;
  margin-inline: auto;
}
/* Section title photos use the full 860px frame (edge-to-edge on phones).
   Show the original photo proportions without cropping. */
.section .layout > .banner-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}
.title {
  width: min(calc(100% - var(--page-gutter) * 2), var(--title-width));
  margin: 48px auto 58px;
  font: 400 34px/1.3 Bungee, Impact, sans-serif;
  text-transform: uppercase;
  text-align: center;
}
.section { padding: 48px 0 90px; scroll-margin-top: 52px; }

/* ==========================================================
   NAVIGATION: SAME FONT SIZE ON ALL SECTIONS
   ========================================================== */
.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 0;
  transition: background 0.2s;
}
.topbar nav { display: flex; align-items: center; justify-content: center; gap: 27px; }
.topbar a {
  color: var(--red);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 7px 0 6px;
  border-bottom: 1px solid transparent;
}
.topbar a.active, .topbar a:hover { border-bottom-color: currentColor; }
.mobile-menu { display: none; }

/* Home changes colour and backing ONLY — not nav text size. */
.topbar.on-home {
  top: 35px;
  left: 50%;
  right: auto;
  width: max-content;
  max-width: calc(100% - 30px);
  height: 48px;
  padding: 0 22px;
  transform: translateX(-50%);
  border-radius: 100px;
  background: rgba(70, 135, 130, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.topbar.on-home a { color: #fff8e6; }

/* ==========================================================
   HOME: FULL VIEWPORT VIDEO (1470PX AT A 1470PX VIEWPORT)
   ========================================================== */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 550px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #6bc7be;
}
.water {
  position: absolute;
  inset: 0;
  background: url('water-reference.jpg') center/cover no-repeat;
  transform: scale(1.01);
}
.hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* The 16:9 frame *covers* the viewport without stretching. */
  width: max(100vw, 177.778svh);
  height: max(100svh, 56.25vw);
  max-width: none;
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 20px;
  color: #fff7dd;
  font: 400 clamp(45px, 9vw, 125px)/1.2 Bungee, Impact, sans-serif;
  text-align: center;
}
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 60px 20px 80px;
  text-align: center;
}
.intro p { margin: 6px; }
.intro-date { font-size: 26px; }
.intro .small { margin-top: 55px; font-size: 13px; }

/* ==========================================================
   SCHEDULE: CENTRED 860PX TIMELINE, LEFT-ALIGNED TEXT
   ========================================================== */
.schedule { color: var(--schedule-red); }
.schedule .title { margin: 30px auto 56px; }
.schedule .timeline { width: min(calc(100% - var(--page-gutter) * 2), var(--body-width)); margin-inline: auto; text-align: left; }
.schedule .day { margin: 0 0 77px; }
.schedule .date {
  margin: 0 0 30px;
  font: 400 13px/1.5 Jost, Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
}
.schedule .event-stack {
  position: relative;
  border-left: 1px solid var(--schedule-muted);
  margin-left: 12px;
  padding-left: 27px;
}
.schedule .event { position: relative; margin: 0 0 53px; text-align: left; }
.schedule .event:last-child { margin-bottom: 0; }
.schedule .event::before {
  content: '';
  position: absolute;
  top: 4px;
  left: -32px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--schedule-red);
  border-radius: 50%;
  background: var(--paper);
}
.schedule .time { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.schedule .event h3 { margin: 3px 0; font-size: 21px; font-weight: 400; line-height: 1.3; text-transform: uppercase; }
.schedule .event p { max-width: 480px; margin: 7px 0; font-size: 14px; line-height: 1.48; }
.schedule .event .place { font-size: 13px; margin: 7px 0; }
.schedule .event .place::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -3px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0"/%3E%3Ccircle cx="12" cy="10" r="3"/%3E%3C/svg%3E') center/contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0"/%3E%3Ccircle cx="12" cy="10" r="3"/%3E%3C/svg%3E') center/contain no-repeat;
}

/* ==========================================================
   TRAVEL: 860PX BODY, 2-COLUMN CONTENT
   ========================================================== */
.travel .title { margin: 47px auto; }
.travel-rows { width: min(calc(100% - var(--page-gutter) * 2), var(--body-width)); margin-inline: auto; }
.travel-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px; margin-bottom: 73px; }
.travel-row h2 { display: flex; align-items: flex-start; gap: 18px; margin: 0; font-size: 23px; line-height: 1.3; font-weight: 700; text-transform: uppercase; }
.travel-row h2 span { flex: 1; }
.travel-row .ico { font-size: 32px; line-height: 1; font-weight: 400; }
.travel-row .description p { margin: 0 0 32px; }
.travel-row .description p:last-child { margin-bottom: 0; }
.travel-row ul { margin: 0; padding-left: 24px; }
.travel-row li { margin: 0 0 16px; }
.travel-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.travel-icon { width: 42px; height: 42px; flex: 0 0 42px; color: var(--red); fill: currentColor; }
.travel-pin svg { width: 23px; height: 23px; fill: currentColor; }
.travel-directions { padding: 0 !important; margin: 0; list-style: none; }
.travel-directions li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.travel-bullet { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; margin-top: 3px; }

/* ==========================================================
   ACCOMMODATION, THINGS TO DO, FAQ: 860PX TEXT
   ========================================================== */
.stay .title { margin: 44px auto 54px; }
.stay-text { width: min(calc(100% - var(--page-gutter) * 2), var(--body-width)); margin-inline: auto; text-align: center; }
.stay-text p { margin: 0 0 34px; }
/* The Wānaka map is an inset content image, NOT a full-width section banner. */
.stay-map { display: block; width: min(calc(100% - var(--page-gutter) * 2), calc(var(--body-width) - var(--page-gutter) * 2)); margin: 55px auto 75px; border-radius: 8px; }
.things .title { margin-top: 35px; }
.things .layout > .things { width: min(calc(100% - var(--page-gutter) * 2), var(--body-width)); margin-inline: auto; }
.things h2:not(.title) {
  margin-top: 35px;
  font-family: Jost, Arial, sans-serif;
  font-size: 18px;
}
.things p { font-size: 15px; }
.things .extra { display: block; width: 100%; margin: 65px auto; }
.faq .title { margin: 46px auto 55px; }
.faq-content { width: min(calc(100% - var(--page-gutter) * 2), var(--body-width)); margin: 0 auto 80px; }
.faq-content article { margin-bottom: 38px; }
.faq-content h3 { margin: 0 0 6px; font-size: 15px; }
.faq-content p { margin: 0; font-size: 14px; }
.foot { text-align: center; padding: 60px 15px; font-size: 12px; }
.joy { margin: 0; font-size: 28px; font-style: italic; font-weight: 700; }

/* ==========================================================
   FLOATING VINYL MUSIC BUTTON
   ========================================================== */
.music-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.music-toggle:hover { transform: scale(1.05); }
.music-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 50%; }
.vinyl-disc {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 22%), radial-gradient(circle, #3a3a3a 0%, #171717 55%, #0f0f0f 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.music-toggle.is-playing .vinyl-disc { animation: vinyl-spin 3s linear infinite; }
.vinyl-groove { position: absolute; inset: 50%; border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; transform: translate(-50%, -50%); }
.groove-1 { width: 78%; height: 78%; }
.groove-2 { width: 58%; height: 58%; }
.groove-3 { width: 40%; height: 40%; }
.vinyl-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: #f7f1df;
  transform: translate(-50%, -50%);
}
.vinyl-centre::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(173,8,0,0.25); transform: translate(-50%, -50%); }
.vinyl-centre svg { position: relative; z-index: 1; width: 14px; height: 14px; }
.music-pause { display: none; }
.music-toggle.is-playing .music-play { display: none; }
.music-toggle.is-playing .music-pause { display: block; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }


/* ==========================================================
   HANDWRITTEN MUSIC PROMPT
   ========================================================== */

.music-hint {
  position: fixed;
  bottom: 60px;
  right: 50px;

  z-index: 109;

  width: 120px;
  height: 95px;

  color: var(--red);
  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

/* Show only while the homepage menu is active */

body:has(.topbar.on-home) .music-hint {
  opacity: 1;
  visibility: visible;
}

/* Handwritten text */

.music-hint-text {
  position: absolute;
  top: 0;
  left: -40px;

  font-family: "Pinyon Script", cursive;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;

  white-space: nowrap;
  transform: rotate(-8deg);
}

/* Curved arrow */

.music-hint-arrow {
  position: absolute;
  right: 0;
  bottom: 50px;

  width: 75px;
  height: 70px;

  transform: rotate(5deg);
}

/* Hide while the music is playing */

body:has(#musicToggle.is-playing) .music-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body:has(#musicToggle.is-playing) .music-hint {
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  .music-hint {
    right: 55px;    
    bottom: 65px;   
  }

}

  .music-hint-text {
    top: 0;
    left: -40px;

    font-size: 25px;
  }

  .music-hint-arrow {
    top: 0;
    right: 0;

    width: 70px;
    height: 65px;

    transform: rotate(8deg);
  }

}


/* ==========================================================
   HOMEPAGE RSVP BLOCK
   ========================================================== */

.intro {
  min-height: 420px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 60px 20px 80px;
  text-align: center;
}

.intro-date-large {
  margin: 0 0 22px;

  font-family: Jost, Arial, sans-serif;
  font-size: 32px;
  font-weight: 200;
  line-height: 1.2;

  color: var(--red);
}

.intro-location {
  margin: 0 0 80px;

  font-family: Jost, Arial, sans-serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.3;
  padding: 0 0 10px 0;

  color: var(--red);
}

.intro-countdown {
  margin: 0 0 70px;

  font-family: Jost, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;

  color: var(--red);
}

.rsvp-pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 80px;
  height: 35px;
  padding: 0 34px;
  margin: 10px 0 20px;

  border: 2px solid var(--red);
  border-radius: 999px;

  background: transparent;
  color: var(--red);

  font-family: Jost, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;

  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.rsvp-pill-button:hover {
  background: var(--red);
  color: var(--paper);
  transform: translateY(-1px);
}

.intro-message {
  margin: 0;

  font-family: Jost, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;

  color: var(--red);
}

@media screen and (max-width: 900px) {

  /* Main navigation container */

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 52px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    background: var(--paper);
    z-index: 100;
  }

  /* Show the mobile menu button */

  .mobile-menu {
    display: block;

    padding: 6px 10px;

    border: 0;
    background: transparent;

    color: var(--red);

    font-family: Jost, Arial, sans-serif;
    font-size: 15px;

    cursor: pointer;
  }

  /* Homepage frosted menu */

  .topbar.on-home {
    top: 15px;
    left: auto;
    right: 15px;

    width: auto;
    height: 48px;
    padding: 0 18px;

    transform: none;

    background: rgba(70, 135, 130, 0.25);
    border-radius: 100px;
  }

  .topbar.on-home .mobile-menu {
    color: #fff8e6;
  }

  /* Hide full navigation until menu opens */

  .topbar nav,
  .topbar.on-home nav {
    display: none;

    position: absolute;
    top: 52px;
    right: 0;
    left: auto;

    width: 230px;
    max-width: calc(100vw - 30px);

    flex-direction: column;
    align-items: stretch;
    gap: 5px;

    padding: 14px 12px 20px;

    border-radius: 12px;
    background: var(--paper);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  }

  /* Show navigation when hamburger is clicked */

  .topbar nav.open,
  .topbar.on-home nav.open {
    display: flex;
  }

  /* Dropdown links */

  .topbar nav a,
  .topbar.on-home nav a {
    display: block;

    padding: 12px;

    color: var(--red);
    font-size: 12px;

    text-align: center;
    text-decoration: none;
  }

}

/* ==========================================================
   TRAVEL SECTION - MOBILE LAYOUT
   ========================================================== */

@media screen and (max-width: 720px) {

  /* Stack headings above descriptions */

  .travel-row {
    display: flex;
    flex-direction: column;

    align-items: stretch;
    gap: 28px;

    margin-bottom: 100px;
  }

  /* Keep icon and heading on the same line */

  .travel-row h2 {
    display: flex;
    flex-direction: row;

    align-items: center;
    gap: 18px;

    margin: 0;
  }

  /* Keep the travel icons aligned */

  .travel-row .travel-icon {
    flex-shrink: 0;
  }

  /* Description sits underneath the heading */

  .travel-row .description {
    width: 100%;
    margin: 0;
    padding: 0;

    text-align: left;
  }

  /* Remove unwanted top spacing */

  .travel-row .description p:first-child {
    margin-top: 0;
  }

  /* No unnecessary spacing after the last section */

  .travel-row:last-child {
    margin-bottom: 0;
  }

}

/* ==========================================================
   MOBILE NAVIGATION - REMOVE ACTIVE LINK UNDERLINE
   ========================================================== */

@media screen and (max-width: 900px) {

  /* Remove desktop underlines from mobile menu links */

  .topbar nav a,
  .topbar nav a.active,
  .topbar nav a:hover,
  .topbar.on-home nav a,
  .topbar.on-home nav a.active,
  .topbar.on-home nav a:hover {
    border-bottom: none;
    text-decoration: none;
  }

}
/* ==========================================================
   MOBILE DROPDOWN MENU
   ========================================================== */

@media screen and (max-width: 900px) {

  /* ========================================================
     MENU SETTINGS - CHANGE THESE VALUES
     ======================================================== */

  .topbar {
    --menu-width: 170px;
    --menu-max-height: 75vh;

    --menu-top: 52px;
    --menu-right: 0px;

    --menu-padding-top: 14px;
    --menu-padding-right: 20px;
    --menu-padding-bottom: 14px;
    --menu-padding-left: 20px;

    --menu-link-spacing: 5px;
    --menu-link-padding: 12px;

    --menu-border-radius: 12px;
  }


  /* ========================================================
     DROPDOWN CONTAINER
     ======================================================== */

  .topbar nav,
  .topbar.on-home nav {
    display: none;

    position: absolute;
    top: var(--menu-top);
    right: var(--menu-right);
    left: auto;

    width: var(--menu-width);
    max-width: calc(100vw - 30px);
    max-height: var(--menu-max-height);

    box-sizing: border-box;

    flex-direction: column;
    align-items: stretch;
    gap: var(--menu-link-spacing);

    padding:
      var(--menu-padding-top)
      var(--menu-padding-right)
      var(--menu-padding-bottom)
      var(--menu-padding-left);

    overflow-y: auto;

    border-radius: var(--menu-border-radius);
    background: var(--paper);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  }


  /* ========================================================
     OPEN MENU
     ======================================================== */

  .topbar nav.open,
  .topbar.on-home nav.open {
    display: flex;
  }


  /* ========================================================
     MENU LINKS - RIGHT ALIGNED
     ======================================================== */

  .topbar nav a,
  .topbar.on-home nav a {
    display: block;

    width: 100%;
    box-sizing: border-box;

    padding: var(--menu-link-padding) 0;

    color: var(--red);
    text-align: right;
    text-decoration: none;

    border: none;
  }


  /* ========================================================
     REMOVE ACTIVE LINK UNDERLINE
     ======================================================== */

  .topbar nav a.active,
  .topbar nav a:hover,
  .topbar.on-home nav a.active,
  .topbar.on-home nav a:hover {
    border-bottom: none;
    text-decoration: none;
  }

}