/* Base: mobile-first reset and typography */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: #111; font-family: system-ui, Arial, sans-serif; }

/* Fluid type with clamp: scales between mobile and desktop limits */
:root {
  --fs-h1: clamp(1.75rem, 4vw, 3rem);     /* big title */
  --fs-h2: clamp(1.25rem, 3.5vw, 2rem);   /* section title */
  --fs-p:  clamp(1rem, 2.5vw, 1.125rem);  /* body */
  --container-pad: clamp(16px, 4vw, 32px);
  --button-pad-y: 0.9rem;
  --button-pad-x: 1.2rem;
  --radius: 12px;
}
h1 { font-size: var(--fs-h1); line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: var(--fs-h2); line-height: 1.2; margin: 0 0 .5rem; }
p, .small { font-size: var(--fs-p); line-height: 1.6; margin: .5rem 0; }

/* Make media flexible */
img, video { max-width: 100%; height: auto; display: block; } /* prevents overflow on small screens */ 

/* Buttons: larger tap area on mobile */
.button {
  display: inline-block;
  padding: var(--button-pad-y) var(--button-pad-x);
  background: #111; color: #fff; text-decoration: none; border-radius: 8px;
  transition: opacity .2s ease, transform .1s ease;
  min-width: 44px; min-height: 44px; /* mobile tap target */
}
.button:hover { opacity: 0.9; }
.button:active { transform: scale(0.98); }

/* Inputs: larger touch targets and font size */
input[type="text"], input[type="tel"], input[type="number"], input[type="search"] {
  font-size: 1.125rem; padding: .75rem .9rem; width: 100%;
  border: 1px solid #ddd; border-radius: var(--radius);
}

/* Code box container scales nicely */
.code-box {

  /* Layout & Spacing */
  padding: 2.5rem;
  border-radius: 20px; /* Softer, rounder corners */
  width: min(90vw, 420px);
  text-align: center;
  color: #fff; /* White text looks best on glass */
}

/* Light Glass Variant for RSVP Page (Readable Forms) */
.glass-light {
  background: rgba(106, 97, 97, 0.5); /* Much more opaque white */
  color: #333 !important; /* Force dark text */
}

/* Fix Headings inside Light Glass */
.glass-light h2 {
  color: #cdcbcb !important;
  text-shadow: 1 1px 2px #303030;
  font-weight: 600;
}

/* Fix Paragraphs/Small text */
.glass-light p, 
.glass-light .small, 
.glass-light label {
  color: #fff !important;
}

/* Fix Radio Options (The "Attending" buttons) */
.glass-light .option {
  background: #6a6161;
  border: 1px solid #ccc;
  color: #333;
}

/* Fix Input styling inside Light Glass (if any) */
.glass-light input {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
}
.glass-light input::placeholder {
  color: #999;
}

/* Update text inside to be readable on glass */
.code-box h2 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-weight: 300; /* Elegant thin font */
  letter-spacing: 1px;
}

.code-box .small {
  color: fff;
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* Update the Input Field to match the Glass theme */
.code-box input {
  background: rgba(0, 0, 0, 0.2); /* Darker semi-transparent input */
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 12px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.code-box input:focus {
  background: rgba(0, 0, 0, 0.4);
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 15px rgba(255,255,255,0.1);
}

.code-box input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}


/* Full-bleed hero with overlay */
.hero {
  position: relative;
  min-height: 100svh; /* safe viewport units for mobile toolbars */
  background: #cfcfcf center/cover no-repeat;
}
.hero.overlay::before {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35);
}

/* Ensure background video behaves on mobile */
.hero video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Centered content with mobile padding */
.centered {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--container-pad);
}

/* Fade utilities */
.fade-in { animation: fadeIn .6s ease both; }
.fade-out { animation: fadeOut .4s ease both; }
@keyframes fadeIn { from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
@keyframes fadeOut { from{opacity:1;} to{opacity:0;} }

/* RSVP options: wrap on small screens */
.option-row { display: flex; gap: .75rem; justify-content: center; margin-top: .75rem; flex-wrap: wrap; }
.option {
  display: flex; align-items: center; gap: .5rem; background: #fff; padding: .65rem .9rem;
  border-radius: 10px; border: 1px solid #ddd; cursor: pointer;
}

/* Simple white pages */
.white-page { min-height: 100svh; display: grid; place-items: center; background: #fff; color: #111;
  padding: var(--container-pad); text-align: center; }

/* Admin table: responsive */
.table-wrap { overflow: auto; padding: var(--container-pad); }
table { border-collapse: collapse; width: 100%; background: #fff; min-width: 560px; }
th, td { border: 1px solid #eee; padding: .6rem; text-align: left; }
th { background: #f7f7f7; }

/* Scroll transition (Welcome Page) - mobile-safe sticky */
.scroll-bg {
  position: sticky; top: 0; min-height: 100svh;
  background: #cfcfcf center/cover no-repeat;
  transition: opacity .5s ease;
  will-change: opacity; /* smoother on mobile */
}
.scroll-bg.second { background: #cfcfcf center/cover no-repeat; }
.spacer { height: 120svh; } /* ensures real scroll distance on phones */
.deadline { color: #fff; opacity: 0.9; margin-top: .5rem; }
.small { opacity: .85; }

/* Prevent common mobile sticky pitfalls */
html, body { overflow-x: hidden; } /* avoid side-scroll that can break sticky contexts */

/* Media queries for minor tweaks */
@media (min-width: 768px) {
  .option-row { gap: 1rem; }
  .code-box { width: min(88vw, 520px); }
}
@media (min-width: 1024px) {
  .table-wrap { padding: 24px; }
}

.fade-bg-container {
  position: relative;
  width: 100%;
  height: 100vh;        /* Single viewport area, both bgs stacked */
  overflow: hidden;
}
.fade-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100vh;
  background: #cfcfcf center/cover no-repeat;
  will-change: opacity;
  transition: opacity .5s;
}
.fade-bg1 { z-index: 1; }
.fade-bg2 { z-index: 2; opacity: 0; }
.centered {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(16px, 5vw, 48px);
}