/*
Theme Name: Strait-A Artist Theme
Theme URI: https://strait-a.com
Author: Strait-A
Author URI: https://strait-a.com
Description: A stunning Kintsugi-inspired WordPress theme for music artists. Features 3 customizable hero slideshows, WooCommerce integration for selling music and video, and a dark luxurious aesthetic with gold accents.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: strait-a
Tags: music, artist, e-commerce, dark, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, woocommerce

Strait-A Artist Theme - Where broken becomes beautiful.
Inspired by Kintsugi, the Japanese art of repairing with gold.
*/

/* ==========================================================================
   CSS Variables - Kintsugi Theme
   ========================================================================== */
:root {
    /* Core Colors */
    --obsidian-void: #0a0a0f;
    --obsidian-deep: #0f0f14;
    --obsidian-light: #1a1a1f;
    --kintsugi-gold: #d4af37;
    --kintsugi-gold-light: #e6c558;
    --kintsugi-gold-dark: #b8941f;
    --electric-indigo: #4b0082;
    --indigo-glow: #6a0dad;
    --ghost-white: #f8f8ff;
    --ghost-muted: rgba(248, 248, 255, 0.7);
    
    /* Shadows & Glows */
    --gold-shadow: rgba(212, 175, 55, 0.3);
    --gold-glow: rgba(212, 175, 55, 0.5);
    --indigo-shadow: rgba(75, 0, 130, 0.3);
    
    /* Spacing */
    --section-padding: clamp(4rem, 10vw, 8rem);
    --container-max: 1400px;
    
    /* Typography */
    --font-display: 'Cinzel', serif;
    --font-heading: 'Archivo Black', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--obsidian-void);
    color: var(--ghost-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
    background: var(--kintsugi-gold);
    color: var(--obsidian-void);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--obsidian-void);
}

::-webkit-scrollbar-thumb {
    background: var(--kintsugi-gold);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kintsugi-gold-dark);
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--kintsugi-gold);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
    margin-bottom: 1rem;
    color: var(--ghost-muted);
}

a {
    color: var(--kintsugi-gold);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--kintsugi-gold-light);
    text-shadow: 0 0 10px var(--gold-shadow);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

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

/* Kintsugi Crack Decoration */
.kintsugi-divider {
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--kintsugi-gold) 20%, 
        var(--kintsugi-gold) 80%, 
        transparent 100%
    );
    opacity: 0.6;
    margin: 2rem 0;
}