/* ==========================================================================
   Shared footer, every page of sumnerd.co.nz except Fine Day's.

   A horizontal strip of tiles, one per product or service with its icon,
   then the brand line beside the quick links and an email button, then
   the copyright bar. Loaded after the page's own stylesheet and built on
   the theme tokens every page defines (--bg, --card, --border, --text,
   --muted, --accent, --accent-rgb, --on-accent, --accent-hover), so the
   same markup looks right under home.css and under each app's app.css.

   Markup lives in each page; keep the copies identical apart from the
   optional .site-footer__note at the top (Tideline's LINZ notice,
   MousePhaser's disclaimer).
   ========================================================================== */
.site-footer {
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 48px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}
.site-footer__inner {
    max-width: 880px;
}

/* Page-specific notice above the strip (legal text, data credits). */
.site-footer__note {
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.site-footer__note p {
    margin: 0 0 10px;
}
.site-footer__note p:last-child {
    margin-bottom: 0;
}

/* The product strip: six tiles across, three across on a phone. */
.site-footer__strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}
@media (max-width: 767.98px) {
    .site-footer__strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}
.site-footer__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 14px;
    border-radius: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.site-footer__tile:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    color: var(--text);
    text-decoration: none;
}
.site-footer__tile img,
.site-footer__glyph {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    flex-shrink: 0;
}
.site-footer__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    font-size: 24px;
}

/* Brand on the left, the quick links and the email button on the right. */
.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px 32px;
    padding-bottom: 32px;
}
.site-footer__brand {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.site-footer__tagline {
    margin: 0;
    max-width: 34ch;
    font-size: 13px;
}
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    max-width: 480px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.site-footer a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-footer a:hover {
    color: var(--accent);
    text-decoration: none;
}
.site-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent) !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.3);
    transition: background 0.18s ease, transform 0.12s ease;
}
.site-footer__cta:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
}
.site-footer__cta i {
    transition: transform 0.15s ease;
}
.site-footer__cta:hover i {
    transform: translateX(3px);
}

/* Copyright bar. */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 20px 0 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}