/**
 * Spacing Utilities - Frontend & Editor
 * Used both in editor and on frontend
 */

/* ==========================================================================
   CSS Variables for responsive spacing
   ========================================================================== */

:root {
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 50px;
    --spacing-3xl: 70px;

    /* Fixed values remain unchanged on all screens */
    --spacing-12: 12px;
    --spacing-18: 18px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-36: 36px;

    /* Medium values - slight responsiveness */
    --spacing-45: 40px;
    --spacing-48: 40px;

    /* Large values - significant responsiveness */
    --spacing-80: 60px;
    --spacing-90: 70px;
    --spacing-100: 80px;
}

/* Tablets (640px+) */
@media (min-width: 640px) {
    :root {
        --spacing-xs: 12px;
        --spacing-sm: 18px;
        --spacing-md: 24px;
        --spacing-lg: 32px;
        --spacing-xl: 45px;
        --spacing-2xl: 60px;
        --spacing-3xl: 80px;

        --spacing-45: 42px;
        --spacing-48: 44px;
        --spacing-80: 64px;
        --spacing-90: 72px;
        --spacing-100: 80px;
    }
}

/* Desktop (960px+) */
@media (min-width: 960px) {
    :root {
        --spacing-xs: 15px;
        --spacing-sm: 20px;
        --spacing-md: 30px;
        --spacing-lg: 40px;
        --spacing-xl: 50px;
        --spacing-2xl: 70px;
        --spacing-3xl: 90px;

        --spacing-45: 45px;
        --spacing-48: 48px;
        --spacing-80: 80px;
        --spacing-90: 90px;
        --spacing-100: 100px;
    }
}

/* ==========================================================================
   Margin Utility Classes
   ========================================================================== */

/* Top Margins */
.margin-top-none { margin-top: 0 !important; }
.margin-top-xs { margin-top: var(--spacing-xs) !important; }
.margin-top-sm { margin-top: var(--spacing-sm) !important; }
.margin-top-md { margin-top: var(--spacing-md) !important; }
.margin-top-lg { margin-top: var(--spacing-lg) !important; }
.margin-top-xl { margin-top: var(--spacing-xl) !important; }
.margin-top-2xl { margin-top: var(--spacing-2xl) !important; }
.margin-top-3xl { margin-top: var(--spacing-3xl) !important; }

/* Bottom Margins */
.margin-bottom-none { margin-bottom: 0 !important; }
.margin-bottom-xs { margin-bottom: var(--spacing-xs) !important; }
.margin-bottom-sm { margin-bottom: var(--spacing-sm) !important; }
.margin-bottom-md { margin-bottom: var(--spacing-md) !important; }
.margin-bottom-lg { margin-bottom: var(--spacing-lg) !important; }
.margin-bottom-xl { margin-bottom: var(--spacing-xl) !important; }
.margin-bottom-2xl { margin-bottom: var(--spacing-2xl) !important; }
.margin-bottom-3xl { margin-bottom: var(--spacing-3xl) !important; }

/* Vertical Margins */
.margin-vertical-none {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.margin-vertical-xs {
    margin-top: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-xs) !important;
}
.margin-vertical-sm {
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
}
.margin-vertical-md {
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
}
.margin-vertical-lg {
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
}
.margin-vertical-xl {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;
}
.margin-vertical-2xl {
    margin-top: var(--spacing-2xl) !important;
    margin-bottom: var(--spacing-2xl) !important;
}
.margin-vertical-3xl {
    margin-top: var(--spacing-3xl) !important;
    margin-bottom: var(--spacing-3xl) !important;
}

/* Specific Pixel Values */
.margin-top-12 { margin-top: var(--spacing-12) !important; }
.margin-top-18 { margin-top: var(--spacing-18) !important; }
.margin-top-24 { margin-top: var(--spacing-24) !important; }
.margin-top-32 { margin-top: var(--spacing-32) !important; }
.margin-top-36 { margin-top: var(--spacing-36) !important; }
.margin-top-45 { margin-top: var(--spacing-45) !important; }
.margin-top-48 { margin-top: var(--spacing-48) !important; }
.margin-top-80 { margin-top: var(--spacing-80) !important; }
.margin-top-90 { margin-top: var(--spacing-90) !important; }
.margin-top-100 { margin-top: var(--spacing-100) !important; }

.margin-bottom-12 { margin-bottom: var(--spacing-12) !important; }
.margin-bottom-18 { margin-bottom: var(--spacing-18) !important; }
.margin-bottom-24 { margin-bottom: var(--spacing-24) !important; }
.margin-bottom-32 { margin-bottom: var(--spacing-32) !important; }
.margin-bottom-36 { margin-bottom: var(--spacing-36) !important; }
.margin-bottom-45 { margin-bottom: var(--spacing-45) !important; }
.margin-bottom-48 { margin-bottom: var(--spacing-48) !important; }
.margin-bottom-80 { margin-bottom: var(--spacing-80) !important; }
.margin-bottom-90 { margin-bottom: var(--spacing-90) !important; }
.margin-bottom-100 { margin-bottom: var(--spacing-100) !important; }

/* ==========================================================================
   Padding Utility Classes
   ========================================================================== */

