/* footer.css | MyUncleJoe | Site footer, Option A: columns (Paul, Nov 9) */
/* Loads on every page, right after main.css (see _layout.php).             */
/* The older footer rules in main.css are left in place; the rules below    */
/* take over for .site-footer--cols.                                        */

/* ── FOOTER SHELL ────────────────────────────────────────────────────────── */
.site-footer--cols {
    padding: var(--space-10) 0 var(--space-6);
    margin-top: var(--space-12);
}

/* main.css gives every footer .container a 4-column grid, a divider line
   and bottom padding. Turn those off here; the rows below handle layout. */
.site-footer--cols .container {
    display: block;
    border: 0;
    padding-bottom: 0;
}

/* ── TOP ROW: brand left, link columns right ─────────────────────────────── */
.footer-top {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: clamp(40px, 6vw, 96px);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer--cols .footer-brand__logo {
    margin-bottom: var(--space-3);
}

/* Tagline: plain (not italic), a little brighter than before */
.site-footer--cols .footer-brand__tagline {
    font-style: normal;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
}

/* ── LINK COLUMNS (Services, Learn) ──────────────────────────────────────── */
.footer-nav__title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 var(--space-3);
}

.footer-nav__link {
    display: block;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 5px 0;
}

.footer-nav__link:hover {
    color: var(--color-teal);
}

/* ── BOTTOM ROW: copyright left, Privacy and Terms right ─────────────────── */
.footer-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-5);
}

.footer-base__copy {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

/* Yellow Moon Software link: brighter than the copyright, no underline (Paul) */
.footer-base__ym {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.footer-base__ym:hover {
    color: var(--color-teal);
}

.footer-base__legal {
    display: flex;
    gap: var(--space-5);
}

.footer-base__legal a {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.footer-base__legal a:hover {
    color: var(--color-teal);
}

/* ── PHONES (768px and under) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-footer--cols {
        padding: var(--space-8) 0 var(--space-6);
    }

    /* Brand on its own row, then Services and Learn side by side */
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6) var(--space-5);
        padding-bottom: var(--space-6);
    }

    .footer-top .footer-brand {
        grid-column: 1 / -1;
    }

    /* Copyright, then Privacy and Terms underneath, all left-aligned */
    .footer-base {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}