/* =========================================================
   BSFM — Custom Styles (responsive, readable, simple)
   Drop-in replacement for static/custom.css
   ========================================================= */

/* ---------- Global / Layout ---------- */
* { box-sizing: border-box; }
:root { --space: clamp(12px, 2vw, 22px); }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: #111;
}

/* Wider container so lyrics don’t wrap too early on desktop */
.container {
  width: min(100% - 2*var(--space), 1100px);
  margin-inline: auto;
  padding: var(--space) 0;
}

/* Fluid headings */
h1 { font-size: clamp(1.4rem, 3.5vw, 2.3rem); line-height: 1.2; margin: 0 0 .6rem; }
h2 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); line-height: 1.25; margin: .8rem 0 .3rem; }

/* ---------- Song List (original aesthetic preserved) ---------- */
.song-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.song-item h2 { margin: 0; }

.song-item h2 a {
  color: black;
  text-decoration: none;
  font-size: 4.9rem;
  line-height: 1.35;
}
.song-item h2 a:hover {
  color: gray;
  text-decoration: underline;
}

/* A–Z navigation + grouped list (if used on /songs/) */
.az-nav {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .25rem 0 1rem;
}
.az-nav a {
  display: inline-block;
  padding: .3rem .55rem;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  text-decoration: none;
  color: #222;
  background: #fafafa;
  font-size: .95rem;
}
.az-nav a:hover { background: #f0f0f0; }
.az-disabled { opacity: .45; pointer-events: none; }

.letter-group { margin: 1.25rem 0; }
.letter { font-size: clamp(1rem, 2.5vw, 1.25rem); margin: 0 0 .4rem; color: #444; }

.song-list-az {
  list-style: none; padding: 0; margin: 0;
  columns: 1; column-gap: 1.2rem;
}
.song-list-az li { break-inside: avoid; margin: .15rem 0; }
.song-list-az a { text-decoration: none; color: #111; font-size: 1.05rem; }
.song-list-az a:hover { text-decoration: underline; color: #555; }

@media (min-width: 700px)  { .song-list-az { columns: 2; } }
@media (min-width: 1100px) { .song-list-az { columns: 3; } }

/* ---------- Buttons (Back to Songs / Add to Service) ---------- */
.button-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.5rem;
}
.btn {
  display: inline-block;
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
  min-height: 44px;                 /* touch-friendly */
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-primary { background: #0077cc; color: #fff; border-color: #006bb3; }
.btn-primary:hover { background: #006bb3; }
.btn-secondary { background: #f0f0f0; color: #333; border-color: #ccc; }
.btn-secondary:hover { background: #e0e0e0; }
.btn:visited { color: inherit; }     /* no purple after click */

/* ---------- Lyrics (preserve newlines, readable sizes) ---------- */
.song-lyrics {
  white-space: pre-wrap;
  font-size: 1.3rem;   /* base (mobile/smaller screens) */
  line-height: 1.45;   /* comfortable at this size */
  margin-top: 0;       /* avoid big gap under buttons */
}

/* If your lyrics render as <p>, keep stanza spacing pleasant */
/* (safe even when using pre-wrap; browsers ignore p rules if no <p>) */
.song-lyrics p { margin: 0; line-height: 1.45; }
.song-lyrics p + p { margin-top: 1.5rem; }  /* stanza gap */

/* Scale lyrics and list titles up on larger screens */
@media (min-width: 768px) {
  .song-item h2 a { font-size: 1.5rem; }
  .song-list-az a { font-size: 1.35rem; line-height: 1.9 }
  .song-lyrics { font-size: 1.35rem; line-height: 1.55; }
}
@media (min-width: 1200px) {
  .song-item h2 a { font-size: 1.75rem; }
  .song-lyrics { font-size: 1.35rem; line-height: 1.6; }
}

/* ---------- Songs toolbar (filter box) if present ---------- */
.songs-toolbar {
  display: grid;
  gap: .5rem;
  margin: .5rem 0 1rem;
}
#song-filter {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
}

/* ---------- Floating Service Panel (uses your existing markup) ---------- */
#set-mini { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999; }
#set-mini .card {
  background: #fff;
  border: 1px solid #ddd; border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  padding: .75rem;
  max-width: 360px;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header — keep count snug with label; push toggle to the right */
#set-mini h3 {
  margin: .2rem 0 .5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
#set-mini h3 .label { font-weight: 700; }
#set-mini h3 button { margin-left: auto; } /* no huge gap around (7) */
#set-mini .panel-body { margin-top: .25rem; }

#set-mini ol { margin: .5rem 0; padding-left: 1.25rem; max-height: 40vh; overflow: auto; }
#set-mini .row { display: flex; gap: .35rem; align-items: center; margin: .2rem 0; }
#set-mini .row a { flex: 1 1 auto; text-decoration: none; color: #111; }

#set-mini .bar { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
#set-mini .bar button,
#set-mini .row button {
  border: 1px solid #ccc; background: #f7f7f7;
  border-radius: 8px; padding: .35rem .6rem; cursor: pointer;
}

/* Collapsed state toggle (JS adds .collapsed) */
#set-mini.collapsed .panel-body { display: none; }

/* Expanded: full-width on small screens (unchanged behavior) */
@media (max-width: 640px) {
  #set-mini:not(.collapsed) { left: .5rem; right: .5rem; bottom: .5rem; }
  #set-mini:not(.collapsed) .card { max-width: none; }
}

/* Collapsed: small pill on the right for phones/tablets */
@media (max-width: 900px) {
  #set-mini.collapsed {
    left: auto;              /* tuck to the right */
    right: .75rem;
    bottom: .75rem;
  }
  #set-mini.collapsed .card {
    max-width: none;
    padding: .45rem .6rem;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
  }
  /* Hide the big label; keep just the button as the “pill” */
  #set-mini.collapsed .label { display: none; }
  #set-mini.collapsed .panel-body { display: none; }
  #set-mini.collapsed h3 {
    margin: 0;
    display: flex;
    align-items: center;
  }
  #set-mini.collapsed #set-toggle {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    padding: .45rem .6rem;
    cursor: pointer;
  }
}

.az-nav {
  position: sticky;
  top: 0;
  background: white; /* or match your site background */
  z-index: 50;
  padding: 0.5rem 0;
}