/* Hymns UI — Long Haul-aligned light + dark themes
   - Light: off-white bg, seagreen links, deep-blue headings
   - Dark: near-black bg, soft cards, minty seagreen links
*/

/* Fonts to match the main site */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,800");
@import url("https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic");

/* ===== Light (default) ==================================================== */
:root{
  /* primary: seagreen; secondary: #233E5B */
  --bg:#fdfdfd;          /* page background (off-white) */
  --fg:#111111;          /* near-black body text */
  --muted:#666666;       /* muted/supporting text */
  --card:#ffffff;        /* white cards/containers */
  --border:#e8e8e8;      /* light gray borders */
  --link:#2e8b57;        /* seagreen (primary) */
  --accent:#2e8b57;      /* reuse seagreen for accents */
  --heading:#233E5B;     /* deep blue (secondary) */
}

*{box-sizing:border-box}

html{
  color-scheme: light dark; /* allow UA controls to theme */
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 "Open Sans", Helvetica, Arial, sans-serif; /* body font */
}

h1,h2,h3,h4,h5,h6{
  font-family:"PT Serif", Georgia, Times, serif;           /* headings font */
  color:var(--heading);
  line-height:1.25;
  margin:.5rem 0 .75rem;
  font-weight:700;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.topbar{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--card);
  position:sticky;top:0;z-index:10
}
.brand{display:flex;gap:.5rem;align-items:center}
.logo{font-size:1.1rem;color:var(--accent)}
.title{
  font-family:"PT Serif", Georgia, Times, serif;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--heading);
}

.controls{
  display:flex;gap:.5rem;align-items:center;width:100%;max-width:860px;justify-content:flex-end;flex-wrap:wrap
}
.controls select,.controls input,.controls button{
  background:var(--card);color:var(--fg);border:1px solid var(--border);
  padding:.45rem .6rem;border-radius:999px   /* pill-like */
}
.controls input{flex:1;min-width:0}
.controls button{cursor:pointer}

.container{max-width:860px;margin:0 auto;padding:1rem}
.content{
  background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.03)
}
.hidden{display:none}

.hymn-list{list-style:none;margin:0;padding:0}
.hymn-list li{
  display:grid;grid-template-columns:6ch 1fr;gap:.75rem;padding:.5rem .25rem;
  border-bottom:1px dashed var(--border);align-items:baseline
}
.hymn-list li:last-child{border-bottom:none}
.hymn-no{display:inline-block;min-width:3.5rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.hymn-title{font-weight:600}
.muted{color:var(--muted);font-size:.85rem;margin:.25rem 0 .5rem}

.detail-nav{display:flex;gap:.5rem;align-items:center;padding:.5rem;border-bottom:1px solid var(--border)}
.detail-nav .spacer{flex:1}
.detail-nav button{
  background:var(--card);color:var(--fg);border:1px solid var(--border);
  padding:.35rem .6rem;border-radius:.5rem;cursor:pointer
}

.meta{color:var(--muted);font-size:.9rem;margin:.25rem 0 1rem}
.lyrics{line-height:1.85;font-size:1.05rem}
.lyrics .stanza{margin:0 0 1rem 0}
.lyrics .stanza-number{color:var(--muted);font-weight:700;margin-right:.5rem}
.lyrics .chorus{
  border-left:3px solid var(--accent);
  padding:.25rem .75rem;margin:.75rem 0 .75rem 0;
  background:linear-gradient(to right, rgba(46,139,87,.08), transparent) /* seagreen glow */
}
.lyrics .label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.25rem}

.footer{
  max-width:860px;margin:1rem auto;padding:0 1rem;color:var(--muted);
  text-align:center;border-top:1px solid var(--border);padding-top:.75rem
}

