/* ===================================================
   MAIN STYLESHEET - SINGLE SOURCE OF TRUTH
   =================================================== */

/* 1. Base - Defines variables, resets, and global styles. MUST BE FIRST. */
@import 'base.css';

/* 2. Layout - Grid, containers, and page structure. */
@import 'layout.css';

/* 3. Components - All reusable UI components (buttons, cards, navbar, etc). */
@import 'components.css';

/* 4. Utilities - Helper classes like .text-center. */
@import 'utilities.css';

/* 5. Responsive - All media queries for mobile adjustments. MUST BE LAST. */
@import 'responsive.css';

/* 6. Page-Specific Styles - Add styles for specific pages here. */
@import 'feedback.css';
@import 'auth.css';

/* Social Icons Styling */
.social-links {
  display: flex;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.social-links a:hover {
  background-color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ensure Font Awesome icons are properly aligned */
.social-links i {
  line-height: 1;
}
