/* ===== Variables ===== */
:root {
  --blue: #9ba5c4;
  --blue-light: #bfc8d8;
  --yellow: #e8e0b4;
  --yellow-light: #e8e0b4;
  --cream: #f4efd9;
  --green-soft: #465735;
  --green-accent: #465735;
  --green-dark: #465735;
  --green-deep: #465735;
  --ink: #465735;
  --emboss-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  --font-heading: 'Prata', serif;
  --font-body: 'Montserrat', sans-serif;
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* Stop Safari inflating text after rotation; pairs with the 16px
     form-control rule below that prevents iOS zoom-on-focus. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Dedicated RSVP page background */
body.page-rsvp {
  background: #f1ebd1;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 32px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(70, 87, 53, 0.08);
}

.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

.text-link:hover { color: var(--green-soft); }

/* ===== Header / Nav ===== */
.date-card {
      position: relative;
      text-align: center;
      width: 80vw;
      max-width: 1000px;
      margin: 0 auto;
      overflow: visible;
      border-radius: 0;
  border: 4.68px solid #a5b0b1; /* increased 15%; matches the Accommodation section blue */
}

.date-card-core {
      padding: 0;
}

.date-card-content {
  position: relative;
  background: #f1ebd1; /* date card rectangle background */
  color: #7A7B57; /* override: date card text color */
  padding: 108px 72px; /* increased vertical padding by 30% */
  box-shadow: none;
  overflow: visible;
  -webkit-clip-path: none;
  clip-path: none;
}

.date-card-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('images/botanicalleft.png');
  background-repeat: no-repeat;
  background-size: 269px auto;
    background-position: -48px 120px; /* moved further down to ensure visible change */
  filter: brightness(0) saturate(100%) invert(15%) sepia(79%) saturate(892%) hue-rotate(33deg) brightness(220%) contrast(32%);
  opacity: 1; /* restored original opacity */
  pointer-events: none;
  z-index: 0;
}

.date-card-content > * {
  position: relative;
  z-index: 1;
}

.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Make header float over the hero */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  background: transparent;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.site-header.is-scrolled {
  position: fixed;
  background: var(--cream); /* fully opaque outside the hero, spans the full header width */
  box-shadow: 0 6px 18px rgba(38, 52, 31, 0.08);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: #465735;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(70, 87, 53, 0.08);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #465735;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  border-color: var(--yellow);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #465735;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #5b7242;
  background-image: url('images/greenfilm.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.hero-title {
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(38, 52, 31, 0.35);
}

.hero-bar {
  display: none;
}

/* ===== A Bit of Our Story ===== */
.story {
  line-height: 0;
}

.story-placeholder {
  width: 100%;
  aspect-ratio: 21 / 9;
  margin: 0;
}

.story-placeholder img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.carousel {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.carousel-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 920px;
}

.carousel-card {
  flex-shrink: 0;
  height: 320px;
  max-width: 40vw;
  overflow: hidden;
  border-radius: 3px;
  opacity: 0.55;
  box-shadow: 0 10px 24px rgba(91, 114, 66, 0.14);
  transition: height 0.35s ease, opacity 0.35s ease;
}

.carousel-card img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

.carousel-center {
  height: 440px;
  opacity: 1;
  box-shadow: 0 18px 40px rgba(91, 114, 66, 0.18);
}

.carousel-stage.fading .carousel-card { opacity: 0; }

.carousel-caption {
  text-align: center;
  margin-top: 24px;
  font-style: italic;
  color: var(--ink);
  font-size: 1.05rem;
  min-height: 1.6em;
  transition: opacity 0.25s ease;
}

.carousel-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--green-dark);
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.carousel-arrow:hover { opacity: 0.6; }

/* ===== Order of Events ===== */
.events-date {
  position: relative;
  background: #5b7242;
}

.events-date .section-inner {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
}

.events {
  position: relative;
  background-color: #a5b0b1; /* Order of Events background — match accommodation */
  overflow: hidden;
}

