/*
 * LatamConnect - Custom Styles
 * Main stylesheet with components organized by functionality
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.body-2 {
  overflow-x: hidden;
}

/* Smooth scrolling for navigation */
html {
  scroll-behavior: smooth;
}

/* Scroll offset for fixed header */
section[id] {
  scroll-margin-top: 100px;
}

/* ==========================================================================
   Accessibility Components
   ========================================================================== */

/* Skip navigation link for accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* ==========================================================================
   Tab Navigation Components
   ========================================================================== */

/* Center the tabs menu */
.brix---tabs-menu-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.brix---tab-small-center-2 {
  text-align: center;
}

/* Tab navigation styling */
.w-tab-link {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

/* Ensure proper tab content formatting */
.tab-pane-eventos,
.tab-pane-dinamicas,
.tab-pane-congresos {
  padding: 2rem 0;
}

/* ==========================================================================
   Activity Cards Components
   ========================================================================== */

/* Activity cards styling */
.div-block-activities {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.div-block-activities:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}