/* ================================================
   BBM CUSTOM STYLES — brennenbarrigar.com
   Brennen Barrigar Music | 1970s Record Label × 2026 AI
   Version: 1.0.0
   ================================================
   01. Google Fonts Import
   02. CSS Custom Properties
   03. Base & Reset
   04. Grain Texture Overlay
   05. Typography Enhancements
   06. Navigation / Header
   07. Hero Section
   08. Gold Rule Dividers
   09. Vinyl Divider
   10. Artist Cards (Glassmorphism)
   11. Artist Archive Grid
   12. Single Artist Page
   13. Artist Meta Grid
   14. Audio Player Overrides (Sonaar)
   15. AI Chat Panel (AI Engine)
   16. Neural Network Animation
   17. Buttons & CTAs
   18. Footer
   19. Utility Classes
   20. Responsive
   ================================================ */


/* ================================================
   01. GOOGLE FONTS IMPORT
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');


/* ================================================
   02. CSS CUSTOM PROPERTIES
   ================================================ */
:root {
    /* Core Palette */
    --bbm-tobacco:          #2C1A0E;
    --bbm-tobacco-dark:     #1A0F08;
    --bbm-tobacco-mid:      #3D2515;
    --bbm-tobacco-light:    #4E3020;
    --bbm-gold:             #D4A84B;
    --bbm-gold-light:       #F0D080;
    --bbm-gold-dim:         #A07830;
    --bbm-gold-glass:       rgba(212, 168, 75, 0.10);
    --bbm-gold-glass-hover: rgba(212, 168, 75, 0.18);
    --bbm-gold-border:      rgba(212, 168, 75, 0.30);
    --bbm-gold-border-bright: rgba(212, 168, 75, 0.55);
    --bbm-cream:            #F5E6C8;
    --bbm-cream-dim:        #C8B898;
    --bbm-cream-muted:      #9A8868;
    --bbm-navy:             #1A2A3A;
    --bbm-navy-dark:        #0D1A26;
    --bbm-navy-mid:         #243545;
    --bbm-black:            #0D0907;

    /* Typography */
    --bbm-font-display: 'Playfair Display', Georgia, serif;
    --bbm-font-sub:     'Cormorant Garamond', Georgia, serif;
    --bbm-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --bbm-font-mono:    'Space Mono', 'Courier New', monospace;

    /* Spacing Scale */
    --bbm-space-1:  0.25rem;
    --bbm-space-2:  0.5rem;
    --bbm-space-3:  0.75rem;
    --bbm-space-4:  1rem;
    --bbm-space-6:  1.5rem;
    --bbm-space-8:  2rem;
    --bbm-space-12: 3rem;
    --bbm-space-16: 4rem;
    --bbm-space-24: 6rem;
    --bbm-space-32: 8rem;

    /* Border Radius */
    --bbm-radius-xs: 2px;
    --bbm-radius-sm: 6px;
    --bbm-radius-md: 12px;
    --bbm-radius-lg: 20px;
    --bbm-radius-xl: 32px;

    /* Borders */
    --bbm-border:        1px solid var(--bbm-gold-border);
    --bbm-border-bright: 1px solid var(--bbm-gold-border-bright);

    /* Shadows */
    --bbm-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
    --bbm-shadow-md:   0 8px 32px rgba(0, 0, 0, 0.45);
    --bbm-shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.6);
    --bbm-shadow-gold: 0 0 40px rgba(212, 168, 75, 0.18);
    --bbm-shadow-glow: 0 0 80px rgba(212, 168, 75, 0.12);
    --bbm-inset-gold:  inset 0 1px 0 rgba(212, 168, 75, 0.2);

    /* Transitions */
    --bbm-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --bbm-ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
    --bbm-transition-sm: 0.2s var(--bbm-ease);
    --bbm-transition:    0.3s var(--bbm-ease);
    --bbm-transition-lg: 0.5s var(--bbm-ease);
}


