/* ─── Category CMS — consumer-facing content styles ─────────────────── */

/* CMS heading/list/icon/divider sit inside the category Bootstrap .container
   so their own max-width/padding must be neutralised to line up with the hero
   title and breadcrumb. Paragraph keeps its own indent, halved for category. */
.category-cms-top .hp2-heading,
.category-cms-top .hp2-list,
.category-cms-top .hp2-icon,
.category-cms-top .hp2-divider {
    padding: 0;
}
.category-cms-top .hp2-heading__inner,
.category-cms-top .hp2-list__inner,
.category-cms-top .hp2-icon__inner {
    padding: 0;
    max-width: none;
}
.category-cms-top .hp2-paragraph {
    padding: 0 12px;  /* was 0 24px */
}
.category-cms-top .hp2-paragraph__inner {
    padding: 8px 20px;  /* was 8px 40px */
}


/* Hero subtitle */
.category-hero__subtitle {
    color: var(--ub-navy, #00293d);
    font-size: 1.1rem;
    margin-top: 8px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Hero image banner */
.category-hero__image {
    margin: 16px 0;
    border-radius: 12px;
    overflow: hidden;
    max-height: 280px;
}
.category-hero__image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Intro text block */
.category-intro {
    background: #f0f4f8;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0;
    color: var(--ub-navy, #00293d);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ─── Body content section ─────────────────────────────────────────────── */
.category-body-content {
    padding: 40px 0;
}
.category-body-content__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.category-body-content__inner h2,
.category-body-content__inner h3 {
    color: var(--ub-navy, #00293d);
    margin-top: 0;
}
.category-body-content__inner p {
    color: #374151;
    line-height: 1.7;
}

/* ─── FAQ section ─────────────────────────────────────────────────────── */
.category-faq {
    padding: 40px 0 60px;
    background: #f8fafb;
}
.category-faq__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}
.category-faq__title {
    font-family: 'Rammetto One', serif;
    color: var(--ub-navy, #00293d);
    margin-bottom: 24px;
    font-size: 1.75rem;
}

/* FAQ accordion items */
.category-faq__item {
    border: 1px solid rgba(0, 41, 61, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.category-faq__item .accordion-button {
    color: var(--ub-navy, #00293d);
    font-weight: 600;
    background: #ffffff;
    font-size: 1rem;
}
.category-faq__item .accordion-button:not(.collapsed) {
    background: rgba(0, 41, 61, 0.04);
    color: var(--ub-navy, #00293d);
    box-shadow: none;
}
.category-faq__item .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 41, 61, 0.15);
}
.category-faq__answer {
    color: #374151;
    line-height: 1.7;
}

/* ─── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .category-hero__image img {
        height: 180px;
    }
    .category-faq {
        padding: 32px 0 40px;
    }
    .category-faq__title {
        font-size: 1.4rem;
    }
    .category-body-content {
        padding: 24px 0;
    }
}