@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Keep WP from adding odd spacing */
body { margin: 0; padding: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

/* Make sure the app can go edge-to-edge */
#jigsaw-app { min-height: 100vh; }

/* Simple prose styling for the markdown content */
.jigsaw-prose h1,
.jigsaw-prose h2,
.jigsaw-prose h3 {
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 900;
  color: #111827; /* neutral-900 */
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.jigsaw-prose p {
  margin-bottom: 1.5rem;
  color: #4b5563; /* neutral-600 */
  line-height: 1.75;
}

.jigsaw-prose ul { margin: 1rem 0 1.5rem 1.25rem; list-style: disc; color: #4b5563; }
.jigsaw-prose li { margin: 0.5rem 0; }

/* Reduce interference from WP theme styles if any */
.jigsawpfo-fullscreen main,
.jigsawpfo-fullscreen #content,
.jigsawpfo-fullscreen .site-content { max-width: none !important; }

/* Hide horizontal overflow if something expands */
html, body { overflow-x: hidden; }

/* Ad slots (desktop/mobile split) */
.jigsaw-ad--desktop { display: none; }
.jigsaw-ad--mobile { display: block; }
@media (min-width: 768px) {
  .jigsaw-ad--desktop { display: block; }
  .jigsaw-ad--mobile { display: none; }
}

/* WP Menu styling (injected into the app) */
.jigsaw-wp-menu-list,
.jigsaw-wp-menu-list-mobile,
.jigsaw-wp-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jigsaw-wp-menu-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.jigsaw-wp-menu-list li a {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.65;
  transition: opacity 150ms ease;
}
.jigsaw-wp-menu-list li a:hover { opacity: 1; }

.jigsaw-wp-menu-list-mobile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.jigsaw-wp-menu-list-mobile li a {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
}

.jigsaw-wp-footer-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.jigsaw-wp-footer-menu li a {
  color: #6b7280; /* neutral-500 */
  font-size: 0.875rem;
  transition: color 150ms ease;
}
.jigsaw-wp-footer-menu li a:hover { color: #111827; }


/* Better touch drag responsiveness for the Konva canvas */
#puzzle-canvas,
#puzzle-canvas canvas {
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: contain;
}