/* Freiheitshandy + Bitcoin mega navigation */

.header-section {
   position: relative;
}

.header-toggle {
   padding: 0;
}

.header-toggle:focus-visible,
.megamenu-trigger-button:focus-visible,
.megamenu-item:focus-visible,
.mobile-nav-close:focus-visible,
.mobile-nav-link:focus-visible {
   outline: 2px solid var(--ghost-accent-color);
   outline-offset: 3px;
}

.megamenu-trigger-button {
   display: inline-flex;
   align-items: center;
   gap: 0.35em;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: 1.5;
   margin: 0;
   padding: 0;
   color: inherit;
   cursor: pointer;
   border: none;
   background: none;
}

.navigation-overflow-toggle span {
   display: inline-flex;
}

.navigation-overflow-toggle[aria-expanded="true"] svg {
   transform: rotate(180deg);
}

.megamenu-trigger-caret svg {
   width: 0.7em;
   height: 0.7em;
   fill: currentColor;
   stroke: none;
   transition: transform 0.15s ease;
}
.megamenu-trigger-button.is-active .megamenu-trigger-caret svg,
.megamenu-trigger-button[aria-expanded="true"] .megamenu-trigger-caret svg {
   transform: rotate(180deg);
}

.megamenu-panel {
   --megamenu-icon-color: var(--ghost-accent-color);
   position: absolute;
   z-index: 20;
   top: 100%;
   right: 0;
   left: 0;
   top: 90px;
   /* padding: 0 var(--margin-wrap-left-right) 1.6rem;*/
   border: 0.5px solid #EFEEF0;
   border-radius: 0.8rem;
   background-color: #fff;
}

.megamenu-panel[hidden],
.mobile-nav[hidden] {
   display: none !important;
}

.megamenu-grid {
   display: grid;
   gap: 0.4rem;
   max-width: var(--max-width-global-wrap);
   margin: 0 auto;
   padding: 1.2rem;
   /* Testing: desktop mega-menu chrome disabled. Uncomment the original
      border, border-radius, and box-shadow below to restore the visible panel. */
    /* border: 1px solid var(--color-border-one); */
    /* border-radius: calc(var(--border-radius) / 2); */
    /*box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .28); */
   /* border: none; */
   /* box-shadow: none; */
   /* background-color: var(--color-body);*/
}

.megamenu-grid--two-column {
   grid-template-columns: 1fr 1fr;
}

.megamenu-grid--one-column {
   grid-template-columns: 1fr;
   max-width: 36rem;
   margin-left: 0;
}

.megamenu-item {
   display: flex;
   align-items: flex-start;
   gap: 1.2rem;
   padding: 1.2rem 1.4rem;
   color: var(--color-font-one);
   text-decoration: none;
   border-radius: calc(var(--border-radius) / 2);
   max-width: 330px;
}

.megamenu-item.is-active,
.megamenu-item:hover {
   background-color: var(--color-one);
}

.megamenu-item-icon {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   width: 2.8rem;
   height: 2.8rem;
   color: var(--megamenu-icon-color);
}

.megamenu-item-icon svg {
   width: 2.6rem;
   height: 2.6rem;
   fill: none;
   stroke: currentColor;
}

.megamenu-item-copy {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   min-width: 0;
}

.megamenu-item-title {
   font-family: var(--font-family-three);
   font-size: 1.9rem;
   font-weight: var(--font-weight-three-bold);
   line-height: 1.3;
}

.megamenu-item-description {
   font-family: var(--font-family-three);
   font-size: 1.4rem;
   font-weight: var(--font-weight-three-regular);
   line-height: 1.4;
   opacity: var(--opacity-one);
}

.mobile-nav {
   --megamenu-icon-color: var(--ghost-accent-color);
   position: fixed;
   z-index: 940;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: auto;
   overscroll-behavior: contain;
   color: var(--color-font-one);
   background-color: var(--color-body);
}

.mobile-nav-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.6rem;
   min-height: 90px;
}

.mobile-nav-logo {
   flex: 1 1 auto;
   min-width: 0;
}

.mobile-nav-logo img {
   width: auto;
   height: var(--height-logo-header);
}

.mobile-nav-close {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   padding: 0;
   cursor: pointer;
   color: var(--color-font-one);
   border: none;
   background: none;
}

.mobile-nav-close svg {
   width: 20px;
   height: 20px;
   fill: currentColor;
}

.mobile-nav-body {
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
   padding-bottom: 4rem;
}

.mobile-nav-branch {
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
}

.mobile-nav-section-title {
   margin: 0;
   padding: 0.4rem 0.4rem 0;
   font-family: var(--font-family-three);
   font-size: 1.6rem;
   font-weight: var(--font-weight-three-bold);
   letter-spacing: 0.04em;
   line-height: 1.3;
   color: var(--color-font-one);
}

.mobile-nav .megamenu-grid {
   max-width: none;
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
}

.mobile-nav-divider {
   height: 1px;
   margin: 0.8rem 0;
   background-color: var(--color-border-one);
}

.mobile-nav-links {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
}

.mobile-nav-link {
   display: block;
   padding: 1rem 0.4rem;
   font-family: var(--font-family-three);
   font-size: 1.8rem;
   font-weight: var(--font-weight-three-medium);
   color: var(--color-font-one);
   text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link.is-active {
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
}

html.mobile-nav-is-open,
body.mobile-nav-is-open {
   overflow: hidden;
}

@media (max-width: 1024px) {
   .megamenu-panel {
      display: none !important;
   }
}

@media (min-width: 1025px) {
   .mobile-nav {
      display: none !important;
   }

   .megamenu-panel {
      --megamenu-edge: calc(max(0px, (100vw - var(--max-width-global-wrap)) / 2) + var(--margin-wrap-left-right));
      left: auto;
      right: var(--megamenu-edge);
      width: max-content;
      max-width: calc(100% - 2 * var(--megamenu-edge));
      padding-right: 0;
      padding-left: 0;
   }

   .megamenu-grid {
      width: max-content;
      max-width: 100%;
      margin: 0;
   }

   .megamenu-grid--two-column {
      grid-template-columns: auto auto;
   }

   .megamenu-grid--one-column {
      grid-template-columns: auto;
      max-width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   .header-toggle .bar,
   .megamenu-item,
   .mobile-nav {
      transition: none;
   }
}