/* ==========================================
   1. DESIGN SYSTEM VARIABLES
=========================================== */
:root {
    /* Main Surfaces & Canvas */
    --bg-dark-main: #000000;
    --bg-panel-solid: #121316; /* Dark charcoal panel background */
    --bg-panel: rgba(255, 255, 255, 0.05); 

    /* Borders */
    --border-panel: rgba(255, 255, 255, 0.1);
    --border-panel-hover: rgba(255, 255, 255, 0.22);
    --border-poster: rgba(255, 255, 255, 0.12);

    /* Brand & Accent Palette */
    --accent-red: rgba(220, 53, 69, 1);
    --accent-amber: rgba(255, 193, 7, 1);
    --accent-cyan: rgba(13, 202, 240, 1);
    --accent-purple: rgba(157, 78, 221, 1);

    /* Translucent Accent Glows (15% Alpha) */
    --glow-red: rgba(220, 53, 69, 0.15);
    --glow-amber: rgba(255, 193, 7, 0.15);
    --glow-cyan: rgba(13, 202, 240, 0.15);
    --glow-purple: rgba(157, 78, 221, 0.15);

    /* Overlay Gradients */
    --overlay-dark-start: rgba(15, 15, 15, 0.85);
    --overlay-dark-end: rgba(0, 0, 0, .5);
}

/* ==========================================
   2. GLOBAL CANVAS & LAYOUT DEFAULTS
=========================================== */
html, 
body, 
main,
.bg-dark, 
[data-bs-theme="dark"] {
    background-color: var(--bg-dark-main) !important;
    background: var(--bg-dark-main) !important;
    color: var(--text-primary, #ffffff);
}

/* Ensure background sections stay transparent to expose pure black canvas */
section {
    background-color: transparent !important;
    background: none !important;
}

/* Reusable Hero Overlay */
.hero-overlay-dark {
    background-color: transparent !important;
    background: linear-gradient(135deg, var(--overlay-dark-start) 0%, var(--overlay-dark-end) 100%) !important;
    z-index: 2;
}

/* ==========================================
   3. STUDIO PANELS & RADIAL CARDS
=========================================== */
.studio-panel {
    background-color: var(--bg-panel-solid) !important;
    border: 1px solid var(--border-panel) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.studio-panel:hover {
    border-color: var(--border-panel-hover) !important;
}

/* Radial Accent Variant Backgrounds */
.studio-panel-red {
    background: radial-gradient(circle at top right, var(--glow-red) 0%, var(--bg-panel-solid) 100%) !important;
    border: 1px solid var(--border-panel) !important;
}

.studio-panel-amber {
    background: radial-gradient(circle at top right, var(--glow-amber) 0%, var(--bg-panel-solid) 100%) !important;
    border: 1px solid var(--border-panel) !important;
}

.studio-panel-cyan {
    background: radial-gradient(circle at top right, var(--glow-cyan) 0%, var(--bg-panel-solid) 100%) !important;
    border: 1px solid var(--border-panel) !important;
}

.studio-panel-purple {
    background: radial-gradient(circle at top right, var(--glow-purple) 0%, var(--bg-panel-solid) 100%) !important;
    border: 1px solid var(--border-panel) !important;
}

/* ==========================================
   4. DISCIPLINE CARD GLOW HOVERS
=========================================== */
.glow-card-red, 
.glow-card-amber, 
.glow-card-cyan, 
.glow-card-purple {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-card-red:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3) !important; 
}
.glow-card-amber:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(255, 193, 7, 0.3) !important; 
}
.glow-card-cyan:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(13, 202, 240, 0.3) !important; 
}
.glow-card-purple:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(157, 78, 221, 0.3) !important; 
}

/* ==========================================
   5. POSTERS & SPOTLIGHT COVER ANIMATIONS
=========================================== */
.poster-wrapper {
    border: 1px solid var(--border-poster);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.poster-img { 
    transition: transform 0.4s ease; 
}

.poster-title { 
    transition: color 0.3s ease; 
}

/* Poster Hover Interactions */
.poster-card:hover .poster-wrapper {
    transform: translateY(-6px);
    border-color: rgba(220, 53, 69, 0.6);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7), 0 0 15px rgba(220, 53, 69, 0.25);
}

.poster-card:hover .poster-img { 
    transform: scale(1.03); 
}

.poster-card:hover .poster-title {
    color: var(--accent-red) !important;
}

/* Spotlight & Poetry Cover Hovers */
.spotlight-cover-img, 
.poetry-cover-img {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.spotlight-cover-link:hover .spotlight-cover-img {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255, 193, 7, 0.5) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 193, 7, 0.25) !important;
}

.poetry-cover-link:hover .poetry-cover-img {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(13, 202, 240, 0.5) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(13, 202, 240, 0.25) !important;
}

/* ==========================================
   6. BUTTONS, FORMS & UI ACCENTS
=========================================== */

/* Studio Subtitles, Form Labels & Lead Text Overrides */
.lead,
main p.lead {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
}

.studio-panel label,
.studio-panel .form-label,
.studio-panel .text-secondary,
.studio-panel .text-muted {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1 !important;
}

.studio-panel p {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Studio Form Controls (Inputs & Textareas) */
.studio-input {
    background-color: #0d0e10 !important;
    border: 1px solid var(--border-panel) !important;
    color: #ffffff !important;
}

.studio-input:focus {
    background-color: #121316 !important;
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
    color: #ffffff !important;
}

.studio-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Footer High-Contrast Links & Buttons */
.footer-link {
    color: rgba(255, 255, 255, 0.88) !important; /* Bright white-grey for high contrast on black */
    text-decoration: none !important;
    transition: color 0.2s ease-in-out;
}

.footer-link:hover {
    color: var(--accent-red) !important; /* Brand Red Hover */
}

.studio-btn-sm {
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-color: var(--border-panel) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.studio-btn-sm:hover {
    background-color: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color: #ffffff !important;
}

/* ==========================================
   7. MEDIA QUERIES & RESPONSIVE FIXES
=========================================== */

/* Desktop Navigation Hover Behavior (992px and above) */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Prevents menu flickering */
    }
}

/* Mobile Alignment & Badge Formatting (576px and below) */
@media (max-width: 576px) {
    /* Force paragraphs, lists, and lead text to stay left-aligned */
    p, 
    .lead, 
    ul, 
    ol,
    .studio-panel p,
    .studio-panel div {
        text-align: left !important;
    }

    /* Keep badges centered as standalone pills */
    .badge, 
    [class*="badge"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        width: fit-content !important;
        max-width: 95% !important;
        
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
        line-height: 1.3 !important;
        
        padding: 0.45rem 0.85rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
}