/**
 * Static Amandla header branding.
 *
 * The colors and navigation are intentionally fixed in the plugin so the
 * Amandla team edits content rather than presentation settings.
 */

.amandla-site-header {
  color: #ffcc00;
  background: #008001;
  border-bottom-color: rgba(255, 204, 0, 0.22);
}

.amandla-site-header__inner {
  width: 100%;
  max-width: none;
  min-height: 118px;
  padding: 0 clamp(1.5rem, 2.1vw, 2.75rem) 0 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 4rem);
}

.amandla-site-branding {
  display: flex;
  min-width: 0;
  height: 118px;
  align-self: stretch;
  align-items: stretch;
  gap: 0;
}

.amandla-site-brand {
  display: none;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  align-items: center;
  padding: 0;
  color: #ffcc00;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(3.4rem, 4.3vw, 5.7rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.82;
  text-decoration: none;
}

.amandla-site-brand__name {
  display: block;
  min-width: 0;
  line-height: 0.82;
  white-space: nowrap;
}

.amandla-site-brand__name::before,
.amandla-site-brand__name::after {
  content: none;
  display: none;
}

.amandla-site-project-mark {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 100%;
  flex: 0 1 auto;
  align-items: stretch;
  justify-content: flex-start;
  color: #ffcc00;
  text-decoration: none;
  overflow: hidden;
}

.amandla-site-project-mark__image {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: left center;
}

.amandla-site-brand:focus-visible,
.amandla-site-project-mark:focus-visible,
.amandla-site-navigation__link:focus-visible {
  outline-color: #ffcc00;
}

.amandla-site-navigation__list {
  gap: clamp(1.55rem, 2.2vw, 2.75rem);
}

.amandla-site-navigation__link {
  color: #ffcc00;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.1rem, 1.25vw, 1.55rem);
  font-weight: 400;
}

.amandla-site-menu-toggle {
  color: #ffcc00;
}


/* Primary navigation items and the compact Episodes dropdown. */
.amandla-site-navigation__item {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.amandla-site-navigation__submenu {
  position: absolute;
  z-index: 120;
  top: 100%;
  left: 50%;
  display: grid;
  min-width: 15rem;
  padding: 0.4rem 0;
  background: #008001;
  border: 1px solid #ffcc00;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.35rem);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  pointer-events: none;
}

.amandla-site-navigation__item--has-submenu:hover .amandla-site-navigation__submenu,
.amandla-site-navigation__item--has-submenu:focus-within .amandla-site-navigation__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.amandla-site-navigation__submenu-link {
  display: block;
  padding: 0.62rem 0.85rem;
  color: #ffcc00;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.amandla-site-navigation__submenu-link:hover,
.amandla-site-navigation__submenu-link:focus-visible,
.amandla-site-navigation__submenu-link--current,
.amandla-site-navigation__submenu-link[aria-current="page"] {
  color: #ffcc00 !important;
  background: rgba(255, 204, 0, 0.12);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.amandla-site-navigation__submenu-link:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: -3px;
}

.amandla-site-navigation__submenu-toggle {
  display: none;
}

.amandla-site-navigation__submenu-toggle-indicator::before {
  content: "+";
}

.amandla-site-navigation__submenu-toggle[aria-expanded="true"] .amandla-site-navigation__submenu-toggle-indicator::before {
  content: "−";
}

@media (max-width: 1500px) {
  .amandla-site-header__inner {
    min-height: 104px;
  }

  .amandla-site-brand {
    font-size: clamp(3.1rem, 4.2vw, 4.9rem);
  }

  .amandla-site-branding {
    height: 104px;
  }
}

@media (max-width: 1280px) {
  .amandla-site-header__inner {
    min-height: 88px;
    padding: 0 1.25rem 0 0;
  }

  .amandla-site-branding {
    max-width: calc(100vw - 8rem);
    height: 88px;
    gap: 0;
  }

  .amandla-site-brand {
    font-size: clamp(2.65rem, 5vw, 4rem);
  }


  .amandla-site-navigation {
    background: #008001;
    border-bottom-color: rgba(255, 204, 0, 0.28);
  }

  .amandla-site-navigation__link {
    border-bottom-color: rgba(255, 204, 0, 0.28);
  }

  .amandla-site-navigation__item {
    display: block;
    width: 100%;
  }

  .amandla-site-navigation__item--has-submenu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .amandla-site-navigation__item--has-submenu > .amandla-site-navigation__link {
    grid-column: 1;
    grid-row: 1;
    border-bottom: 1px solid rgba(255, 204, 0, 0.28);
  }

  .amandla-site-navigation__submenu-toggle {
    display: inline-flex;
    min-width: 3rem;
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    color: #ffcc00;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 204, 0, 0.28);
    font-family: var(--amandla-font-display);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
  }

  .amandla-site-navigation__submenu-toggle:hover,
  .amandla-site-navigation__submenu-toggle:focus,
  .amandla-site-navigation__submenu-toggle:focus-visible {
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.08);
  }

  .amandla-site-navigation__submenu-toggle:focus-visible {
    outline: 2px solid #ffcc00;
    outline-offset: -3px;
  }

  .amandla-site-navigation__submenu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    padding: 0 0 0.35rem 1rem;
    grid-column: 1 / -1;
    grid-row: 2;
    border: 0;
    border-bottom: 1px solid rgba(255, 204, 0, 0.28);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    pointer-events: auto;
  }

  .amandla-site-navigation__item--has-submenu.is-submenu-open > .amandla-site-navigation__submenu {
    display: grid;
  }

  .amandla-site-navigation__submenu-link {
    padding: 0.55rem 0;
    font-size: 0.95rem;
    white-space: normal;
  }

  /* Keep CKUT's global link hover styles from overriding the mobile Amandla menu. */
  .amandla-site-navigation__link,
  .amandla-site-navigation__link:hover,
  .amandla-site-navigation__link:focus,
  .amandla-site-navigation__link:focus-visible,
  .amandla-site-navigation__submenu-link,
  .amandla-site-navigation__submenu-link:hover,
  .amandla-site-navigation__submenu-link:focus,
  .amandla-site-navigation__submenu-link:focus-visible,
  .amandla-site-navigation__submenu-link--current,
  .amandla-site-navigation__submenu-link[aria-current="page"] {
    color: #ffcc00 !important;
  }

}

@media (max-width: 760px) {
  .amandla-site-header__inner {
    min-height: 78px;
    padding: 0 1rem 0 0;
  }

  .amandla-site-branding {
    max-width: calc(100vw - 6.5rem);
    height: 78px;
    gap: 0;
  }

  .amandla-site-brand {
    font-size: clamp(2.3rem, 11vw, 3.35rem);
  }

}

@media (max-width: 520px) {
  .amandla-site-header__inner {
    min-height: 64px;
  }

  .amandla-site-branding {
    height: 64px;
    gap: 0;
  }

  .amandla-site-brand {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

}