/* ccx-nav26 — the Services drop-down after round 16.
 *
 * The bar lost three entries; the Shopify apps panel moved into the Services
 * drop-down and now sits under the five service links. Two things had to be
 * sorted out for that, both purely visual:
 *
 *   1. the links row and the panel are two Elementor containers with a skin
 *      each, so they arrived as two cards with a 38px see-through hole in
 *      between. They are one sheet now.
 *   2. on phones the drop-down lays its rows out side by side, which parked
 *      the panel 20px past the right edge of the screen. It stacks now.
 *
 * The class .ccnav-mega (desktop) and .ccnav-mega-m (burger) are set by
 * tools/r16-nav/build.php on the English header only. The German header has
 * no panel, so its Services drop-down keeps the plain strip and none of these
 * rules reach it, even though both headers share the same element ids.
 */

/* ------------------------------------------------- desktop: one sheet ---- */

@media (min-width: 1025px) {

  /* the drop-down stacks its two rows with nothing in between */
  .custom_header .inner_megamenu.ccnav-mega {
    row-gap: 0 !important;
    gap: 0 !important;
  }

  /* The panel gives up its own background, blur and frame. It used to be a
     card of its own below the bar; inside the drop-down that would be a
     second pane of glass on top of the first one, which reads darker than
     the links row above it. The skin stays on its inner box, see below. */
  .custom_header .inner_megamenu.ccnav-mega > .elementor-element-52b7744 {
    margin-top: 0 !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
  }

  /* the links row keeps its glass but loses the lower edge, the sheet goes on */
  .custom_header .inner_megamenu.ccnav-mega > .elementor-element-eef8699 > .e-con-inner {
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* One tint for both rows. The panel used to be two panes of glass stacked on
     each other, its own and the one on its inner box, which together came out
     around 82% cover. Taking the outer one away left a single 57% pane, and at
     the height the drop-down now reaches the hero headline read straight
     through it. Both rows get the same value instead, so the sheet is even
     from top to bottom and dark enough to sit over a headline. */
  .custom_header .inner_megamenu.ccnav-mega > .elementor-element-eef8699 > .e-con-inner,
  .custom_header .inner_megamenu.ccnav-mega > .elementor-element-52b7744 > .e-con-inner {
    background-color: rgba(15, 22, 41, .93) !important;
    backdrop-filter: blur(17.5px) !important;
    -webkit-backdrop-filter: blur(17.5px) !important;
  }

  /* The panel continues that same sheet and closes it at the bottom. Its box
     is pinned to the box of the links row above it, so the two rows share one
     outline instead of stepping in and out: the links row is capped at 1416px
     and runs full width below that, and min(100%, 1416px) reproduces exactly
     that on every screen (measured identical at 1100, 1280 and 1440). Its
     upper edge is the single divider line between links and app block. */
  .custom_header .inner_megamenu.ccnav-mega > .elementor-element-52b7744 > .e-con-inner {
    width: min(100%, 1416px) !important;
    max-width: none !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 0 16px 16px !important;
    /* 44px puts the first heading of the panel on the same line as the first
       service link above it (the menu list indents its links by 40px, the
       remaining four come from the frame and the padding of the two boxes) */
    padding: 34px 44px 40px !important;
  }
}

/* The bar carries six entries now instead of nine, so the tightened spacing
   that round 8 needed between 1025 and 1259px has lost its reason. Written
   with html body in front so it wins over the rule in the header template
   whatever order the two stylesheets end up in. */
@media (min-width: 1025px) and (max-width: 1259px) {
  html body .custom_header .headermenu .e-n-menu-heading {
    --n-menu-title-space-between: 36px !important;
  }
}

/* -------------------------------------------------- burger: stack it ---- */

@media (max-width: 1024px) {

  /* The drop-down of the burger is a row. With only the links in it that was
     invisible; with the panel as a second child the panel landed next to the
     links, off the right edge, and the menu looked empty below the links.
     Column, and the panel is where it belongs. The height cap the menu script
     writes inline is lifted the same way round 8 lifted it on the panel, so
     the burger scrolls as one list instead of scrolling inside itself. */
  .e-n-menu-content .elementor-element-a468fa3.ccnav-mega-m {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .e-n-menu-content .elementor-element-a468fa3.ccnav-mega-m > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* the panel opens with a divider instead of butting straight against the links */
  .e-n-menu-content .elementor-element-a468fa3.ccnav-mega-m > .elementor-element-ee9a8e1 {
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
  }

  .e-n-menu-content .elementor-element-a468fa3.ccnav-mega-m > .elementor-element-ee9a8e1 > .e-con-inner {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }
}