.events .section-inner {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
}


/* Outer date-card visuals are handled by .date-card, .date-card-core and .date-card-content earlier in the file. */

.date-card-day {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.date-card-date {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.date-card-time {
  font-size: 0.95rem;
  margin-top: 14px;
  opacity: 1;
}

.date-card-divider {
  border: none;
  border-top: 1px solid #7A7B57;
  margin: 26px auto;
  width: 63%;
}

.date-card-venue {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.date-card-location {
  font-size: 0.9rem;
  margin-top: 6px;
  opacity: 1;
}

.events-title {
  width: auto;
  margin: 0 0 36px;
  text-align: left;
  color: #7A7B57;
}

.registry .section-title::before,
.rsvp .section-title::before {
  content: "";
  width: 57px;
  height: 57px;
  flex: 0 0 57px;
  background-image: url('images/blackbotanical-cropped.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 1;
  pointer-events: none;
}

.registry .section-title,
.rsvp .section-title {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 0;
}

.faq .section-title {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  text-align: left;
}

.events-list {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #f1ebd1; /* Flow of the Weekend background (updated) */
  border: 1px solid #b7c3d8; /* border around that section */
  border-radius: 0;
  padding: 77px 56px 64px; /* top increased 20% from 64px for more space above heading */
  box-shadow: none;
}

.events-intro {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #7A7B57;
}

.events-list .section-title,
.events-list .timeline-label {
  color: #7A7B57;
}

.timeline {
  position: relative;
  margin: 10px auto 0;
  padding: 10px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  background:
    radial-gradient(10px 7px at 50% 8%, rgba(122, 123, 87, 0.22) 0 55%, rgba(122, 123, 87, 0) 60%),
    radial-gradient(10px 7px at 50% 92%, rgba(122, 123, 87, 0.22) 0 55%, rgba(122, 123, 87, 0) 60%),
    linear-gradient(#7A7B57, #7A7B57);
  transition: transform 0.85s ease;
}

.events.is-visible .timeline::before {
  transform: translateX(-50%) scaleY(1);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 54px 34px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

.timeline-node {
  position: absolute;
  top: 0.72rem;
  width: 16px;
  height: 1px;
  background: var(--ink);
}

.timeline-item:nth-child(odd) .timeline-node {
  right: 0;
}

.timeline-item:nth-child(even) .timeline-node {
  left: 0;
}

.timeline-label {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.42;
}

/* ===== Accommodation ===== */
.accommodation {
      position: relative;
      overflow: hidden;
      background: #a5b0b1; /* Accommodation section background */
}

.accommodation::before {
  content: "";
  position: absolute;
  right: -49px; /* scaled to match 15% larger size */
  top: 87px; /* moved down 20% of new height, after 15% size increase */
  width: 278px; /* increased 15% from 242px */
  height: 400px; /* increased 15% from 348px */
  background-image: url('images/botanicalleft.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(-1);
  filter: brightness(0) saturate(100%) invert(60%) sepia(26%) saturate(112%) hue-rotate(6deg) brightness(133%) contrast(126%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.accommodation .section-inner {
  position: relative;
  z-index: 1;
  padding-top: 130px;
  padding-bottom: 100px;
}

.accommodation .section-title {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: #7A7B57;
  text-shadow: none;
}

.accommodation-copy {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  color: #7A7B57;
}

.accommodation-subheading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--cream);
}

.accommodation-copy p {
  margin-bottom: 0;
}

.accommodation-copy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== FAQ ===== */
.faq {
      position: relative;
      background: #f1ebd1; /* Things you may be wondering section background */
      overflow: hidden;
}

.faq::before {
  content: "";
  position: absolute;
  /* Box enlarged 200px on every side (via left/bottom/width/height, since
     this uses an explicit box rather than inset) so the rotated flower
     isn't clipped by its own background-clip: border-box - the stem tip
     stays anchored at the same spot (touching the left edge) via
     transform-origin, matching the pivot-rotation technique used for the
     date-card botanicals. */
  left: -293px;
  bottom: -222px; /* moved down 7% of image height (~19px) */
  width: 587px;
  height: 669px;
  background-image: url('images/botanicalright.png');
  background-repeat: no-repeat;
  background-size: 187px 269px; /* reduced another 10% from 208x299 */
  background-position: 200px 200px;
  transform-origin: 293px 406px;
  transform: rotate(55deg); /* rotated further right, less upward, and moved down for clearance from the FAQ boxes */
  filter: brightness(0) saturate(100%) invert(15%) sepia(79%) saturate(892%) hue-rotate(33deg) brightness(220%) contrast(32%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.faq .section-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 176px; /* reduced 35% from 270px */
}

.faq .section-title {
  color: #7A7B57;
}

.accordion {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.registry-info-accordion {
  margin-top: 40px;
  margin-bottom: 56px;
}

.accordion-item {
  background: #f1ebd1;
  border: 1.7px solid #7A7B57; /* border color: same dark green as text */
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(91, 114, 66, 0.12);
  padding: 0 20px;
  transition: background 0.2s ease;
}


.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  padding: 22px 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: #7A7B57;
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  color: #7A7B57;
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-panel p {
  padding: 0 0 22px;
  border-top: none;
  color: #7A7B57;
  opacity: 0.85;
}

/* ===== Registry + RSVP Teasers ===== */
.teaser-links {
  position: relative;
  overflow: hidden;
  background: #6e8458; /* RSVP and Registry section background */
}

.teaser-links .section-inner {
  padding-bottom: 205px; /* extended slightly so the branch clears the boxes above it */
}

.teaser-links::before {
  content: "";
  position: absolute;
  /* No rotation - the branch lies in its natural, as-drawn orientation. */
  right: -9px; /* scaled so the stem tip touches the screen edge */
  bottom: -85px; /* moved down 7% of its own height from -61px */
  width: 244px; /* increased 20% from 203px */
  height: 349px; /* increased 20% from 291px */
  background-image: url('images/branchbotanical.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.teaser-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.teaser-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 300px;
  text-align: center;
  padding: 46px 34px;
  background: #6e8458; /* match section background for boxed look */
  border: 1px solid #f1ebd1; /* box outlines */
  box-shadow: 0 16px 36px rgba(91, 114, 66, 0.14);
}

.teaser-card .section-title {
  margin-bottom: 18px;
  color: var(--ink);
}

.teaser-card .section-title::before {
  filter: brightness(0) saturate(100%) invert(24%) sepia(18%) saturate(491%) hue-rotate(58deg) brightness(93%) contrast(86%);
}

.teaser-copy {
  max-width: 38ch;
  margin: 0 auto 28px;
  color: var(--ink);
}

/* Teaser card adjustments for registry/rsvp section */
.teaser-card .section-title,
.teaser-card .teaser-copy {
  color: var(--cream);
}

.teaser-card a.btn-primary {
  border-color: #f1ebd1; /* button outlines */
  color: var(--cream);
}

.teaser-card a.btn-primary:hover {
  background: rgba(241, 235, 209, 0.06);
}

/* ===== Standalone Pages ===== */
.subpage-main {
  padding-top: 86px;
}

/* ===== Registry ===== */
.registry {
  background: #b5bfa0;
}

.registry .section-title,
.registry-copy,
.registry-copy a {
  color: var(--ink);
}

.registry-copy {
  max-width: 680px;
  margin: 0 auto 20px;
  text-align: center;
}

.registry-status {
  max-width: 680px;
  margin: 0 auto 30px;
  min-height: 1.3em;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.85;
}

.registry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 26px;
  align-items: stretch;
}

.registry-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  background: #b5bfa0;
  padding: 18px 14px 14px;
}

.registry-image-link,
.registry-image-shell {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.registry-image-link {
  cursor: pointer;
}

.registry-item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.registry-item-name {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
}

.registry-item-progress {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink);
  opacity: 0.7;
}

.registry-mark-btn {
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

.registry-mark-btn:hover {
  background: rgba(70, 87, 53, 0.05);
}

.registry-item.is-purchased .registry-image-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
}

.registry-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(91, 114, 66, 0.82);
  padding: 5px 8px;
}

.registry-item.is-purchased .registry-mark-btn,
.registry-item.is-purchased .registry-image-link {
  pointer-events: none;
}

.registry-item.is-purchased .registry-mark-btn {
  opacity: 0;
  visibility: hidden;
}

.registry-empty,
.registry-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink);
}

.registry-error {
  color: #8c2f2f;
}

/* ===== Purchase confirmation modal ===== */
.purchase-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(38, 52, 31, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.purchase-modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.purchase-modal {
  background: #a5b0b1;
  color: #ffffff;
  max-width: 440px;
  width: 100%;
  padding: 36px 32px;
  border-radius: 0;
  box-shadow: 0 20px 48px rgba(38, 52, 31, 0.35);
}

.purchase-modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-bottom: 14px;
}

.purchase-modal-body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 28px;
  color: #465735;
}

.purchase-modal-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.purchase-modal-actions button {
  flex: 1 1 auto;
  padding: 14px 18px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.purchase-modal-confirm {
  background: #ffffff;
  color: #465735;
  border: 1px solid #ffffff;
}

.purchase-modal-confirm:hover {
  background: transparent;
  color: #ffffff;
}

.purchase-modal-cancel {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.purchase-modal-cancel:hover {
  background: #ffffff;
  color: #465735;
}

a.btn-primary,
a.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--green-dark);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 56px;
  border: 1px solid var(--green-dark);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

a.btn-primary:hover,
a.btn-secondary:hover {
  background: rgba(91, 114, 66, 0.12);
  transform: translateY(-2px);
}

/* ===== RSVP ===== */
.rsvp {
  position: relative;
  background: #f1ebd1;
  padding: 80px 24px;
  overflow: hidden;
}

.rsvp-frame {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.rsvp-card {
  position: relative;
  overflow: hidden;
  background: #b5bfa0;
  padding: 56px 40px;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(91, 114, 66, 0.12);
}

.rsvp-card > * {
  position: relative;
  z-index: 1;
}

.rsvp-deadline {
  text-align: center;
  margin-bottom: 48px;
  font-size: 1.05rem;
  color: var(--ink);
}

.rsvp-group {
  border: none;
  margin-bottom: 44px;
  padding-top: 24px;
}

.rsvp-group:first-of-type { padding-top: 0; }

.rsvp-group legend {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 24px;
  padding: 0;
}

.rsvp-form label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 8px;
  margin-top: 20px;
  color: var(--ink);
}

.rsvp-form label:first-of-type { margin-top: 0; }

.rsvp-form input[type="text"],
.rsvp-form select {
  width: 100%;
  padding: 13px 14px;
  background: rgba(244, 239, 217, 0.78);
  border: 1px solid #6e8458;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}

.rsvp-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2334402e'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%2334402e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.rsvp-form input:focus,
.rsvp-form select:focus {
  outline: none;
  border-color: #6e8458;
  box-shadow: 0 0 0 3px rgba(110, 132, 88, 0.22);
}

button.btn-primary.rsvp-submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  color: var(--green-dark);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 56px;
  border: 1px solid rgba(70, 87, 53, 0.9);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  background: #b5bfa0;
}

button.btn-primary.rsvp-submit:hover {
  background: rgba(70, 87, 53, 0.15);
  color: var(--green-dark);
  transform: translateY(-2px);
}

.rsvp-confirmation {
  text-align: center;
  margin-top: 18px;
  color: var(--ink);
  font-weight: 500;
  min-height: 1.2em;
}

.rsvp-confirmation.rsvp-error {
  color: #f2b8b5;
}

/* ===== Admin ===== */
.admin {
  padding: 80px 24px;
  background: var(--cream);
}

.admin-frame {
  max-width: 1100px;
  margin: 0 auto;
}

.admin-card {
  position: relative;
  overflow: hidden;
  background: rgba(110, 132, 88, 0.85);
  padding: 56px 40px;
  border-radius: 0;
  max-width: 460px;
  margin: 0 auto;
}

.admin-card > * {
  position: relative;
  z-index: 1;
}

.admin-dashboard {
  max-width: 100%;
}

.admin-card .section-title {
  color: var(--cream);
}

.admin-subtext {
  text-align: center;
  margin-bottom: 24px;
  color: var(--cream);
  opacity: 0.9;
  font-size: 0.95rem;
}

.admin-form label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 8px;
  margin-top: 20px;
  color: var(--cream);
}

.admin-form label:first-of-type { margin-top: 0; }

.admin-form input[type="email"],
.admin-form input[type="password"] {
  width: 100%;
  padding: 13px 14px;
  background: rgba(244, 239, 217, 0.78);
  border: 1px solid var(--green-accent);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}

.admin-form input:focus {
  outline: none;
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(110, 132, 88, 0.22);
}

.admin-form button.btn-primary,
.admin-verify-actions button.btn-primary {
  display: block;
  width: 100%;
  margin-top: 24px;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 1px solid var(--cream);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.admin-form button.btn-primary:hover,
.admin-verify-actions button.btn-primary:hover {
  background: rgba(244, 239, 217, 0.16);
  transform: translateY(-2px);
}

.admin-verify-actions button.btn-primary:first-child {
  margin-top: 0;
}

.admin-message {
  text-align: center;
  margin-top: 16px;
  min-height: 1.2em;
  color: var(--cream);
  font-size: 0.9rem;
}

.admin-message.admin-error {
  color: #f2b8b5;
}

.admin-verify-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.admin-link-btn {
  display: block;
  margin: 20px auto 0;
  background: none;
  border: none;
  color: var(--cream);
  text-decoration: underline;
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.admin-topbar .section-title {
  margin-bottom: 0;
  text-align: left;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-topbar-right .admin-link-btn {
  margin: 0;
}

.admin-signed-in {
  font-size: 0.85rem;
  color: var(--cream);
  opacity: 0.8;
}

.admin-dashboard .admin-message {
  text-align: left;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.admin-stat-card {
  background: rgba(244, 239, 217, 0.85);
  border: 1px solid var(--green-accent);
  padding: 20px 16px;
  text-align: center;
}

.admin-stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--green-dark);
}

.admin-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.8;
}

.admin-subsection {
  margin-bottom: 40px;
}

.admin-subsection h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--cream);
  margin-bottom: 14px;
}

.admin-list {
  border: 1px solid var(--green-accent);
  background: rgba(244, 239, 217, 0.9);
}

.admin-list li {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(110, 132, 88, 0.25);
  font-size: 0.92rem;
  color: var(--ink);
}

.admin-list li:last-child { border-bottom: none; }

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--green-accent);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: rgba(244, 239, 217, 0.95);
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(110, 132, 88, 0.25);
}

.admin-table th {
  background: rgba(110, 132, 88, 0.25);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--green-dark);
}

