/* ==========================================================================
   Khawaja & Caiti — Wedding Site
   Shared design system: palette, type, nav, buttons, editorial sections
   ========================================================================== */

:root{
  --ink:#1c1a17;
  --ink-soft:#3a352e;
  --ivory:#faf6ef;
  --paper:#f3ecdf;
  --maroon:#6e1423;
  --maroon-deep:#4a0e18;
  --gold:#b6903f;
  --gold-light:#e8d3a0;
  --line:#e3d9c6;
  --line-on-dark:rgba(250,246,239,.32);
  --white:#ffffff;

  --glass-bg:rgba(20,16,15,.42);
  --glass-border:rgba(232,211,160,.5);

  --champagne:#e9d9b6;
  --champagne-deep:#d6bf90;
  --champagne-line:rgba(28,26,23,.16);

  --font-display:"Didot","Bodoni MT","Big Caslon","Palatino Linotype",Georgia,serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:108%;}
section[id]{scroll-margin-top:90px;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--ink);margin:0;text-wrap:balance;}
p{margin:0;}
.container{max-width:1240px;margin:0 auto;padding:0 6vw;}

/* ---------- Photo placeholder block ----------
   Stands in for real photography until it's added.
   Swap any .ph element for an <img> tag pointing at /images/... */
.ph{
  position:relative;
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(182,144,63,.3), transparent 55%),
    radial-gradient(120% 140% at 85% 90%, rgba(110,20,35,.22), transparent 55%),
    linear-gradient(135deg,#d9cdb8 0%,#c9b79a 45%,#b9a583 100%);
  display:flex;align-items:flex-end;justify-content:flex-start;
  color:rgba(28,26,23,.55);
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--font-body);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(250,246,239,.82);
  padding:.5rem .8rem;
  margin:1rem;
}

/* Real photo fill — drop-in replacement for .ph once a photo exists */
img.fill{width:100%;height:100%;object-fit:cover;display:block;}
.page-banner img.fill, .split .media img.fill{position:absolute;inset:0;}
.gallery-grid img.fill{aspect-ratio:1;}
.gallery-grid .tall img.fill{aspect-ratio:auto;}
.ph:has(img.fill)::after{content:none;}
.ph:has(img.fill){background:none;}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
}

/* ---------- Nav ---------- */
header.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.5rem 6vw;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg, rgba(28,26,23,.55), transparent);
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
header.site-nav.solid{
  background:var(--ivory);
  padding:1rem 6vw;
  box-shadow:0 1px 0 var(--line);
}
.logo{display:flex;align-items:center;gap:.6rem;}
.logo svg{width:34px;height:34px;flex:none;}
.logo .word{
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ivory);
  transition:color .35s ease;
}
header.site-nav.solid .logo .word{color:var(--ink);}
header.site-nav .logo svg .ring{stroke:var(--ivory);transition:stroke .35s ease;}
header.site-nav.solid .logo svg .ring{stroke:var(--ink);}
header.site-nav .logo svg .mono{fill:var(--gold);}

nav.links{display:flex;align-items:center;gap:1.9rem;}
nav.links a{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ivory);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .35s ease, border-color .2s ease;
  white-space:nowrap;
}
header.site-nav.solid nav.links a{color:var(--ink-soft);}
nav.links a:hover, nav.links a[aria-current="page"]{border-color:var(--gold);color:var(--gold-light);}
header.site-nav.solid nav.links a:hover, header.site-nav.solid nav.links a[aria-current="page"]{color:var(--maroon);border-color:var(--maroon);}

.nav-right{display:flex;align-items:center;gap:1.6rem;}
.btn-cta{
  border:1px solid var(--ivory);
  color:var(--ivory);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.6rem 1.3rem;
  transition:all .3s ease;
  white-space:nowrap;
}
.btn-cta:hover{background:var(--maroon);color:var(--ivory);border-color:var(--maroon);}
header.site-nav.solid .btn-cta{border-color:var(--ink);color:var(--ink);}
header.site-nav.solid .btn-cta:hover{background:var(--maroon);color:var(--ivory);border-color:var(--maroon);}

