/* =================================================================
   GandiWave — app.css
   Loaded with media="(display-mode: standalone)", so none of this ever
   applies on the normal website. It only styles the INSTALLED app.
   ================================================================= */

/* Website-only parts are hidden in the app */
.site-header,
.site-footer,
.install-bar,
.nav-search-row{ display: none !important; }

/* ---- New top bar: brand + SONGS | NEWS | RADIO ---- */
.gw-app-topbar{
  display: block;
  position: sticky;
  top: 0;
  z-index: 450;
  background: rgba(14, 8, 28, 0.94);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  padding-top: env(safe-area-inset-top, 0px);
}
/* Thin red-to-blue line under the top bar */
.gw-app-topbar::after{
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #E11D48, #7C3AED 50%, #2563EB);
}
.gw-app-topbar .logo{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 4px;
  font-size: 18px;
  color: #F3ECE2;
}
.gw-app-tabs{ display: flex; }
.gw-app-tabs a{
  flex: 1;
  text-align: center;
  padding: 11px 0 10px;
  font: 700 13px/1 'Space Grotesk', Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B5A4AD;
  border-bottom: 3px solid transparent;
}
.gw-app-tabs a.is-active{ color: #FFFFFF; border-bottom-color: #D9B87A; }

/* Search page: show the search field (the website header's own is hidden) */
.gw-app-topbar.is-search ~ .nav-search-row{
  display: flex !important;
  margin: 12px auto;
}
.gw-app-topbar.is-search ~ .nav-search-row .gw-acct{ display: none; }

/* ---- Bottom tab bar ---- */
.gw-app-tabbar{
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(14, 8, 28, 0.96);
  border-top: 2px solid;
  border-image: linear-gradient(90deg, #E11D48, #7C3AED 50%, #2563EB) 1;
}
.gw-app-tabbar a{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #9C8B96;
  font: 600 11px/1 'Inter', Arial, sans-serif;
}
.gw-app-tabbar a.is-active{ color: #D9B87A; }
.gw-app-tabbar svg{ width: 22px; height: 22px; display: block; }

/* The player bar sits just above the tab bar; page content gets room for both */
.gw-player-bar{ bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
body{ padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
body:has(.gw-player-bar.is-visible){ padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 480px){
  body:has(.gw-player-bar.is-visible){ padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Song page: keep the short, app-style version ---- */
.breadcrumb-visible,
.song-description-block,
.song-playlist-tags,
.song-artist-stats{ display: none !important; }

/* App feel */
html{ -webkit-tap-highlight-color: transparent; }
body{ overscroll-behavior-y: contain; }