/* Professional Technical Engineer Portfolio Styles */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Technical Color Palette */
    --primary-dark: #0a192f;
    --secondary-dark: #112240;
    --accent-cyan: #64ffda;
    --accent-blue: #00d4ff;
    --text-light: #ccd6f6;
    --text-gray: #8892b0;
    --border-color: #233554;
    --code-bg: #1e2a45;
    --success: #00ff88;
    --warning: #ffaa00;
    
    /* Technical Font Stack */
    --font-mono: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Reset TailwindCSS overrides */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main) !important;
    background: var(--primary-dark) !important;
    color: var(--text-light) !important;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Technical Grid Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(100, 255, 218, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 255, 218, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* Introduction section gradient */
.intro-section {
    background: linear-gradient(135deg, #0a192f 0%, #112240 50%, #1a2842 100%) !important;
}

/* Experience cards */
.experience-card {
    background: var(--secondary-dark) !important;
    border: 1px solid var(--border-color) !important;
}

.experience-card:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 8px 30px rgba(100, 255, 218, 0.2) !important;
}

.experience-title {
    color: var(--accent-cyan) !important;
}

.experience-company {
    color: var(--accent-blue) !important;
}

.experience-meta {
    color: var(--text-gray) !important;
}

.experience-description,
.experience-achievement {
    color: var(--text-light) !important;
}

.experience-achievements-title {
    color: var(--text-light) !important;
}

/* Pricing section */
.pricing-section {
    background: var(--primary-dark) !important;
}

.pricing-card {
    background: var(--secondary-dark) !important;
    border: 1px solid var(--border-color) !important;
}

.pricing-card-highlighted {
    border: 2px solid var(--accent-cyan) !important;
    box-shadow: 0 0 30px rgba(100, 255, 218, 0.2) !important;
}

.pricing-badge {
    background: var(--accent-cyan) !important;
    color: var(--primary-dark) !important;
}

.pricing-package-name {
    color: var(--accent-cyan) !important;
}

.pricing-subtitle,
.pricing-description,
.pricing-currency,
.pricing-unit,
.pricing-feature,
.pricing-notes {
    color: var(--text-gray) !important;
}

.pricing-price {
    color: var(--text-light) !important;
}

.pricing-checkmark {
    color: var(--success) !important;
}

.pricing-button-primary {
    background: var(--accent-cyan) !important;
    color: var(--primary-dark) !important;
    border: 2px solid var(--accent-cyan) !important;
}

.pricing-button-primary:hover {
    background: transparent !important;
    color: var(--accent-cyan) !important;
    box-shadow: 0 0 20px rgba(100, 255, 218, 0.4) !important;
}

.pricing-button-secondary {
    background: transparent !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-color) !important;
}

.pricing-button-secondary:hover {
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

/* Override Tailwind's white backgrounds */
.bg-white {
    background-color: var(--secondary-dark) !important;
}

.bg-gray-50 {
    background-color: var(--primary-dark) !important;
}

.bg-gray-100 {
    background-color: var(--code-bg) !important;
}

/* Override text colors */
.text-gray-900 {
    color: var(--text-light) !important;
}

.text-gray-700 {
    color: var(--text-gray) !important;
}

.text-gray-600 {
    color: var(--text-gray) !important;
}

.text-blue-600 {
    color: var(--accent-cyan) !important;
}

/* Navigation - Terminal Style */
nav, header {
    background: rgba(17, 34, 64, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--border-color) !important;
}

.logo, .text-2xl {
    font-family: var(--font-mono) !important;
    color: var(--accent-cyan) !important;
}

/* Add terminal prompt to logo */
h1.text-2xl::before {
    content: '> ';
    color: var(--accent-blue);
}

/* Navigation links */
nav a, header a {
    font-family: var(--font-mono) !important;
    color: var(--text-gray) !important;
    position: relative;
}

nav a::before, header a::before {
    content: '//';
    margin-right: 0.5rem;
    color: var(--accent-cyan);
    opacity: 0;
    transition: opacity 0.3s;
}

nav a:hover, header a:hover {
    color: var(--accent-cyan) !important;
}

nav a:hover::before, header a:hover::before {
    opacity: 1;
}

/* Language Switcher */
.language-switcher button,
button[class*="lang"] {
    background: var(--code-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-gray) !important;
    font-family: var(--font-mono) !important;
}

.language-switcher button.active,
button[class*="lang"].active,
button.bg-blue-600 {
    background: var(--accent-cyan) !important;
    color: var(--primary-dark) !important;
    border-color: var(--accent-cyan) !important;
}

/* Section Headers - Code Comment Style */
h2, h3 {
    font-family: var(--font-mono) !important;
    color: var(--accent-cyan) !important;
}

section h2::before {
    content: '/* ';
    color: var(--text-gray);
}

section h2::after {
    content: ' */';
    color: var(--text-gray);
}

/* Cards - Terminal Window Style */
.card,
.shadow-lg,
.shadow-md,
.rounded-lg {
    background: var(--secondary-dark) !important;
    border: 1px solid var(--border-color) !important;
    position: relative;
}

.card::before,
.shadow-lg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover::before,
.shadow-lg:hover::before {
    opacity: 1;
}

.card:hover,
.shadow-lg:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 8px 30px rgba(100, 255, 218, 0.15) !important;
    transform: translateY(-4px);
}

