:root {
  --sidebar-w: 200px;
  --gap: 1rem;

  /* Midnight theme variables */
  --color-primary: #00bcd4;             /* Accent for links, buttons, highlights (default cyan) */
  --color-secondary: #8a2be2;           /* Section headings (neon violet/purple) */
  --color-bg-neutral: #121212;           /* Global background */
  --background-dark: #121212;

  --color-header-footer-start: #0d0d0d; /* Header/Footer gradient start */
  --color-header-footer-end: #1c1c1c;   /* Header/Footer gradient end */
  --color-header-footer-text: #f0f0f0;  /* Header/Footer text color */

  --section-bg: #1e1e1e;                 /* Section background */
  --section-shadow: rgba(0,0,0,0.6);    /* Section shadow color */

  /* Cyber neon colors */
  --color-electric-magenta: #ff00ff;    /* Neon Electric Magenta - intense pink/purple */
  --color-neon-blue: #00ffff;           /* Neon Blue - bright cyan/teal */
  --color-text-black: #000000;		/* Text color black */
  --color-text-white: #f9f9f9); 	/* nearest to white */
  
  /* Typography */ 
  --font-heading: 'Univers', 'Inter', sans-serif; /* Cyber aesthetic heading font */
  --font-body: 'Futura', 'Inter', sans-serif;
  
/* Electric Lime & Hot Pink  */

--color-neon-lime: #A6FF00;           /* Bright electric lime green */
--color-neon-lime-glow: rgba(166, 255, 0, 0.8);  

--color-neon-pink: #FF2D95;           /* Vivid hot pink */
--color-neon-pink-glow: rgba(255, 45, 149, 0.8);

--color-electric-lime: #a6ff00;
--color-hot-pink: #ff00bb;


/* Cyan & Tangerine */
--color-neon-cyan: #00FFE7;           /* Bright cyan / aqua */
--color-neon-cyan-glow: rgba(0, 255, 231, 0.8);

--color-neon-tangerine: #FF8C00;      /* Vibrant orange-tangerine */
--color-neon-tangerine-glow: rgba(255, 140, 0, 0.8);

/*Violet & Acid Yellow */ 
--color-neon-violet: #9D00FF;         /* Electric violet */
--color-neon-violet-glow: rgba(157, 0, 255, 0.8);

--color-neon-acid-yellow: #DFFF00;    /* Bright acid yellow-green */
--color-neon-acid-yellow-glow: rgba(223, 255, 0, 0.8);

 --font-size-h1: 3.2rem;
 --font-weight-bold: 800;
 --font-size-h2: 2.2rem;
 --font-size-header: 0.8rem;

 
  /* Usage suggestions:
     --color-electric-magenta can be used for highlights, alerts, or glowing effects
     --color-neon-blue can be used as an alternative primary accent or link color
  */
}


/* Reset / Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-secondary);
  background: var(--color-bg-neutral);
}

/* Header & Footer */
header, footer {
  background: linear-gradient(135deg, var(--color-header-footer-start), var(--color-header-footer-end));
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  color: var(--color-header-footer-text);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 1rem;
  text-align: center;
  flex-shrink: 0;
  
    /* New for mobile centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer-specific overrides */
footer {
  /* On mobile, keep horizontal text orientation */
  flex-direction: column;
  justify-content: center;
}

footer p.next-program {
  margin: 0 0 0.5rem 0;
  color: var(--color-header-footer-text);
  font-weight: 700;
  font-size: 1rem;
  max-width: 160px;
  writing-mode: horizontal-tb; /* default horizontal on mobile */
}

/* Wide screen footer layout */
@media (min-width: 768px) {
  footer {
    writing-mode: vertical-rl;
    text-orientation: upright;
    height: 100vh;
    width: var(--sidebar-w);
    justify-content: center;
    flex-direction: column;
  }

  footer p.next-program {
    writing-mode: vertical-rl;
    text-orientation: upright;
    max-width: none;
    margin-bottom: 1rem;
    font-size: 1.1rem;
  }

  footer p {
    margin: 0;
  }
}

/* Main content area (mobile) */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0.75rem;
  position: relative;
  z-index: 1;
  background: #eaeaea; /* light grey background behind sections */
}


/* Minimal cyberpunk border for audio player 
main .content audio,
.ondemand-section audio {
  width: 100%;
  max-width: 600px; /* keeps it neat on large screens 
  display: block;
  margin: 0 auto; /* center horizontally 
  border: 2px solid var(--color-electric-magenta);
  border-radius: 12px;
  background-color: var(--color-bg-neutral);
}
*/

