/* MenuCanvas Preset: Style 8 (Daily Interaction #20 – 3D flip / "Portfolio" button)
 * Efekt: pionowy obrót (rotateX) – jak na Webflow: "front" wypełniony, "back" z ramką.
 *
 * Odtwarzamy efekt w bezpieczny sposób dla WP (bez zagnieżdżania <a> w <a>).
 */

.mc-menu-container.mc-preset-style8,
ul.mc-menu.mc-preset-style8{
  --mc-style8-pad-y: calc(12px * var(--mc-button-scale, 1));
  --mc-style8-pad-x: calc(26px * var(--mc-button-scale, 1));
  --mc-style8-border-width: var(--mc-line-thickness, 5px);
  --mc-style8-front-bg: var(--mc-accent-color, var(--mc-link-color, currentColor));
  --mc-style8-border-color: var(--mc-accent-color, var(--mc-link-color, currentColor));
  --mc-style8-text-color: var(--mc-link-color, currentColor);
  --mc-style8-duration: 650ms;
  --mc-style8-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --mc-style8-perspective: 2000px;
  --mc-style8-radius: 0px;
}

/* Reset odstępów (motywy często dodają padding/margins na li/a) */
ul.mc-menu.mc-preset-style8{
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

ul.mc-menu.mc-preset-style8 > li{
  margin: 0 8px !important;
  padding: 0 !important;
}

/* Link jako "klikany" kontener. Padding robimy na wrapperze (żeby ujednolicić rozmiary). */
ul.mc-menu.mc-preset-style8 > li > a{
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: var(--mc-link-color, currentColor) !important;
line-height: 1 !important;
}

/* Hover/focus kolor tekstu zgodny z ustawieniem „Kolor czcionki menu (hover)” */
ul.mc-menu.mc-preset-style8 > li > a:hover,
ul.mc-menu.mc-preset-style8 > li > a:focus,
ul.mc-menu.mc-preset-style8 > li > a:focus-visible,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li > a:hover,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li > a:focus,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li > a:focus-visible{
  color: var(--mc-link-hover-color, var(--mc-link-color, currentColor)) !important;
}

/* Struktura wewnętrzna wstrzykiwana przez JS */
ul.mc-menu.mc-preset-style8 .mc-style8-wrap{
  position: relative;
  display: inline-block;
  -webkit-perspective: var(--mc-style8-perspective);
  perspective: var(--mc-style8-perspective);
    -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
cursor: pointer;
}

/* Element w flow – nadaje rozmiar. Ukryty tylko przez CSS, więc jeśli CSS się nie załaduje,
   tekst i tak pozostanie widoczny. */
ul.mc-menu.mc-preset-style8 .mc-style8-sizer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mc-style8-pad-y) var(--mc-style8-pad-x);
  white-space: nowrap;
  visibility: hidden;
}

/* "Twarze" – absolute overlay */
ul.mc-menu.mc-preset-style8 .mc-style8-face{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mc-style8-pad-y) var(--mc-style8-pad-x);
  border-radius: var(--mc-style8-radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform var(--mc-style8-duration) var(--mc-style8-ease), -webkit-transform var(--mc-style8-duration) var(--mc-style8-ease);
  will-change: transform;
  pointer-events: none; /* klik ma trafić do <a> */
}

ul.mc-menu.mc-preset-style8 .mc-style8-one{
  background-color: transparent;
  border: var(--mc-style8-border-width) solid var(--mc-style8-border-color);
  color: inherit;
  box-sizing: border-box;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: translate3d(0px, 0%, 0px) rotateX(0deg) translateZ(0.01px);
  transform: translate3d(0px, 0%, 0px) rotateX(0deg) translateZ(0.01px);
}

ul.mc-menu.mc-preset-style8 .mc-style8-two{
  background-color: var(--mc-style8-front-bg);
  border: var(--mc-style8-border-width) solid var(--mc-style8-front-bg);
  color: inherit;
  box-sizing: border-box;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 100%, 0px) rotateX(-90deg) translateZ(0.01px);
  transform: translate3d(0px, 100%, 0px) rotateX(-90deg) translateZ(0.01px);
}

