/* =============================================================================
   RED WINE ELEGANCE - Warm Jazz Club Aesthetic
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

@font-face {
  font-family: 'heading';
  font-display: swap;
  src: url(/styles/font2.woff2) format('woff2');
}
@font-face {
  font-family: 'heading2';
  font-display: swap;
  src: url(/styles/font3.woff2) format('woff2');
}
@font-face {
  font-family: 'normal';
  font-display: swap;
  src: url(/styles/font1.woff2) format('woff2');
}

:root {
  /* Wine palette - warm burgundy/merlot tones */
  --color_m0: #1F000080;
  --color_m1: #5C1D1D80;
  --color_m2: #874D4D;
  --color_m3: #C99090;
  --color_m4: #FFEFEF;
  --color_c0: #20204480;
  --color_c1: #33084180;
  --color_c2: #68526A;
  --color_c3: #855F88;
  --color_c4: #FFD2EA;
  
  /* Simplified aliases */
  --wine-deep: #3D1518;
  --wine: #722F37;
  --wine-light: #8B4049;
  --wine-soft: #A65D66;
  --cream: #FFEFEF;
  --cream-soft: rgba(255, 239, 239, 0.85);
  --rose: #C99090;
  --blush: #FFD2EA;
  --dark: #1A0A0C;
  --dark-overlay: rgba(26, 10, 12, 0.6);
  
  /* Typography */
  --fnt-h1: 2.5rem;
  --fnt-h2: 1.5rem;
  --fnt-small: 0.8rem;
  
  font-size: 1.25em;
}

@media (max-width: 768px) {
  :root {
    --fnt-h1: 1.5rem;
    --fnt-h2: 1.2rem;
    font-size: 1.1em;
  }
}

/* =============================================================================
   BASE
   ============================================================================= */

html {
  scroll-behavior: smooth;
  background: var(--dark);
}

body {
  font-family: 'normal', system-ui, sans-serif;
  color: var(--cream);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: url(/images/background.jpg) var(--dark-overlay);
  background-size: cover;
  background-blend-mode: multiply;
  background-attachment: fixed;
  min-height: 100vh;
}

/* =============================================================================
   HEADER (Top Bar) - Elegant fixed navigation
   ============================================================================= */

#top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(135deg, rgba(26, 10, 12, 0.97), rgba(45, 15, 20, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 144, 144, 0.2);
  padding: 0.8rem 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

#top h1 {
  font-family: 'heading', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  background: none;
  padding: 0;
  letter-spacing: 0.02em;
  text-align: left;
  border: none;
}

#tagline { font-size: clamp(1.4rem, 3vw, 2rem); position: fixed; margin: 0; padding: 0 3em; box-sizing: border-box; font-family: 'heading', Georgia, serif; width: 100%; z-index:200; top: 2.0em; text-align:left; color: var(--cream-soft); text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 0, 0, 0.5), 0 0 45px rgba(0, 0, 0, 0.35), 0 0 60px rgba(0, 0, 0, 0.2);}

#top h1 a {
  color: var(--cream);
  text-decoration: none;
  border: none;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, var(--cream), var(--rose));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#top h1 a:hover {
  background: linear-gradient(135deg, var(--blush), var(--cream));
  -webkit-background-clip: text;
  background-clip: text;
}

#top p {
  font-family: 'heading2', Georgia, serif;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  margin: 0;
  color: var(--rose);
  background: none;
  padding: 0;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.9;
}

#top p a {
  color: inherit;
  border: none;
  transition: color 0.3s;
}

#top p a:hover {
  color: var(--cream);
  background: transparent;
}

/* =============================================================================
   MAIN LAYOUT - Split view with content left, hero right
   ============================================================================= */

.main-layout {
  display: grid;
  grid-template-columns: 1fr 45%;
  min-height: calc(100vh - 4rem);
  margin-top: 4rem; /* Space for fixed header */
  gap: 0;
}

@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}

/* =============================================================================
   HERO CAROUSEL - Right side panel
   ============================================================================= */

.hero {
  position: sticky;
  top: 4rem;
  height: calc(100vh - 4rem);
  overflow: hidden;
  order: 2;
}

@media (max-width: 1024px) {
  .hero {
    position: relative;
    top: 0;
    height: 50vh;
    min-height: 300px;
    max-height: 450px;
    order: -1;
  }
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  overflow: hidden;
}

.hero__slide picture,
.hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
}

.hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26, 10, 12, 0.4) 0%,
    rgba(61, 21, 24, 0.3) 50%,
    rgba(26, 10, 12, 0.7) 100%
  );
  z-index: 1;
}

.hero__slide.active { opacity: 1; }

.hero__content {
  position: absolute;
  bottom: 3.8em;
  right: 0;
  text-align: center;
  z-index: 2012;
  padding: 0 4%;
}

.hero__title {
  font-family: 'heading', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--cream);
  margin: 0;
  padding: 0;
  opacity: 0.95;
  text-shadow: 0 4px 40px rgba(0,0,0,0.6);
  background: linear-gradient(135deg, var(--cream), var(--rose));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: none;
  z-index: 2002;
  text-align: center;
}