.admin-table tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .admin-card { padding: 40px 22px; }
}

/* ===== Site Gate ===== */
body.site-gate-active {
  overflow: hidden;
}

.site-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.site-gate-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  background: rgba(110, 132, 88, 0.85);
  padding: 48px 36px;
  text-align: center;
}

.site-gate-card > * {
  position: relative;
  z-index: 1;
}

.site-gate-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--cream);
  margin-bottom: 16px;
}

.site-gate-subtext {
  color: var(--cream);
  opacity: 0.9;
  font-size: 0.92rem;
  margin-bottom: 28px;
  line-height: 1.5;
}

.site-gate-form label {
  display: block;
  text-align: left;
  font-size: 0.9rem;
  color: var(--cream);
  margin-bottom: 8px;
}

.site-gate-form input[type="password"] {
  width: 100%;
  padding: 13px 14px;
  background: #b5bfa0; /* password box background */
  border: 1px solid var(--green-accent);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 20px;
}

.site-gate-form input:focus {
  outline: none;
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(110, 132, 88, 0.22);
}

.site-gate-form button.btn-primary {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 1px solid var(--cream);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.site-gate-form button.btn-primary:hover {
  background: rgba(244, 239, 217, 0.16);
  transform: translateY(-2px);
}

.site-gate-error {
  margin-top: 14px;
  min-height: 1.2em;
  color: #f2b8b5;
  font-size: 0.85rem;
}

/* ===== Footer ===== */
.site-footer {
  background: #f1ebd1; /* Footer background color (updated) */
  padding: 31px 24px; /* increased vertical padding by ~40% */
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.footer-title {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--ink);
  font-size: 1.6rem;
  letter-spacing: normal;
  text-align: center;
}

/* ===== Floating RSVP button ===== */
.floating-rsvp-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  background: #f1ebd1;
  color: #a5b0b1;
  border: 1px solid #a5b0b1;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(38, 52, 31, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

.floating-rsvp-btn:hover {
  box-shadow: 0 6px 16px rgba(38, 52, 31, 0.18);
}

.floating-rsvp-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .date-card-content::before {
    background-size: 112px auto;
    background-position: -20px 120px; /* move down on mid breakpoint */
  }

  .accommodation-copy {
    grid-template-columns: 1fr;
  }

  .teaser-grid {
    grid-template-columns: 1fr;
  }

  .registry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .events-title {
    text-align: left;
  }

  .accommodation .section-title {
    text-align: left;
  }
  .timeline::before {
    left: 20px;
    transform: scaleY(0);
  }

  .events.is-visible .timeline::before {
    transform: scaleY(1);
  }

  .timeline-item {
    width: 100%;
    left: 0;
    text-align: left;
    padding: 0 0 28px 56px;
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0;
    text-align: left;
  }

  .timeline-item:nth-child(odd) .timeline-node,
  .timeline-item:nth-child(even) .timeline-node {
    left: 20px;
    right: auto;
  }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    /* Off-canvas via `right` instead of `transform: translateX(100%)`.
       Fixed-position elements combined with a transform are excluded
       from document scroll extent inconsistently across browsers - on
       some mobile Safari versions this was contributing to horizontal
       page overflow and throwing off centering, even though it never
       showed up in Chromium-based testing. */
    right: -340px;
    height: 100vh;
    width: min(78vw, 320px);
    background: #f1ebd1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px;
    transition: right 0.3s ease;
    box-shadow: -8px 0 24px rgba(91, 114, 66, 0.12);
  }

  .nav-links.open { right: 0; }

  .section-inner { padding: 72px 22px; }

  .carousel { gap: 0; }
  .carousel-stage { gap: 8px; }
  .carousel-arrow { font-size: 1.3rem; min-width: 40px; min-height: 48px; }
  .carousel-card { height: 160px; max-width: 32vw; }
  .carousel-center { height: 260px; }

  .events-date {
    /* The botanical's -300px inset inflates page scrollWidth on mobile,
       throwing off every 50vw centering calc. overflow-x:clip alone
       isn't supported on all mobile Safari versions (the bug came back
       on a real device), so this clips both axes with the universally
       supported `hidden` instead - the botanical's current position
       stays within these bounds, so nothing is visibly cut off. */
    overflow: hidden;
  }

  .date-card {
    /* width was 90vw, which ignores .section-inner's 22px side padding -
       the card was wider than the space actually available inside that
       padded parent, so the centering margins collapsed unevenly instead
       of truly centering. width:100% (tried first) still measured a few
       px wider than the content box on some viewport widths, throwing
       the auto margins off; width:auto has guaranteed block-level
       fill-available-space behavior and sidesteps that entirely. */
    width: auto;
    border-width: 2.65px; /* reduced 35% from the 4.07px desktop border */
  }

  .date-card-content {
    padding: 62px 28px; /* top/bottom reduced 20% from 77px */
  }

  .date-card::after {
    top: -16px;
    right: -8px;
    width: min(243px, 45.9vw);
  }

  .rsvp-card { padding: 40px 22px; }

  .events-list { padding: 44px 26px; }

  /* Left-align the intro paragraph in Flow of the Weekend on mobile */
  .events-intro {
    text-align: left;
    margin: 0 0 48px;
  }

  /* Reduce botanical decoration size by 15% on mobile, then apply +5% global increase */
  .date-card-content::before {
    background-size: 91.68px auto; /* reduced 10% from 101.86px */
    background-position: -20px 215px; /* moved up 5% from 226px */
  }

  .accommodation::before {
    width: 168px; /* reduced 10% from 187px */
    height: 242px; /* reduced 10% from 269px */
    right: -30px; /* scaled to match */
    top: 28px; /* moved down 10% of its own height from 4px */
  }

  .teaser-links .section-inner {
    padding-bottom: 192px; /* 25px trimmed: halves the 49px gap below the branch */
  }

  .teaser-links::before {
    opacity: 0.85; /* increased transparency 15% */
    right: -8px; /* scaled to match 10% smaller size */
    bottom: -51px; /* dropped 25px in step with the padding, so the branch
                      stays put relative to the boxes and only the empty
                      green beneath it is removed */
    width: 196px; /* reduced 10% from 218px */
    height: 282px; /* reduced 10% from 313px */
  }

  /* Left-align accommodation heading on narrow screens */
  .accommodation .section-title {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
  }

  .hero { min-height: 0; aspect-ratio: 3 / 4; }

  .site-header.is-scrolled { background: #f1ebd1; }

  .events-date .section-inner {
    padding-top: 80px; /* reduced 20% from 100px */
    padding-bottom: 80px;
  }

  .faq .section-title { text-align: left; }
}

