/*
Theme Name: PSP ROM Hub
Description: A modern, futuristic WordPress theme for PSP ROM downloads and emulation. Features dark aesthetics with neon accents, custom post types for ROMs and emulators, AJAX download tracking, responsive design, and SEO optimization. Perfect for gaming websites and ROM collections.
Version: 1.0.0
Author: PSP ROM Hub Team
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: psp-roms-net
Tags: dark, gaming, modern, responsive, custom-post-types, futuristic, neon, downloads, emulation, psp, roms
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
Network: false
*/

/* Import Tailwind CSS equivalents */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* CSS Custom Properties for futuristic gaming theme */
:root {
  --background: #1a1a1a;
  --foreground: #ffffff;
  --card: #2e2e2e;
  --card-foreground: #ffffff;
  --popover: #374151;
  --popover-foreground: #ffffff;
  --primary: #00ffcc;
  --primary-foreground: #1a1a1a;
  --secondary: #ff007f;
  --secondary-foreground: #ffffff;
  --muted: #4a4a4a;
  --muted-foreground: #ffffff;
  --accent: #00ffcc;
  --accent-foreground: #1a1a1a;
  --destructive: #ff0000;
  --destructive-foreground: #ffffff;
  --border: #4a4a4a;
  --input: #2e2e2e;
  --ring: #00ffcc;
  --radius: 0.5rem;
  --glow-primary: 0 0 20px var(--primary);
  --glow-secondary: 0 0 20px var(--secondary);
}

/* Base Styles */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Improve performance */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

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

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.min-h-screen {
  min-height: 100vh;
}

/* Navigation - BEAUTIFUL HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.98) 0%, rgba(26, 26, 26, 0.95) 100%);
  backdrop-filter: blur(15px) saturate(180%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary)) 1;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 204, 0.1);
  transition: all 0.3s ease;
}

.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--primary), transparent);
  opacity: 0.5;
}

.site-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  position: relative;
}

.site-branding {
  position: relative;
  z-index: 2;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.05), rgba(255, 0, 127, 0.05));
  border: 1px solid rgba(0, 255, 204, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  justify-content: center;
  
}

.site-logo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 204, 0.3), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.site-logo:hover::before {
  width: 300px;
  height: 300px;
}

.site-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 255, 204, 0.4), 0 0 60px rgba(0, 255, 204, 0.2);
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(255, 0, 127, 0.1));
}

.site-logo .logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary);
  filter: drop-shadow(0 0 10px var(--primary));
  animation: pulse-glow 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 10px var(--primary));
  }
  50% {
    filter: drop-shadow(0 0 20px var(--primary)) drop-shadow(0 0 30px var(--primary));
  }
}

.site-title {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--primary) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
  position: relative;
  z-index: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 0 30px rgba(0, 255, 204, 0.5);
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.main-nav {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: var(--foreground);
  text-decoration: none;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 204, 0.2), transparent);
  transition: left 0.6s ease;
}

.nav-link:hover::before {
  left: 100%;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

.nav-link:hover::after {
  width: 80%;
}

.nav-link:hover {
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.15), rgba(255, 0, 127, 0.1));
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(0, 255, 204, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3);
  color: var(--primary);
}

.nav-link:active {
  transform: translateY(-1px);
}

.nav-link svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 5px currentColor);
}

.nav-link:hover svg {
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 10px currentColor);
}

/* Mobile Menu Toggle Button - BEAUTIFUL */
.mobile-menu-toggle {
  display: none;
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(255, 0, 127, 0.05));
  border: 1px solid rgba(0, 255, 204, 0.3);
  color: var(--primary);
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 0.75rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 101;
  overflow: hidden;
}

.mobile-menu-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 204, 0.4), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.mobile-menu-toggle:hover::before {
  width: 200px;
  height: 200px;
}

.mobile-menu-toggle:hover {
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.2), rgba(255, 0, 127, 0.1));
  border-color: var(--primary);
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(0, 255, 204, 0.4);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

.mobile-menu-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 255, 204, 0.3);
}

.menu-icon {
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 5px currentColor);
  transition: transform 0.3s ease;
}

.mobile-menu-toggle:hover .menu-icon {
  transform: rotate(90deg);
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-primary);
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.card-content {
  padding: 1.5rem;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  background: rgba(0, 255, 204, 0.9);
  box-shadow: var(--glow-primary);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-secondary:hover {
  background: rgba(255, 0, 127, 0.9);
  box-shadow: var(--glow-secondary);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--glow-primary);
}

/* Grid Layouts */
.rom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Filters */
.filter-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.filter-input {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.filter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 204, 0.2);
}

/* Meta Information */
.rom-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.meta-badge {
  padding: 0.25rem 0.5rem;
  background: rgba(0, 255, 204, 0.1);
  color: var(--primary);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Rating Stars */
.rating {
  display: flex;
  gap: 0.25rem;
  color: var(--secondary);
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
  .container {
    padding: 0 0.5rem;
  }
  
  /* Show mobile toggle button */
  .mobile-menu-toggle {
    display: block;
  }
  
  /* IMPORTANT: Hide desktop menu on mobile */
  nav.main-nav,
  .main-nav,
  .site-navigation nav.main-nav,
  .site-navigation .main-nav {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: #1a1a1a;
    border-bottom: 1px solid #4a4a4a;
    padding: 1rem;
    margin: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    
    /* HIDE BY DEFAULT */
    transform: translateY(-100%);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }
  
  /* SHOW when active class is added */
  nav.main-nav.active,
  .main-nav.active,
  .site-navigation nav.main-nav.active,
  .site-navigation .main-nav.active {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  }
  
  /* Menu List Styling */
  ul.nav-menu,
  .nav-menu,
  #primary-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
  }
  
  /* Menu Items */
  .nav-menu li,
  ul.nav-menu li,
  #primary-menu li {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Menu Links */
  .nav-link,
  .nav-menu a,
  .nav-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
  }
  
  .nav-link:hover,
  .nav-menu a:hover {
    background: rgba(0, 255, 204, 0.1);
    color: #00ffcc;
  }
  
  /* Dark backdrop when menu is open */
  body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
    backdrop-filter: blur(3px);
  }
  
  body.menu-open {
    overflow: hidden;
  }
  
  /* Other responsive elements */
  .rom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }
}

/* WordPress specific styles */
.wp-block-image {
  text-align: center;
}

.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}

.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

.aligncenter {
  display: block;
  margin: 0 auto;
}

.screen-reader-text {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Custom Glow Effects */
.glow-primary {
  box-shadow: var(--glow-primary);
}

.glow-secondary {
  box-shadow: var(--glow-secondary);
}

.hover-glow-primary:hover {
  box-shadow: var(--glow-primary);
  transition: box-shadow 0.3s ease;
}

.hover-glow-secondary:hover {
  box-shadow: var(--glow-secondary);
  transition: box-shadow 0.3s ease;
}