/* ================================================
   03. BASE & RESET
   ================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bbm-tobacco-dark);
    color: var(--bbm-cream);
    font-family: var(--bbm-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Remove TT25 white backgrounds */
.wp-site-blocks,
.entry-content,
.wp-block-post-content {
    background-color: transparent !important;
}


/* ================================================
   04. GRAIN TEXTURE OVERLAY
   Film grain effect — adds vintage warmth to every page
   ================================================ */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    background-repeat: repeat;
}


/* ================================================
   05. TYPOGRAPHY ENHANCEMENTS
   ================================================ */
h1, h2, h3, h4 {
    font-family: var(--bbm-font-display);
    color: var(--bbm-gold);
}

h5, h6 {
    font-family: var(--bbm-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--bbm-gold);
}

p {
    color: var(--bbm-cream);
    line-height: 1.75;
}

strong, b {
    color: var(--bbm-cream);
    font-weight: 600;
}

em, i {
    font-family: var(--bbm-font-sub);
    font-style: italic;
}

/* Eyebrow label — mono, spaced, gold */
.bbm-eyebrow,
.wp-block-paragraph.bbm-eyebrow {
    display: block;
    font-family: var(--bbm-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bbm-gold-dim);
    margin-bottom: var(--bbm-space-3);
}

/* Mono label */
.bbm-label {
    font-family: var(--bbm-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bbm-gold);
}

blockquote {
    border-left: 3px solid var(--bbm-gold);
    padding-left: var(--bbm-space-6);
    margin-left: 0;
    font-family: var(--bbm-font-sub);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--bbm-cream-dim);
}

::selection {
    background: var(--bbm-gold);
    color: var(--bbm-tobacco-dark);
}


/* ================================================
   06. NAVIGATION / HEADER
   ================================================ */
header.wp-block-template-part,
.wp-block-template-part[data-slug="header"] {
    background: rgba(26, 15, 8, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: var(--bbm-border);
    position: sticky;
    top: 0;
    z-index: 200;
}

/* Site title */
.wp-block-site-title,
.wp-block-site-title a {
    font-family: var(--bbm-font-display) !important;
    font-weight: 700;
    font-size: 1.2rem !important;
    letter-spacing: 0.04em;
    color: var(--bbm-gold) !important;
    text-decoration: none !important;
}

.wp-block-site-title a:hover {
    color: var(--bbm-gold-light) !important;
}

/* Navigation links */
.wp-block-navigation a,
.wp-block-navigation__submenu-container a {
    font-family: var(--bbm-font-mono) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--bbm-cream-dim) !important;
    text-decoration: none !important;
    transition: color var(--bbm-transition-sm) !important;
}

.wp-block-navigation a:hover {
    color: var(--bbm-gold) !important;
}

/* Nav current page */
.wp-block-navigation .current-menu-item > a {
    color: var(--bbm-gold) !important;
}


/* ================================================
   07. HERO SECTION
   ================================================ */
.bbm-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bbm-tobacco);
}

/* Radial vignette */
.bbm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        transparent 30%,
        rgba(13, 9, 7, 0.8) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.bbm-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--bbm-space-16) var(--bbm-space-8);
    max-width: 900px;
}

.bbm-hero__title {
    font-family: var(--bbm-font-display);
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    font-weight: 900;
    color: var(--bbm-gold);
    line-height: 0.95;
    margin: 0 0 var(--bbm-space-6);
    text-shadow: 0 0 80px rgba(212, 168, 75, 0.25);
    letter-spacing: -0.01em;
}

.bbm-hero__subtitle {
    font-family: var(--bbm-font-sub);
    font-size: clamp(1.1rem, 2.5vw, 1.7rem);
    color: var(--bbm-cream-dim);
    font-style: italic;
    letter-spacing: 0.04em;
    margin-bottom: var(--bbm-space-12);
}

.bbm-hero__cta-group {
    display: flex;
    gap: var(--bbm-space-4);
    justify-content: center;
    flex-wrap: wrap;
}


