/* ==========================================================================
   Site footer
   ==========================================================================
   Port of the renderer site's Styles/widgets/_footer.scss. The palette is
   fixed here (it is part of the design system, not a widget setting) - see
   the note in Mvc/Views/FooterSection/Default.cshtml.
   ========================================================================== */

.page-footer {
    background-color: var(--cw-blue-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
    /* master.css resets the body, so nothing in the footer inherited a
       line-height and every line sat about 30% tighter than the renderer
       site's. These three are what its body passes down. */
    font-size: var(--cw-fs-base);
    letter-spacing: 0.005em;
    line-height: var(--cw-lh-body);
    padding-top: var(--cw-sp-12);
    padding-bottom: var(--cw-sp-12);
    width: 100%;
}

/* The renderer site stacks three vertical paddings before its first title:
   38.4px on the footer element, 12.8px on a `pt-3 pb-3` section, and 19.2px
   on a `py-4` wrapper - 70.4px in total, measured. This footer has only the
   one wrapper, so it carries the other two layers' 32px itself. */
.footer-page-groups {
    padding-top: var(--cw-sp-10);
    padding-bottom: var(--cw-sp-10);
}

/* --------------------------------------------------------------------------
   Page groups
   -------------------------------------------------------------------------- */

/* Bootstrap 5's `gy-4` on the renderer site's groups row: the row pulls up by
   one gutter and each column pushes down by one, so stacked groups get 19.2px
   between them and the first row gets nothing above it. Padding on the columns
   (which is what this used to do) instead adds space above the titles on every
   breakpoint. Scoped to the first row so the copyright row is untouched. */
/* `gx-3 gx-lg-0` on the renderer site: one gutter below lg, none from lg up,
   where its columns butt together. The desktop block further down zeroes it
   and sets the order that makes butting safe. */
.footer-page-groups > .row:first-child {
    margin-top: calc(var(--cw-sp-6) * -1);
    margin-left: calc(var(--cw-container-pad) * -1);
    margin-right: calc(var(--cw-container-pad) * -1);
}

.footer-group {
    margin-top: var(--cw-sp-6);
    padding: 0 var(--cw-container-pad);
}

/* --------------------------------------------------------------------------
   Desktop column order
   --------------------------------------------------------------------------
   The renderer site's footer order differs from its own navigation order, and
   it is load-bearing: with no gutter between columns, the two long-text groups
   have to sit last so the slack before "Follow Us" absorbs their links. Order
   them the same way here and the gutter can go, recovering the 16px of column
   width it costs.

   Keyed on the URL slug the view emits rather than the page title, and applied
   from lg up only so the stacked order - "Follow Us" first - is untouched.
   Groups with no entry here fall in after the mapped ones rather than jumping
   to the front.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .footer-page-groups > .row:first-child {
        margin-left: 0;
        margin-right: 0;
    }

    .footer-page-groups .footer-group {
        order: 90;
        padding-left: 0;
        padding-right: 0;
    }

    .footer-page-groups .footer-group--support { order: 1; }
    .footer-page-groups .footer-group--resources { order: 2; }
    .footer-page-groups .footer-group--about-us { order: 3; }
    .footer-page-groups .footer-group--services { order: 4; }
    .footer-page-groups .footer-group--products { order: 5; }
}

/* The renderer site's page-group titles are plain semibold links at body size,
   not headings - only its "Follow Us" column uses an h3, at 19.2px. The two
   therefore differ in size over there, which looks unintended but is what it
   ships; see the override below. */
.page-footer .footer-group-title {
    color: var(--cw-white);
    font-size: var(--cw-fs-base);
    font-weight: var(--cw-fw-semibold);
    /* These are h3 elements, so master.css's heading rule would otherwise give
       them its -0.015em display tracking; the renderer site's equivalents are
       plain links and just inherit the footer's. */
    letter-spacing: inherit;
    line-height: var(--cw-lh-body);
    margin: 0 0 var(--cw-sp-2);
    text-transform: none;
}

.page-footer .footer-follow-us-group .footer-group-title {
    font-size: var(--cw-fs-md);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* The renderer site spaces these with flex `gap`, which puts nothing after the
   last item; a margin would, pushing the rule below 3.2px further down. */
.footer-link-list > li {
    margin-bottom: var(--cw-sp-1);
}

.footer-link-list > li:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Links - white at reduced opacity, with the animated underline used
   throughout the renderer site.
   -------------------------------------------------------------------------- */

/* :link / :visited spelled out because Sitefinity's stylesheet loads later
   with `a, a:link, ... { color: #105cb6 }`, and a bare `.page-footer a`
   (0,1,1) only ties with its `a:link`. */
.page-footer a,
.page-footer a:link,
.page-footer a:visited {
    color: rgba(255, 255, 255, 0.86);
    display: inline-block;
    position: relative;
    text-decoration: none;
    transition: color 160ms ease;
}

.page-footer a:hover,
.page-footer a:focus {
    color: rgba(255, 255, 255, 0.98);
    text-decoration: none;
}

.page-footer a:not([aria-label])::after {
    background-color: currentColor;
    bottom: -0.12em;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms ease;
    width: 100%;
}

.page-footer a:not([aria-label]):hover::after,
.page-footer a:not([aria-label]):focus::after {
    transform: scaleX(1);
}

.page-footer a.footer-link.parent {
    text-decoration: none;
}

.page-footer a.footer-link.parent::after {
    display: none;
}

.page-footer .footer-link.child {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--cw-fs-base);
    font-weight: var(--cw-fw-regular);
    line-height: 1.6;
}

.page-footer .footer-link.child:hover,
.page-footer .footer-link.child:focus {
    color: rgba(255, 255, 255, 0.98);
}

/* --------------------------------------------------------------------------
   Follow us
   -------------------------------------------------------------------------- */

.footer-social {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-sp-4);
    margin-top: var(--cw-sp-2);
    margin-bottom: var(--cw-sp-1);
}

