/* ============================================================
   D-Day — shared header & footer (multi-page nav)
   ============================================================ */
:root{
  --dday-cream:#FFFBF6;
  --dday-green:#365635;
  --dday-ink:#3D3E36;
}

/* ---------- Header ---------- */
.dday-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  width:min(550px,100%); margin-inline:auto;
  display:flex; align-items:center; justify-content:center; gap:30px;
  height:60px; padding:0 24px; box-sizing:border-box;
  background:rgba(255,251,246,0.96);
  -webkit-backdrop-filter:saturate(120%) blur(6px); backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(54,86,53,0.18);
}
.dday-nav{ display:flex; align-items:center; gap:24px; }
.dday-nav a{
  font-family:"garet", sans-serif; text-decoration:none;
  color:var(--dday-ink); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease; white-space:nowrap;
}
.dday-nav a:hover{ color:var(--dday-green); }
.dday-nav a.active{ color:var(--dday-green); border-bottom-color:var(--dday-green); }

.dday-nav-toggle{ display:none; }

/* push page content below the fixed header */
body{ padding-top:60px !important; margin:0 !important; }

/* ---------- Footer ---------- */
.dday-footer{
  max-width:550px; margin-left:auto; margin-right:auto;
  background:var(--dday-green); color:#fff;
  text-align:center; padding:56px 24px;
}
.dday-footer__sign-img{
  display:block; margin:0 auto;
  width:min(340px,80%); height:auto;
  /* recolor the green calligraphy to white */
  filter:brightness(0) invert(1);
}

/* ---------- Blank pages ---------- */
.dday-blank{ background:var(--dday-cream); }
.page-blank{ min-height:62vh; }

/* Keep the invitation column at a consistent 550px centred at every width
   (Elementor otherwise lets it go full-width in the 551-1024 range, which
   mismatched the fixed-width header). On phones it just fills the screen. */