/* ================================================
   08. GOLD RULE DIVIDERS
   ================================================ */
.bbm-rule,
hr.bbm-rule {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--bbm-gold-border) 15%,
        var(--bbm-gold) 50%,
        var(--bbm-gold-border) 85%,
        transparent 100%
    );
    margin: var(--bbm-space-16) auto;
    max-width: 500px;
    opacity: 0.7;
}

.bbm-rule--full {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.bbm-rule--subtle {
    opacity: 0.35;
}

/* Double rule variant */
.bbm-rule--double {
    background: none;
    border-top: 1px solid var(--bbm-gold-border);
    border-bottom: 1px solid var(--bbm-gold-border);
    height: 5px;
}


/* ================================================
   09. VINYL DIVIDER
   Decorative groove-inspired section break
   ================================================ */
.bbm-vinyl-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bbm-space-4);
    margin: var(--bbm-space-16) 0;
    padding: 0 var(--bbm-space-8);
}

.bbm-vinyl-divider::before,
.bbm-vinyl-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    opacity: 0.4;
}

.bbm-vinyl-divider::before {
    background: linear-gradient(90deg, transparent, var(--bbm-gold));
}

.bbm-vinyl-divider::after {
    background: linear-gradient(270deg, transparent, var(--bbm-gold));
}

.bbm-vinyl-divider__dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--bbm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bbm-vinyl-divider__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bbm-gold);
    box-shadow: 0 0 10px var(--bbm-gold);
}


/* ================================================
   10. ARTIST CARDS (GLASSMORPHISM)
   ================================================ */
.bbm-artist-card {
    position: relative;
    background: var(--bbm-gold-glass);
    border: var(--bbm-border);
    border-radius: var(--bbm-radius-md);
    overflow: hidden;
    transition:
        transform var(--bbm-transition),
        box-shadow var(--bbm-transition),
        border-color var(--bbm-transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--bbm-shadow-md), var(--bbm-inset-gold);
    text-decoration: none;
    display: block;
}

.bbm-artist-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--bbm-shadow-lg), var(--bbm-shadow-gold);
    border-color: var(--bbm-gold-border-bright);
}

/* Card image */
.bbm-artist-card .wp-block-post-featured-image img,
.bbm-artist-card__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    filter: sepia(25%) contrast(1.05) brightness(0.95);
    transition:
        filter var(--bbm-transition-lg),
        transform var(--bbm-transition-lg);
}

.bbm-artist-card:hover .wp-block-post-featured-image img,
.bbm-artist-card:hover .bbm-artist-card__image {
    filter: sepia(5%) contrast(1.08) brightness(1.0);
    transform: scale(1.04);
}

/* Gradient overlay at bottom of card */
.bbm-artist-card__overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--bbm-space-12) var(--bbm-space-4) var(--bbm-space-4);
    background: linear-gradient(
        to top,
        rgba(13, 9, 7, 0.97) 0%,
        rgba(44, 26, 14, 0.72) 55%,
        transparent 100%
    );
}

.bbm-artist-card__name,
.bbm-artist-card .wp-block-post-title {
    font-family: var(--bbm-font-display) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: var(--bbm-cream) !important;
    margin: 0 0 var(--bbm-space-1) !important;
    line-height: 1.15 !important;
}

.bbm-artist-card__name a,
.bbm-artist-card .wp-block-post-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.bbm-artist-card__role {
    font-family: var(--bbm-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bbm-gold);
    margin: 0;
}

/* Stamp badge — top right corner */
.bbm-stamp {
    position: absolute;
    top: var(--bbm-space-3);
    right: var(--bbm-space-3);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: var(--bbm-border);
    background: rgba(13, 9, 7, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--bbm-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bbm-gold);
    text-align: center;
    padding: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}


/* ================================================
   11. ARTIST ARCHIVE GRID
   ================================================ */
.bbm-archive-header {
    text-align: center;
    padding: var(--bbm-space-32) var(--bbm-space-8) var(--bbm-space-8);
}

