/*---*\
Page Footer
Full-width site footer matching the designed chrome

KEY FEATURES:
- Mobile stack, tablet two-column rows, desktop grid from Figma
- 1200-1599px follows Footer-1366 (hours beside social; 286px quick-links)
- 1600px+ follows the 1920 Footer (hours beside tagline; 424px quick-links)
- 32px contact icon frames; location, phone, and email share a 24px glyph size
- Back to top sits under legal links until desktop

IMPLEMENTATION NOTES:
- Quick links use CSS columns; break after the 5th item keeps Products-Who We Are in col 1
- Columns avoid shared-row gaps when col 2 has a taller wrapped label
- Uses CSS Grid at 1200px+ for 2D footer chrome alignment from Figma
- Mobile legal: Site Credits, Sitemap, Privacy wrap as whole links (no overlap)
- Icons use the viaflex-icons font-face classes from global.css
- Reuses theme-setting fields, footer menus, and FX.BackToTop
\*---*/

.page-footer {
    margin-top: auto;
    padding: 60px 0;
    background-color: var(--color-surface-primary);
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
}

.page-footer p,
.page-footer ul,
.page-footer ol,
.page-footer li,
.page-footer a {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

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

.page-footer a:hover {
    color: var(--color-secondary);
}

.page-footer a:focus-visible,
.page-footer button:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}

.page-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.page-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-footer__logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: fit-content;
}

.page-footer__logo-img {
    display: block;
    width: 222px;
    height: 52px;
    object-fit: contain;
}

.page-footer__tagline {
    margin: 0;
}

.page-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.page-footer__social {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 40px;
}

.page-footer a.page-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
}

.page-footer a.page-footer__social-link:hover i {
    color: var(--color-secondary);
}

.page-footer__social-link [class^="icon-"] {
    display: block;
    font-size: 40px;
    color: var(--color-text-inverse);
}

.page-footer__hours {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-footer__hours-row {
    display: flex;
    align-items: center;
}

.page-footer__hours-label {
    flex: 0 0 120px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}

.page-footer__hours-value {
    flex: 1 1 auto;
}

.page-footer__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.page-footer__contacts,
.page-footer__phones,
.page-footer__emails {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-footer__contacts a:hover {
    color: var(--color-secondary);
}

.page-footer__contact {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.page-footer__contact-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-secondary);
}

.page-footer__contact-icon [class^="icon-"] {
    display: block;
    font-size: 24px;
    color: var(--color-secondary);
}

.page-footer__contact-text {
    flex: 1 1 auto;
    min-width: 0;
}

.page-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 100%;
}

.page-footer__menu a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
}

.page-footer__nav-title {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold)!important;
    color: var(--color-text-inverse);
}

.page-footer__menu,
.page-footer__legal-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-footer__menu {
    display: block;
    column-count: 2;
    column-gap: 32px;
    width: 100%;
}

.page-footer__menu .menu-item {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 14px;
    padding: 0;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Keep Products through Who We Are in column 1 */
.page-footer__menu .menu-item:nth-child(5) {
    break-after: column;
    -webkit-column-break-after: always;
}

.page-footer__menu .menu-item:last-child {
    margin-bottom: 0;
}

.page-footer__legal-menu .menu-item {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.page-footer__legal-menu a {
    display: inline-block;
    white-space: nowrap;
}

.page-footer__top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-inverse);
    font-family: var(--font-button);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-button);
    text-transform: uppercase;
    cursor: pointer;
}

.page-footer__top-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.page-footer__top-icon .icon-double-arrows {
    font-size: 18px;
    transform: rotate(-90deg);
}

.page-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.page-footer__legal-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 14px;
    width: 100%;
    max-width: 100%;
}

.page-footer__copyright {
    margin: 0;
    color: var(--color-text-inverse);
}

