/**
 * Site-header surface — main-navigation bar, top-nav strip, branding,
 * sidenav-trigger hamburger, menu-main + dropdowns + language switcher.
 *
 * Most rules live in `@layer components`. The mega-menu first-child
 * override block at the BOTTOM of the file is intentionally unlayered —
 * it must beat the standard-dropdown utility classes the menu twig
 * emits, and unlayered CSS wins over all layers regardless of specificity.
 */

@layer components {

.main-navigation {
  a {
    color: var(--color-slate-900);
  }

  /* Trigger styling is fully inline on the button in site-header.twig. */

  /* `padding` NOT set on ul/li here — Tailwind base reset zeroes it
     already, and `padding: 0` at 0,0,1,2 would override the inline
     `px-[10px] xl:px-[20px]` utilities the menu twig adds to top-level
     items. Each block sets its own padding via utilities. */
  ul {
    margin: 0;

    li {
      transition: background-color 0.3s;
    }

    a {
      display: block;
      color: var(--color-slate-900);
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }
  }

  ul.menu {
    li {
      margin: 0;
    }

    a {
      font-weight: 400;
      font-size: 1rem;
    }
  }

  .region-branding-nav {
    align-self: center;
  }

  .block-system-branding-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;

    a.brand-logo,
    a.brand-name {
      display: flex;
      align-items: center;
      font-size: 2.1rem;
    }

    a.brand-logo img {
      width: 180px;
      height: 43.2px;
    }
  }

  /* `left: auto; transform: translateX(0)` preserve current behaviour
     against a now-removed `@media (max-width: 992px) { left: 50%;
     transform: translateX(-50%) }` that would have re-centred the logo
     on phones. Drop only with a deliberate design call. */
  .brand-logo {
    display: inline-block;
    position: static;
    margin-left: 13px;
    padding: 0 1rem 0 0;
    color: var(--color-slate-900);
    font-size: 2.1rem;
    line-height: 1;
    left: auto;
    transform: translateX(0);
  }

  .region-primary-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    /* Main menu structural styling lives on menu--main.html.twig as
       utility classes. Only the bits that can't go inline stay here:
       the caret `::after`, the standard-dropdown item styling, and the
       first-child mega-menu (split out, unlayered, at the bottom). */
    ul.menu.menu-main {
      > .menu-main__item--expanded {
        > .menu-main__item:after {
          display: inline-block;
          position: relative;
          margin-left: 10px;
          font-family: var(--font-icon);
          content: "\e5cf";
          font-weight: 700;
          font-size: 19px;
        }

        /* Standard-dropdown items — `inline-block` stacks them
           vertically (submenu UL is `flex-col` from the twig). */
        > .menu-main__submenu > .menu-main__item {
          display: inline-block;
          margin-bottom: 5px;
          font-weight: 400;

          a {
            line-height: 1.8;
            cursor: pointer;

            &:hover {
              color: var(--color-brand);
            }
          }
        }

        /* First-child mega-menu overrides — unlayered block at the
           bottom of this file. */
      }
    }

    /* menutechnavigation block (Login + CTA) is utility-classed at the
       source — see templates/navigation/menu--menutech.html.twig. */

    /* Language switcher: `is-active` is added late by Drupal (after twig
       macros run), so detection in a template override didn't fire.
       Targeting via CSS is the reliable option. */
    :is(#block-languageswitcher, .block-languageswitcher) ul.menu {
      background-color: var(--color-brand);

      li.is-active {
        float: left;

        a:after {
          position: relative;
          left: 4px;
          content: "►";
          font-size: 8px;
        }
      }

      li:not(.is-active) {
        position: relative;
        width: 0;
        padding: 0;
        overflow: hidden;

        a {
          white-space: nowrap;
        }
      }
    }
  }
}

/* Outside `.main-navigation` — the branding block can appear elsewhere. */
.block-system-branding-block a {
  color: var(--color-slate-900);
  text-decoration: none;

  &:visited {
    color: var(--color-slate-900);
  }
}

}
/* end @layer components */


/* Mega-menu (first-child of menu-main). Intentionally UNLAYERED — these
   rules must beat the standard-dropdown utilities the menu twig emits
   on every submenu UL, and unlayered CSS wins over all layers. */
