/* ==========================================================================
   Questor footer — mobile/tablet accordion styling (18 Sept 2026)
   Drop into wwwroot/css/ alongside hero-carousel.css, e.g.:
     <link rel="stylesheet" href="~/css/footer-mobile.css" />

   Pairs with the .d-lg-none block in the footer partial. Only touches new
   classes (footer-*) — nothing here overrides the existing .footer /
   .footer a rules already in site.min.css (background teal #00667D /
   rgb(0,102,125), white text), so the accordion inherits that colouring
   automatically and needs no colour variables of its own.

   Relies on Bootstrap 5.2's own collapse JS (data-bs-toggle="collapse" in
   the markup) for the open/close behaviour and for toggling
   aria-expanded on the button — already loaded site-wide for the navbar's
   offcanvas menu, so no new script tag is needed.
   ========================================================================== */

.footer-mobile {
    padding-bottom: 8px;
}

.footer-tagline {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 4px;
}

.footer-contact {
    font-size: 14px;
    line-height: 1.7;
}

.footer-contact a {
    text-decoration: underline;
}

/* ---------- accordion ---------- */
.footer-accordion {
    border-top: 1px solid rgba(255,255,255,.25);
    margin-top: 8px;
}

.footer-accordion-item {
    border-bottom: 1px solid rgba(255,255,255,.25);
}

.footer-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    /* generous vertical padding keeps the tap target comfortably above the
       ~44px minimum recommended touch-target size */
    padding: 16px 4px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

    .footer-accordion-toggle:hover {
        color: #fff;
    }

    .footer-accordion-toggle:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -2px;
    }

    /* chevron rotates via Bootstrap's own aria-expanded toggle — no JS of
       our own needed to flip it open/closed */
    .footer-accordion-toggle .chev {
        width: 9px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: transform .2s ease;
        flex-shrink: 0;
        margin-left: 12px;
    }

    .footer-accordion-toggle[aria-expanded="true"] .chev {
        transform: rotate(-135deg);
    }

.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0 4px 18px;
}

    .footer-link-list li + li {
        margin-top: 12px;
    }

    .footer-link-list a {
        color: rgba(255,255,255,.9);
        font-size: 14.5px;
        text-decoration: none;
    }

        .footer-link-list a:hover,
        .footer-link-list a:focus {
            text-decoration: underline;
            color: #fff;
        }

.footer-legal-line {
    font-size: 12.5px;
    color: rgba(255,255,255,.75);
    margin-top: 4px;
}