/* ===== Header base ===== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: top 0.6s ease-in-out;
}

body.admin-bar header {
  top: 32px;
}

/* Nav hover */
nav a:hover {
  color: var(--wp--preset--color--accent-1) !important;
  text-decoration: none;
}

/* Navigation accessibility tweaks */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
  margin-bottom: 3px;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
  outline-offset: 4px;
}

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  outline-offset: 0;
}

/* Mobile nav layout */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__container {
  padding-top: 4rem !important;
}

.wp-block-navigation__responsive-container-close {
  top: 5%;
}

/* Optional: Modal size (falls das Modal im Header steckt) */
#modal-1 {
  max-height: fit-content;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
  padding-top: 4.5rem !important;
}

.header-nav.wp-block-navigation {
    padding: 0.5rem;
    border-radius: 0.5rem;

    /* change svg size */
    .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
        width: 32px;
        height: 32px;
    }
}

/* Navigation overlay animation (nur wenn reduced-motion NICHT aktiv) */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    animation: none !important;
    transform-origin: top;
    animation: navSlideDown 520ms cubic-bezier(.22, 1, .36, 1) both !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    animation: navContentIn 560ms cubic-bezier(.22, 1, .36, 1) both !important;
    animation-delay: 70ms !important;
  }

  @keyframes navSlideDown {
    0%   { opacity: 0; transform: translateY(-18px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes navContentIn {
    0%   { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* Glass look */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover-Effekt Navi-Links */
header nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast) !important;
}

footer nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-1) !important;
}

header nav .wp-block-navigation-item__content,
footer nav .wp-block-navigation-item__content{
  background-image: linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.5s ease-in-out;
}

footer nav .wp-block-navigation-item__content{
  background-image: linear-gradient(var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-1));
}

header nav .wp-block-navigation-item__content:hover,
footer nav .wp-block-navigation-item__content:hover{
  background-size: 100% 2px;
}

@media screen and (max-width: 768px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    padding-top: 1rem !important;
  }
  .wp-block-navigation__responsive-container-close {
  top: 0% !important;
  }
}