/*

NOTE:
------
WRITE YOUR OWN CUSTOM CSS STYLES HERE.

*/

/* Smooth transition for light/dark mode */
body,
body * {
    transition: background-color 0.5s ease, color 0.5s ease,
        border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Animate banner background brightness on theme toggle */
#banner {
    transition: filter 0.5s ease, -webkit-filter 0.5s ease;
    filter: none !important;
    -webkit-filter: none !important;
}
#banner::before {
    transition: background-color 0.5s ease, opacity 0.5s ease;
}
body.dark-mode #banner {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Animate parallax backgrounds (e.g., banner) brightness */
.bg--img {
    transition: filter 0.7s ease, -webkit-filter 0.7s ease;
    filter: none !important;
    -webkit-filter: none !important;
}
body.dark-mode .bg--img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Animate parallax plugin mirror brightness */
.parallax-mirror {
    transition: filter 0.5s ease, -webkit-filter 0.5s ease !important;
}
body.dark-mode .parallax-mirror {
    filter: brightness(0.6) !important;
    -webkit-filter: brightness(0.6) !important;
}

/* Dark Mode Blog Overrides */
body.dark-mode #blog {
    background-color: #181818 !important;
}
body.dark-mode #blog.bg--overlay::before {
    background-color: rgba(0, 0, 0, 0.6) !important;
}
body.dark-mode #blog .container,
body.dark-mode #blog .row,
body.dark-mode #blog .post-items {
    background-color: transparent !important;
}
body.dark-mode #blog .post-item {
    background-color: #232323 !important;
}

/* Dark Mode About Info Overrides */
body.dark-mode #about {
    background-color: #121212 !important;
}
body.dark-mode #about .about--info-wrapper {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    box-shadow: none !important;
}
body.dark-mode #about .about--info-wrapper h3,
body.dark-mode #about .about--info-wrapper h4,
body.dark-mode #about .about--info-wrapper h5,
body.dark-mode #about .about--info-wrapper p {
    color: #e0e0e0 !important;
}
body.dark-mode #about .about--info-item p {
    color: #bbbbbb !important;
}

/* Dark Mode Progress Bars */
body.dark-mode .about--progress-items .progress {
    background-color: #333 !important;
}
body.dark-mode .about--progress-items .progress-bar {
    background-color: #a7aeff !important;
}
body.dark-mode .about--progress-items .progress-bar span {
    background-color: #7a85ff93 !important;
    color: #e0e0e0 !important;
}

/* Clear code/pre backgrounds in dark mode */
body.dark-mode pre,
body.dark-mode code {
    background-color: transparent !important;
    color: #e0e0e0 !important;
    border: none !important;
}

/* Dark Mode Gallery Overlay */
body.dark-mode .gallery-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
}
body.dark-mode .gallery-overlay h2,
body.dark-mode .gallery-overlay p {
    color: #ffffff !important;
}

/* Dark Mode Header Scroll Behavior */
body.dark-mode .header--navbar {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    padding-top: 20px !important;
}

body.dark-mode.scrolled .header--navbar {
    background-color: rgba(31, 31, 31, 1) !important;
    border-bottom-color: #333 !important;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.1),
        0 4px 8px rgba(255, 255, 255, 0.15) !important;
    padding-top: 10px !important;
}

/* Dark-mode mobile header nav background */
body.dark-mode .header--nav.in {
    background-color: #1f1f1f !important;
}
body.dark-mode .header--nav .nav > li > a {
    color: #e0e0e0 !important;
}
body.dark-mode .header--nav .nav > li > a:hover,
body.dark-mode .header--nav .nav > li.active > a {
    color: #a7aeff !important;
}

/* Garantir fundo escuro no menu mobile durante animação e estado aberto */
@media screen and (max-width: 991px) {
    body.dark-mode .header--nav,
    body.dark-mode .header--nav.collapse,
    body.dark-mode .header--nav.collapsing,
    body.dark-mode .header--nav.in {
        background-color: #1f1f1f !important;
    }
    body.dark-mode #headerNav,
    body.dark-mode #headerNav.collapse,
    body.dark-mode #headerNav.collapsing,
    body.dark-mode #headerNav.in {
        background-color: #1f1f1f !important;
    }
}

/* Animate gallery filter transitions */
.gallery-item {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.gallery-item img {
    transition: transform 0.3s ease;
}