/* Buttons - Terminal Command Style */
button, .btn,
.bg-blue-600,
.bg-blue-500 {
    font-family: var(--font-mono) !important;
    border: 2px solid var(--accent-cyan) !important;
    background: transparent !important;
    color: var(--accent-cyan) !important;
    transition: all 0.3s !important;
}

button::before, .btn::before {
    content: '$ ';
}

button:hover, .btn:hover,
.bg-blue-600:hover,
.bg-blue-500:hover {
    background: var(--accent-cyan) !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 0 20px rgba(100, 255, 218, 0.4) !important;
}

/* Primary buttons */
button.bg-blue-600,
.btn-primary {
    background: var(--accent-cyan) !important;
    color: var(--primary-dark) !important;
}

/* Tags - Code Keywords Style */
.tag,
.bg-blue-100,
.bg-gray-200,
[class*="bg-blue-"]:not(.bg-blue-600):not(.bg-blue-500) {
    background: rgba(100, 255, 218, 0.1) !important;
    border: 1px solid var(--accent-cyan) !important;
    font-family: var(--font-mono) !important;
    color: var(--accent-cyan) !important;
    transition: all 0.3s;
}

.tag::before {
    content: '<';
    margin-right: 0.25rem;
}

.tag::after {
    content: '/>';
    margin-left: 0.25rem;
}

.tag:hover,
.bg-blue-100:hover,
.bg-gray-200:hover {
    background: var(--accent-cyan) !important;
    color: var(--primary-dark) !important;
    transform: translateY(-2px);
}

.tag.active,
.bg-blue-600 {
    background: var(--accent-cyan) !important;
    color: var(--primary-dark) !important;
}

/* Forms - Terminal Input Style */
input[type="text"],
input[type="email"],
textarea,
.border-gray-300 {
    background: var(--code-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    font-family: var(--font-mono) !important;
}

input:focus,
textarea:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1) !important;
    outline: none !important;
}

label {
    font-family: var(--font-mono) !important;
    color: var(--text-gray) !important;
}

label::before {
    content: '> ';
    color: var(--accent-cyan);
}

/* Experience cards */
.experience-card {
    position: relative;
}

/* Pricing cards highlight */
.border-blue-500 {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 30px rgba(100, 255, 218, 0.2) !important;
}

/* Footer - Terminal Prompt */
footer {
    background: var(--code-bg) !important;
    border-top: 2px solid var(--border-color) !important;
    font-family: var(--font-mono) !important;
    color: var(--text-gray) !important;
}

/* Success/Error Messages */
.bg-green-100 {
    background: rgba(0, 255, 136, 0.1) !important;
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
}

.bg-red-100 {
    background: rgba(255, 170, 0, 0.1) !important;
    border: 1px solid var(--warning) !important;
    color: var(--warning) !important;
}

/* Loading Spinner */
.spinner {
    border-color: var(--border-color) !important;
    border-top-color: var(--accent-cyan) !important;
}

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

::-webkit-scrollbar-track {
    background: var(--primary-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body::before {
        background-size: 30px 30px;
    }
}

/* Link hover effects */
a {
    color: var(--accent-cyan) !important;
    transition: all 0.3s;
}

a:hover {
    text-shadow: 0 0 10px var(--accent-cyan);
}

/* Subtle glow effect on interactive elements */
button:focus,
input:focus,
a:focus {
    outline: 2px solid var(--accent-cyan) !important;
    outline-offset: 2px;
}

/* Tech-style borders */
.border-t,
.border-b,
.border-l,
.border-r {
    border-color: var(--border-color) !important;
}

/* Override any remaining white/light backgrounds */
[class*="bg-white"],
[class*="bg-gray-50"] {
    background-color: var(--secondary-dark) !important;
}