/* ==========================================================================
   SECTION 1: THEME CONFIGURATION & SITE VARIABLS
   This section defines your typography and site colors using CSS Custom Variables.
   By referencing variables like "var(--bg)", the entire site instantly shifts 
   between Light and Dark modes.
   ========================================================================== */

:root {
  /* Quiet Light Beige Theme Palette */
  --bg: #F7F5F0;           /* Background color */
  --text: #4A4A4A;         /* Default body copy text */
  --heading: #38312B;      /* Large titles and subtitles */
  --accent: #6A5B4C;       /* Standard state links and music components */
  --accent-hover: #2F4234; /* Interactive element hover states (Forest green) */
  --line: #E5E2D9;         /* Dividers, borders, and slider track channels */
}

:root[data-theme="dark"] {
  /* Warm Charcoal Dark Theme Palette */
  --bg: #1E1D1A;           
  --text: #C8C5BC;         
  --heading: #E5E2D9;      
  --accent: #A39281;       
  --accent-hover: #7FA387; 
  --line: #383530;         
}


/* ==========================================================================
   SECTION 2: CORE BASE TYPOGRAPHY & LAYOUT UTILITIES
   Sets up global standards across structural blocks like paragraphs, headings, 
   and handles the responsive page width shell.
   ========================================================================== */

body {
  position: relative;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Georgia", "Times New Roman", serif; /* Muted, classic editorial font choice */
  font-size: 15px;
  line-height: 1.6;
  max-width: 680px;        /* Limits text line length to look like a book column */
  margin: 0 auto;          /* Centers the column horizontally on large desktops */
  padding: 4rem 2rem;      /* Generous page margins */
}

h1, h2, h3, h4 {
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--heading);
  font-weight: normal;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1.5rem;
}

hr {
  border: 0;                          /* Remove browser default thick line */
  border-top: 1px solid var(--line);  /* The exact line style from your footer */
  margin: 1rem 0;                     /* Breathing room above and below the line */
  height: 0;                          /* Collapses any internal height */
}

/* ==========================================================================
   SECTION 3: LIGHT / DARK MECHANISM LAYOUT STYLES
   This block targets the mechanical toggle pill and hidden inputs handling 
   on-demand palette swaps.
   ========================================================================== */

.theme-toggle-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  display: flex;
  flex-direction: row; 
  align-items: center; 
  gap: 1rem;           
}

.theme-toggle-container p {
  margin: 0;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
}

/* Accessible Screen-Reader Concealment:
   Completely hides the native HTML checkbox box from sight while maintaining 
   full mouse clicks, keyboard selection, and screen-reader accessibility. */
.theme-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Outer housing track channel for the theme control slider slider */
.theme-toggle-label {
  display: inline-block;
  width: 34px;
  height: 20px;
  background-color: var(--line);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Sliding physical thumb node within toggle switch component */
.theme-toggle-label .toggle-button {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--text);
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Shifts background track color when box state changes to active */
.theme-toggle-input:checked + .theme-toggle-label {
  background-color: var(--accent);
}

/* Animates the circular thumb knob to glide across to the opposite side */
.theme-toggle-input:checked + .theme-toggle-label .toggle-button {
  transform: translateX(14px);
  background-color: var(--bg);
}


/* ==========================================================================
   SECTION 4: GLOBAL LINKS & UTILITIES
   Sets up hover effects and text decorations across general anchor nodes.
   ========================================================================== */

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

/* Secondary typography variant links used in headers/toggles */
.utility-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-transform: lowercase;
  text-underline-offset: 3px;
  font-weight: normal;
}

.utility-link:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}


/* ==========================================================================
   SECTION 5: SITE HEADER & MAIN NAVIGATION
   Manages your top banner layouts, system link gap spacing, and active pages.
   ========================================================================== */

.site-header {
  margin-top: 2rem;
  margin-bottom: 0; 
}

.site-title {
  font-size: 3rem;
  color: var(--heading);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.1;
}