.bbm-archive-header__title {
    font-family: var(--bbm-font-display);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--bbm-gold);
    line-height: 1;
    margin-bottom: var(--bbm-space-4);
}

.bbm-archive-header__sub {
    font-family: var(--bbm-font-sub);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--bbm-cream-dim);
    max-width: 520px;
    margin: 0 auto;
}

/* Genre filter pills */
.bbm-genre-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bbm-space-2);
    justify-content: center;
    padding: var(--bbm-space-6) var(--bbm-space-4);
}

.bbm-genre-filter__btn {
    font-family: var(--bbm-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bbm-cream-dim);
    background: transparent;
    border: var(--bbm-border);
    border-radius: 100px;
    padding: 0.45rem 1.3rem;
    cursor: pointer;
    transition: all var(--bbm-transition-sm);
    text-decoration: none;
    display: inline-block;
}

.bbm-genre-filter__btn:hover,
.bbm-genre-filter__btn.is-active {
    background: var(--bbm-gold);
    border-color: var(--bbm-gold);
    color: var(--bbm-tobacco-dark);
}

/* Artist grid */
.bbm-artists-grid,
.wp-block-post-template.bbm-artists-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--bbm-space-8) !important;
    padding: var(--bbm-space-8) var(--bbm-space-8) var(--bbm-space-16) !important;
    max-width: 1400px;
    margin: 0 auto;
    list-style: none !important;
}


/* ================================================
   12. SINGLE ARTIST PAGE
   ================================================ */
.bbm-artist-single {
    padding: var(--bbm-space-16) var(--bbm-space-8);
}

.bbm-artist-hero {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--bbm-space-16);
    align-items: start;
    margin-bottom: var(--bbm-space-24);
}

.bbm-artist-hero__image-wrap {
    position: sticky;
    top: 100px;
}

.bbm-artist-hero__image-wrap img,
.bbm-artist-hero__image {
    width: 100%;
    border-radius: var(--bbm-radius-md);
    border: var(--bbm-border);
    filter: sepia(20%) contrast(1.06) brightness(0.95);
    box-shadow: var(--bbm-shadow-lg), var(--bbm-shadow-gold);
    transition: filter var(--bbm-transition-lg);
}

.bbm-artist-hero__image-wrap:hover img {
    filter: sepia(5%) contrast(1.08) brightness(1.0);
}

.bbm-artist-hero__info .wp-block-post-title {
    font-family: var(--bbm-font-display) !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    font-weight: 700 !important;
    color: var(--bbm-gold) !important;
    line-height: 1.0 !important;
    margin-bottom: var(--bbm-space-4) !important;
}

.bbm-artist-hero__info .wp-block-post-excerpt {
    font-family: var(--bbm-font-sub) !important;
    font-size: 1.25rem !important;
    font-style: italic !important;
    color: var(--bbm-cream-dim) !important;
}


/* ================================================
   13. ARTIST META GRID
   ================================================ */
.bbm-artist-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bbm-space-3);
    margin: var(--bbm-space-8) 0;
}

.bbm-meta-item {
    background: var(--bbm-gold-glass);
    border: var(--bbm-border);
    border-radius: var(--bbm-radius-sm);
    padding: var(--bbm-space-4) var(--bbm-space-4);
    backdrop-filter: blur(6px);
    transition: background var(--bbm-transition-sm);
}

.bbm-meta-item:hover {
    background: var(--bbm-gold-glass-hover);
}

.bbm-meta-item__label {
    display: block;
    font-family: var(--bbm-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bbm-gold-dim);
    margin-bottom: var(--bbm-space-1);
}

.bbm-meta-item__value {
    font-family: var(--bbm-font-sub);
    font-size: 1.05rem;
    color: var(--bbm-cream);
    line-height: 1.3;
}

/* Full-width meta item */
.bbm-meta-item--full {
    grid-column: 1 / -1;
}


/* ================================================
   14. AUDIO PLAYER OVERRIDES (SONAAR)
   ================================================ */
