@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* Loading custom local IvyOra Text fonts */
@font-face {
  font-family: 'IvyOra Text';
  src: url('assets/IvyOraText-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'IvyOra Text';
  src: url('assets/IvyOraText-Light.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'IvyOra Text';
  src: url('assets/IvyOraText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'IvyOra Text';
  src: url('assets/IvyOraText-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

:root {
  --bg: #FCF9F6;
  --box-bg: #FFF4E9;
  --text-main: #C99A71;
  --text-secondary: #a87950;
  --text-white: #FCF9F6;
  
  --font-script: 'Pinyon Script', cursive;
  --font-serif: 'IvyOra Text', 'Cormorant Garamond', Georgia, serif;
  
  /* Supabase RSVP styling variables */
  --bg-color: #FFF4E9;
  --text-main-color: #C99A71;
  --accent-color: #C99A71;
  
  /* Scrollbar compensation variable (updated dynamically by JS) */
  --sbw: 0px;
}

/* ─── BASE RESET & GENERAL STYLES ─── */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  font-family: var(--font-serif);
  color: var(--text-main);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

html.lenis {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* Scroll lock state */
.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

.no-scroll body {
  overflow: hidden !important;
  height: 100% !important;
}

/* ─── CORE CONTAINER QUERY CONTAINER ─── */
.invite {
  container-type: inline-size;
  container-name: invite;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background-color: var(--bg);
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Viewport notch / safe-areas padding */
@supports (padding: env(safe-area-inset-top)) {
  .invite {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ─── CONTAINER SCALED TYPOGRAPHY & SECTIONS ─── */
@container invite (width > 0) {
  
  /* UNIFORM SECTION TITLE STYLING - Using Pinyon Script per guidelines */
  .section-title,
  .countdown-title,
  .ceremony-title,
  .celebrations-title,
  .rsvp-title,
  .gift-title {
    font-family: var(--font-script) !important;
    font-size: max(9cqw, 34px) !important; /* Scaled up 20% */
    font-weight: normal !important;
    text-transform: none !important; /* Script fonts look best in title/normal case */
    color: var(--text-main);
    margin: 0 0 4cqw 0;
    text-align: center;
    line-height: 1.1;
  }

  /* 1 — HERO SECTION */
  .hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1572 / 2872; /* matches Group 209.webp dimensions */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    background: url('assets/Group 209.webp') center center / cover no-repeat;
  }

  /* Hero video overlay (mobile entry video) */
  .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: none;
  }
  
  /* Hides duplicating HTML overlays on mobile because text is baked into the video/image */
  .hero-overlay-text {
    display: none !important;
  }
  
  /* 2 — TRANSITION & COUNTDOWN SECTION */
  .countdown-section {
    padding: 10cqw 6cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .countdown-title-wrapper {
    width: 50cqw;
    margin-bottom: 4cqw;
  }

  .countdown-title-img {
    width: 100%;
    height: auto;
    display: block;
  }

  .countdown-sub {
    font-family: var(--font-serif);
    font-size: max(3.2cqw, 13px);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 5cqw;
  }

  /* Countdown grid styled slightly smaller per feedback */
  .countdown-grid {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 3.5cqw;
    width: 100%;
    white-space: nowrap;
    margin-top: 3cqw;
  }

  .cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 15cqw;
  }

  .cd-num {
    font-family: var(--font-serif);
    font-size: max(8cqw, 30px);
    font-weight: 300;
    line-height: 1;
    color: var(--text-main);
  }

  .cd-label {
    font-family: var(--font-serif);
    font-size: max(2.2cqw, 9px); /* IvyOra Text, Regular per user guidelines */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 2cqw;
    opacity: 0.85;
  }

  .cd-sep {
    width: 1px;
    height: 6cqw;
    background-color: var(--text-main);
    opacity: 0.4;
  }

  /* 3 — CEREMONY & CELEBRATION (Grid Layout) */
  .info-pair {
    padding: 6cqw;
    display: flex;
    flex-direction: column;
    gap: 10cqw;
    width: 100%;
  }

  .info-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .info-illustration {
    width: 100%;
    margin-bottom: 6cqw;
    overflow: hidden;
  }

  .info-illustration img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none !important; /* blends illustration into background */
  }

  .info-box {
    background-color: var(--box-bg);
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    padding: 3.5cqw 4cqw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: max(2cqw, 8px);
    position: relative;
    z-index: 2;
    height: 32cqw;
    min-height: 125px;
    max-height: 155px;
    box-sizing: border-box;
  }

  /* Box-name styled with Pinyon Script per guidelines */
  .box-name {
    font-family: var(--font-script) !important;
    font-size: max(6.8cqw, 25px) !important;
    font-weight: normal !important;
    text-transform: none !important;
    color: var(--text-main);
    margin: 0;
    line-height: 1.1;
    white-space: nowrap !important;
  }

  /* Box-place styled with IvyOra Text, Regular per guidelines */
  .box-place {
    font-family: var(--font-serif) !important;
    font-size: max(3.2cqw, 12px) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    line-height: 1.3;
    margin: 0;
    color: var(--text-main);
    opacity: 0.9;
  }

  .text-link {
    font-family: var(--font-serif);
    font-size: max(3cqw, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-main);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    transition: color 0.3s;
  }

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

  /* 4 — GIFT REGISTRY SECTION (Inside the arch) */
  .gift-section {
    position: relative;
    width: 100%;
    aspect-ratio: 1572 / 2792; /* matches Gift registry section.webp proportions */
    box-sizing: border-box;
    overflow: hidden;
    background: url('assets/Gift registry section.webp') center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 48cqw; /* Lowered title below the chandelier */
  }

  .gift-content-overlay {
    width: 80cqw;
    height: 120cqw; /* Proportional to the section height */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3.5cqw;
    box-sizing: border-box;
  }

  .gift-title {
    margin-top: 30px !important;
  }

  p.gift-text {
    font-family: 'IvyOra Text', 'Cormorant Garamond', Georgia, serif !important;
    font-size: max(3cqw, 11px);
    font-weight: 400 !important; /* Regular */
    line-height: 1.5;
    color: var(--text-main);
    text-transform: none;
    margin: 0;
    letter-spacing: normal;
    text-align: center;
  }

  .registry-card {
    background: transparent; /* Flat presentation matching details */
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 1.5cqw 0;
    width: 100%;
  }

  .registry-card-name {
    font-family: var(--font-serif);
    font-size: max(3.4cqw, 13px);
    font-weight: 500; /* Medium weight */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    margin-bottom: 1.5cqw;
  }

  .registry-card-info {
    font-family: var(--font-serif);
    font-size: max(3.4cqw, 13px);
    font-weight: bold;
    line-height: 1.5;
    color: var(--text-main);
    margin: 0;
    letter-spacing: normal;
  }

  /* 5 — RSVP SECTION */
  .rsvp-section {
    padding: 12cqw 6cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .rsvp-container {
    width: 100%;
  }

  .rsvp-deadline {
    font-family: var(--font-serif);
    font-size: max(3.5cqw, 14px);
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin: 0 0 8cqw 0;
    text-transform: uppercase;
  }
  
  .rsvp-deadline strong {
    font-weight: 700;
  }

  /* Hiding redundant headers injected by rsvp-engine */
  .rsvp-inline h2 {
    display: none !important;
  }

  .rsvp-contact {
    font-family: var(--font-serif);
    font-size: max(3.2cqw, 12px);
    font-weight: 300;
    letter-spacing: normal;
    text-align: center;
    padding: 0 4cqw;
    margin-top: 8cqw;
  }

  /* 6 — CLOSING SECTION */
  .closing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqw;
    margin-top: auto; /* Push down to sit exactly in the base of the columns */
    margin-bottom: 4cqw; /* Align text with the pedestal bases */
    width: 100%;
  }

  .closing-monogram {
    width: 18cqw; /* Smaller and elegant, prevents container overflow */
    height: auto;
    display: block;
  }

  .closing-names {
    font-family: var(--font-serif);
    font-size: max(4cqw, 15px);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-main);
  }

  .closing-date {
    font-family: var(--font-serif);
    font-size: max(2.6cqw, 10px);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-main);
    opacity: 0.8;
  }
}

/* ─── DYNAMIC INTRO OVERLAY (Injected via JS) ─── */
#lb-intro {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.6s ease;
}

#lb-intro.lb-hide {
  opacity: 0;
  pointer-events: none;
}

#lb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-spinner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(201, 154, 113, 0.2);
  border-radius: 50%;
  border-top-color: var(--text-main);
  animation: lb-spin 1s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 10002;
}

.lb-spinner.show {
  opacity: 1;
}

@keyframes lb-spin {
  to { transform: rotate(360deg); }
}

.lb-tap-to-open {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-main);
  z-index: 10002;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.lb-tap-to-open.lb-fade {
  opacity: 0;
  transform: translate(-50%, -25%);
}

/* ─── MOBILE SCROLL INDICATOR ─── */
.hero-scroll-indicator {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
}

.pill-shape {
  width: 22px;
  height: 38px;
  border: 1px solid var(--text-main);
  border-radius: 11px;
  position: relative;
  background: rgba(252, 249, 246, 0.45);
  backdrop-filter: blur(2px);
}

.pill-dot {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--text-main);
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  animation: pill-dot-drift 2s infinite ease-in-out;
}