.hero__dots {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%) translateY(-15px);
  display: flex;
  gap: 0.5rem;
  z-index: 4004;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90%;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,239,239,0.3);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  padding: 0;
}

.hero__dot:hover { background: rgba(255,239,239,0.6); }
.hero__dot.active { background: var(--rose); transform: scale(1.3); }

/* =============================================================================
   CONTENT AREA - Left side, scrollable
   ============================================================================= */

.content-area {
  order: 1;
  overflow-y: auto;
  padding-bottom: 4rem;
}

/* =============================================================================
   SECTIONS & CONTENT
   ============================================================================= */

section {
  padding: 2rem 6% 3rem;
  max-width: 100%;
  margin: 0;
}

/* SPA - Hash-based navigation */
body { --first_section: block; }
body:has(section:target) { --first_section: none; }
section { display: none; }
section:target { display: block; }
section:first-of-type { display: var(--first_section); }

/* Add padding for fixed footer */
section:last-of-type {
  padding-bottom: 5rem;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: 'heading2', Georgia, serif;
  margin: 0;
  color: var(--blush);
}

/* Section h1 styling (not header) */
section h1 {
  font-size: var(--fnt-h1);
  text-align: center;
  padding: 0.5em 0.8em;
  background: linear-gradient(135deg, var(--color_c1), var(--color_m1));
  border-radius: 0.4em;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: var(--fnt-h2);
  text-align: left;
  background: linear-gradient(135deg, var(--color_c0), var(--color_m0));
  padding: 0.5em 0.8em;
  border-radius: 0.4em;
  margin: 2.5rem 0 1rem;
}

h3 {
  font-size: var(--fnt-h2);
  text-align: right;
  background: linear-gradient(135deg, var(--color_m0), var(--color_c0));
  padding: 0.5em 0.8em;
  border-radius: 0.4em;
}

p {
  padding: 0.5em 1em;
  margin: 0;
  color: var(--cream);
}

a {
  color: var(--rose);
  text-decoration: none;
  border-radius: 0.3em;
  border: 2px solid transparent;
  padding: 0.1em 0.2em;
  transition: all 0.25s;
}

a:hover {
  background: var(--cream);
  color: var(--dark);
  border-color: var(--cream);
}

a[title^='logo'] { border: 0; background: transparent; padding: 0; }

strong { color: var(--rose); }

.small { font-size: var(--fnt-small); }

.inline_score { float: right; clear: both; display: inline-block; font-size: var(--fnt-small); transform: translateY(-1.4em); margin: 0;}
.inline_score:hover { transform: translateY(-1.4em); z-index: +1; margin: 0; }

/* =============================================================================
   STREAMING LOGOS
   ============================================================================= */

[alt^="logo:"] {
  height: 1.8em;
  vertical-align: middle;
  margin: 0 0.3em;
  transition: all 0.25s;
  opacity: 0.85;
}

[alt^="logo:"]:hover {
  opacity: 1;
  transform: scale(1.1);
  background: rgba(128,128,128,0.5);
  border-radius: 0.3em;
}

/* =============================================================================
   LISTS (Songs) - Music-focused styling
   ============================================================================= */

ul, ol {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

li {
  background: transparent;
}

li a {
  display: block;
  padding: 0.8em 1.2em;
  margin: 0.4em 0;
  background: linear-gradient(135deg, rgba(114,47,55,0.25), rgba(51,8,65,0.2));
  border-radius: 0.5em;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  color: var(--cream);
  font-weight: 500;
}

li a:hover {
  background: linear-gradient(135deg, rgba(114,47,55,0.45), rgba(51,8,65,0.35));
  border-color: transparent;
  border-left-color: var(--wine-light);
  transform: translateX(5px);
  color: var(--blush);
}

/* =============================================================================
   IMAGES
   ============================================================================= */

img {
  border-radius: 12px;
  max-width: 100%;
}

/* Lazy loading placeholder - provides visual feedback while images load */
img[loading="lazy"] {
  background: linear-gradient(135deg, var(--color_m0), var(--color_c0));
}

img[alt^="banner1"] { width: 100%; }

img[alt^="banner2"] {
  width: 55%;
  float: left;
  margin: 0 1.5em 1em 0;
}

img[alt^="banner3"] {
  width: 38%;
  float: right;
  margin: 0 0 1em 1em;
}

img[alt^="banner3_small"] { width: 28%; }
img[alt^="banner3_big"] { width: 55%; }

@media (max-width: 768px) {
  img[alt^="banner2"], img[alt^="banner3"],
  img[alt^="banner3_small"], img[alt^="banner3_big"] {
    float: none;
    width: 100%;
    margin: 1em 0;
  }
}

/* =============================================================================
   COLLAPSIBLE (H5 Sections)
   ============================================================================= */

h5 {
  font-size: 1.2em;
  font-weight: bold;
  list-style-type: circle;
  list-style-position: inside;
  display: list-item;
  cursor: pointer;
  border-radius: 0.4em;
  background: linear-gradient(135deg, var(--color_c0), var(--color_m0));
  padding: 0.6em 1em;
  margin: 0.5em 0;
  transition: all 0.25s;
}

h5:hover {
  background: var(--wine);
  color: var(--cream);
}

h5.showing {
  list-style-type: disc;
  background: linear-gradient(135deg, rgba(114,47,55,0.5), rgba(51,8,65,0.4));
}

.section_H5 {
  background: rgba(200,200,200,0.08);
  border-radius: 0 0 0.5em 0.5em;
  padding: 1em;
  margin-bottom: 1em;
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out, opacity 0.25s ease-out;
  opacity: 1;
}

.section_H5.hide {
  max-height: 0;
  padding: 0 1em;
  opacity: 0;
}

/* =============================================================================
   BLOCKQUOTES
   ============================================================================= */

blockquote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  background: linear-gradient(135deg, rgba(114,47,55,0.2), rgba(51,8,65,0.15));
  border-radius: 0.5em;
  font-style: italic;
}