/* Top Padding */
.padding-top-none { padding-top: 0 !important; }
.padding-top-xs { padding-top: var(--spacing-xs) !important; }
.padding-top-sm { padding-top: var(--spacing-sm) !important; }
.padding-top-md { padding-top: var(--spacing-md) !important; }
.padding-top-lg { padding-top: var(--spacing-lg) !important; }
.padding-top-xl { padding-top: var(--spacing-xl) !important; }
.padding-top-2xl { padding-top: var(--spacing-2xl) !important; }
.padding-top-3xl { padding-top: var(--spacing-3xl) !important; }

/* Bottom Padding */
.padding-bottom-none { padding-bottom: 0 !important; }
.padding-bottom-xs { padding-bottom: var(--spacing-xs) !important; }
.padding-bottom-sm { padding-bottom: var(--spacing-sm) !important; }
.padding-bottom-md { padding-bottom: var(--spacing-md) !important; }
.padding-bottom-lg { padding-bottom: var(--spacing-lg) !important; }
.padding-bottom-xl { padding-bottom: var(--spacing-xl) !important; }
.padding-bottom-2xl { padding-bottom: var(--spacing-2xl) !important; }
.padding-bottom-3xl { padding-bottom: var(--spacing-3xl) !important; }

/* Vertical Padding */
.padding-vertical-none {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.padding-vertical-xs {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
}
.padding-vertical-sm {
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
}
.padding-vertical-md {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
}
.padding-vertical-lg {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
}
.padding-vertical-xl {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
}
.padding-vertical-2xl {
    padding-top: var(--spacing-2xl) !important;
    padding-bottom: var(--spacing-2xl) !important;
}
.padding-vertical-3xl {
    padding-top: var(--spacing-3xl) !important;
    padding-bottom: var(--spacing-3xl) !important;
}

/* Specific Pixel Values */
.padding-top-12 { padding-top: var(--spacing-12) !important; }
.padding-top-18 { padding-top: var(--spacing-18) !important; }
.padding-top-24 { padding-top: var(--spacing-24) !important; }
.padding-top-32 { padding-top: var(--spacing-32) !important; }
.padding-top-36 { padding-top: var(--spacing-36) !important; }
.padding-top-45 { padding-top: var(--spacing-45) !important; }
.padding-top-48 { padding-top: var(--spacing-48) !important; }
.padding-top-80 { padding-top: var(--spacing-80) !important; }
.padding-top-90 { padding-top: var(--spacing-90) !important; }
.padding-top-100 { padding-top: var(--spacing-100) !important; }

.padding-bottom-12 { padding-bottom: var(--spacing-12) !important; }
.padding-bottom-18 { padding-bottom: var(--spacing-18) !important; }
.padding-bottom-24 { padding-bottom: var(--spacing-24) !important; }
.padding-bottom-32 { padding-bottom: var(--spacing-32) !important; }
.padding-bottom-36 { padding-bottom: var(--spacing-36) !important; }
.padding-bottom-45 { padding-bottom: var(--spacing-45) !important; }
.padding-bottom-48 { padding-bottom: var(--spacing-48) !important; }
.padding-bottom-80 { padding-bottom: var(--spacing-80) !important; }
.padding-bottom-90 { padding-bottom: var(--spacing-90) !important; }
.padding-bottom-100 { padding-bottom: var(--spacing-100) !important; }

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

/* Hide on different screens */
@media (max-width: 639px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 640px) and (max-width: 959px) {
    .hide-tablet { display: none !important; }
}

@media (min-width: 960px) {
    .hide-desktop { display: none !important; }
}

/* Show only on specific screens */
.show-mobile { display: none !important; }
.show-tablet { display: none !important; }
.show-desktop { display: none !important; }

@media (max-width: 639px) {
    .show-mobile { display: block !important; }
}

@media (min-width: 640px) and (max-width: 959px) {
    .show-tablet { display: block !important; }
}

@media (min-width: 960px) {
    .show-desktop { display: block !important; }
}

/* ==========================================================================
   Block Container Utilities
   ========================================================================== */

.df-block-container {
    width: 100%;
    box-sizing: border-box;
}

.df-block-container.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.df-block-container.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.font-bold { font-weight: bold !important; }
.font-normal { font-weight: normal !important; }
.font-light { font-weight: 300 !important; }

.text-small { font-size: 0.875rem !important; }
.text-large { font-size: 1.25rem !important; }
.text-xl { font-size: 1.5rem !important; }

/* ==========================================================================
   Color Utilities
   ========================================================================== */

.bg-white { background-color: #ffffff !important; }
.bg-gray-50 { background-color: #f9fafb !important; }
.bg-gray-100 { background-color: #f3f4f6 !important; }
.bg-primary { background-color: #038181 !important; }

.text-white { color: #ffffff !important; }
.text-gray-600 { color: #6b7280 !important; }
.text-gray-900 { color: #111827 !important; }
.text-primary { color: #038181 !important; }

/* ==========================================================================
   Integration Blocks Support
   ========================================================================== */

/* Support for our integration blocks */
.wp-block-group:has(.integration-hero-section),
.wp-block-group:has(.integration-features-section),
.wp-block-group:has(.integration-benefits-list),
.wp-block-group:has(.integration-benefits-cards-row),
.wp-block-group:has(.integration-pricing-features),
.wp-block-group:has(.integration-tabs-with-content),
.wp-block-group:has(.faq-section) {
    /* Remove standard WordPress margins */
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   Section Utility Classes
   ========================================================================== */

/* Standard section margins */
.df-section-spacing {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.df-section-spacing-large {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.df-section-spacing-small {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Standard section padding */
.df-section-padding {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

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

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