/* utilities.css - small helper classes and miscellaneous utilities */

/* Focus outlines and focus-friendly utilities */
/* Only suppress focus ring on mouse/pointer interaction; preserve it for keyboard nav (WCAG 2.4.7) */
.no-focus-outline:focus:not(:focus-visible),
.no-focus-outline:active {
    outline: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.dropdown-toggle.no-focus-outline:focus:not(:focus-visible) {
    box-shadow: none !important;
}

/* Breadcrumb styling */
.breadcrumb {
    background-color: transparent;
    padding: 0;
}

/* Header link/button cleanup */
#bd-user,
#bd-theme {
    text-decoration: none !important;
}

#bd-user:hover,
#bd-theme:hover,
#bd-user:focus,
#bd-theme:focus {
    text-decoration: none !important;
}

/* Only suppress outline on mouse click, not keyboard focus (WCAG 2.4.7) */
#bd-user:focus:not(:focus-visible),
#bd-theme:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

header .btn-link.nav-link {
    text-decoration: none !important;
}

.btn-link.nav-link,
.btn-link.nav-link:hover,
.btn-link.nav-link:focus,
button.btn.btn-link.nav-link,
button.btn.btn-link.nav-link:hover,
button.btn.btn-link.nav-link:focus {
    text-decoration: none !important;
}

/* Scroll top styling tweaks */
.scroll-top {
    color: #000;
    background-color: rgba(179, 163, 105, .85);
}

.scroll-top:focus,
.scroll-top:hover {
    background-color: #b3a369;
}

/* bd-mode-toggle tweaks */
.bd-mode-toggle .btn {
    color: #b3a369;
}

.bd-mode-toggle .btn:hover {
    color: #000;
    background-color: rgba(179, 163, 105, .85);
}

.bd-mode-toggle button.dropdown-toggle svg use {
    fill: #b3a369;
}

.bd-mode-toggle button.dropdown-toggle:hover svg use {
    fill: #000;
}

.bd-mode-toggle button.dropdown-item svg use {
    fill: #fff;
}

.bd-mode-toggle button.dropdown-item.active {
    background-color: #171a16;
    color: #fff;
}

.bd-mode-toggle button.dropdown-item.active svg use {
    fill: #fff;
}

.bd-mode-toggle button.dropdown-item:hover {
    background-color: #363d33;
    color: #fff;
}

.bd-mode-toggle button.dropdown-item:hover svg use {
    fill: #fff;
}

/* Header: remove underline for user and theme toggle buttons */
#bd-user,
#bd-theme {
    text-decoration: none !important;
}

/* Navbar logo area adjustments for small screens */
@media (max-width: 991.98px) {
    :root {
        --header-height: 5rem;
    }

    #navbar-main {
        height: var(--header-height) !important;
    }

    #navbar-logo-area {
        height: var(--header-height) !important;
    }

    #navbar-site-name {
        height: var(--header-height) !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar-toggler {
        height: 2.5rem !important;
        width: 2.5rem !important;
        padding: 0.5rem !important;
    }

    .navbar-toggler-icon {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

@media (max-width: 767.98px) {
    body {
        padding-top: var(--header-height, 5rem) !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --header-height: 8rem;
    }

    #navbar-main {
        height: 8rem !important;
    }

    #navbar-logo-area {
        height: 4rem !important;
        background-size: contain;
    }

    #navbar-logo-area.border-end {
        border-right: 0px solid transparent !important;
    }

    #navbar-logo-area.border-bottom {
        border-bottom: 1px solid #857437 !important;
    }

    #navbar-site-name {
        height: 4rem !important;
    }

    body {
        padding-top: 8rem !important;
    }

    #accent-logo {
        margin-top: 2rem;
    }

    #accent-footer {
        background: #a4925a;
        background: linear-gradient(to bottom, #a4925a 0%, #a4925a 100%);
    }

    #org-footer {
        background: #b3a369;
        background: linear-gradient(to bottom, #b3a369 0%, #b3a369 66%, #a4925a 80%, #a4925a 100%);
    }
}