.elementor-608688 .elementor-element.elementor-element-1b594093{
  width:100% !important; max-width:550px !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* Home closing photo: pin the "writing viahiztory" signature to the bottom
   (it overlapped the couple) and recolour it white. */
.elementor-608688 .elementor-element.elementor-element-3b3c7d2{ position:relative !important; }
.elementor-608688 .elementor-element.elementor-element-3b3c7d2 .elementor-element-5d16dc75{ position:static !important; }
.elementor-608688 .elementor-element.elementor-element-27c1336{
  position:absolute !important; left:0 !important; right:0 !important; bottom:36px !important;
  margin:0 auto !important; width:100% !important; z-index:5 !important;
  /* override Elementor's dark colorise filter on the widget -> pure white */
  filter:brightness(0) invert(1) !important;
}
.elementor-608688 .elementor-element.elementor-element-27c1336 img{
  filter:none !important;
}

/* ---------- Page content wrapper (matches invitation column width) ---------- */
.dday-page{
  max-width:550px; margin:0 auto;
  padding:0 0 64px; min-height:62vh; box-sizing:border-box;
}
.dday-page .fp-iframe{ display:block; }

/* ============================================================
   PDF viewer (Holy Matrimony liturgy) — PDF.js based
   Fullscreen is a CSS full-viewport overlay (works on iPhone,
   where the JS Fullscreen API is unavailable).
   ============================================================ */
.dday-pdf{
  display:flex; flex-direction:column;
  background:#FAF7F2;
  border:1px solid rgba(54,86,53,0.18); border-radius:10px;
  overflow:hidden;
}
/* class display:flex would otherwise beat the [hidden] UA rule */
.dday-pdf[hidden], .dday-lock[hidden]{ display:none !important; }
.dday-pdf__bar{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:rgba(255,251,246,0.97);
  border-bottom:1px solid rgba(54,86,53,0.18);
  position:sticky; top:0; z-index:2;
}
.dday-pdf__count{
  font-family:"garet", sans-serif; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--dday-ink); margin-right:auto;
}
.dday-pdf__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:34px; height:34px; padding:0 10px;
  font-family:"garet", sans-serif; font-size:13px; line-height:1;
  color:var(--dday-green); background:transparent;
  border:1px solid rgba(54,86,53,0.35); border-radius:8px;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  text-decoration:none; transition:background .15s ease, color .15s ease;
}
.dday-pdf__btn:hover{ background:var(--dday-green); color:#fff; }
.dday-pdf__btn:disabled{ opacity:.4; cursor:default; }
.dday-pdf__doc{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:14px; background:#FAF7F2;
  max-height:78vh;
}
.dday-pdf__page{
  margin:0 auto 14px; max-width:100%;
  box-shadow:0 2px 14px rgba(54,86,53,0.16);
  background:#fff;
}
.dday-pdf__page:last-child{ margin-bottom:0; }
.dday-pdf__page canvas{ display:block; width:100%; height:auto; }
.dday-pdf__loading{
  font-family:"garet", sans-serif; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; color:var(--dday-green);
  text-align:center; padding:48px 16px;
}
.dday-pdf__close{ display:none; }

/* paged nav (shown only in fullscreen) */
.dday-pdf__nav{ display:none; align-items:center; gap:6px; margin-right:auto; }
.dday-pdf__pageno{
  font-family:"garet", sans-serif; font-size:11px; letter-spacing:1px;
  color:var(--dday-ink); min-width:56px; text-align:center;
}

/* Fullscreen overlay (CSS, not the Fullscreen API).
   In fullscreen we show ONE page at a time, fit entirely within the
   viewport (fit-to-page) with prev/next — like a real PDF reader,
   instead of the inline continuous scroll. */
.dday-pdf.is-full{
  position:fixed; inset:0; z-index:9999;
  width:100vw; height:100vh; border:0; border-radius:0;
}
.dday-pdf.is-full .dday-pdf__doc{
  max-height:none; flex:1 1 auto;
  display:flex; padding:10px;     /* item uses margin:auto to centre + allow scroll when zoomed */
}
.dday-pdf.is-full .dday-pdf__page{
  display:none; margin:0;
  box-shadow:0 4px 22px rgba(0,0,0,0.22);
}
.dday-pdf.is-full .dday-pdf__page.is-current{ display:block; margin:auto; }
.dday-pdf.is-full .dday-pdf__count{ display:none; }
.dday-pdf.is-full .dday-pdf__nav{ display:flex; }
.dday-pdf.is-full .dday-pdf__close{ display:inline-flex; }
.dday-pdf.is-full .dday-pdf__full{ display:none; }
body.dday-pdf-lock{ overflow:hidden; }

/* ---------- Holy Matrimony: lock + countdown (hidden until reveal date) ---------- */
.dday-lock{
  text-align:center; padding:60px 24px 76px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.dday-lock__eyebrow{
  font-family:"garet", sans-serif; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--dday-green);
}
.dday-lock__title{
  font-family:"eyesome-script", "Pinyon Script", cursive;
  font-size:42px; line-height:1.1; color:#46402A; margin:4px 0 2px; font-weight:400;
}
.dday-lock__msg{
  font-family:"garet", sans-serif; font-size:13px; line-height:1.7;
  color:var(--dday-ink); max-width:330px; margin:0 auto;
}
.dday-lock__msg strong{ color:var(--dday-green); }
.dday-cd{ display:flex; justify-content:center; gap:20px; margin-top:22px; }
.dday-cd__item{ min-width:62px; }
.dday-cd__num{
  font-family:"garet", sans-serif; font-size:36px; line-height:1;
  color:var(--dday-green); font-variant-numeric:tabular-nums;
}
.dday-cd__label{
  display:block; margin-top:9px;
  font-family:"garet", sans-serif; font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dday-ink);
}
@media (max-width:767px){
  .dday-lock__title{ font-size:34px; }
  .dday-cd{ gap:14px; }
  .dday-cd__item{ min-width:52px; }
  .dday-cd__num{ font-size:29px; }
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .dday-pdf__doc{ max-height:72vh; padding:10px; }
  .dday-pdf__count{ font-size:10px; }
  .dday-header{ justify-content:flex-end; }
  .dday-header__brand{ left:20px; }
  .dday-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; background:none; border:0; cursor:pointer;
    color:var(--dday-green); font-size:22px; line-height:1;
  }
  .dday-nav{
    position:fixed; top:60px; left:0; right:0;
    flex-direction:column; gap:0; background:var(--dday-cream);
    border-bottom:1px solid rgba(54,86,53,0.18);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .dday-nav.open{ max-height:340px; }
  .dday-nav a{
    width:100%; text-align:center; padding:16px 24px; font-size:14px;
    border-bottom:1px solid rgba(54,86,53,0.08);
  }
  .dday-nav a.active{ border-bottom-color:rgba(54,86,53,0.08); }
  .dday-footer__sign{ font-size:40px; }
}