/*
Theme Name: Pixeloryn Studio
Theme URI: https://pixeloryn.co.za
Author: Pixeloryn Studio
Author URI: https://pixeloryn.co.za
Description: A premium, modern WordPress theme for Pixeloryn Studio (Pty) Ltd. Beautiful dark theme with neon accents, fully responsive, and designed for creative agencies. Built from the ground up to match the stunning Pixeloryn brand identity.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixeloryn
Tags: custom-logo, custom-menu, featured-images, theme-options, translation-ready, agency, creative, dark, responsive

Pixeloryn Studio WordPress Theme
*/

/* 
 * Base styles + Tailwind via CDN is loaded in header.php for rapid development.
 * For production, it's recommended to compile Tailwind or use a plugin like Tailwind CSS for WP.
 * All custom styles below extend the design system.
 */

/* ============================================
   PIXELORYN THEME - MODERN CLEAN CORPORATE STYLE
   Light & Dark Mode Support
============================================ */

/* Default Dark Mode Variables (Corporate Refined) */
:root {
    --bg-primary: #050505;
    --bg-secondary: #0a0a0f;
    --bg-card: #111114;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.7);
    --text-muted: rgba(255,255,255,0.5);
    --border-color: rgba(255,255,255,0.1);
    --accent-cyan: #22f0ff;
    --accent-purple: #a855f7;
    --accent-emerald: #22c55e;
    --glass-bg: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.12);
}

/* Light Mode Variables */
[data-theme="light"] {
    --bg-primary: #f8f9fc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #111114;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --accent-cyan: #0891b2;
    --accent-purple: #7c3aed;
    --accent-emerald: #059669;
    --glass-bg: rgba(255,255,255,0.85);
    --glass-border: #e5e7eb;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.font-display {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 600;
}

/* Reusable components matching the static site */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.accent-gradient {
    background: linear-gradient(90deg, #22f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-btn {
    background: linear-gradient(135deg, #22f0ff, #a855f7);
    color: #000;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.gradient-btn:hover {
    background: linear-gradient(135deg, #67f6ff, #c084fc);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
}

.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}

.portfolio-card {
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.portfolio-card:hover img {
    transform: scale(1.08);
}

.nav-link {
    position: relative;
}

.nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(to right, #22f0ff, #a855f7);
    transition: width 0.3s ease;
}

.nav-link:hover:after,
.nav-link.current-menu-item:after {
    width: 100%;
}

.logo-glow {
    filter: drop-shadow(0 0 12px rgba(34, 240, 255, 0.5));
}

/* ============================================
   THEME TOGGLE BUTTON
============================================ */
.theme-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.theme-toggle:hover {
    background: var(--bg-secondary);
    transform: scale(1.05);
}

.theme-toggle .fa-sun,
.theme-toggle .fa-moon {
    font-size: 16px;
}

/* ============================================
   MODERN CORPORATE REFINEMENTS
============================================ */
.service-card,
.portfolio-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.service-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

[data-theme="light"] .service-card:hover,
[data-theme="light"] .portfolio-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
}

/* Better typography for corporate feel */
h1, h2, h3, .font-display {
    letter-spacing: -0.025em;
}

/* Subtle matte background option */
body.has-matte-bg {
    background-image: 
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 4px 4px;
}

[data-theme="light"].has-matte-bg {
    background-image: 
        linear-gradient(rgba(0,0,0,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.015) 1px, transparent 1px);
}

/* WordPress specific */
.wp-block {
    max-width: 100%;
}

.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* Form styles */
.form-input {
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #22f0ff;
    box-shadow: 0 0 0 4px rgba(34, 240, 255, 0.1);
}