/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org)
   The hand-made /sheets/ pages (the first ~50 sheets) and the /sheets/ hub.
   Loaded after each page's own <style>, so it wins at equal specificity. */

body { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ── Page frame ─────────────────────────────────────────────── */
main {
  max-width: 860px !important;
  margin: 1.75rem auto 3.5rem !important;
  padding: 0 16px !important;
}
main h1 {
  font-size: clamp(1.75rem, 6.2vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
main > p { line-height: 1.6; margin: 0.25rem 0; }

/* ── "Play along" banner (markup written by build-library.js) ── */
#library-upgrade-banner {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.9rem;
  padding: 0.7rem 16px !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  line-height: 1.45;
  background: linear-gradient(120deg, #7c3aed, #a855f7 55%, #ec4899) !important;
}
#library-upgrade-banner a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 !important;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #6d28d9 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
#library-upgrade-banner a:hover { background: #f5f3ff; }

/* ── PDF: inline viewer on desktop, a tap card on phones ─────── */
.pdf-viewer {
  border: 1px solid var(--border-color) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -14px rgba(76, 29, 149, 0.35);
}
.pdf-tap-mobile {
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding: 2rem 1.25rem 1.6rem;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--bg-secondary);
  box-shadow: 0 10px 30px -14px rgba(76, 29, 149, 0.35);
}
.pdf-tap-mobile i { font-size: 2.6rem; color: #e11d74; }
.pdf-tap-mobile p { font-size: 0.98rem; }

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ec4899, #f97316);
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none !important;
  box-shadow: 0 10px 24px -10px rgba(236, 72, 153, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.download-btn::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f019"; /* download */
}
.download-btn[target="_blank"]::before { content: "\f1c1"; } /* file-pdf */
.download-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(236, 72, 153, 0.75); }
.download-btn:focus-visible { outline: 3px solid #a855f7; outline-offset: 3px; }

.sheet-actions {
  margin-top: 1.25rem !important;
  justify-content: center;
}
.sheet-actions > * { height: auto !important; }
@media (max-width: 720px) {
  .pdf-tap-mobile .download-btn { width: 100%; max-width: 320px; }
  /* under the tap card the second button is the quieter one */
  .sheet-actions .download-btn {
    width: 100%;
    max-width: 320px;
    background: transparent;
    color: var(--text-primary) !important;
    border: 2px solid rgba(236, 72, 153, 0.55);
    box-shadow: none;
  }
}

/* ── About / tips ───────────────────────────────────────────── */
.seo-content { margin: 2.25rem auto 0 !important; }
.seo-content h2 { font-size: clamp(1.35rem, 5vw, 1.8rem) !important; }
@media (max-width: 600px) {
  .seo-content { padding: 1.5rem 1.15rem !important; border-radius: 20px !important; }
  .seo-content p { font-size: 1rem !important; line-height: 1.7 !important; }
  .seo-content ul li { padding: 0.55rem 0 0.55rem 1.6rem !important; }
}

/* ── Lists of links: related sheets and the hub groups ───────── */
.related-sheets,
.sheet-group {
  margin: 2rem auto 0 !important;
  padding: 1.4rem 1.25rem 0.6rem !important;
  border-radius: 20px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 26px -16px rgba(0, 0, 0, 0.35);
  max-width: none;
}
.related-sheets h2,
.sheet-group h2 {
  font-size: 1.2rem !important;
  text-align: start !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  animation: none !important;
}
.related-sheets h2::after,
.sheet-group h2::after { display: none !important; }
.related-sheets li,
.sheet-group li {
  padding: 0 !important;
  border-top: 1px solid var(--border-color);
}
.related-sheets li:first-child,
.sheet-group li:first-child { border-top: 0; }
.related-sheets a,
.sheet-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.55rem 0;
  color: var(--text-primary) !important;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none !important;
}
.related-sheets a::after,
.sheet-group a::after {
  content: "›";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #e11d74;
}
.related-sheets a:hover,
.sheet-group a:hover { color: #db2777 !important; }

/* ── /sheets/ hub ───────────────────────────────────────────── */
.hub-intro { font-size: 1.02rem !important; line-height: 1.7 !important; margin: 0.5rem 0 1.5rem !important; }
.hub-ctas { gap: 0.75rem !important; margin-bottom: 1rem !important; }
.hub-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem !important;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .hub-cta { width: 100%; justify-content: center; text-align: center; }
}
.sheet-group h2 i { color: #e11d74 !important; }

/* main.css hid every <section> until main.js revealed it, and these pages
   never load main.js. Fixed in main.css, but browsers keep CSS for a week:
   this file is new, so it carries the fix to returning visitors at once. */
section { opacity: 1 !important; transform: none !important; }