/* ═══════════════════════════════════════════════════════════════════════
   Ashlyn's Bookshelf — Styles
   Aesthetic: clean, minimalist, white — matches matthewsadowski.com
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Reset & Base ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Montserrat:wght@600;700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: 112.5%/1.65 'Arvo', serif;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
  background-color: #f4eeef;
}

body {
  background-color: #f4eeef;
  color: hsla(0, 0%, 0%, 0.8);
  font-family: 'Arvo', serif;
  font-weight: 400;
  word-wrap: break-word;
  font-kerning: normal;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* keep content at top instead of vertically centered */
  padding-top: 1rem;
}

/* ─── Bookshelf Container ──────────────────────────────────────────── */
.bookshelf-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem; /* reduced vertical padding to save space */
  width: 100%;
}

.bookshelf-container {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* Remove baseline gap under image */
}

.bookshelf-image {
  max-width: 72vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

/* ─── Hotspot Overlays ─────────────────────────────────────────────── */
.book-hotspot {
  position: absolute;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 3px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  z-index: 10;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.book-hotspot:hover,
.book-hotspot:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.book-hotspot:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.6);
  outline-offset: 2px;
}

/* ─── Floating Cover Preview ───────────────────────────────────────── */
.cover-preview {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: transform, opacity;
}

.cover-preview.visible {
  opacity: 1;
  transform: scale(1);
}

.cover-preview img {
  display: block;
  max-width: 45vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  background: transparent;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
}

/* ─── Calibration Mode Overlay ─────────────────────────────────────── */
.calibration-active .bookshelf-container {
  cursor: crosshair;
}

.calibration-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgba(0, 120, 255, 0.9);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 55;
  font-size: 0;
}

.calibration-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 120, 255, 0.92);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 6px 12px;
  z-index: 9999;
  letter-spacing: 0.04em;
  user-select: none;
}

.calibration-banner kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: inherit;
}



/* ─── Responsive Tweaks ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .page-header h1 {
    font-size: 1.35rem;
  }

  .cover-preview img {
    width: 120px;
  }

  .cover-preview .title-label {
    max-width: 120px;
    font-size: 0.62rem;
  }
}


/* ─── Spotify Embed — match bookshelf width & center ───────────── */
.spotify-embed {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0.2rem 0 0.1rem 0; /* tighter spacing above/below */
}

.spotify-embed__frame {
  /* Match the bookshelf image maximum width (72vw) and center the frame */
  width: 100%;
  max-width: 72vw;
  aspect-ratio: 16 / 3.6; /* slightly taller than default */
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

.spotify-embed__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* login banner removed — embed-only layout */


/* Record player removed — styles cleaned up */

/* ─── Desktop fit tweak: keep embed + bookshelf visible without scrolling ─ */
@media (min-width: 900px) {
  /* Make the spotify embed shorter on typical desktop screens so the
     bookshelf image can remain large but still fit below the embed. */
  .spotify-embed__frame {
    max-height: 18vh; /* conservative height for the player */
  }

  /* Slightly reduce bookshelf vertical footprint to ensure both fit */
  .bookshelf-image {
    max-height: 78vh;
  }

  /* Reduce wrapper padding so vertical space is used efficiently */
  .bookshelf-wrapper {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
}