/* Shared navigation. Never let the logo or account controls cover the language links. */
.app-header.navbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .35rem;
}
.app-header.navbar .temta-brand {
  position: relative;
  flex: 0 1 170px;
  min-width: 0;
  width: auto !important;
  height: auto;
  margin: 0 auto 0 0 !important;
  padding-left: .25rem;
}
.app-header.navbar .temta-brand-logo {
  display: block;
  width: 100% !important;
  max-width: 150px !important;
}
.app-header.navbar > .navbar-nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: .35rem;
  min-width: 0;
  margin: 0 .5rem 0 auto !important;
}
.app-header.navbar > .navbar-nav > .nav-item { flex: 0 0 auto; }
.temta-language-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: .15rem;
  margin: 0 !important;
  white-space: nowrap;
}
.temta-language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 36px;
}
@media (max-width: 767.98px) {
  .app-header.navbar { padding: .25rem .4rem; gap: .2rem; }
  .app-header.navbar .sidebar-toggler { flex: 0 0 32px; margin: 0 !important; padding: .2rem; }
  .app-header.navbar .navbar-brand.temta-brand { flex-basis: 95px; }
  .app-header.navbar .navbar-brand.temta-brand .temta-brand-logo {
    width: 100% !important;
    max-width: 95px !important;
  }
  .app-header.navbar > .navbar-nav { gap: .1rem; margin: 0 !important; }
  .app-header.navbar > .navbar-nav .nav-link { padding: .4rem .25rem; white-space: nowrap; }
  .app-header.navbar .dropdown .nav-link { max-width: 45px; }
  .app-header.navbar .dropdown .nav-link span { display: none; }
  .temta-language-switch > span { display: none; }
  .temta-language-switch a { padding: .35rem .2rem !important; }
  .breadcrumb { overflow-wrap: anywhere; }
}
@media (max-width: 479.98px) {
  .app-header.navbar .navbar-brand.temta-brand { flex-basis: 60px; }
  .app-header.navbar .navbar-brand.temta-brand .temta-brand-logo { max-width: 60px !important; }
  .app-header.navbar > .navbar-nav .nav-link { font-size: .85rem; }
}
@media (max-width: 374.98px) {
  /* Keep the homepage accessible via the brand link while leaving room for every action. */
  .app-header.navbar .navbar-brand.temta-brand {
    flex: 0 0 22px;
    padding: 0;
    overflow: visible;
    min-height: 36px;
  }
  .app-header.navbar .navbar-brand.temta-brand .temta-brand-logo { display: none; }
  .app-header.navbar .navbar-brand.temta-brand::before {
    content: "A";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 36px;
    font-weight: 700;
    color: #16516c;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .app-header.navbar .navbar-brand.temta-brand { flex-basis: 140px; }
}

/* Two-row mobile header: the logo must never share space with news/language/account. */
@media (max-width: 767.98px) {
  .app-header.navbar {
    flex-wrap: wrap !important;
    align-content: center;
    min-height: 104px;
    height: 104px;
    padding: .25rem .65rem;
    column-gap: .5rem;
    row-gap: .1rem;
  }
  .app-header.navbar .sidebar-toggler {
    flex: 0 0 32px;
    order: 0;
    margin: 0 !important;
  }
  .app-header.navbar .navbar-brand.temta-brand {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    justify-content: flex-start;
  }
  .app-header.navbar .navbar-brand.temta-brand .temta-brand-logo {
    display: block !important;
    width: auto !important;
    max-width: min(150px, 100%) !important;
    max-height: 34px !important;
  }
  .app-header.navbar .navbar-brand.temta-brand::before { content: none !important; }
  .app-header.navbar > .navbar-nav {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    justify-content: space-between;
    gap: .35rem;
  }
  .app-header.navbar > .navbar-nav > .nav-item { min-width: 0; }
  .app-header.navbar > .navbar-nav .nav-link { padding: .35rem .3rem; }
  .temta-language-switch { flex: 0 0 auto; gap: .2rem; }
  .temta-language-switch > span { display: none; }
  .temta-language-switch a { min-width: 34px; min-height: 36px; }
  body.header-fixed .app-body { margin-top: 104px; }
  body.sidebar-fixed .sidebar { top: 104px; }
  .sidebar .sidebar-nav {
    height: calc(100vh - 104px - 56px);
    max-height: calc(100dvh - 104px - 56px);
  }
  .questionnaire-progress { top: 104px; }
}