@media (min-width: 768px) {
    .page-footer {
        padding: 100px 0;
        font-size: 16px;
    }

    .page-footer__brand {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .page-footer__logo {
        flex: 0 0 258px;
    }

    .page-footer__tagline {
        flex: 1 1 auto;
    }

    .page-footer__meta {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .page-footer__social {
        flex: 0 0 258px;
    }

    .page-footer__hours {
        flex: 1 1 auto;
    }

    .page-footer__hours-label,
    .page-footer__hours-value {
        font-size: 16px;
    }

    .page-footer__main {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }

    .page-footer__contacts {
        flex: 0 0 258px;
    }

    .page-footer__nav {
        flex: 1 1 auto;
        min-width: 0;
    }

    .page-footer__menu {
        column-gap: 14px;
    }

    .page-footer__menu .menu-item {
        margin-bottom: 14px;
    }

    .page-footer__bottom {
        gap: 16px;
    }

    .page-footer__legal-menu {
        flex-wrap: wrap;
        gap: 16px 32px;
    }
}

@media (min-width: 1200px) {
    .page-footer {
        padding: 150px 0;
        font-size: 16px;
    }

    .page-footer__inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 286px);
        gap: 50px 32px;
        align-items: start;
    }

    .page-footer__brand,
    .page-footer__meta,
    .page-footer__main,
    .page-footer__contacts {
        display: contents;
    }

    .page-footer__logo {
        grid-column: 1;
        grid-row: 1;
        flex: none;
        align-self: center;
    }

    .page-footer__tagline {
        grid-column: 2 / 4;
        grid-row: 1;
        align-self: center;
        max-width: none;
    }

    .page-footer__social {
        grid-column: 1;
        grid-row: 2;
        flex: none;
        align-self: center;
        min-height: 32px;
    }

    .page-footer__social-link [class^="icon-"] {
        font-size: 32px;
    }

    .page-footer__hours {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        flex: none;
        width: 100%;
        max-width: 286px;
    }

    .page-footer__address {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
    }

    .page-footer__phones {
        grid-column: 2;
        grid-row: 3;
        gap: 12px;
    }

    .page-footer__emails {
        grid-column: 3;
        grid-row: 3;
        gap: 12px;
    }

    .page-footer__nav {
        grid-column: 4;
        grid-row: 1 / 4;
        flex: none;
        width: 100%;
    }

    .page-footer__bottom {
        grid-column: 1 / 4;
        grid-row: 4;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 32px;
    }

    .page-footer__legal-menu {
        gap: 32px;
    }

    .page-footer__top {
        grid-column: 4;
        grid-row: 4;
        align-self: center;
    }

    .page-footer__contact-text {
        max-width: 230px;
        flex: 0 1 230px;
    }

    .page-footer__menu {
        column-gap: 18px;
    }

    .page-footer__menu .menu-item {
        margin-bottom: 18px;
    }

    .page-footer a:hover .page-footer__contact-icon,
    .page-footer a:hover .page-footer__contact-icon [class^="icon-"] {
        color: var(--color-secondary);
    }

    .page-footer a.page-footer__social-link:hover {
        opacity: 0.8;
        color: var(--color-text-inverse);
    }

    .page-footer__top:hover {
        color: var(--color-secondary);
    }
}

@media (min-width: 1600px) {
    .page-footer__inner {
        grid-template-columns: 272fr 272fr 272fr 272fr 424fr;
        gap: 60px 32px;
    }

    .page-footer__tagline {
        max-width: 576px;
    }

    .page-footer__hours {
        grid-column: 4;
        grid-row: 1;
        max-width: none;
    }

    .page-footer__address {
        grid-column: 2;
        grid-row: 2;
    }

    .page-footer__phones {
        grid-column: 3;
        grid-row: 2;
    }

    .page-footer__emails {
        grid-column: 4;
        grid-row: 2;
    }

    .page-footer__nav {
        grid-column: 5;
        grid-row: 1 / 3;
    }

    .page-footer__bottom {
        grid-column: 1 / 5;
        grid-row: 3;
    }

    .page-footer__top {
        grid-column: 5;
        grid-row: 3;
    }

    .page-footer__menu {
        column-gap: 32px;
    }

    .page-footer__menu .menu-item {
        margin-bottom: 18px;
    }
}