@import "./components.css";
@import "./pages_1.css";
@import "./pages_2.css";

.site-footer {
    text-align: center;
    padding: 16px 16px 25px 16px;
    font-size: 14px;
    color: #aaa;
    background: #0b0b0b;
    margin-left: 0;
    margin-top: auto;
}

.site-footer a {
  color: #FFC600;
  margin: 0 var(--space-lg);
  text-decoration: none;
  transition: all 0.2s ease;
}

.site-footer a:hover {
  color: #FFD700;
  transform: translateY(-1px);
}

.site-footer.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.site-footer.has-player {
  margin-bottom: 65px;
}

/* Queue/About layouts already leave enough room above the dock on desktop. */
@media (min-width: 861px) {
  body.page-queue .site-footer.has-player,
  body.page-about .site-footer.has-player {
    margin-bottom: 0;
  }
}


.legal-box h2 {
  color: #FFC600;
  margin-bottom: var(--space-4xl);
}

.legal-links a {
  color: #FFC600;
  margin: 0 var(--space-lg);
  display: inline-block;
  transition: all 0.2s ease;
}

.legal-links a:hover {
  color: #FFD700;
  transform: scale(1.05);
}

#accept-legal {
  margin-top: var(--space-4xl);
  padding: var(--space-md) 30px;
  background: #FFC600;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s ease;
}

#accept-legal:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/* Responsive for legal modal */
@media (max-width: 768px) {
  .legal-box {
    padding: var(--space-4xl);
    border-radius: 8px;
  }

  .legal-box h2 {
    font-size: 1.4rem;
    margin-bottom: var(--space-3xl);
  }

  .legal-links a {
    margin: 0 var(--space-sm);
    font-size: 0.9rem;
  }

  #accept-legal {
    padding: var(--space-lg) var(--space-4xl);
    font-size: 0.9rem;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.app-purpose {
  max-width: 720px;
  margin: var(--space-6xl) auto;
  padding: 0 var(--space-4xl);
  color: #EAEAEA;
}

.app-purpose h1 {
  color: #FFC600;
  font-size: 32px;
  margin-bottom: var(--space-md);
}

.app-purpose p {
  font-size: 16px;
  line-height: 1.6;
  color: #CCCCCC;
}


.homepage-intro {
  max-width: 720px;
  margin: var(--space-6xl) auto;
  padding: 0 var(--space-4xl);
  padding-left: 240px;
  color: #EAEAEA;
  text-align: center;
}

.homepage-intro h1 {
  color: #FFC600;
  font-size: 32px;
  margin-bottom: var(--space-md);
}

.homepage-intro p {
  font-size: 16px;
  line-height: 1.6;
  color: #CCCCCC;
  margin-bottom: var(--space-3xl);
}

.legal-inline-links {
  margin-top: var(--space-4xl);
  font-size: 14px;
}

.legal-inline-links a {
  color: #FFC600;
  text-decoration: none;
  margin: 0 var(--space-lg);
  transition: all 0.2s ease;
}

.legal-inline-links a:hover {
  color: #FFD700;
  text-decoration: underline;
}

.legal-inline-links span {
  color: #CCCCCC;
}

/* ==========================================================================
   Base Styles - Reset, Typography, and Global Defaults
   ==========================================================================
   This file establishes the foundational styles for the application,
   including CSS reset, typography rules, and utility classes.
*/

/* ==========================================================================
   CSS Reset
   ==========================================================================
   Normalizes styles across browsers and establishes box-sizing rules
*/

/* Universal box-sizing reset */
* {
  box-sizing: border-box;
}

/* Remove default focus outline from all elements */
*:focus {
  outline: none;
  box-shadow: none !important;
}

/* Image reset - ensures images don't overflow containers */
img {
  display: block;
  max-width: 100%;
}

/* Button reset - inherits font family from parent */
button {
  font-family: inherit;
}

/* ==========================================================================
   Typography
   ==========================================================================
   Core typography styles for headings, paragraphs, and links
*/

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 16px;
}

/* Self-hosted typography (CSP safe) */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SpaceGrotesk-400.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SpaceGrotesk-500.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SpaceGrotesk-600.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Manrope-500.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Manrope-600.woff2") format("woff2");
}

@font-face {
  font-family: "jvmiyo.pro-lightitalic";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/jvmiyo.pro-lightitalic.ttf") format("truetype");
}

/* Heading styles - consistent weight and spacing */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0em 0 0.5em 0;
  line-height: 1.2;
}