.page-footer .footer-social-link {
    color: rgba(255, 255, 255, 0.74);
    font-size: 14.08px;
    line-height: 1;
}

.page-footer .footer-social-link:hover,
.page-footer .footer-social-link:focus {
    color: rgba(255, 255, 255, 0.96);
}

/* --------------------------------------------------------------------------
   Rules, partner logos
   -------------------------------------------------------------------------- */

.page-footer hr,
.page-footer .footer-rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.page-footer .footer-rule {
    margin-top: var(--cw-sp-6);
    margin-bottom: var(--cw-sp-6);
}

.footer-partners {
    align-items: center;
    display: flex;
    gap: var(--cw-sp-12);
    justify-content: center;
    padding: var(--cw-sp-4) 0;
}

.footer-partner-logo {
    max-height: 38.4px;
    width: auto;
}

/* --------------------------------------------------------------------------
   Copyright / legal row
   -------------------------------------------------------------------------- */

/* `gy-2` on the renderer site's copyright row - 6.4px between the copyright
   and the legal links once they stack, and nothing above the first of them.
   A plain margin-top here (which is what this had) added 6.4px under the rule
   on every breakpoint instead. */
.footer-page-groups > .row:last-child {
    margin-top: calc(var(--cw-sp-2) * -1);
}

.footer-page-groups > .row:last-child > [class*="col"] {
    margin-top: var(--cw-sp-2);
}

.page-footer .footer-copy-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--cw-fs-sm);
    line-height: 1.4;
}

.footer-additional-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-additional-links > li {
    align-items: center;
    display: flex;
}

.page-footer .footer-additional-link {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--cw-fs-sm);
    line-height: 1.4;
}

.page-footer .footer-additional-link:hover,
.page-footer .footer-additional-link:focus {
    color: rgba(255, 255, 255, 0.98);
}

.page-footer .footer-additional-separator {
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    font-size: var(--cw-fs-sm);
    padding: 0 var(--cw-sp-2);
    position: relative;
    top: 0.05em;
}

/* --------------------------------------------------------------------------
   Stacked layout
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .footer-page-groups .footer-follow-us-group {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .footer-page-groups .footer-follow-us-group .footer-social {
        justify-content: center;
    }
}