/**
 * Tropelex WP Theme - Main Stylesheet
 * Includes CSS variables, Glassmorphism, Tailwind utilities, Typography, and Animations.
 */

:root {
  /* Surface Colors */
  --bg-background: #12121d;
  --bg-surface: #12121d;
  --bg-surface-dim: #12121d;
  --bg-surface-bright: #393844;
  --bg-surface-container-lowest: #0d0d17;
  --bg-surface-container-low: #1b1b25;
  --bg-surface-container: #1f1f29;
  --bg-surface-container-high: #292934;
  --bg-surface-container-highest: #34343f;
  --bg-surface-variant: #34343f;

  /* On Surface Text Colors */
  --color-on-surface: #e4e1f0;
  --color-on-surface-variant: #ccc3da;

  /* Primary Brand Stack (Electric Lavender) */
  --color-primary: #d1bcff;
  --color-primary-container: #7000ff;
  --color-on-primary: #37265e;
  --color-on-primary-container: #ddcdff;

  /* Secondary Stack (Mint / Emerald) */
  --color-secondary: #ebffe6;
  --color-secondary-container: #00fe66;
  --color-on-secondary: #003911;
  --color-on-secondary-container: #007128;
  --color-secondary-fixed: #6bff83;
  --color-secondary-fixed-dim: #00e55b;

  /* Tertiary Stack (Cyan / Electric Blue) */
  --color-tertiary: #00daf8;
  --color-tertiary-container: #006574;
  --color-on-tertiary: #00363f;

  /* Outlines & Borders */
  --color-outline: #958da3;
  --color-outline-variant: #4a4457;

  /* Error Stack */
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
}

/* Glassmorphism & Depth Utility Classes */
.glass-panel {
  background: rgba(31, 31, 41, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-high {
  background: rgba(41, 41, 52, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-modal {
  background: rgba(18, 18, 29, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 40px rgba(112, 0, 255, 0.15);
}

/* Glow Effects */
.glow-primary {
  box-shadow: 0 0 20px rgba(112, 0, 255, 0.4);
}

.glow-primary-lg {
  box-shadow: 0 0 30px rgba(112, 0, 255, 0.6);
}

.glow-tertiary {
  box-shadow: 0 0 15px rgba(0, 218, 248, 0.5);
}

.glow-secondary {
  box-shadow: 0 0 20px rgba(0, 254, 102, 0.4);
}

/* Keyframe Animations */
@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.98); }
}

.animate-pulse-slow {
  animation: pulseGlow 4s infinite ease-in-out;
}

/* Material Symbols Outlined Custom Sizing */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* WordPress Navigation Walker Integration */
.wp-nav-list {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-nav-list a {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  transition: color 0.2s ease;
}

.wp-nav-list a:hover {
  color: var(--color-on-surface);
}

.wp-nav-list li.current-menu-item > a {
  color: var(--color-primary);
  font-weight: 500;
}

/* Chunky Sans-Serif Typography for High-Impact Headings */
.font-chunky {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* STRICT LOGO SIZING & OVERFLOW PREVENTION */
.site-logo-wrapper,
.custom-logo-link,
.custom-logo-link img,
.custom-logo,
.site-logo img,
header img.custom-logo,
header svg {
  max-height: 36px !important;
  max-width: 180px !important;
  width: auto !important;
  height: 36px !important;
  object-fit: contain !important;
  display: inline-block !important;
  overflow: hidden !important;
}

/* HEADER NAV LINK SPACING FIX */
header nav a {
  margin-right: 1.5rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
header nav a:last-child {
  margin-right: 0 !important;
}

/* Core Color Utility Classes Fallback */
.bg-background { background-color: var(--bg-background) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-surface-dim { background-color: var(--bg-surface-dim) !important; }
.bg-surface-bright { background-color: var(--bg-surface-bright) !important; }
.bg-surface-container-lowest { background-color: var(--bg-surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--bg-surface-container-low) !important; }
.bg-surface-container { background-color: var(--bg-surface-container) !important; }
.bg-surface-container-high { background-color: var(--bg-surface-container-high) !important; }
.bg-surface-container-highest { background-color: var(--bg-surface-container-highest) !important; }
.bg-surface-variant { background-color: var(--bg-surface-variant) !important; }

.text-on-surface { color: var(--color-on-surface) !important; }
.text-on-surface-variant { color: var(--color-on-surface-variant) !important; }
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-container { background-color: var(--color-primary-container) !important; }
.text-on-primary { color: var(--color-on-primary) !important; }
.text-on-primary-container { color: var(--color-on-primary-container) !important; }

.text-secondary-fixed { color: var(--color-secondary-fixed) !important; }
.bg-secondary-fixed { background-color: var(--color-secondary-fixed) !important; }
.text-secondary-fixed-dim { color: var(--color-secondary-fixed-dim) !important; }
.bg-secondary-container { background-color: var(--color-secondary-container) !important; }

.text-tertiary { color: var(--color-tertiary) !important; }
.bg-tertiary { background-color: var(--color-tertiary) !important; }
.bg-tertiary-container { background-color: var(--color-tertiary-container) !important; }

.text-outline { color: var(--color-outline) !important; }
.text-outline-variant { color: var(--color-outline-variant) !important; }
.border-outline { border-color: var(--color-outline) !important; }
.border-outline-variant { border-color: var(--color-outline-variant) !important; }
.text-error { color: var(--color-error) !important; }
.bg-error { background-color: var(--color-error) !important; }

/* STANDALONE LAYOUT FALLBACKS */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.flex-grow { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:flex { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:pt-24 { padding-top: 96px !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.max-w-4xl { max-width: 56rem !important; margin-left: auto !important; margin-right: auto !important; }
.max-w-5xl { max-width: 64rem !important; margin-left: auto !important; margin-right: auto !important; }
.max-w-7xl { max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; }

.gap-xs { gap: 4px !important; }
.gap-sm { gap: 8px !important; }
.gap-md { gap: 16px !important; }
.gap-lg { gap: 24px !important; }
.gap-xl { gap: 40px !important; }
.gap-2xl { gap: 64px !important; }

.p-xs { padding: 4px !important; }
.p-sm { padding: 8px !important; }
.p-md { padding: 16px !important; }
.p-lg { padding: 24px !important; }
.p-xl { padding: 40px !important; }
.p-2xl { padding: 64px !important; }

.px-lg { padding-left: 24px !important; padding-right: 24px !important; }
.px-xl { padding-left: 40px !important; padding-right: 40px !important; }
.py-md { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-2xl { padding-top: 64px !important; padding-bottom: 64px !important; }
.pt-20 { padding-top: 80px !important; }

.mb-xs { margin-bottom: 4px !important; }
.mb-sm { margin-bottom: 8px !important; }
.mb-md { margin-bottom: 16px !important; }
.mb-lg { margin-bottom: 24px !important; }
.mb-xl { margin-bottom: 40px !important; }
.mb-2xl { margin-bottom: 64px !important; }

.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-full { border-radius: 9999px !important; }

.border { border: 1px solid rgba(255, 255, 255, 0.08) !important; }
.border-b { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
.border-t { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; }
.border-y { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
.border-white\/5 { border-color: rgba(255, 255, 255, 0.05) !important; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }

/* Custom Scrollbar Removal */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}