@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Footer Component
   =====================================================================

   File:
   assets/css/components/footer.css

   Phase:
   Phase 6 - Component CSS

   Purpose:
   - Style the global public website footer
   - Present platform identity and description
   - Present organised footer navigation groups
   - Present assessment/service/support links
   - Present partnership and counselling links
   - Present social-media links
   - Present legal/copyright information
   - Present assessment-use disclaimer
   - Support disabled/unavailable links
   - Support responsive layouts
   - Provide print-safe presentation

   Dependencies:
   - assets/css/style.css
   - assets/css/website.css
   - assets/css/responsive.css

   Component markup will later be rendered by:
   website/components/footer.php
   ===================================================================== */


/* =====================================================================
   1. FOOTER ROOT
   ===================================================================== */

.footer {
    position: relative;

    width: 100%;

    margin-top: auto;

    color:
        rgb(255 255 255 / 0.78);

    background-color:
        var(--color-primary-900);

    border-top:
        var(--border-width)
        solid
        rgb(255 255 255 / 0.08);
}


/* =====================================================================
   2. MAIN FOOTER AREA
   ===================================================================== */

.footer__main {
    padding-block:
        clamp(
            3.5rem,
            7vw,
            5.5rem
        );
}


/* =====================================================================
   3. MAIN GRID
   ===================================================================== */

.footer__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap:
        var(--space-10);
}


/* =====================================================================
   4. BRAND COLUMN
   ===================================================================== */

.footer__brand {
    min-width: 0;
}


/* =====================================================================
   5. LOGO LINK
   ===================================================================== */

.footer__brand-link {
    display: inline-flex;
    align-items: center;

    max-width: 13rem;

    margin-bottom:
        var(--space-5);

    color:
        var(--color-white);

    text-decoration: none;
}


.footer__brand-link:hover {
    color:
        var(--color-white);

    text-decoration: none;
}


.footer__brand-link:focus-visible {
    outline:
        3px
        solid
        rgb(255 255 255 / 0.38);

    outline-offset:
        4px;

    border-radius:
        var(--radius-sm);
}


/* =====================================================================
   6. LOGO
   ===================================================================== */

.footer__logo {
    display: block;

    width: auto;
    max-width: 100%;
    height: 3rem;

    object-fit: contain;
}


/* =====================================================================
   7. PLATFORM NAME / DESCRIPTOR
   ===================================================================== */

.footer__brand-title {
    max-width: 28rem;

    margin:
        0
        0
        var(--space-3);

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-weight-bold);

    line-height:
        var(--line-height-snug);

    color:
        var(--color-white);
}


/* =====================================================================
   8. BRAND DESCRIPTION
   ===================================================================== */

.footer__description {
    max-width: 31rem;

    margin: 0;

    font-size:
        var(--font-size-sm);

    line-height:
        var(--line-height-relaxed);

    color:
        rgb(255 255 255 / 0.72);
}


/* =====================================================================
   9. FOOTER NAVIGATION AREA
   ===================================================================== */

.footer__navigation {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-8)
        var(--space-6);

    min-width: 0;
}


/* =====================================================================
   10. FOOTER COLUMN
   ===================================================================== */

.footer__column {
    min-width: 0;
}


/* =====================================================================
   11. COLUMN TITLE
   ===================================================================== */

.footer__heading {
    margin:
        0
        0
        var(--space-4);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.3;

    letter-spacing:
        var(--letter-spacing-wide);

    color:
        var(--color-white);
}


/* =====================================================================
   12. FOOTER LINK LIST
   ===================================================================== */

.footer__links {
    display: flex;
    flex-direction: column;

    gap:
        var(--space-2);

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =====================================================================
   13. FOOTER LINK ITEM
   ===================================================================== */

.footer__item {
    min-width: 0;
}


/* =====================================================================
   14. FOOTER LINK
   ===================================================================== */

.footer__link {
    display: inline-flex;
    align-items: flex-start;

    gap:
        var(--space-2);

    max-width: 100%;

    padding-block:
        0.2rem;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-normal);

    line-height:
        1.5;

    color:
        rgb(255 255 255 / 0.72);

    text-decoration: none;

    overflow-wrap:
        anywhere;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.footer__link:hover {
    color:
        var(--color-white);

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        0.18em;
}


.footer__link:focus-visible {
    color:
        var(--color-white);

    outline:
        2px
        solid
        rgb(255 255 255 / 0.52);

    outline-offset:
        3px;

    border-radius:
        var(--radius-xs);
}


/* =====================================================================
   15. LINK ICON
   ===================================================================== */

.footer__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0 0 auto;

    width:
        1rem;
    height:
        1rem;

    margin-top:
        0.16rem;

    color:
        rgb(255 255 255 / 0.62);
}


