/**
 * @file
 * Region-specific styles for Invertir Pro theme.
 */

/* ========================================
 * GENERAL REGION STYLES
 * ======================================== */

.region {
  /* Empty regions should not display */
}

.region > *:last-child {
  margin-bottom: 0;
}

/* ========================================
 * HEADER REGION
 * ======================================== */

.region--header {
  display: flex;
  align-items: center;
}

/* ========================================
 * PRIMARY MENU REGION
 * ======================================== */

.region--primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
 * SECONDARY MENU REGION
 * ======================================== */

.region--secondary-menu {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ========================================
 * UTILITY BAR REGION
 * ======================================== */

.region--utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ========================================
 * HERO REGION
 * ======================================== */

.region--hero {
  width: 100%;
}

/* ========================================
 * HIGHLIGHTED REGION
 * ======================================== */

.region--highlighted {
  /* Status messages container */
}

/* ========================================
 * BREADCRUMB REGION
 * ======================================== */

.region--breadcrumb {
  font-size: var(--font-size-sm);
}

/* ========================================
 * SIDEBAR FILTERS REGION
 * ======================================== */

.region--sidebar-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ========================================
 * CONTENT REGION
 * ======================================== */

.region--content {
  /* Main content styles */
}

/* ========================================
 * SIDEBAR REGION
 * ======================================== */

.region--sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ========================================
 * CONTENT ABOVE/BELOW REGIONS
 * ======================================== */

.region--content-above,
.region--content-below {
  /* Spacing handled by parent containers */
}

/* ========================================
 * FOOTER REGIONS
 * ======================================== */

.region--footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
}

.region--footer-middle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: space-between;
  align-items: center;
}

.region--footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ========================================
 * SOCIAL REGION
 * ======================================== */

.region--social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}