/* ===== Dark mode (auto, like the main site) =============================== */
@media (prefers-color-scheme: dark){
  :root{
    /* Match main site's "black" look */
    --bg:#000000;        /* page background: true black */
    --fg:#e6e6e6;        /* body text */
    --muted:#a0a7b1;     /* secondary text */
    --card:#0b0b0b;      /* card panels slightly above black */
    --border:#1a1a1a;    /* subtle dark divider */
    --link:#7fd4a7;      /* minty seagreen for contrast */
    --accent:#7fd4a7;    /* keep accent same as link */
    --heading:#ffffff;   /* headings pop on black */
  }

  .content{ box-shadow:none; }

  .lyrics .chorus{
    border-left:3px solid var(--accent);
    background:linear-gradient(to right, rgba(127,212,167,.13), transparent);
  }
}

/* ===== Responsive & Print ================================================= */
@media (max-width:640px){
  .controls{flex-direction:column;align-items:stretch}
  .controls select,.controls input,.controls button{width:100%}
}
@media (max-width:600px){
  .hymn-list li{grid-template-columns:4ch 1fr}
}
@media print{
  .topbar,.detail-nav,.footer{display:none}
  .content{border:none;box-shadow:none}
}

.logo {
  height: 32px;   /* adjust size as needed */
  width: auto;    /* keeps proportions */
  vertical-align: middle;
  margin-right: 0.5rem; /* space between logo and text */
}

/* --- subbar (sort + favorites) --- */
.subbar{
  display:flex;
  align-items:center;
  justify-content:center;   /* center both controls */
  gap:1rem;                 /* spacing between dropdown and button */
  padding:.5rem 1rem;
  border-bottom:1px solid var(--border);
  background:var(--card);
  position:sticky;
  top:3.25rem;
  z-index:9;
}
.subbar select,
.subbar button{
  background:var(--card);
  color:var(--fg);
  border:1px solid var(--border);
  padding:.35rem .6rem;
  border-radius:.5rem;
  cursor:pointer;
}
.subbar button[aria-pressed="true"]{
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
}

/* --- star favorite button on each list item --- */
.hymn-list li{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.fav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75rem;
  height:1.75rem;
  border:1px solid var(--border);
  border-radius:.5rem;
  background:var(--card);
  cursor:pointer;
  flex:0 0 auto;
}
.fav-btn .bi{
  font-size:1rem;
  line-height:1;
}
.fav-btn .bi-star-fill{
  color:var(--accent);
}
.fav-btn:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* tighten number/title after we inserted the star button */
.hymn-no{
  margin-left:.25rem;
}

/* --- Mobile tweaks: compact hymn list & reduce wrapping --- */
@media (max-width: 600px){
  .hymn-list li{
    gap:.25rem;                 /* smaller gap between star / number / title */
  }
  .fav-btn{
    width:1.35rem;
    height:1.35rem;
  }
  .fav-btn .bi{
    font-size:.85rem;
  }
  .hymn-no{
    font-size:.9rem;
    margin-left:.15rem;         /* tighter than before */
    flex:0 0 auto;              /* number doesn't stretch */
  }
  .hymn-title{
    font-size:.92rem;           /* slightly smaller on mobile */
    line-height:1.15;
    flex:1 1 0;                 /* let title take remaining space */
    min-width:0;                /* required for flex ellipsis/clamp to work */
    display:-webkit-box;        /* 2-line clamp on Blink/WebKit */
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow:hidden;            /* hide overflow after 2 lines */
  }
}

/* Extra-small phones */
@media (max-width: 380px){
  .hymn-title{
    font-size:.88rem;           /* nudge smaller on very narrow screens */
  }
  .hymn-no{
    font-size:.85rem;
  }
}


:root{
  /* fallback; JS below will set the real height */
  --header-h: 56px;
  --sa-top: env(safe-area-inset-top, 0px);
}

/* keep your header sticky if it already is */
header{
  position: sticky;
  position: -webkit-sticky; /* iOS */
  top: var(--sa-top);
  z-index: 1003;
}

/* subbar sticks right under the header, everywhere */
.subbar{
  position: sticky;
  position: -webkit-sticky; /* iOS */
  top: calc(var(--header-h) + var(--sa-top));
  z-index: 1002;            /* below header, above content */
}