/* Firefox-only cyberpunk audio styling */
@supports (-moz-appearance: none) {
  main .content audio {
    border: 2px solid var(--color-electric-magenta);
    border-radius: 12px;
    background-color: #1a1a1a;
    padding: 4px;
    box-shadow: 0 0 8px var(--color-electric-magenta);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }

  main .content audio:hover {
    box-shadow: 0 0 12px var(--color-electric-magenta),
                0 0 24px var(--color-electric-magenta);
    border-color: var(--color-neon-blue);
  }

  main .content audio::-moz-progress-bar {
    background: linear-gradient(90deg, var(--color-electric-magenta), var(--color-neon-blue));
  }

  main .content audio::-moz-volume-bar {
    background: linear-gradient(90deg, var(--color-neon-blue), var(--color-electric-magenta));
  }
}

/* Recent Tracks list styling */
.recent-tracks .cc_recenttracks_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem;
}

.recent-tracks .cc_recenttracks_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem;
}

.recent-tracks .cc_recenttracks_list article.cctrack {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--section-bg);
  border-radius: 12px;
  box-shadow: 0 0 10px var(--color-neon-blue); /* swapped */
  border: 1px solid var(--color-neon-blue); /* swapped */
  transition: box-shadow 0.3s ease;
  color: var(--color-header-footer-text);
}

.recent-tracks .cc_recenttracks_list article.cctrack:hover,
.recent-tracks .cc_recenttracks_list article.cctrack:focus {
  box-shadow: 0 0 16px var(--color-electric-magenta); /* swapped */
  border-color: var(--color-electric-magenta); /* swapped */
}
/* Album Cover Image */
.recent-tracks .cccover img {
  width: 60px;
  height: 60px;
  /*border-radius: 8px;*/
  box-shadow: 0 0 6px var(--color-neon-blue);
  object-fit: cover;
  border: none;
  background: none;
  display: block;
}
/*without box-shadow (when the image is inside the article element) 
.recent-tracks article .cccover {
  box-shadow: none;
  border: none;
  background: none;
}*/
/* Medium screens (tablets) */
@media (min-width: 600px) {
  .recent-tracks .cccover img {
    width: 75px;
    height: 75px;
  }
}
/* Large screens (desktops) */
@media (min-width: 1024px) {
  .recent-tracks .cccover img {
    width: 90px;
    height: 90px;
  }
}

.recent-tracks .cctime {
  min-width: 75px;
  font-family: monospace;
  font-weight: 700;
  color: var(--color-neon-blue);
  text-align: center;
  user-select: none;
}

/* Hybrid approach - Let the flex row actually shrink its children (important for Firefox) */
.recent-tracks .ccdetails {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-electric-magenta);
  flex: 1;
  min-width: 0; /* key */
}

/* Title: mobile-first */
.recent-tracks .cctitle {
  font-weight: 700;
  color: var(--color-electric-magenta);
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25em;
  word-break: normal;               /* keep whole words */
  overflow-wrap: break-word;        /* break only if unavoidable */
  max-width: 100%;
  white-space: normal;              /* allow wrapping */
  overflow: visible;
  text-overflow: unset;
  max-height: none;
  -webkit-line-clamp: unset;
  display: block;
  align-self: center;
}


/* WebKit/Chromium: real 2-line clamp with ellipsis for larger screens */
@media (min-width: 768px) {
  .recent-tracks .cctitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


.recent-tracks .ccartist,
.recent-tracks .ccalbum {
  font-style: italic;
  max-width: 120px;
  color: var(--color-neon-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-tracks a.ccbuy {
  color: var(--color-neon-blue);
  text-decoration: underline;
  font-size: 0.85rem;
}

.recent-tracks a.ccbuy:hover,
.recent-tracks a.ccbuy:focus {
  color: var(--color-electric-magenta);
  text-decoration: none;
}

.recent-tracks article.cctrack > div[style*="clear"] {
  display: none;
}

@media (max-width: 767px) {
  .recent-tracks .cc_recenttracks_list article.cctrack {
    gap: 0.3rem; /* space between cover and details */
  }
  .recent-tracks .ccdetails {
    gap: 1rem; /* space between title, artist, album, etc. */
  }
}

/* Section styling */
main > section {
  background: var(--color-bg-neutral); /* dark background for cards */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6); /* stronger shadow for contrast */
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.3s ease;
  color: var(--color-header-footer-text);
}

main > section:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.8);
}

main section h1,
main section h2 {
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--color-neon-blue);
}

main section p {
  margin-bottom: 1rem;
  color: var(--color-text-white);
  font-weight: 600;
  text-align: center;
  text-shadow: none; /* removed glow */
}

