/* ==========================================================================
   Poroshok Theme — Main CSS
   CSS variables & custom styles matching Next.js design
   ========================================================================== */

/* --- CSS Variables (OKLch → fallback to rgb for older browsers) --- */
:root {
    --background: oklch(0.12 0.005 60);
    --foreground: oklch(0.95 0 0);
    --card: oklch(0.16 0.005 60);
    --card-foreground: oklch(0.95 0 0);
    --popover: oklch(0.14 0.005 60);
    --popover-foreground: oklch(0.95 0 0);
    --primary: oklch(0.72 0.18 45);
    --primary-foreground: oklch(0.12 0 0);
    --secondary: oklch(0.22 0.005 60);
    --secondary-foreground: oklch(0.85 0 0);
    --muted: oklch(0.20 0.005 60);
    --muted-foreground: oklch(0.60 0 0);
    --accent: oklch(0.55 0.12 55);
    --accent-foreground: oklch(0.95 0 0);
    --destructive: oklch(0.55 0.22 25);
    --destructive-foreground: oklch(0.95 0 0);
    --border: oklch(0.25 0.01 60);
    --input: oklch(0.20 0.005 60);
    --ring: oklch(0.72 0.18 45);
    --radius: 0.5rem;
}

/* --- Fallback for browsers without OKLch support --- */
@supports not (color: oklch(0 0 0)) {
    :root {
        --background: #1a1815;
        --foreground: #f0f0f0;
        --card: #242220;
        --card-foreground: #f0f0f0;
        --popover: #1f1d1a;
        --popover-foreground: #f0f0f0;
        --primary: #e87830;
        --primary-foreground: #1a1815;
        --secondary: #333130;
        --secondary-foreground: #d4d4d4;
        --muted: #2e2c2a;
        --muted-foreground: #8a8a8a;
        --accent: #9a7040;
        --accent-foreground: #f0f0f0;
        --destructive: #cc3333;
        --destructive-foreground: #f0f0f0;
        --border: #3a3835;
        --input: #2e2c2a;
        --ring: #e87830;
        --radius: 0.5rem;
    }
}

/* --- Base Styles --- */
*,
*::before,
*::after {
    border-color: var(--border);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
}

/* --- Custom gradient text --- */
.text-gradient-primary {
    background: linear-gradient(to right, var(--primary), var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Arbitrary values not in Tailwind compiled output --- */
.min-h-screen { min-height: 100vh; }
.max-h-\[600px\] { max-height: 600px; }
.min-h-\[80px\] { min-height: 80px; }
.text-\[10px\] { font-size: 10px; }
.delay-1000 { animation-delay: 1000ms; }

/* bg with alpha channel */
.bg-background\/80 { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
.bg-card\/50 { background-color: color-mix(in srgb, var(--card) 50%, transparent); }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.bg-primary\/90 { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
.bg-secondary\/20 { background-color: color-mix(in srgb, var(--secondary) 20%, transparent); }
.bg-secondary\/30 { background-color: color-mix(in srgb, var(--secondary) 30%, transparent); }
.bg-secondary\/50 { background-color: color-mix(in srgb, var(--secondary) 50%, transparent); }
.bg-secondary\/70 { background-color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.bg-secondary\/80 { background-color: color-mix(in srgb, var(--secondary) 80%, transparent); }
.bg-background\/80 { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
.bg-background\/90 { background-color: color-mix(in srgb, var(--background) 90%, transparent); }
.bg-background\/20 { background-color: color-mix(in srgb, var(--background) 20%, transparent); }

/* border alpha */
.border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
.border-primary\/20 { border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.border-primary\/50 { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.border-foreground\/20 { border-color: color-mix(in srgb, var(--foreground) 20%, transparent); }

/* text alpha */
.text-muted-foreground\/60 { color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }

/* hover states with alpha */
.hover\:bg-primary\/10:hover { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.hover\:bg-primary\/20:hover { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.hover\:bg-primary\/90:hover { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
.hover\:bg-secondary\/50:hover { background-color: color-mix(in srgb, var(--secondary) 50%, transparent); }
.hover\:bg-secondary\/80:hover { background-color: color-mix(in srgb, var(--secondary) 80%, transparent); }
.hover\:bg-foreground\/10:hover { background-color: color-mix(in srgb, var(--foreground) 10%, transparent); }
.hover\:border-primary\/50:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }

/* gradient */
.from-primary\/20 { --tw-gradient-from: color-mix(in srgb, var(--primary) 20%, transparent); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-accent\/20 { --tw-gradient-to: color-mix(in srgb, var(--accent) 20%, transparent); }
.to-secondary\/30 { --tw-gradient-to: color-mix(in srgb, var(--secondary) 30%, transparent); }
.via-secondary\/20 { --tw-gradient-via: color-mix(in srgb, var(--secondary) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.via-secondary\/10 { --tw-gradient-via: color-mix(in srgb, var(--secondary) 10%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.via-background\/20 { --tw-gradient-via: color-mix(in srgb, var(--background) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.from-background\/90 { --tw-gradient-from: color-mix(in srgb, var(--background) 90%, transparent); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* ring */
.ring-primary { --tw-ring-color: var(--primary); }
.ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }

/* focus-visible */
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-ring:focus { --tw-ring-color: var(--ring); }

/* shadows */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* backdrop */
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* animate */
@keyframes pulse { 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* text-balance */
.text-balance { text-wrap: balance; }

/* Reset button styles (no preflight) */
.nav-dropdown-trigger,
#mobile-menu-btn,
.portfolio-filter {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* WordPress reset — remove admin bar gap */
html { margin-top: 0 !important; }
#wpadminbar { display: none; }

/* Hide WordPress toolbar on front */
body.admin-bar { padding-top: 0; }