/* =========================================
   FURRYWOOD THEME: Golden Hour
   ========================================= */

:root[data-bs-theme="dark"] {
    /* Espresso/Dark Mocha Backgrounds */
    --bs-body-bg: #1A1614;
    --bs-body-bg-rgb: 26, 22, 20;
    
    /* Surface / Card Backgrounds (Slightly lighter mocha to pop off the background) */
    --bs-dark: #241E1C;
    --bs-dark-rgb: 36, 30, 28;
    
    /* Primary: Sunset Orange (For main buttons, play icons, and active links) */
    --bs-primary: #F4A261;
    --bs-primary-rgb: 244, 162, 97;
    
    /* Info: Soft Yellow/Sand (For secondary character links and highlights) */
    --bs-info: #E9C46A;
    --bs-info-rgb: 233, 196, 106;
}

/* Update the Hero Gradients across all pages to use the Warm Mocha colors */
.bg-dark.pt-5, .bg-dark.py-5 {
    background: linear-gradient(180deg, #241E1C 0%, #1A1614 100%) !important;
}

/* Ensure the border on the index page hero matches the new orange */
.border-primary {
    border-color: var(--bs-primary) !important; 
}

/* Soften the text slightly for warm backgrounds */
.text-white {
    color: #FDF8F5 !important; /* An off-white/cream instead of stark white */
}

/* ==========================================================================
   Furrywood Production Archive - Custom Styles
   (Used alongside Bootstrap 5)
   ========================================================================== */

/*body { background-color: #121212; color: #e0e0e0; } */
.custom-link-hover { transition: all 0.2s ease-in-out; }
.custom-link-hover:hover { text-decoration: underline !important; filter: brightness(1.2); }

/* -----------------------------------------
   Navigation & Dropdowns
   ----------------------------------------- */
/* Ensures dropdown menus look clean in dark mode */
.dropdown-menu {
    border-color: rgba(255, 255, 255, 0.1);
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------
   Dropdown Menu Optgroup Headers
   ----------------------------------------- */
/* Forces the un-clickable categorical headers to be bold, blue, and non-italic */
select.form-select optgroup {
    color: #0d6efd !important; /* Bootstrap Primary Blue */
    font-style: normal !important;
    font-weight: bold !important;
}

/* Ensures the actual selectable options underneath stay white */
select.form-select optgroup option {
    color: #ffffff !important;
    font-weight: normal !important;
}

/* -----------------------------------------
   Sticky Filter Bar (Dialogues, Ensembles)
   ----------------------------------------- */
/* Makes the filter bar stick to the top under the main nav when scrolling */
.sticky-filter-bar {
    position: sticky;
    top: 56px; /* Height of the main Bootstrap navbar */
    z-index: 1020;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* -----------------------------------------
   Category Hub Cards (Front Page)
   ----------------------------------------- */
.category-card {
    transition: transform 0.2s ease-in-out, border-color 0.2s;
}

.category-card:hover {
    transform: translateY(-5px);
    border-color: #0d6efd !important; /* Bootstrap Primary Blue */
}

/* -----------------------------------------
   Performance/Recording Cards
   ----------------------------------------- */
.performance-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s;
}

.performance-card:hover {
    transform: translateY(-3px);
    /* Enhances the shadow slightly when hovered */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; 
}

/* -----------------------------------------
   Audio Player (Wavesurfer)
   ----------------------------------------- */
.waveform-container {
    height: 45px;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    overflow: hidden;
}

/* -----------------------------------------
   Script Modal Artwork Banner
   ----------------------------------------- */
.script-art-stripe {
    width: 100%;
    height: 150px;
    object-fit: cover;            
    object-position: center 25%;  
    cursor: pointer;
    background-color: #ffffff;    /* Changed to white to support transparent PNGs */
    transition: height 0.3s ease; 
}

.script-art-stripe.expanded-art {
    height: 60vh;                 
    object-fit: contain;          
}

/* Add to furrywood.css */
.custom-link-hover:hover {
    text-decoration: underline !important;
    filter: brightness(1.2);
}