/*
 * Notarin Alexandra Goller | Refined WordPress mega menu
 *
 * Requires: li.mega-menu > ul.mega-menu
 * Load AFTER WordPress core Navigation block CSS.
 * Requires the matching updated mega-menu.js (integrated responsive toggle).
 *
 * Current submenu DOM order:
 * 1 Immobilien | 2 Erbe & Schenkung | 3 Ehe & Partnerschaft
 * 4 Unternehmen & Betrieb | 5 Vereine | 6 Beglaubigungen & Legalisationen
 *
 * Desktop visual layout:
 * Column 1: Immobilien / Unternehmen & Betrieb
 * Column 2: Erbe & Schenkung / Ehe & Partnerschaft
 * Column 3: Vereine / Beglaubigungen & Legalisationen
 *
 * NOTE: CSS grid placement does not change keyboard/screen-reader order.
 * For full order consistency, change the actual WordPress menu structure.
 */

/* Show WordPress's native responsive navigation below 1200px. */
@media (max-width: 1199px) {
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
}

/* DESKTOP: panel and visibility */
@media (min-width: 1200px) {
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
    position: relative;
    width: auto;
    background: inherit;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    li.mega-menu {
    position: relative;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    li.mega-menu > ul.mega-menu {
    position: absolute !important;
    top: calc(100% + 27px) !important;
    left: var(--goller-mega-left, 0px) !important;
    right: auto !important;
    width: var(--goller-mega-width, 960px) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--goller-mega-max-height, min(76vh, 690px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.06fr) minmax(0, 0.88fr);
    align-items: start;
    column-gap: 30px;
    row-gap: 24px;

    padding: 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    border: 1px solid #e1ddd3;
    border-top: 2px solid #795b3f;
    border-radius: 3px;
    background: #fffefa !important;
    color: #292e2d !important;
    box-shadow: 0 20px 42px rgb(26 34 29 / 14%);
    z-index: 100;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none !important;
  }

  /* Once JS binds, JS state exclusively controls desktop visibility. */
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    li.mega-menu[data-goller-bound="true"].goller-mega-open
    > ul.mega-menu:not([hidden]),

  /* JS-independent fallback, only when no JS binding exists. */
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    li.mega-menu:not([data-goller-bound="true"]):hover
    > ul.mega-menu:not([hidden]),
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    li.mega-menu:not([data-goller-bound="true"]):focus-within
    > ul.mega-menu:not([hidden]) {
    display: grid !important;
  }

  /* A hidden panel must never become focusable or mouse-interactive. */
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    li.mega-menu > ul.mega-menu[hidden] {
    display: none !important;
  }

  /* Column placement based on existing WordPress child order. */
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(5) {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(6) {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
}

/* DESKTOP ONLY: section headings and nested links */
@media (min-width: 1200px) {
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li {
    display: block !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li > a.wp-block-navigation-item__content {
    display: inline-block !important;
    padding: 0 0 8px !important;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
    color: #293c37 !important;
    text-decoration: none;
  }

  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li > .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li > ul.wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li
    > ul.wp-block-navigation__submenu-container > li {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li
    > ul.wp-block-navigation__submenu-container a {
    display: block !important;
    white-space: normal !important;
    padding: 4px 0 !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #292e2d;
    text-decoration: none;
    text-underline-offset: 3px;
  }

  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu a:hover,
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu a:focus-visible {
    color: #795b3f !important;
    text-decoration: underline;
  }
}

/* DESKTOP: clear section dividers, consistent heading treatment. */
@media (min-width: 1200px) {
  /* Keep the subtle separators between long sections. */
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(3),
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(4) {
    border-top: 1px solid #eae6dd;
    padding-top: 18px !important;
  }

  /* Match the right column to every other section heading. */
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(5),
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(6) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* The two headings share grid row 1; this creates a small gap. */
  header.wp-block-template-part nav.wp-block-navigation
    li.mega-menu > ul.mega-menu > li:nth-child(6) {
    margin-top: 34px !important;
  }
}

/* DESKTOP: keep hover continuity across the vertical gap below the trigger. */
@media (min-width: 1200px) {
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    li.mega-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 38px;
    background: transparent;
  }
}

/* RESPONSIVE OVERLAY: 0–1199px.
 * The integrated mega-menu.js adds .goller-mobile-bound and its toggle.
 * Without JavaScript, WordPress's default expanded submenu remains available.
 */
@media (max-width: 1199px) {
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    width: 100% !important;
    position: relative;
    column-gap: 12px;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound
    > a.wp-block-navigation-item__content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 9px 0 !important;
  }

  /* WordPress's original submenu button is replaced visually in the overlay.
   * The custom button is only added when JavaScript has bound successfully. */
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound
    > .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu > .goller-mobile-toggle {
    display: grid !important;
    grid-column: 2;
    grid-row: 1;
    place-items: center;
    width: 44px;
    min-height: 44px;
    border: 1px solid #dedad1;
    border-radius: 3px;
    background: transparent;
    color: #293c37;
    cursor: pointer;
    font: inherit;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu > .goller-mobile-toggle::before {
    content: "+";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-expanded > .goller-mobile-toggle::before {
    content: "−";
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu > .goller-mobile-toggle:focus-visible {
    outline: 2px solid #795b3f;
    outline-offset: 2px;
  }

  /* Hide only if the accessible toggle exists. */
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound > ul.mega-menu {
    display: none !important;
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 0 8px 14px !important;
    margin: 6px 0 10px !important;
    border-top: 1px solid #eae6dd !important;
  }

  /* The HTML hidden attribute always wins over WordPress display rules. */
  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound > ul.mega-menu[hidden] {
    display: none !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound.goller-mobile-expanded
    > ul.mega-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound > ul.mega-menu > li {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound > ul.mega-menu > li
    > a.wp-block-navigation-item__content {
    display: inline-block !important;
    padding: 0 0 7px !important;
    color: #293c37 !important;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.4;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound > ul.mega-menu > li
    > .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound > ul.mega-menu > li
    > ul.wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  header.wp-block-template-part nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    li.mega-menu.goller-mobile-bound > ul.mega-menu > li
    > ul.wp-block-navigation__submenu-container a {
    display: block !important;
    padding: 5px 0 !important;
    color: #292e2d;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal !important;
  }
}

/* Outside the overlay, the added button is not visible. */
header.wp-block-template-part nav.wp-block-navigation
  li.mega-menu > .goller-mobile-toggle {
  display: none !important;
}

/* Visible keyboard focus across desktop and tablet. */
header.wp-block-template-part nav.wp-block-navigation
  li.mega-menu > ul.mega-menu a:focus-visible {
  outline: 2px solid #795b3f;
  outline-offset: 3px;
}