.nav-toggle{display:none;background:none;border:0;padding:0;cursor:pointer;}
.nav-toggle svg{width:24px;height:24px;stroke:var(--ivory);transition:stroke .35s ease;}
header.site-nav.solid .nav-toggle svg{stroke:var(--ink);}

.mobile-cta{display:none;}

@media (max-width:980px){
  nav.links{
    position:fixed;inset:0;top:0;
    background:var(--ink);
    flex-direction:column;justify-content:center;gap:2rem;
    transform:translateX(100%);
    transition:transform .35s ease;
  }
  nav.links.open{transform:translateX(0);}
  nav.links a{color:var(--ivory);font-size:.9rem;}
  .nav-right .links-only{display:none;}
  .nav-toggle{display:block;z-index:110;}
  header.site-nav.solid .nav-toggle svg{stroke:var(--ink);}
  header.site-nav.solid .nav-toggle[aria-expanded="true"] svg{stroke:var(--ivory);}
  header.site-nav.solid nav.links.open a{color:var(--ivory);}
  header.site-nav.solid nav.links.open a:hover,
  header.site-nav.solid nav.links.open a[aria-current="page"]{color:var(--gold-light);border-color:var(--gold);}
  .mobile-cta{display:block;color:var(--gold-light) !important;border-color:var(--gold-light) !important;margin-top:.6rem;padding:.6rem 1.4rem;border:1px solid var(--gold-light);}
}

/* ---------- Buttons ---------- */
.btn-outline{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid var(--ink);
  background:none;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.7rem;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.9rem 1.7rem;
  cursor:pointer;
  transition:all .3s ease;
}
.btn-outline:hover{background:var(--maroon);color:var(--ivory);border-color:var(--maroon);}
.btn-outline.on-dark{border-color:var(--ivory);color:var(--ivory);}
.btn-outline.on-dark:hover{background:var(--maroon);color:var(--ivory);border-color:var(--maroon);}
.btn-outline.on-gold{border-color:var(--ivory);color:var(--ivory);}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;
  overflow:hidden;
  padding:15vh 6vw 6vh;
  gap:3rem;
}
.hero .ph, .hero img.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero img.hero-photo{background:linear-gradient(150deg, var(--maroon-deep) 0%, var(--ink) 55%, var(--maroon) 100%);}
.hero .ph::after{display:none;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,16,15,.55) 0%, rgba(20,16,15,.22) 30%, rgba(20,16,15,.22) 65%, rgba(20,16,15,.5) 100%);
  z-index:1;
}
.hero-title{position:relative;z-index:2;color:var(--ivory);text-shadow:0 2px 16px rgba(0,0,0,.55);}
.hero-title .eyebrow{
  color:var(--gold-light);
  font-size:1rem;
}
.hero-title h1{
  font-size:clamp(2.6rem,7vw,5.4rem);
  color:var(--ivory);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:1.1rem 0 .5rem;
}
.hero-title .sub{
  font-family:var(--font-body);
  font-size:1.15rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ivory);
  opacity:.9;
}

/* ---------- Frosted glass panel ---------- */
.frosted-panel{
  position:relative;z-index:2;
  background:var(--glass-bg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:2.4rem 3.2rem;
  display:flex;flex-direction:column;align-items:center;gap:1.7rem;
  max-width:560px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.5);
}
.frosted-panel .eyebrow{color:var(--gold-light);}

.countdown{
  display:flex;justify-content:center;gap:2.6rem;
}
.countdown div{text-align:center;}
.countdown .num{
  font-family:var(--font-display);
  font-size:2.3rem;color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
.countdown .lbl{
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);opacity:.8;
}

/* ---------- Hero action buttons + "Add to Calendar" dropdown ---------- */
.hero-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
}
.calendar-add{
  position:relative;
}
.calendar-add button{
  font-family:inherit;background:none;cursor:pointer;
}
.calendar-menu{
  position:fixed;
  transform:translateX(-50%);
  min-width:200px;
  background:var(--ink);
  border:1px solid var(--gold);
  border-radius:3px;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.55);
  padding:.5rem;
  display:flex;flex-direction:column;
  z-index:300;
}
.calendar-menu[hidden]{display:none;}
.calendar-menu a{
  padding:.7rem .9rem;
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--ivory);
  border-radius:2px;
  white-space:nowrap;
}
.calendar-menu a:hover{background:var(--maroon);color:var(--ivory);}

