/* ============ tabs.css ==================*/
 /* ============ tabs.css ==================*/
 /* ============ tabs.css ==================*/
 /* General Styles */
.submenu-section { max-height: fit-content;   background-color: whitesmoke;  color: #000000; font-family: 'Roboto', sans-serif;
    padding-top: 70px; /* 60px to account for sticky tabs */
    padding-left: 40px; padding-right: 40px; padding-bottom: 60px;
}
/* Submenu Tabs */
.submenu-tabs {  display: flex;  justify-content: left;  gap: 20px; flex-wrap: wrap;  z-index: 100;
    background-color: whitesmoke; border-top: 0px whitesmoke;
    padding-top: 20px; padding-bottom: 20px;}
/* Tab Buttons STICKY TABS */
.sticky-tabs {
    position: sticky; align-items: left;  top: 50px; /* sticks to top of viewport */ padding-top: 20px; padding-bottom: 10px; z-index: 50;}

/*//////////// Tab Button Styles */
.tab-btn {
    background: none; border: none; font-family: 'Roboto', sans-serif; font-weight: 600;
    font-size: 40px; cursor: pointer; position: relative; transition: color 0.2s;
    color: #000000; /* default inactive color */
    padding-right: 2px;

}




/* Hover and Active States */
.tab-btn:hover { color: red; font-style: italic; padding-right: 4px;}
.tab-btn.active {font-style: italic; color: red;   /* active color */}
/* Optional: Add an underline for active tab */
.tab-btn.active::after {
    content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 3px; background-color: red; border-radius: 2px; transition: all 0.3s ease;}
.music-tab,
.video-tab,
.lyrics-tab {
    background-color: whitesmoke;
    color: #000000;
    font-family: 'Roboto', sans-serif;}
/* Tab Panels */
.tab-panel {display: none; animation: fadeIn 10s ease-in-out;}
.tab-panel.active { display: block;}
.tab-panel  { list-style: none; padding: 0; margin: 0;}

/* Hide all panels */
.tab-panel { display: none;}
/* Show active one */
.tab-panel.active { display: block;}




/*///////////////// MUSIC TAB -  GRID //////////////////////*/
/* Grid */
.music-grid { display: grid;  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; margin: 0 auto; max-width: 1400px;}
.music-item {  text-align: left;  /* keeps text left-aligned */}
.music-cover { width: 100%; aspect-ratio: 1 / 1;  /* perfect square */  overflow: hidden; display: flex;  align-items: center;  justify-content: center;  background-color: #000; /* optional black background */}
.music-cover img {  width: 100%;  height: 100%;  object-fit: cover;  object-position: center;  /* perfectly centered crop */  display: block; transition: all 0.3s ease;}
.music-cover img:hover {  filter: brightness(0.9) saturate(1.2);}

/* Title below image */
.music-title {  margin-top: 8px; font-size: 16px;  color: #000000f6;  font-family: 'Roboto', sans-serif;  font-weight: 400;}


/*//////////// VIDEO TAB -  GRID //////////////////////////*/
.video-grid { display: grid;  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 40px; margin: 0 auto; max-width: 1400px;}
.video-item {text-align: left;  /* keeps text left-aligned */}
.video-cover { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;}
.video-cover img { width: 100%;  height: 100%;  object-fit: cover; object-position: center; /* IMPORTANT */ display: block; transition: all 0.3s ease;}
.video-cover img:hover { filter: brightness(0.9) contrast(1.2);}

/* Title below image */
.video-title { margin-top: 8px; font-size: 16px; color: #000000f6;  font-family: 'Roboto', sans-serif; font-weight: 400;}

/* =========================
   LYRICS TAB
========================= */
.lyrics-grid { display: grid;  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 40px; margin: 0 auto; max-width: 1400px;}
.lyrics-tab {
    min-height: auto; color: black;  max-width: 100%;  margin: 0 auto; text-align: left;}
/* Song Block */
.lyrics-block {
    margin-top: 0px;  margin-bottom: 0px; border-top: rgb(218, 218, 218) solid 1px; transition: background-color 0.3s ease, color 0.3s ease;}    
/* Clickable Song Title */
.lyrics-header {
  font-size: 40px; font-weight: 500; cursor: pointer; transition: color 0.3s ease; line-height: 2; margin-top: 8px; padding-right: 5px;}
.lyrics-header:hover { color: red; font-style: italic;}
/* Make header flex so we can place indicator */
.lyrics-header { display: flex; justify-content: space-between; align-items: center;}
/* Default indicator */
.lyrics-header::after {
    content: "+"; font-size: 40px; transition: transform 0.2s ease;}
/* When active change to minus */
.lyrics-block.active .lyrics-header::after { content: "–";}
/* Hide ONLY Lyrics Text (instant toggle) */
.lyrics-text {  display: none;}
/* Active State – show lyrics text */
.lyrics-block.active .lyrics-text { display: block;margin-top: 5px;}
/* Credits (always visible) */
.lyrics-credits {font-size: 30px; margin-bottom: 10px;line-height: 1.4;}
/* Lyrics Text */
.lyrics-text {font-size: 20px;line-height: 1.5;margin-bottom: 20px;}



/* Mobile: 1 column */
@media (max-width: 768px) {
    .submenu-section { padding-top: 60px;} /* reduce top padding for mobile */
    .music-grid {  grid-template-columns: 1fr;  gap: 20px;}
    .video-grid { grid-template-columns: 1fr; gap: 20px;}
    .tab-btn {font-size: 26px; }
    .sticky-tabs { gap: 8px;}
    .lyrics-header { font-size: 22px; }
    .lyrics-header::after { font-size: 26px; }
    .lyrics-credits { font-size: 18px; }
    .lyrics-text { font-size: 16px; }
    .submenu-section { padding-left: 20px; padding-right: 20px;} /* reduce padding for mobile */
}

@media (max-width: 480px) {
    .tab-btn { font-size: 22px; }
    .sticky-tabs { gap: 6px;}
    .lyrics-header { font-size: 18px; }
    .lyrics-header::after { font-size: 22px; }
    .lyrics-credits { font-size: 16px; }
    .lyrics-text { font-size: 14px; }
}