/* Model 4 hamburger — circle with single chevron, becomes X on open */

.navbar-toggler {
  border: 2px solid var(--slate);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Hide Bootstrap's default SVG toggler icon */
.navbar-toggler-icon {
  background-image: none !important;
  width: 30px;
  height: 30px;
  position: relative;
  top: -4px;
  left: 0.5px;
  transition: top 0.3s ease;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  top: -6px;
}

/* Both bars overlaid at centre = single chevron at rest */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: none;
  border-bottom: 2px solid var(--slate);
  border-right: 2px solid var(--slate);
  border-radius: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

/* Open state — both bars shift up together, second additionally rotates */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: translateY(-2px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(225deg);
  transform-origin: 75% 105%;
  left: -1.5px;
  top: -3px;
}

/* ---- Responsive ---- */
@media (max-width: 1400px) {}

@media (max-width: 1200px) {}

@media (max-width: 992px) {}

@media (max-width: 768px) {}

@media (max-width: 576px) {}