@media (max-width: 420px) {
  .hero-title { font-size: 1.8rem; }
  .timeline-label { font-size: 1rem; }
}

@media (min-width: 721px) {
  .site-header.is-scrolled { background: #f1ebd1; }

  .date-card-content::after {
    content: "";
    position: absolute;
    inset: -300px;
    background-image: url('images/botanicalright.png');
    background-repeat: no-repeat;
    background-size: 256px auto;
    background-position: right 172px top 234px;
    transform-origin: calc(100% - 300px) 517px;
    transform: rotate(-58deg);
    filter: brightness(0) saturate(100%) invert(15%) sepia(79%) saturate(892%) hue-rotate(33deg) brightness(220%) contrast(32%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
  }

  .events-title,
  .accommodation .section-title,
  .faq .section-title {
    text-align: center;
  }

  .faq::before {
    left: -366px; /* scaled to match 25% larger size */
    bottom: -282px; /* moved down 15% of its own height from -157px */
    width: 734px; /* increased 25% from 587px */
    height: 836px; /* increased 25% from 669px */
    background-size: 234px 336px; /* increased 25% from 187px 269px */
    background-position: 250px 250px; /* scaled to match */
    transform-origin: 366px 508px; /* scaled to match */
  }
}

/* ===== iOS zoom-on-focus fix =====
   Safari zooms the layout in when a focused input/select/textarea has a
   computed font-size below 16px, and does NOT zoom back out on blur - the
   zoom persists across the gate dismissal into the rest of the site.
   Every control was 0.95rem (15.2px), so tapping the gate password field
   left the whole site zoomed. 16px is the threshold that suppresses it.

   Scoped to touch/mobile so the desktop type scale is unchanged. Placed
   last so it beats the earlier, more specific per-form rules. */
@media (max-width: 720px), (pointer: coarse) {
  input,
  select,
  textarea,
  .site-gate-form input[type="password"],
  .rsvp-form input[type="text"],
  .rsvp-form select,
  .admin-form input[type="email"],
  .admin-form input[type="password"] {
    font-size: 16px;
  }
}