@import url(/css/root.css);

:root {
    --footer-size-small: 0px;
    --footer-size-large: 0px;
    --footer-size: auto;
}

footer {
    z-index: 90;
    background-color: var(--color-vermelho-arcca);
    border: none;
    border-radius: 0.4em 0.4em 0 0;
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 10dvh;
}

.cont_footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#btn-scroll {
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50% 0;
    background-color: var(--color-vermelho-arcca);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    border: none;
    border-radius: 0.4em 0.4em 0 0;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

#btn-scroll p {
    translate: 0% 5%;
    color: var(--color-base-white);
}

/* .footer_list > .footerListI:nth-child(1) { background-color: #4949f6; }
.footer_list > .footerListI:nth-child(2) { background-color: #4040de; }
.footer_list > .footerListI:nth-child(3) { background-color: #3939c3; }
.footer_list > .footerListI:nth-child(4) { background-color: #2b2b96; }
.footer_list > .footerListI:nth-child(5) { background-color: #222278; }
.footer_list > .footerListI:nth-child(6) { background-color: #17174f; } */

/* Estilo Base - fora da media query */

#area-developer p,
#area-accessibility h4,
#area-accessibility ul li,
#area-accessibility ul li button,
#area-privacy a,
#area-copyright p,
#area-futureWarning p,
#area-endress a,
#area-social button i,
#area-social a i,
#developer-socials a i,
#developer-socials button i,
#area-endress #clickAboveSeeMaps
{
    font-size: 1rem;
    color: var(--color-base-white);
    font-weight: 400;
}

#area-accessibility ul li button {
    border: none;
    background-color: transparent;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
}
#area-accessibility ul li button:hover {
    opacity: 0.7;
}
#area-privacy a {
    text-decoration: underline;
}

#area-endress #clickAboveSeeMaps {
    position: relative;
}
#area-endress #clickAboveSeeMaps:before {
    content: "↑";
    position: absolute;
    top: 50%;
    left: 0;
    translate: -150% -60%;
}
#area-endress #clickAboveSeeMaps::after {
    content: "↑";
    position: absolute;
    top: 50%;
    right: 0;
    translate: 150% -60%;
}

#area-accessibility h4 {
    font-weight: 600;
    letter-spacing: 0.05rem;
    margin-bottom: 0.4em;
}

#area-accessibility ul {
    list-style-type: disc;
}

#developer-socials a i {
    font-size: calc(1rem + 50%);
}
#developer-socials button i {
    font-size: calc(1rem + 50%);
}

#developer-socials a,
#developer-socials button,
#area-social button,
#area-social a {
    border-radius: 0.2em;
    aspect-ratio: 1/1;
    background-color: transparent;
    border: none;
}

#area-privacy a:first-child::before {
    display: none;
}

#copyright-autours p:first-child::before {
    display: none;
}

#text-accessibilityTools {
    position: relative;
}
#text-accessibilityTools:before {
    content: ":";
    position: absolute;
    top: 50%;
    translate: 0% -50%;
    left: calc(100% + 2px);
}

#area-developer  { display: flex !important; }
#area-social  { display: flex !important; }
#area-endress  { display: flex !important; }
#area-accessibility { display: flex !important; }
#area-privacy  { display: none !important; }
#area-copyright { display: flex !important; }
#area-futureWarning { display: flex !important; }

.hasFakeHifen {
    position: relative;
}
.hasFakeHifen:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.6em;
    translate: 0% -50%;
    height: 2px;
    width: 5px;
    background-color: var(--color-base-white);
}

.hasFakeVBar {
    position: relative;
}
.hasFakeVBar:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.55em;
    translate: 0% -50%;
    height: 80%;
    width: 1.5px;
    background-color: var(--color-base-white);
}

/* Mobile ============================================= */
@media screen and (max-width: 900px) {
    #btn-scroll {
        padding: 0.3em 1.2em;
    }
    #btn-scroll p {
        display: flex;
        font-size: calc(1rem + 1%);
    }
    
    .hasFakeHifen:before {
        display: none;
    }

    .footer_list {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 2em;
        padding-top: 1em;
    }
    
    .footerListI {
        width: 100%;
    }

    /* #area-developer  { order: 4; }
    #area-social  { order: 1; }
    #area-endress  { order: 2; }
    #area-accessibility { order: 3; }
    #area-privacy  { order: 5; }
    #area-futureWarning { order: 6; }
    #area-copyright { order: 7; } */

    /* *area* Area do Desenvolvedor */
    #area-developer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2em;
    }
    
    #area-developer p {
        text-align: center;
        position: relative;
        text-wrap: nowrap;
    }
    
    #developer-intros {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.2em;
    }
    
    #developer-socials {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.2em;
    }
    #developer-socials ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }
    
    #developer-socials a,
    #developer-socials button,
    #area-social button,
    #area-social a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #developer-mySocials {
        flex-direction: column;
    }

    /* *area* Area do Social */
    #area-social {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }    

    /* *area* Area do Endereço */
    #area-endress {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }
    
    #area-endress a {
        text-decoration: underline;
        text-align: center;
        width: 90%;
    }

    /* *area* Area do Acessibilidade */
    #area-accessibility {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #area-accessibility ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.4em;
    }

    /* #text-accessibilityTools:before {
        left: calc(100% + 4px);
    } */

    /* *area* Area do Privacidade */
    #area-privacy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.2em;
    }
    #area-privacy p {
        display: none;
    }

    #area-privacy a::before {
        display: none;
    }

    /* *area* Area do Futere Warning */
    #area-futureWarning {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #area-futureWarning p {
        text-align: center;
    }

    /* *area* Area do Copyright */
    #area-copyright {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }
    
    #area-copyright div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.5em;
    }
    
    .copyrightHifen {
        display: none;
    }

    #copyright-autours p {
        position: relative;
    }

    /* Icones Customizados */
    #area-social button, #area-social a {
        width: 32px;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 0.4em;
    }
     #developer-socials-list button,  #developer-socials-list a {
        width: 32px;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 0.4em;
        padding: 1em;
    }

    #area-social button i, #area-social a i {
        font-size: calc(1rem + 30%);
        color: var(--color-base-white);
    }
    #footer-social-telephone i {
        color:  var(--color-base-white) !important;
    }

    #developer-socials-list button::before, #developer-socials-list a::before {
        opacity: 1;
    }

    #footer-social-telephone i {
        color:  var(--color-base-white) !important;
    }
    #link-developer-email i {
        color: #000000 !important;
    }
}

