@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Nunito:wght@400;600;700;800&display=swap");

/* ── Reset ────────────────────────────── */

#wof-wall *,
#wof-wall *::before,
#wof-wall *::after {
  box-sizing: border-box !important;
}

/* ── Container ────────────────────────── */
/* Lock body scroll and overlay the wall across the entire viewport so the
   page chrome / footer can't peek through and users can't scroll away. */

html.wof-wall-active,
body.wof-wall-active {
  overflow: hidden !important;
  height: 100% !important;
}

#wof-wall {
  --wof-postit-size: 180px;
  --wof-postit-gap: 16px;
  --wof-grid-padding: 60px;
  --wof-bg-deep: #07101f;
  --wof-bg-wall: #0f1d36;
  --wof-bg-warm: #18243c;

  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--wof-bg-deep) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

/* ── Header ───────────────────────────── */

.wof-header {
  flex: 0 0 auto !important;
  text-align: center !important;
  margin: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 18px !important;
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, var(--wof-bg-deep) 0%, rgba(7, 16, 31, 0.85) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}
/* Title is now an uploaded SVG banner; .wof-title is just its centering wrapper. */
.wof-title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 0 !important;
}
.wof-title-img {
  display: block !important;
  width: min(680px, 86vw) !important;
  height: auto !important;
  margin: 0 auto !important;
  /* Lift the banner off the dark background, matching the old text shadow. */
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55)) !important;
}
.wof-subtitle {
  font-size: clamp(14px, 2.2vw, 18px) !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 12px 0 0 !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
.wof-subtitle em {
  font-style: italic !important;
  color: #fff176 !important;
  font-weight: 700 !important;
}
.wof-subtitle-link {
  color: #fff176 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 241, 118, 0.4) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color 0.2s, color 0.2s !important;
}
.wof-subtitle-link:hover {
  color: #fff59d !important;
  text-decoration-color: #fff176 !important;
}
.wof-subtitle-link em {
  color: inherit !important;
}

/* ── Canvas (pan/zoom surface) ───────── */

.wof-canvas {
  flex: 1 1 auto !important;
  position: relative !important;
  overflow: hidden !important;
  /* pan-y allows native single-finger vertical page scroll over the canvas;
     two-finger gestures still fall through to JS for pinch/pan. */
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
  z-index: 1 !important;
  /* Layered wall surface: warm radial glow (light "hitting" the wall) over
     the deep navy base, plus a fine SVG noise texture so it reads like an
     actual painted/papered surface rather than flat color. Inset shadows
     give the wall framed/recessed depth. */
  background-color: var(--wof-bg-wall) !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(255, 220, 150, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(255, 150, 180, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(150, 200, 255, 0.04) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-blend-mode: normal, normal, normal, overlay !important;
  box-shadow:
    inset 0 14px 28px -14px rgba(0, 0, 0, 0.75),
    inset 0 -14px 28px -14px rgba(0, 0, 0, 0.75),
    inset 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.wof-canvas.is-grabbing {
  cursor: grabbing !important;
}

/* ── Interaction hint (persistent strip) ─ */

.wof-hint {
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 9px 16px !important;
  background: linear-gradient(180deg, rgba(5, 12, 24, 0.6) 0%, rgba(5, 12, 24, 0.85) 100%) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.25px !important;
  text-align: center !important;
  line-height: 1.3 !important;
  z-index: 4 !important;
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.wof-hint-icon {
  flex: 0 0 auto !important;
  opacity: 0.55 !important;
}
.wof-hint-touch { display: none !important; }
.wof-hint-mouse { display: inline !important; }
@media (hover: none) and (pointer: coarse) {
  .wof-hint-touch { display: inline !important; }
  .wof-hint-mouse { display: none !important; }
}

.wof-wall-inner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform-origin: 0 0 !important;
  will-change: transform !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Grid */
.wof-grid {
  display: grid !important;
  grid-auto-rows: var(--wof-postit-size) !important;
  gap: var(--wof-postit-gap) !important;
  padding: var(--wof-grid-padding) !important;
  margin: 0 !important;
  /* grid-template-columns is set inline from the shortcode */
}

/* ── Post-its ─────────────────────────── */

.wof-postit {
  width: var(--wof-postit-size) !important;
  height: var(--wof-postit-size) !important;
  background: #fff176;
  position: relative !important;
  /* translate + scale are per-note jitter (set inline) so the grid reads as
     hand-placed notes; rotate is the existing lean. */
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(var(--scl, 1)) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 14px 14px !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.wof-postit::after {
  /* subtle paper grain */
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.05) 100%) !important;
  pointer-events: none !important;
}

/* Tape */
.wof-tape {
  width: 38px !important;
  height: 14px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  position: absolute !important;
  top: -5px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  z-index: 2 !important;
  border-radius: 1px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  border: none !important;
  padding: 0 !important;
}
/* Sharpie text */
.wof-postit-text {
  font-family: "Kalam", "Patrick Hand", cursive !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  text-align: center !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  overflow: hidden !important;
  letter-spacing: 0 !important;
  width: 100% !important;
  max-height: 100% !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* ── Recenter button ─────────────────── */

.wof-recenter-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 5 !important;
  transition: background 0.18s, color 0.18s, transform 0.18s !important;
}
.wof-recenter-btn:hover {
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
}
.wof-recenter-btn:active {
  transform: scale(0.93) !important;
}
.wof-recenter-btn svg {
  display: block !important;
}

/* ── Sticky action bar ────────────────── */

.wof-actions {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 18px 16px 16px !important;
  background: linear-gradient(180deg, var(--wof-bg-deep) 0%, #050b18 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 10 !important;
  position: relative !important;
  /* iOS safe-area */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
.wof-actions-row {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  gap: 16px !important; /* tight; callout overlaps the secret button corner */
  width: 100% !important;
  max-width: 520px !important;
  align-items: stretch !important;
}
@media (min-width: 560px) {
  .wof-actions-row {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important; /* on desktop the callout sits above, not between */
  }
}

.wof-action-btn {
  font-family: "Nunito", sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 14px 24px !important;
  border-radius: 32px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: center !important;
  letter-spacing: 0.6px !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  /* Reset any margin the host theme applies to <button>/<a>; otherwise it
     gets ADDED to the flex `gap`, opening a large space between the CTAs
     (most visible on mobile where they stack). */
  margin: 0 !important;
}
@media (min-width: 560px) {
  .wof-action-btn {
    width: auto !important;
    min-width: 230px !important;
  }
}

.wof-action-primary {
  background: #fff176 !important;
  color: #1a1a1a !important;
  box-shadow: 0 6px 20px rgba(255, 241, 118, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}
.wof-action-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 241, 118, 0.5), 0 3px 8px rgba(0, 0, 0, 0.35) !important;
  background: #ffeb3b !important;
}

/* Secondary button is intentionally subordinate: visible but quieter than
   primary, so the hierarchy reads as one main CTA + one alternate. */
.wof-action-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  letter-spacing: 0.5px !important;
}
.wof-action-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  transform: none !important;
}

.wof-credit {
  font-style: italic !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 6px 0 0 !important;
  padding-top: 4px !important;
  text-align: center !important;
  line-height: 1.4 !important;
  letter-spacing: 0.2px !important;
}
.wof-credit-link {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.35) !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s, text-decoration-color 0.2s !important;
}
.wof-credit-link:hover {
  color: #fff176 !important;
  text-decoration-color: #fff176 !important;
}
/* The host theme adds default margin to <p> elements; the markup ends with an
   empty <p></p> whose inherited bottom margin pushes the action bar up off the
   screen edge. Collapse any margin below the last child so the bar's own
   padding (10px) is the only space under the credit line. */
.wof-actions > p:last-child {
  margin-bottom: 0 !important;
}
.wof-actions > p:empty {
  display: none !important;
}

/* ── Modal ────────────────────────────── */

.wof-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.wof-modal.is-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: wofFadeIn 0.2s ease !important;
}
.wof-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
}
.wof-modal-postit {
  background: #fff176 !important;
  width: 100% !important;
  max-width: 380px !important;
  aspect-ratio: 1 !important;
  padding: 36px 26px 22px !important;
  position: relative !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transform: rotate(-1deg) !important;
  animation: wofPopIn 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
  border: none !important;
  border-radius: 0 !important;
}
.wof-modal-title {
  font-family: "Kalam", cursive !important;
  font-size: 22px !important;
  color: #1a1a1a !important;
  margin: 0 0 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}
