/* ==========================================================================
   Public website styles  (loaded from layout.php)  -  mobile first
   Sections: 1 Base  2 Header/nav  3 Layout  4 Song & category lists  5 Song page
             6 Singers  7 Static pages  8 Footer  9 Breakpoints
   ========================================================================== */

/* 1. Base ------------------------------------------------------------------ */
:root{
  --brand:#0f3b3f;        /* dark teal  */
  --brand-2:#0a2a30;
  --accent:#dc143c;       /* crimson section bars */
  --link:#0b5d1e;
  --text:#111;
  --muted:#5b6670;
  --line:#e3e7ea;
  --bg:#f3f5f7;
  --card:#fff;
  --radius:10px;
  --shadow:0 2px 8px rgba(16,40,50,.08);
  --shadow-lg:0 8px 22px rgba(16,40,50,.18);
  --ease:.18s ease;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#ffffff;color:var(--text);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid #1fb5a8;outline-offset:2px}

/* 2. Header / navigation / search ----------------------------------------- */
.top{background:#232323;text-align:center;padding:8px 10px;}
.top .logo{display:inline-block;line-height:0}
.top .logo:hover{text-decoration:none;opacity:.9}
.top img{height:70px;width:auto;max-width:100%}
.nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(#cd2f48, #9c0000);scrollbar-width:thin;border-bottom: 3px solid #6d4e06;}
.nav a{flex:1 0 auto;white-space:nowrap;text-align:center;color:#fff;padding:12px 16px;border-right:1px solid #12494f;transition:background var(--ease),color var(--ease)}
.nav a:hover,.nav a:focus-visible{background:var(--accent);color:#fff;text-decoration:none}
.sb{background:#e6e9ec;padding:10px;display:flex;justify-content:center;gap:6px}
.sb input{flex:1;max-width:420px;min-width:0;padding:9px 12px;border:1px solid #b8c0c6;border-radius:6px;font:inherit}
.sb button{padding:9px 16px;background:#12333b;color:#fff;border:0;border-radius:6px;cursor:pointer;font:inherit;transition:background var(--ease)}
.sb button:hover{background:var(--accent)}
.bc{background:#fff;border-bottom:1px solid var(--line);font-size:14px}
/* .bc .in{max-width:1200px;margin:0 auto;padding:9px 12px} */
.bc .in{margin:12px;}
.bc span{color:var(--muted)}

/* 3. Layout & headings ----------------------------------------------------- */
/* .wrap{max-width:1200px;margin:0 auto;padding:0 0 10px} */
.wrap{margin:0;}
.bar{background:linear-gradient(90deg,var(--accent),#b8102f);color:#fff;margin:8px 0 8px;padding:4px 12px;font-size:15px;font-weight:600;box-shadow:var(--shadow)}
.desc,.about{padding:10px;color:#444;text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.more{display:inline-block;margin:5px 4px 0px;padding:4px 9px;background:var(--brand);color:#fff;border-radius:10px;font-weight:600;transition:background var(--ease),transform var(--ease),box-shadow var(--ease)}
.more:hover{background:var(--accent);color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow)}

/* 4. Song lists, category lists, home grid -------------------------------- */
ul.songs,ul.cats{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
ul.songs li,ul.cats li{border-bottom:1px solid var(--line)}
ul.songs li:last-child,ul.cats li:last-child{border-bottom:0}

/* shared row look + hover effect */
ul.songs a,ul.cats a{display:flex;align-items:center;gap:12px;padding:9px 10px;color:var(--text);
  transition:background var(--ease),transform var(--ease),box-shadow var(--ease),padding-left var(--ease)}
ul.songs a:hover,ul.songs a:focus-visible,ul.cats a:hover,ul.cats a:focus-visible{background:#e9f7f6;box-shadow:inset 4px 0 0 var(--accent);text-decoration:none}
ul.songs img,ul.cats img{object-fit:cover;flex:none;background:#dfe5e8;transition:transform var(--ease),box-shadow var(--ease)}
ul.songs a:hover img,ul.cats a:hover img{transform:scale(1.06);box-shadow:0 3px 10px rgba(0,0,0,.25)}
ul.songs img{width:64px;height:64px}
ul.cats img{width:56px;height:56px}
ul.cats img.round{border-radius:0} /* singer photos: square like every other list; use 50% here for round photos */
ul.cats a{font-weight:700;font-size:15px}
ul.cats .d{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.t{font-weight:700;display:block;overflow-wrap:anywhere}
.m{color:var(--link);font-size:14px;display:block;overflow-wrap:anywhere}

/* Song lists with 2 songs per row:  .two = home sections (tablet + PC),  .multi = list pages (PC only)
   On mobile every list is one song per row. Rules live in the breakpoints section at the bottom. */

.pagination{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0;justify-content:center;margin:16px 0}
.pagination a{display:block;padding:7px 12px;border:1px solid #c9d1d6;border-radius:6px;background:#fff;color:var(--brand);transition:background var(--ease),color var(--ease)}
.pagination a:hover{background:var(--brand);color:#fff;text-decoration:none}
.pagination .active a{background:var(--brand);color:#fff;border-color:var(--brand)}

/* 5. Song page ------------------------------------------------------------- */
.sp{display:flex;flex-direction:column;gap:16px;padding:16px;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.poster{margin:0 auto;width:100%;max-width:250px;border-radius:14px;padding:6px;background:linear-gradient(135deg,#1fb5a8,var(--accent));box-shadow:var(--shadow-lg)}
.poster img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#0b1020}
.sinfo{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sinfo .row{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);background:#fff;transition:background var(--ease)}
.sinfo .row:nth-child(even){background:#f8fafb}
.sinfo .row:last-child{border-bottom:0}
.sinfo .row:hover{background:#e9f7f6}
.sinfo .k{flex:0 0 135px;font-weight:700;color:var(--brand)}
.sinfo .v{flex:1;min-width:0;overflow-wrap:anywhere}

.play{padding:16px;margin-top:14px;text-align:center;margin: 5px;}
.play audio{width:100%;max-width:520px}
.dl{display:inline-block;margin:12px 6px 0;padding:12px 28px;border-radius:30px;background:linear-gradient(90deg,#0b3a42,#13686f);color:#fff;font-weight:700;box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}
.dl:hover{background:linear-gradient(90deg,var(--accent),#b8102f);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg)}

.sh{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px 0 0}
.sh a{padding:9px 18px;border-radius:6px;color:#fff;font-weight:700;transition:transform var(--ease),box-shadow var(--ease),filter var(--ease)}
.sh a:hover{transform:translateY(-2px);box-shadow:var(--shadow);filter:brightness(1.08);text-decoration:none}
.wa{background:#25d366}.fb{background:#1877f2}.tg{background:#229ed9}

.rt{padding:16px;margin: 5px;}
.rt p{margin:0 0 10px}
.rt input[type=range]{width:100%}
.rt label{display:block;margin-top:10px}
.rbtn{padding:10px 18px;background:var(--brand);color:#fff;border:0;border-radius:6px;cursor:pointer;font:inherit;transition:background var(--ease)}
.rbtn:hover:not(:disabled){background:var(--accent)}
.rbtn:disabled{opacity:.7;cursor:default}

.faq{display:grid;gap:10px;margin: 5px;}
.qa{padding:12px 14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow var(--ease),transform var(--ease)}
.qa:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.qa h3{font-size:16px;margin:0 0 4px;color:var(--brand)}
.qa p{margin:0;color:#333}

.tags {background: #e6e9ec; padding: 8px; display: flex; justify-content: center; border-radius: 5px; margin: 5px;font-size: 13px;}

/* 6. Singers --------------------------------------------------------------- */
.sg{display:flex;align-items:center;gap:16px;padding:16px;margin-top:4px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.sg img{width:120px;height:120px;object-fit:cover;flex:none;background:#0b1020}
.sg h1{font-size:22px;line-height:1.25;margin:0 0 6px}
.sg p{margin:0 0 6px;color:var(--muted);overflow-wrap:anywhere}
.az{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px}
.az a{min-width:34px;padding:6px 9px;text-align:center;background:var(--card);border:1px solid #c9d1d6;color:var(--brand);font-weight:600;transition:background var(--ease),color var(--ease)}
.az a:hover,.az a.on{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 10px}
.chips a{padding:8px 14px;background:var(--card);border:1px solid #c9d1d6;color:var(--brand);transition:background var(--ease),color var(--ease),transform var(--ease)}
.chips a:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none;transform:translateY(-1px)}

/* 7. Static pages ---------------------------------------------------------- */
.page{padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-width:900px;margin:0 auto}
.page h2{font-size:18px;margin:18px 0 6px}
.page :first-child{margin-top:0}

/* 8. Footer ---------------------------------------------------------------- */
.ft{background:#16191d;color:#c3c9cf;padding:8px 10px;text-align:center;margin-top:16px;font-size:14px}
.ft a{color:#fff;margin:0 9px;white-space:nowrap;display:inline-block;padding:4px 0;transition:color var(--ease)}
.ft a:hover{color:#4fd1c5;text-decoration:none}
.ft p{margin:0px 0 0;color:#8a929a}

/* 9. Breakpoints ----------------------------------------------------------- */
/* Tablet + PC: content gets 12px side space; home song lists show 2 songs per row */
@media (min-width:600px){
  /* .wrap{padding:0 12px 10px} */
  .wrap{padding:0px;}
  ul.songs.two{display:grid;grid-template-columns:1fr 1fr}
  ul.songs.two li:nth-child(odd){border-right:1px solid var(--line)}
  ul.songs.two li:nth-last-child(2):nth-child(odd){border-bottom:0}
  .sp{flex-direction:row;align-items:flex-start;padding:20px;gap:22px;margin: 5px;}
  .poster{margin:0;flex:0 0 280px}
  .bar{font-size:16px}
}
/* PC: list pages also get 2 songs per row */
@media (min-width:900px){
  ul.songs.multi{display:grid;grid-template-columns:1fr 1fr}
  ul.songs.multi li:nth-child(odd){border-right:1px solid var(--line)}
  ul.songs.multi li:nth-last-child(2):nth-child(odd){border-bottom:0}
  .nav a{flex:1 1 auto}
}
/* Mobile: full screen width, 1 song per row, cards run edge to edge */
@media (max-width:599.98px){
  .top img{height:46px}
  .bar,.card,.sp,.sg,.play,ul.songs,ul.cats,.page{border-radius:0;border-left:0;border-right:0}
  .more{margin-left:10px}
  .desc,.about{padding:10px 12px}
  .faq,.sh,.chips,.az{padding-left:8px;padding-right:8px;margin: 5px;}
  .qa{border-radius:8px}
  .poster{max-width:260px}
  .sg img{width:84px;height:84px}
  .sg h1{font-size:19px}
}
@media (max-width:420px){
  .top img{height:40px}
  .sinfo .row{flex-direction:row;gap:3px}
  .sinfo .k{flex:none}
  .dl{padding:11px 22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Year filter on category pages ===== */
.yearbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;background:#f5f6f8;border-bottom:1px solid var(--line)}
.yearbar label{font-weight:700}
.yearbar select{padding:8px 12px;border:1px solid #b9c0c7;border-radius:6px;font:inherit;background:#fff;min-width:160px;max-width:100%;cursor:pointer}
.yearbar button{padding:8px 14px;border:0;border-radius:6px;background:var(--dark);color:#fff;font:inherit}
@media (hover:hover){.yearbar select:hover{border-color:var(--red)}}