/*
Theme Name: Big Dudes Music — Community Roots
Theme URI: https://bigdudesmusic.com
Author: Big Dudes Music
Author URI: https://bigdudesmusic.com
Description: Full-site editing WordPress block theme for Big Dudes Music. Dark rock aesthetic built with Bootstrap 5, featuring the Community Roots in-store performance program, Big Dudes Radio, Musician Marketplace, and deep integrations with Advanced Custom Fields and The Events Calendar.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bigdudes-music
Tags: full-site-editing, block-theme, custom-colors, custom-logo, custom-menu, custom-header, dark, music, community, entertainment, bootstrap-5
*/

/* =============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================= */
:root {
    /* Brand Colors */
    --bdm-black:        #0d0d0d;
    --bdm-dark:         #111111;
    --bdm-dark-2:       #161616;
    --bdm-card:         #1a1a1a;
    --bdm-card-2:       #222222;
    --bdm-red:          #e63030;
    --bdm-red-dark:     #c0392b;
    --bdm-red-hover:    #ff4444;
    --bdm-white:        #ffffff;
    --bdm-off-white:    #e0e0e0;
    --bdm-muted:        #888888;
    --bdm-muted-2:      #666666;
    --bdm-border:       #2a2a2a;
    --bdm-border-2:     #333333;

    /* Typography */
    --bdm-font-heading: 'Oswald', sans-serif;
    --bdm-font-body:    'Nunito Sans', sans-serif;

    /* Spacing */
    --bdm-section-py:   4rem;
    --bdm-radius:       4px;
    --bdm-radius-lg:    8px;

    /* Transitions */
    --bdm-transition:   0.2s ease;

    /* Radio Player */
    --bdm-player-height: 60px;

    /* Override Bootstrap primary */
    --bs-primary:       var(--bdm-red);
    --bs-body-bg:       var(--bdm-black);
    --bs-body-color:    var(--bdm-white);
    --bs-border-color:  var(--bdm-border);
    --bs-link-color:    var(--bdm-white);
    --bs-link-hover-color: var(--bdm-red);
}

/* =============================================
   GLOBAL BASE OVERRIDES
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Extra bottom padding for sticky radio player */
    scroll-padding-bottom: var(--bdm-player-height);
}

body {
    background-color: var(--bdm-black);
    color: var(--bdm-white);
    font-family: var(--bdm-font-body);
    font-size: 1rem;
    line-height: 1.6;
    /* Reserve space for sticky radio player at bottom */
    padding-bottom: var(--bdm-player-height);
}

a {
    color: var(--bdm-white);
    text-decoration: none;
    transition: color var(--bdm-transition);
}
a:hover { color: var(--bdm-red); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bdm-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.15;
    color: var(--bdm-white);
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.text-red    { color: var(--bdm-red) !important; }
.text-muted-bdm { color: var(--bdm-muted) !important; }
.bg-bdm-black { background-color: var(--bdm-black) !important; }
.bg-bdm-dark  { background-color: var(--bdm-dark) !important; }
.bg-bdm-card  { background-color: var(--bdm-card) !important; }
.border-bdm   { border-color: var(--bdm-border) !important; }

.section-label {
    font-family: var(--bdm-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bdm-red);
}

.section-title {
    font-family: var(--bdm-font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bdm-white);
    margin: 0;
}

.see-all-link {
    font-family: var(--bdm-font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bdm-red);
    white-space: nowrap;
}
.see-all-link:hover { color: var(--bdm-red-hover); }

/* =============================================
   BUTTONS (BDM Custom)
   ============================================= */
.btn-bdm-red {
    background-color: var(--bdm-red);
    border: 2px solid var(--bdm-red);
    color: var(--bdm-white);
    font-family: var(--bdm-font-heading);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1.5rem;
    border-radius: var(--bdm-radius);
    transition: background-color var(--bdm-transition), border-color var(--bdm-transition);
    cursor: pointer;
    display: inline-block;
}
.btn-bdm-red:hover {
    background-color: var(--bdm-red-dark);
    border-color: var(--bdm-red-dark);
    color: var(--bdm-white);
}

.btn-bdm-outline {
    background-color: transparent;
    border: 2px solid var(--bdm-white);
    color: var(--bdm-white);
    font-family: var(--bdm-font-heading);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1.5rem;
    border-radius: var(--bdm-radius);
    transition: background-color var(--bdm-transition), border-color var(--bdm-transition), color var(--bdm-transition);
    cursor: pointer;
    display: inline-block;
}
.btn-bdm-outline:hover {
    background-color: var(--bdm-white);
    color: var(--bdm-black);
}

.btn-bdm-outline-red {
    background-color: transparent;
    border: 1px solid var(--bdm-border-2);
    color: var(--bdm-white);
    font-family: var(--bdm-font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 1.2rem;
    border-radius: var(--bdm-radius);
    transition: all var(--bdm-transition);
    cursor: pointer;
    display: inline-block;
}
.btn-bdm-outline-red:hover {
    border-color: var(--bdm-red);
    color: var(--bdm-red);
}

/* =============================================
   CARDS
   ============================================= */
.bdm-card {
    background-color: var(--bdm-card);
    border: 1px solid var(--bdm-border);
    border-radius: var(--bdm-radius-lg);
    overflow: hidden;
    transition: border-color var(--bdm-transition), transform var(--bdm-transition);
}
.bdm-card:hover {
    border-color: var(--bdm-border-2);
    transform: translateY(-2px);
}

/* Tag/Pill badges */
.bdm-badge {
    display: inline-block;
    background-color: var(--bdm-card-2);
    border: 1px solid var(--bdm-border-2);
    color: var(--bdm-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
}
.bdm-badge.active { color: var(--bdm-red); border-color: var(--bdm-red); }