.hero-scroll-indicator .scroll-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-main);
  white-space: nowrap;
  text-shadow: 0 0 4px var(--bg), 0 0 2px var(--bg);
}

@media (max-width: 599px) {
  .hero-scroll-indicator.visible {
    display: flex !important;
    animation: indicator-fade-in 0.8s forwards, indicator-drift 2.2s infinite ease-in-out 0.8s;
  }
}

@keyframes pill-dot-drift {
  0% { top: 7px; opacity: 1; }
  50% { top: 24px; opacity: 0.35; }
  100% { top: 7px; opacity: 1; }
}

@keyframes indicator-fade-in {
  from { opacity: 0; }
  to { opacity: 0.95; }
}

@keyframes indicator-drift {
  0% { transform: translate3d(-50%, 0, 0); }
  50% { transform: translate3d(-50%, 8px, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ─── MUSIC TOGGLE BUTTON ─── */
.lb-music-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--text-main);
  border: 1px solid var(--text-main);
  z-index: 100005 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.5s, transform 0.3s;
}

.lb-music-btn.lb-music-visible {
  opacity: 0.85;
  pointer-events: auto !important;
}

.lb-music-btn:hover {
  transform: translate3d(0, 0, 0) scale(1.05);
  opacity: 1;
}

.lb-music-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--bg);
}

