/* Jesus Choice Matrimonial — site footer.
   Split out of the layout so it does not have to be parsed before the page
   above it can paint. Loaded asynchronously on every page. */
/* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
    footer.site-footer {
        background: var(--navy-deep); color: rgba(255,255,255,0.72);
        position: relative; z-index: 1; overflow: hidden;
    }
    footer.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
    .footer-dove { position: absolute; right: -60px; bottom: -40px; width: 420px; height: auto; opacity: .06; pointer-events: none; }
    .footer-grid {
        max-width: 1320px; margin: 0 auto; padding: 72px 24px 48px;
        display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 48px;
        position: relative;
    }
    @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; padding-top: 56px; } }
    @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

    /* The 18px used to come from the alternate-name line that sat here. */
    .footer-brand img { height: 44px; width: auto; margin-bottom: 18px; }
    .footer-brand p { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.62); max-width: 300px; }
    .footer-social { display: flex; gap: 10px; margin-top: 22px; }
    .footer-social a {
        width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16);
        display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75);
        text-decoration: none; font-size: 14px; transition: all .2s;
    }
    .footer-social a:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-2px); }
    .app-badges { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
    .app-badge {
        display: inline-flex; align-items: center; gap: 12px; max-width: 200px;
        background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
        padding: 9px 16px; text-decoration: none; color: #fff; transition: all .2s;
    }
    .app-badge:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
    .app-badge i { font-size: 22px; }
    .app-badge-text small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
    .app-badge-text strong { display: block; font-size: 14px; font-weight: 700; }

    .footer-col h4, .footer-col .footer-h { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 18px; letter-spacing: .01em; }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 11px; }
    .footer-col ul li a { color: rgba(255,255,255,0.68); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; transition: color .2s, padding-left .2s; }
    .footer-col ul li a:hover { color: #fff; padding-left: 4px; }
    .footer-col ul li a i { width: 14px; color: var(--gold-light); font-size: 12px; }

    /* Site-wide links to the rite / diocese landing pages (internal linking for SEO). */
    .footer-seo { max-width: 1320px; margin: 0 auto; padding: 0 24px 34px; position: relative; display: flex; flex-direction: column; gap: 10px; }
    /* The links are printed with no whitespace between them and each one is
       nowrap, so inline layout had no break opportunity and the whole row of
       dioceses ran off the right edge. Laying the row out as a wrapping flex
       line gives every link its own break point. */
    .footer-seo p {
        font-size: 12.5px; line-height: 1.9; color: rgba(255,255,255,0.5); margin: 0;
        display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px;
        min-width: 0;
    }
    .footer-seo strong { color: rgba(255,255,255,0.78); font-weight: 700; margin-right: 8px; }
    .footer-seo a { color: rgba(255,255,255,0.62); text-decoration: none; white-space: nowrap; }
    .footer-seo a:hover { color: #fff; text-decoration: underline; }
    /* The separator trails its own link rather than leading the next, so a
       wrapped line never begins with a stray dot. */
    .footer-seo a:not(:last-child)::after {
        content: '·'; margin: 0 8px; color: rgba(255,255,255,0.28);
        text-decoration: none; display: inline-block; pointer-events: none;
    }

    .footer-bottom {
        border-top: 1px solid rgba(255,255,255,0.10);
        position: relative;
    }
    .footer-bottom-inner {
        max-width: 1320px; margin: 0 auto; padding: 22px 24px;
        display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
        font-size: 13px; color: rgba(255,255,255,0.5);
    }
    .footer-bottom a { color: rgba(255,255,255,0.68); text-decoration: none; }
    .footer-bottom a:hover { color: #fff; }
    .footer-legal a + a::before { content: '·'; margin: 0 10px; color: rgba(255,255,255,0.3); }
    .footer-credit { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .03em; }
    .footer-credit img { height: 20px; width: auto; opacity: .85; }