/* ============================================================
   LORA Cocktail Company – style.css
   Hotspot-over-image layout, fully responsive.
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #0d0a1a;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}

/* ── SEO content: hidden from view, visible to search engines ─ */
.seo-content {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Page wrapper: contains image + all hotspots ─────────── */
.page-wrapper {
  position: relative;
  width: 100%;
  max-width: 941px;   /* native image width */
  margin: 0 auto;
  display: block;
  line-height: 0;     /* removes gap below inline img */
}

/* ── The mockup image ─────────────────────────────────────── */
.mockup-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Anchor points ────────────────────────────────────────── */
.anchor {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  /* offset so the target element isn't hidden behind a fixed header */
  scroll-margin-top: 0;
}

/* ── Hotspot links ────────────────────────────────────────── */
.hotspot {
  display: block;
  position: absolute;
  cursor: pointer;
  background: transparent;
  border: none;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s ease;

  /* A11y: subtle focus ring */
  outline: none;
}

.hotspot:focus-visible {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

/* Subtle hover feedback without covering the design */
.hotspot:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ── DEBUG MODE (?debug=1 in URL) ─────────────────────────── */
body.debug-mode .hotspot {
  background: rgba(220, 38, 38, 0.35);
  border: 2px solid rgba(220, 38, 38, 0.9);
  border-radius: 3px;
}

body.debug-mode .hotspot::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 9px;
  font-family: monospace;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 10;
  line-height: 1.3;
}

body.debug-mode .anchor {
  border-top: 2px dashed rgba(59, 130, 246, 0.8);
  height: 0;
  pointer-events: none;
}

body.debug-mode .anchor::before {
  content: '▶ anchor: #' attr(id);
  position: absolute;
  top: -18px;
  left: 4px;
  background: rgba(59, 130, 246, 0.85);
  color: #fff;
  font-size: 10px;
  font-family: monospace;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
}

/* Debug banner at top */
body.debug-mode::before {
  content: '🔴 DEBUG MODE ACTIEF – alle hotspots zijn zichtbaar gemaakt';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #dc2626;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-family: monospace;
  padding: 6px 0;
  letter-spacing: 0.02em;
}

/* ── Responsive tweaks ────────────────────────────────────── */

/* On very small screens, keep at full width */
@media (max-width: 480px) {
  .page-wrapper {
    max-width: 100%;
  }
}

/* Prevent page from being too wide on large screens */
@media (min-width: 942px) {
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
  }

  .page-wrapper {
    box-shadow: 0 0 60px rgba(0,0,0,0.6);
  }
}