/* Utility Classes (Clean V2) */

.bg_image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Margin/Padding Helpers matching original utility classes */
.pt--65 { padding-top: 65px !important; }
.pb--65 { padding-bottom: 65px !important; }
.pt--100 { padding-top: 100px !important; }
.pb--100 { padding-bottom: 100px !important; }

.mt--30 { margin-top: 30px !important; }
.mt--40 { margin-top: 40px !important; }
.mt--50 { margin-top: 50px !important; }

.mb--30 { margin-bottom: 30px !important; }
.mb--40 { margin-bottom: 40px !important; }
.mb--50 { margin-bottom: 50px !important; }

/* Custom Overrides for specific layouts */
.u-mb-40 { margin-bottom: 40px; }
.u-mb-60 { margin-bottom: 60px; }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display */
.d-block { display: block; }
.d-none { display: none; }
.d-flex { display: flex; }

/* Mobile Page Title - Hidden on desktop, visible on mobile */
.mobile-page-title {
    display: none;
    font-size: var(--h2);
    font-weight: var(--p-bold);
    color: var(--color-heading-1);
    text-align: center;
    padding: 30px 20px 0;
    margin: 0;
}

@media (max-width: 991px) {
    .mobile-page-title {
        display: block;
    }
}

/* Soft Background Container */
.bg-soft {
    --blend-top: var(--color-white);
    --blend-bottom: var(--color-white);
    background:
        linear-gradient(to bottom, var(--blend-top) 0%, var(--color-bg-light) 80px),
        linear-gradient(to top, var(--blend-bottom) 0%, var(--color-bg-light) 80px),
        var(--color-bg-light);
    background-repeat: no-repeat;
    background-position: top, bottom, center;
    background-size: 100% 80px, 100% 80px, 100% 100%;
}

/* Soft Background Container - Primary (extends outward) */
.bg-soft-primary {
    --blend-top: var(--color-white);
    --blend-bottom: var(--color-white);
    background: var(--color-primary);
    color: var(--color-white);
    position: relative;
    z-index: 1;
}

.bg-soft-primary > * {
    position: relative;
    z-index: 1;
}

.bg-soft-primary::before,
.bg-soft-primary::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 2;
}

.bg-soft-primary::before {
    top: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--blend-top) 0%, var(--color-primary) 100%);
}

.bg-soft-primary::after {
    bottom: 0;
    transform: translateY(100%);
    background: linear-gradient(to top, var(--blend-bottom) 0%, var(--color-primary) 100%);
}

/* --- Accordion / FAQ --- */
.accordion-item {
    background: #F2F2F2;
    border: 1px solid #E3E0E6;
    box-shadow: var(--shadow-accordion);
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
}

.accordion-header button {
    padding: 24px 40px;
    background: transparent;
    font-weight: var(--p-bold);
    font-size: var(--h6);
    color: var(--color-heading-1);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    cursor: pointer;
}

.accordion-button::after {
    display: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button:not(.collapsed) {
    background-color: #E8E8E8;
    color: var(--color-heading-1);
    box-shadow: none;
}

.accordion-button i {
    font-size: 14px;
    color: var(--color-heading-1);
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) i {
    transform: rotate(180deg);
}

.accordion-body {
    padding: 2rem;
    background: transparent;
    color: var(--color-body);
}