/*------------------------------------*\
    Page Footer
    Footer layout and interaction styles for logo, quick links, contact info,
    social links, legal links, and back-to-top controls.

    KEY FEATURES:
    - Two footer zones: `.page-footer__main` (white) and `.page-footer__bottom` (dark).
    - Mobile-first layout with tablet grid upgrades and desktop row reordering.
    - Desktop uses the `.btn` glyph-based back-to-top pill; smaller breakpoints use
      the bottom-bar text + icon back-to-top link.
    - Reduced-motion handling disables transitions and hover lift animation.

    IMPLEMENTATION NOTES:
    - Layout changes are scoped to project breakpoints at 768px and 1200px.
    - Pipe separators for quick links are handled in CSS for Phase 2 nav output.
    - Smooth scrolling behavior comes from global styles (`html { scroll-behavior: smooth; }`).

    LIMITATIONS:
    - Phase 1 content is static; Phase 2 connects quick links and legal links to
      WordPress menu locations and settings data.
\*------------------------------------*/


/* ==========================================================
   FOOTER ROOT
   margin-top: auto keeps the footer affixed to the bottom of
   the viewport when content is shorter than the screen (works
   with the body flex column layout in global.css).
=========================================================== */

.page-footer {
    margin-top: auto;
}


/* ==========================================================
   MAIN SECTION (white background, top of footer)
=========================================================== */

.page-footer__main {
    background-color: var(--color-white);
    padding-bottom: 40px;
    color: var(--color-body);
}

.page-footer__main-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}


/* ==========================================================
   LOGO
=========================================================== */

.page-footer__logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.page-footer__logo-img {
    display: block;
    width: 250px;
    height: auto;
    max-width: 100%;
}


/* ==========================================================
   SOCIAL ICONS
=========================================================== */

.page-footer__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-footer__social li {
    margin-bottom: 0;
    padding-left: 0;
}

.page-footer__social li::before {
    display: none;
}

.page-footer__social li a {
    display: inline-flex;
    font-size: 35px;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-medium), transform var(--transition-medium);
}

.page-footer__social li + li {
    margin-top: 0;
}

.page-footer__social-icon {
    display: block;
    width: 100%;
    height: 100%;
}


/* ==========================================================
   QUICK LINKS
=========================================================== */

.page-footer__quick-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.page-footer__heading {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: var(--line-height-heading);
    text-transform: uppercase;
}

.page-footer__menu {
    /*
     * Pipe separators between items use li:not(:last-child)::after (Phase 2
     * wp_nav_menu output). Baseline alignment keeps anchors and separators aligned.
     */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: var(--line-height-body);
}

.page-footer__menu li {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    line-height: var(--line-height-body);
    margin-bottom: 0;
    padding-left: 0;
}

.page-footer__menu li::before {
    display: none;
}

.page-footer__menu li:not(:last-child)::after {
    content: "|";
    color: var(--color-body);
    font-weight: 400;
    user-select: none;
    -webkit-user-select: none;
}

.page-footer__menu a {
    color: var(--color-body);
    font-weight: 400;
    text-decoration: none;
    transition: color var(--transition-medium);
}

.page-footer__menu-divider {
    color: var(--color-body);
    -webkit-user-select: none;
    user-select: none;
}


/* ==========================================================
   CONTACT (phone + email)
=========================================================== */

.page-footer__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.page-footer__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-body);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-medium);
}

.page-footer__contact-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.page-footer__contact-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.page-footer__contact-address {
    max-width: 100%;
    color: var(--color-body);
    font-weight: 400;
    text-align: inherit;
}

.page-footer__contact-address p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   BACK TO TOP - Desktop pill button
   Hidden by default on mobile/tablet; shown at >=1200px below.
=========================================================== */


/*
 * Desktop back-to-top: IcoMoon up-arrow-circle (ring is part of the glyph).
 * Inherits button text color (white on the green pill).
 */
.page-footer__main .page-footer__back-to-top {
    display: none;
}

.page-footer__back-to-top.btn::after {
    content: "\e924";
}


/* ==========================================================
   BOTTOM BAR (dark background)
=========================================================== */

.page-footer__bottom {
    background-color: var(--bg-dark);
    color: var(--color-white);
    padding-top: 20px;
    padding-bottom: 20px;
}

.page-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: var(--font-size-small);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.4;
}

.page-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-footer__legal li {
    margin-bottom: 0;
    padding-left: 0;
}

.page-footer__legal li::before {
    display: none;
}

.page-footer__legal a {
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-slow);
}

.page-footer__legal a:hover {
    color: var(--color-primary-on-dark);
}

.page-footer__copyright {
    margin: 0;
}