/* Desktop ============================================= */
@media screen and (min-width: 900px) {
    #btn-scroll {
        padding: 0.4em 0.8em;
    }
    #btn-scroll:hover {
        filter: brightness(120%);
    }
    #btn-scroll p {
        display: flex;
        font-size: calc(1rem + 1%);
    }

    .footer_list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* align-items: center; */
        /* gap: 1.5em; */
    }
    
    .footerListI {
        width: 45%;
        margin: 1em 0em;
    }
    
    #area-developer  { order: 4; }
    #area-social  { order: 1; }
    #area-endress  { order: 3; }
    #area-accessibility { order: 2; }
    #area-privacy  { order: 5; }
    #area-futureWarning { order: 6; }
    #area-copyright { order: 7; }

    /* 
    .footer_list li:nth-child(odd) {
        align-items: flex-start;
    }
    .footer_list li:nth-child(even) {
        align-items: flex-end;
        } 
    */
        
    /* *area* Area do Desenvolvedor */
    #area-developer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
    }
    
    #area-developer p {
        text-align: center;
        position: relative;
        text-wrap: nowrap;
    }
    
    #developer-intros {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }
    
    #developer-socials {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1.2em;
    }
    
    #developer-socials ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }

    #developer-socials a,
    #developer-socials button,
    #area-social button,
    #area-social a {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .clickable-text-copy {
        cursor: copy !important;
    }

    #developer-socials a,
    #developer-socials button {
        padding: 0.4em;
    }

    /* *area* Area do Social */
    #area-social {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }    

    /* *area* Area do Endereço */
    #area-endress {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }

    #area-endress a p {
        text-decoration: underline;
        white-space: wrap;
    }

    #clickAboveSeeMaps {
        display: flex;
    }

    /* *area* Area do Acessibilidade */
    #area-accessibility {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #area-accessibility ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.2em;
        padding-left: 2%;
    }

    /* #text-accessibilityTools:before {
        right: calc(100% + 4px);
    } */

    /* *area* Area do Privacidade */
    #area-privacy {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }

    /* *area* Area do Copyright */
    #area-copyright {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }
    
    #area-copyright div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.4em;
    }

    .copyrightHifen {
        display: flex;
    }
    
    #copyright-autours p {
        position: relative;
    }

    /* *area* Area do Futere Warning */
    #area-futureWarning {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #area-futureWarning p {
        text-align: center;
    }

    /* Icones Customizados */
    #area-social button, #area-social a {
        width: 36px;
        border-radius: 0.4em;
    }

    #area-social button i, #area-social a i {
        font-size: calc(1.2rem + 30%);
        color: var(--color-base-white) !important;
    }

    .footer_social_bg {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .footer_social_bg:before {
        opacity: 0 !important;
    }
    .footer_social_bg:hover::before {
        opacity: 1 !important;
    }


}

.footer_social_bg {
    position: relative;
    overflow: hidden;
}
.footer_social_bg i {
    z-index: 192 !important;
    transition: all .3s ease-in-out;
}
.footer_social_bg:before {
    z-index: 91;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .3s ease-in-out;
    opacity: 1;
}

/* Icons no Footer */

/* Telephone */
#footer-social-telephone {
    display: flex;
}
#footer-social-telephone:before {
    background-color: var(--color-socialMidia-phone) !important;
}
#footer-social-telephone i {
    color: #000000 !important;
}
#footer-social-telephone:hover i {
    color: #000000 !important;
}

/* Whatsapp */
#footer-social-whatsapp {
    display: flex;
}
#footer-social-whatsapp:before {
    background-color: var(--color-socialMidia-whatsapp);
}

/* Instagram */
#footer-social-instagram {
    display: flex;
}
#footer-social-instagram:before {
    background: var(--color-socialMidia-instagram);
}

/* Youtube */
#footer-social-youtube {
    display: flex;
}
#footer-social-youtube:before {
    background-color: var(--color-socialMidia-youtube);
}

/* TikTok */
#footer-social-tiktok {
    display: flex;
}
#footer-social-tiktok:before {
    background-color: var(--color-socialMidia-tiktok);
}

/* Facebook */
#footer-social-facebook {
    display: flex;
}
#footer-social-facebook:before {
    background-color: var(--color-socialMidia-facebook);

}

/* LinkedIn */
#link-developer-linkedin {
    display: flex;
}
#link-developer-linkedin:before {
    background-color: var(--color-socialMidia-linkedin);

}

/* Github */
#link-developer-github {
    display: flex;
}
#link-developer-github:before {
    background-color: var(--color-socialMidia-github);

}

/* Email */
#link-developer-email {
    display: flex;
}
#link-developer-email:before {
    background-color: var(--color-socialMidia-email);
}
#link-developer-email:hover i {
    color: #000000 !important;
}

.footer_social_bg.disable {
    display: none !important;
}