/*
Theme Name: Rap Report Cards
Theme URI: http://rapreportcards.net/blog
Author: Gems
Author URI: http://rapreportcards.net
Description: Beta Theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://gnu.org
Text Domain: rrc-theme-1
*/

/* ========================
   BASE + FONTS
======================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500&display=swap');

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
}

body { padding: 10px 10px 60px; }
p { color: #FFFFFF; }

h1, h2, h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}

body, p, .entry-content {
    font-family: 'Inter', sans-serif;
}

/* ========================
   NAVIGATION
======================== */
.stick-nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999 !important;
    background-color: #000000 !important;
}

.navbar, .navbar.bg-dark, .bg-dark {
    background-color: #000000 !important;
    padding: 10px 0 !important;
}

.navbar-brand { margin-left: 0 !important; padding-left: 15px; }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238A2BE2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.nav-link { color: #FFFFFF !important; }
.nav-link:hover, .nav-link.active { color: #8A2BE2 !important; }

/* ========================
   TABLES
======================== */
.table-dark, .table-dark th, .table-dark td {
    background-color: #000000 !important;
    color: #fff !important;
}

.table-hover tbody tr:hover {
    background-color: #8A2BE2 !important;
    color: #fff !important;
}

.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 80vh;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.table-wrapper::-webkit-scrollbar { display: none; }

#rrcMajor, #rrcIndie, #rrcLabels, #rrcSplits, #rrcPrestige, #rrcProducers, #rrcWait {
    width: max-content;
    min-width: 100%;
}

/* Sticky First Column */
#rrcMajor th:first-child, #rrcMajor td:first-child,
#rrcIndie th:first-child, #rrcIndie td:first-child,
#rrcLabels th:first-child, #rrcLabels td:first-child,
#rrcSplits th:first-child, #rrcSplits td:first-child,
#rrcPrestige th:first-child, #rrcPrestige td:first-child,
#rrcProducers th:first-child, #rrcProducers td:first-child,
#rrcWait th:first-child, #rrcWait td:first-child {
    position: sticky;
    left: 0;
    background-color: #000000 !important;
    z-index: 30 !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    border-right: 2px solid #222;
}

/* Sticky Header */
#rrcMajor thead th, #rrcIndie thead th, #rrcLabels thead th,
#rrcSplits thead th, #rrcPrestige thead th, #rrcProducers thead th,
#rrcWait thead th {
    position: sticky !important;
    top: 0 !important;
    background-color: #000000 !important;
    z-index: 40 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* ========================
   CONTENT
======================== */
article, .entry-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================
   FOOTER
======================== */
.footer-links {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 25px;
    flex-wrap: wrap;
}

.footer-links a { color: #FFFFFF; text-decoration: none; }
.footer-links a:hover { color: #8A2BE2; }

.static-bottom {
    background-color: #000000;
    width: 100%;
    margin-top: 60px !important;
    padding: 30px 0 !important;
}

/* ========================
   WORDPRESS OVERRIDES
======================== */
body, .site, #main, .site-main, .post, .page, .container, .container-fluid,
.entry-content p, .entry-content h1, .entry-content h2, .entry-content h3,
.card, .wp-block, article,
.entry-content, .post, article * {
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* ========================
   LINKS
======================== */
a { color: #8A2BE2 !important; }
a:hover { color: #fff !important; }

/* ========================
   MOBILE
======================== */
@media (max-width: 768px) {
    body { padding: 5px 8px 60px !important; }
    .container, .container-fluid { padding: 0 10px !important; max-width: 100% !important; }
    article, .entry-content, .post, .page { padding: 0 12px !important; max-width: 100% !important; }
    img, .entry-content img, article img, .wp-block-image img { max-width: 100% !important; height: auto !important; }
    h1, h2, h3 { font-size: 1.4rem !important; }
}

@media (max-width: 480px) {
    .footer-links { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 992px) {
    #rrcMajor, #rrcIndie, #rrcLabels, #rrcSplits, #rrcPrestige, #rrcProducers, #rrcWait { font-size: 0.82rem; }
    .table th, .table td { padding: 6px 4px !important; }
}

/* ========================
   LOGO & NAVBAR
======================== */
.navbar-brand img {
    width: 32px !important;
    height: 32px !important;
}

@media (max-width: 768px) {
    .navbar-brand img { width: 26px !important; height: 26px !important; }
}

/* Force solid black navbar */
.stick-nav, .stick-nav .navbar, .navbar, .bg-dark {
    background-color: #000000 !important;
    backdrop-filter: none !important;
}

ul { list-style-type: none; padding: 0; margin: 0; }

time {
    margin-bottom: 10px;
}

/* Space after sticky nav */
body > *:not(.stick-nav) {
    margin-top: 50px;
}

/* Smaller text on blog pages (except menu) */
article, .entry-content, .post, p, h1, h2, h3, time {
    font-size: 0.95rem !important;
}

/* Only make menu/nav text slightly bigger */
.nav-link {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem !important;
}

#audio {
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 10000;
    background: #000;
    border: 1px solid #8A2BE2;
    border-radius: 6px;
    max-width: 340px;
}

/* Mobile = bottom center */
@media (max-width: 768px) {
    #audio {
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%) scale(0.92);
        max-width: 88vw;
    }
}

/* Desktop = bottom left */
@media (min-width: 769px) {
    #audio {
        left: 15px;
        transform: none;
    }
}