/* =========================================
   Linda Mwananchi Diaspora USA — Navbar
   ========================================= */

:root {
  --nav-h: 96px;
  --nav-solid-bg: #4a4848;
  --nav-dropdown-bg: #343434;
  --nav-drawer-bg: #041d35;
  --nav-text: #ffffff;
  --nav-blue: #2eb3f8;
  --nav-blue-dark: #287cf3;
  --nav-focus: #ffffff;
}

/* =========================================
   Base
   ========================================= */

.navbar,
.navbar * {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--nav-h, 96px) + 1rem);
}

.navbar {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;

  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.5rem);

  padding:
    clamp(0.4rem, 0.75vw, 0.75rem)
    clamp(1rem, 4vw, 5rem);

  color: var(--nav-text);
  background: var(--nav-solid-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);

  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

/* Transparent over the homepage hero */

body.is-home .navbar:not(.navbar--solid) {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Solid after scrolling beyond the hero */

body.is-home .navbar.navbar--solid,
body.nav-open .navbar {
  background: var(--nav-solid-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

/* Fixed-navbar offset on inner pages */

body:not(.is-home) .page-main {
  padding-top: var(--nav-h, 96px);
}

/* Prevent background scrolling while the mobile menu is open */

body.nav-open {
  overflow: hidden;
}

/* =========================================
   Logo
   ========================================= */

.navbar .logo {
  position: relative;
  z-index: 2;

  display: inline-flex;
  min-width: 0;
  align-items: center;
  flex: 0 0 auto;

  text-decoration: none;
}

.navbar .logo img {
  display: block;

  width: auto;
  height: clamp(72px, 6.5vw, 112px);
  max-width: min(30vw, 250px);

  object-fit: contain;
}

/* =========================================
   Navigation layout
   ========================================= */

.nav-strip {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);

  margin-left: auto;
}

.nav-links {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(0.75rem, 1.25vw, 1.5rem);

  margin: 0;
  padding: 0;

  list-style: none;
  white-space: nowrap;
}

.nav-links > li {
  position: relative;
}

/* =========================================
   Navigation links
   ========================================= */

.nav-links > li > a,
.nav-links .dropdown-toggle,
.nav-links .nav-disabled {
  position: relative;

  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  padding: 0.45rem 0.1rem;

  color: var(--nav-text);
  background: none;
  border: 0;

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.7rem, 0.72vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;
}

.nav-links .nav-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Animated underline */

.nav-links > li > a::after,
.nav-links .dropdown-toggle::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;

  width: 0;
  height: 2px;
  margin: 0 auto;

  background: var(--nav-blue);

  transition: width 0.18s ease;
}

.nav-links > li > a:hover::after,
.nav-links > li > a:focus-visible::after,
.nav-links > li > a.is-active::after,
.nav-links .dropdown-toggle:hover::after,
.nav-links .dropdown-toggle:focus-visible::after,
.nav-links .dropdown-toggle.is-active::after {
  width: 100%;
}

.nav-links > li > a:focus-visible,
.nav-links .dropdown-toggle:focus-visible,
.btn-nav:focus-visible,
.menu-toggle:focus-visible,
.dropdown-menu a:focus-visible {
  outline: 3px solid var(--nav-focus);
  outline-offset: 4px;
}

/* =========================================
   Dropdown controls
   ========================================= */

.dropdown {
  position: relative;
}

.dropdown-chevron {
  width: 0.45rem;
  height: 0.45rem;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: translateY(-2px) rotate(45deg);

  transition: transform 0.18s ease;
}

.dropdown.open > .dropdown-toggle .dropdown-chevron {
  transform: translateY(2px) rotate(225deg);
}

/* =========================================
   Dropdown menus
   ========================================= */

.dropdown-menu {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 0.5rem);
  left: 0;

  min-width: 230px;

  margin: 0;
  padding: 0.5rem 0;

  list-style: none;

  visibility: hidden;
  opacity: 0;

  background: var(--nav-dropdown-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.65rem;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);

  transform: translateY(-0.4rem);
  pointer-events: none;

  transition:
    visibility 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
}

.dropdown-menu a,
.dropdown-menu .dropdown-disabled {
  display: block;

  width: 100%;
  padding: 0.7rem 1rem;

  color: #ffffff;

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-decoration: none;
  text-transform: none;
}

.dropdown-menu .dropdown-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: #111111;
}

.dropdown.open > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu {
  visibility: visible;
  opacity: 1;

  transform: translateY(0);
  pointer-events: auto;
}

/* Mouse hover support on desktop */

@media (min-width: 1081px) and (hover: hover) {
  .dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);
    pointer-events: auto;
  }

  .dropdown:hover > .dropdown-toggle .dropdown-chevron {
    transform: translateY(2px) rotate(225deg);
  }
}

