/* ==========================================================================
   Site footer

   The footer was the same bright blue as the header and the hero, so the page
   ended on the loudest colour it contains and the links inside it had to
   fight their own background for contrast. A footer is where a visitor looks
   for an address, a policy or a phone number - it should recede.

   This paints it a deep blue-black instead: the same hue family as the brand,
   dropped far enough in lightness that white text sits on it comfortably and
   the accent can be used for what matters (links on hover, the subscribe
   button) rather than for the whole surface.

   Loaded after style.css and redesign.css, and scoped to .site-footer so
   nothing else on the page is touched.
   ========================================================================== */

.site-footer {
    --f-ground:  #0e1a24;  /* palette.css overrides these with the shared */
    --f-raise:   #14232f;  /* tokens, so the two dark bands cannot drift  */
    --f-line:    rgba(255, 255, 255, .10);
    --f-text:    #e6eef5;
    --f-mute:    rgba(230, 238, 245, .78);  /* .66 read as grey-on-grey */
    --f-accent:  #4fa8dd;

    position: relative;
    /* The theme hung a picture behind this through data-background; the
       gradient replaces it, so nothing is downloaded for the footer. */
    background: linear-gradient(180deg, var(--f-raise), var(--f-ground)) !important;
    color: var(--f-text);
    padding-block: 64px 0;
}

/* A hairline of brand colour where the page meets the footer. */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #0c6ba8, var(--f-accent), #0c6ba8);
}

/* --------------------------------------------------------------------------
   The four columns

   Grid rather than Bootstrap columns: the brand column needs to be wider than
   the three beside it, and the old markup nested a .row inside every column
   to hold a single list.
   -------------------------------------------------------------------------- */

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 44px;
}

.site-footer .footer-logo img {
    height: 40px;
    width: auto;
    margin-bottom: 18px;
}

.site-footer__about {
    margin: 0 0 20px;
    max-width: 34ch;
    color: var(--f-mute);
    font-size: .93rem;
    line-height: 1.7;
}

/* ------------------------------------------------------------- the contacts */

.site-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 13px;
    font-size: .93rem;
    line-height: 1.6;
}

.site-footer__contact i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(79, 168, 221, .14);
    color: var(--f-accent);
    font-size: .8rem;
}

.site-footer__contact a {
    color: var(--f-text);
    text-decoration: none;
    transition: color .16s ease;
}

.site-footer__contact a:hover { color: var(--f-accent); }

.site-footer__hours {
    display: block;
    color: var(--f-mute);
    font-size: .8rem;
}

/* The address is the one contact row that is plain text rather than a link,
   so it inherited the footer colour and read a shade dimmer than the phone
   and the email beside it. Give it the same weight as its neighbours. */
.site-footer .site-footer__contact li > span:not(.site-footer__hours) {
    color: var(--f-text);
    opacity: 1;
}

/* ---------------------------------------------------------------- the lists */

.site-footer .footer-title {
    margin: 0 0 18px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.site-footer .footer-link {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .footer-link li { margin-bottom: 11px; }

.site-footer .footer-link a {
    position: relative;
    display: inline-block;
    color: var(--f-mute);
    font-size: .93rem;
    text-decoration: none;
    transition: color .16s ease, transform .16s ease;
}

.site-footer .footer-link a:hover {
    color: var(--f-accent);
    transform: translateX(3px);
}

/* ----------------------------------------------------------- the newsletter */

.site-footer__news p {
    margin: 0 0 16px;
    color: var(--f-mute);
    font-size: .92rem;
    line-height: 1.65;
}

.site-footer .newsletter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--f-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .18s ease;
}

.site-footer .newsletter-form:focus-within {
    border-color: var(--f-accent);
}

.site-footer .newsletter-form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--f-text);
    box-shadow: none;
    font-size: .92rem;
}

.site-footer .newsletter-form .form-control::placeholder { color: rgba(230, 238, 245, .45); }
.site-footer .newsletter-form .form-control:focus { outline: none; box-shadow: none; background: transparent; color: var(--f-text); }

.site-footer .newsletter-form .submit-button {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--f-accent);
    color: #06131d;
}

.site-footer .newsletter-form .submit-button:hover { filter: brightness(1.1); }

/* --------------------------------------------------------------- the social */

/* redesign.css styles these as `.footer-section .social-link` - a round,
   right-aligned, 40px chip. That selector is a class heavier than the plain
   `.site-footer__social` these rules used, so the old look won and the one
   real icon ended up floating under the subscribe button. Matching its
   weight (and loading after it) puts the block back on the left, in the same
   rounded-square language as the contact icons and the subscribe button. */

.site-footer .site-footer__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.site-footer .site-footer__social li { display: inline-flex; }

.site-footer .site-footer__social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    line-height: 1;
    font-size: 1rem;
    border: 1px solid var(--f-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: var(--f-text);
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.site-footer .site-footer__social li a:hover,
.site-footer .site-footer__social li a:focus-visible {
    background: var(--f-accent);
    border-color: var(--f-accent);
    color: #06131d;
    transform: translateY(-2px);
}

.site-footer .site-footer__social li a i { color: inherit; }

.site-footer .site-footer__social li a img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------- the bottom bar */

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 20px;
    border-top: 1px solid var(--f-line);
}

.site-footer__bottom p {
    margin: 0;
    color: var(--f-mute);
    font-size: .88rem;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__legal a {
    color: var(--f-mute);
    font-size: .88rem;
    text-decoration: none;
}

.site-footer__legal a:hover { color: var(--f-accent); }

.site-footer__dev {
    margin: 0;
    color: var(--f-mute);
    font-size: .88rem;
}

.site-footer__dev a {
    color: var(--f-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    transition: color .16s ease, border-color .16s ease;
}

.site-footer__dev a:hover {
    color: var(--f-accent);
    border-bottom-color: var(--f-accent);
}

/* A label that is read out but not drawn. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1199px) {
    .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
    .site-footer__news { grid-column: 1 / -1; }
    .site-footer__news .newsletter-form { max-width: 420px; }
}

@media (max-width: 767px) {
    .site-footer { padding-block: 46px 0; }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .site-footer__about { max-width: none; }
    .site-footer__bottom { justify-content: flex-start; }
}