blockquote p {
  margin: 0.3em 0;
  padding: 0;
  color: var(--cream-soft);
}

/* =============================================================================
   TABLES
   ============================================================================= */

table {
  width: 90%;
  margin: 1em 5%;
  border-collapse: collapse;
  background: rgba(32,32,68,0.25);
  border-radius: 0.5em;
  overflow: hidden;
}

th, td {
  padding: 0.8em 1em;
  text-align: left;
  border-bottom: 1px solid rgba(114,47,55,0.2);
}

th {
  background: rgba(114,47,55,0.35);
  color: var(--blush);
  font-weight: 600;
}

/* =============================================================================
   VIDEOS
   ============================================================================= */

div[style*="text-align: center"] iframe,
.p4video iframe {
  border-radius: 12px;
  max-width: 100%;
}

/* =============================================================================
   CONTACT
   ============================================================================= */

.contact {
  padding: 2rem 6%;
  margin: 2rem 0;
  border-top: 1px solid rgba(114,47,55,0.3);
}

.contact h2 {
  text-align: center;
  background: none;
  border: none;
  margin-bottom: 1.5rem;
}

.contact ul {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.contact li {
  padding: 0.8em 2em;
}

.contact p {
  text-align: center;
  color: var(--cream-soft);
  font-size: 0.9em;
}

.contact a { border-radius: 2em; }
/* =============================================================================
   FOOTER (Fixed Player Bar)
   ============================================================================= */

#bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(26, 10, 12, 0.98), rgba(26, 10, 12, 0.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(114,47,55,0.4);
  padding: 0.5em 1em;
  min-height: 3.5em;
  font-size: 1rem;
  z-index: 101;
  display: flex;
  width:100%;
  align-items: center;
  justify-content: space-between;
}

#bottom .social {
  display: flex;
  gap: 0.5em;
  flex-shrink: 0;
}

#bottom .social a {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: rgba(114,47,55,0.4);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  border: none;
  transition: background-color 0.25s;
}

#bottom .social a:hover { background-color: var(--wine); }

/* Player Container - centered in footer */
#player_container {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-0.4em);
  font-size: 2em;
}

#player_container.active {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

#player_container.active #player {
  width: 2.5em;
  height: 2.5em;
  position: relative;
  flex-shrink: 0;
}

/* Player Loading & Error States */
#player_container.loading #player::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--rose);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#player_container.error::after {
  content: 'Failed to load';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2em;
  color: var(--rose);
  white-space: nowrap;
}

#score_link {
  display: inline-block;
  padding: 0.2em 0.6em;
  background: linear-gradient(135deg, rgba(114,47,55,0.25), rgba(51,8,65,0.2));
  border-radius: 0.8em;
  border: 1px solid var(--wine);
  transition: all 0.3s ease;
  color: var(--color_m4);
  font-weight: 500;
  font-size: 0.6em;
}
#score_link:hover {
  background: linear-gradient(135deg, rgba(114,47,55,0.45), rgba(51,8,65,0.35));
  border-left: 5px solid var(--wine-light);
  transform: translateX(5px);
  color: var(--blush);
}

#score_link[href=""], #score_link[href="#"] {display: none;}

.copyright {
  font-size: 0.75em;
  color: var(--cream-soft);
  flex-shrink: 0;
}

.copyright a {
  color: var(--rose);
  border: none;
}

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
  #top, #bottom, .hero, .contact { display: none !important; }
  body { background: white; color: black; }
  .main-layout { display: block; margin-top: 0; }
  .content-area { overflow: visible; }
  h1, h2, h3, p, li { color: black !important; background: transparent !important; }
  a { color: #333; }
  section { display: block !important; }
}

/* =============================================================================
   ACCESSIBILITY - Skip Link
   ============================================================================= */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--wine);
  color: var(--cream);
  padding: 8px 16px;
  z-index: 1000;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}