.lb-music-btn .lb-music-mute-line {
  stroke: var(--bg);
  stroke-width: 2;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  transition: stroke-dashoffset 0.3s;
}

.lb-music-btn.muted .lb-music-mute-line {
  stroke-dashoffset: 0;
}

/* ─── CUSTOM ALERT SYSTEM OVERRIDES ─── */
.hidden {
  display: none !important;
}

#custom-alert.hidden {
  display: none !important;
}

/* ─── CUSTOM RSVP UI ELEMENTS ─── */
.custom-rsvp-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(201, 154, 113, 0.2);
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.rsvp-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 24px;
  font-family: var(--font-serif);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-main);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s, border-bottom 0.3s;
  border-bottom: 2px solid transparent;
}

.rsvp-tab-btn.active {
  opacity: 1;
  border-bottom: 2px solid var(--text-main);
  font-weight: 700;
}

.rsvp-form-container {
  display: none;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--box-bg);
  padding: 24px;
  box-sizing: border-box;
  text-align: left;
}

.rsvp-form-container.active {
  display: block;
}

.rsvp-form-group {
  margin-bottom: 20px;
}

.rsvp-form-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin-bottom: 8px;
  font-weight: 700;
}

.rsvp-form-select,
.rsvp-form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(201, 154, 113, 0.4);
  background-color: var(--bg);
  color: var(--text-main);
  font-family: var(--font-serif);
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.rsvp-form-select:focus,
.rsvp-form-input:focus {
  border-color: var(--text-main);
}

.rsvp-guest-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.rsvp-submit-btn {
  width: 100%;
  padding: 16px;
  background-color: var(--text-main);
  color: var(--bg);
  border: none;
  font-family: var(--font-serif);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.rsvp-submit-btn:hover {
  background-color: var(--text-secondary);
}

/* Active buttons in custom forms */
.rsvp-btn-group {
  display: flex;
  gap: 8px;
}

.rsvp-choice-btn {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--text-main);
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s;
}

.rsvp-choice-btn.active {
  background-color: var(--text-main);
  color: var(--bg);
}