/* Individual heading sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Utility class for hidden elements */
.hidden {
  display: none;
}

/* Paragraph styling with consistent line height */
p {
  margin: 0 0 1em 0;
  line-height: 1.6;
}

/* Link base styles with transition */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Link hover state */
a:hover {
  color: var(--accent);
}

/* Text color utility classes */
.text-primary { color: #ffffff; }
.text-muted { color: rgba(255,255,255,0.65); }

/* ==========================================================================
   Player Controls
   ==========================================================================
   Glassmorphism effect for player control bars
*/

.player-controls {
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.55);
}

/* ==========================================================================
   Layout
   ==========================================================================
   Core layout structure for pages and containers
*/

/* Main page container - handles scrolling and animations */
#page {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  animation: pageEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ==========================================================================
   Image Container
   ==========================================================================
   Standard image wrapper with consistent aspect ratio and cropping
*/

.image-container {
  width: 72px;          /* Default width - adjust per context */
  height: 72px;         /* Maintains square aspect ratio */
  border-radius: 12px;
  overflow: hidden;     /* Critical: contains scaled image */
  flex-shrink: 0;
  position: relative;
}

/* Image within container - zooms and centers for consistent display */
.image-container img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.3);
  top: -10%;
}

/* ==========================================================================
   Design Tokens - Color, Spacing, Typography, and Animation Variables
   ========================================================================== */

/* --------------------------------------------------------------------------
   Color Tokens
   --------------------------------------------------------------------------
   These variables define the core color palette for the application.
   All colors are centralized here for consistent theming across the app.
*/

:root {
  /* Background Colors - deeper, richer darks for modern dark theme */
  --bg-main: #050508;           /* Primary page background */
  --bg-panel: #0c0c10;         /* Panel/section backgrounds */
  --bg-card: #12121a;          /* Card component backgrounds */
  --bg-hover: #1a1a24;         /* Hover state backgrounds */
  --bg-overlay: rgba(0, 0, 0, 0.7);         /* Modal/overlay backgrounds */
  --bg-glass: rgba(18, 18, 26, 0.8);         /* Glassmorphism effect */
  --bg-input: rgba(255, 255, 255, 0.05);    /* Form input backgrounds */

  /* Text Colors - hierarchical color system */
  --text-main: #f5f5f7;        /* Primary text (headings, body) */
  --text-muted: #a0a0a6;       /* Secondary text (captions, metadata) */
  --text-secondary: #c0c0c6;   /* Tertiary text (descriptions) */
  --font-lyrics: "Space Grotesk", "Manrope", "Segoe UI", sans-serif; /* Expressive lyric typography */

  /* Brand/Accent Colors - primary action color (orange) */
  --accent: #ff4d1a;            /* Primary brand color */
  --accent-hover: #ff6b3d;      /* Hover state for accent */
  --accent-light: rgba(255, 77, 26, 0.15);   /* Light accent for backgrounds */
  --accent-glow: rgba(255, 77, 26, 0.4);     /* Glow effect color */
  --accent-rgb: 255, 77, 26;   /* RGB values for rgba() usage */

  /* Secondary Accent Colors - blue accent */
  --accent-secondary: #0066ff;
  --accent-secondary-light: rgba(0, 102, 255, 0.15);

  /* Glassmorphism Surface Tokens */
  --surface: rgba(18, 18, 26, 0.85);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-hover: rgba(255, 255, 255, 0.05);

  /* --------------------------------------------------------------------------
     UI Tokens - Borders, Shadows, and Border Radius
     --------------------------------------------------------------------------
  */

  /* Border Radius - consistent corner rounding */
  --radius: 16px;              /* Standard component radius */
  --radius-sm: 10px;            /* Small components */
  --radius-xs: 6px;             /* Very small elements */
  --radius-full: 9999px;        /* Pill-shaped/circles */

  /* Border Tokens */
  --border: 0.5px solid rgba(255, 255, 255, 0.04);
  --border-accent: 0.5px solid rgba(255, 77, 26, 0.2);

  /* Shadow Tokens - depth hierarchy */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);           /* Default shadow */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);        /* Subtle shadow */
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3);       /* Prominent shadow */
  --shadow-glow: 0 0 20px rgba(255, 77, 26, 0.1);   /* Accent glow */
  --shadow-hover-stack: inset 0 0 6px 1px rgba(255, 77, 26, 0.1), 2px 2px 80px 0 rgb(255 255 255 / 7%);

  /* Backdrop Blur - glassmorphism effect */
  --backdrop-blur: blur(20px);

  /* Layout Tokens */
  --navbar-height: 70px;       /* Fixed navbar height */

  /* --------------------------------------------------------------------------
     Spacing Tokens - Consistent padding and margins
     --------------------------------------------------------------------------
     Uses a geometric scale for visual harmony
  */
  --space-xs: 6px;              /* 6px - tight spacing */
  --space-sm: 10px;             /* 10px - small spacing */
  --space-md: 16px;            /* 16px - medium spacing (baseline) */
  --space-lg: 20px;             /* 20px - large spacing */
  --space-xl: 24px;             /* 24px - extra large */
  --space-2xl: 28px;            /* 28px - 2x extra large */
  --space-3xl: 36px;            /* 36px - 3x extra large */
  --space-4xl: 52px;            /* 52px - section spacing */
  --space-5xl: 60px;            /* 60px - large section spacing */
  --space-6xl: 76px;            /* 76px - hero/section spacing */
  --space-7xl: 92px;            /* 92px - major section spacing */
  --space-8xl: 124px;           /* 124px - page margin spacing */

  /* --------------------------------------------------------------------------
     Animation Tokens - Consistent motion design
     --------------------------------------------------------------------------
     Using cubic-bezier curves for smooth, natural-feeling animations
  */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);      /* Quick interactions */
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);  /* Standard transitions */
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);     /* Slower transitions */
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);  /* Bouncy/springy */
  --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce effect */
}

