/* =========================================================
   BEATS v1.2 — light / dark for the guest invitation + demo banner
   Light = the original theme palettes (style.css). Dark = the palettes below.
   <html data-mode="light|dark"> is set before first paint (see event-page.php).
   ========================================================= */

/* ---------- DARK palettes (one per theme) ---------- */
html[data-mode="dark"] body { --card-bg: #2a2428; --card-ink: #f0e2ca; --field-bg: #2b2429; --field-ink: #f1e8e4; }
html[data-mode="dark"] body[data-theme="rose_gold"]       { --rose-solid:#b94a72; --blush:#2a1620; --cream:#1d1118; --rose:#e0789a; --wine:#f3cfdb; --gold:#d9b46a; --ink:#f1dfe6; --line:rgba(224,120,154,.35); --card-tint:rgba(255,255,255,.06); }
html[data-mode="dark"] body[data-theme="royal_sapphire"]  { --rose-solid:#3f6fc0; --blush:#14213d; --cream:#0d1526; --rose:#7fa6e6; --wine:#dbe6fb; --gold:#d9b45a; --ink:#dfe6f5; --line:rgba(127,166,230,.35); --card-tint:rgba(255,255,255,.06); }
html[data-mode="dark"] body[data-theme="emerald_luxe"]    { --rose-solid:#2f8f5d; --blush:#123024; --cream:#0b1f17; --rose:#5fc08b; --wine:#d4efdd; --gold:#d9b45a; --ink:#dcefe3; --line:rgba(95,192,139,.35); --card-tint:rgba(255,255,255,.06); }
html[data-mode="dark"] body[data-theme="sunset_coral"]    { --rose-solid:#d06a38; --blush:#33190f; --cream:#24120b; --rose:#f08a58; --wine:#ffd9c2; --gold:#f0b36c; --ink:#f6e3d8; --line:rgba(240,138,88,.35); --card-tint:rgba(255,255,255,.06); }
html[data-mode="dark"] body[data-theme="lavender_dream"]  { --rose-solid:#8a5cc0; --blush:#241837; --cream:#190f29; --rose:#b794e6; --wine:#e6d9f7; --gold:#d8c08a; --ink:#e9e0f5; --line:rgba(183,148,230,.35); --card-tint:rgba(255,255,255,.06); }
html[data-mode="dark"] body[data-theme="ocean_teal"]      { --rose-solid:#1f9c96; --blush:#0d2a2a; --cream:#081c1c; --rose:#3cc3bd; --wine:#d3f2f0; --gold:#f2b06a; --ink:#d9eeec; --line:rgba(60,195,189,.35); --card-tint:rgba(255,255,255,.06); }
html[data-mode="dark"] body[data-theme="pastel_confetti"] { --rose-solid:#d9558a; --blush:#2a1a2d; --cream:#1d1220; --rose:#f07aa8; --wine:#f3d9ec; --gold:#6fd2d8; --ink:#f3e4ef; --line:rgba(240,122,168,.35); --card-tint:rgba(255,255,255,.06); }
/* midnight_gold is already dark: it keeps its own palette in dark mode */

/* ---------- LIGHT variant of the (dark) midnight theme ---------- */
html[data-mode="light"] body[data-theme="midnight_gold"] {
  --blush:#f6efe0; --cream:#fffaf0; --rose:#9a7420; --wine:#4a3a12; --gold:#b8912f; --ink:#3b3220;
  --line:rgba(154,116,32,.3); --card-tint:rgba(255,255,255,.55);
}

/* ---------- dark: components that use fixed colours in style.css ---------- */
html[data-mode="dark"] body input, html[data-mode="dark"] body select, html[data-mode="dark"] body textarea {
  background: var(--field-bg); color: var(--field-ink); border-color: var(--line);
}
html[data-mode="dark"] body input::placeholder, html[data-mode="dark"] body textarea::placeholder { color: rgba(241,232,228,.5); }
html[data-mode="dark"] .share-btn:not(.whatsapp):not(.copied) { background: var(--blush); color: var(--wine); }
html[data-mode="dark"] .hashtag-chip { background: rgba(255,255,255,.08); }
html[data-mode="dark"] :is(.reveal-btn, .rsvp-form button, .share-moment-form button, .social-row a, .footer-cta) { color: #1a0f14; }
html[data-mode="dark"] :is(.reveal-btn, .rsvp-form button, .share-moment-form button, .social-row a):hover { background: var(--rose); filter: brightness(1.15); }
html[data-mode="dark"] .map-btn:hover { color: #1a0f14; }
html[data-mode="dark"] .music-fab, html[data-mode="dark"] .share-btn.copy.copied { color: #1a0f14; }
html[data-mode="dark"] img { filter: brightness(.94); }
html[data-mode="dark"] .qr-pass img { filter: none; }

/* ---------- light / dark switch button ---------- */
.mode-fab {
  position: fixed; top: 12px; right: 12px; z-index: 100002; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--cream); color: var(--rose); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.mode-fab:hover { transform: scale(1.08); }
body.has-demo .mode-fab { top: 52px; }

/* ---------- DEMO banner + watermark ---------- */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100001; min-height: 38px; padding: 6px 12px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(90deg, #f6c453, #f0a53a); color: #3b2a00; font: 600 13px/1.3 Arial, sans-serif; letter-spacing: .3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.demo-tag { text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; }
.demo-left b { font-weight: 800; }
.demo-cta { background: #3b2a00; color: #fff; text-decoration: none; padding: 5px 14px; border-radius: 16px; font-size: 12px; white-space: nowrap; }
.demo-cta:hover { background: #000; }
body.has-demo { padding-top: 38px; }
.demo-watermark { position: fixed; inset: 0; z-index: 40; pointer-events: none; background-repeat: repeat; background-size: 260px 170px; }

/* =========================================================
   v1.3 GALLERY — every photo keeps its own height, width fits the frame
   ========================================================= */
.gallery-grid { display: block; column-count: 3; column-gap: 14px; max-width: 960px; margin: 0 auto; }
.gallery-grid.g1 { column-count: 1; max-width: 520px; }
.gallery-grid.g2 { column-count: 2; max-width: 720px; }
.gallery-item {
  aspect-ratio: auto; overflow: hidden; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 14px; padding: 6px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.gallery-item img { width: 100%; height: auto; object-fit: initial; display: block; border-radius: 6px; }
.gallery-item:hover img { transform: scale(1.03); }
@media (max-width: 720px) {
  .gallery-grid.g3, .gallery-grid.g2 { column-count: 2; column-gap: 10px; }
  .gallery-item { margin-bottom: 10px; padding: 4px; }
}

.gallery-slideshow {
  display: grid; aspect-ratio: auto; max-width: 640px; padding: 8px; overflow: hidden;
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: height .5s ease;
}
.gallery-slideshow .slide { position: relative; inset: auto; grid-area: 1 / 1; align-self: start; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.gallery-slideshow .slide.active { opacity: 1; }
.gallery-slideshow .slide img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; display: block; border-radius: 6px; }
.gallery-slideshow .slide-dots { position: absolute; left: 0; right: 0; bottom: 14px; }

/* =========================================================
   v1.3 PROTECTION (deterrents only — see protect.js)
   ========================================================= */
body[data-protect] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body[data-protect] :is(input, textarea, select, .qr-pass, .qr-pass *) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body[data-protect] img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
body[data-protect] .qr-pass img { pointer-events: auto; }
@media print { body[data-protect] { display: none !important; } }
#protectShield {
  position: fixed; inset: 0; z-index: 2147483647; display: none; align-items: center; justify-content: center; text-align: center; padding: 30px;
  background: var(--cream, #111); color: var(--wine, #fff); font: 600 18px/1.5 Georgia, serif;
}
#protectShield.on { display: flex; }