:root{--accent:#0d6efd}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;min-height:100vh;display:flex;flex-direction:column}
body.artist-page{background-color:#f9f9f8}
.site-bg{background-color:#0b0b0b}
.card-img-top{height:200px;object-fit:cover}
.artist-hero{height:450px;object-fit:cover;object-position:center top;width:100%}
.video-meta{margin-top:1rem}
.vjs-big-play-centered .vjs-big-play-button{background:var(--accent)}

.faint-black {
    position: relative;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0.65) 70%, rgba(0, 0, 0, 0) 100%);
    padding: 1.5rem 0.75rem;
}
h1,
.navbar-brand {
    font-family: 'Dancing Script', cursive, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Artist card hover overlay */
.thumb-wrap{overflow:hidden;position:relative}
.thumb-wrap img{transition:transform .35s ease;display:block;width:100%}
.thumb-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.55) 100%);opacity:1;transition:opacity .22s ease;pointer-events:none}

.artist-profile-link {
    background-color: #006674;
    border-color: #006674;
}
.artist-profile-link:hover {
    background-color: #3fbecd;
    border-color: #3fbecd;
}

/* Caption placed over the image */
.thumb-overlay .thumb-caption{width:100%;padding:1.25rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.thumb-title{color:#fff;font-weight:700;margin:0;text-shadow:0 2px 6px rgba(0,0,0,0.6);font-size:1.25rem}
.thumb-bio{color:rgba(255,255,255,0.9);margin:0;font-size:1rem;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,0.45)}

/* Make the clickable thumbnail focus-visible for keyboard users */
.thumb-link:focus{outline:3px solid rgba(13,110,253,0.35);outline-offset:2px}

.card:hover .thumb-wrap img{transform:scale(1.06)}
.thumb-overlay i{transform:translateY(-6px);transition:transform .22s ease}
.card:hover .thumb-overlay i{transform:translateY(0)}

/* Round all card corners and ensure images are clipped */
.card{border-radius:0.75rem;overflow:hidden}
.card .thumb-wrap{border-radius:0}
.card .card-img-top, .card .thumb-wrap img{border-radius:0;display:block}

/* Homepage header background */
/* Full-page homepage background (applies only when body has .home-page) */
body.home-page{
	background-image: url('../images/site/worlds.jpg');
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

#homeHeader .display-5, #homeHeader .lead{color:#fff}

/* Artist page navbar background */
#artistNavbar{
  background-image: url('../images/site/worlds.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
}
#artistNavbar .navbar-brand h1{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.5);margin:0}
#artistNavbar .col-12 {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video page navbar background */
#videoNavbar{
  background-image: url('../images/site/worlds.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}
#videoNavbar .navbar-brand{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.5)}

/* Center the artist cards grid on the homepage */
#artistsRow{display:flex;flex-wrap:wrap;justify-content:center;margin-left:0;margin-right:0}
/* target the immediate children (column wrappers), since Bootstrap uses col-* classes */
#artistsRow > div{display:flex;justify-content:center;align-items:stretch;padding:0 0.5rem}
#artistsRow .card{width:100%;max-width:360px}

.spotify-button,
.spotify-button:hover {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(72, 88, 65, 255);
    color: #fff;
}

.logo {
    position: fixed;
    right: 0;
    bottom: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 12vmin;
    max-width: 160px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}