/* Cyber heading style with a neon electric magenta glow effect that’s stronger on hover/focus. */
main > section.content > h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.095em;
  color: var(--color-neon-blue);
  text-shadow: 0 0 6px var(--color-neon-blue),
               0 0 12px var(--color-electric-magenta),
               0 0 24px var(--color-electric-magenta);
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

main > section.content > h1:hover,
main > section.content > h1:focus {
  text-shadow: 0 0 8px var(--color-electric-magenta),
               0 0 16px var(--color-electric-magenta),
               0 0 32px var(--color-electric-magenta),
               0 0 48px var(--color-electric-magenta);
}



/* Current song in header */
header .current-song {
  font-family: var(--font-heading);
  font-size: var(--font-size-header);
  writing-mode: horizontal-tb; /* normal text flow */
  text-orientation: mixed;
  transform: rotate(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;          
  max-width: 95%;              /* prevent overflow in narrow sidebar */
  word-break: break-word;      /* break long words/titles */
  overflow-wrap: break-word;   /* ensure wrapping */
}


header .current-song::before {
  content: none;
  color: var(--color-header-footer-text);
}



header .current-song a {
  color: var(--color-primary);
  text-decoration: none;
  display: inline-block;
  white-space: normal;
  word-break: break-word; /* break long words if needed */
  animation: colorPulse 3s ease-in-out infinite;
}



header .current-song a:hover,
header .current-song a:focus {
  animation-play-state: paused !important;
}

@keyframes colorPulse {
  0%, 100% { color: var(--color-header-footer-text); }
  50% { color: var(--color-electric-magenta); }
}

/* Main content area (mobile) */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0.75rem;
  position: relative;
  z-index: 1;
}

/* Audio players */
audio {
  width: 100%;
}

/* Song Request form */

.song-request {
  /* Make it full width with consistent horizontal padding like other sections */
  width: 100%;
  max-width: none; /* no limit */
  padding-left: var(--page-horizontal-padding, 1.5rem);
  padding-right: var(--page-horizontal-padding, 1.5rem);
  box-sizing: border-box;
  margin: 0 auto;
  color: var(--color-header-footer-text);
  font-size: 1.1rem;
}



.song-request form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.song-request label {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  color: var(--color-neon-blue);
  /* removed glow */
  cursor: text;
}

.song-request input[type="text"] {
  margin-top: 0.35rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--color-electric-magenta);
  border-radius: 6px;
  background: var(--color-bg-neutral);
  color: var(--color-header-footer-text);
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.song-request input[type="text"]:focus {
  outline: none;
  border-color: var(--color-neon-blue);
  box-shadow:
    0 0 8px var(--color-neon-blue),
    0 0 16px var(--color-electric-magenta);
}

.song-request input[type="button"] {
  align-self: center;
  padding: 0.7rem 2rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text-black);
  background: var(--color-electric-magenta);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow:
    0 0 10px var(--color-electric-magenta);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Inter', sans-serif;
  user-select: none;
}

.song-request input[type="button"]:hover,
.song-request input[type="button"]:focus {
  background: var(--color-neon-blue);
  box-shadow:
    0 0 16px var(--color-neon-blue),
    0 0 24px var(--color-electric-magenta);
  outline: none;
}

.song-request div[data-type="result"] {
  margin-bottom: 0.8rem;
  color: var(--color-electric-magenta);
  font-weight: 600;
  min-height: 1.3em;
  text-align: center;
  text-shadow:
    0 0 6px var(--color-electric-magenta);
}


/* On-demand section */
.ondemand-section h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-neon-blue);
  text-shadow: 0 0 6px var(--color-neon-lime-glow);
  transition: color 0.3s ease, text-shadow 0.3s ease;
  cursor: default;
}

.ondemand-section h2:hover,
.ondemand-section h2:focus {
  color: var(--color-neon-blue);
  text-shadow:
    0 0 8px var(--color-electric-magenta),
    0 0 16px var(--color-electric-magenta),
    0 0 24px var(--color-electric-magenta);
  outline: none;
}


/* Desktop / wide screens */
@media (min-width: 768px) {
  body {
    flex-direction: row;
  }

  header, footer {
    position: fixed;
    top: 0;
    width: var(--sidebar-w);
    height: 100vh;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }

  header { left: 0; }
  footer { right: 0; }

  main {
    margin-left: var(--sidebar-w);
    margin-right: var(--sidebar-w);
    flex: 1;
    min-height: 100vh;
    padding: 1rem;
    overflow-y: auto;
  }

  header .current-song a {
    white-space: normal;
    word-break: break-word;
  }
}