/**
  * standardFourColsLayout.css
*/

/* Initial Layout */
.footerContent {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 5rem 1.25rem;
    background: var(--grey);
}

@media (min-width: 768px) {
    .footerContent {
        padding: 5rem 2rem;
    }
}

@media (min-width: 1200px) {
    .footerContent {
        padding: 5rem 3rem;
    }
}

@media (min-width: 1500px) {
    .footerContent {
        padding: 5rem;
    }
}

/* Content Wrapper */
.footerWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    width: 100%;
    max-width: 1512px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .footerWrapper {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 1200px) {
    .footerWrapper {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
    }
}

/* Col Layout */
.footerWrapper .col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
}

@media (min-width: 768px) {
    .footerWrapper .col {
        flex-basis: calc(50% - 3rem);
    }
}

@media (min-width: 1200px) {
    .footerWrapper .col {
        flex-basis: 25%;
    }
}

/* Has Col Seperator */
@media (min-width: 1200px) {
    .footerWrapper .hasSeperator::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        height: 100%;
        background: var(--dark);
        opacity: .15;
    }
}

/* Logo */
.footerWrapper .custom-logo-link img {
    width: 100%;
    height: 3rem;
    object-fit: contain;
    object-position: left center;
}

/* Social Links Layout */
#menu-social-links {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    padding-top: 1rem;
}

/* Social Links Item */
#menu-social-links li {
    display: flex;
    padding: 0;
    margin: 0;
}

/* Social Links Link */
#menu-social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.35s ease;
}

/* Social Links Icon */
#menu-social-links svg {
    width: 100%;
    height: 100%;
    fill: var(--primary);
    transition: all 0.35s ease;
}

/* Social Links Icon Hover */
#menu-social-links a:hover svg,
#menu-social-links a:focus svg,
#menu-social-links a:active svg {
    fill: var(--secondary);
    transform: translateY(-0.125rem);
}

/* Col Heading */
.footerWrapper .col h5 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
    font-family: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--dark);
}

/* Col Heading - Seperator */
.footerWrapper .col h5 img {
    width: 100%;
    height: 0.15rem;
    object-fit: contain;
    object-position: left center;
}

/* Nav Wrapper */
.footerWrapper ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Nav Item */
.footerWrapper li:not(#menu-social-links li) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    transition: all 0.35s ease;
}

/* Nav icon */
.footerWrapper li svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--dark);
    transition: all 0.35s ease;
}

/* Nav Link */
.footerWrapper a {
    font-family: var(--text);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: unset;
    transition: all 0.35s ease;
}

/* Nav Hover Item */
.footerWrapper li:not(#menu-social-links li):hover,
.footerWrapper li:not(#menu-social-links li):focus,
.footerWrapper li:not(#menu-social-links li):active {
    transform: translateX(0.125rem);
}

/*
.footerWrapper li:not(#menu-social-links li):hover a,
.footerWrapper li:not(#menu-social-links li):focus a,
.footerWrapper li:not(#menu-social-links li):active a {
	color: var(--orange);
}

.footerWrapper li:not(#menu-social-links li):hover svg,
.footerWrapper li:not(#menu-social-links li):focus svg,
.footerWrapper li:not(#menu-social-links li):active svg {
	fill: var(--blue);
} */

/* Signup Form */
.formWrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: auto;
}

/* Form Field */
.formWrapper .field {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
}

/* Form Icon*/
.formWrapper .field svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.25rem;
    margin: auto;
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--dark);
}

/* Form Input */
.formWrapper .fieldInput {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.875rem 1.25rem 0.875rem 3.25rem;
    border-radius: 2rem;
    outline: unset;
    font-family: var(--text);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--dark);
    transition: all 0.5s ease;
}

.formWrapper .fieldInput:focus,
.formWrapper .fieldInput:active {
    box-shadow: 0 0 0 0.175rem var(--orange);
}

/* Form Submit Field */
.formWrapper .submitBtn {
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    transition: all 0.5s ease;
}

/* Form Submit Icon */
.formWrapper .submitBtn svg {
    left: unset;
    right: 1rem;
    cursor: pointer;
    fill: var(--light);
    transition: all 0.5s ease;
}

/* Form Submit Button */
.formWrapper .fieldInputSubmit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .875rem 2.5rem .875rem 1.25rem;
    border-radius: 2rem;
    outline: unset;
    font-family: var(--main);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: var(--light);
    background: var(--orange);
    cursor: pointer;
    transition: all 0.5s ease;
}

/* Form Submit Field Hover */
.formWrapper .submitBtn:hover {
    opacity: .85;
}

/* Form Submit SVG Hover */
.formWrapper .submitBtn:hover svg {
    transform: translateX(.125rem);
}

/* Footer Contact */
#menu-footer-contact a {
    display: flex;
    align-items: center;
    gap: .5rem;
}

#menu-footer-contact a:hover {
    transform: translateY(-0.2rem);
}

/**
  * Light Mode
  * --------------- */
.light .footerWrapper h5,
.light .footerWrapper a {
    color: var(--light);
}

.light .footerWrapper .hasSeperator::after {
    background: var(--light);
}

.light .footerWrapper ul li a {
    color: var(--light);
    opacity: 0.9;
}

.light .footerWrapper ul li a:hover {
    opacity: 1;
}

.light .footerWrapper ul li svg {
    fill: var(--light);
}

.light .copyrightWrapper {
    border-top-color: rgba(255, 255, 255, 15%);
}