/* Shared structural styles for the fixed header and seasonal banners.
   Theme stylesheets provide colour and atmosphere; this file keeps the shell
   usable at every viewport size. */

:root {
  --site-navbar-offset: 3.75rem;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: clip;
}

.wrapper {
  min-width: 0;
  min-height: 100dvh !important;
  margin-top: 0 !important;
  padding-top: var(--site-navbar-offset);
  box-sizing: border-box;
}

.navbar,
.navbar .container,
.navbar-collapse,
.navbar-primary,
.navbar-actions {
  min-width: 0;
}

.navbar {
  z-index: 1040;
}

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

.navbar-primary .nav-link {
  white-space: nowrap;
}

.navbar-login {
  flex: 0 0 auto;
  white-space: nowrap !important;
}

.navbar-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.75rem;
}

.navbar-actions > *,
.navbar-language,
.navbar-user {
  min-width: 0;
}

.navbar-language-form {
  flex: 0 1 auto;
}

.navbar-language__toggle,
.navbar-user__toggle {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.navbar-language__toggle {
  max-width: 10rem;
}

.navbar-user {
  flex: 0 1 auto;
  width: auto;
  max-width: 18rem;
}

.navbar-user__toggle {
  width: auto;
  max-width: 18rem;
}

/* Bootstrap fills outline buttons solid white on hover/open. Keep navbar
   dropdown toggles inside each non-monsoon theme's palette instead. */
body[data-theme="default"] {
  --navbar-dropdown-accent-rgb: 254, 189, 89;
  --navbar-dropdown-control-color: #ffe0a8;
}

body[data-theme="christmas"] {
  --navbar-dropdown-accent-rgb: 245, 215, 110;
  --navbar-dropdown-control-color: #fff2bd;
}

body[data-theme="halloween"] {
  --navbar-dropdown-accent-rgb: 255, 107, 26;
  --navbar-dropdown-control-color: #ffd28f;
}

body[data-theme="summer"] {
  --navbar-dropdown-accent-rgb: 245, 200, 66;
  --navbar-dropdown-control-color: #fff4ba;
}

:is(
  body[data-theme="default"],
  body[data-theme="christmas"],
  body[data-theme="halloween"],
  body[data-theme="summer"]
) .navbar :is(#languageDropdown, #userDropdown):is(
  :hover,
  :focus,
  :active,
  .show,
  [aria-expanded="true"]
) {
  color: var(--navbar-dropdown-control-color) !important;
  background-color: rgba(var(--navbar-dropdown-accent-rgb), 0.14) !important;
  border-color: rgba(var(--navbar-dropdown-accent-rgb), 0.72) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--navbar-dropdown-accent-rgb), 0.1) !important;
}

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

.navbar-language__toggle > i,
.navbar-user__toggle > i,
.navbar-language__toggle::after,
.navbar-user__toggle::after {
  flex: 0 0 auto;
}

.navbar .dropdown-menu {
  max-width: min(22rem, calc(100vw - 1rem));
}

.navbar .dropdown-item {
  overflow-wrap: anywhere;
  white-space: normal;
}

.notif-bell {
  flex: 0 0 auto;
}

.notif-dropdown {
  width: min(310px, calc(100vw - 1rem)) !important;
  max-height: calc(100dvh - 1rem);
}

.notif-dropdown ul {
  max-height: min(280px, calc(100dvh - 7rem)) !important;
}

.theme-banner {
  margin: 0 !important;
  padding: clamp(0.7rem, 1.8vw, 0.9rem) clamp(1rem, 4vw, 2rem) !important;
  overflow-wrap: anywhere;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem) !important;
  line-height: 1.55;
}

.theme-banner p {
  width: min(100%, 72rem);
  margin: 0 auto !important;
}

/* Decorative layers stay above page content but below navigation and dialogs. */
.halloween-web,
.halloween-bat,
.halloween-spider {
  z-index: 1020 !important;
}

/* Bootstrap's expanded navbar becomes crowded well before desktop content does.
   Collapse it through the tablet range, then present a roomy, scroll-safe menu. */
@media (max-width: 1399.98px) {
  .navbar-collapse {
    max-height: calc(100dvh - var(--site-navbar-offset));
    padding: 0.75rem 0 1rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .navbar-primary {
    width: 100%;
    margin: 0 !important;
  }

  .navbar-primary .nav-link {
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.4rem;
  }

  .navbar-actions {
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex-wrap: wrap;
  }

  .navbar-user {
    flex: 0 1 auto;
    width: auto;
    max-width: min(18rem, 100%);
  }

  .navbar-user__toggle {
    width: auto;
    max-width: 18rem;
  }

  /* Keep dropdowns inside the expanded mobile menu. Popper's end alignment
     otherwise pushes the language options left and the collapse clips them. */
  .navbar-collapse .navbar-actions .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 0.5rem;
  }
}

@media (max-width: 1199.98px) {
  .navbar-user {
    max-width: min(13rem, 100%);
  }

  .navbar-user__toggle {
    max-width: 13rem;
  }
}

@media (max-width: 991.98px) {
  .navbar-user {
    flex-basis: 11rem;
    width: min(11rem, 100%);
    max-width: 11rem;
  }

  .navbar-user__toggle {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .navbar .container {
    column-gap: 0.35rem;
  }

  .navbar .navbar-brand {
    margin-right: auto;
  }

  .navbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .navbar-actions > *,
  .navbar-actions .dropdown,
  .navbar-actions .btn,
  .navbar-language-form,
  .navbar-user {
    width: 100%;
    max-width: none;
  }

  .navbar .dropdown-menu {
    width: 100%;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-banner,
  .theme-banner p {
    animation: none !important;
  }
}