/* Tekst wewnątrz twarzy */
ul.mc-menu.mc-preset-style8 .mc-style8-content{
  position: relative;
  z-index: 10;
  /* Font-family i rozmiary zostawiamy motywowi / przyszłej konfiguracji */
  letter-spacing: 2px;
  /* Motywy często doklejają ikonę submenu jako osobny element – wymuś jedną linię */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* --- Submenu icon/toggle alignment (Style 8) ---
 * Problem: w niektórych motywach toggle/ikonka submenu (▼) jest elementem blokowym i spada pod tekst.
 * Rozwiązanie: dla elementów z dziećmi ustawiamy inline-flex + align-items:center.
 */
ul.mc-menu.mc-preset-style8 > li.menu-item-has-children,
ul.mc-menu.mc-preset-style8 > li.page_item_has_children,
ul.mc-menu.mc-preset-style8 > li.wp-block-navigation-item.has-child,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li.menu-item-has-children,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li.page_item_has_children,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li.wp-block-navigation-item.has-child{
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap;
}

/* Upewnij się, że kontener submenu ląduje pod linkiem (gdy jest w flow) */
ul.mc-menu.mc-preset-style8 > li.menu-item-has-children > ul.sub-menu,
ul.mc-menu.mc-preset-style8 > li.page_item_has_children > ul.sub-menu,
ul.mc-menu.mc-preset-style8 > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li.menu-item-has-children > ul.sub-menu,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li.page_item_has_children > ul.sub-menu,
.mc-menu-container.mc-preset-style8 ul.mc-menu > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container{
  flex: 0 0 100%;
  max-width: 100%;
}

/* Najczęstsze togglery w WP / motywach */
ul.mc-menu.mc-preset-style8 .wp-block-navigation-submenu__toggle,
ul.mc-menu.mc-preset-style8 .sub-menu-toggle,
ul.mc-menu.mc-preset-style8 .dropdown-toggle,
.mc-menu-container.mc-preset-style8 ul.mc-menu .wp-block-navigation-submenu__toggle,
.mc-menu-container.mc-preset-style8 ul.mc-menu .sub-menu-toggle,
.mc-menu-container.mc-preset-style8 ul.mc-menu .dropdown-toggle{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

ul.mc-menu.mc-preset-style8 .wp-block-navigation-submenu__toggle svg,
ul.mc-menu.mc-preset-style8 .sub-menu-toggle svg,
ul.mc-menu.mc-preset-style8 .dropdown-toggle svg,
.mc-menu-container.mc-preset-style8 ul.mc-menu .wp-block-navigation-submenu__toggle svg,
.mc-menu-container.mc-preset-style8 ul.mc-menu .sub-menu-toggle svg,
.mc-menu-container.mc-preset-style8 ul.mc-menu .dropdown-toggle svg{
  display: block;
}

/* Hover + focus (keyboard) */
ul.mc-menu.mc-preset-style8 > li > a:hover .mc-style8-one,
ul.mc-menu.mc-preset-style8 > li > a:focus .mc-style8-one,
ul.mc-menu.mc-preset-style8 > li > a:focus-visible .mc-style8-one{
  -webkit-transform: translate3d(0px, -100%, 0px) rotateX(90deg) translateZ(0.01px);
  transform: translate3d(0px, -100%, 0px) rotateX(90deg) translateZ(0.01px);
}

ul.mc-menu.mc-preset-style8 > li > a:hover .mc-style8-two,
ul.mc-menu.mc-preset-style8 > li > a:focus .mc-style8-two,
ul.mc-menu.mc-preset-style8 > li > a:focus-visible .mc-style8-two{
  -webkit-transform: translate3d(0px, 0%, 0px) rotateX(0deg) translateZ(0.01px);
  transform: translate3d(0px, 0%, 0px) rotateX(0deg) translateZ(0.01px);
}

/* Szacunek dla preferencji redukcji ruchu */
@media (prefers-reduced-motion: reduce){
  ul.mc-menu.mc-preset-style8 .mc-style8-face{
    transition-duration: 0.01ms;
  }
}

/* Dodatkowe selektory (gdy preset jest tylko na kontenerze) */
.mc-menu-container.mc-preset-style8 ul.mc-menu{
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}
.mc-menu-container.mc-preset-style8 ul.mc-menu > li{
  margin: 0 8px !important;
  padding: 0 !important;
}
.mc-menu-container.mc-preset-style8 ul.mc-menu > li > a{
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: var(--mc-link-color, currentColor) !important;
  line-height: 1 !important;
}
.mc-menu-container.mc-preset-style8 ul.mc-menu .mc-style8-wrap{
  position: relative;
  display: inline-block;
  -webkit-perspective: var(--mc-style8-perspective);
  perspective: var(--mc-style8-perspective);
    -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
cursor: pointer;
}
.mc-menu-container.mc-preset-style8 ul.mc-menu .mc-style8-sizer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mc-style8-pad-y) var(--mc-style8-pad-x);
  white-space: nowrap;
  visibility: hidden;
}
.mc-menu-container.mc-preset-style8 ul.mc-menu .mc-style8-face{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mc-style8-pad-y) var(--mc-style8-pad-x);
  border-radius: var(--mc-style8-radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform var(--mc-style8-duration) var(--mc-style8-ease), -webkit-transform var(--mc-style8-duration) var(--mc-style8-ease);
  will-change: transform;
  pointer-events: none;
}