.footer__link-icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   16. DISABLED / UNAVAILABLE LINK
   =====================================================================

   Useful for footer destinations that are part of the established
   information architecture but whose route has not yet been built.
   ===================================================================== */

.footer__link.is-disabled,
.footer__link[aria-disabled="true"] {
    color:
        rgb(255 255 255 / 0.38);

    text-decoration:
        none;

    cursor:
        not-allowed;

    pointer-events:
        none;
}


/* =====================================================================
   17. OPTIONAL "COMING SOON" LABEL
   ===================================================================== */

.footer__status {
    display: inline-flex;
    align-items: center;

    margin-left:
        var(--space-1);

    padding:
        0.12rem
        0.35rem;

    font-size:
        0.62rem;

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1;

    letter-spacing:
        var(--letter-spacing-wide);

    text-transform:
        uppercase;

    color:
        rgb(255 255 255 / 0.7);

    background-color:
        rgb(255 255 255 / 0.08);

    border:
        1px
        solid
        rgb(255 255 255 / 0.12);

    border-radius:
        var(--radius-pill);
}


/* =====================================================================
   18. SOCIAL SECTION
   ===================================================================== */

.footer__social {
    margin-top:
        var(--space-6);
}


/* =====================================================================
   19. SOCIAL TITLE
   ===================================================================== */

.footer__social-title {
    margin:
        0
        0
        var(--space-3);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

    color:
        var(--color-white);
}


/* =====================================================================
   20. SOCIAL LIST
   ===================================================================== */

.footer__social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        var(--space-2);

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =====================================================================
   21. SOCIAL LINK
   ===================================================================== */

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        2.5rem;
    height:
        2.5rem;

    color:
        rgb(255 255 255 / 0.76);

    background-color:
        rgb(255 255 255 / 0.07);

    border:
        1px
        solid
        rgb(255 255 255 / 0.10);

    border-radius:
        var(--radius-md);

    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.footer__social-link:hover {
    color:
        var(--color-white);

    background-color:
        rgb(255 255 255 / 0.13);

    border-color:
        rgb(255 255 255 / 0.18);

    text-decoration:
        none;

    transform:
        translateY(-2px);
}


.footer__social-link:focus-visible {
    outline:
        3px
        solid
        rgb(255 255 255 / 0.42);

    outline-offset:
        2px;
}


/* =====================================================================
   22. SOCIAL ICON
   ===================================================================== */

.footer__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        1.1rem;
    height:
        1.1rem;
}


.footer__social-icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   23. ASSESSMENT DISCLAIMER AREA
   ===================================================================== */

.footer__disclaimer {
    padding-block:
        var(--space-6);

    border-top:
        1px
        solid
        rgb(255 255 255 / 0.10);
}


/* =====================================================================
   24. DISCLAIMER CONTENT
   ===================================================================== */

.footer__disclaimer-inner {
    display: flex;
    align-items: flex-start;

    gap:
        var(--space-3);

    max-width:
        70rem;
}


/* =====================================================================
   25. DISCLAIMER ICON
   ===================================================================== */

.footer__disclaimer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0 0 auto;

    width:
        1.15rem;
    height:
        1.15rem;

    margin-top:
        0.15rem;

    color:
        rgb(255 255 255 / 0.62);
}


.footer__disclaimer-icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   26. DISCLAIMER TEXT
   ===================================================================== */

.footer__disclaimer-text {
    margin: 0;

    font-size:
        var(--font-size-xs);

    line-height:
        var(--line-height-relaxed);

    color:
        rgb(255 255 255 / 0.60);
}


/* =====================================================================
   27. BOTTOM BAR
   ===================================================================== */

