/* ============================================================
   SERVICE AREA / GEO PAGES — FAQ styles (faq-v12 variant)
   Linked on every geo page via _css-service-area/css-service-area.cfm.

   Originally a COPY of the "Home FAQ — v12" block in css/_custom.css.
   The original stays in _custom.css because the HOME page FAQ uses
   the same .faq-v12 classes (removing it there would break home);
   geo pages load both, the rules match, no visible conflict.

   Uses --geo-* variables only, defined as FLAT LITERALS in
   service-area.css :root. The Branding page reads and writes those
   lines; var() fallback chains were removed on purpose (the host's
   value would silently win over anything set in Branding) and the
   branding editor refuses them — do not reintroduce chains.
   ============================================================ */

/* ===== FAQ — v12 (lite-faq-variant12 / faq-v12) ===== */
.faq-v12 .panel.panel-default {
    margin-bottom: 24px;
    background-color: #fff;
    border: 1px solid var(--geo-accent);
    border-radius: var(--geo-border-radius);
    overflow: hidden; /* clip the hover fill (and children) to the rounded corners */
}
.faq-v12 .panel-group .panel-heading {
    padding: 0;
    position: relative;
    background-color: transparent;
    transition: 0.3s;
}
.faq-v12 .panel-title > a {
    position: relative;
    display: block;
    font-weight: 600;
    line-height: 26px;
    padding: 16px 50px 16px 64px;
    color: var(--geo-primary);
    transition: 0.3s;
}
/* question icon badge before each FAQ (replaces the "Q1." numbering).
   Badge styled like the trust bar; uses --fa-family + --icon-radius vars. */
.faq-v12 .panel-title > a::before {
    content: "\3f"; /* question (FA7 maps this icon to U+003F) */
    font-family: var(--geo-fa-family);
    font-weight: 900; /* solid */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--geo-accent);
    color: var(--geo-accent-text);
    border-radius: var(--geo-icon-radius);
    font-size: 16px;
    line-height: 1;
}
/* hover a closed question -> invert the badge so it stays visible on the accent fill.
   --geo-accent-text, never #fff: on a light accent the readable pairing is dark. */
.faq-v12 .panel-heading a.collapsed:hover::before {
    background: var(--geo-accent-text);
    color: var(--geo-accent);
}
@media (min-width: 769px) {
    .faq-v12 .panel-title > a {
        padding: 28px 56px 28px 70px;
    }
}
/* hover a CLOSED question -> fill with brand color */
.faq-v12 .panel-heading a.collapsed:hover,
.faq-v12 .panel-heading a[aria-expanded="false"]:hover {
    color: var(--geo-accent-text);
    background-color: var(--geo-accent);
}
/* CSS-drawn spinning chevron (font-independent). closed = down, open = spins up */
.faq-v12 .panel-title > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--geo-accent);
    border-bottom: 2px solid var(--geo-accent);
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.4s ease;
}
.faq-v12 .panel-title > a:not(.collapsed)::after {
    transform: translateY(-50%) rotate(225deg);
}
.faq-v12 .panel-heading a.collapsed:hover::after {
    border-color: #fff;
}
.faq-v12 .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border: 0;
    padding: 0 32px 32px;
}
@media (min-width: 992px) {
    .faq-row-reverse {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }
}