/*
Theme Name:     KHF
Theme URI:      
Description:    Astra child theme.
Author:         Me
Author URI:     
Template:       astra
Version:        0.1.1
*/
/* Custom Style */
/* Add your section padding defaults here */
/* ====================================
   SPACING UTILITIES
   ==================================== */

/* CSS Variables for consistent spacing */
:root {
  --spacing-sm: 1.6rem;   /* 25.6px at 16px base */
  --spacing-md: 3.2rem;   /* 51.2px */
  --spacing-lg: 6rem;     /* 96px */
  --spacing-xl: 8rem;     /* 128px */
  
  /* Responsive adjustments */
  --section-padding-mobile: 2.5rem;
  --section-padding-tablet: 4rem;
  --section-padding-desktop: 6rem;
}

/* Vertical Section Padding */
.section-padding {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

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

.section-padding-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.section-padding-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

/* Responsive Section Padding (recommended for main sections) */
.section-padding-responsive {
  padding-top: var(--section-padding-mobile);
  padding-bottom: var(--section-padding-mobile);
}

@media (min-width: 768px) {
  .section-padding-responsive {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .section-padding-responsive {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }
}

/* Top Padding Only */
.section-padding-t {
  padding-top: var(--spacing-sm);
}

.section-padding-t-md {
  padding-top: var(--spacing-md);
}

.section-padding-t-lg {
  padding-top: var(--spacing-lg);
}

.section-padding-t-xl {
  padding-top: var(--spacing-xl);
}

/* Bottom Padding Only */
.section-padding-b {
  padding-bottom: var(--spacing-sm);
}

.section-padding-b-md {
  padding-bottom: var(--spacing-md);
}

.section-padding-b-lg {
  padding-bottom: var(--spacing-lg);
}

.section-padding-b-xl {
  padding-bottom: var(--spacing-xl);
}

/* Horizontal Padding (for container content) */
.container-padding {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .container-padding {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .container-padding {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* No Padding Utilities (useful with Elementor) */
.no-padding {
  padding: 0 !important;
}

.no-padding-t {
  padding-top: 0 !important;
}

.no-padding-b {
  padding-bottom: 0 !important;
}

/* Margin Utilities (for spacing between elements) */
.margin-b {
  margin-bottom: var(--spacing-sm);
}

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

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

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

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

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

/* Gap Utilities (for flex/grid containers) */
.gap-sm {
  gap: var(--spacing-sm);
}

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

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