html, body {
    background: #2D3436;
    margin: 0;
}

.bg-dark {
    background-color: var(--nav-bg) !important;
}

/* The navbar keeps the page's own font, the one the map search is set in too. */
.navbar {
    font-size: 16px !important;
}

.navbar-brand {
    color: var(--nav-brand) !important;
}

/* Brand + toggler are grouped so they always share one line; the collapse
   menu (a sibling of this wrapper) is still free to wrap onto its own line
   below when expanded. */
.navbar-header-row {
    display: flex;
    align-items: center;
}

/* Below the lg breakpoint, force the group to take the full row so a long
   cemetery name shrinks with an ellipsis instead of pushing the toggler
   onto its own line. */
@media (max-width: 991.98px) {
    .navbar-header-row {
        width: 100%;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0.5rem;
        overflow: hidden;
    }

    .navbar-brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .navbar-toggler {
        flex: 0 0 auto;
    }
}

.nav-link {
    color: var(--nav-text) !important;
}

.nav-item.active > .nav-link-wrapper >  a {
    color: var(--nav-active) !important;
}

.nav-link:hover {
    color: var(--nav-text-hover) !important;
}

.btn-outline-dc {
    color: var(--btn-dc-text);
    background-color: var(--btn-dc-bg);
    border: 1px solid var(--btn-dc-border);
}

.btn-outline-dc:hover {
    color: var(--btn-dc-hover-text);
    background-color: var(--btn-dc-hover-bg);
}

.btn-outline-dc:disabled {
    color: var(--btn-dc-text);
    background-color: var(--btn-dc-bg);
}

.modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-text) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--modal-border);
}

.modal-title {
    color: var(--modal-text);
}

.dropdown-menu {
    background-color: var(--nav-dropdown-bg);
    border: 1px solid var(--nav-dropdown-border);
}

.dropdown-item {
    color: var(--nav-dropdown-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--nav-dropdown-text);
    background-color: var(--nav-dropdown-hover-bg);
}

/* Language picker: the current language is ticked, not filled with Bootstrap's blue */
.nav-language .dropdown-item {
    display: flex;
    align-items: center;
}

.nav-language .language-check {
    width: 1.25em;
    margin-right: 0.5rem;
    visibility: hidden;
}

.nav-language .dropdown-item.current {
    font-weight: 600;
}

.nav-language .dropdown-item.current .language-check {
    visibility: visible;
}

/* nav hover popup */

.nav-link-wrapper {
    position: relative;
}

/* Popup hidden by default */
.nav-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--nav-dropdown-bg);
    color: var(--nav-dropdown-text) !important;
    border: 1px solid var(--nav-dropdown-border);
    padding: 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;

    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Desktop only */
@media (hover: hover) and (pointer: fine) {
    .nav-link.active:hover + .nav-popup {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Explicitly disable on touch devices */
@media (hover: none), (pointer: coarse) {
    .nav-popup {
        display: none !important;
    }
}

/* Priority+ navbar overflow */

/* Keep inline cemetery names on one line so the greedy layout can measure widths */
.navbar-expand-lg .navbar-nav .nav-cemetery > .nav-link-wrapper > .nav-link {
    white-space: nowrap;
}

/* Cemetery items relocated into the overflow dropdown render as menu items */
.nav-overflow-menu .nav-cemetery {
    display: block;
}

.nav-overflow-menu .nav-cemetery > .nav-link-wrapper > .nav-link {
    display: block;
    padding: 0.35rem 1.5rem;
    white-space: nowrap;
    color: var(--nav-dropdown-text) !important;
}

.nav-overflow-menu .nav-cemetery > .nav-link-wrapper > .nav-link:hover {
    color: var(--nav-dropdown-text) !important;
    background-color: var(--nav-dropdown-hover-bg);
}

.nav-overflow-menu .nav-cemetery.active > .nav-link-wrapper > .nav-link {
    color: var(--nav-active) !important;
}

/* Hover detail popups make no sense inside the dropdown */
.nav-overflow-menu .nav-popup {
    display: none !important;
}

/* Cookie consent banner */
#cookie-consent .cookie-consent-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}

/* Both choices get the same look and width - declining must be as easy as accepting */
#cookie-consent .cookie-btn {
    min-width: 120px;
}