/**
 * Main CSS file for Express Solutions Lab Theme
 *
 * This file imports the variables and applies them globally
 */

/* Import variables */
@import 'variables.css';

/* Base styles using CSS variables */
body {
  font-family: var(--font-family-base);
  color: var(--text-color-default);
  background-color: var(--color-white);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--text-color-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* Typography - Font Colors */
.text-primary {
  color: var(--text-color-primary);
}

.text-primary-dark {
  color: var(--text-color-primary-dark);
}

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

.text-secondary {
  color: var(--text-color-secondary);
}

.text-secondary-dark {
  color: var(--text-color-secondary-dark);
}

.text-secondary-light {
  color: var(--text-color-secondary-light);
}

.text-muted {
  color: var(--text-color-muted);
}

/* Links */
a {
  color: var(--text-color-link);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover, 
a:focus {
  color: var(--text-color-link-hover);
  text-decoration: underline;
}

/* Component variable-based styles */

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--border-radius-default);
  font-weight: var(--font-weight-medium);
  text-align: center;
  transition: var(--transition-default);
}

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

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

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

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  color: var(--color-gray-900);
}

/* Highlight Text */
.highlight-text {
  color: var(--text-color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Cards */
.card {
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-default);
  transition: var(--transition-default);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* Gradient backgrounds */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

/* Hero sections */
.hero {
  background: var(--gradient-primary);
  color: var(--color-white);
  padding: var(--spacing-16) 0;
}

/* Utilities */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

/* Color utility classes */
.text-primary {
  color: var(--text-color-primary);
}

.text-secondary {
  color: var(--text-color-secondary);
}

.bg-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.bg-secondary {
  background-color: var(--color-secondary);
  color: var(--color-gray-900);
}

/* Navigation Menu Styles */
.main-navigation {
  display: block !important; /* Force display for debugging */
}

.main-navigation .menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation .menu li {
  position: relative;
}

.main-navigation .menu a {
  color: var(--text-color-primary);
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: var(--transition-default);
}

.main-navigation .menu a:hover,
.main-navigation .menu a:focus {
  color: var(--text-color-primary-dark);
}

#primary-menu {
  display: flex !important; /* Force display */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footer Text */
.site-footer {
  color: var(--text-color-light);
}

.site-footer a {
  color: var(--text-color-primary-light);
}

/* Mobile Navigation */
@media (max-width: 1023px) {
  .main-navigation:not(.hidden) {
    display: block !important;
  }
  
  .lg\:block {
    display: block !important;
  }
  
  #mobile-menu {
    border-top: 1px solid var(--color-gray-200);
  }
}

@media (min-width: 1024px) {
  .lg\:hidden {
    display: none;
  }
  
  .lg\:block {
    display: block;
  }
}