/*
 * Site footer (view.php). Desktop: the brand (logo, then the email button with any social
 * icons under it), then the columns right-aligned in one row; under 1200px the brand is a
 * row above the columns (logo left; email and icons right); phones: centred, the menus
 * side by side.
 * (Side by side from 1200px: about 1,020px of brand and columns.)
 */

.site-footer {
    --footer-text: var(--white);
    --footer-muted: var(--neutral-400);
    --footer-divider: rgba(255, 255, 255, .4);
    --footer-tile: var(--tertiary-800); /* social icon tiles */
    background: var(--black);
    color: var(--footer-text);
    font-weight: 400;
    letter-spacing: 0;
}

.site-footer__inner {
    padding-block: 80px 44px;
}

.site-footer :is(p, li, a, span, summary) {
    color: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer :is(a, summary):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

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

.site-footer li {
    margin: 0;
}

/* ---------- Top: brand and columns ---------- */

.site-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--step-8);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex-shrink: 0;
}

.site-footer__logo {
    display: block;
}

/* The email button, with the social icons in a row under it */
.site-footer__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.site-footer__logo img {
    width: 120px;
}

.site-footer__email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--footer-text);
    border-radius: var(--pill);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.site-footer a.site-footer__email:hover {
    background: var(--footer-text);
    color: var(--black);
    text-decoration: none;
}

.site-footer__columns {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    /* Roomier on wide screens, closing up first as space runs short: 32px at 1200px, 80px by 1900px */
    column-gap: clamp(32px, calc(7vw - 52px), 80px);
    text-align: right;
}


/* Get in touch: the address (and its note), then phone, fax and email after a gap */
.site-footer .site-footer__address {
    line-height: 22px;
}

.site-footer .site-footer__contact-lines {
    margin-top: 14px;
}

.site-footer__title {
    margin: 0 0 12px;
    color: var(--footer-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

.site-footer__column :is(p, li) {
    font-size: 14px;
    line-height: 26px;
    white-space: nowrap;
}

/* Hours: each day and its hours on a line */
.site-footer__hours {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    column-gap: 16px;
    margin: 0;
    font-size: 14px;
    line-height: 26px;
    white-space: nowrap;
}

.site-footer__hours > div {
    display: contents;
}

.site-footer__hours dt {
    text-align: left;
    color: var(--footer-muted);
}

.site-footer__hours dd {
    margin: 0;
    text-align: right;
}

/* A note under the address or the hours (e.g. "Located Inside Dixie Animal Hospital") */
.site-footer .site-footer__note {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 20px;
    opacity: .8;
}

.site-footer__note p {
    margin: 0;
    white-space: normal;
}

/* Social icons: a row of tiles (under the email button) */
.site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-footer__socials a {
    --social-mark: var(--footer-tile);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--footer-tile);
    color: var(--footer-text);
    transition: background-color .2s ease, color .2s ease;
}

.site-footer__socials a:hover {
    --social-mark: var(--footer-text);
    background: var(--footer-text);
    color: var(--footer-tile);
}

.site-footer__socials .helios-social-icon {
    width: 20px;
    height: 20px;
}

.site-footer .helios-social-mark {
    transition: fill .2s ease, stroke .2s ease;
}

.site-footer .helios-social-knock {
    fill: currentColor;
}

/* ---------- Bottom bar ---------- */

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 32px;
    margin-top: 96px;
    color: var(--footer-muted);
    font-size: 14px;
    line-height: 1.4;
}

/* The copyright, with the legal links in a row under it, divided by dots */
.site-footer__bottom-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
}

.site-footer__legal li {
    display: flex;
    align-items: center;
}

.site-footer__legal li + li::before {
    content: '·';
    margin-inline: 10px;
    color: var(--footer-muted);
    font-weight: 700;
}

.site-footer__credit {
    margin-left: auto;
}

/* ---------- Phones: contact list and menus (hidden on larger screens) ---------- */

.site-footer__mobile {
    display: none;
}