.site-nav {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between; /* Pushes navigation links to the left, and utilities to the right */
  align-items: center;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.2s ease;
}

.nav-links {
  display: flex;
  gap: 1.5rem; /* Clean even spacing control between inline menu buttons */
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent-hover);
  text-decoration: underline;
}


/* ==========================================================================
   SECTION 6: BLOG MODULE FEEDS
   Styles output blocks rendering dates and post layout structures.
   ========================================================================== */

.post-list {
  list-style: none;
  padding: 0;
}

.post-item {
  margin-bottom: 2.5rem;
}

.post-item h2, .post-item h3 {
  margin: 0 0 0;
  font-size: 15px;
}

.post-item .date {
  font-size: 0.85rem;
  opacity: 0.7;
}


/* ==========================================================================
   SECTION 7: SITE FOOTER STRUCTURE
   ========================================================================== */

.site-footer {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  opacity: 0.8;
  text-align: center;
}

.site-footer p {
  margin: 0;
}


/* ==========================================================================
   SECTION 8: CUSTOM MUSIC PLAYER STYLES
   Handles layout blocks for music transport items, metadata text layouts, 
   cross-browser volume scrubbers, and playlist selectors.
   ========================================================================== */

.audio-showcase {
  padding: 1.25rem 0;
  margin-bottom: 2.5rem;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

.player-controls {
  display: flex;
  align-items: center; /* Fixed incomplete rule */
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.transport-buttons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

/* Minimalist outline functional audio controller buttons */
.player-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--accent);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  text-transform: lowercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#play-pause-btn {
  min-width: 32px;
  font-weight: normal;
  background-color: var(--line);
  opacity: 0.9;
  font-size: 0.6rem;
}

.player-btn:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  background-color: transparent;
  opacity: 1;
}

.icon-btn {
  padding: 0.2rem 0.4rem;
  font-size: 0.65rem;
}

.player-meta-group {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.player-meta {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  line-height: 1.2;
  margin-top: 1rem;
}

.player-label {
  opacity: 0.5;
  color: var(--text);
  margin-right: 0.25rem;
}

.player-track-title {
  color: var(--heading);
  font-style: italic;
}

/* Timeline Layout Elements */
.timeline-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.time-stamp {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.65rem;
  color: var(--text);
  opacity: 0.5;
  min-width: 24px;
}

#time-duration {
  text-align: right;
}

/* Custom CSS Hairline Audio Track Scrubber */
#timeline-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  background: var(--line);
  height: 1px;
  outline: none;
  cursor: pointer;
}

/* Chrome/Safari drag selector circle handle configuration */
#timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transition: background 0.2s, transform 0.1s;
}

#timeline-slider::-webkit-slider-thumb:hover {
  background: var(--accent-hover);
  transform: scale(1.3);
}

/* Compact Volume Control component layouts */
.volume-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.volume-icon {
  font-size: 0.65rem;
  color: var(--text);
  opacity: 0.4;
}

#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  background: var(--line);
  height: 1px;
  outline: none;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* Interactive custom playlist tracks stacked selection listing grid */
.player-playlist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-left: 0.1rem;
}

.playlist-track {
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  color: var(--text);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.playlist-track:hover {
  opacity: 1;
  color: var(--accent-hover);
}

.playlist-track.active {
  opacity: 1;
  color: var(--accent);
  font-weight: 500;
}


/* ==========================================================================
   SECTION 9: RESPONSIVE MEDIA QUERIES (MOBILE OPTIMIZATIONS)
   Triggers layout changes automatically when screens scale down.
   ========================================================================== */

/* Structural Header & Navigation changes under 680px wide */
@media (max-width: 680px) {
  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  
  .nav-links {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* Audio interface transformations under 650px wide */
@media (max-width: 650px) {
  .player-meta-group {
    order: 3; /* Shifts song metadata row underneath primary buttons */
    width: 100%;
    flex: none;
  }
  .volume-container {
    margin-left: auto; /* Aligns volume controls perfectly to the right border edge */
  }
}