/* Copyright CCX Technologies 2024 */

:root {
  --menu-height: 40px;
  --menu-padding: 15px;
  --menu-logo-width: 90px;
  --menu-item-padding: 10px;
}

.menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid;
  border-color: var(--color-fg-primary-muted);
}

.menu-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: var(--menu-padding);
  padding-bottom: var(--menu-padding);
}

.menu-bar {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.menu-logo {
  height: var(--menu-height);
  flex-grow: 5;
  padding-left: 40px;
}

.menu-logo svg {
  height: 100%;
  width: var(--menu-logo-width);
  fill: var(--color-fg-primary);
}

.menu-item {
  flex-grow: 1;
  padding: var(--menu-item-padding);
  display: flex;
  justify-content: center;
  font-size: 1.15em;
}

@media (max-width: 500px) {
  .menu-item {
    font-size: 0.9rem;
  }

  .menu-popup-section a {
    font-size: 1rem;
  }
}

.menu-item a {
  text-decoration: none;
  color: var(--color-fg-primary);
}

.menu-item a:hover,
.menu-item a:focus,
.menu-popup-section a:hover,
.menu-popup-section a:focus {
  color: var(--color-fg-primary-muted);
}

.menu-item a:focus {
  pointer-events: none;
}

.menu-popup {
  display: none;
  width: 100%;
  padding-bottom: var(--menu-padding);
  flex-wrap: wrap;
}

.menu:has(.menu-applications:focus-within) .menu-popup.menu-applications {
  display: flex;
}

.menu:has(.menu-products:focus-within) .menu-popup.menu-products {
  display: flex;
}
.menu:has(.menu-services:focus-within) .menu-popup.menu-services {
  display: flex;
}

.menu:has(.menu-about:focus-within) .menu-popup.menu-about {
  display: flex;
}

.menu-popup:has(.menu-popup-section a:active) {
  display: flex;
}

.menu-popup-section {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: var(--menu-item-padding);
  font-size: 1.1em;
}

.menu-popup-section a {
  text-decoration: none;
  color: var(--color-fg-primary);
  padding-left: 10px;
  font-family: var(--font-heading);
  text-transform: none;
  white-space: nowrap;
}