/* Import order matters: Base first, then components */
@import url('base.css');
@import url('components/header.css');
@import url('components/hero.css');
@import url('components/details-card.css');
@import url('components/resource-item.css');
@import url('components/button.css');
@import url('components/footer.css');
@import url('dark-mode.css'); /* Dark mode overrides last */

/* Optional: Add any high-level layout adjustments here if needed */
.resources-container {
  max-width: 1200px;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
  display: grid;
  gap: 1.5rem;
}

.loading-message {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 2rem;
}