/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/

/* GROUP COMPONENTS / SITE FOOTER
=================================================== */
/* Notes...

	- 

*/
/* HTML Example...

    .c-site-footer
        nav
            ul
                li
                    a
                li
                    a
            ul
                li
                    a <-- logo
            ul
                li
                    a
                li
                    a
                li
                    ul <-- social icons
                        li
                            a

        .c-site-footer__subtext (note e.g. acquisition)

*/
/* Modifiers...

*/
/* GROUP COMPONENTS / SITE FOOTER / LAYOUT
=================================================== */
.c-site-footer nav {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;

    max-width: var(--max-width-title);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.c-site-footer ul {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-m);
}

/* Social icons */
.c-site-footer ul ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-m);
}

/* --mq-site-footer-1-after */
@media (min-width: 700px) {
    .c-site-footer nav {
        flex-direction: row;
    }

    .c-site-footer ul {
        min-width: 10em;
        /* Decrease */
        gap: var(--spacing-s);
    }
}
/* GROUP COMPONENTS / SITE FOOTER / SPACING
=================================================== */
.c-site-footer nav {
    padding-inline-start: var(--spacing-l-1);
    padding-inline-end: var(--spacing-l-1);
    padding-block-start: var(--spacing-l-2);
    padding-block-end: var(--spacing-l-2);
}

.c-site-footer__subtext {
    padding-block-end: var(--spacing-m);
}

.c-site-footer nav * {
    /* Use gap instead */
    padding: 0;
}

/* --mq-site-footer-1-before */
@media (max-width: 699px) {
    .c-site-footer .c-site-logo-2 {
        padding-block-start: var(--spacing-l-1);
        padding-block-end: var(--spacing-l-1);
    }
}
/* GROUP COMPONENTS / SITE FOOTER / DECORATION
=================================================== */
.c-site-footer {
    background: var(--colour-beige);
}

.c-site-footer__subtext {
    text-align: center;
    font-size: var(--font-size-s-x-x);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
    max-width: 18rem;
    margin-inline: auto;
    opacity: 0.5;
}

.c-site-footer__subtext svg {
    position: relative;
    top: -0.04em;
    font-size: 3.75em;
    height: 0.4em;
}

.c-site-footer nav {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

.c-site-footer svg {
    color: initial;
}

.c-site-footer a {
    text-decoration: none;
}

.c-site-footer .c-site-logo-2 {
    font-size: 3.5em;
    line-height: 0;
}

.c-site-logo-2 svg {
    color: white;
}

.c-site-footer .c-current-menu-item a {
    color: initial;
    opacity: 0.5;
}