.wof-modal-postit textarea {
  flex: 1 !important;
  width: 100% !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  font-family: "Kalam", cursive !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  resize: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  text-align: center !important;
}
.wof-modal-postit textarea::placeholder {
  color: rgba(26, 26, 26, 0.3) !important;
  font-family: "Kalam", cursive !important;
  font-weight: 700 !important;
}
.wof-modal-postit textarea:focus {
  background: rgba(0, 0, 0, 0.06) !important;
}
.wof-modal-disclaimer {
  font-family: "Nunito", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: rgba(0, 0, 0, 0.45) !important;
  text-align: center !important;
  margin: 12px 0 0 !important;
}
.wof-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 14px !important;
}
#wof-char-count {
  font-family: "Nunito", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.3) !important;
}
#wof-char-count.warning {
  color: #c0283c !important;
}
#wof-submit-btn {
  font-family: "Nunito", sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 10px 24px !important;
  border-radius: 24px !important;
  border: none !important;
  background: #1a1a1a !important;
  color: #fff176 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  width: auto !important;
}
#wof-submit-btn:disabled {
  background: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.25) !important;
  cursor: not-allowed !important;
}
#wof-submit-btn:not(:disabled):hover {
  background: #000 !important;
}

/* Form wrapper — hidden once the failure is submitted. */
.wof-modal-form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}
.wof-modal-postit.is-confirmed .wof-modal-form {
  display: none !important;
}
/* When confirmed, let the post-it grow to fit the message instead of staying
   a fixed square (which would clip the longer confirmation copy). */
