/*
Theme Name: SEDJ
Theme URI: https://rubenmarin.es
Author: Ruben Marin & Antigravity
Author URI: https://rubenmarin.es
Description: A Brutalist, high-contrast theme built for high-octane sports content. Features deep charcoal backgrounds and electric neon accents. Built to work alongside Elementor.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sedj
*/

:root {
  /* Colors */
  --sedj-surface: #131313;
  --sedj-surface-dim: #131313;
  --sedj-surface-bright: #3a3939;
  --sedj-surface-container-lowest: #0e0e0e;
  --sedj-surface-container-low: #1c1b1b;
  --sedj-surface-container: #201f1f;
  --sedj-surface-container-high: #2a2a2a;
  --sedj-surface-container-highest: #353534;
  --sedj-on-surface: #e5e2e1;
  --sedj-on-surface-variant: #c4c9ac;
  
  --sedj-primary: #c3f400; /* Volt */
  --sedj-on-primary: #283500;
  
  --sedj-secondary: #ff571a; /* Ignite */
  --sedj-on-secondary: #521300;
  
  --sedj-tertiary: #7df4ff; /* Cyan */
  --sedj-on-tertiary: #006f77;
  
  --sedj-background: #0a0a0a;
  --sedj-on-background: #e5e2e1;

  /* Typography */
  --sedj-font-display: 'Anton', sans-serif;
  --sedj-font-body: 'Hanken Grotesk', sans-serif;
  --sedj-font-mono: 'Space Grotesk', sans-serif;

  /* Spacing & Layout */
  --sedj-spacing-unit: 4px;
  --sedj-gutter: 24px;
  --sedj-border-width: 4px;
  --sedj-border-width-sm: 2px;
}

/* Base Brutalist Styles */
body {
  background-color: var(--sedj-background);
  color: var(--sedj-on-background);
  font-family: var(--sedj-font-body);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sedj-font-display);
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: -0.02em;
  color: var(--sedj-on-surface);
}

a {
  color: var(--sedj-primary);
  text-decoration: none;
}

a:hover {
  color: var(--sedj-secondary);
}

/* Brutalist UI Elements */
.sedj-btn, 
button,
input[type="submit"], 
.elementor-button {
  background-color: var(--sedj-primary);
  color: var(--sedj-on-primary);
  font-family: var(--sedj-font-display);
  border: none;
  border-radius: 0 !important;
  text-transform: uppercase;
  padding: 16px 32px;
  cursor: pointer;
  box-shadow: 4px 4px 0px var(--sedj-secondary);
  transition: transform 0.1s, box-shadow 0.1s;
}

.sedj-btn:active, 
button:active,
input[type="submit"]:active, 
.elementor-button:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px var(--sedj-secondary);
}

.sedj-card {
  border: var(--sedj-border-width) solid var(--sedj-primary);
  background-color: var(--sedj-surface-container);
  border-radius: 0;
}

input, textarea, select {
  background-color: #000;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 0 !important;
  font-family: var(--sedj-font-mono);
  padding: 12px;
}

input:focus, textarea:focus {
  border: 3px solid var(--sedj-primary);
  outline: none;
}

/* Brutalist Navigation Menu */
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  align-items: center;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  font-family: var(--sedj-font-display);
  font-size: 24px;
  color: var(--sedj-on-surface);
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 16px;
  border: var(--sedj-border-width-sm) solid transparent;
  transition: all 0.2s ease;
  display: inline-block;
}

.main-navigation a:hover,
.main-navigation li.current-menu-item > a {
  color: var(--sedj-background);
  background-color: var(--sedj-primary);
  border-color: var(--sedj-primary);
  box-shadow: 4px 4px 0px var(--sedj-secondary);
  transform: translate(-4px, -4px);
}