.bbm-player-section {
    background: var(--bbm-navy);
    border: var(--bbm-border);
    border-radius: var(--bbm-radius-md);
    padding: var(--bbm-space-8);
    margin: var(--bbm-space-12) 0;
    box-shadow: var(--bbm-shadow-md);
    position: relative;
    overflow: hidden;
}

/* Subtle inner glow */
.bbm-player-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bbm-gold-border), transparent);
    pointer-events: none;
}

/* Sonaar player color overrides via their CSS variables */
:root {
    --sonaar-player-bg-color:         transparent;
    --sonaar-player-icon-color:        #D4A84B;
    --sonaar-player-text-color:        #F5E6C8;
    --sonaar-player-bar-color:         #D4A84B;
    --sonaar-player-bar-wave-color:    rgba(212,168,75,0.35);
    --sonaar-progress-color:           #D4A84B;
    --sonaar-track-color:              rgba(212,168,75,0.2);
}

/* Broader Sonaar overrides */
.sonaar-music-player,
.iron_widget_radio,
.srp-widget__player {
    background: transparent !important;
    color: var(--bbm-cream) !important;
    font-family: var(--bbm-font-body) !important;
}

.sonaar-music-player .track-title,
.srp-widget__track-title {
    font-family: var(--bbm-font-sub) !important;
    color: var(--bbm-cream) !important;
}

.sonaar-music-player .track-artist,
.srp-widget__track-artist {
    font-family: var(--bbm-font-mono) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.15em !important;
    color: var(--bbm-gold) !important;
}

/* Play/pause button */
.sonaar-music-player .play-pause-btn,
.srp-widget__play-btn {
    background: var(--bbm-gold) !important;
    color: var(--bbm-tobacco-dark) !important;
    border-radius: 50% !important;
    transition: transform var(--bbm-transition-sm) !important;
}

.sonaar-music-player .play-pause-btn:hover {
    transform: scale(1.08) !important;
    background: var(--bbm-gold-light) !important;
}


/* ================================================
   15. AI CHAT PANEL (AI ENGINE)
   ================================================ */
.bbm-ai-panel {
    position: relative;
    background: var(--bbm-navy-dark);
    border: var(--bbm-border);
    border-radius: var(--bbm-radius-md);
    padding: var(--bbm-space-8);
    margin: var(--bbm-space-12) 0;
    overflow: hidden;
    box-shadow: var(--bbm-shadow-md);
}

/* Neural grid background texture */
.bbm-ai-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212,168,75,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,168,75,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.bbm-ai-panel > * {
    position: relative;
    z-index: 1;
}

.bbm-ai-panel__header {
    display: flex;
    align-items: center;
    gap: var(--bbm-space-3);
    margin-bottom: var(--bbm-space-6);
    padding-bottom: var(--bbm-space-4);
    border-bottom: var(--bbm-border);
}

/* Pulsing status indicator */
.bbm-ai-panel__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bbm-gold);
    box-shadow: 0 0 10px rgba(212,168,75,0.6);
    animation: bbm-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

.bbm-ai-panel__title {
    font-family: var(--bbm-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bbm-gold);
    margin: 0;
}

.bbm-ai-panel__desc {
    font-family: var(--bbm-font-sub);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--bbm-cream-dim);
    margin-bottom: var(--bbm-space-6);
}

/* AI Engine chatbot overrides */
.bbm-ai-panel .mwai-chat,
.bbm-ai-panel .mwai-chatbot {
    background: transparent !important;
    border: none !important;
    font-family: var(--bbm-font-body) !important;
    color: var(--bbm-cream) !important;
}

.bbm-ai-panel .mwai-chat .mwai-input-container {
    background: rgba(212,168,75,0.06) !important;
    border: var(--bbm-border) !important;
    border-radius: var(--bbm-radius-sm) !important;
}

.bbm-ai-panel .mwai-chat .mwai-input {
    background: transparent !important;
    color: var(--bbm-cream) !important;
    font-family: var(--bbm-font-body) !important;
    font-size: 0.95rem !important;
}

