/**
 * Shared Base Stylesheet
 * 
 * Common styles used across all iQ websites
 * - Open Props imports
 * - Basic resets and utilities
 * - Layout primitives
 * - Form control skeletons
 * - HTMX states
 */

/* =============================================================================
   OPEN PROPS IMPORTS
   ============================================================================= */

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

/* =============================================================================
   SHARED CSS VARIABLES
   These can be overridden by site-specific stylesheets
   ============================================================================= */

:root {
  /* Spacing scale (using Open Props) */
  --iq-space-xs: var(--size-1);
  --iq-space-sm: var(--size-2);
  --iq-space-md: var(--size-4);
  --iq-space-lg: var(--size-6);
  --iq-space-xl: var(--size-8);
  --iq-space-2xl: var(--size-10);
  --iq-space-3xl: var(--size-12);
  
  /* Border radius */
  --iq-radius-sm: var(--radius-2);
  --iq-radius-md: var(--radius-3);
  --iq-radius-lg: var(--radius-4);
  --iq-radius-xl: var(--radius-5);
  
  /* Transitions */
  --iq-transition-fast: 150ms var(--ease-out-3);
  --iq-transition-medium: 300ms var(--ease-out-3);
  --iq-transition-slow: 500ms var(--ease-out-3);
}

/* =============================================================================
   LAYOUT UTILITIES
   ============================================================================= */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--iq-space-lg);
}

.container--narrow {
  max-width: 900px;
}

.container--wide {
  max-width: 1400px;
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--iq-space-xs); }
.gap-sm { gap: var(--iq-space-sm); }
.gap-md { gap: var(--iq-space-md); }
.gap-lg { gap: var(--iq-space-lg); }
.gap-xl { gap: var(--iq-space-xl); }

/* Grid utilities */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Spacing utilities */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-inline: auto; }

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =============================================================================
   HTMX LOADING STATES
   ============================================================================= */

.htmx-indicator {
  opacity: 0;
  transition: opacity var(--iq-transition-fast);
}

.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Generic loading skeleton */
.skeleton {
  background: linear-gradient(90deg, 
    rgba(128, 128, 128, 0.1) 25%, 
    rgba(128, 128, 128, 0.2) 50%, 
    rgba(128, 128, 128, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--iq-radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS REFERENCE
   
   Mobile:  < 768px
   Tablet:  768px - 1024px
   Desktop: > 1024px
   ============================================================================= */

@media (max-width: 768px) {
  .container {
    padding-inline: var(--iq-space-md);
  }
  
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}