/* =========================================================
   Site footer -- link grid and bottom bar
   Prefix: uq-site-footer
   Markup: template-parts/site-footer.php  Data: inc/site-footer.php
   Behaviour: js/site-footer.js

   Quo's footer, rebuilt from quo.com measurements (Sept 2026) and populated
   with Roofer On Demand's content: a white page, a 1px rgba(0,0,0,.1) keyline,
   black headings, 70%-black links, 60%-black legal type. ROD navy marks hover
   and the current page, as it marks the current page in the header. Yellow
   stays with the CTAs: the Footer CTA band that pages place directly above
   this footer is Quo's in-footer CTA, already built.

   Quo, as measured (px):
                     <480        480-767     768-991      >=992
     gutter          20          32          40           48
     grid            one column, accordions  4 cols gap 40  4 cols gap 100
     headings        14/21 500   14/21       16/24        16/24 500
     links           14/21 400   14/21       14/21        16/24 400
     legal           12/15.6     12/15.6     12/15.6      12/15.6
     top / bottom    32 / 40 around the grid, 64 above grid and bottom bar

   Two ROD departures, both deliberate:
     - The wide fourth column is Contact, not Quo's "From the blog", and
       Quo's 3.75fr would leave the three link columns 133px wide for labels
       like "Emergency Roof Repair". 2fr keeps Quo's rhythm and gaps with the
       link columns wide enough to hold them (180px at 1200).
     - Extra space under the last line on narrower screens: the back-to-top
       button and the Endorsal review button float over the bottom 80px of
       the page and would sit on the copyright. At >=1360px the back-to-top
       button clears the container and Quo's 40px applies.

   Client polish pass (Sept 28 2026), on top of Quo's numbers: 48px, not 64,
   above the bottom bar on wider screens; phone and email in ink at 500; legal
   type 13/18 at 66% black rather than Quo's 12/15.6 at 60%; payment label
   13px.

   Client round (Oct 2026): no logo. The columns are Company | Services |
   Resources | Contact, four flat lists with no city list (Resources links to
   the Location hub instead), so every link column has a heading and, on
   phones, an accordion. The bottom bar is
   two rows: accepted payment methods (monochrome vector marks) left and the
   social icons right, then a keyline, then "Hey AI" left and the legal row
   right. Marks and icons share ROD navy and one 20px rhythm.

   Written desktop-first, on Quo's own breakpoints (991 / 767 / 479), so each
   band reads straight across from the table above.
   ========================================================= */

