/* Third-Party Utilities and Integrations */

/* ==================== SECTION SPACING ==================== */
/* Responsive section padding - mobile first */

/* Mobile (default) - 60px top and bottom */
.section-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Tablet (769px+) - 90px top and bottom */
@media (min-width: 769px) {
    .section-spacing {
        padding-top: 90px;
        padding-bottom: 90px;
    }
}

/* Desktop (1025px+) - 120px top and bottom */
@media (min-width: 1025px) {
    .section-spacing {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

/* Bottom padding only variant */
.section-spacing-bottom {
    padding-bottom: 60px;
}

@media (min-width: 769px) {
    .section-spacing-bottom {
        padding-bottom: 90px;
    }
}

@media (min-width: 1025px) {
    .section-spacing-bottom {
        padding-bottom: 120px;
    }
}

/* ==================== CONTAINER PADDING ==================== */
/* Responsive horizontal container padding - mobile first */

/* Mobile (default) - 20px left and right */
.container-padding {
    padding-left: 20px;
    padding-right: 20px;
}

/* Tablet (769px+) - 30px left and right */
@media (min-width: 769px) {
    .container-padding {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Desktop (1025px+) - 48px left and right */
@media (min-width: 1025px) {
    .container-padding {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* ==================== HEADING TO TEXT SPACING ==================== */
/* Responsive spacing between headings and text below them - mobile first */

/* Mobile (default) - 16px gap */
.heading-gap {
    margin-bottom: 16px;
}

/* Tablet (769px+) - 32px gap */
@media (min-width: 769px) {
    .heading-gap {
        margin-bottom: 32px;
    }
}

/* Desktop (1025px+) - 24px gap */
@media (min-width: 1025px) {
    .heading-gap {
        margin-bottom: 24px;
    }
}

/* ==================== IMAGE TO TITLE SPACING ==================== */
/* Responsive spacing between images and titles below them - mobile first */

/* Mobile (default) - 36px gap */
.image-title-gap {
    margin-bottom: 36px;
}

/* Tablet (769px+) - Reset to 0 (typically side-by-side) */
@media (min-width: 769px) {
    .image-title-gap {
        margin-bottom: 0;
    }
}

/* ==================== SMALL HEADING SPACING ==================== */
/* Bottom spacing for smaller headings (h3, h4, h5) - 12px */

.small-heading-gap {
    margin-bottom: 12px;
}

/* ==================== CARD/ITEM SPACING ==================== */
/* Bottom spacing between card or list items - 36px */

.item-gap {
    margin-bottom: 36px;
}

/* ==================== TESTIMONIAL QUOTE SPACING ==================== */
/* Spacing for testimonial quotes - mobile first */

/* Mobile (default) - 32px gap */
.quote-spacing {
    margin-bottom: 32px;
}

/* Tablet (769px+) - 40px gap */
@media (min-width: 769px) {
    .quote-spacing {
        margin-bottom: 40px;
    }
}

/* Desktop (1025px+) - 48px gap */
@media (min-width: 1025px) {
    .quote-spacing {
        margin-bottom: 48px;
    }
}

/* Cookie Consent Icon Style */
#cc-main .cm__btn--settings::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.3em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='currentColor' d='M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 1c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zm-1.5 1c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zm3 0c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zm-3 2c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zm3 0c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zm-1.5 1c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Cookie consent modal styling */
#cc-main {
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Override cookie consent button colors */
    --cc-btn-primary-bg: var(--color-heading);
    --cc-btn-primary-border-color: var(--color-heading);
    --cc-btn-primary-hover-bg: var(--color-primary);
    --cc-btn-primary-hover-border-color: var(--color-primary);
    
    /* Make toggles match the primary color */
    --cc-toggle-on-bg: var(--color-heading);
}

#cc-main .cm {
    border-radius: 0.75rem;
}

/* Cookie consent buttons - fallback for older styles */
#cc-main .cm__btn,
#cc-main button[data-role="all"],
#cc-main button[data-role="necessary"] {
    background-color: var(--color-heading) !important;
    border-color: var(--color-heading) !important;
    color: white !important;
}

#cc-main .cm__btn:hover,
#cc-main button[data-role="all"]:hover,
#cc-main button[data-role="necessary"]:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Manage preferences button - secondary style */
#cc-main .cm__btn--secondary {
    background-color: transparent !important;
    border: 1px solid var(--color-heading) !important;
    color: var(--color-heading) !important;
}

#cc-main .cm__btn--secondary:hover {
    background-color: var(--color-heading) !important;
    color: white !important;
}