.wof-modal-postit.is-confirmed {
  aspect-ratio: auto !important;
  min-height: 360px !important;
  max-height: calc(100dvh - 40px) !important;
  overflow-y: auto !important;
  justify-content: center !important;
}

/* Confirmation screen (shown in-flow, not as an overlay). */
.wof-toast {
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
  width: 100% !important;
}
.wof-modal-postit.is-confirmed .wof-toast {
  display: flex !important;
  animation: wofFadeIn 0.25s ease !important;
}
/* Close X — pinned to the post-it's top-right corner (the post-it is the
   nearest positioned ancestor, since .wof-toast itself is not positioned). */
.wof-toast-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1a1a1a !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
}
.wof-toast-close:hover {
  background: rgba(0, 0, 0, 0.14) !important;
}
.wof-toast-check {
  display: block !important;
  margin-bottom: 2px !important;
}
.wof-toast-title {
  font-family: "Kalam", cursive !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
}
.wof-toast-sub {
  font-family: "Nunito", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  line-height: 1.4 !important;
  max-width: 300px !important;
}
.wof-toast-prompt {
  font-family: "Kalam", cursive !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  margin: 8px 0 0 !important;
  max-width: 300px !important;
}
.wof-toast-btn {
  font-family: "Nunito", sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 22px !important;
  border-radius: 24px !important;
  border: none !important;
  background: #1a1a1a !important;
  color: #fff176 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
  transition: background 0.2s, transform 0.2s !important;
}
.wof-toast-btn:hover {
  background: #000 !important;
  transform: translateY(-1px) !important;
}

/* ── Mobile compaction ────────────────── */
/* On phones we trade chrome real estate for more wall area. */

@media (max-width: 559px) {
  .wof-header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    padding-right: 14px !important;
    padding-bottom: 12px !important;
    padding-left: 14px !important;
  }
  .wof-title-img {
    width: min(360px, 88vw) !important;
  }
  .wof-subtitle {
    font-size: 12px !important;
    margin: 5px 0 0 !important;
    line-height: 1.35 !important;
  }
  .wof-hint {
    font-size: 11px !important;
    padding: 7px 14px !important;
    gap: 6px !important;
  }
  .wof-actions {
    padding: 12px 14px 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }
  .wof-credit {
    font-size: 12px !important;
    margin: 4px 0 0 !important;
    padding-top: 0 !important;
    line-height: 1.3 !important;
  }
  .wof-recenter-btn {
    width: 36px !important;
    height: 36px !important;
    top: 10px !important;
    right: 10px !important;
  }
}

/* ── Animations ───────────────────────── */

@keyframes wofPopIn {
  from {
    opacity: 0;
    transform: scale(0.92) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-1deg);
  }
}
@keyframes wofFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}