.bbm-ai-panel .mwai-chat .mwai-input::placeholder {
    color: var(--bbm-cream-muted) !important;
}

.bbm-ai-panel .mwai-chat .mwai-submit {
    background: var(--bbm-gold) !important;
    color: var(--bbm-tobacco-dark) !important;
    font-family: var(--bbm-font-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: var(--bbm-radius-xs) !important;
    transition: background var(--bbm-transition-sm) !important;
}

.bbm-ai-panel .mwai-chat .mwai-submit:hover {
    background: var(--bbm-gold-light) !important;
}

/* AI message bubbles */
.bbm-ai-panel .mwai-chat .mwai-reply {
    background: rgba(212,168,75,0.07) !important;
    border: var(--bbm-border) !important;
    border-radius: var(--bbm-radius-sm) !important;
    color: var(--bbm-cream) !important;
    font-family: var(--bbm-font-body) !important;
}

.bbm-ai-panel .mwai-chat .mwai-query {
    background: rgba(26, 42, 58, 0.5) !important;
    color: var(--bbm-cream) !important;
    font-family: var(--bbm-font-body) !important;
}


/* ================================================
   16. NEURAL NETWORK ANIMATION
   SVG line animation used as a section divider
   ================================================ */
.bbm-neural-divider {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
    margin: var(--bbm-space-12) 0;
    opacity: 0.5;
}

.bbm-neural-divider svg {
    width: 100%;
    height: 100%;
}

.bbm-neural-line {
    stroke: var(--bbm-gold-border);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 5 10;
    animation: bbm-neural-flow 4s linear infinite;
}

.bbm-neural-line:nth-child(2) {
    stroke-dasharray: 3 12;
    animation-delay: -1.3s;
    opacity: 0.65;
}

.bbm-neural-line:nth-child(3) {
    stroke-dasharray: 7 7;
    animation-delay: -2.6s;
    opacity: 0.35;
}


/* ================================================
   17. BUTTONS & CTAs
   ================================================ */
.bbm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bbm-space-2);
    font-family: var(--bbm-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.9rem 2.2rem;
    border-radius: var(--bbm-radius-xs);
    transition: all var(--bbm-transition-sm);
    cursor: pointer;
    border: none;
    line-height: 1;
    font-weight: 700;
}

/* Primary: gold fill */
.bbm-btn--primary,
.wp-block-button.is-style-primary .wp-block-button__link {
    background: var(--bbm-gold);
    color: var(--bbm-tobacco-dark) !important;
}

.bbm-btn--primary:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
    background: var(--bbm-gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212, 168, 75, 0.38);
}

/* Ghost: transparent with gold border */
.bbm-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--bbm-cream) !important;
    border: var(--bbm-border) !important;
}

.bbm-btn--ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--bbm-gold-glass);
    color: var(--bbm-gold) !important;
    border-color: var(--bbm-gold-border-bright) !important;
    transform: translateY(-2px);
}

/* Default WP block button override */
.wp-block-button__link {
    font-family: var(--bbm-font-mono) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-size: 0.65rem !important;
    border-radius: var(--bbm-radius-xs) !important;
    transition: all var(--bbm-transition-sm) !important;
}


/* ================================================
   18. FOOTER
   ================================================ */
footer.wp-block-template-part,
.wp-block-template-part[data-slug="footer"] {
    border-top: var(--bbm-border);
    background: var(--bbm-tobacco-dark) !important;
    padding: var(--bbm-space-16) var(--bbm-space-8) var(--bbm-space-8);
}

.bbm-footer-brand {
    font-family: var(--bbm-font-display);
    font-size: 1.8rem;
    color: var(--bbm-gold);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bbm-footer-copy {
    font-family: var(--bbm-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bbm-cream-muted);
    display: block;
    text-align: center;
    margin-top: var(--bbm-space-8);
}

/* Footer links */
footer .wp-block-navigation a {
    font-family: var(--bbm-font-mono) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--bbm-cream-muted) !important;
}

