/* ============================================================================
   DigiPort Jukebox – Custom CSS
   ----------------------------------------------------------------------------
   This file contains the core custom theme styles for the DigiPort Jukebox MVP.
   It is used in combination with Bootstrap 5 and applies consistent visual styling
   across every page of the website. All inline and page-specific styles have been 
   removed in favor of reusable class-based styling.

   Sections:
     1. Design Tokens
     2. Global Layout
     3. Components & Cards
     4. Shared Partials (Header/Footer)
     5. Media Styling
     6. Utilities (colors, borders, buttons)

   This file is production-safe and includes complete instructional comments to
   support future editing, onboarding, or educational reference.
============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS – Site-Wide Color Variables
   ----------------------------------------------------------------------------
   We define all brand colors here using CSS custom properties (:root variables).
   These tokens are referenced consistently across the rest of the stylesheet.
   This ensures that color changes in one place affect the whole site.
============================================================================ */
:root {
  --jukebox-red: #5c1a14;        /* Main dark red used for cards, nav, and hero backgrounds */
  --jukebox-gold: #FFD700;       /* Accent gold used for borders, headers, buttons */
  --jukebox-black: #0d1117;      /* Deep black for background and contrast areas */
  --text-light: #fdf6e3;         /* Standard text on dark backgrounds */
  --text-muted: #e5c97d;         /* Secondary text color used for subtitles or helper text */
}


/* ============================================================================
   2. GLOBAL LAYOUT – Base Styles for Body and Site Width
   ----------------------------------------------------------------------------
   These styles apply to the entire body of the document. The font stack, max width,
   and overall background color are set here. Content is centered and constrained
   within a reasonable width for readability and consistency.
============================================================================ */
body {
  background-color: var(--jukebox-black);
  color: var(--text-light);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  max-width: 1920px;
  margin: 0 auto;
}


/* ============================================================================
   3. COMPONENTS & CARDS – Reusable Layout Blocks
   ----------------------------------------------------------------------------
   These styles define the appearance of layout blocks reused across the site:
   hero sections, portal cards, feature banners, etc. They all share consistent
   padding, background color, border, and rounding behavior.
============================================================================ */

/* Main top-of-page feature blocks. Used for intros on landing pages. */
.hero-section {
  background-color: var(--jukebox-red);
  border: 2px solid var(--jukebox-gold);
  border-radius: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* Primary layout container for standalone sections. Used for featured songs, 
   about pages, under construction notices, and more. */
.section-card {
  background-color: var(--jukebox-red);
  border: 2px solid var(--jukebox-gold);
  border-radius: 0.5rem;
  margin: 2rem 0;
  padding: 2rem;
}

/* Wrapper around portal grids like the 4 cards on the homepage. Provides
   background framing and consistent spacing for multi-column layouts. */
.portal-wrapper {
  background-color: var(--jukebox-black);
  border: 2px solid var(--jukebox-gold);
  border-radius: 0.5rem;
  padding: 2rem 1rem;
  margin: 2rem 0;
}

/* Cards used in portal grids, such as Music Videos / Audio Library links.
   These cards use full-height layout to vertically center content and allow
   a consistent user experience across screen sizes. */
.portal-card {
  background-color: var(--jukebox-red);
  border: 2px solid var(--jukebox-gold);
  border-radius: 0.5rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text-light);
}

/* Used specifically on the sitemap and similar pages where we want card-style
   layout but without navigation or CTA inside. Similar in function to section-card. */
.jukebox-card {
  background-color: var(--jukebox-red);
  border: 2px solid var(--jukebox-gold);
  border-radius: 0.5rem;
  padding: 2rem;
  margin-bottom: 2rem;
}


/* ============================================================================
   4. SHARED PARTIALS – Navigation & Footer Styles
   ----------------------------------------------------------------------------
   These styles are scoped specifically to the nav bar and footer. They are
   injected via JavaScript into every page. These classes ensure that the header
   and footer are styled consistently and do not conflict with other elements.
============================================================================ */

/* Ensures that the nav bar stays at the top of the viewport while scrolling.
   We use position: sticky here to maintain layout without forcing overlays. */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Applies gold border, red background, and padding to the navigation bar.
   Used in conjunction with Bootstrap's navbar components. */
.navbar-primary {
  background-color: var(--jukebox-red);
  border: 2px solid var(--jukebox-gold);
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  padding: 1rem;
}

/* Adjusts link visibility inside nav bar. Ensures high contrast text
   on dark red background and adds hover behavior for accessibility. */
.navbar-primary .nav-link {
  color: var(--jukebox-gold) !important;
  font-weight: 500;
  text-shadow: 0 0 2px #000;
}

.navbar-primary .nav-link:hover {
  color: #ffe066;
  text-decoration: underline;
}

/* Styles the shared footer with red background, gold border, and top margin.
   Ensures consistency across all footer instances, including site map and CTA links. */
.site-footer {
  background-color: var(--jukebox-red);
  border: 2px solid var(--jukebox-gold);
  border-radius: 0.5rem;
  margin-top: 2rem;
  padding: 1rem;
  color: var(--text-light);
}


/* ============================================================================
   5. MEDIA STYLING – Images, Audio Players, Video Containers
   ----------------------------------------------------------------------------
   This section styles standalone media content such as profile pictures,
   album artwork, and audio players. These styles ensure alignment, size
   consistency, and responsive behavior across all devices.
============================================================================ */

/* Used for circular profile images like JASYTI’s photo on the homepage.
   Ensures fixed size and object-fit cropping while maintaining responsive layout. */
.hero-profile-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Used on featured album artwork. Applies consistent max width for alignment. */
.album-art {
  max-width: 300px;
}

/* Audio players should never exceed 400px in width and should always be centered.
   This ensures consistent layout across mobile and desktop devices. */
audio {
  width: 100%;
  max-width: 400px;
  margin: 1rem auto 0 auto;
  display: block;
}


/* ============================================================================
   6. UTILITIES – Text Colors, Borders, Button Overrides
   ----------------------------------------------------------------------------
   These utility classes are used throughout the site for quick styling of elements
   without creating extra component classes. They help maintain design language
   without bloating the markup or CSS.
============================================================================ */

/* Gold text for primary headings and feature titles. Often paired with .fw-bold. */
.text-gold {
  color: var(--jukebox-gold) !important;
}

/* Muted gold used for subtitles and explanatory text. Slightly softer than gold. */
.text-muted {
  color: var(--text-muted) !important;
}

/* Border utility for images, cards, or any container that needs a gold border. */
.border-gold {
  border-color: var(--jukebox-gold) !important;
}

/* Adjusts Bootstrap's .btn-warning to fit the DigiPort theme.
   Bright gold background, black text, and bold font for maximum contrast.
   Includes hover effect for interaction feedback. */
.btn-warning {
  background-color: var(--jukebox-gold);
  color: var(--jukebox-black);
  font-weight: bold;
  border: 1px solid var(--jukebox-gold);
}

.btn-warning:hover {
  background-color: #e5c100;
  color: var(--jukebox-black);
}