/*
Theme Name: Bherd Divi Child
Theme URI: https://bherdbuffalo.com/
Description: Child theme for Divi
Author: Cody Romanos
Author URI: https://bherdbuffalo.com/
Template: Divi
Version: 1.0.0
Text Domain: bherd-divi-child
*/

/* =============================================================================
   Spacing System
   8px base unit - use multiples for consistent spacing
   ========================================================================== */

:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
}

/* =============================================================================
   Reusable Utility Classes
   ========================================================================== */

/* Spacing: Margin */
.u-margin-sm {
  margin: var(--spacing-sm);
}

.u-margin-md {
  margin: var(--spacing-md);
}

.u-margin-lg {
  margin: var(--spacing-lg);
}

.u-margin-bottom-sm {
  margin-bottom: var(--spacing-sm);
}

.u-margin-bottom-md {
  margin-bottom: var(--spacing-md);
}

.u-margin-bottom-lg {
  margin-bottom: var(--spacing-lg);
}

.u-margin-bottom-xl {
  margin-bottom: var(--spacing-xl);
}

.u-margin-top-sm {
  margin-top: var(--spacing-sm);
}

.u-margin-top-md {
  margin-top: var(--spacing-md);
}

.u-margin-top-lg {
  margin-top: var(--spacing-lg);
}

/* Spacing: Padding */
.u-padding-sm {
  padding: var(--spacing-sm);
}

.u-padding-md {
  padding: var(--spacing-md);
}

.u-padding-lg {
  padding: var(--spacing-lg);
}

.u-padding-xl {
  padding: var(--spacing-xl);
}

.u-padding-x-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.u-padding-y-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

/* Flexbox Helpers */
.u-flex {
  display: flex;
}

.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.u-flex-column {
  display: flex;
  flex-direction: column;
}

.u-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.u-flex-gap-sm {
  display: flex;
  gap: var(--spacing-sm);
}

.u-flex-gap-md {
  display: flex;
  gap: var(--spacing-md);
}

.u-flex-gap-lg {
  display: flex;
  gap: var(--spacing-lg);
}

/* Grid Helpers */
.u-grid {
  display: grid;
}

.u-grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.u-grid-cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.u-grid-gap-md {
  display: grid;
  gap: var(--spacing-md);
}

.u-grid-gap-lg {
  display: grid;
  gap: var(--spacing-lg);
}

/* Container Helpers */
.u-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.u-container-sm {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.u-container-lg {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Button Utilities */
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.u-btn-primary {
  background-color: #000;
  color: #fff;
}

.u-btn-primary:hover {
  background-color: #333;
}

.u-btn-secondary {
  background-color: #f5f5f5;
  color: #000;
  border: 1px solid #ddd;
}

.u-btn-secondary:hover {
  background-color: #efefef;
}

.u-btn-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 1.1rem;
}

.u-btn-sm {
  padding: 4px var(--spacing-sm);
  font-size: 0.9rem;
}

/* =============================================================================
   Mobile-First Responsive
   ========================================================================== */

/* Mobile styles go here (base) */

/* Tablet and up */
@media (min-width: 768px) {
  /* Tablet overrides */
}

/* Desktop and up */
@media (min-width: 1024px) {
  /* Desktop overrides */
}