@font-face {
  font-family: 'Caramelt Script';
  src: url('assets/Caramelt-Script.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modular Houseplant';
  src: url('assets/Modular-Houseplant-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modular Houseplant';
  src: url('assets/Modular-Houseplant-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Modular Houseplant';
  src: url('assets/Modular-Houseplant-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modular Houseplant Serif';
  src: url('assets/Modular-Houseplant-Serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Wingman';
  src: url('assets/TAYWingman.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



:root {
  --beige: #F5F1DF;
  --chocolate: #382a1d;
  --chocolate-overlay: #382a1d85;
  --chartreuse: #c4b94b;
  --dark-chartreuse: #382a1d;

  --font-color: var(--chocolate);
  --background-color: var(--beige);

  --font-handscript: 'Caramelt Script', cursive;
  --font-script: 'Mr Dafoe', cursive;
  --font-mono: 'Courier Prime', monospace;
  --font-mono: 'Modular Houseplant';
  --font-sans: 'Wingman', monospace;
}


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

body {
  font-family: var(--font-handscript);
  color: var(--font-color);
}


/* Hide scrollbars in fullPage.js overflow sections */
.fp-scrollable,
.fp-overflow {
  /* Firefox */
  scrollbar-width: none;
  -ms-overflow-style: none; /* IE 10+ */
}

/* Chrome, Safari, Edge */
.fp-scrollable::-webkit-scrollbar,
.fp-overflow::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.fp-right {
  display: none !important;
  top: auto !important;
  bottom: 2rem;
  right: 2rem;
  transform: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

p {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--font-color);
  margin-bottom: 1rem;
}

/* Navigation */
.menu {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
}

/* Button container */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--chocolate);
  gap: 6px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2001;
}

/* Bars */
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--chocolate); /* Or set a specific color */
  border-radius: 2px;
  transition: transform 0.2s ease, width .2s ease, opacity .2s ease;
}

/* Open state */
.hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  width: 0;
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-links {
  display: none;
  flex-direction: column;
  background-color: var(--background-color);
  position: absolute;
  top: 3rem;
  right: 0;
  padding: 1rem;
  min-width: 140px;
}

.nav-links li {
  list-style: none;
  margin: 0.5rem 0;
}

.nav-links a {
  color: var(--font-color);
  text-decoration: none;
}

/* Section */
.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Intro Section */
.intro {
  position: relative;
  background-color: var(--beige);
}

.intro-container {
  width: auto;
  height: calc(var(--vh, 1vh) * 70);
  padding-left: max(20px, 2vw);
  padding-right: max(20px, 2vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  /*
  
 
  box-sizing: border-box;
  overflow: hidden;
  max-height: 100%; */
}

.intro-row {
  display: flex;
  /* flex-direction: row; */
  align-items: center;
  justify-content: center;
  height: calc(var(--vh, 1vh) * 30);
  width: 100%;
  /* max-width: 1000px; */
  flex: 1;
  gap: 1rem;
  overflow: visible;
}

.intro-half {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: visible;
}

.polaroid {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;

  /* fill available space but stay square */
  width: auto;
  height: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  aspect-ratio: 1 / 1;
  font-size: 2vmin; /* adjusts with viewport */

  box-sizing: border-box;
  padding: 0;
}

.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-style: solid;
  border-color: white;
  border-width: .8em .8em 2em .8em; /* top right bottom left */
  box-sizing: border-box;
}

.section.intro .fp-overflow {
  overflow: hidden;
  padding: calc(var(--vh, 1vh) * 5) 0; /* adds visual breathing room for rotated items */
}

/* .section.intro .fp-overflow {
  overflow: visible !important;
} */

.tiara-polaroid {
  transform: rotate(-2deg);
}

.tony-polaroid {
  transform: rotate(2deg);
}

.name-text h1 {
  font-family: var(--font-handscript);
  font-size: clamp(3rem, 5vw, 4rem);
  text-align: center;
  color: var(--chocolate);
  margin: 0;
  white-space: normal;
  word-break: break-word;
}

.plus-sign {
  align-self: center;
  height: clamp(4rem, 5vh, 8rem); /* responsive height */
  font-size: 5rem;
  font-family: var(--font-handscript);
  color: var(--chocolate);
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro .title {
  font-family: var(--font-handscript);
  font-size: 3rem;
  color: var(--chocolate);
  text-align: center;
  z-index: 1;
}

.hero-name {
  font-family: var(--font-handscript);
  color: var(--chocolate);
  text-align: center;
  font-size: clamp(2rem, 8vw, 6rem);
  max-width: 90vw;
  margin: 0 auto;
  padding: 1vh 2vw 0;
  line-height: 1.1;
  white-space: normal;       /* 👈 Allow wrapping */
  overflow: hidden;          /* 👈 Prevent scroll */
}

/* Details Section */
.details {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  background-color: var(--chartreuse);
  color: var(--chocolate);
  text-align: center;
  position: relative;
  min-height: 100vh; /* ensures full vertical space */
  overflow: visible; /* allows the borders to extend */
}

.event-wrapper {
  display: flex;
  padding-top: calc(var(--vh, 1vh) * 10);
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.details .event {
  margin-bottom: 2rem;
}

.details .event h2 {
  font-family: var(--font-sans);
  font-size: 2rem;
  margin-bottom: 0;
  color: var(--chocolate);
  opacity: .85;
  /* text-transform: uppercase; */
}

.details .event p {
  font-family: var(--font-mono);
  margin-top: 0.5rem;
}

.event {
  opacity: 100;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.event.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Video Section */
.video-section {
  position: relative;
  justify-content: flex-end;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.rsvp-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  /* padding: 1.2rem 2rem; */
  letter-spacing: .2em;
  font-size: 3rem;
  background-color: var(--chocolate);
  color: var(--beige);
  font-family: var(--font-handscript);
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  min-width: 200px;
}

.rsvp-btn:hover {
  background-color: color-mix(in srgb, var(--chocolate), black 20%);
}

.rsvp-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--chocolate-overlay);
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(3px);
  z-index: 20;
}

.rsvp-form {
  position: relative;
  max-width: 800px;
  width: 100%;
  height: auto;
  max-height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
  border-radius: 10px;
}

.close-x {
  position: absolute;
  top: 1rem;
  right: 1rem;
  /* font-size: 3rem; */
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 1;
}

.close-x svg {
  height: 40px;
  width: 40px;
}

/* Menu font and hover styles */
.nav-links a {
  font-family: var(--font-mono);
  color: var(--font-color);
  text-decoration: none;
  padding: 0.5rem;
  display: block;
  transition: background 0.3s ease;
}

.nav-links a:hover {
  background-color: var(--chartreuse);
  color: var(--beige);
}


.nav-links {
  padding: 0;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  font-family: var(--font-mono);
  color: var(--font-color);
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.nav-links a:hover {
  background-color: rgba(54, 41, 37, 0.1); /* 10% opacity chocolate */
  color: var(--font-color);
}


/* Footer Layout */
.footer-stack {
  position: relative;
  background-color: var(--beige);
  color: var(--chocolate);
  text-align: center;
  z-index: 2;
  height: auto;
  min-height: calc(var(--vh, 1vh) * 50);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.footer-stack h2 {
  font-family: var(--font-handscript);
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-bottom: 2rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Adjust count as needed */
  width: 100%;
  padding: 0 10px; /* 👈 Keeps links 10px from edges */
  box-sizing: border-box;
}

.footer-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--chocolate);
  padding: 1rem 10px;
  transition: background 0.3s ease;
}

.footer-links a:hover {
  background-color: rgba(54, 41, 37, 0.1);
}

/* Updated Nav Menu with RSVP button */
.nav-links {
  padding: 0;
  display: none;
}

.nav-links.open {
  display: flex;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  font-family: var(--font-mono);
  color: var(--font-color);
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.nav-links a:hover {
  background-color: rgba(54, 41, 37, 0.1);
}

.nav-links a[href="#rsvp"] {
  font-weight: bold;
}


.details a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border 0.2s ease;
}

.details a:hover {
  border-bottom: 1px solid currentColor;
}


.rsvp-success-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.hero-success-message {
  font-family: var(--font-handscript);
  font-size: clamp(2rem, 8vw, 5rem);
  color: var(--chocolate);
  text-align: center;
  max-width: 90vw;
  line-height: 1.1;
}

.questions-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  color: var(--font-color);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6rem;
  overflow-y: auto;
}

.questions-logo {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-handscript);
  font-size: 2rem;
  text-decoration: none;
  color: var(--font-color);
  position: absolute;
  z-index: 10;
}

.dress-header {
  font-family: var(--font-sans);
  font-size: 2rem;
  margin-bottom: 2rem;
}

.gif-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.gif-container {
  width: 80vmin;
  height: 80vmin;
  max-width: 90vw;
  max-height: 90vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gif-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.global-date {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: clamp(1rem, 3vh, 1.3rem);
  font-family: var(--font-mono);
  font-weight: bold;
  white-space: nowrap;
  z-index: 10;
  pointer-events: auto;
  opacity: 1;
  text-decoration: none;
  bottom: 2rem;
  color: var(--chartreuse);
  letter-spacing: 0.1em;
  transition:
    color .4s ease,
    transform .5s ease,
    font-size .8s ease,
    opacity 0.2s ease,
    font-family .6 ease;
}

.global-date.at-top {
  /* font-family: var(--font-handscript); */
  transform: translate(-50%, calc(var(--vh, 1vh) * -80)); /* adjust height upward */
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--beige);
  /* letter-spacing: 0.5em; */
  /* text-transform: uppercase; */
}

.global-date:hover {
  text-decoration: underline;
}

.global-date.hidden {
  opacity: 0;
  pointer-events: none;
}

.global-date.disabled {
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

.details {
  position: relative;
  overflow: hidden;
}

/* Floral borders on both sides */
.details {
  position: relative;          /* anchor the ::before/::after */
  overflow: hidden;
}

.details::before,
.details::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30vw;                 /* ← set the visible width */
  background-repeat: no-repeat;
  background-size: contain;    /* scales proportionally */
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

.details::before {
  left: 0;
  background-image: url('assets/f-border-left.png');
  background-position: left center;
}

.details::after {
  right: 0;
  background-image: url('assets/f-border-right.png');
  background-position: right center;
}

/* keep wrapper above the borders */
.event-wrapper {
  position: relative;
  z-index: 2;
}

/* ------- mobile & small-tablet tweaks -------- */
/* @media (max-width: 767px) {
  .details::before,
  .details::after {
    opacity: 0.3;
    height: 90vh;
    width: 30vw;
    background-size: 100vw auto;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
  }

  .details::before {
    left: 0;
    background-image: url('assets/f-border-left.png');
    background-position: right center;
  }

  .details::after {
    right: 0;
    background-image: url('assets/f-border-right.png');
    background-position: left center;
  }
} */

/* ------- mobile & small-tablet tweaks -------- */
@media (max-width: 767px) {
  .details::before,
  .details::after {
    opacity: 0.4;
    height: calc(var(--vh, 1vh) * 100);
    width: 32vw;
    background-size: 100vw auto;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
  }

  .details::before {
    left: 0;
    background-image: url('assets/f-border-left.png');
    background-position: right center; /* show right half */
  }

  .details::after {
    right: 0;
    background-image: url('assets/f-border-right.png');
    background-position: left center; /* also show right half */
  }
}


.guest-info-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  color: var(--font-color);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  padding-top: 7rem; /* push content below fixed tabs */
}


@media (min-width: 768px) {
  .guest-info-page {
    padding-top: 8rem;
  }
}

.guest-info-logo {
  /* position: fixed; */
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-handscript);
  font-size: clamp(2rem, 5vw, 3rem);
  text-decoration: none;
  color: var(--font-color);
  z-index: 11;
  margin-left: 5vw;
  align-self: flex-start;
}

.guest-info-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: 0.5rem 10px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  font-family: var(--font-mono);
  z-index: 10;
  background-color: transparent;
}

