/* ================================
   Wedding Theme — refined & higher-contrast
   ================================ */

/* === Wedding palette (light + dark) === */
:root{
  --bg:#f7f3ee; --text:#2b2a28; --light:#fbf8f4; --border:#d2c6b6;

  /* Darkened “champagne” family for better text contrast */
  --champagne-1:#d8ceb8;
  --champagne-2:#bfae90;
  --champagne-3:#7a6a54; /* used by old text; kept darker just in case */

  --soft-blush:#d9a99c;
  --sage-1:#8ea08a; --sage-2:#2f4a3e;

  --accent:var(--sage-2); --accent-light:var(--sage-1);
  --gold:#c4a36f; --gold-2:#a9854e;

  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* NEW: darker secondary text color to replace light champagne text */
  --text-weak:#5a5446;

  /* Rhythm & radii & sticky offset */
  --radius-lg:20px; --radius-md:16px; --radius-sm:12px;
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem;
  --sticky-offset:68px;

  /* Nav squeeze controls */
  --menu-gap:1.25rem;
  --menu-font:1rem;
  --menu-pad-x:12px;
  --menu-toggle-reserve:56px; /* px reserved space at right for hamburger */
}
[data-theme="dark"]{
  --bg:#191917; --text:#efece7; --light:#23221f; --border:#3e3a33;

  /* Dark-mode counterparts still readable */
  --champagne-1:#b4a891;
  --champagne-2:#9a8a6f;
  --champagne-3:#cbbfa9;

  --soft-blush:#caa89c;
  --sage-1:#bac8b7; --sage-2:#d9e4d7;
  --gold:#c9b07b; --gold-2:#a78354;

  /* NEW: darker-luminance “weak” text for dark mode */
  --text-weak:#cfc7ba;
}

/* === Base === */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Cormorant Garamond',serif; background:#fff; color:var(--text); line-height:1.6; overflow-x:hidden;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
::selection{ background: color-mix(in oklab, var(--accent) 18%, transparent); }
img, video{max-width:100%;height:auto;display:block}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:3px solid color-mix(in oklab, var(--accent) 45%, transparent); outline-offset:2px; border-radius:8px; }
[id]{ scroll-margin-top: var(--sticky-offset); }

/* === Layout helpers === */
.container{ max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.section{ padding:5rem 0; position:relative; }
.section.alt{ background:var(--light); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.center{ text-align:center; }

/* DARKER helper text */
.muted,.subtle{ color:var(--text-weak); }

.mt-2{ margin-top: var(--space-3); }
.mt-3{ margin-top: var(--space-5); }

/* === Headings === */
.section-title{
  font-family:'Playfair Display',serif; font-size:3rem; margin:0 0 2rem;
  text-align:center; color:var(--accent); font-weight:700; letter-spacing:.02em;
}
/* DARKER subhead */
.section-sub{ text-align:center; color:var(--text-weak); margin-bottom:2.25rem; }

/* === Buttons === */
.btn{
  display:inline-block; padding:.75rem 1.1rem; border-radius:999px;
  border:1px solid var(--border); color:#223329;
  background:linear-gradient(135deg, var(--champagne-1), var(--champagne-2));
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 14px 36px rgba(0,0,0,.12); text-decoration:none; }
.btn:active{ transform: translateY(0); }
.btn + .btn{ margin-left:.6rem; }

/* =========================
   Header / hero
   ========================= */
header{
  position:relative; height:100vh; overflow:hidden; text-align:center; color:#fff;
  display:flex; align-items:center; justify-content:center; isolation:isolate;
}
header::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(47,74,62,.55), rgba(47,74,62,.15) 40%, rgba(0,0,0,0) 70%),
    radial-gradient(800px 400px at 70% 30%, rgba(201,171,122,.25), transparent 60%);
}
.bg-video-yt{
  position:absolute; top:50%; left:50%; width:100vw; height:56.25vw;
  min-width:177.78vh; min-height:100%; transform:translate(-50%,-50%);
  pointer-events:none; border:0; z-index:-2;
}
.header-content{ position:relative; padding:0 2rem; animation:fadeInUp 1.2s ease; max-width:800px; }

.logo-svg{
  width:150px; height:auto; display:block; margin:0 auto 2rem;
  filter: drop-shadow(0 0 22px rgba(201,171,122,.55));
}
header h1{
  font-family:'Playfair Display',serif; font-size:clamp(2.75rem,6vw,4.5rem);
  letter-spacing:3px; margin-bottom:1rem; text-shadow:0 2px 22px rgba(0,0,0,.35);
}
.date-location{ font-size:1.3rem; margin-bottom:2rem; font-weight:300; opacity:.95; }