@media ( max-width: 767px) {
    .section-block:not(.half-text-half-form) + .page-footer .page-footer__main {
        padding-top: 40px;
    }
    
}

/* ==========================================================
   BACK TO TOP - Mobile/tablet text + circle link
=========================================================== */

.page-footer__back-to-top-link.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--color-primary-inverse);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-medium);
}

.page-footer__back-to-top-link.btn::after {
    content: "\e924";
    font-size: 1.25em;
    transform: none;
}

.page-footer__back-to-top-link.btn:hover {
    color: var(--color-primary-on-dark);
}

.page-footer__back-to-top-link.btn:hover::after {
    transform: none;
}

/* ==========================================================
   TABLET (>= 768px)
   Main inner becomes a 2x2 grid; bottom bar splits into
   left (legal + copyright) and right (back-to-top link).
=========================================================== */

@media (min-width: 768px) {
    .page-footer__heading {
        font-size: 20px;
    }

    .page-footer__main {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .page-footer__bottom {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .page-footer__main-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 30px var(--content-gap);
        text-align: left;
    }

    .page-footer__logo {
        justify-self: start;
    }

    .page-footer__logo-img {
        width: 286px;
    }

    .page-footer__social {
        justify-self: end;
        gap: 12px;
    }

    .page-footer__social li a {
        font-size: 44px;
    }

    .page-footer__quick-links {
        align-items: flex-start;
        gap: 12px;
    }

    .page-footer__menu {
        justify-content: flex-start;
    }

    .page-footer__contact {
        align-items: flex-start;
        justify-self: end;
    }

    .page-footer__bottom-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    /*
     * Group legal + copyright into a single visual stack on the LEFT,
     * while the back-to-top link sits on the RIGHT. The wrapper uses
     * display: contents so flex-wrap on the parent still works at
     * narrow tablet widths if the back-to-top wraps below.
     */
    .page-footer__legal {
        justify-content: flex-start;
        flex-basis: 100%;
        order: 0;
    }

    .page-footer__copyright {
        order: 1;
        flex-basis: auto;
    }

    .page-footer__back-to-top-link {
        order: 2;
        margin-left: auto;
    }

    .page-footer__back-to-top-link.btn {
        margin: 0;
        margin-top: -40px;
    }

}


/* ==========================================================
   DESKTOP (>= 1200px)
   Main inner: single horizontal row, items reordered via
   flex-order. Show the green pill "Back to Top" button and
   hide the dark-bar text link.
   Bottom bar: collapse to a single inline row.
=========================================================== */

@media (min-width: 1200px) {
    .page-footer__main {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .page-footer__bottom {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .page-footer__main-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--content-gap);
        text-align: left;
    }

    /* Reorder columns to match the desktop visual sequence:
       Logo -> Quick Links -> Contact -> Social -> Back to Top */
    .page-footer__logo          { order: 1; }
    .page-footer__quick-links   { order: 2; }
    .page-footer__contact       { order: 3; }
    .page-footer__social        { order: 4; }
    .page-footer__back-to-top   { order: 5; }

    /* Reset the tablet-only justify-self overrides */
    .page-footer__logo,
    .page-footer__social,
    .page-footer__contact {
        justify-self: auto;
    }

    .page-footer__logo-img {
        max-width: 286px;
        width: 100%;
    }

    .page-footer__social-link:hover {
        color: var(--color-primary-hover);
        transform: translateY(-2px);
    }

    .page-footer__menu a:hover {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .page-footer__contact-item:hover {
        color: var(--color-primary);
    }

    .page-footer__quick-links,
    .page-footer__contact {
        align-items: flex-start;
    }

    /* Show the desktop pill, hide the dark-bar text link */
    .page-footer__back-to-top {
        display: inline-flex;
    }

    .page-footer__back-to-top-link {
        display: none;
    }

    .page-footer__bottom-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--content-gap);
        text-align: left;
        font-size: 18px;
    }

    .page-footer__legal {
        display: contents;
    }

    .page-footer__copyright {
        order: 0;
    }

    .page-footer__back-to-top-link.btn {
        margin-top: 0;
    }
}

@media ( min-width: 1600px ) {
    .page-footer__logo-img {
        max-width: 304px;
    }

    .page-footer__main .page-footer__back-to-top {
        display: inline-flex;
    }

    .page-footer__back-to-top-link.btn {
        display: none;
    }

    .page-footer__legal a,
    .page-footer__bottom-inner {
        font-size: 24px;
    }
}


/* ==========================================================
   REDUCED MOTION
=========================================================== */

@media (prefers-reduced-motion: reduce) {


    .page-footer__social-link:hover {
        transform: none;
    }

}