.guest-tab {
  flex: 0 1 auto;
  text-decoration: none;
  color: var(--font-color);
  font-family: var(--font-sans);
  padding: 0.5rem 1rem;
  border-bottom: 2px solid transparent;
  transition: border 0.3s ease;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 600;   /* ensure all tabs take up equal width */
  text-align: center;
  white-space: nowrap;        /* prevent wrapping */
  transition: color .2s, border-bottom-color 0.2s;
}

.guest-tab.active {
  border-bottom: 2px solid currentColor;
}

.guest-tab.light.active {
  border-bottom-color: var(--beige);
}

.guest-tab-content {
  max-width: 800px;
  width: 90%;
  margin: 2rem auto;
  text-align: center;
  overflow: visible !important;
  max-height: none !important;
}


.guest-header {
  font-family: var(--font-handscript);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.registry-container {
  text-align: center;
  max-width: 100%;
  margin-top: 0rem;
}

.faq-section {
  text-align: left;
  margin-top: 2rem;
  padding: 0 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.faq-section details {
  font-family: var(--font-mono);
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 0.5rem;
  cursor: pointer;
}

.faq-section details p {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  line-height: 1.4;
  padding-top: .5rem;
  padding-left: 1.5rem;
}

.faq-section summary {
  font-weight: bold;
  font-family: var(--font-mono);
  list-style: none;
  display: block;
  padding: 1.5rem 1.5rem 0.5rem;
  line-height: 1.4;
  cursor: pointer;
}

.faq-section summary::-webkit-details-marker {
  display: none;
}

.dress-code-background {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--vw, 1vw) * 100);
  height: calc(var(--vh, 1vh) * 100);
  z-index: 0;
  pointer-events: none;
  z-index: 0;
}