/* =========================
   Menubar (sticky) + responsive hamburger
   ========================= */
.menubar{
  position: sticky; top:0; z-index:1000;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(247,243,238,.9); backdrop-filter: blur(8px);
}
[data-theme="dark"] .menubar{ background:rgba(25,25,23,.85); }

.menubar .menu-wrap{
  display:flex; align-items:center; justify-content:center;
  gap:.25rem .5rem; padding:.65rem 1rem; position:relative;
  min-height: var(--sticky-offset);
  /* Reserve space at right for hamburger so links never sit under it */
  padding-right: calc(1rem + var(--menu-toggle-reserve));
}

#primary-menu.menu-list{
  display:flex !important; list-style:none;
  gap:var(--menu-gap); align-items:center;
  flex-wrap:nowrap !important; white-space:nowrap !important;
  font-size:var(--menu-font);
  max-width: calc(100% - var(--menu-toggle-reserve)); /* keep last link visible */
  margin-right: var(--menu-toggle-reserve);
  overflow:visible;
}
.menu-link{
  display:inline-block; padding:.6rem .9rem; border-radius:999px; text-decoration:none;
  color:var(--accent); border:1px solid transparent; font-family:'Playfair Display',serif;
  transition: background .25s ease, border-color .25s ease;
}
.menu-link:hover{ background:var(--light); border-color:var(--border); text-decoration:none; }
.menu-link[aria-current="page"]{
  background:linear-gradient(135deg, var(--champagne-1), var(--champagne-2));
  color:#1f3029; border-color:var(--border);
}

.menu-ink{
  position:absolute; left:0; bottom:-1px; height:3px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius:2px; box-shadow:0 1px 6px rgba(0,0,0,.06);
  transition: transform .35s ease, width .35s ease, opacity .2s ease; opacity:.95;
}

/* Hamburger pinned right */
.menu-toggle{
  display:none; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:42px; height:36px; border:1px solid var(--border); border-radius:10px; background:var(--light);
  cursor:pointer; z-index:5;
}
.menu-toggle span{ position:absolute; left:9px; right:9px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s, top .2s; }
.menu-toggle span:nth-child(1){ top:11px; } .menu-toggle span:nth-child(2){ top:17px; } .menu-toggle span:nth-child(3){ top:23px; }

/* Compact (drawer) */
.menubar.compact .menu-toggle{ display:inline-block; }
.menubar.compact .menu-list{
  position:absolute; left:0; right:0; top:100%;
  background:var(--light); border-bottom:1px solid var(--border); box-shadow:0 10px 24px rgba(0,0,0,.08);
  display:none; flex-direction:column; padding:.75rem 1rem; max-width:100%; margin-right:0;
}
.menubar.compact.open .menu-list{ display:flex; }
.menubar.compact .menu-ink{ display:none; }

/* Hamburger → X */
.menubar.open .menu-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menubar.open .menu-toggle span:nth-child(2){ opacity:0; }
.menubar.open .menu-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Slightly tighter link padding so we can fit more before collapsing */
#primary-menu .menu-link{ padding-inline:.55rem; letter-spacing:.01em; }

/* =========================
   Pages
   ========================= */
main#pages{ min-height:60vh; }
.page{ display:block; }

/* =========================
   Countdown (single line on mobile)
   ========================= */
.countdown-section{ padding:6rem 2rem; max-width:1000px; margin:auto; animation:fadeInUp .8s ease; }
.countdown{
  font-family:'Playfair Display',serif; font-size:2.25rem;
  background:linear-gradient(135deg, var(--champagne-1), var(--champagne-2));
  padding:2rem; border-radius:var(--radius-lg); text-align:center; max-width:600px; margin:0 auto;
  color:#1f3029; box-shadow:var(--shadow); border:2px solid var(--border); position:relative; overflow:hidden;
}
.countdown::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(201,171,122,.28), transparent);
  animation:shimmer 3s infinite;
}
#countdown-timer{ display:flex; justify-content:center; align-items:baseline; gap:.75rem; white-space:nowrap; }
#countdown-timer > span{ display:inline-block; text-align:center; margin:0 10px; min-width:80px; }
#countdown-timer .unit{ display:block; font-size:.42em; letter-spacing:.12em; text-transform:uppercase; color:var(--text-weak); }

