/* =========================================================
   THE SITE FOOTER: one footer on every page (D-2440, founder, 11 Nov 2026:
   "footer design should be same across pages, screen sizes").
   Drawn by resources/views/layouts/inc/site-footer.blade.php and nothing else.
   This file holds only footer rules, so every page frame can load it.
   The rules below are the footer rules of footer1.css, copied as they were;
   footer1.css keeps its own copy (nothing is deleted, D-1940) and this file,
   loaded after it, is the one to change from now on.
   One difference from footer1.css (D-230, the one colour set): the retired crimson is not
   carried over. The heading underline is berry to magenta and a link turns white on hover.
   ========================================================= */

/* So the footer looks the same inside every page frame, whatever that frame resets. */
/* :where() keeps these weaker than every footer rule below. */
:where(.footer), :where(.footer) * { box-sizing: border-box; }
:where(.footer) h3, :where(.footer) p, :where(.footer) ul { margin: 0; padding: 0; }
:where(.footer) a { text-decoration: none; }
:where(.footer) img { max-width: none; }

/* --- Footer Main --- */
.footer {
    background: #1A1A2E;
    padding: 28px 64px 0;
    color: #ffffff;
    border: none;
    outline: none;
    box-shadow: none;
    display: block;
}

/* --- Footer Columns Grid --- */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 24px;
}

.footer-column {
    display: block;
}

/* --- Column Headers --- */
.main-footer-header {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 8px;
    position: relative;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

.main-footer-header:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, #7B1246, #AB2379);
    border-radius: 1px;
}

/* --- Column Links --- */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin: 0 0 6px;
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.footer-column ul li a:hover {
    color: #ffffff;
}

/* --- Bottom Bar --- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 16px;
}

.footer-bottom-logo {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.footer-bottom-copy {
    flex: 1;
    text-align: center;
}

.footer-bottom-copy p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom-copy a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 11px;
    transition: color 0.2s ease;
}

.footer-bottom-copy a:hover {
    color: #ffffff;
}

.footer-divider {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 8px;
}

.footer-bottom-social {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.footer-bottom-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.footer-bottom-social a:hover {
    opacity: 1;
}

.footer-bottom-social img {
    height: 18px;
    width: auto;
    display: block;
}

/* --- Tablet: 2-column grid --- */
@media (max-width: 1024px) {
    .footer {
        padding: 24px 32px 0;
    }

    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* --- Mobile: single column, centered --- */
@media (max-width: 768px) {
    .footer {
        padding: 20px 20px 0;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .main-footer-header {
        text-align: center;
        font-size: 13px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .main-footer-header:after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-column ul {
        text-align: center;
    }

    .footer-column ul li {
        margin: 0 0 5px;
    }

    .footer-column ul li a {
        font-size: 12px;
        display: inline-block;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        padding: 12px 0;
        gap: 10px;
    }

    .footer-bottom-logo {
        height: 24px;
    }

    .footer-bottom-copy p {
        font-size: 10px;
    }

    .footer-bottom-copy a {
        font-size: 10px;
    }

    .footer-bottom-social {
        justify-content: center;
        gap: 12px;
    }

    .footer-bottom-social img {
        height: 16px;
    }
}

/* --- Small mobile --- */
@media (max-width: 375px) {
    .footer {
        padding: 16px 14px 0;
    }
}

/* ===== D-2262 (founder, 11 Nov 2026): "keep footer dark the way it is but make is small with drop down as we did on
   home page". On a phone each link group is a fold-out row and the bottom is compact. On a computer nothing changes:
   the fold-out's own label is not drawn and the group is always open. Same colours, links and words. Earlier rules
   above are kept. ===== */
.footer .footer-group > summary { display: none; }
@media (max-width: 768px) {
    .footer { padding: 6px 20px 18px; }
    .footer .footer-columns { display: block; padding: 0; text-align: left; }
    .footer .footer-column > .main-footer-header { display: none; }
    .footer .footer-group { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .footer .footer-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: #ffffff; font-size: 15px; font-weight: 600; line-height: 1.2; }
    .footer .footer-group > summary::-webkit-details-marker { display: none; }
    .footer .footer-group > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid rgba(255, 255, 255, 0.7); border-bottom: 1.5px solid rgba(255, 255, 255, 0.7); transform: rotate(45deg); margin-right: 4px; transition: transform 0.2s ease; }
    .footer .footer-group[open] > summary::after { transform: rotate(-135deg); }
    .footer .footer-group > summary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
    .footer .footer-group ul { text-align: left; padding: 0 0 10px; }
    .footer .footer-group ul li { display: block; margin: 0; padding: 0; }
    .footer .footer-group ul li::before, .footer .footer-group ul li::after { content: none; display: none; }
    .footer .footer-group ul li a { display: flex; align-items: center; min-height: 40px; font-size: 14.5px; line-height: 1.3; }
    .footer .footer-bottom { align-items: flex-start; text-align: left; margin-top: 14px; padding: 0; border-top: 0; gap: 10px; }
    .footer .footer-bottom-logo { height: auto; width: 132px; }
    .footer .footer-bottom-copy { text-align: left; }
    .footer .footer-bottom-copy p, .footer .footer-bottom-copy a { font-size: 13px; }
    .footer .footer-bottom-social { justify-content: flex-start; gap: 14px; }
}


/* D-2440: the company line under the copyright line, with the maple mark. */
.footer .footer-bottom-canada { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: rgba(255, 255, 255, 0.75); font-size: 12px; line-height: 1.4; }
.footer .footer-bottom-canada svg { width: 13px; height: 13px; color: #AB2379; flex-shrink: 0; }
@media (max-width: 768px) { .footer .footer-bottom-canada { font-size: 13px; } }

/* ===== D-2810 (founder, 12 Nov 2026, "All A" to ten questions).
   4A: the footer is set in Inter on every page, so its letters look exactly the same everywhere (until then each page's
   own font showed through: Inter on most pages, Roboto on Contact and job search). The footer's own Blade file loads Inter.
   8A: on a phone the chat bubble (44 px, 12 px from the bottom) sat over the end of the footer's last row; the footer now
   ends with room for it. The rules above are kept. ===== */
.footer, .footer * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
@media (max-width: 768px) {
    .footer { padding-bottom: 80px; }
}