/* ─── RSVP MODAL DRAWER FALLBACK ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(201, 154, 113, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 100000;
}
.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 92vh;
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100001;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.modal-drawer.active {
  transform: translateY(0);
}

.drawer-head {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px 0;
}

.btn-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--text-main);
  cursor: pointer;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 28px 40px;
}

.step {
  display: none;
}
.step.active, .step.block {
  display: block;
}

.modal-drawer .btn {
  font-family: var(--font-serif) !important;
  font-size: max(3.1cqw, 12px) !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 4cqw;
  border: 1px solid var(--text-main) !important;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s ease;
  outline: none;
}

.modal-drawer .btn-fill {
  background-color: var(--text-main);
  color: var(--bg);
  box-shadow: 0 4px 10px rgba(201, 154, 113, 0.15);
}

.modal-drawer .btn-fill:hover {
  background-color: var(--text-secondary);
  border-color: var(--text-secondary) !important;
}

.modal-drawer .btn-fill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-drawer input[type="tel"] {
  border-bottom: 1px solid var(--text-main) !important;
  color: var(--text-main) !important;
}

/* ─── RESPONSIVE LAYOUT BREAKPOINTS ─── */
@media (min-width: 600px) {
  .hero {
    width: calc(100vw - var(--sbw, 0px)) !important;
    margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2) !important;
    margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2) !important;
    aspect-ratio: auto !important;
    min-height: 90vh !important;
    background-image: url('assets/Group 209_desktop.webp') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position-x: center !important;
    background-position-y: top; /* NO !important so GSAP can animate this on scroll */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .hero-video {
    display: none !important;
  }

  /* HTML Text overlay styling on desktop/PC */
  .hero-overlay-text {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 42% !important; /* Shifted up to move text towards the top */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    height: 78vh !important; /* Compressed vertical spread to group text in the upper/middle card area */
    width: 90% !important;
    max-width: 720px !important; /* Slightly wider to accommodate larger text elegantly */
    z-index: 2;
    padding: 4% 8% 4%; /* Smaller top/bottom padding to let text sit higher */
    color: var(--text-main);
    font-family: var(--font-serif);
    text-align: center;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .hero-bible-ref {
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 2px;
  }

  .hero-bible-text {
    font-size: 17px !important;
    font-weight: 400;
    letter-spacing: 0.05em;
  }

  .hero-parents-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 25px;
    font-size: 17px !important;
    line-height: 1.4;
    font-weight: 400;
  }

  .hero-parents-group, .hero-parents-bride {
    width: 45%;
    text-align: center;
  }

  .hero-request {
    font-size: 15px !important;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin-top: 30px;
    font-weight: 400;
  }

  .hero-couple-names {
    font-family: var(--font-script) !important;
    font-size: 105px !important;
    line-height: 1.05;
    margin-top: 20px;
    margin-bottom: 10px;
    display: block !important;
    text-align: center;
    position: relative;
    width: 100%;
  }

  .hero-couple-names .name-charbel {
    display: inline-block !important;
    margin-right: 20px !important;
  }

  .hero-couple-names .name-amp {
    display: inline-block !important;
    font-size: 65px !important;
    margin: 0 !important;
    vertical-align: middle;
  }

  .hero-couple-names .name-cynthia {
    display: block !important;
    margin-left: 110px !important;
    margin-top: -20px !important;
  }

  .hero-details {
    margin-top: auto;
    width: 100%;
  }

  .hero-date {
    font-size: 17px !important;
    margin: 15px 0 10px;
    font-weight: 400;
  }

  .hero-venue-script {
    font-family: var(--font-script) !important;
    font-size: 46px !important;
    margin: 5px 0;
    line-height: 1.1;
  }

  .hero-venue-sub {
    font-size: 16px !important;
    margin: 2px 0 12px;
    opacity: 0.85;
    font-weight: 400;
  }

  .hero-dinner-lead {
    font-size: 16px !important;
    font-style: italic;
    margin: 12px 0 5px;
    opacity: 0.9;
  }

  .hero-dinner-time {
    font-size: 16px !important;
    margin: 5px 0 2px;
    font-weight: 400;
  }

  /* Non-mobile styling fixes to ensure boxes fit text and spacing is premium */
  .info-box {
    height: auto !important;
    min-height: 140px !important;
    max-height: none !important;
    padding: 24px 20px !important;
    gap: 12px !important;
  }

  .box-name {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .box-place {
    font-size: 15px !important;
  }

  .text-link {
    font-size: 13px !important;
  }

  /* Lower the gift text slightly on PC */
  .gift-section {
    padding-top: 52cqw !important;
  }

  p.gift-text {
    margin-top: 15px !important;
    font-size: 18px !important; /* Made big again as requested */
  }
}

@media (min-width: 768px) {
  .info-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10cqw;
  }
  
  .info-pair > .info-section {
    width: 100%;
    margin: 0;
  }
}