/**
 * @file
 * Styles for the header component.
 */

.header {
  margin-bottom: var(--spacing-2xl);
  position: relative;
  padding-top: var(--spacing-4xl);
}

@media screen and (min-width: 60rem) {
  .header {
    padding-top: 0;
  }
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--spacing-lg);
}

.branding__logo svg {
  width: 65%;
  fill: var(--theme-dark-logo-color);
}

@media screen and (min-width: 60rem) {
  .branding__logo svg {
    width: 100%;
  }
}

.region__inner--header .block-menu {
  display: none;
}

@media screen and (min-width: 960px) {
  .header__off-canvas {
    display: none;
  }

  .region__inner--header .block-menu {
    display: block;
  }
}

.header__off-canvas-toggle {
  color: var(--theme-dark-body-color);
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-lg);
  background: transparent;
}

.header__off-canvas-toggle:hover,
.header__off-canvas-toggle:focus-visible {
  background-color: var(--color-gray-700);
  border-color: var(--color-primary);
  color: var(--color-black);
  text-decoration: none;
}

.branding__logo .icon svg {
  transition: filter 0.3s ease;
}

.branding__logo:hover .icon svg {
  animation: pastel-glow 5s linear infinite alternate;
}

@keyframes pastel-glow {
  0% {
    filter: drop-shadow(0 0 5px rgba(var(--rgb-glow-pink), 0.5))
      drop-shadow(0 0 10px rgba(var(--rgb-glow-pink), 0.3)) drop-shadow(0 0 15px rgba(var(--rgb-glow-pink), 0.1));
  }

  20% {
    filter: drop-shadow(0 0 5px rgba(var(--rgb-glow-blue), 0.5))
      drop-shadow(0 0 10px rgba(var(--rgb-glow-blue), 0.3)) drop-shadow(0 0 15px rgba(var(--rgb-glow-blue), 0.1));
  }

  40% {
    filter: drop-shadow(0 0 5px rgba(var(--rgb-glow-yellow), 0.5))
      drop-shadow(0 0 10px rgba(var(--rgb-glow-yellow), 0.3)) drop-shadow(0 0 15px rgba(var(--rgb-glow-yellow), 0.1));
  }

  60% {
    filter: drop-shadow(0 0 5px rgba(var(--rgb-glow-green), 0.5))
      drop-shadow(0 0 10px rgba(var(--rgb-glow-green), 0.3)) drop-shadow(0 0 15px rgba(var(--rgb-glow-green), 0.1));
  }

  80% {
    filter: drop-shadow(0 0 5px rgba(var(--rgb-glow-purple), 0.5))
      drop-shadow(0 0 10px rgba(var(--rgb-glow-purple), 0.3)) drop-shadow(0 0 15px rgba(var(--rgb-glow-purple), 0.1));
  }

  100% {
    filter: drop-shadow(0 0 5px rgba(var(--rgb-glow-pink), 0.5))
      drop-shadow(0 0 10px rgba(var(--rgb-glow-pink), 0.3)) drop-shadow(0 0 15px rgba(var(--rgb-glow-pink), 0.1));
  }
}