/*
 Theme Name:   Kadence Child
 Template:     kadence
 Version:      1.0.0
*/

/* ==========================================================================
   1) Desktop layout: 3-column grid
   ========================================================================== */
.pdf-reader-layout {
  display: grid;
  grid-template-columns: 350px 1fr 300px;
  gap: 25px;
  margin-top: 20px;
  height: calc(100vh - 100px);
}

/* Left & Right panels */
.pdf-meta,
.pdf-sidebar {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 8px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* PDF viewer column */
.pdf-viewer {
  overflow-y: auto;
  height: calc(100vh - 100px);
  padding: 0 10px;
}

/* ==========================================================================
   2) PDF pages + text layer
   ========================================================================== */
.pdf-page {
  margin: 15px auto;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  overflow-x: hidden;
}
.pdf-page canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto 0.25rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.textLayer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  width: 100% !important;
}

/* ==========================================================================
   3) Page controls
   ========================================================================== */
.pdf-page-controls {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  z-index: 20;
}
.pdf-page-controls input,
.pdf-page-controls button {
  margin: 0 5px;
  padding: 4px 8px;
}

/* ==========================================================================
   4) Sidebar “Related Papers” styling (re-used in mobile panel)
   ========================================================================== */
.pdf-sidebar h3,
.mobile-panel h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.pdf-sidebar ul,
.mobile-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdf-sidebar ul li,
.mobile-panel ul li {
  margin-bottom: 10px;
}
.pdf-sidebar ul li a,
.mobile-panel ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}
.pdf-sidebar ul li a img,
.mobile-panel ul li a img {
  width: 40px;
  height: auto;
  border-radius: 2px;
}

/* ==========================================================================
   5) Mobile-only panels + bottom navigation
   ========================================================================== */
.mobile-panel {
  display: none;            /* hidden by default */
  padding: 15px;
  background: #fff;
  margin: 0 15px 15px;
  border-radius: 6px;
}
/* when JS toggles .active, make it show */
.mobile-panel.active {
  display: block !important;
}


/* fixed bottom nav */
.mobile-bottom-nav {
  display: none;            /* shown under 769px */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 50px;
  background: #fff;
  border-top: 1px solid #ddd;
  z-index: 9999;
}
.mobile-bottom-nav button {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.9rem;
  color: #0073aa;
}

/* ==========================================================================
   6) Responsive breakpoints
   ========================================================================== */
/* Mobile layout for <769px */
@media (max-width: 768px) {
  /* stack everything in one column */
  .pdf-reader-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  /* hide desktop panels + page-controls */
  .pdf-meta,
  .pdf-sidebar,
  .pdf-page-controls {
    display: none !important;
  }
  /* allow only the PDF viewer to scroll, above the bottom nav */
  body {
    padding-bottom: 60px; /* reserve space for nav */
  }
  .post-pdf-viewer-wrapper,
  .pdf-viewer {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* show mobile nav */
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

/* Desktop: hide any mobile-only piece */
@media (min-width: 769px) {
  .mobile-panel,
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* ─── HIDE desktop panels on mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  .pdf-meta, .pdf-sidebar, .pdf-page-controls { display: none !important; }
  .pdf-reader-layout { display: flex; flex-direction: column; }
  .post-pdf-viewer-wrapper { 
    max-height: calc(100vh - 60px);
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── MOBILE PANELS ───────────────────────────────────────────────────────── */
.mobile-panel {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 50px;     /* leave room for nav */
  background: #fff;
  overflow-y: auto;
  padding: 1rem;
  z-index: 1000;
}
/* show when active */
.mobile-panel.active {
  display: block !important;
}

/* ─── BOTTOM NAV ─────────────────────────────────────────────────────────── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #ddd;
  background: #fff;
  z-index: 1100;
}
.mobile-bottom-nav button {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.9rem;
  color: #0073aa;
}
body {
  /* reserve bottom space so PDF doesn't go under nav */
  padding-bottom: 60px;
}

/* ─── Keep desktop layout intact over 768px ──────────────────────────────── */
@media (min-width: 769px) {
  .mobile-panel, .mobile-bottom-nav { display: none !important; }
  body { padding-bottom: 0; }
}