/* Brand on its own row above the columns (one row only fits on wide screens) */
@media (max-width: 1199px) {
    .site-footer__top {
        flex-direction: column;
        gap: 56px;
    }

    .site-footer__brand {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* One row across the width: the spaces between the columns take up any slack, down to
       16px, so no column drops to a line of its own (see 2 × 2 below) */
    .site-footer__columns {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 40px 16px;
        text-align: left;
    }


    .site-footer__actions {
        align-items: flex-end;
    }

    .site-footer__socials {
        justify-content: flex-end;
    }

    /* The copyright and legal links, centred under the columns */
    .site-footer__bottom {
        justify-content: center;
        text-align: center;
    }

    .site-footer__bottom-start {
        align-items: center;
    }

    .site-footer__legal {
        justify-content: center;
    }
}

/* Too narrow for one row: two by two, rather than one column on a line of its own */
@media (min-width: 768px) and (max-width: 839px) {
    .site-footer__columns {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        justify-content: space-between;
        gap: 40px 32px;
    }
}

@media (max-width: 767px) {
    .site-footer__inner {
        padding-block: 56px 36px;
    }

    .site-footer__top {
        gap: 0;
    }

    .site-footer__brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .site-footer__email {
        font-size: 16px;
        font-weight: 500;
    }

    .site-footer__columns {
        display: none;
    }

    .site-footer__mobile {
        display: block;
        width: 100%;
        margin-top: 28px;
    }

    ul.site-footer__mobile-contact {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 28px;
        color: var(--footer-muted);
        font-size: 15px;
        line-height: 22px;
    }

    /* The menus side by side (Explore, Connect), each under its title */
    .site-footer__menus {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
        padding-top: 28px;
        border-top: 1px solid var(--footer-divider);
    }

    .site-footer__menu ul {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: var(--footer-muted);
        font-size: 15px;
        line-height: 22px;
    }

    /* A comfortable tap height for each link */
    .site-footer__menu a {
        display: inline-block;
        padding-block: 5px;
    }

    .site-footer__bottom {
        margin-top: 48px;
        font-size: 16px;
    }

    /* Everything centred */
    .site-footer__inner {
        text-align: center;
    }

    .site-footer__brand {
        align-items: center;
    }

    .site-footer__actions {
        align-items: center;
    }

    .site-footer__socials {
        justify-content: center;
    }

    .site-footer__bottom,
    .site-footer__bottom-start,
    .site-footer__legal {
        justify-content: center;
    }

    .site-footer__bottom-start {
        align-items: center;
    }

    /* Two links to a line, each line centred on its own, with a dot between the pair (so
       no line starts with one): inline links, with a line break after every second */
    .site-footer__legal {
        display: block;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
    }

    .site-footer__legal li {
        display: inline;
        white-space: nowrap;
    }

    .site-footer__legal li:nth-child(odd)::before {
        content: none;
    }

    .site-footer__legal li:nth-child(even)::after {
        content: '\A';
        white-space: pre;
    }

    .site-footer__hours {
        justify-content: center;
        margin-block: 4px;
        font-size: 15px;
    }

    .site-footer__credit {
        margin-left: 0;
    }
}

/* ---------- Entrance (script.js) ----------
   The brand rises in, then the columns (phones: the contact list and menus) one after another, then the bottom bar. */
.site-footer.rv :is(.site-footer__brand, .site-footer__column, .site-footer__mobile-contact, .site-footer__menu, .site-footer__bottom) {
    opacity: 0;
    translate: 0 calc(var(--reveal-rise) * .6);
}

.site-footer.rv-armed :is(.site-footer__brand, .site-footer__column, .site-footer__mobile-contact, .site-footer__menu, .site-footer__bottom) {
    --rv-delay: calc(.15s + var(--rv-i, 0) * .1s);
    transition:
        opacity var(--reveal-text) ease var(--rv-delay),
        translate var(--reveal-text) var(--reveal-ease) var(--rv-delay);
}

.site-footer.rv-armed .site-footer__top > .site-footer__brand {
    --rv-delay: 0s;
}

.site-footer.rv-armed .site-footer__inner > .site-footer__bottom {
    --rv-delay: .7s;
}

.site-footer.rv.rv-in :is(.site-footer__brand, .site-footer__column, .site-footer__mobile-contact, .site-footer__menu, .site-footer__bottom) {
    opacity: 1;
    translate: none;
}

/* The section above the footer (footer.php; e.g. After hours) fades into the footer's black
   at its foot, so the two run together. Drawn on its overlay, under the content. */
.site-above-footer .section > .section__overlay::after,
.site-above-footer .section.has-bg-media:not(:has(> .section__overlay))::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: min(50%, 320px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--black) 100%);
    pointer-events: none;
}