.footer__bottom {
    padding-block:
        var(--space-5);

    background-color:
        rgb(0 0 0 / 0.14);

    border-top:
        1px
        solid
        rgb(255 255 255 / 0.08);
}


/* =====================================================================
   28. BOTTOM INNER
   ===================================================================== */

.footer__bottom-inner {
    display: flex;
    flex-direction: column;

    gap:
        var(--space-3);
}


/* =====================================================================
   29. COPYRIGHT
   ===================================================================== */

.footer__copyright {
    margin: 0;

    font-size:
        var(--font-size-xs);

    line-height:
        1.5;

    color:
        rgb(255 255 255 / 0.62);
}


/* =====================================================================
   30. PLATFORM CREDIT
   ===================================================================== */

.footer__platform {
    margin: 0;

    font-size:
        var(--font-size-xs);

    line-height:
        1.5;

    color:
        rgb(255 255 255 / 0.62);
}


.footer__platform-name {
    font-weight:
        var(--font-weight-semibold);

    color:
        rgb(255 255 255 / 0.84);
}


/* =====================================================================
   31. BOTTOM LEGAL LINKS
   ===================================================================== */

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        var(--space-2)
        var(--space-4);

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =====================================================================
   32. LEGAL LINK
   ===================================================================== */

.footer__legal-link {
    font-size:
        var(--font-size-xs);

    color:
        rgb(255 255 255 / 0.62);

    text-decoration:
        none;
}


.footer__legal-link:hover {
    color:
        var(--color-white);

    text-decoration:
        underline;

    text-underline-offset:
        0.16em;
}


.footer__legal-link:focus-visible {
    color:
        var(--color-white);

    outline:
        2px
        solid
        rgb(255 255 255 / 0.48);

    outline-offset:
        2px;

    border-radius:
        var(--radius-xs);
}


/* =====================================================================
   33. OPTIONAL CONTACT INFORMATION
   ===================================================================== */

.footer__contact {
    display: flex;
    flex-direction: column;

    gap:
        var(--space-2);
}


.footer__contact-item {
    display: flex;
    align-items: flex-start;

    gap:
        var(--space-2);

    font-size:
        var(--font-size-sm);

    line-height:
        1.5;

    color:
        rgb(255 255 255 / 0.72);
}


/* =====================================================================
   34. OPTIONAL FOOTER CTA
   ===================================================================== */

.footer__cta {
    margin-top:
        var(--space-6);

    padding:
        var(--space-5);

    background-color:
        rgb(255 255 255 / 0.06);

    border:
        1px
        solid
        rgb(255 255 255 / 0.10);

    border-radius:
        var(--radius-lg);
}


.footer__cta-title {
    margin:
        0
        0
        var(--space-2);

    font-size:
        var(--font-size-base);

    font-weight:
        var(--font-weight-semibold);

    color:
        var(--color-white);
}


.footer__cta-text {
    margin:
        0
        0
        var(--space-4);

    font-size:
        var(--font-size-sm);

    line-height:
        var(--line-height-relaxed);

    color:
        rgb(255 255 255 / 0.70);
}


/* =====================================================================
   35. LONG CONTENT SAFETY
   ===================================================================== */

.footer__brand-title,
.footer__description,
.footer__heading,
.footer__link,
.footer__disclaimer-text,
.footer__copyright,
.footer__platform {
    overflow-wrap:
        anywhere;
}


/* =====================================================================
   36. TABLET
   ===================================================================== */

@media
    (min-width: 48rem)
    and
    (max-width: 63.9375rem) {

    .footer__grid {
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr);

        gap:
            var(--space-10);
    }


    .footer__navigation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            var(--space-8)
            var(--space-6);
    }


    .footer__brand-link {
        max-width:
            11rem;
    }


    .footer__logo {
        height:
            2.75rem;
    }
}


/* =====================================================================
   37. DESKTOP
   ===================================================================== */

@media (min-width: 64rem) {

    .footer__grid {
        grid-template-columns:
            minmax(15rem, 1.05fr)
            minmax(0, 2fr);

        gap:
            var(--space-16);
    }


    .footer__navigation {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            var(--space-10)
            var(--space-8);
    }


    .footer__bottom-inner {
        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            var(--space-6);
    }
}


