/* ==========================================================================
   Creathinkco Theme — Main CSS
   All custom styles that don't require Tailwind's @apply directive.
   (Tailwind @apply utilities live in header.php as type="text/tailwindcss")
   ========================================================================== */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
    --primary:         #C5A059;
    --champagne:       #E5D3B3;
    --background-dark: #0A0A0A;
    --surface-dark:    #111111;
    --border-dark:     #2A2A2A;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #000000;
    color: #cbd5e1; /* slate-300 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Hero Mesh Background ────────────────────────────────────────────────── */
.hero-mesh {
    background:
        radial-gradient(circle at 15% 50%, rgba(197, 160, 89, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(197, 160, 89, 0.05) 0%, transparent 40%),
        #000000;
}

/* ── Hand-drawn Underlines ───────────────────────────────────────────────── */
/* White variant */
.hand-drawn-line {
    position: relative;
}
.hand-drawn-line::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background: url("data:image/svg+xml,%3Csvg width='300' height='8' viewBox='0 0 300 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5.5C40 3.5 120 1.5 298 5.5' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
}

/* Gold variant */
.hand-drawn-line-gold {
    position: relative;
}
.hand-drawn-line-gold::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background: url("data:image/svg+xml,%3Csvg width='300' height='8' viewBox='0 0 300 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5.5C40 3.5 120 1.5 298 5.5' stroke='%23C5A059' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
}

/* Gold streak divider */
.gold-streak {
    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.2), transparent);
    height: 1px;
    width: 100%;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--champagne);
}

/* ── Focus Ring ──────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ── WordPress Body Class Spacing ────────────────────────────────────────── */
/* Ensures content clears the fixed header (h ≈ 88px) */
.admin-bar header {
    top: 32px;
}

/* ── Smooth Image Loading ────────────────────────────────────────────────── */
img {
    display: block;
    max-width: 100%;
}