/* SchoolCMS – Footer (template-parts/footer/)
   Innermedia base styling, simplified from the Rikkyo build: a black
   footer – brand / contact + socials / quick links columns, centred on
   mobile and ranged left from 992px – over a hairline legal bar.
   Content comes from Theme Settings. No map – the Google Map component
   belongs to the Google Map block only. */

.site-footer {
    background: var(--color-black);
    color:      var(--color-white);

    /* Underline always present but transparent, so the hover reveal
       fades (text-decoration itself can't transition) – from Rikkyo */
    a:not(.socialLink) {
        color:                 var(--color-white);
        text-decoration:       underline;
        text-decoration-color: transparent;
        text-underline-offset: 3px;
        transition:            text-decoration-color var(--transition-base);

        &:hover {
            text-decoration-color: currentColor;
        }
    }

    .footerMain {
        padding: var(--space-2xl) 0 var(--space-xl);

        /* Columns stack centred on mobile, three across ranged left
           from 992px (the markup's col-lg split) */
        .row {
            row-gap:    var(--space-xl);
            text-align: center;

            @media (min-width: 992px) {
                row-gap:    0;
                text-align: left;
            }
        }
    }

    .footerBrand {
        img {
            max-width: 180px;
            margin:    0 auto;

            @media (min-width: 992px) {
                margin: 0;
            }
        }

        .site-title {
            font: var(--text-24ob);
        }
    }

    .footerHeading {
        font:   var(--text-20ob);
        color:  var(--color-orange);
        margin: 0 0 var(--space-md);
    }

    .footerAddress {
        font-style:    normal;
        margin-bottom: var(--space-sm);
    }

    .footerPhone,
    .footerEmail {
        margin-bottom: var(--space-xs);
    }

    .footerSocials {
        display:         flex;
        justify-content: center;
        gap:             var(--space-sm);
        margin-top:      var(--space-md);

        @media (min-width: 992px) {
            justify-content: flex-start;
        }

        .socialLink {
            display:         flex;
            align-items:     center;
            justify-content: center;
            width:           40px;
            height:          40px;
            border:          1px solid rgba(255, 255, 255, 0.25);
            border-radius:   50%;
            color:           var(--color-white);
            font-size:       18px;
            text-decoration: none;
            transition:      background var(--transition-base), border-color var(--transition-base);

            &:hover {
                background:   var(--color-orange);
                border-color: var(--color-orange);
            }
        }
    }

    .quickLinks ul {
        list-style: none;
        margin:     0;
        padding:    0;

        li {
            margin-bottom: var(--space-sm);
        }
    }

    .footerBottom {
        padding:    var(--space-md) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        font:       var(--text-14or);
        color:      var(--color-cream);

        .row {
            row-gap: var(--space-sm);
        }

        p {
            margin: 0;
        }

        a:not(.socialLink) {
            color: var(--color-cream);
        }

        .legalBar {
            display:         flex;
            flex-wrap:       wrap;
            align-items:     center;
            justify-content: center;
            gap:             var(--space-sm) var(--space-md);

            @media (min-width: 992px) {
                justify-content: flex-start;
            }
        }

        .credits {
            text-align: center;

            @media (min-width: 992px) {
                text-align: right;
            }
        }
    }
}