footer .wp-block-navigation a:hover {
    color: var(--bbm-gold) !important;
}


/* ================================================
   19. UTILITY CLASSES
   ================================================ */
.bbm-text-gold    { color: var(--bbm-gold) !important; }
.bbm-text-cream   { color: var(--bbm-cream) !important; }
.bbm-text-muted   { color: var(--bbm-cream-dim) !important; }
.bbm-text-mono    { font-family: var(--bbm-font-mono) !important; }
.bbm-text-display { font-family: var(--bbm-font-display) !important; }
.bbm-text-sub     { font-family: var(--bbm-font-sub) !important; }
.bbm-text-center  { text-align: center !important; }
.bbm-text-upper   { text-transform: uppercase !important; letter-spacing: 0.18em !important; }

.bbm-bg-navy      { background-color: var(--bbm-navy) !important; }
.bbm-bg-tobacco   { background-color: var(--bbm-tobacco) !important; }
.bbm-bg-glass     { background: var(--bbm-gold-glass) !important; backdrop-filter: blur(8px); }

.bbm-border       { border: var(--bbm-border) !important; }
.bbm-border-radius { border-radius: var(--bbm-radius-md) !important; }

.bbm-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ================================================
   20. KEYFRAME ANIMATIONS
   ================================================ */
@keyframes bbm-neural-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -60; }
}

@keyframes bbm-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(212,168,75,0.7);
    }
    50% {
        opacity: 0.45;
        box-shadow: 0 0 4px rgba(212,168,75,0.3);
    }
}

@keyframes bbm-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bbm-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}


/* ================================================
   21. RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
    .bbm-artist-hero {
        grid-template-columns: 300px 1fr;
        gap: var(--bbm-space-8);
    }
}

@media (max-width: 768px) {
    .bbm-artist-hero {
        grid-template-columns: 1fr;
    }

    .bbm-artist-hero__image-wrap {
        position: static;
        max-width: 320px;
        margin: 0 auto;
    }

    .bbm-artist-meta-grid {
        grid-template-columns: 1fr;
    }

    .bbm-artists-grid,
    .wp-block-post-template.bbm-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: var(--bbm-space-4) !important;
        padding: var(--bbm-space-4) !important;
    }

    .bbm-hero__title {
        font-size: clamp(2.8rem, 12vw, 4rem);
    }

    .bbm-archive-header {
        padding: var(--bbm-space-16) var(--bbm-space-4) var(--bbm-space-4);
    }

    .bbm-artist-single {
        padding: var(--bbm-space-8) var(--bbm-space-4);
    }
}

/* ================================================
   22. HOMEPAGE SPECIFIC
   ================================================ */

/* Section base */
.bbm-section {
    width: 100%;
}

.bbm-section--navy {
    background-color: var(--bbm-navy);
}

/* Homepage artist grid — 3 columns, wider cards */
.bbm-artists-grid--home,
.wp-block-post-template.bbm-artists-grid--home {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1200px;
    margin: 3rem auto 0 !important;
    padding: 0 var(--bbm-space-8) !important;
}

/* About section ornament */
.bbm-about__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bbm-space-8);
}

.bbm-about__ornament svg {
    filter: drop-shadow(0 0 30px rgba(212,168,75,0.12));
    animation: bbm-spin-slow 60s linear infinite;
}

@keyframes bbm-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* CTA band */
.bbm-cta-band {
    text-align: center;
    background-color: var(--bbm-tobacco-mid) !important;
}

/* ================================================
   23. RESPONSIVE (continued)
   ================================================ */

@media (max-width: 480px) {
    .bbm-artists-grid,
    .wp-block-post-template.bbm-artists-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--bbm-space-3) !important;
    }

    .bbm-hero__cta-group {
        flex-direction: column;
        align-items: center;
    }

    .bbm-btn {
        width: 100%;
        max-width: 280px;
    }
}