/*
Theme Name: Smooth Operators Showcase
Theme URI: https://smoothoperators.nl/
Author: UPYOURBUSINESS
Description: Converted from React/TSX to WordPress theme
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smooth-operators-showcase
*/

/* Extracted from index.css and App.css, plus TSX classNames */

:root {
  --background: #050505;
  --foreground: #fff;
  --card: #1a233a;
  --primary: #FCA311;
  --secondary: #14213D;
  --muted: #1a1a1a;
  --accent: #FCA311;
  --border: #262626;
  --radius: 8px;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

.min-h-screen { min-height: 100vh; }
.bg-transparent { background: transparent; }
.text-foreground { color: var(--foreground); }
.text-primary { color: var(--primary); }
.text-muted-foreground { color: #E5E5E5; }
.border-border { border-color: var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
.lg\:px-20 { padding-left: 5rem; padding-right: 5rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.md\:py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.flex { display: flex; }
.justify-start { justify-content: flex-start; }
.items-center { align-items: center; }
.transition-all { transition: all 0.3s; }
.duration-500 { transition-duration: 0.5s; }
.z-50 { z-index: 50; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

/* Add more extracted classes as needed from TSX files */

/* Logo styles */
.logo {
  height: 6em;
  padding: 1.5em;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

/* Card styles */
.card {
  padding: 2em;
  background: var(--card);
  border-radius: var(--radius);
}

/* Section styles */
section {
  margin-bottom: 2rem;
}

/* Responsive styles */
@media (max-width: 768px) {
  .lg\:px-20 { padding-left: 2rem; padding-right: 2rem; }
}