/* --------------------------
   Base
-------------------------- */
.cm-menu,
.cm-menu * { box-sizing: border-box; }

.cm-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 48px;
  align-items: center;
}

/* Make top-level LI the positioning context for dropdown */
.cm-menu__list > li { position: relative; }

/* Top-level links */
.cm-menu__list > li > a {
  font-family: inherit;      /* inherit Elementor typography */
  font-weight: 500;
  font-size: 14px;
  color: #303030;
  text-decoration: none;

  display: inline-flex;
  align-items: center;

  padding: 22px 0;
}

.cm-menu__list > li > a:hover { color: #9BB501; }

/* --------------------------
   Indicator (ALL LEVELS)
   - aligned right
   - rotates -90° CCW on hover/focus
   - icon placeholder: replace background-image with your own URL/SVG
-------------------------- */
.cm-menu li.menu-item-has-children > a {
  position: relative;
  /* Ensure indicator sits at the far right inside the link */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Right-aligned indicator */
.cm-menu li.menu-item-has-children > a::after {
  content: "";
  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  margin-left: auto; /* pushes to the right */

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* PLACEHOLDER ICON: replace with your own */
  background-image: url("http://www.mrphone.sk/wp-content/uploads/2025/12/Vector-Stroke-1.svg");

  transition: transform 180ms ease;
}

/* Rotate on hover/focus-within for any item with children */
.cm-menu li.menu-item-has-children:hover > a::after,
.cm-menu li.menu-item-has-children:focus-within > a::after {
  transform: rotate(-90deg);
}

/* --------------------------
   Dropdown styling
   Requirements:
   - background #F1F1F1
   - border 1px solid #D4D4D4
   - item hover #DAFF01
   - standard dropdown item size:
     width 320px, height 52px
-------------------------- */
/* 1) Scroll ONLY the first dropdown panel (level 2) */
.cm-menu__list > li > ul > li > ul > li > ul.sub-menu{
  max-height: calc(100vh - 140px); /* header offset */
  overflow-y: auto;
  overflow-x: visible; /* we don't want horizontal scrolling */
  -webkit-overflow-scrolling: touch;
}
.cm-menu__list .sub-menu{
  scrollbar-width: thin; /* Firefox */
}
.cm-menu__list .sub-menu::-webkit-scrollbar{
  width: 4px;
	height: 201px;
}
.cm-menu__list .sub-menu::-webkit-scrollbar-thumb{
  border-radius: 8px;
}

/* All submenus */
.cm-menu ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;

  background: #F1F1F1;
  border: 1px solid #D4D4D4;

  position: absolute;
  top: 100%;
  left: 0;

  width: 320px;       /* fixed width requirement */
  display: none;
  z-index: 9999;
}

/* Show the next level on hover/focus */
.cm-menu li:hover > ul.sub-menu,
.cm-menu li:focus-within > ul.sub-menu {
  display: block;
}

/* Level 2 dropdown: right edge aligned to the parent item’s left edge */
.cm-menu__list > li.menu-item-has-children > ul.sub-menu{
  left: 0;
  right: auto;
  transform: translateX(-240px); /* shifts dropdown so its right edge sits at parent's left */
}


/* Submenu items */
.cm-menu ul.sub-menu > li { position: relative; }

/* Links inside dropdown */
.cm-menu ul.sub-menu > li > a {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #303030;
  text-decoration: none;

  /* 52px row height requirement */
  min-height: 52px;
  height: auto;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  white-space: normal;  /* allow wrapping */
  overflow: visible;    /* don’t clip wrapped lines */
  word-break: normal;
  overflow-wrap: anywhere; /* prevents overflow on long words/URLs */
  line-height: 1.25;
}

.cm-menu ul.sub-menu > li > a:hover {
  background: #DAFF01;
}

/* Optional: top-level hover color doesn't affect dropdown */
.cm-menu ul.sub-menu > li > a:hover { color: #303030; }

/* --------------------------
   Multi-column behavior (levels 2–5)
   - Level 2 is the first dropdown column under the top item
   - Any nested submenu (level 3+) becomes the next column
-------------------------- */

/* Any nested submenu inside a submenu opens as a new column to the RIGHT */
.cm-menu ul.sub-menu ul.sub-menu {
  top: -1px;      /* align borders */
  left: 100%;     /* next column */
  width: 320px;   /* same width for all columns */
  display: none;
}

/* Show nested columns on hover/focus */
.cm-menu ul.sub-menu li:hover > ul.sub-menu,
.cm-menu ul.sub-menu li:focus-within > ul.sub-menu {
  display: block;
}

/* --------------------------
   Flip direction if overflowing:
   JS adds .cm-shift-left to nav.cm-menu
-------------------------- */
.cm-menu.cm-shift-left ul.sub-menu {
  left: auto;
  right: 0;
}

.cm-menu.cm-shift-left ul.sub-menu ul.sub-menu {
  left: auto;
  right: 100%;
}