/* ==========================================================================
   Keyframe Animations
   ==========================================================================
   Reusable animation definitions used throughout the application
*/

/* Fade In - subtle entrance animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Scale - zoom-in fade effect */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide In Left - slide from left edge */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ==========================================================================
   Layout Styles - Global Shell, Navigation, and App Structure
   ==========================================================================
   This file defines the core layout structure for the application,
   including the global shell, navbar, side menu, page containers,
   and player dock positioning.
*/

/* ==========================================================================
   Global Styles
   ==========================================================================
*/

body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Glow effect color variables */
:root {
  --glow-a-1: rgba(255, 77, 26, 0.12);
  --glow-a-2: rgba(0, 212, 255, 0.08);
  --glow-b-1: rgba(255, 150, 50, 0.1);
  --glow-b-2: rgba(255, 77, 26, 0.15);
}

/* ==========================================================================
   Background & Selection
   ==========================================================================
   Global background gradient and text selection styling
*/

/* Absolute black base with subtle gradient overlay */
html, body {
  background: linear-gradient(180deg, #050508 0%, #0a0a12 50%, #050508 100%);
  background-attachment: fixed;
  color: var(--text-main);
  scroll-behavior: smooth;
}

/* Selection styling with accent color */
::selection {
  background: rgba(255, 77, 26, 0.3);
  color: #fff;
}

/* ==========================================================================
   Navigation Bar
   ==========================================================================
   Fixed top navigation with glassmorphism effect
*/

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  background: var(--bg-glass);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2xl);
  z-index: 1000;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-normal);
}

/* Accent border glow at bottom of navbar */
#navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 77, 26, 0.3), transparent);
}

/* ==========================================================================
   App Layout
   ==========================================================================
   Main application shell structure
*/

.app-shell {
  display: flex;
  align-items: stretch;
  margin-top: var(--navbar-height);
  min-height: calc(100vh - var(--navbar-height));
}

.app-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin-left: 180px;
}

.main-row {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ==========================================================================
   Overlay
   ==========================================================================
   Full-screen dimming overlay for modals and menus
*/

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;   /* IMPORTANT: clicks pass through when hidden */
  transition: opacity 0.3s;
  z-index: 1000;
}

#overlay.active {
  opacity: 1;
  pointer-events: auto;  /* clickable only when visible */
}

/* ==========================================================================
   Select Dropdown Dark Mode
   ==========================================================================
   Dark mode styling for native select dropdowns and their options
*/

select {
  background-color: var(--bg-panel);
  color: var(--text-main);
}

select option {
  background-color: var(--bg-panel);
  color: var(--text-main);
  padding: 8px 12px;
}

select option:hover,
select option:focus,
select option:checked {
  background-color: var(--bg-hover);
  color: var(--accent);
}

select option:disabled {
  color: var(--text-muted);
}



/* ==========================================================================
   Page Container
   ==========================================================================
   Main content area with smooth scroll and page transition animations
*/