/* =========================
   Our Story
   ========================= */
.story-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
.story-figure{
  margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow); background:var(--light); aspect-ratio:4/3;
}
.story-img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3; }
.photo-fallback{
  display:grid; place-items:center; aspect-ratio:4/3;
  background:
    radial-gradient(800px 400px at 60% 20%, rgba(201,171,122,.25), transparent 60%),
    radial-gradient(1000px 500px at 20% 80%, rgba(169,182,161,.25), transparent 60%);
  color:#fff; position:relative;
}
.photo-fallback::after{
  content:"G & S"; font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,6vw,4rem); letter-spacing:.15em; text-shadow:0 6px 28px rgba(0,0,0,.35);
}
.story-copy p{ margin-bottom:1rem; }
.dropcap:first-letter{
  font-family:'Playfair Display',serif; float:left; font-size:3.2rem; line-height:1;
  padding:.15rem .4rem 0 0; color:var(--accent);
}

/* =========================
   Timeline (horizontal)
   ========================= */
.tl{ list-style:none; padding:0; margin:1rem 0 0 0; position:relative; }
.tl-horizontal{
  position:relative; display:flex; justify-content:center; gap:2rem; padding-top:.5rem;
}
.tl-horizontal::before{
  content:''; position:absolute; left:5%; right:5%; top:28px; height:2px; background:var(--border); z-index:0;
}
.tl-item{ position:relative; z-index:1; max-width:140px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.tl-icon{
  width:44px; height:44px; position:relative; z-index:2; display:grid; place-items:center;
  margin-bottom:.5rem; background:var(--light); border-radius:50%; border:1px solid var(--border); box-shadow:var(--shadow); font-size:22px; line-height:1;
}
.tl-body time{ font-family:'Playfair Display',serif; font-weight:700; color:var(--accent); display:block; margin-bottom:.25rem; }

/* =========================
   Travel & Stay
   ========================= */
.ww-band-sage{
  background:
    radial-gradient(800px 400px at 75% 15%, rgba(169,182,161,.16), transparent 60%),
    radial-gradient(800px 400px at 20% 85%, rgba(201,171,122,.10), transparent 60%),
    linear-gradient(135deg, rgba(233,225,209,.6), rgba(169,182,161,.18));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
#hotels .hotel-item{ text-align:center; padding:1.25rem 0; }
#hotels .hotel-item + .hotel-item{ border-top:1px solid var(--border); }
#hotels .cta-row{ justify-content:center; }

/* Map card */
.map-leaflet{
  width:100%; height:340px; border-radius:16px; box-shadow:var(--shadow);
  border:1px solid var(--border); overflow:hidden; background:#fff; margin-top:1rem;
}

/* Leaflet theming (text darker by default) */
.leaflet-container{ font-family:'Roboto', system-ui, -apple-system, Segoe UI, sans-serif; color:var(--text); }
.leaflet-control-attribution{ background:rgba(255,255,255,.92); border-radius:10px; padding:.2rem .45rem; border:1px solid var(--border); color:#444; }
.leaflet-popup-content-wrapper{ border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); color:var(--text); }

/* =========================
   Embed card (Immich)
   ========================= */
.embed-card{ position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.embed-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; padding:1px; background:linear-gradient(90deg, var(--gold), var(--gold-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; box-shadow:inset 0 0 60px rgba(201,171,122,.08);
}
.embed-header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); background:radial-gradient(600px 300px at 75% 10%, rgba(201,171,122,.12), transparent 60%); }
.embed-title{ font-family:'Playfair Display',serif; color:var(--accent); font-weight:700; }
.embed-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.embed-actions .btn{ padding:.55rem .9rem; color:#223329; }
.embed-frame{ width:100%; height:70vh; min-height:540px; border:0; display:block; background:#fff; }

/* =========================
   FAQ (keep darker text)
   ========================= */
.faq{ max-width:820px; margin:2rem auto 0; }
.faq details{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:1rem 1.1rem; margin-bottom:.85rem; box-shadow:var(--shadow); }
.faq summary{ list-style:none; cursor:pointer; font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--accent); display:flex; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq details[open]{ border-color:var(--champagne-2); }
.faq details>div{ margin-top:.65rem; color:var(--text); } /* ensure body text is dark */

/* =========================
   Gallery
   ========================= */
:root{ --gallery-gap-x:14px; --gallery-gap-y:12px; --gallery-column-width: 280px; }
.photo-gallery-grid { margin: 1.5rem auto 1rem auto; max-width: 1200px; padding: 0.5rem 0; }
@media (min-width: 721px) {
  .photo-gallery-grid { column-width: var(--gallery-column-width); column-gap: var(--gallery-gap-x); }
  .photo-gallery-grid img { width: 100%; display: block; object-fit: cover; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,0.13), 0 1.5px 8px rgba(0,0,0,0.08); margin: 0 0 var(--gallery-gap-y); break-inside: avoid; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; background: #fff; }
  .photo-gallery-grid img.collage-rot1 { transform: rotate(-1.5deg); }
  .photo-gallery-grid img.collage-rot2 { transform: rotate(1.5deg); }
  .photo-gallery-grid img.collage-rot3 { transform: rotate(-0.8deg); }
  .photo-gallery-grid img.collage-rot4 { transform: rotate(0.8deg); }
  .photo-gallery-grid img:hover { transform: scale(1.03) rotate(0deg) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.22); }
}
@media (max-width: 720px){
  .photo-gallery-grid{ display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding:1rem 0.5rem; justify-content:flex-start; }
  .photo-gallery-grid img{ height:58vh; width:auto; min-width:auto; flex:0 0 auto; border-radius:12px; scroll-snap-align:center; margin-right:8px; transform:none !important; object-fit:contain; background:transparent; }
}

/* Gallery fade-in (JS-controlled) */
.photo-gallery-grid img { opacity: 0; transition: opacity .18s ease; }
.photo-gallery-grid img.is-loaded { opacity: 1; }



.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; animation: fadeIn 0.2s; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.35); background: #fff; }

/* =========================
   Animations
   ========================= */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }
@keyframes shimmer{ 0%{left:-100%} 100%{left:100%} }

/* =========================
   Responsive
   ========================= */
@media (max-width: 992px){ .story-grid{ grid-template-columns:1fr; } }
@media (max-width: 768px){
  header h1{ font-size:3rem; }
  .date-location{ font-size:1.1rem; }
  .countdown-section{ padding:4rem 1.5rem; }
  .countdown{ font-size:2rem; padding:1.5rem; }
  .section-title{ font-size:2.5rem; }
  #countdown-timer > span{ min-width:64px; margin:0 6px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:0s !important; animation-iteration-count:1 !important; transition-duration:0s !important; scroll-behavior:auto !important; }
}

/* Safari masonry fixes */
@media (min-width: 721px) {
  .photo-gallery-grid {
    column-fill: initial;           /* Safari: better, non-stretched columns */
    contain: layout paint style;    /* isolate for faster reflows */
  }
  .photo-gallery-grid img {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    will-change: transform;         /* smoother hover transitions */
  }
}

/* Optional: fade-in to hide layout popping as images load */
.photo-gallery-grid img {
  opacity: 0;
  transition: opacity .18s ease;
}
.photo-gallery-grid img.is-loaded {
  opacity: 1;
}

/* Modal styles (site-themed) */
.modal-overlay{
  position:fixed; inset:0;
  display:flex;                 /* flex by default */
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:10050;
  opacity:0; pointer-events:none; /* visually hidden */
}

.modal-overlay.open{
  opacity:1; pointer-events:auto; /* visible & interactive when open */
}

/* Additional belt-and-suspenders: if "hidden" present, it's gone */
.modal-overlay[hidden]{ display:none !important; }

.modal-card{
  position:relative; width:min(92vw, 560px);
  background:var(--light, #fff); color:var(--text, #2b2a28);
  border:1px solid var(--border, #e7ddd2);
  border-radius:16px; box-shadow:var(--shadow, 0 10px 30px rgba(0,0,0,.18));
  padding:1.25rem 1.25rem 1rem; outline: none;
}
.modal-card h3{ margin:0 0 .5rem 0; font-family:'Playfair Display', serif; }
.modal-card p{ margin:.25rem 0 .75rem 0; line-height:1.6; }
.modal-actions{ display:flex; gap:.75rem; justify-content:flex-end; margin-top:1rem; }
.modal-close{ position:absolute; top:.5rem; right:.75rem; background:transparent; border:0; font-size:1.5rem; line-height:1; cursor:pointer; color:inherit; }
.btn.btn-secondary{ background:transparent; border:1px solid var(--border, #e7ddd2); color:inherit; }