/* ---------- Page banner (inner pages) ---------- */
.page-banner{
  position:relative;min-height:56vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.page-banner .ph{position:absolute;inset:0;}
.page-banner .ph::after{display:none;}
.page-banner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,18,15,.35), rgba(20,18,15,.42));
  z-index:1;
}
.page-banner-content{position:relative;z-index:2;color:var(--ivory);text-shadow:0 2px 16px rgba(0,0,0,.55);}
.page-banner-content h1{
  color:var(--ivory);
  font-size:clamp(2.2rem,5vw,3.6rem);
  letter-spacing:.08em;text-transform:uppercase;
  margin:.8rem 0 0;
}

/* ---------- Editorial split section ---------- */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:70vh;
}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
.split .media{position:relative;min-height:420px;}
.split .media .ph{position:absolute;inset:0;}
.split .text{
  display:flex;flex-direction:column;justify-content:center;
  padding:5vh 6vw;gap:1.4rem;
}
.split .text h2{font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:.04em;text-transform:uppercase;color:var(--maroon);}
.split .text p{max-width:52ch;font-size:1.08rem;color:var(--ink-soft);}
@media (max-width:900px){
  .split, .split.reverse{grid-template-columns:1fr;direction:ltr;}
  .split .media{min-height:340px;}
}

