/* =========================================
   CSV – CUSTOM WEBSITE DESIGN
   Canadian Society for Virology
========================================= */

:root {
    --csv-accent: #962509;
    --csv-dark: #313131;
    --csv-light: #f7f6f4;
    --csv-text: #333333;
}

/* =========================================
   MAIN NAVIGATION
========================================= */

/* Navigation background */
.navbar,
header nav {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eeeeee;
}

/* Center navigation items */
.navbar-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    gap: 12px;
}

/* Navigation links */
.navbar-nav .nav-link,
.navbar-nav > li > a {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    color: #333333 !important;
    padding: 20px 14px !important;
    transition: color 0.25s ease;
}

/* Navigation hover */
.navbar-nav .nav-link:hover,
.navbar-nav > li > a:hover {
    color: var(--csv-accent) !important;
}

/* Active navigation item */
.navbar-nav .active > a,
.navbar-nav .nav-link.active {
    color: var(--csv-accent) !important;
}


/* =========================================
   LINKS AND ACCENT COLOR
========================================= */

a {
    transition: color 0.2s ease;
}

main a,
.content a {
    color: var(--csv-accent);
}

main a:hover,
.content a:hover {
    color: #6f1b08;
}

/* =========================================
   BUTTONS
========================================= */

.btn,
button,
input[type="submit"],
input[type="button"] {
    background-color: var(--csv-accent) !important;
    border: 2px solid var(--csv-accent) !important;
    border-radius: 30px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    transition: all 0.25s ease;
}

/* Button hover */
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #741d0a !important;
    border-color: #741d0a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* =========================================
   FOOTER – GENERAL STYLE
========================================= */

.zone-footer {
    background-color: var(--csv-dark) !important;
    color: #ffffff !important;
}

/* Footer text and headings */
.zone-footer,
.zone-footer * {
    color: #ffffff !important;
}

/* Footer links */
.zone-footer a {
    color: #ffffff !important;
    text-decoration: none;
}

.zone-footer a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* =========================================
   FOOTER – COLUMN ALIGNMENT
========================================= */

/* Vertically center footer columns */
.zone-footer .row {
    display: flex !important;
    align-items: center !important;
}

/* Footer columns */
.zone-footer .row > [class*="col-"] {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
}

/* Logo column */
.zone-footer .row > [class*="col-"]:first-child {
    align-items: center !important;
}

/* Contact information column */
.zone-footer .row > [class*="col-"]:nth-child(2) {
    align-items: flex-start !important;
}

/* Social media column */
.zone-footer .row > [class*="col-"]:last-child {
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================
   FOOTER – SOCIAL MEDIA ICONS
========================================= */

/* Double social media icon size */
.zone-footer .social-icons i,
.zone-footer .social-links i,
.zone-footer .social-media i,
.zone-footer .fa,
.zone-footer .fab,
.zone-footer .bi {
    font-size: 2em !important;
}

/* Social media icon alignment */
.zone-footer .social-icons a,
.zone-footer .social-links a,
.zone-footer .social-media a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 8px !important;
}

/* =========================================
   MOBILE NAVIGATION
========================================= */

@media (max-width: 991px) {

    /* Mobile navigation dropdown */
    .navbar-collapse {
        width: 100%;
        background-color: #ffffff !important;
        padding: 12px 15px 20px !important;
        border-top: 1px solid #eeeeee;
        text-align: center !important;
    }

    /* Vertical and centered navigation */
    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    .navbar-nav > li {
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        padding: 5px 0 !important;
        border-bottom: 1px solid #eeeeee;
    }

    /* Mobile navigation links */
    .navbar-nav .nav-link,
    .navbar-nav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 15px 12px !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        text-align: center !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav > li > a:hover {
        color: var(--csv-accent) !important;
    }

    /* Hamburger – transparent background, no border */
    .navbar-toggler,
    .navbar-toggler:hover,
    .navbar-toggler:focus,
    .navbar-toggler:active {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 10px !important;
    }

    /* Enlarge hamburger icon and make it black */
    .navbar-toggler-icon {
        width: 34px !important;
        height: 34px !important;
        background-color: transparent !important;
        background-size: 34px 34px !important;
        filter: brightness(0) !important;
    }

    /* Center dropdown submenus */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 5px 0 12px !important;
        text-align: center !important;
        background: var(--csv-light) !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Submenu links */
    .navbar-nav .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        padding: 12px 10px !important;
        font-size: 16px !important;
        color: #333333 !important;
        text-align: center !important;
    }

    .navbar-nav .dropdown-menu a:hover {
        color: var(--csv-accent) !important;
        background: transparent !important;
    }

    /* Native dropdown icons – 3 times larger */
    .navbar-nav .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        min-height: 55px;
    }

    .navbar-nav .dropdown-toggle::after {
        display: inline-block !important;
        flex-shrink: 0;
        margin: 0 !important;
        border-top-width: 21px !important;
        border-right-width: 18px !important;
        border-left-width: 18px !important;
        border-bottom: 0 !important;
        vertical-align: middle !important;
        transform: translateY(-2px);
    }

}

/* =========================================
   FOOTER – MOBILE RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .zone-footer .row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .zone-footer .row > [class*="col-"] {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        padding-top: 15px;
        padding-bottom: 15px;
    }

}

/* =========================================
   RESPONSIVE ADJUSTMENTS
========================================= */

@media (max-width: 575px) {

    .zone-footer {
        padding-top: 35px;
        padding-bottom: 30px;
    }

}