.main-navigation .region-primary-nav ul.menu.menu-main > .menu-main__item--expanded:first-child {
  > .menu-main__item {
    display: inline-block;
    position: relative;
    font-weight: 400;
  }

  a {
    padding: 0;

    &:hover,
    &.is-active {
      background: transparent;
      color: var(--color-brand);
    }
  }

  > .menu-main__submenu {
    /* Centred at container width (80rem = same as top nav). Items
       inside align with branding/menu above. `:before`/`:after` provide
       the full-bleed white background.

       `min-width: 0` neutralises the `min-w-full` utility — without it,
       min-width: 100% (= 100vw, since the positioning ancestor is the
       <nav>) would override `max-width: 80rem`. */
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    width: 100vw;
    max-width: 80rem;
    min-width: 0;
    padding: 60px 1rem;
    box-shadow: -6px 3px 6px rgba(0, 0, 0, 0.16);

    &:before,
    &:after {
      display: block;
      position: absolute;
      top: 0;
      width: 100vw;
      height: 100%;
      background: var(--color-white);
      content: "";
    }
    &:before {
      right: 100%;
      box-shadow: -6px 3px 6px rgba(0, 0, 0, 0.16);
    }
    &:after {
      left: 100%;
    }

    > .menu-main__item {
      display: flex;
      z-index: 10;
      flex-direction: column;
      align-items: flex-start;
      height: auto;

      &:not(:last-child) {
        margin-right: 120px;
      }

      &:before {
        display: inline-block;
        width: 60px;
        height: 60px;
        margin-right: 20px;
        margin-bottom: 15px;
        content: "";
      }
      /* Icon-by-title (data-attribute) — menu--main.html.twig maps the
         column title to a stable `data-icon` value via `mega_icon_map`.
         Add a new mapping entry + new selector here when a column is
         added. Decoupled from menu position. */
      &[data-icon="features"]:before {
        background: url("/themes/custom/menutech_next/img/features.png") center no-repeat;
        background-size: contain;
      }
      &[data-icon="menus"]:before {
        background: url("/themes/custom/menutech_next/img/menus.png") center no-repeat;
        background-size: contain;
      }
      &[data-icon="customers"]:before {
        background: url("/themes/custom/menutech_next/img/customers.png") center no-repeat;
        background-size: contain;
      }

      > a,
      > span {
        display: inline-block;
        margin: 12px 0 8px;
        font-weight: 700;
        line-height: 1.2rem;
      }
    }

    .menu-main__submenu {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.3;
    }

    a:hover {
      color: var(--color-brand);
    }

    > .menu-main__item:first-child .menu.menu-main__submenu,
    > .menu-main__item:last-child .menu.menu-main__submenu {
      display: grid;
      grid-template-columns: repeat(2, max-content);
      grid-gap: 0 40px;
    }
  }
}

/* ---- Mobile drawer accordion ----
   The desktop dropdowns reveal on hover, which never fires on touch, so the
   top-level expandable items ("Menu planning software", "Resources") were dead
   in the drawer — no link, no toggle. drawer-submenu.js sets `data-submenu-open`
   on the tapped item; these rules collapse every drawer submenu and reveal the
   first level in-flow when its parent is open, with a rotating chevron. Deeper
   levels stay collapsed (their items act as links), matching production.
   Unlayered, so they beat the menu's inline `in-drawer:hidden` + absolute-
   position utilities. */
[data-drawer] .menu-main__submenu {
  display: none;
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.25rem 0 0.75rem;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}

[data-drawer] li.menu-main__item[data-submenu-open] > .menu-main__submenu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-drawer] .menu-main__submenu > li {
  padding: 0.5rem 0;
}

/* Stack the label above its revealed submenu (the drawer default is flex-row,
   which would push the submenu out to the side of the label). */
[data-drawer] li.has-drawer-submenu {
  flex-direction: column;
}

/* Full-width tappable header; a divider drops in below it while open to
   separate the header from its revealed links. */
[data-drawer] li.has-drawer-submenu > .menu-main__item,
[data-drawer] li.has-drawer-submenu > .menu-main__link {
  cursor: pointer;
  justify-content: center;
  width: 100%;
}
[data-drawer] li.has-drawer-submenu[data-submenu-open] > .menu-main__item,
[data-drawer] li.has-drawer-submenu[data-submenu-open] > .menu-main__link {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-gray-100);
}

[data-drawer] li.has-drawer-submenu > .menu-main__item::after,
[data-drawer] li.has-drawer-submenu > .menu-main__link::after {
  content: "expand_more";
  margin-left: 6px;
  font-family: "Material Symbols Outlined";
  font-size: 1.25em;
  line-height: 1;
  transition: transform 0.2s ease;
}

[data-drawer] li.has-drawer-submenu[data-submenu-open] > .menu-main__item::after,
[data-drawer] li.has-drawer-submenu[data-submenu-open] > .menu-main__link::after {
  transform: rotate(180deg);
}