.uq-site-footer {
    --uq-sf-ink: #000000;
    --uq-sf-link: rgba(0, 0, 0, 0.7);
    --uq-sf-subtle: rgba(0, 0, 0, 0.6);
    /* Legal row: still the quietest type here, one step darker than Quo's. */
    --uq-sf-legal: rgba(0, 0, 0, 0.66);
    --uq-sf-rule: rgba(0, 0, 0, 0.1);
    --uq-sf-rule-strong: rgba(0, 0, 0, 0.7);
    --uq-sf-navy: var(--uq-theme-primary, #104E8B);
    --uq-sf-focus: #1A6EFF;
    --uq-sf-font: var(--uq-site-font-body, "Inter", Arial, sans-serif);
    --uq-sf-container: 1200px;
    --uq-sf-gutter: 48px;
    --uq-sf-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    --uq-sf-gap: 100px;
    --uq-sf-bottom-space: 96px;
    /* Space between the link grid and the bottom bar. */
    --uq-sf-bottom-gap: 48px;
    /* The payment marks' row: the tallest mark (Interac) sets it, and the
       social icons centre on it. */
    --uq-sf-mark-row: 24px;
    --uq-sf-mark-gap: 20px;

    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 var(--uq-sf-gutter) var(--uq-sf-bottom-space);
    border-top: 1px solid var(--uq-sf-rule);
    background: #FFFFFF;
    color: var(--uq-sf-ink);
    font-family: var(--uq-sf-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.uq-site-footer *,
.uq-site-footer *::before,
.uq-site-footer *::after {
    box-sizing: border-box;
}

.uq-site-footer__container {
    width: 100%;
    max-width: var(--uq-sf-container);
    margin: 0 auto;
}

/* ---------- Shared type ---------- */

/* Element resets at (0,1,0) -- :where() adds nothing -- so each component's
   own class rule below still wins on source order, while style.css's global
   `p { margin: 0 0 20px }` (0,0,1) is beaten. */
.uq-site-footer :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.uq-site-footer :where(li) {
    margin: 0;
    padding: 0;
}

.uq-site-footer :where(p) {
    margin: 0;
}

/* Every link sets its own colour, weight and hover: the global `a` is ROD
   yellow at 600, and `a:hover` (0,1,1) would turn footer text yellow on white
   unless each hover rule here is (0,2,0). */
.uq-site-footer__link,
.uq-site-footer__cta,
.uq-site-footer__ai,
.uq-site-footer__legal-link,
.uq-site-footer__badge-link {
    text-decoration: none;
    transition: color 0.15s ease;
}

.uq-site-footer__link {
    display: inline-block;
    color: var(--uq-sf-link);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.uq-site-footer__link:hover,
.uq-site-footer__link:focus-visible,
.uq-site-footer__link[aria-current="page"],
.uq-site-footer__cta:hover,
.uq-site-footer__cta:focus-visible,
.uq-site-footer__ai:hover,
.uq-site-footer__ai:focus-visible,
.uq-site-footer__legal-link:hover,
.uq-site-footer__legal-link:focus-visible,
.uq-site-footer__badge-link:hover {
    color: var(--uq-sf-navy);
}

.uq-site-footer a:focus-visible,
.uq-site-footer button:focus-visible {
    outline: 2px solid var(--uq-sf-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

.uq-site-footer__arrow {
    display: inline-block;
    transition: transform 0.18s ease;
}

.uq-site-footer__cta:hover .uq-site-footer__arrow {
    transform: translateX(2px);
}

/* Under the Footer CTA band ONE rule divides the band from the links: the
   band's own bottom rule (style.css, .uq-footer-cta__layout, container width,
   like Quo's). The footer's top rule would sit directly on it and double the
   line, so the footer drops its own there. Pages without the band keep the
   footer's full-width top rule. */
body:has(.uq-footer-cta) .uq-site-footer {
    border-top: 0;
}

/* ---------- Link grid ---------- */

.uq-site-footer__grid {
    display: grid;
    grid-template-columns: var(--uq-sf-columns);
    column-gap: var(--uq-sf-gap);
    row-gap: 40px;
    align-items: start;
    padding: 64px 0 0;
}

/* Company, Services and Resources share a wrapper so phones can draw Quo's
   ruled accordion block around the three; on wider screens the wrapper steps
   out of the way and its columns are grid columns like Contact. */
.uq-site-footer__group {
    display: contents;
}

.uq-site-footer__column {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.uq-site-footer__heading {
    margin: 0 0 14px;
    color: var(--uq-sf-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

/* The phone disclosure button. Shown only below 768px, and only once
   js/site-footer.js has marked the footer. */
.uq-site-footer__toggle {
    display: none;
}

.uq-site-footer__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* ---------- Contact ---------- */

.uq-site-footer__address {
    margin: 0;
    color: var(--uq-sf-link);
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
}

.uq-site-footer__address-line {
    display: block;
}

/* Phone and email: the column's primary details, one step up from the
   address and the 24/7 line -- ink at 500, the same size. Hover is restated
   because this rule is later than the shared one. */
.uq-site-footer__column--contact .uq-site-footer__link {
    color: var(--uq-sf-ink);
    font-weight: 500;
}

.uq-site-footer__column--contact .uq-site-footer__link:hover,
.uq-site-footer__column--contact .uq-site-footer__link:focus-visible {
    color: var(--uq-sf-navy);
}

.uq-site-footer__hours {
    color: var(--uq-sf-subtle);
    font-size: 14px;
    line-height: 21px;
    text-wrap: balance;
}

.uq-site-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--uq-sf-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

/* ---------- Bottom bar ----------
   Row 1: payment and trust assets | social icons.
   Row 2, under a keyline: "Hey AI" | legal links and copyright. */

.uq-site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: var(--uq-sf-bottom-gap) 0 0;
}

.uq-site-footer__bottom-row {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
}

.uq-site-footer__bottom-row--meta {
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--uq-sf-rule);
}

/* Grows to fill its line, which pushes the icons to the right edge when the
   two share it; icons that wrap onto a line of their own start at the left. */
.uq-site-footer__assets {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
}

/* The shared icon row (css/social-links.css) placed here: centred on the
   payment marks' row, and pulled out by the circles' padding so the first
   and last marks' ink, not their hover circles, meet the edges. */
.uq-site-footer .uq-site-footer__socials {
    flex: 0 1 auto;
    margin: 0 var(--uq-social-inset) calc((var(--uq-sf-mark-row) - var(--uq-social-box)) / 2);
}

.uq-site-footer .uq-site-footer__socials:first-child {
    margin-left: auto;
}

/* The `global_payment` block: a label over the marks. */
.uq-site-footer__payment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--uq-sf-subtle);
    font-size: 13px;
    line-height: 18px;
}

.uq-site-footer__payment p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.uq-site-footer__payment strong,
.uq-site-footer__payment b,
.uq-site-footer__payment .uq-site-footer__payment-label {
    font-weight: 500;
}

/* Visa, Mastercard and Interac as one-colour vector marks, in the social
   icons' navy, on one centred row. Each viewBox is cropped to the mark's ink,
   so these sizes are the marks themselves, balanced by eye: Visa's wordmark
   is set shorter and Mastercard's solid circles a touch smaller than
   Interac's square, whose cut-out wordmark needs the height to stay legible,
   so the three carry the same weight. */
.uq-site-footer__payment-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px var(--uq-sf-mark-gap);
    min-height: var(--uq-sf-mark-row);
    color: var(--uq-sf-navy);
}

.uq-site-footer__payment-item {
    display: flex;
    align-items: center;
}

.uq-site-footer__payment-mark {
    display: block;
    flex: none;
    fill: currentColor;
}

.uq-site-footer__payment-mark--visa {
    width: 43.35px;
    height: 14px;
}

.uq-site-footer__payment-mark--mastercard {
    width: 32.36px;
    height: 20px;
}

.uq-site-footer__payment-mark--interac {
    width: 24px;
    height: 24px;
}

/* Field content other than the card strip, printed as entered. */
.uq-site-footer__payment img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 32px;
    margin: 0;
    border-radius: 0;
}

.uq-site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.uq-site-footer__badge-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--uq-sf-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.uq-site-footer .uq-site-footer__badge-img {
    display: block;
    width: auto;
    max-width: 140px;
    height: auto;
    max-height: 36px;
    border-radius: 0;
}

.uq-site-footer__ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--uq-sf-link);
    font-size: 16px;
    font-weight: 400;
    line-height: 20.8px;
}

/* Quo's four-point sparkle, as a mask so it follows the link colour. */
.uq-site-footer__ai-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: var(--uq-sf-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.5 4.2 3.8 7.5 8 8-4.2.5-7.5 3.8-8 8-.5-4.2-3.8-7.5-8-8 4.2-.5 7.5-3.8 8-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.5 4.2 3.8 7.5 8 8-4.2.5-7.5 3.8-8 8-.5-4.2-3.8-7.5-8-8 4.2-.5 7.5-3.8 8-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color 0.15s ease;
}

.uq-site-footer__ai:hover .uq-site-footer__ai-icon {
    background: var(--uq-sf-navy);
}

.uq-site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.uq-site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.uq-site-footer__legal-link,
.uq-site-footer__copyright {
    color: var(--uq-sf-legal);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.uq-site-footer__copyright {
    padding-left: 12px;
    border-left: 1px solid var(--uq-sf-rule-strong);
}

/* ---------- >= 1360: the back-to-top button clears the container ---------- */

@media (min-width: 1360px) {
    .uq-site-footer {
        --uq-sf-bottom-space: 40px;
    }
}

/* ---------- 992-1199 ----------
   Quo keeps its 100px gaps down to 992, where its link columns are 89px
   wide. 64px here keeps ROD's service names on one line for longer. */

@media (min-width: 992px) and (max-width: 1199px) {
    .uq-site-footer {
        --uq-sf-gap: 64px;
    }
}

/* ---------- 768-991 ---------- */

@media (max-width: 991px) {
    .uq-site-footer {
        --uq-sf-gutter: 40px;
        --uq-sf-gap: 40px;
    }

    .uq-site-footer__link,
    .uq-site-footer__address {
        font-size: 14px;
        line-height: 21px;
    }

    .uq-site-footer__ai {
        font-size: 14px;
        line-height: 18.2px;
    }

    /* The legal row no longer fits one line beside "Hey AI", and a wrapped
       copyright would start its line with the separator rule (Quo's own
       footer does exactly that at this width). Give it its own line. */
    .uq-site-footer__legal {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    .uq-site-footer__copyright {
        padding-left: 0;
        border-left: 0;
    }
}

/* ---------- < 768: one column, Quo's accordions ---------- */

@media (max-width: 767px) {
    .uq-site-footer {
        --uq-sf-gutter: 32px;
    }

    .uq-site-footer__grid {
        display: block;
        padding-top: 24px;
    }

    .uq-site-footer__heading {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 21px;
    }

    /* Quo's ruled block around the link lists, closed by a rule 16px under
       the last one and 32px off Contact. It now opens the footer, directly
       under the footer's own top rule or the CTA band's, so it draws no top
       rule of its own -- two parallel lines 32px apart otherwise. */
    .uq-site-footer__group {
        display: block;
        margin: 0 0 32px;
        padding: 0 0 16px;
        border-bottom: 1px solid var(--uq-sf-rule);
    }

    .uq-site-footer__column--collapsible + .uq-site-footer__column--collapsible {
        margin-top: 16px;
    }

    .uq-site-footer--js .uq-site-footer__column--collapsible {
        padding-bottom: 10px;
    }

    .uq-site-footer--js .uq-site-footer__column--collapsible + .uq-site-footer__column--collapsible {
        margin-top: 0;
    }

    .uq-site-footer--js .uq-site-footer__column--collapsible .uq-site-footer__heading {
        display: none;
    }

    .uq-site-footer--js .uq-site-footer__toggle {
        display: flex;
        width: 100%;
        min-height: 0;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin: 0;
        padding: 10px 0 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--uq-sf-ink);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: normal;
        line-height: 21px;
        text-align: left;
        text-transform: none;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .uq-site-footer__chevron {
        flex: 0 0 auto;
        width: 16px;
        height: 9px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='none'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='none'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform 0.2s ease;
    }

    .uq-site-footer__toggle[aria-expanded="true"] .uq-site-footer__chevron {
        transform: rotate(180deg);
    }

    .uq-site-footer--js .uq-site-footer__toggle[aria-expanded="false"] + .uq-site-footer__panel {
        display: none;
    }

    .uq-site-footer--js .uq-site-footer__panel {
        padding: 8px 0 6px;
    }

    /* Quo's phone layout: the assets with the social icons beside them when
       they fit and on their own line when they do not (Quo instead shrinks
       its icons to 9px to keep them beside); then the keyline, "Hey AI" and
       the legal block, each on its own line. */
    .uq-site-footer {
        --uq-sf-bottom-gap: 32px;
    }

    .uq-site-footer__bottom-row--meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .uq-site-footer__legal {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 14px;
    }

    .uq-site-footer__legal-links {
        gap: 12px 28px;
    }

    .uq-site-footer__copyright {
        padding-left: 0;
        border-left: 0;
    }

    .uq-site-footer__ai {
        font-size: 13px;
        line-height: 16.9px;
    }
}

@media (max-width: 479px) {
    .uq-site-footer {
        --uq-sf-gutter: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uq-site-footer *,
    .uq-site-footer *::before,
    .uq-site-footer *::after {
        transition-duration: 0.01ms !important;
    }
}