/* ==========================================================================
   FOOTER MOBILE OVERRIDE — loaded AFTER styles.css.

   Mobile layout (≤900px):
   - Brand block (logo+tagline image, contact, socials) full width on top
   - EduGrowth badge absolute-positioned in the top-right gap of brand block
   - Three groups stacked in HTML order: PLATFORM → COMPANY → LEGAL
     Each group: heading on its own line in CAPS, links on next line with •
   - Copyright row at the bottom

   Desktop (>900px): unchanged — badge stays inside Legal column where it was.
   ========================================================================== */

@media (max-width: 900px) {
    .footer {
        padding: 56px 0 28px !important;
    }
    .footer-top {
        display: block !important;
        padding-bottom: 28px !important;
        position: relative !important;
    }
    .footer-brand {
        display: block !important;
        width: 100% !important;
        margin: 0 0 28px 0 !important;
    }
    .footer-brand-img {
        height: auto !important;
        max-height: 70px !important;
        width: auto !important;
        max-width: 220px !important;
        margin-bottom: 18px !important;
    }

    /* EduGrowth badge — absolute positioned in the top-right of .footer-top.
       Lives inside Legal column in HTML (desktop layout unchanged); on mobile
       we lift it out via absolute positioning relative to .footer-top.
       Adjust top/right/width to reposition. */
    .footer-edugrowth {
        position: absolute !important;
        top: 120px !important;
        right: 40px !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 80px !important;
        max-width: 80px !important;
        z-index: 2 !important;
    }
    .footer-edugrowth img {
        max-width: 100% !important;
        height: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* Each nav column = its own block on mobile, stacked in source order:
       PLATFORM → COMPANY → LEGAL. Generous gap between groups so the link
       row above doesn't butt up against the next heading. */
    .footer-col,
    .footer-col:nth-of-type(1),
    .footer-col:nth-of-type(2),
    .footer-col:nth-of-type(3) {
        display: block !important;
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
    }
    .footer-col:last-of-type,
    .footer-col:nth-of-type(3) {
        margin-bottom: 24px !important;
    }

    /* Headings on their own line, in CAPS, cyan. */
    .footer-col h5,
    .footer-col:nth-of-type(1) h5,
    .footer-col:nth-of-type(2) h5,
    .footer-col:nth-of-type(3) h5 {
        display: block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--cyan, #00FFFF) !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        line-height: 1.4 !important;
    }
    .footer-col h5::after,
    .footer-col:nth-of-type(1) h5::after,
    .footer-col:nth-of-type(2) h5::after,
    .footer-col:nth-of-type(3) h5::after {
        content: none !important;
    }

    /* The ul = the link row underneath the heading. */
    .footer-col ul,
    .footer-col:nth-of-type(1) ul,
    .footer-col:nth-of-type(2) ul,
    .footer-col:nth-of-type(3) ul {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        line-height: 1.9 !important;
    }
    /* Each <li> sits inline-block with a non-wrapping link inside, so
       multi-word link text ("Start Looping", "How to Loop", "Privacy Policy",
       "Terms of Use", "Refund Policy") never breaks mid-link. The row wraps
       at the <li> boundary if needed. */
    .footer-col li,
    .footer-col:nth-of-type(1) li,
    .footer-col:nth-of-type(2) li,
    .footer-col:nth-of-type(3) li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }
    .footer-col a,
    .footer-col:nth-of-type(1) a,
    .footer-col:nth-of-type(2) a,
    .footer-col:nth-of-type(3) a {
        font-size: 13px !important;
        color: var(--gray-300) !important;
        white-space: nowrap !important;
    }

    /* Kill any old separator pseudo-elements from styles.css */
    .footer-col:nth-of-type(3) ul::before {
        content: none !important;
    }

    /* Bullet separator between links. Tight spacing so all 5 Platform links
       (Home • ILMs • How to Loop • Start Looping • FAQs) fit on one row. */
    .footer-col li:not(:last-child)::after,
    .footer-col:nth-of-type(1) li:not(:last-child)::after,
    .footer-col:nth-of-type(2) li:not(:last-child)::after,
    .footer-col:nth-of-type(3) li:not(:last-child)::after {
        content: "•" !important;
        display: inline-block !important;
        margin: 0 4px !important;
        color: var(--gray-600) !important;
        font-weight: 700 !important;
        vertical-align: baseline !important;
    }
    /* Last link in each row — no trailing bullet. */
    .footer-col:nth-of-type(1) li:last-child::after,
    .footer-col:nth-of-type(2) li:last-child::after,
    .footer-col:nth-of-type(3) li:last-child::after {
        content: none !important;
    }

    .footer-bottom {
        padding-top: 24px !important;
        margin-top: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 16px !important;
        flex-wrap: nowrap !important;
    }
    /* Left side: stacked copyright lines */
    .footer-bottom-left {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .footer-bottom-left > div {
        line-height: 1.5 !important;
    }
    /* Right side: ACN/ABN stacked vertically, left-aligned so both rows
       start at the same point on the left edge of the right column. */
    .footer-bottom .meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .footer-bottom .meta span {
        line-height: 1.5 !important;
    }

    /* Stay-in-the-Loop lede — body size on mobile. */
    .stay-in-loop-lede {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 600px) {
    .footer-col a,
    .footer-col:nth-of-type(1) a,
    .footer-col:nth-of-type(2) a,
    .footer-col:nth-of-type(3) a {
        font-size: 14px !important;
    }
    .footer-col h5,
    .footer-col:nth-of-type(1) h5,
    .footer-col:nth-of-type(2) h5,
    .footer-col:nth-of-type(3) h5 {
        font-size: 12px !important;
    }
    .footer-col li:not(:last-child)::after,
    .footer-col:nth-of-type(1) li:not(:last-child)::after,
    .footer-col:nth-of-type(2) li:not(:last-child)::after,
    .footer-col:nth-of-type(3) li:not(:last-child)::after {
        margin: 0 3px !important;
    }
    .footer-edugrowth {
        width: 70px !important;
        max-width: 70px !important;
    }
    /* Smaller text on tiny screens but keep the split layout */
    .footer-bottom {
        font-size: 11px !important;
        gap: 12px !important;
    }
}