#page {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  animation: pageEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page component base animation */
.page {
  animation: pageEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page exit animation */
.page.closing {
  animation: pageExit 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quick enter animation for navigation */
.page.page-enter {
  animation: pageEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Page Animations
   ==========================================================================
   Smooth transition effects for page navigation
*/

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
    filter: blur(4px);
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutFromBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ==========================================================================
   Player Dock
   ==========================================================================
   Fixed bottom music player with glassmorphism and expand functionality
*/

#player-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: var(--bg-glass);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-top: var(--border);
  z-index: 1000;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 0, 0, 0.4);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  /* justify-content: space-between; removed to allow centering */
  padding: 0 var(--space-lg);
  gap: var(--space-md);
}

#buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  min-width: 0;
}

/* Visible player dock state */
#player-dock.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Hidden player dock state */
#player-dock:not(.visible) {
  transform: translateY(100%);
}

/* Player hover glow effect */
#player-dock:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* ==========================================================================
   Footer
   ==========================================================================
   Site footer styling
*/

.footer {
  margin-top: var(--space-3xl);
  padding: var(--space-lg);
  text-align: center;
  font-size: 14px;
  color: #aaa;
}

.footer a {
  color: #FFC600;
  text-decoration: none;
  margin: 0 var(--space-xs);
}

.footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Ambient Glow Effects
   ==========================================================================
   Background ambient lighting effects
*/

.ambient-glow {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(800px circle at 20% 20%, var(--g1), transparent 60%),
    radial-gradient(600px circle at 80% 80%, var(--g2), transparent 60%),
    radial-gradient(400px circle at 50% 50%, rgba(255, 77, 26, 0.03), transparent 50%);

  filter: blur(60px);
  transition: opacity 2s ease;
  animation: ambientPulse 8s ease-in-out infinite;
}

@keyframes ambientPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Glassmorphism utility classes */
.player,
.navbar,
.controls {
  background: var(--bg-glass);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

/* Glow color scheme A */
.glow-a {
  --g1: var(--glow-a-1);
  --g2: var(--glow-a-2);
  opacity: 1;
}

/* Glow color scheme B */
.glow-b {
  --g1: var(--glow-b-1);
  --g2: var(--glow-b-2);
  opacity: 0;
}

/* ==========================================================================
   Grid Utilities
   ==========================================================================
   Simple flexbox-based grid system
*/

.row {
  display: flex;
  gap: 16px;
}

.col {
  flex: 1;
}

/* ==========================================================================
   Mobile Responsive
   ==========================================================================
   Adjustments for tablet and mobile screens
*/

@media (max-width: 1175px) {
  .app-shell {
    min-height: calc(100vh - var(--navbar-height) - 72px);
  }

  .app-layout {
    min-height: 0;
    margin-left: 0;
  }

  #sidemenu {
    display: flex;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    bottom: 72px;
    height: auto;
    max-width: min(82vw, 300px);
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
    z-index: 1200;
  }

  #sidemenu.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  #navbar .nav-left {
    cursor: pointer;
  }

  .site-footer {
    bottom: 72px;
    left: 0;
    margin-left: 0;
  }
}

@media (max-width: 960px) {
  #navbar {
    padding: 0 var(--space-sm);
    gap: var(--space-sm);
  }

  #navbar .nav-left {
    flex: 0 0 auto;
    gap: 0;
  }

  #navbar .nav-logo {
    width: 24px;
    height: 24px;
  }

  #navbar .nav-title {
    display: none;
  }

  #navbar .nav-center {
    display: block;
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  #navbar .search-container {
    max-width: none;
    width: 100%;
  }

  #navbar .search-mode-toggle {
    display: inline-flex;
    height: 40px;
    padding: 4px;
  }

  #navbar .search-bar {
    min-height: 40px;
    border-left: none;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    padding-left: var(--space-sm);
    padding-right: 44px;
  }

  #navbar .search-container:focus-within .search-bar {
    border-left: none;
  }

  #navbar .nav-right {
    flex: 0 0 auto;
    gap: 0;
  }

  #navbar .profile-btn {
    padding: 6px;
  }

  #page {
    padding: var(--space-lg) var(--space-xs);
  }

}

@media (max-width: 860px) {
  #sidemenu {
    bottom: 125px;
  }

  body.page-home .site-footer.has-player {
    margin-bottom: 140px;
  }
  
  /* Ensure footer has enough margin on all pages when player is visible */
  .site-footer.has-player {
    margin-bottom: 140px;
  }
  
  /* Also apply to .footer class used on other pages */
  .footer.has-player {
    margin-bottom: 140px;
  }
}