/* =========================================
   Authentication buttons
   ========================================= */

.btn-group {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 0;

  overflow: hidden;

  background: var(--nav-blue);
  border-radius: 999px;
}

.btn-nav {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;

  padding: 0.65rem 0.9rem;

  color: #07111b;
  border-right: 1px solid rgba(0, 0, 0, 0.16);

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.68rem, 0.7vw, 0.86rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.btn-nav:last-child {
  border-right: 0;
}

.btn-nav:hover {
  color: #ffffff;
  background: var(--nav-blue-dark);
}

/* =========================================
   Hamburger
   ========================================= */

.menu-toggle {
  position: relative;
  z-index: 2;

  display: none;

  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0.35rem;

  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  right: 5px;
  left: 5px;

  height: 3px;

  background: #ffffff;
  border-radius: 999px;

  transition:
    top 0.2s ease,
    bottom 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.menu-toggle span:nth-child(1) {
  top: 9px;
}

.menu-toggle span:nth-child(2) {
  top: 19px;
}

.menu-toggle span:nth-child(3) {
  bottom: 9px;
}

.menu-toggle.open span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  bottom: 20px;
  transform: rotate(-45deg);
}

/* =========================================
   Compact desktop
   ========================================= */

@media (max-width: 1280px) and (min-width: 1081px) {
  .navbar {
    gap: 1rem;

    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .navbar .logo img {
    height: clamp(72px, 6vw, 88px);
    max-width: 190px;
  }

  .nav-strip,
  .nav-links {
    gap: 0.75rem;
  }

  .nav-links > li > a,
  .nav-links .dropdown-toggle,
  .nav-links .nav-disabled {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }

  .btn-nav {
    padding-right: 0.7rem;
    padding-left: 0.7rem;

    font-size: 0.65rem;
  }
}

/* =========================================
   Mobile navigation
   ========================================= */

@media (max-width: 1080px) {
  .navbar {
    min-height: 72px;
    padding: 0.4rem clamp(1rem, 4vw, 2rem);
  }

  .navbar .logo img {
    width: auto;
    height: 64px;
    max-width: min(65vw, 210px);
  }

  .menu-toggle {
    display: block;
  }

  .nav-strip {
    display: none;
  }

  body.nav-open .nav-strip {
    position: fixed;
    z-index: 999;
    inset:
      var(--nav-h, 72px)
      0
      0
      0;

    display: flex;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1.25rem;

    margin: 0;
    padding:
      1rem
      clamp(1rem, 5vw, 2rem)
      calc(2rem + env(safe-area-inset-bottom));

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--nav-drawer-bg);
  }

  body.nav-open .nav-links {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 0;

    white-space: normal;
  }

  body.nav-open .nav-links > li {
    width: 100%;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  body.nav-open .nav-links > li > a,
  body.nav-open .nav-links .dropdown-toggle,
  body.nav-open .nav-links .nav-disabled {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;

    padding: 0.8rem 0.25rem;

    color: #ffffff;

    font-size: 0.9rem;
    letter-spacing: 0.035em;
    text-align: left;
  }

  body.nav-open .nav-links > li > a::after,
  body.nav-open .nav-links .dropdown-toggle::after {
    display: none;
  }

  body.nav-open .dropdown-menu {
    position: static;

    display: none;
    min-width: 0;

    margin: 0 0 0.75rem;
    padding: 0.25rem 0;

    visibility: visible;
    opacity: 1;

    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 0.4rem;
    box-shadow: none;

    transform: none;
    pointer-events: auto;
  }

  body.nav-open .dropdown.open > .dropdown-menu {
    display: block;
  }

  body.nav-open .dropdown-menu a,
  body.nav-open .dropdown-menu .dropdown-disabled {
    padding: 0.75rem 1rem;

    font-size: 0.86rem;
  }

  body.nav-open .btn-group {
    width: 100%;
    gap: 0.75rem;

    overflow: visible;

    background: transparent;
    border-radius: 0;
  }

  body.nav-open .btn-nav {
    min-height: 46px;

    flex: 1 1 0;

    padding: 0.75rem 1rem;

    background: var(--nav-blue);
    border: 0;
    border-radius: 999px;

    font-size: 0.82rem;
  }
}

/* =========================================
   Small phones
   ========================================= */

@media (max-width: 480px) {
  .navbar {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .navbar .logo img {
    height: 58px;
    max-width: 68vw;
  }

  body.nav-open .nav-strip {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  body.nav-open .btn-group {
    flex-direction: column;
  }

  body.nav-open .btn-nav {
    width: 100%;
  }
}

/* =========================================
   Reduced motion
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar *,
  .navbar *::before,
  .navbar *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}