/* =========================================================================
   Niko Cumple — app.css
   Every color/shape token comes from the :root variables injected by PHP
   (lib/settings.php → niko_theme_css), so the whole look re-skins from the
   admin panel. Mobile-first, accessible, reduced-motion aware.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  min-height:100dvh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink);
  background:linear-gradient(165deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- ambient background --------------------------------------- */
.stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.stage::before{content:"";position:absolute;inset:0;opacity:0}
.orb{position:absolute;border-radius:50%;filter:blur(6px);opacity:.5;will-change:transform}
.orb--1{width:120px;height:120px;background:var(--brand);top:8%;left:-40px;animation:float 13s ease-in-out infinite}
.orb--2{width:80px;height:80px;background:var(--accent);top:22%;right:-24px;animation:float 16s ease-in-out infinite reverse}
.orb--3{width:52px;height:52px;background:var(--brand);top:55%;left:6%;opacity:.35;animation:float 11s ease-in-out infinite}
.orb--4{width:150px;height:150px;background:var(--accent);bottom:4%;right:-50px;opacity:.4;animation:float 18s ease-in-out infinite}
.orb--5{width:38px;height:38px;background:var(--brand-600);top:40%;right:14%;opacity:.4;animation:float 9s ease-in-out infinite reverse}
.orb--6{width:64px;height:64px;background:var(--accent-600);bottom:22%;left:-20px;opacity:.35;animation:float 15s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(12deg)}}

/* ---------- layout --------------------------------------------------- */
.wrap{
  position:relative;z-index:1;
  width:100%;max-width:560px;margin:0 auto;
  padding:calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:26px;
}

/* ---------- intro / title -------------------------------------------- */
.intro{text-align:center}
.eyebrow{
  margin:0 0 6px;font-size:.82rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-600);
}
.title{
  margin:0;font-size:clamp(2.3rem,9vw,3.3rem);line-height:1.02;font-weight:900;letter-spacing:-.02em;
  color:var(--brand);text-shadow:0 2px 0 rgba(0,0,0,.04);
}
.subtitle{margin:.5rem 0 0;font-weight:600;color:var(--muted);font-size:1rem}

/* ---------- hero image ----------------------------------------------- */
.hero{perspective:1200px}
.hero-card{
  background:var(--card);
  border-radius:calc(var(--radius) + 10px);
  padding:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -18px rgba(0,0,0,.45),0 6px 14px -8px rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
  transform-style:preserve-3d;
}
.hero-img{display:block;width:100%;height:auto;border-radius:var(--radius)}

