/* ==========================
   Footer Design Settings
========================== */

:root {

    /* Footer colours */
    --footer-background: #222222;
    --footer-text: #ffffff;
    --footer-heading: #ffffff;
    --footer-link: #ffffff;
    --footer-link-hover: #e0681b;

    --footer-divider: rgba(255,255,255,.15);

    --footer-credit-text: #ffffff;
    --footer-credit-link: #e0681b;

    /* Typography */
    --footer-font-family: var(--header-font-family);

    --footer-text-size: 16px;
    --footer-heading-size: 22px;
    --footer-heading-weight: 700;

    --footer-nav-size: 16px;
    --footer-bottom-size: 15px;

    /* Layout */
    --footer-padding-y: 60px;
    --footer-padding-x: 30px;

    --footer-column-gap: 60px;
    --footer-row-gap: 40px;

    --footer-logo-width: 220px;

    --footer-bottom-padding: 25px;

    --footer-max-width: 1400px;

}

/* ==========================
   Footer
========================== */

.site-footer {
    background: var(--footer-background);
    color: var(--footer-text);
    font-family: var(--footer-font-family);
}

.footer-inner {
    max-width: var(--footer-max-width);
    margin: 0 auto;
    padding: var(--footer-padding-y) var(--footer-padding-x);
}

.footer-grid {
    display: grid;
    grid-template-columns: 220px 1fr 2fr;
    gap: var(--footer-row-gap) var(--footer-column-gap);
    align-items: start;
}

/* ==========================
   Logo
========================== */

.footer-logo img {
    display: block;
    width: 100%;
    max-width: var(--footer-logo-width);
    height: auto;
}

/* ==========================
   Headings
========================== */

.footer-heading {
    margin: 0 0 20px;

    color: var(--footer-heading);

    font-size: var(--footer-heading-size);
    font-weight: var(--footer-heading-weight);
    line-height: 1.2;
}

/* ==========================
   Contact
========================== */

.footer-text p {
    margin: 0 0 15px;
    font-size: var(--footer-text-size);
    line-height: 1.7;
}

.footer-text a {
    color: var(--footer-link);
    text-decoration: none;
}

.footer-text a:hover {
    color: var(--footer-link-hover);
}

/* ==========================
   Services Navigation
========================== */

.footer-services-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 12px 40px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-services-navigation li {
    margin: 0;
}

.footer-services-navigation a {
    color: var(--footer-link);

    font-size: var(--footer-nav-size);

    text-decoration: none;

    transition: color .2s;
}

.footer-services-navigation a:hover {
    color: var(--footer-link-hover);
}

.footer-services-navigation a:focus-visible,
.footer-navigation a:focus-visible,
.back-to-top-button:focus-visible {
    outline: 3px solid var(--footer-link-hover);
    outline-offset: 3px;
}

/* ==========================
   Bottom Footer
========================== */

.footer-bottom {
    margin-top: 50px;
    padding-top: var(--footer-bottom-padding);
    border-top: 1px solid var(--footer-divider);
}

.footer-navigation ul {
    display: flex;
    align-items: center;
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-navigation li {
    margin: 0;
    padding: 0;
}

/* Space between the left-hand items */
.footer-navigation li + li {
    margin-left: 40px;
}

/* Push the site credit to the far right */
.footer-navigation .site-credit {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-navigation,
.footer-navigation a {
    color: var(--footer-text);
    font-size: var(--footer-bottom-size);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-navigation a:hover {
    color: var(--footer-link-hover);
}

.site-credit a {
    color: var(--footer-credit-link);
    font-weight: 600;
}

/* Mobile */
@media (max-width: 992px) {

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-links {
        grid-column: 1 / -1;
    }

    .footer-navigation ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-navigation li {
        margin: 0 0 15px;
    }

    .footer-navigation li + li {
        margin-left: 0;
    }

    .footer-navigation .site-credit {
        margin-left: 0;
    }
}

@media (max-width: 800px) {

    .footer-services-navigation ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-column: auto;
    }
}

.back-to-top-button {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

    border: 0;
    border-radius: 50%;
    background: var(--contact-hover-background);

    cursor: pointer;
}

.back-to-top-button::before {
    content: "";

    position: absolute;
    top: 19px;
    left: 17px;

    width: 10px;
    height: 10px;

    border-top: 2px solid #fff;
    border-left: 2px solid #fff;

    transform: rotate(45deg);
}