.dress-code-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dress-code-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--beige); /* or another readable text color */
  position: relative;
  z-index: 1; /* Hide by default */
}

/* Style overrides when dress-code tab is active */
#guest-info.dress-code-active .guest-info-logo,
#guest-info.dress-code-active .hamburger span,
#guest-info.dress-code-active .guest-tab {
  color: var(--beige);
  /* border-bottom-color: var(--beige); */
}

#guest-info.dress-code-active .guest-tab.active {
  border-bottom: 2px solid var(--beige);
}

#dress-code .dress-code-content h2,
#dress-code .dress-code-content p {
  display: none;
}

.donation-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  overflow-x: auto;
  gap: clamp(1rem, 5vw, 3rem);
  margin: 0;
}

/* .payment-box {
  flex: 0 0 auto;
  max-width: 100px;
} */

.payment-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: white;
  padding: 1rem;
  border-radius: 10px;
  max-width: 200px;
  overflow: hidden;
  transition: background-color 0.2s ease;
}


.payment-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0); /* transparent by default */
  transition: background-color 0.2s ease;
  z-index: 1;
}

.payment-button:hover::before {
  background-color: var(--chartreuse); /* subtle dark overlay */
  opacity: 0.6; /* adjust for desired hover effect */
}

.payment-button * {
  position: relative;
  z-index: 2;
}

.payment-button p{
  margin: 0;
}

.payment-name {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}


.qr-wrapper img {
  width: 100%;
  max-width: 100px;
  height: auto;
}

.guest-info-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: var(--beige);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 0;
  gap: 0.5rem;
}

.guest-tab.light {
  color: var(--beige);
}

.guest-info-logo.light {
  color: var(--beige);
}

.guest-info-header.transparent {
  background-color: transparent;
  box-shadow: none;
}

.registry-header {
  font-family: var(--font-mono);
  padding-top: 1rem;
  line-height: 2rem;
  font-style: bold;
  /* letter-spacing: .2rem; */
  padding-bottom: 1rem;
  padding-top: 3rem;
}

body.rsvp-open .menu {
  display: none;
}

#registry p {
  text-align: left;
  font-size: 14px;
}

@media (max-width: 767px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    z-index: 999;
  }

  .nav-links a {
    font-size: 2rem;
    text-align: center;
    display: block;
    width: 100%;
    padding: 1.5rem 0;
  }

  .hamburger {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
  }
}