/* pjlm-content.css — content theme for promoted (CMS-managed) pages.
 *
 * The legacy per-section stylesheet (e.g. style-biblio.css) still supplies the
 * page background, palette and link styling. This layer styles the *modern
 * semantic markup* (h1/h2/p/em/img/.edition) produced from a Google Doc so it
 * matches the original section's look without needing the old layout tables or
 * <font id> hooks. Section-specific tweaks key off [data-section].
 */

.pjlm-content {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 28px 140px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.pjlm-content h1 {
  margin: 0 0 2px;
  font-size: 26px;
  font-weight: bold;
}

.pjlm-content .byline {
  margin: 0 0 26px;
  font-weight: bold;
}

.pjlm-content h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: bold;
}

.pjlm-content p {
  margin: 0 0 14px;
}

.pjlm-content .note {
  font-size: 13px;
  opacity: 0.9;
}

/* Each book edition: cover on the left, details on the right. */
.pjlm-content .edition {
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: 20px;
  align-items: start;
  margin: 0 0 26px;
}

.pjlm-content .edition img {
  display: block;
  width: auto;
  height: auto;
  border: 1px solid currentColor;
}

@media (max-width: 540px) {
  .pjlm-content .edition {
    grid-template-columns: 1fr;
  }
}

/* ---- Section palettes (echo the original per-section colours) ---- */

/* Sections that reproduce the original "fixed logo background + spacer +
 * content cell" layout: a narrow box pinned to the left, just right of the
 * logo background image, with tight Arial text — matching the originals. */
.pjlm-content[data-section='biblio'],
.pjlm-content[data-section='songs'] {
  box-sizing: border-box;
  width: 480px;
  max-width: 480px;
  margin: 8px 0 60px 312px;
  padding: 12px 16px 26px;
  font-size: 13px;
  line-height: 1.42;
}
.pjlm-content[data-section='biblio'] h1,
.pjlm-content[data-section='songs'] h1 {
  margin: 0 0 2px;
  font-size: 19px;
}
.pjlm-content[data-section='biblio'] .byline,
.pjlm-content[data-section='songs'] .byline {
  margin: 0 0 16px;
  font-weight: normal;
}
.pjlm-content[data-section='biblio'] p,
.pjlm-content[data-section='songs'] p {
  margin: 0 0 12px;
}

/* biblio palette: blue content card, off-white text. */
.pjlm-content[data-section='biblio'] {
  background: #0c659d;
  color: #f1f3f2;
}
.pjlm-content[data-section='biblio'] a {
  color: #f1f3f2;
}
.pjlm-content[data-section='biblio'] img {
  display: block;
  margin: 18px 0 6px;
  border: 1px solid currentColor;
  max-width: 100%;
  height: auto;
}
.pjlm-content[data-section='biblio'] h2 {
  margin: 4px 0 6px;
  font-size: 15px;
}

/* root (statement etc.): light text in a narrow column next to the logo,
 * matching the original's <font id="small"> 7pt Arial body. */
.pjlm-content[data-section='root'] {
  color: #f1f3f2;
  font: 11px/1.55 Arial, sans-serif;
  padding: 0;
  margin: 0;
  max-width: none;
}
.pjlm-content[data-section='root'] p {
  margin: 0 0 11px;
}
.pjlm-content[data-section='root'] a {
  color: #f1f3f2;
}

/* ---- Floating side menu (modern position:fixed; legacy div#menu styles it
 * where the section stylesheet defines them; this is the fallback). ---- */
/* Positioning + a LOW-specificity fallback. The per-section legacy stylesheet's
 * `div#menu` rules (specificity 1,0,1) supply the box's colours/border/links and
 * win over these class-only rules (0,1,x) — so songs/biblio get their original
 * navy/blue menu. The fallback only shows where a section's stylesheet doesn't
 * style div#menu at all (e.g. root/statement, which use stylemenu.css). */
.pjlm-menu {
  position: fixed;
  left: 10px;
  bottom: 16px;
  z-index: 100;
  width: max-content;
  max-width: min(360px, 90vw);
  padding: 10px;
  font: bold 12px Verdana, Arial, sans-serif;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(241, 243, 242, 0.55);
}
.pjlm-menu a {
  display: block;
  padding: 2px 0;
  color: #f1f3f2;
  text-decoration: none;
}
.pjlm-menu a:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .pjlm-menu {
    position: static;
    width: auto;
    margin: 0 28px 40px;
  }
}

/* songs palette: cyan content card, navy text (the original bgcolor="#90DDE4"). */
.pjlm-content[data-section='songs'] {
  background: #90dde4;
  color: #193356;
}
.pjlm-content[data-section='songs'] a {
  color: #193356;
}
/* Section headers reuse the original banner-image strips (Genesis / Studio /
 * Media / Live / Demos) — pixel-exact, and a fixed set that's never edited. */
.pjlm-content[data-section='songs'] h2.banner {
  margin: 22px 0 8px;
  padding: 0;
  border: 0;
}
.pjlm-content[data-section='songs'] h2.banner img {
  display: block;
  border: 0;
  max-width: 100%;
  height: auto;
}
/* Version listings (WYSIWYG with the Doc): the version name is a bold paragraph
 * with no bullet (the old <dt>); its notes/locations are an indented bulleted
 * list (the old <dd>). */
.pjlm-content[data-section='songs'] p:has(> strong:only-child) {
  margin: 14px 0 3px;
}
.pjlm-content[data-section='songs'] ul {
  margin: 2px 0 12px;
  padding-left: 24px;
  list-style: disc;
}
.pjlm-content[data-section='songs'] ul li {
  margin: 0 0 2px;
}

/* Originals are fixed-width; on narrow viewports unpin from the logo column. */
@media (max-width: 900px) {
  .pjlm-content[data-section='biblio'],
  .pjlm-content[data-section='songs'] {
    width: auto;
    max-width: 540px;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* Version listings (originally <dl> with track times in {braces}). */
.pjlm-content dl {
  margin: 0 0 14px;
}
.pjlm-content dt {
  font-weight: bold;
  margin: 14px 0 4px;
}
.pjlm-content dd {
  margin: 0 0 2px 24px;
}

/* ---- "view original" comparison pill (fixed, top-right) ---- */
.pjlm-compare {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200;
  padding: 5px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff !important;
  font: bold 12px Arial, sans-serif;
  text-decoration: none !important;
  opacity: 0.82;
}
.pjlm-compare:hover {
  opacity: 1;
}