/**
 * Reggae Kenya Rasta Theme
 * 
 * Rasta-inspired visual styling with red, gold, and green
 *
 * @package ReggaeKenya
 * @version 1.0.0
 */

/* ============================================
   RASTA BACKGROUNDS
   ============================================ */

.rk-bg-rasta {
    background: var(--rasta-gradient);
}

.rk-bg-rasta-vertical {
    background: var(--rasta-gradient-vertical);
}

.rk-bg-dark {
    background: var(--dark-base);
}

.rk-bg-dark-gradient {
    background: var(--dark-gradient);
}

.rk-bg-layer-1 {
    background: var(--dark-layer-1);
}

.rk-bg-layer-2 {
    background: var(--dark-layer-2);
}

.rk-bg-layer-3 {
    background: var(--dark-layer-3);
}

/* ============================================
   RASTA BORDERS
   ============================================ */

.rk-border-rasta {
    border: 2px solid transparent;
    background-image: 
        linear-gradient(var(--dark-layer-2), var(--dark-layer-2)),
        var(--rasta-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.rk-border-top-rasta {
    border-top: 4px solid transparent;
    border-image: var(--rasta-gradient) 1;
    border-image-slice: 1;
}

.rk-border-bottom-rasta {
    border-bottom: 4px solid transparent;
    border-image: var(--rasta-gradient) 1;
    border-image-slice: 1;
}

/* ============================================
   RASTA TEXT GRADIENTS
   ============================================ */

.rk-text-rasta {
    background: var(--rasta-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.rk-text-neon-green {
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
}

.rk-text-neon-gold {
    color: var(--neon-gold);
    text-shadow: 0 0 10px var(--neon-gold);
}

.rk-text-neon-red {
    color: var(--neon-red);
    text-shadow: 0 0 10px var(--neon-red);
}

/* ============================================
   RASTA BUTTONS
   ============================================ */

.rk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-display);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    user-select: none;
}

.rk-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.3);
}

.rk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary Button - Rasta Gradient */
.rk-btn-primary {
    background: var(--rasta-gradient);
    color: var(--text-inverse);
    border-color: transparent;
}

.rk-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-rasta), var(--shadow-lg);
}

.rk-btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button - Outlined */
.rk-btn-secondary {
    background: transparent;
    color: var(--rasta-gold);
    border-color: var(--rasta-gold);
}

.rk-btn-secondary:hover {
    background: var(--rasta-gold);
    color: var(--text-inverse);
    box-shadow: var(--glow-gold);
}

/* Success Button */
.rk-btn-success {
    background: var(--rasta-green);
    color: var(--text-primary);
}

.rk-btn-success:hover {
    background: var(--rasta-green-light);
    box-shadow: var(--glow-green);
}

/* Danger Button */
.rk-btn-danger {
    background: var(--rasta-red);
    color: var(--text-primary);
}

.rk-btn-danger:hover {
    background: var(--rasta-red-light);
    box-shadow: var(--glow-red);
}

/* Ghost Button */
.rk-btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: transparent;
}

.rk-btn-ghost:hover {
    background: var(--dark-layer-3);
}

/* Button Sizes */
.rk-btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-sm);
}

.rk-btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-lg);
}

.rk-btn-block {
    width: 100%;
    display: flex;
}

/* ============================================
   RASTA BADGES
   ============================================ */

.rk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.rk-badge-red {
    background: var(--rasta-red);
    color: var(--text-primary);
}

.rk-badge-gold {
    background: var(--rasta-gold);
    color: var(--text-inverse);
}

.rk-badge-green {
    background: var(--rasta-green);
    color: var(--text-primary);
}

.rk-badge-rasta {
    background: var(--rasta-gradient);
    color: var(--text-inverse);
}

.rk-badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}

/* ============================================
   RASTA CARDS
   ============================================ */

.rk-card {
    background: var(--dark-layer-2);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.rk-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--rasta-gold);
}

.rk-card-rasta {
    border: 2px solid transparent;
    background-image: 
        linear-gradient(var(--dark-layer-2), var(--dark-layer-2)),
        var(--rasta-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.rk-card-glow {
    box-shadow: var(--glow-rasta);
}

/* ============================================
   RASTA SECTION HEADERS
   ============================================ */

.rk-section {
    padding: var(--space-16) 0;
    position: relative;
}

.rk-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}

.rk-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-3xl);
    font-weight: var(--font-black);
    color: var(--text-primary);
}

.rk-section-title .dashicons {
    font-size: var(--font-4xl);
    width: auto;
    height: auto;
    color: var(--rasta-gold);
}

.rk-view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--rasta-gold);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
}

.rk-view-all:hover {
    color: var(--neon-gold);
    transform: translateX(4px);
}

/* ============================================
   RASTA DIVIDERS
   ============================================ */

.rk-divider {
    height: 4px;
    background: var(--rasta-gradient);
    border: none;
    margin: var(--space-8) 0;
}

.rk-divider-thin {
    height: 1px;
    background: var(--dark-border);
    border: none;
    margin: var(--space-4) 0;
}

/* ============================================
   VERIFIED & FEATURED BADGES
   ============================================ */

.rk-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--rasta-green);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 14px;
}

.rk-verified-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.rk-featured-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--rasta-gold);
    border-radius: var(--radius-full);
    color: var(--text-inverse);
    font-size: 14px;
}

.rk-featured-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.rk-explicit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--rasta-red);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
}

/* ============================================
   RASTA GLOW EFFECTS
   ============================================ */

.rk-glow-red {
    box-shadow: var(--glow-red);
}

.rk-glow-gold {
    box-shadow: var(--glow-gold);
}

.rk-glow-green {
    box-shadow: var(--glow-green);
}

.rk-glow-rasta {
    box-shadow: var(--glow-rasta);
}

.rk-glow-text-red {
    color: var(--rasta-red);
    text-shadow: var(--glow-red);
}

.rk-glow-text-gold {
    color: var(--rasta-gold);
    text-shadow: var(--glow-gold);
}

.rk-glow-text-green {
    color: var(--rasta-green);
    text-shadow: var(--glow-green);
}

/* ============================================
   RASTA PATTERNS & TEXTURES
   ============================================ */

.rk-pattern-stripes {
    background-image: repeating-linear-gradient(
        0deg,
        var(--rasta-red) 0px,
        var(--rasta-red) 10px,
        var(--rasta-gold) 10px,
        var(--rasta-gold) 20px,
        var(--rasta-green) 20px,
        var(--rasta-green) 30px
    );
    opacity: 0.1;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rk-noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
}