/* Family Court Services pages (the seven FCS Unit pages) — loaded only by those pages.
   Everything here hangs off .fcs-* classes, which exist nowhere else, so no shared component
   changes behaviour anywhere on the rest of the site.

   Deliberately small: the service cards, the Location and Hours panels and the button row are
   built from Bootstrap's own .card / .row / .btn and the site's existing .info-box and
   .division-icon, so the only genuinely new things here are the breadcrumb (which has no
   precedent on this site at all) and a smaller icon badge for the service cards. */

/* --- G3 breadcrumb ------------------------------------------------------- */
.fcs-breadcrumb {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.fcs-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
}
.fcs-breadcrumb li + li::before {
    content: "\203a";       /* › */
    margin-right: 0.35rem;
    color: #7a8798;
}
.fcs-breadcrumb a {
    color: var(--jud-blue);
    text-decoration: none;
}
.fcs-breadcrumb a:hover,
.fcs-breadcrumb a:focus-visible { text-decoration: underline; }
.fcs-breadcrumb [aria-current="page"] { color: var(--jud-ink); }

/* --- intro: circular icon beside the opening paragraph -------------------- */
.fcs-intro {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.fcs-intro > .division-icon { margin-top: 0.15rem; }
@media (max-width: 575.98px) {
    .fcs-intro { flex-direction: column; gap: 0.75rem; }
}

/* --- service cards ------------------------------------------------------- */
/* Same colored-circle badge as .division-icon, two sizes down, so an icon can sit inline with a
   card heading without dominating it. */
.fcs-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    background: var(--icon-bg, var(--jud-blue));
}
.fcs-service-card { height: 100%; }
.fcs-service-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--jud-navy);
    margin-bottom: 0.65rem;
}
.fcs-service-card .card-title a { color: inherit; text-decoration: none; }
.fcs-service-card .card-title a:hover,
.fcs-service-card .card-title a:focus-visible { text-decoration: underline; }
/* The pill is used both inside a service card and on its own under a page's opening paragraph,
   so the look belongs on .fcs-fee itself and only the card spacing stays card-scoped (fix
   2026-10-27: the rule was card-scoped only, so the standalone pills rendered as plain text).

   Green since 2026-10-29 (requester). #0f5132 on #d1e7dd measures 7.21:1, so it clears WCAG AA
   (4.5:1) and AAA (7:1) for this 0.8rem text - the blue pill it replaces was 7.45:1. Keep both
   values together if either is ever changed: the text is small, so the ratio has little room. */
.fcs-fee {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    background: #d1e7dd;
    color: #0f5132;
    font-size: 0.8rem;
    font-weight: 600;
}
.fcs-service-card .fcs-fee { margin-top: 0.75rem; }

/* --- phone numbers ------------------------------------------------------- */
/* No tel: links on these pages (requester, 2026-10-27), but as of 2026-10-29 the three phone
   lines carry .btn .btn-outline-primary so the button rows look unchanged. Bootstrap does the
   work, so .fcs-phone sets no colour of its own - it would otherwise win on source order and
   paint the text ink instead of blue. It stays on the markup as the marker for "phone number,
   deliberately not a link".

   The hover/active colours are pinned to the resting ones: the element is a <span>, so turning
   solid blue under the pointer would promise a click that cannot happen. */
.fcs-phone.btn:hover,
.fcs-phone.btn:focus,
.fcs-phone.btn:active {
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
    box-shadow: none;
}

/* --- FAQ accordion Q / A markers ----------------------------------------- */
/* site.css styles .faq-marker only inside .faq-question / .faq-answer, and Bootstrap's
   accordion markup has neither, so the two badges are wired up here instead. Scoped to the FAQ
   page's own accordion id, so no other accordion on the site is touched. */
#fcsFaqAccordion .accordion-button {
    align-items: flex-start;
    gap: 0.75rem;
}
#fcsFaqAccordion .accordion-button .faq-marker {
    background: var(--jud-blue);
    color: #fff;
}
#fcsFaqAccordion .accordion-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
#fcsFaqAccordion .accordion-body .faq-marker {
    background: #fff;
    color: var(--jud-blue);
    border: 2px solid var(--jud-blue);
}

/* --- numbered steps ------------------------------------------------------ */
/* The step lists on these pages show their number in a filled blue circle instead of a bare
   numeral (requester, 2026-10-29), sized and weighted like the Q / A badges above so the two
   read as one family. Driven by a CSS counter off a class rather than off <ol> itself, so the
   breadcrumb's own <ol> keeps its plain markers. White on --jud-blue is 5.44:1. */
.fcs-steps {
    list-style: none;
    counter-reset: fcs-step;
    padding-left: 0;
}
.fcs-steps > li {
    counter-increment: fcs-step;
    position: relative;
    min-height: 2rem;
    padding-left: 2.75rem;
}
.fcs-steps > li::before {
    content: counter(fcs-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--jud-blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

/* --- two-column bullet list ---------------------------------------------- */
/* "What a Social Investigation Addresses" is four short items; as one column of plain bullets it
   left most of the content width empty, so the items sit two to a row in light cards with a blue
   bullet (requester, 2026-10-29, who supplied the layout). The marker is a ::before dot rather
   than the list marker so it can be coloured and aligned independently of the text. Collapses to
   a single column below Bootstrap's md breakpoint, where two cards would be too narrow to read. */
.fcs-grid-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .fcs-grid-list { grid-template-columns: repeat(2, 1fr); }
}
.fcs-grid-list > li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 0.9rem;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 0.6rem;
    box-shadow: var(--jud-card-shadow);
    font-size: 0.95rem;
}
.fcs-grid-list > li::before {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--jud-blue);
}