*
* col-lg-12 = 100% of the Bootstrap container content area,
* which aligns exactly with the CONTACT section below.
* ─────────────────────────────────────────────────────────────
*/
/* ─────────────────────────────────────────────────────────────
HEADING BLOCK — centered title, decorative line, subtitle
───────────────────────────────────────────────────────────── */
#faq-section .text-center {
text-align: center !important;
margin-bottom: 4.28571rem; /* 60px */
}
/* Green decorative rule above the heading */
#faq-section .g-width-35 {
display: inline-block !important;
width: 2.5rem !important; /* 35px */
height: 0.07143rem !important; /* 1px */
background-color: #72c02c !important;
margin-bottom: 0.5rem;
}
/* Heading */
#faq-section h2.g-font-weight-600 {
font-weight: 600 !important;
color: #111 !important;
}
/* Subtitle — 60% max-width, centred */
#faq-section .lead {
color: #555;
}
#faq-section .lead.g-width-60x--md {
margin-left: auto !important;
margin-right: auto !important;
}
@media (min-width: 768px) {
#faq-section .lead.g-width-60x--md {
width: 60% !important;
}
}
/* ─────────────────────────────────────────────────────────────
ACCORDION CARD SHELL
White bg, no border, rounded corners, gap between cards
───────────────────────────────────────────────────────────── */
#accordion .card {
background-color: #ffffff !important;
border: none !important;
border-radius: 0.25rem !important;
margin-bottom: 1.42857rem !important; /* 20px */
overflow: hidden;
width: 100% !important;
}
/* Zero out Bootstrap's default card-header padding */
#accordion .card [role="tab"] {
padding: 0 !important;
}
#accordion .card h5 {
margin-bottom: 0;
}
/* ─────────────────────────────────────────────────────────────
ACCORDION TRIGGER LINK
Scoped to [role="tab"] so body links are never affected.
───────────────────────────────────────────────────────────── */
#accordion .card [role="tab"] a {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 16px !important;
/* u-shadow-v19 */
box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.1) !important;
/* 20px top/bottom, 30px left/right */
padding: 1.25rem 1.875rem !important;
border-radius: 0.25rem !important;
background-color: #f7f7f7 !important;
color: #555 !important;
text-decoration: none !important;
}
#accordion .card [role="tab"] a:hover {
text-decoration: none !important;
color: #333 !important;
}
/* Open panel → question text turns navy */
#accordion .card [role="tab"] a[aria-expanded="true"] {
color: #002d62 !important;
}
/* ─────────────────────────────────────────────────────────────
BODY LINKS — reset to normal site link appearance
Undoes any inherited accordion trigger styles so links
inside answer panels look like regular inline links.
───────────────────────────────────────────────────────────── */
#accordion .u-accordion__body a {
display: inline !important;
padding: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
font-size: inherit !important;
color: #002d62 !important;
text-decoration: underline !important;
}
#accordion .u-accordion__body a:hover {
color: #004080 !important;
text-decoration: underline !important;
}
/* ─────────────────────────────────────────────────────────────
CHEVRON ICON TOGGLE (u-accordion__control-icon)
Increased to 22px so it's clearly visible.
Bootstrap JS toggles .collapsed on the
tag:
.collapsed present → panel CLOSED → show ↓
.collapsed absent → panel OPEN → show ↑
───────────────────────────────────────────────────────────── */
.u-accordion__control-icon {
flex-shrink: 0;
margin-left: 1rem;
color: #002d62;
font-size: 22px; /* was effectively ~14px — now clearly visible */
line-height: 1;
}
/* Default (open): show ↑, hide ↓ */
.u-accordion__control-icon i:nth-child(1) { display: none; }
.u-accordion__control-icon i:nth-child(2) { display: inline; }
/* Collapsed: show ↓, hide ↑ */
.collapsed .u-accordion__control-icon i:nth-child(1) { display: inline; }
.collapsed .u-accordion__control-icon i:nth-child(2) { display: none; }
/*
* Font Awesome fallback — CSS chevrons when FA is not loaded.
* Remove once Font Awesome is confirmed present on the page.
*/
.u-accordion__control-icon i.fa {
font-style: normal;
font-family: inherit;
font-size: inherit; /* inherits 22px from parent */
line-height: 1;
}
.u-accordion__control-icon i.fa-angle-down::before {
content: "›";
display: inline-block;
transform: rotate(90deg);
}
.u-accordion__control-icon i.fa-angle-up::before {
content: "›";
display: inline-block;
transform: rotate(-90deg);
}
/* ─────────────────────────────────────────────────────────────
ACCORDION BODY (answer text panel)
───────────────────────────────────────────────────────────── */
.u-accordion__body {
padding: 1.875rem !important; /* 30px */
color: #555 !important;
font-size: 16px !important;
}