/* styles/index.css - Updated to include edge transitions */

/**
 * Inquilab Studios - Main Stylesheet
 *
 * This file serves as the entry point for all CSS styles
 * and imports the other modular CSS files
 */

/* Base styles */
@import 'main.css';

/* Component styles */
@import './components/components.css';

/* Animation styles */
@import './components/animations.css';

/* Parallax styles */
@import './components/parallax.css';

/* Edge transition styles - NEW */
@import './components/transitions.css';

/* Audio player styles */
@import './components/audio-player.css';

/* Loading screen styles */
@import './components/loading-screen.css';

/* Lightbox for Picture Galleries */
@import './components/lightbox.css';

/* Responsive styles */
@import 'responsive.css';

/* Game template styles */
@import './templates/game-template.css';

/* Music template styles */
@import './templates/music-template.css';

/* Video template styles */
@import './templates/video-template.css';

/* More template styles */
@import './templates/more-template.css';

/* Games page styles */
@import './pages/games-page.css';

/* Music page styles */
@import './pages/music-page.css';

/* Video page styles */
@import './pages/video-page.css';

/* More Page styles */
@import url('./pages/more-page.css');

/* News page styles */
@import './pages/news-page.css';

/* Contact page styles */
@import './pages/contact-page.css';

/* Home Page styles (to be imported last) */
@import url('./pages/home-page.css');

/* Rest of your existing CSS... */

:root {
  --primary-color: #FF0000;
  --primary-dark: #990000;
  --primary-light: #FF3333;
  --secondary-color: #000000;
  --secondary-dark: #000000;
  --secondary-light: #333333;
  --text-light: #FFFFFF;
  --text-dark: #000000;
  --text-muted: #CCCCCC;
  --background-dark: #000000;
  --background-light: #FFFFFF;
  --border-color: #990000;
  --shadow-color: rgba(0, 0, 0, 0.9);
  --font-special: 'Bungee', display;
}

/* Additional global styles */
* {
  box-sizing: border-box;
}

::selection {
  background-color: var(--primary-color);
  color: var(--text-light);
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: var(--background-light) !important;
    color: var(--text-dark) !important;
  }
}

.section-title {
  font-family: 'Bungee', display !important;
  font-size: 2.25rem; /* text-4xl */
  font-weight: bold;
  color: #ef4444; /* text-red-500 */
  margin-bottom: 1.5rem; /* mb-6 */
  text-transform: uppercase; /* Ensures all text is uppercase */
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

.page-container {
  padding-top: 0; /* Consistent spacing below navbar */
}

/* For pages with hero sections that need to be flush with navbar */
.hero-page-container {
  padding-top: 0;
}

/* EMERGENCY BUNGEE FIX - Add this to the VERY END of your index.css file */

/* Nuclear option - Override everything for headings */
h1, h1 *,
h2, h2 *,
h3, h3 *,
h4, h4 *,
h5, h5 *,
h6, h6 * {
  font-family: 'Bungee', display !important;
  text-transform: uppercase !important;
  color: #ef4444 !important;
}

/* Override Tailwind's font-bold when it's on headings */
h1.font-bold, h2.font-bold,
.font-bold h1, .font-bold h2 {
  font-family: 'Bungee', display !important;
  text-transform: uppercase !important;
}

/* Make sure body uses Roboto */
body, body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.section-title) {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Specific override for paragraphs and common text elements */
p, span:not(h1 span):not(h2 span):not(h3 span),
div:not(.section-title):not(h1):not(h2):not(h3),
a:not(.nav-button),
button:not(.nav-button):not(.dropdown-item button),
input, textarea, label, li {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}