/* ============================================
   PARALLAX MAIN STYLESHEET
   Imports all design system components
   ============================================ */

/* 1. Design System Variables & Utilities */
@import url('css/design-system.css');

/* 2. Component Styles */
@import url('css/components.css');

/* 3. Width Consistency System */
@import url('css/width-consistency-fix.css');

/* 4. Responsive Styles & Media Queries */
@import url('css/responsive.css');

/* 5. Hero Animation (kept separate for complex animation logic) */
@import url('hero-timed-cards.css');

/* ============================================
   CUSTOM OVERRIDES & PROJECT-SPECIFIC STYLES
   ============================================ */

/* Page specific adjustments */
body {
  padding-top: 80px; /* Account for fixed nav */
}

/* Indicator (if needed) */
.indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  z-index: var(--z-notification);
  transition: transform var(--transition-base);
}

/* Mobile menu overlay (if needed) */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.mobile-menu.active {
  display: flex;
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  text-align: center;
}

.mobile-menu-content .nav-item {
  font-size: var(--font-xl);
  font-weight: var(--weight-semibold);
}

/* Smooth scroll offset for anchors */
html {
  scroll-padding-top: 100px;
}

/* Selection colors */
::selection {
  background: var(--color-primary);
  color: white;
}

::-moz-selection {
  background: var(--color-primary);
  color: white;
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove focus styles for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Accessibility: Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  z-index: var(--z-notification);
}

.skip-to-content:focus {
  top: 0;
}

/* Loading state */
.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--glass-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Utility: Hide scrollbar but keep functionality */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form elements consistency */
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Smooth transitions for theme changes */
* {
  transition: background-color var(--transition-base), 
              color var(--transition-base), 
              border-color var(--transition-base);
}

/* Prevent transition on page load */
.preload * {
  transition: none !important;
}

/* Debug mode (can be toggled for development) */
.debug * {
  outline: 1px solid rgba(255, 0, 0, 0.1);
}

.debug *:hover {
  outline: 1px solid rgba(255, 0, 0, 0.3);
}


/* ============================================
   DESKTOP SLOGAN SPACING OVERRIDE
   Ensures desktop spacing is preserved
   ============================================ */
@media (min-width: 1025px) {
  .slogan-section {
    padding-top: 36px !important; /* Reduced by 10% from 40px */
    padding-bottom: 36px !important; /* Reduced by 10% from 40px */
    margin-top: 54px !important; /* Reduced by 10% from 60px */
  }
}