/* ---------- countdown ------------------------------------------------ */
.countdown{text-align:center}
.countdown-label{margin:0 0 10px;font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.unit{
  background:var(--card);border-radius:calc(var(--radius) - 4px);padding:14px 6px;
  box-shadow:0 10px 24px -16px rgba(0,0,0,.4);
}
.num{display:block;font-size:clamp(1.5rem,7vw,2rem);font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1}
.cap{display:block;margin-top:4px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- details -------------------------------------------------- */
.details{display:flex;flex-direction:column;gap:12px}
.detail{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border-radius:var(--radius);padding:14px 16px;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.4);
  color:var(--ink);text-decoration:none;
}
.detail--link{transition:transform .18s ease,box-shadow .18s ease}
.detail--link:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(0,0,0,.5)}
.detail-ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-700);
}
.detail-txt{display:flex;flex-direction:column;min-width:0}
.detail-k{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.detail-v{font-weight:700;font-size:1.02rem}
.detail-sub{font-size:.9rem;color:var(--muted)}
.detail--link .detail-txt{position:relative}

/* ---------- buttons -------------------------------------------------- */
.btn-niko{
  --sh:0 12px 22px -12px rgba(0,0,0,.5);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;padding:14px 20px;
  border:0;border-radius:var(--radius);
  font-size:1.06rem;font-weight:800;line-height:1;cursor:pointer;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-niko svg{flex:0 0 auto}
.btn-niko--brand{background:linear-gradient(180deg,var(--brand),var(--brand-600));color:var(--on-brand);box-shadow:var(--sh)}
.btn-niko--brand:hover{transform:translateY(-2px);box-shadow:0 18px 30px -12px rgba(0,0,0,.55);filter:saturate(1.05)}
.btn-niko--soft{background:var(--card);color:var(--brand-700);box-shadow:0 10px 22px -16px rgba(0,0,0,.45);border:1.5px solid var(--brand-100)}
.btn-niko--soft:hover{transform:translateY(-2px);box-shadow:0 16px 28px -16px rgba(0,0,0,.5)}
.btn-niko--ghost{background:transparent;color:var(--muted);border:1.5px dashed color-mix(in srgb,var(--muted) 45%,transparent)}
.btn-niko--ghost:hover{color:var(--ink)}
.btn-niko:active{transform:translateY(0)}
.btn-niko:disabled{opacity:.55;cursor:default;box-shadow:none;transform:none;filter:none}
.btn-niko:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:3px}
.actions{display:flex;flex-direction:column;gap:12px}
.actions-row{display:flex;gap:12px}
.actions-row .btn-niko{flex:1}
@media (max-width:360px){.actions-row{flex-direction:column}}

/* ---------- share ---------------------------------------------------- */
.share{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.share-label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.share-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;border:1.5px solid var(--brand-100);
  background:var(--card);color:var(--ink);font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.chip:hover{transform:translateY(-2px);box-shadow:0 12px 22px -16px rgba(0,0,0,.5)}
.chip:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px}
.chip--wa{color:#128C4A}
.chip--wa:hover{border-color:#25D366}
.chip.is-done{border-color:var(--brand);color:var(--brand-700)}

/* ---------- footer --------------------------------------------------- */
.foot{text-align:center;color:var(--muted);font-size:.82rem;padding-top:6px}
.foot p{margin:0}

/* ---------- reveal on load (only when JS is present) ----------------- */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}

/* ===================== RSVP modal ==================================== */
.niko-modal{
  border:0;border-radius:calc(var(--radius) + 6px);overflow:hidden;
  background:var(--card);color:var(--ink);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.niko-modal .modal-header{border-bottom:1px solid color-mix(in srgb,var(--muted) 16%,transparent);padding:20px 22px}
.niko-modal .modal-title{font-weight:900;color:var(--brand);font-size:1.3rem}
.niko-modal .modal-body{padding:20px 22px}
.niko-modal .modal-footer{border-top:0;padding:8px 22px 22px;flex-direction:column;gap:8px}
.modal-lead{margin:-4px 0 18px;color:var(--muted)}
.niko-modal .form-control,.niko-modal .form-select{border-radius:14px;padding-top:1.1rem;min-height:58px}
.niko-modal .form-floating>label{padding-left:1rem}
.niko-modal .form-control:focus,.niko-modal .form-select:focus{
  border-color:var(--brand);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--brand) 22%,transparent);
}
.form-hint{margin:.55rem 0 0;font-size:.86rem;color:var(--muted)}
.rsvp-error{color:#c62828;font-weight:600;font-size:.92rem;text-align:center;min-height:1px}
[data-bs-theme=dark] .rsvp-error{color:#ff8a80}
#rsvpSubmit .label{transition:opacity .15s ease}
#rsvpSubmit.is-loading .label{opacity:.7}

/* ===================== success overlay =============================== */
.success{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;
  background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s ease;
}
.success[hidden]{display:none}
.success.is-open{opacity:1}
.success-card{
  background:var(--card);color:var(--ink);border-radius:calc(var(--radius) + 8px);
  padding:34px 26px 26px;max-width:360px;width:100%;text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:12px;align-items:center;
  transform:scale(.9);transition:transform .3s cubic-bezier(.2,1.3,.5,1)}
.success.is-open .success-card{transform:scale(1)}
.success-check{width:84px;height:84px}
.success-check circle{stroke:var(--brand);stroke-width:3;opacity:.25}
.success-check path{stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48}
.success.is-open .success-check path{animation:draw .5s .15s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success-title{margin:0;font-weight:900;color:var(--brand);font-size:1.6rem}
.success-msg{margin:0;color:var(--muted)}
.success-card .btn-niko{margin-top:4px}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2001}

/* ---------- add-to-calendar mini menu -------------------------------- */
.cal-menu{
  position:fixed;z-index:2100;min-width:210px;padding:6px;
  background:var(--card);border-radius:16px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--muted) 14%,transparent);
  animation:calpop .16s ease}
@keyframes calpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cal-item{
  display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
  padding:12px 14px;border-radius:11px;font-size:.98rem;font-weight:600;cursor:pointer;text-decoration:none}
.cal-item:hover,.cal-item:focus-visible{background:var(--brand-100);color:var(--brand-700);outline:none}
@media (prefers-reduced-motion:reduce){.cal-menu{animation:none}}

/* ---------- larger screens: give the invite a comfy 2-up feel -------- */
@media (min-width:720px){
  .wrap{max-width:600px;gap:30px}
  .details{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .details .detail:first-child{grid-column:1/-1}
}

/* ---------- reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .orb{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-card,.btn-niko,.detail--link,.chip{transition:none!important}
  .success-check path{animation:none!important;stroke-dashoffset:0!important}
  .success,.success-card{transition:none!important}
}