/* ---------- Dark section ---------- */
.section-dark{
  background:
    linear-gradient(180deg, rgba(20,18,15,.35), rgba(20,18,15,.42)),
    radial-gradient(120% 140% at 15% 10%, rgba(182,144,63,.3), transparent 55%),
    radial-gradient(120% 140% at 85% 90%, rgba(110,20,35,.22), transparent 55%),
    linear-gradient(135deg,#d9cdb8 0%,#c9b79a 45%,#b9a583 100%);
  color:var(--ivory);
  padding:6rem 6vw;
}
.section-dark .eyebrow{color:var(--gold-light);}
.section-dark h2{color:var(--ivory);font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:.04em;text-transform:uppercase;margin-top:.7rem;}
.section-dark p{color:rgba(250,246,239,.78);max-width:60ch;}

/* ---------- Content sections (light) ---------- */
section.content{padding:6rem 6vw;max-width:1240px;margin:0 auto;}
section.content.tight{padding-top:4rem;padding-bottom:4rem;}
.section-head{margin-bottom:2.6rem;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:.03em;text-transform:uppercase;margin-top:.6rem;}
.section-head p{margin-top:1rem;max-width:60ch;color:var(--ink-soft);font-size:1.05rem;}
.rule{width:64px;height:1px;background:var(--gold);margin:1.2rem 0;}
.rule.center{margin-left:auto;margin-right:auto;}

/* ---------- Info card grid ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
@media (max-width:820px){.grid3{grid-template-columns:1fr;}.grid2{grid-template-columns:1fr;}}
.food-category{
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:2.8rem 0 1.2rem;
}
.food-category:first-of-type{margin-top:0;}
.info-card{
  border-top:2px solid var(--maroon);
  padding-top:1.4rem;
}
.info-card .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);}
.info-card h3{font-size:1.2rem;margin:.6rem 0 .4rem;letter-spacing:.02em;}
.info-card p{font-size:.96rem;color:var(--ink-soft);}

/* ---------- Weather ---------- */
.weather-row{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;}
.day-card{
  flex:0 0 128px;text-align:center;
  border:1px solid var(--line);background:var(--white);
  padding:1.3rem .7rem;
}
.day-card .d{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.day-card .date{font-size:.68rem;color:#9a917f;margin-top:.15rem;}
.day-card .icon{font-size:1.9rem;margin:.7rem 0;}
.day-card .hi{font-family:var(--font-display);font-size:1.2rem;color:var(--ink);}
.day-card .lo{font-size:.8rem;color:#9a917f;}
.day-card .desc{font-size:.66rem;color:#9a917f;margin-top:.3rem;text-transform:capitalize;}
.weather-status{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.4rem;}
.weather-status.err{color:var(--maroon);}

/* ---------- Gallery (home teaser grid) ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.gallery-grid .ph{aspect-ratio:1;}
.gallery-grid .ph.tall{grid-row:span 2;aspect-ratio:auto;}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Masonry gallery (full gallery page) ----------
   CSS multi-column layout: images keep their natural aspect ratio and
   flow into whichever column has room, so new photos just drop in —
   no manual row-span bookkeeping needed. */
.masonry{column-count:3;column-gap:1rem;}
.masonry-item{
  break-inside:avoid;
  margin-bottom:1rem;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 10px 24px -16px rgba(28,26,23,.35);
  transition:box-shadow .25s ease, transform .25s ease;
}
.masonry-item:hover{box-shadow:0 16px 32px -14px rgba(28,26,23,.45);transform:translateY(-2px);}
.masonry-item img{width:100%;height:auto;display:block;}
@media (max-width:900px){.masonry{column-count:2;}}
@media (max-width:560px){.masonry{column-count:1;}}

/* ---------- Upload ---------- */
.upload-box{
  border:1px dashed var(--gold);
  padding:4rem 2rem;text-align:center;background:var(--white);
}
.upload-box.dragover{background:var(--paper);}
.upload-box input[type="file"]{display:none;}
.upload-box .hash{
  display:block;margin-top:.8rem;color:var(--gold);
  font-size:.85rem;letter-spacing:.03em;
}
#file-list{margin-top:1.6rem;text-align:left;max-width:520px;margin-left:auto;margin-right:auto;}
#file-list li{font-size:.85rem;color:var(--ink-soft);padding:.3rem 0;border-bottom:1px solid var(--line);}
.form-note{font-size:.78rem;color:#9a917f;margin-top:1rem;}

/* ---------- Product / registry cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
@media (max-width:820px){.card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}
.product-card .ph{aspect-ratio:4/5;margin-bottom:1rem;}
.product-card h3{font-size:1.05rem;letter-spacing:.02em;margin-bottom:.3rem;}
.product-card .price{font-size:.85rem;color:var(--maroon);margin-bottom:.9rem;}

/* ---------- Definition tooltip ---------- */
.tooltip{
  position:relative;
  display:inline-block;
  border-bottom:1px dotted var(--maroon);
  cursor:help;
}
.tooltip-bubble{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translate(-50%, 4px);
  width:250px;
  max-width:70vw;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--font-body);
  font-weight:400;
  font-size:.8rem;
  line-height:1.55;
  letter-spacing:normal;
  text-transform:none;
  text-align:left;
  padding:.9rem 1.05rem;
  border:1px solid var(--gold);
  border-radius:3px;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:30;
}
.tooltip-bubble::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:var(--ink);
}
.tooltip:hover .tooltip-bubble,
.tooltip:focus .tooltip-bubble,
.tooltip.active .tooltip-bubble{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
@media (max-width:560px){
  .tooltip-bubble{left:0;transform:translate(0, 4px);}
  .tooltip-bubble::after{left:20px;transform:none;}
  .tooltip:hover .tooltip-bubble,
  .tooltip:focus .tooltip-bubble,
  .tooltip.active .tooltip-bubble{transform:translate(0, 0);}
}

/* ---------- Footer ---------- */
footer.site-footer{
  background:linear-gradient(150deg, var(--maroon-deep) 0%, var(--ink) 55%, var(--maroon) 100%);
  color:var(--ivory);
  padding:5rem 6vw 2.5rem;
}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:3rem;
  padding-bottom:3rem;border-bottom:1px solid var(--line-on-dark);
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);
  margin-bottom:1.1rem;font-family:var(--font-body);font-weight:400;
}
.footer-grid a, .footer-grid p{display:block;font-size:.92rem;color:rgba(250,246,239,.8);margin-bottom:.6rem;}
.footer-grid a:hover{color:var(--gold-light);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding-top:2rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,246,239,.55);
}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;}
.center{text-align:center;}