/* =====================================================================
   38. LARGE DESKTOP
   ===================================================================== */

@media (min-width: 80rem) {

    .footer__grid {
        grid-template-columns:
            minmax(18rem, 1fr)
            minmax(0, 2.35fr);

        gap:
            var(--space-20);
    }


    .footer__navigation {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        gap:
            var(--space-8);
    }
}


/* =====================================================================
   39. MOBILE
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .footer__main {
        padding-block:
            var(--space-12);
    }


    .footer__grid {
        gap:
            var(--space-10);
    }


    .footer__navigation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            var(--space-8)
            var(--space-5);
    }


    .footer__brand-link {
        max-width:
            11rem;
    }


    .footer__logo {
        height:
            2.75rem;
    }


    .footer__description {
        max-width:
            none;
    }


    .footer__disclaimer-inner {
        gap:
            var(--space-2);
    }
}


/* =====================================================================
   40. SMALL MOBILE
   ===================================================================== */

@media (max-width: 30rem) {

    .footer__navigation {
        grid-template-columns:
            1fr;

        gap:
            var(--space-8);
    }


    .footer__main {
        padding-block:
            var(--space-10);
    }


    .footer__social-link {
        width:
            2.75rem;
        height:
            2.75rem;
    }


    .footer__bottom {
        padding-block:
            var(--space-4);
    }
}


/* =====================================================================
   41. VERY SMALL MOBILE
   ===================================================================== */

@media (max-width: 23.9375rem) {

    .footer__brand-title {
        font-size:
            var(--font-size-base);
    }


    .footer__description,
    .footer__link {
        font-size:
            var(--font-size-xs);
    }


    .footer__disclaimer {
        padding-block:
            var(--space-5);
    }
}


/* =====================================================================
   42. HOVER-CAPABLE DEVICES
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

    .footer__link:hover {
        transform:
            translateX(2px);
    }
}


/* =====================================================================
   43. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .footer__link,
    .footer__social-link {
        transition:
            none;
    }


    .footer__link:hover,
    .footer__social-link:hover {
        transform:
            none;
    }
}


/* =====================================================================
   44. FORCED COLOURS / HIGH CONTRAST
   ===================================================================== */

@media (forced-colors: active) {

    .footer {
        color:
            CanvasText;

        background:
            Canvas;

        border-top-color:
            CanvasText;
    }


    .footer__brand-title,
    .footer__heading,
    .footer__social-title,
    .footer__link,
    .footer__legal-link,
    .footer__copyright,
    .footer__platform,
    .footer__description,
    .footer__disclaimer-text {
        color:
            CanvasText;
    }


    .footer__social-link,
    .footer__cta {
        border-color:
            CanvasText;
    }


    .footer__link:focus-visible,
    .footer__social-link:focus-visible,
    .footer__legal-link:focus-visible {
        outline-color:
            Highlight;
    }
}


/* =====================================================================
   45. PRINT
   ===================================================================== */

@media print {

    .footer {
        margin-top:
            10mm !important;

        color:
            #000000 !important;

        background:
            #ffffff !important;

        border-top:
            1px
            solid
            #bfbfbf !important;
    }


    .footer__main {
        display:
            none !important;
    }


    .footer__navigation,
    .footer__social,
    .footer__cta {
        display:
            none !important;
    }


    .footer__disclaimer {
        display:
            block !important;

        padding:
            5mm
            0 !important;

        border-top:
            0 !important;
    }


    .footer__disclaimer-icon {
        display:
            none !important;
    }


    .footer__disclaimer-text {
        color:
            #444444 !important;

        font-size:
            8pt !important;
    }


    .footer__bottom {
        padding:
            4mm
            0
            0 !important;

        background:
            #ffffff !important;

        border-top:
            1px
            solid
            #cccccc !important;
    }


    .footer__bottom-inner {
        display:
            block !important;
    }


    .footer__copyright,
    .footer__platform {
        color:
            #444444 !important;

        font-size:
            8pt !important;
    }


    .footer__legal {
        display:
            none !important;
    }
}


/* =====================================================================
   END OF OLLATOEDU ECOSYS FOOTER COMPONENT
   ===================================================================== */