/* Site footer (layouts/base.njk), rebuilt 2026-10-19.

   Loaded on every page, because every page has the footer.

   The content sits on the header's side inset (--ee-header-inset, from
   ee-nav.css), so the footer's left and right edges line up with the visible
   logo and search icon above, at every width. The old footer sat in the
   narrower .whole_page_text_wrap column and did not line up.

   Layout: a brand column (logo, one line, social links) beside three link
   columns, then a bottom bar with the copyright and the legal links. The
   newsletter signup is a band of its own above the footer since 2026-10-20
   (components/newsletter-band.njk, ee-newsletter-form.css). White text on brand
   blue (#293C8F) is 9.8:1. Sizes are in px because body resolves to 28.8px
   sitewide. */

.footer-container > footer.ee-footer {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0 var(--ee-header-inset);
}

.ee-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px 64px;
    padding: 56px 0 48px;
}

.ee-footer-logo {
    display: inline-block;
}

.ee-footer-logo img {
    display: block;
    width: 160px;
    height: auto;
}

.ee-footer .ee-footer-tagline {
    max-width: 34ch;
    margin: 20px 0 24px;
    font-size: 16px;
    line-height: 1.6;
}

.ee-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* White circles with the brand blue icon, 44px so each is a comfortable
   target (WCAG 2.5.8 asks for 24px). */
.ee-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
}

.ee-footer-social svg {
    width: 22px;
    height: 22px;
}

/* The YouTube icon's drawing sits inside a larger 46px box of its own, so it
   needs a bigger size to match the other three. */
.ee-footer-social a[href*="youtube"] svg {
    width: 40px;
    height: 40px;
}

.ee-footer-social a:hover {
    background: var(--bright-yellow);
}

.ee-footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.ee-footer .ee-footer-heading {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ee-footer-nav ul,
.ee-footer-legal {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ee-footer-nav li {
    margin: 0 0 10px;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Links are plain at rest and underline on hover, the footer's own pattern
   like the menu above; focus gets the bright yellow ring, which reads on the
   blue (the brand blue ring used elsewhere would vanish into it). */
.ee-footer a {
    text-decoration: none;
}

.ee-footer .ee-footer-nav a,
.ee-footer .ee-footer-legal a {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.ee-footer-nav a:hover,
.ee-footer-legal a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Cookie settings" is a button (it reopens the consent banner, it goes
   nowhere) drawn like the legal links beside it. */
.ee-footer .ee-footer-link-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    /* White like the links: the list item's own color is a dark gray. */
    color: #fff;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
}

.ee-footer .ee-footer-link-button:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ee-footer .ee-footer-link-button:focus-visible,
.ee-footer a:focus-visible {
    outline: 3px solid var(--bright-yellow);
    outline-offset: 3px;
    border-radius: 2px;
    box-shadow: none;
}

.ee-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.ee-footer .ee-footer-copyright {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.ee-footer-legal li {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.ee-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.ee-footer .ee-footer-legal a {
    font-size: 14px;
}

/* Tablet: brand on top, the three link columns in a row below it. */
@media screen and (max-width: 960px) {
    .ee-footer-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding-top: 48px;
    }
}

/* Phone: two columns, Company with Services under it on the left and
   Resources on the right, so no column leaves a gap below it. The reading
   order stays Company, Services, Resources, as in the markup. Then one per
   row at the narrowest widths. */
@media screen and (max-width: 600px) {
    .ee-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "company resources"
            "services resources";
        align-items: start;
        gap: 24px 32px;
    }

    .ee-footer-col:nth-child(1) {
        grid-area: company;
    }

    .ee-footer-col:nth-child(2) {
        grid-area: services;
    }

    .ee-footer-col:nth-child(3) {
        grid-area: resources;
    }

    .ee-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 380px) {
    .ee-footer-nav {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
    }

    .ee-footer-col:nth-child(n) {
        grid-area: auto;
    }
}

@media (forced-colors: active) {
    .ee-footer-social a {
        border: 1px solid CanvasText;
    }

    .ee-footer-social svg path {
        fill: CanvasText;
    }
}