/* ==========================================================================
   Image Split — Accordion Variation
   ========================================================================== */

/* Accordion wrapper inside the content column */
.image-split__accordion {
    width: 100%;
}

/* Individual item */
 .accordion-item {
    border-bottom: 1px solid rgba(var(--dark-green-rgb, 0, 0, 0), 0.15);
}

/* Question / trigger button */
 .accordion-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wellington-green);
    text-align: left;
    line-height: 1.6;
}

 .accordion-question:hover {
    color: var(--primary, var(--dark-green));
    opacity: 0.8;
}

/* Plus / minus icon */
 .accordion-icon {
    position: relative;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
}

.line-horizontal, .line-vertical {
    position: absolute;
    background-color: currentColor;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform-origin: center;
}

 .line-horizontal {
    width: 18px;
    height: 2px;
    transform: translate(-50%, -50%);
}

 .line-vertical {
    width: 2px;
    height: 18px;
    transform: translate(-50%, -50%);
}

/* Answer panel */
 .accordion-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.35s ease;
}

 .accordion-item.active .accordion-answer {
    opacity: 1;
}

 .accordion-answer__inner {
    padding: 0 0 24px;
}

 .accordion-answer__inner p {
    margin: 0 0 12px;
}

 .accordion-answer__inner p:last-child {
    margin-bottom: 0;
}

 .accordion-answer__inner ul,
 .accordion-answer__inner ol {
    padding-left: 20px;
    margin: 0 0 12px;
}

 .accordion-answer__inner li {
    margin-bottom: 6px;
}

/* Dark background variant — swap colours when section has a dark bg */
.bg-dark .image-split__accordion .accordion-item,
.bg-dark-green .image-split__accordion .accordion-item {
    border-color: rgba(255, 255, 255, 0.2);
}

.bg-dark .image-split__accordion .accordion-question,
.bg-dark-green .image-split__accordion .accordion-question {
    color: var(--white);
}
.bg-dark .image-split__accordion .accordion-answer__inner, .bg-dark-green .image-split__accordion .accordion-answer__inner {color: rgba(255, 255, 255, 0.75);}

/* FAQs */
.faq-layout {display: grid; grid-template-columns: 2fr 3fr;  gap: clamp(3rem, 12vw, 20rem); align-items: start; max-width: 1500px; margin: 0 auto; width: 100%; height: 100%; box-sizing: border-box; padding-left: 50px; padding-right: 50px;}
.faq-buttons {display: flex; gap: 10px; flex-wrap: wrap;}
.faq-nav-button {text-transform: uppercase; letter-spacing: 2px; box-sizing: border-box; padding: 15px 20px; border-radius: var(--radius); font-size: 11px; background: var(--sage); color: var(--wellington-green); font-weight: 400; line-height: 1;}
.faq-nav-button.active {background-color: var(--wellington-green); color: var(--white);}

/* Responsive */

@media (max-width: 1000px) {
    .image-split__accordion {margin-top: 24px;}
    .image-split__accordion .accordion-question {padding: 16px 0;}
}

@media (max-width: 450px) {
    .image-split__accordion .accordion-answer__inner {padding-bottom: 18px;}
}