:root {
	--mrj-border-color: #dddedf;
	
	--mrj-global-color-0: #046bd2;
	--mrj-global-color-1: #045cb4;
	--mrj-global-color-2: #F0F5FA;
	--mrj-global-color-3: #1e293b;
	--mrj-global-color-4: #13aff0;
	--mrj-global-color-5: #334155;
	--mrj-global-color-6: #0091FF;
	--mrj-global-color-7: #FAFBFC;
	--mrj-body-color-1: #414957;

	--mrj-site-max-width: 1300px;
	--mrj-max-width-blog-desktop: 1600px;
	--mrj-max-width-blog-laptop: 1350px;
	--mrj-max-width-blog-laptop-small: 1060px;
	--mrj-max-width-blog-mobile: 650px;
	
	
	/**/
	--mrj-hover-submenu-item: #eaf9ff;
	--mrj-hover-submenu-item-hover: #0088c1;
	
	--global-content-width: 1250px;
	--mrj-header-height: 66px;
	--mrj-header-mobile-height: 45px;
	--wp-admin-bar-height: 0px;
}


/*
desktop и мобилни

@media (max-width: 767px)  {}
@media (min-width: 768px)  {}
*/


/*********************/
/* БАЗОВИ НАСТРОЙКИ */

/* modern css normalize */
/* https://www.joshwcomeau.com/css/custom-css-reset/ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* плавно скролиране при цъкане на котви */
/* плавно скролиране при търсен ctrl+f веротно работи на win 10 */
html:focus-within {
  scroll-behavior: smooth;
}

html {
  font-size: 100%; /* за rem 16px */
}
body {
	margin: 0;
	/* 16px при съвремените браузъри. 
	Взема размера и от в настройките на браузъра така че за веки потренител може да е различно.
	Най-добрата практика комбинирана с rem и em прави шифта перфектен
	ако се работи в em се поставя  100%; 
	 font-size: 100%; */
	/* ако се работи в rem като това е само за заглавия и текст */
	font-size: 1rem;
	line-height: 1.5;
	/* или да се сложи на wrapper */
	/* min-height: 100vh; */
	/* не е за предпочитане при тъбки фонтове няма да се вижда
	Ползва се за тънък бял текст на черен фон но има проблеми
	 -webkit-font-smoothing: antialiased;
	
	font-size: 16px;*/
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	
	color: var(--mrj-body-color-1);
}
body.separate-containers { background-color: var(--mrj-global-color-2); }
body.plain-containers  { background-color: #fff; }


/* typography */
/* дългите думи да се пренасят на нов ред */
h1, h2, h3, h4, h5, h6, p {
	overflow-wrap: break-word;
}

/*
https://boosted.orange.com/docs/4.6/content/typography/
34
30
26
25
22
20
18
*/

/*
Typography Sizes*/
/*
h1 { font-size: 2.125rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; font-weight: bold; }

@media screen and (max-width: 600px) {
	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.25rem; }
	h3 { font-size: 1.125rem ; }
	h4,h5,h6 { font-size: 1rem; font-weight: bold; }
}
*/

/* флуидна типография */
/* 450 - 1200 */

/* 	https://clamp.font-size.app/
	https://www.superspeedapp.com/clamp-calculator
	https://css-clamp-generator.com/
	https://clamp.vittoretrivi.dev/
 */
h1 { font-size: clamp(1.5rem, 1.125rem + 1.3333vw, 2.125rem); }
h2 { font-size: clamp(1.25rem, 0.875rem + 1.3333vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem); 	}
h4 { font-size: clamp(1rem, 0.85rem + 0.5333vw, 1.25rem); }
h5 { font-size: clamp(1rem, 0.925rem + 0.2667vw, 1.125rem); }
h6 { font-size: 1rem; font-weight: bold; }



svg,
img,
picture,
video,
embed,
iframe,
object,
canvas {
	max-width: 100%;
	height: auto;
}

a,
a:focus,
a:hover,
a:visited {
    text-decoration: none;
}

:where(p) {
    margin: 0 0 1em;
}
:where(p:last-of-type) {
    margin-bottom: 0;
}

/* в h2 има p вероятно безсмислено */
:where(p:last-of-type) + h1,
:where(p:last-of-type) + h2,
:where(p:last-of-type) + h3,
:where(p:last-of-type) + h4,
:where(p:last-of-type) + h5,
:where(p:last-of-type) + h6 {
    margin-top: 1.2em;
} 
/* typography */
/**************/

/***********/
/* таблици */
table,
td,
th {
    border: 1px solid rgba(0, 0, 0, 0.1);
}
table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 1.5em;
	/* вероятно трябва защото ако има много думи ще се пренасят на нов ред и става грозно  */
	/* width: 100%; */
}
td,
th {
    padding: 0.7em 1em;
    border-width: 0 1px 1px 0;
}
/* таблици */

hr {
	border: none;
    border-top: 1px solid var(--mrj-border-color);
}

button,
input,
select,
textarea {
	font-family: inherit;
    font-size: 100%;
	font-size: 1rem;
}

figure {
    margin: 0.5em 0
}
blockquote {
	padding-left: 1em;
	border-left: 4px solid var(--mrj-palette-1);
	font-style: italic;
}
blockquote cite {
    color: var(--mrj-palette-1);
    font-size: 13px;
    margin-top: 1em;
    position: relative;
    font-style: normal;
    display: block
}

/* ако не са деактивирани анимациие на устройството */
/* създава анимация с max-content на моите браузъри не работи */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* премахва анимациите ако са деактивирани от устройството */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.entry-title, .widget-title { font-family: Oswald;}
/* БАЗОВИ НАСТРОЙКИ */
/*********************/





/***********/
/* OSWALD */

/* oswald-300 - cyrillic_latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/oswald/oswald-v57-cyrillic_latin-300.woff2') format('woff2');
}

/* oswald-regular - cyrillic_latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald/oswald-v57-cyrillic_latin-regular.woff2') format('woff2');
}

/* oswald-500 - cyrillic_latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/oswald/oswald-v57-cyrillic_latin-500.woff2') format('woff2');
}


/* oswald-700 - cyrillic_latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oswald/oswald-v57-cyrillic_latin-700.woff2') format('woff2');
}

/* OSWALD */
/***********/








/***********************************************/
/* за панела и мобилното меню да се задава top */
body.admin-bar {
  --wp-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-admin-bar-height: 46px;
  }
}
/***********************************************/


.site-wrapper {
	position: relative;	
	/* overflow: hidden; */
	overflow: clip;
	min-height: calc(100vh - var(--wp-admin-bar-height));
	/* ако има малко съдържание футъра да е най-долу */
	display: flex;
	flex-direction: column;

}



/* лого */
@media (min-width: 768px)  {
	header .custom-logo-link img {
		max-height: 70px;
		width: auto;
	}
}
/* мобилно */
@media (max-width: 767px)  {
	header .custom-logo-link img {
		width: auto;
		max-height: 50px;	
	}
}
/* лого */



/**********************************/
/* ГЛАВНО МЕНЮ - ГЛАВНА НАВИГАЦИЯ */
/**********************************/


.accordion-menu,
.main-navigation {
	
	--main-color: #13aff0; /* --mrj-global-color-4 */
	--main-color-text: #0088c1;
	--main-border: #f1f1f1;	
	--color-0-border: #bddce8;		
	
	--color-2-bg-active: #02c8c8;
	--color-2-bg: #ebffff;
	--color-2-text: #168c8c;
	--color-2-shadow: #06a2a2;
	--color-2-border: #bee6e6;
	
	--color-3-bg-active: #02c87e;
	--color-3-bg: #edfff8;
	--color-3-text: #xxxxx;
	--color-3-shadow: #059760;
	--color-3-border: #02c87e;

	--scrollbar-color: #36aded;
	--scrollbar-bc-color: #dfdddd;
	/* font-size: 16px; */
	
}



header {
	background: #fff;
	border-bottom: 2px solid #cacaca;
	box-shadow: 0px 0px 14px -4px #848484;
	padding: 0 20px;
	overflow-x: clip;
}
/*  контейнера в хедъра в него за логот и менюто */
.site-header-wrap {
	display: flex;
	justify-content: space-between;
	/* избор центрирано или най долу */
	align-items: center;
	/* align-items: end; */
	/* тряжва да е min-height за да се увеличава височината заради логото */
	min-height: var(--mrj-header-height);
	max-width: 1300px;
	margin: 0 auto;
	/* relative за да бъде над archive-title-selection */
	position: relative;
}

/*
.site-header::after {content: "";}
.site-wrapper::before { content: ""; }
.site-header::after,
.site-wrapper::before {
	background-image: linear-gradient(to right, #00baf2 0%, #52b415 12%, #ced512 25%, #e30ca9 37%, #00baf2 50%, #52b415 63%, #ced512 76%, #e30ca9 87%, #00baf2 100%);
	display: block;
	width: 100%;
	height: 2px;
	display: block;	
}
*/

.site-header + hr {
	left: 0;
	right: 0;
	width: 100%;
	height: 20px;
	border: none;
	pointer-events: none;
	overflow: hidden;
	filter: url(#header-drop-shadow);
	margin: 0 0 -20px 0;
	z-index: 1;
}

.site-header + hr::before {

    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, #01a0d0 0%, #52b415 12%, #ced512 25%, #e30ca9 37%, #00baf2 50%, #52b415 63%, #ced512 76%, #e30ca9 87%, #00baf2 100%);
    background-repeat: repeat-x;
    background-position: 0 0;

}/**/


/**********************/
/* лого и име на сайт */
.site-branding {
	display: flex;
	align-items: center;
	/* align-items: end; */
	column-gap: 10px;
	flex-shrink: 0;
}

.site-branding .site-logo  {
	width: 30px;
	height: 30px;
	background: var(--mrj-global-color-4);
	border-radius: 10px;
}
.site-title a {
	color: var(--mrj-global-color-3);
	font-weight: 600;
	font-size: 26px;
}

.site-branding .site-title {
	font-weight: 700;
	font-size: 26px;
}

/* лого и име на сайт */
/**********************/

/* ако трябва хамбургер бутона да е в site-navigation точно след края на main-menu
.main-navigation {
	display: flex;
	align-items: center;	
}
*/


/**************************/
/* hamburger toggle menu  */
.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 999;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;	
}
.menu-toggle-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 24px;
	height: 18px;
	transition: 0.4s all cubic-bezier(.68,-0.55,.27,1.55);
}
.menu-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	background: #333;
	border-radius: 99px;
	transition: all 0.3s ease-in-out;
	transform-origin: center;
	transition: 0.4s all cubic-bezier(.68,-0.55,.27,1.55);
}
.menu-toggle.active span:nth-child(1) {
	transform: translate(0px, 7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(3) {
	transform: translate(0px, -7px) rotate(-45deg);
}	
.menu-toggle.active span:nth-child(2) {
	transform: translate(-20px);
	opacity: 0;
}

.menu-toggle.show {
	display: flex;
}
.menu-toggle.no-transition,
.menu-toggle.no-transition span,
.menu-toggle.no-transition .menu-toggle-wrap {
	transition: none;
}

body.no-scroll {
	overflow: hidden;
}

@media (min-width: 768px) {
	.menu-toggle { display: none; }
}
@media (max-width: 767px) {
	.menu-toggle { display: flex; }
}
/* hamburger toggle menu  */
/**************************/











/*
	ГЛАВНА НАВИГАЦИЯ 
	ГЛАВНО МЕНЮ

	ГЛАВНО МЕНЮ - desktop хедър меню - първите елементи. На desktop е менюто най-голямото в хедъра
	<ul class="menu">
		<li>
			<a>главно меню</a> 
		</li>
	
	
	ПОДМЕНЮТА - вертикалните падащите менюта на desktop.
	<ul class="menu">
		<li>  
			<ul class="sub-menu">
				<li> 
					<a>вертикално поменю</a> 
				</li> 
	
	ПОДМЕНЮТА НА ПОДМЕНЮТА - хоризонталните падащите менюта на desktop. Могат да бъдат вложени неограничено едно в друго и всички са хоризонатални
	<ul class="menu">
		<li>  
			<ul class="sub-menu">
				<li> 
					<ul class="sub-menu">
						<li> 
							<a>вертикално поменю</a> 
						</li> 
					</ul>

	Концепция на менюто
	при desktop всички подменюта се показват с hover
	hover е активен само за устройствата които го поддържат
	при мобилните цъкането е 100% алтерантива на hover за ефектите и показване на менютата
	desktop менюто е 100% същото за мобилните с ширина над 767px
	всички ефенти на hover са налични при цъкане на мобините устройства
	за активиране или показване на подменютата при мобилните се ползва JS добавяйки клас open
	при мобилните устройства линковете на главните менюта които имат подменюта са деактивирани с JS за да са само падащи
	под 767px менюто става мобилно
	всички подменюта и ханбургер бутна има area атрибути за екранните черци

*/

@media (min-width: 768px) {
	/* главните менюта които са на хедъра е не подменютата
	 да се показват на една линия с малко разстояние между тях*/
	.main-navigation .menu  {
		display: flex;
		gap: 0px 4px;
	}

	/* само за главното меню защото те са по-големи */
	.main-navigation .menu > li > a {
		padding: 21px 20px;
		font-size: 18px;
	}
}


/*************************************************/
/*  базови настройки за desctop и монилното меню */


 
/* за всички елементи <a> */
.accordion-menu .menu a,
.main-navigation .menu a {
	text-decoration: none;
	color: var(--mrj-global-color-5);
	transition: 0.3s all ease-out;
}

/* всички <a> са flex за да може да се поставят икони навсякъде включително и на главното desktop меню на хeдъра */
/* така позволява добавяне на SVG икона стрелка на подменютата които имат подмянюта li.menu-item-has-children  */
.accordion-menu a,
.main-navigation a {
	display: flex;
	align-items: center;
	gap: 0px 10px;
}
/* <a> да бъде 100% ширина така че svg стрелката да е най-вдясно */
.accordion-menu .menu-item-text,
.main-navigation .menu-item-text {
	/* flex: 1; */
	flex-grow: 1; /* да се разтяга и да заеми цялата ширина текста да е до стрелката  */
	/* flex-shrink: 0;  да не се свива */
	word-break: break-word;
	overflow-wrap: anywhere;
}
.accordion-menu ul,
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.accordion-menu li,
.main-navigation li {
	/* relative за да се показват всички подменюта */
	position: relative;
}

/* no-transition се поставя с JS за да не летят менютатя когато менюто премине от мобилно в desktop */
.main-navigation.no-transition,
.main-navigation.accordion-menu.no-transition,
.main-navigation.no-transition ul ul.sub-menu {
	transition: none;
}
/*  базови настройки за desctop и монилното меню */
/*************************************************/




/********************************************/
/* SVG икона стрелка и персонални SVG икона */

/* позиция на иконата за триъгълник на главние (хедър) менюта  */
.accordion-menu .menu > li.menu-item-has-children  > a
.main-navigation .menu > li.menu-item-has-children  > a {
	display: flex;
	gap: 0px 10px;
	align-items: center;
}

/* SVG икона стрелка до главните менютата и на подменютата (вертикалните и хоризонталните) Иконата се подава с php само ако имат подменюта */
/* работи с или без икона */
.accordion-menu .dropdown-menu-toggle,
.main-navigation .dropdown-menu-toggle {
	width: 7px;
	height: 7px;
	align-items: center;
	display: inline-flex;
	position: relative;
	transition: 0.3s ease-out;
}
.accordion-menu .dropdown-menu-toggle svg,
.main-navigation .dropdown-menu-toggle svg {
	color: var(--main-color);
	transform: rotate(90deg);
	transition: 0.3s all ease-out;
}

/* svg икона стрелка nq подмнютата за desktop */
.accordion-menu .sub-menu .dropdown-menu-toggle svg,
.main-navigation .sub-menu .dropdown-menu-toggle svg {
	transform: rotate(0deg);
}

/* персонална SVG иконка пред текста  */
.menu-icon {
	width: 20px;
	min-width: 20px;
	height: 20px;
	flex: 0 1 20px;
	flex-basis: 20px;
	/*
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	*/
}
/* игнорира се размера който е зададен в svg файла */
.accordion-menu  .menu-icon svg,
.main-navigation .menu-icon svg {
	width: 100%;
	height: 100%;
}
/* SVG икона стрелка и персонални SVG икона */
/********************************************/





/***************************************************/
/* hover чертата на главното хедър меню за desktop */
@media (min-width: 768px) {
.main-navigation .menu > li > a::before {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0px;
	height: 3px;
	transition: 0.3s all cubic-bezier(.68,-0.55,.27,1.55);
	background: var(--main-color);
	z-index: 2;
}

/* 
current-menu-item 		активно меню 
current-menu-ancestor	активно родителско */
.main-navigation .menu > li.current-menu-item > a::before,
.main-navigation .menu > li.current-menu-ancestor > a::before {
	background: var(--main-color);
}

/*  hover чертата за актините менюта */
/* С JS се донавя open за да се показват менютата при цъкане от мобилните с широки екрани 
open се позлва и при вертикалното мобило меню за да се сгъват и разгъват */
.main-navigation .menu > li > a.open::before, 
.main-navigation .menu > li.current-menu-item > a::before,
.main-navigation .menu > li.current-menu-ancestor > a::before  {	
	left: 0px;
	right: 0px;
}

/*  hover чертата на главните менюта за desktop устройства с мишка */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	/* това като че ли е излишно */
	/* .main-navigation .menu > li:not(.current-menu-item):not(.current-menu-ancestor) > a:focus:  */
	.main-navigation .menu > li > a:focus::before,
	.main-navigation .menu > li > a:active::before,
	.main-navigation .menu > li > a:hover::before {
		left: 0px;
		right: 0px;
	}
	.main-navigation .menu > li > a:hover > .dropdown-menu-toggle {
		transform: rotate(180deg);
	} 	
}
/* ефект на стрелката на менютата при цъканне от мобилни устройства */
.main-navigation .menu > li > a.open > .dropdown-menu-toggle {
	transform: rotate(180deg);
}
}
/* hover чертата на главното хедър меню за desktop */
/***************************************************/




/****************************/
/* DESKTOP ПАДАЩИ ПОДМЕНЮТА */
/*
вертикални - първите пдменюта, които падат надолу от хедъра със стрелка отгоре
хоризонтални - подменюта на подменюта, те се показват в страни със стрелка в страни
елементи на менюто <a> - дизайна се придава само на <a>. <li> нямат дизайн ползват се само за селектори
за по-крадко пиша вертикални / хоризонтални / менюта

*/
@media (min-width: 768px) {

/* всички подменюта - тези които се появяват надолу (вертикални) и тези които се появяват в страни (хоризонтални) */
.main-navigation ul ul.sub-menu {
	width: 240px;
	min-width: 240px;
	max-width: 300px;
	width: max-content;
	padding-top: 20px;
	position: absolute;
	top: 100%;
	z-index: 998;
	transform: translateY(20px); /* 20px надолу а при hover е 0 за да има ефект на движение */
	transition: 0.5s all cubic-bezier(.68,-0.55,.27,1.55);
	pointer-events: none; 
	opacity: 0;
	visibility: hidden;	
	/* промяна менюта overflow  */
	/* left: -9000px; */
}


/* позиция на хоризонталните подменютата */
.main-navigation ul.sub-menu ul.sub-menu {
	left: 98%;/*  изместване в страни */
	top: -24px; /* да бъдат едно до друго на една линия с предходното <li> */ 
	right: auto;
	transform: translateX(20px); /* 20px встрани а при hover е 0 за да има ефект на движение */
	padding-left: 20px;
}

/* показване на всички подменюата хоризонтални и вертикални*/
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.main-navigation ul li:hover > ul {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0px);
		/* промяна менюта за overflow x да не се скрива */
		/* left: auto;  */
	}
}
/* показване на менютата при цъкане при мобилните устройства когато са с широк екран и навигацията е desktop */
/* с JS се добавя .open*/
/* промяна менюта стар вариант преди да го направя за overflow x да не се скрива
.main-navigation ul li ul.sub-menu.open */
.overflow-menu-panel.open,
.main-navigation ul li a.open ~ ul.sub-menu.open  {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0px);
	/* промяна менюта за overflow x да не се скрива  */
	/* left: auto;*/
}
/* задаване на ефект при показване на хоризонтални менюта от translateX(20px) стават на 0 */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.main-navigation ul.sub-menu li:hover > ul.sub-menu {
		transform: translateX(0px);
	}
}
/* задаване на ефект при показване на хоризонтални менюта от translateX(20px)
 при мобилните устройства когато са с широк екран и навигацията е desktop */
 
/* промяна менюта стар вариант .main-navigation ul.sub-menu.open > ul.sub-menu  */
.main-navigation ul.sub-menu.open li > a ~ ul.sub-menu  {
	/*  промяна менюта за overflow x да не се скрива */
	transform: translateX(0px);
	/*  промяна менюта за overflow x да не се скрива */
	/* left: 98%;  */
}

/* главните менюта на desktop да не се свиват  */
.main-navigation ul.menu > li {
	flex-shrink: 0; 
}

/* border на <a> на подменюто */
ul.sub-menu li:not(:last-of-type) a {
	border-bottom: 1px solid var(--main-border);
}

/* линковете елементите <a> на менютата */
.main-navigation ul.sub-menu li a {
	font-size: 14px;
	padding: 10px 15px;
	/* промяна нов hover */
	padding: 10px 20px 10px 15px;
	background-color: #fff;
	border-left: 3px solid transparent;
}


/* стрелката да е двойна и голяма при текущо (активно) (светещо) меню  */
.main-navigation ul.sub-menu li.current-menu-item > a > .dropdown-menu-toggle svg,
.main-navigation ul.sub-menu li.current-menu-ancestor > a > .dropdown-menu-toggle svg {
	transform: rotate(0deg) translateX(5px) scale(1.2);
	filter: drop-shadow(-5px 0px 0px var(--main-color));
}



/*
	текущи менюта current-menu-item и 
	текущи родителски current-menu-ancestor
	активни менюта .open
	hover
*/
/* текущи (активни) (светещи) ефект на <a> елементите на вертикалните менюта  */
.main-navigation ul.sub-menu li.current-menu-item > a,
.main-navigation ul.sub-menu li.current-menu-ancestor > a {
	background-color: var(--mrj-hover-submenu-item);
	border-left-color: var(--main-color);
	color: var(--main-color-text);
}
/* същото както горното но когато менюто има подменюта се отравят с hover*/
/* (светещи) (активни) hover ефект на <a> елементите на вертикалните менюта които се отварят */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.main-navigation ul.sub-menu li a:hover {
		background-color: var(--mrj-hover-submenu-item);
		border-left-color: var(--main-color);
		padding-left: 20px;
		/* промяна нов hover */
		padding: 10px 15px 10px 20px;
		color: var(--main-color-text);
	}
	/* променя на предходния отворен през който е премина курсора */
	/* когато hover се постави върху li се селктват всички доли нива сздавайки пътека от отворени елементи  */
	/* <li><a>menu 1<a> <ul><li><a>menu 2<a> </li><li> */
	.main-navigation ul.sub-menu li:hover > a {
		background: var(--mrj-hover-submenu-item);
	}
}
/* същото както горното */
/* ефект (светещи) (активни) на <a> елементите на вертикалните менюта, които имат подменюта и се отварят при цъкане от мобилните устройства */
.main-navigation ul.sub-menu li a.open {
	background-color: var(--mrj-hover-submenu-item);
	border-left-color: var(--main-color);
	padding-left: 20px;
	color: var(--main-color-text);
}

/* придаване на ефект на иконата стрелка на менютата при отваряне */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.main-navigation ul.sub-menu li a:hover > .dropdown-menu-toggle svg {
		transform: rotate(0deg) translateX(5px) scale(1.2);	
		filter: drop-shadow(-5px 0px 0px var(--main-color));
	}
}
/* като горното но с open за мобилните - придаване на ефект на иконата стрелка на менютата при отваряне */
.main-navigation ul.sub-menu li a.open > .dropdown-menu-toggle svg {
		transform: rotate(0deg) translateX(5px) scale(1.2);	
		filter: drop-shadow(-5px 0px 0px var(--main-color));
}

/* ефект (светещи) (активни) на <a> на хоризонталните менюта */
/* ефекта е по-различен защото в ляво има стрелка от absolute рамката на <ul> */
.main-navigation ul.sub-menu ul.sub-menu li a {
	border-left: none;
	border-right: 3px solid transparent;
}
/* активните хоризонтални подменюта имат срелка надясно поради която се премахва border-right*/
.main-navigation ul.sub-menu ul.sub-menu li.menu-item-has-children > a {
	border-right: none;
}

/* ефект на текущите хоризонтални менюта current-menu-item border-right */
.main-navigation ul.sub-menu ul.sub-menu li.current-menu-ancestor > a,
.main-navigation ul.sub-menu ul.sub-menu li.current-menu-item > a {
	border-right-color: var(--main-color);
}

/* като готното с hover */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.main-navigation ul.sub-menu ul.sub-menu li a:hover {
		border-right-color: var(--main-color);
	}
}




/******************************************************/
/* стрелката с рамката на падащите менюта ul.sub-menu */
/* на подменютата на desktop се поставя горна и странична рамка 
с position absolute before и стрелка с after */

.main-navigation ul.sub-menu {
	position: relative;
	border-radius: 10px;
	border: 4px solid transparent;
}


/* before е за рамката position absolute а after е стрелката */
.overflow-menu-panel::before,
.overflow-menu-panel::after,
ul.sub-menu::before,
.main-navigation ul.sub-menu li.menu-item:first-child::after {
	content: "";
	position: absolute;	
}



/* рамка position absolute */
.overflow-menu-panel::before,
.main-navigation ul.sub-menu::before {
	background: linear-gradient(180deg,var(--main-color) 10px, #d7d7d7 10px);
	top: 20px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: -3px 1px -1px -1px;
	border-radius: 10px 10px 5px 5px;
	/* box-shadow: 0px 2px 6px 0px #0000001a; */
	filter: drop-shadow(0 1px 2px hsl(210deg 15% 6%/.1)) drop-shadow(0 2px 4px hsl(210deg 15% 6%/.1)) drop-shadow(0 8px 16px hsl(210deg 15% 6%/.1));
}

/* стрелката нан подменютата */
.overflow-menu-panel::after,
.main-navigation ul.sub-menu li.menu-item:first-child::after {
	background: #fff;
	width: 15px;
	height: 15px;
	border-radius: 0 5px 0 50px; 
	box-shadow: 2px -2px 0 1px var(--main-color);
	top: -8px;
	left: 28px;
	transform: scale(1) rotate(-45deg);
	transition: 0.3s all;
}

/* рамката и стрелката на страничните менюта се показват в страни */
/* before рамката на страничните менюта */
.main-navigation ul.sub-menu ul.sub-menu::before {
	margin: -1px -1px -1px 17px;
	background: linear-gradient(90deg,var(--main-color) 10px, #d7d7d7 10px);
	border-radius: 10px 10px 5px 10px;
}

.main-navigation ul.sub-menu ul.sub-menu li.menu-item:first-child::after  {
	top: 13px;
	left: -8px;
	transform: scale(1) rotate(-135deg);
}

/* border radius на елементите <a> на вертикланите менюта 
първите елементи са с голям radius заради  рамката със стрелката */
.overflow-menu-panel ul.menu .menu-item:first-child > a,
ul.menu .sub-menu .menu-item:first-child,
ul.menu .sub-menu .menu-item:first-child > a {
	border-radius: 10px 10px 0 0;
}
/* border radius на елементите <a> на вертикланите менюта 
последните елементи са с малък radius   */
ul.menu .sub-menu .menu-item:last-child,
ul.menu .sub-menu .menu-item:last-child > a {
	border-radius: 0 0 5px 5px;
}

/* border radius на елементите <a> на хоризонталните менюта */
.main-navigation ul.sub-menu ul.sub-menu .menu-item:last-child, 
.main-navigation ul.sub-menu ul.sub-menu .menu-item:last-child > a {
	border-radius: 0 0 5px 10px;
}
/* border radius на елементите <a> на хоризонталните менюта */
.main-navigation ul.sub-menu ul.sub-menu .menu-item:first-child:last-child, 
.main-navigation ul.sub-menu ul.sub-menu .menu-item:first-child:last-child > a {
	border-radius: 10px 0 5px 10px;
}
 
/* ако първото меню е текущ да се променя цвета на after */
.main-navigation ul.sub-menu li.current-menu-item.menu-item:first-child::after,
.main-navigation ul.sub-menu li.menu-item.current-menu-ancestor:first-child::after {
	background: var(--mrj-hover-submenu-item);
}

/* промяна цвета на after когато мишката е на първия li <a> защото li <a> си променя background */
/* на мозила може да не работи заради has() */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.main-navigation ul.sub-menu li.menu-item:first-child:has(a:hover)::after {
		background: var(--mrj-hover-submenu-item);
	}
}
/* пак като горното но ако се цъкне на първото подменю на хоризонталните менюта с мобилно да се промени цвета на стрелката */
.main-navigation ul.sub-menu li.menu-item:first-child:has(a.open)::after {
	background: var(--mrj-hover-submenu-item);
}

/* стрелката с рамката на падащите менюта  */
/******************
*************************/



/********************************/
/* PRIORITY OVERFLOW NAVIGATION */

.overflow-menu-panel {
	position: absolute;
	width: 400px;
	height: 100%;
	min-height: 400px;
	max-height: 600px;
	height: max-content;
	right: 0;
	top: 90px;
	transform: translateY(20px);
	transition: 0.5s all cubic-bezier(.68,-0.55,.27,1.55);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 998;
	transform: skew(20deg,10deg);
	display: flex;
	flex-direction: column;
}


/* закоментираните кодове тук се намиарт горе */
/* тук се намират за документация */

/* показване на панела при цъкане на хамбургер бутона
.overflow-menu-panel.open {	
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0px);
}*/

/* рамка position absolute */
.overflow-menu-panel::before {
	background: linear-gradient(180deg,var(--main-color) 10px, #b7b7b7  10px);
	top: 0px;
	box-shadow: 0px 1px 13px 0px #75757585;
	border-radius: 10px;
	/*content: "";
	position: absolute;	
	right: 0px;
	bottom: 0;
	left: 0px;
	margin: -3px -1px -1px -1px;
	*/
}

.overflow-menu-panel.accordion-menu .menu > li > a,
.overflow-menu-panel.accordion-menu .menu a {
	padding: 10px 21px 10px 15px;
	
}
.overflow-menu-panel::after {
	left: 365px;
	top: -7px;
	/* долния код е по по-горе
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 0 5px 0 50px;
	box-shadow: 2px -2px 0 1px var(--main-color);
	background: #fff;
	top: -8px;	
	transform: scale(1) rotate(-45deg);
	transition: 0.3s all;
	position: absolute;
	*/
}
/*
.overflow-menu-panel.overflow-menu-panel--after-left::after{
	left: 360px;
}
*/
.overflow-menu-panel:has(ul.menu li.menu-item:first-child a.open)::after {
	background: var(--main-color);
}

.overflow-menu-panel__content {
    overflow-y: auto;
    overflow-x: hidden;
	/* height: 100%; */
	flex-grow: 1;
	position: relative;
	border-radius: 10px;
	scrollbar-width: thin; 	
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-bc-color);
	background: #fff;
}
/*
.overflow-menu-panel ul.menu .menu-item:first-child > a {
  border-radius: 10px 10px 0 0;
}*/


/**********/
/* ПАНЕЛА */

}
/* DESKTOP ПАДАЩИ ПОДМЕНЮТА */
/****************************/

/* панела се премахва при мобилните */
@media (max-width: 767px) {
	.overflow-menu-panel {
		display: none;
	}	
}

/* PRIORITY OVERFLOW NAVIGATION */
/********************************/








/************************************/
/* ДИЗАЙН НА МОБИЛНО МЕНЮ АКОРДИОН  */

/* @media (max-width: 767px) { */
@media (max-width: 767px) {
	/* навигацията да е на цял екран fixed */
	.main-navigation {
		position: fixed;
		visibility: hidden;
		opacity: 0;
		top: calc(var(--mrj-header-mobile-height) + var(--wp-admin-bar-height));
		bottom: 0;		
		width: 100%;
		left: 0px;
		background: #fff;
		z-index: 999;
		transition: 0.3s all cubic-bezier(.68,-0.55,.27,1.55);
		transform: translateY(0);
		overflow-y: scroll;
		overflow-x: hidden;
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-color) var(--scrollbar-bc-color);
	}
}
	
	.accordion-menu.open { 
		visibility: visible;
		opacity: 1;
		transform: translateY(0);

	}
	
	/* chrome скрол */
	.overflow-menu-panel__content::-webkit-scrollbar,
	.accordion-menu::-webkit-scrollbar {
		width: 8px;
	}
	.overflow-menu-panel__content::-webkit-scrollbar-thumb,
	.accordion-menu::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: linear-gradient(10deg, #00000000 20%, #ffffff12 50%, #ffffff00 60%), repeating-linear-gradient(46deg, #ffffff 0 2em, var(--scrollbar-color) 0 4em);
		border: 1px solid #c2c2c2;
	}
	.overflow-menu-panel__content::-webkit-scrollbar-track,
	.accordion-menu::-webkit-scrollbar-track {
		background-color: var(--scrollbar-bc-color);
		border: 1px solid #c7c7c7;
		border-radius: 5px;
		box-shadow: 1px 1px 3px #bbbbbb inset, 4px 0px 3px #ffffff47 inset;
	}
	
	
	/* от flex менютата се позиционират едно под друго в block */
	.accordion-menu .menu {
		display: block;
	}
	/* цвят на менюто защото иначе е прозрачно */
	.accordion-menu .menu a {
		background: #fff;
	}
	/* премахва се големия падинг на главното меню а не подменютата */
	.accordion-menu .menu > li > a,
	.accordion-menu .menu a {
		padding: 10px 15px;
		border-bottom: 1px solid var(--main-border);
	}
	 @media (max-width: 767px) { 
	/* мобилен padding който трябва да е както на страницата */
	.site-header-wrap { 
		padding: 0 10px;
		height: var(--mrj-header-mobile-height);
		min-height: var(--mrj-header-mobile-height);
	}
	}
	
	
	/* svg стрелка */
	.accordion-menu .dropdown-menu-toggle {
		width: 13px;
		height: 13px;
	}
	.accordion-menu .dropdown-menu-toggle svg {
		  stroke-width: 2;
	}
	.accordion-menu .sub-menu .dropdown-menu-toggle svg,
	.accordion-menu ul.sub-menu li.current-menu-ancestor > a > .dropdown-menu-toggle svg {
		transform: rotate(90deg);
	}
		
	.accordion-menu .open > .dropdown-menu-toggle svg,
	.accordion-menu ul.sub-menu li a.open > .dropdown-menu-toggle svg {
		transform: rotate(270deg);
	}
	/* цвят на иконата на отворено главно меню (заглавие) */
	.accordion-menu li a.open .dropdown-menu-toggle svg {
		color: #fff;
	}
	/* svg стрелка */
	



	/* затворено подменю  */
	.accordion-menu ul.sub-menu {
		transition: 0.9s all cubic-bezier(.68,-0.55,.27,1.55);
		height: 0;
		overflow: hidden;		
		border: 0;
		border-radius: 0;

	}
	
	/**************************************************/
	/* черта в ляво на отворените менюта без с before*/
	/* когато се отвори се маркират всички вложени менюта и елементи */
	.accordion-menu ul.sub-menu {  position: relative; }
	.accordion-menu ul.sub-menu.open:before {
		content: "";
		position: absolute;
		height: 100%;		
		width: 3px;
		left: 0;
		z-index: 1;
	}
	/* първо ниво поменю */
	/* когато се отвори се маркират всички вложени менюта и елементи */
	.accordion-menu ul.sub-menu.open:before {
		background: var(--main-color);
	}
	
	/* второ ниво поменю */
	/* когато се отвори се маркират всички вложени менюта и елементи */
	.accordion-menu ul.sub-menu ul.sub-menu.open:before  {
		background: var(--color-2-bg-active);
	} 
	/* трето ниво поменю и всички след това */
	/* когато се отвори се маркират всички вложени менюта и елементи  */
	.accordion-menu ul.sub-menu ul.sub-menu ul.sub-menu.open:before {
			background: var(--color-3-bg-active);
	}
	/* тест без  border-left а с before*/
	/* черта в ляво на отворените менюта без с before */
	/**************************************************/
	
	
	
	/****************************************************/
	/* ефект за текущи (светещи) <a> елементи (активни) */
	
	/* вертикланата линия в дясно е с box-shadow  */
	.accordion-menu ul li.current-menu-item > a:not(.open),
	.accordion-menu ul li.current-menu-ancestor > a:not(.open)	{
		background-color: var(--mrj-hover-submenu-item);
		color: var(--main-color-text);
		box-shadow: 7px 0 0 0px var(--main-color) inset;
	}
	/* активни за отворените менюта 
	отворените менюта светят син или зелен свят в зависимост от нивото
	променя се цвета на вертикалната ликния в страни която е за активните менюта */
	/* второ ниво */
	.accordion-menu ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-item a:not(.open),
	.accordion-menu ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-ancestor a:not(.open) {
		box-shadow: 7px 0 0 0px var(--color-2-bg-active) inset;
	}
	/* трето ниво */
	.accordion-menu ul.sub-menu.open ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-item a:not(.open),
	.accordion-menu ul.sub-menu.open ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-ancestor a:not(.open) {
		box-shadow: 7px 0 0 0px var(--color-3-bg-active) inset;
	}
	/* ефект за текущи (светещи) <a> елементи (активни) */	
	/****************************************************/
	
	
	/********************************************/
	/* ефект на точка под иконата за текущо меню */
	.accordion-menu li.current-menu-item a:not(.open) > .menu-icon,
	.accordion-menu li.current-menu-ancestor a:not(.open) > .menu-icon { 
		position: relative;
	}
	.accordion-menu li.current-menu-item > a:not(.open) > .menu-icon::before,
	.accordion-menu li.current-menu-ancestor > a:not(.open) > .menu-icon::before,
	.accordion-menu li.current-menu-item > a:not(.open) >  .menu-icon::after,
	.accordion-menu li.current-menu-ancestor > a:not(.open) > .menu-icon::after {
		content: "";
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #13aff0;
		left: calc(50%);
		transform: translate(-50%,22px);
		animation: 1s mrj-menu-current-uhs-1 1.5s alternate infinite
		
	}
	.accordion-menu li.current-menu-item a:not(.open) > .menu-icon::after,
	.accordion-menu li.current-menu-ancestor a:not(.open) > .menu-icon::after {
		animation: 2s mrj-menu-current-uhs-2 1.5s infinite; 
	}
	
	/* второ ниво меню задаване на цвят цвят  */
	.accordion-menu ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-item a:not(.open) > .menu-icon::before,
	.accordion-menu ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-ancestor a:not(.open) > .menu-icon::before,
	.accordion-menu ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-item a:not(.open) >  .menu-icon::after,
	.accordion-menu ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-ancestor a:not(.open) > .menu-icon::after {
		background: var(--color-2-bg-active);
	}
	/* трето ниво меню задаване на цвят цвят  */
	.accordion-menu ul.sub-menu.open ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-item a:not(.open) > .menu-icon::before,
	.accordion-menu ul.sub-menu.open ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-ancestor a:not(.open) > .menu-icon::before,
	.accordion-menu ul.sub-menu.open ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-item a:not(.open) >  .menu-icon::after,
	.accordion-menu ul.sub-menu.open ul.sub-menu.open ul.sub-menu.open.last-subMenu-open li.current-menu-ancestor a:not(.open) > .menu-icon::after {
		background: var(--color-3-bg-active);
	}
	@keyframes mrj-menu-current-uhs-1 {
		0% { 
			transform: translate(-50%,22px);
		}
		100% { 
			transform: translate(-50%,22px) scale(1.3);
		}
	}
	@keyframes mrj-menu-current-uhs-2 {
		0% { 
			opacity: .4; 
		}
		100% { 
			opacity: 0; 
			transform:  translate(-50%,22px) scale(4);
		}
	}
	/* ефект на точка под иконата за текущо меню */
	/********************************************/
	
	
	

	
	
	
	
	/*******************/
	/* отворени a.open */
	/* отворено главно меню (заглавие) */
	.accordion-menu li a.open.last-link-open,
	/* първо ниво (подменю) отворено главно меню (заглавие) */
	.accordion-menu li a.open {		
		background-color: var(--main-color);
		/* border-left-color: var(--main-color-text); */
		color: #fff;
		margin-top: 1px;
		font-weight: 600;
		text-shadow: 0 1px 4px var(--main-color-text);
		border-bottom: 1px solid var(--main-color);
	}
	/* второ ниво (подменю) отворено главно меню (заглавие) */
	.accordion-menu ul.sub-menu li a.open {
		background-color: var(--color-2-bg-active);
		border-bottom: 1px solid var(--color-2-bg-active);		
		text-shadow: 0 1px 4px var(--color-2-shadow);
	}
	/* трето ниво (подменю) отворено главно меню (заглавие) */
	.accordion-menu ul.sub-menu ul.sub-menu li a.open {
		background-color: var(--color-3-bg-active);
		border-bottom: 1px solid var(--color-3-bg-active);
		text-shadow: 0 1px 4px var(--color-3-shadow);	
	}
	/* отворени a.open */
	/*******************/
	
	
	
	/******************************/	
	/* стрелката на отворено меню */
	.accordion-menu .menu li a.open::before {
		content: " ";
		width: 0px;
		height: 0px;
		position: absolute;
		top: 37px;
		left: 20px;
		background: transparent;
		transform: rotate(45deg);
		border-right: 7px solid var(--mrj-hover-submenu-item);
		border-bottom: 7px solid var(--mrj-hover-submenu-item);
		border-right-color: var(--main-color);
		border-bottom-color: var(--main-color);
		border-top: 7px solid #fff0;
		border-left: 7px solid #fff0;
		z-index: 1;
		box-shadow: 2px 2px 0px #fff;
	}
	/* първо ниво (подменю) before стрелката */
	.accordion-menu .menu .sub-menu.open li a.open::before {
		border-right-color: var(--color-2-bg-active);
		border-bottom-color: var(--color-2-bg-active);
	}
	/* второ ниво (подменю) before стрелката */
	.accordion-menu .menu .sub-menu.open li > .sub-menu.open li a.open::before {
		border-right-color: var(--color-3-bg-active);
		border-bottom-color: var(--color-3-bg-active);
	}
	/* стрелката на отворено меню */
	/******************************/

	
	

	/***********************************************************/
	/* светят само <a> елементите на последното отворено меню  */
	/* първо меню син цвят второ подменю и всивки след него са зелени */
	/* last-subMenu-open се добавя с JS */
	/* отворено подменю елементи (линкове) */
	/* първо ниво */
	.accordion-menu .sub-menu.last-subMenu-open a:not(.open) {
		background-color: var(--mrj-hover-submenu-item);
		color: var(--main-color-text);
		border-bottom: 1px solid var(--color-0-border);
	} 
	/* светват само <a> елементите на посленото отворено меню */
	/* второ ниво (подменю)  */
	.accordion-menu ul.sub-menu.open ul.sub-menu.last-subMenu-open a:not(.open) {
		background-color: var(--color-2-bg);
		color: var(--color-2-text);
		border-bottom: 1px solid var(--color-2-border);
	}
	
	/* светват само <a> елементите на посленото отворено меню */
	/* трето ниво (подменю) и всички по-долни нива са със същия цвят  */
	.accordion-menu ul.sub-menu.open ul.sub-menu.open ul.sub-menu.last-subMenu-open a:not(.open) {
		background-color: var(--color-3-bg);
		color: var(--color-2-text);
		border-bottom: 1px solid var(--color-2-border);
	}
	
	/* след последното отворено меню се поставя празно пространство */
	.accordion-menu .sub-menu.open.last-subMenu-open {
		margin-bottom: 5px;
		box-shadow: 0px 4px 3px -4px #cacaca;
	}
	/* светят само <a> елементите на последното отворено меню  */
	/***********************************************************/



	




	/****************************/
	/* вариант само с един цвят */
	/* с one-color-highlight се добавя с php от настройктие на менюто */
	
	/* отворено главо меню (заглавие) последно цветещо пълноцветно  */
	.accordion-menu .one-color-highlight li a.open.last-link-open,
	.accordion-menu .one-color-highlight ul.sub-menu ul.sub-menu li a.open.last-link-open,
	.accordion-menu .one-color-highlight ul.sub-menu ul.sub-menu ul.sub-menu li a.open.last-link-open 	{
		background-color: var(--main-color);
		border-bottom-color:  var(--main-color);
		color: #fff;
		margin-top: 1px;
		text-shadow: none;
	}

	/* отворено главо меню (заглавие) което не е последно  */
	.accordion-menu .one-color-highlight li a.open:not(.last-link-open),
	.accordion-menu .one-color-highlight ul.sub-menu ul.sub-menu li a.open:not(.last-link-open),
	.accordion-menu .one-color-highlight ul.sub-menu ul.sub-menu ul.sub-menu li a.open:not(.last-link-open) {
		background-color: var(--mrj-hover-submenu-item);
		border-bottom-color: var(--main-color);
		color: var(--main-color-text);
		text-shadow: none;
	}	
	/* светват само послените отворени */
	/* отворено подменю елементи (линкове) */
	.accordion-menu .one-color-highlight .sub-menu.last-subMenu-open a:not(.open),
	.accordion-menu .one-color-highlight ul.sub-menu.open  ul.sub-menu.last-subMenu-open li > a:not(.open),
	.accordion-menu .one-color-highlight ul.sub-menu.open ul.sub-menu.open ul.sub-menu.last-subMenu-open li > a:not(.open) {
		background-color: var(--mrj-hover-submenu-item);
		color: var(--main-color-text);
		border-bottom: 1px solid var(--color-0-border);
	} 

	/* чертата в дясно за отворените менюта е винаги един цвят */
	.accordion-menu .menu.one-color-highlight ul.sub-menu.open:before,
	.accordion-menu .menu.one-color-highlight ul.sub-menu ul.sub-menu.open:before,
	.accordion-menu .menu.one-color-highlight ul.sub-menu ul.sub-menu ul.sub-menu.open:before {
		background: var(--main-color);
		border-bottom-color: var(--main-color);	
	}
	
	/* триъгълната стрелка на отворените менюта */
	.accordion-menu .menu.one-color-highlight li a.open::before,
	.accordion-menu .menu.one-color-highlight .sub-menu.open li a.open::before,
	.accordion-menu .menu.one-color-highlight .sub-menu.open .sub-menu.open  li a.open::before	{
		border-right-color: var(--main-color);
		border-bottom-color: var(--main-color);		
	}
	.accordion-menu .one-color-highlight li a.open:not(.last-link-open) .dropdown-menu-toggle svg {
		color: var(--main-color);
	}
	.accordion-menu .one-color-highlight ul.sub-menu ul.sub-menu {
		border-left: 3px solid var(--main-color);
	}
	/* текущи */
	.accordion-menu .one-color-highlight ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-item a:not(.open),
	.accordion-menu .one-color-highlight ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-ancestor a:not(.open),
	.accordion-menu .one-color-highlight ul.sub-menu.open ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-item a:not(.open),
	.accordion-menu .one-color-highlight ul.sub-menu.open ul.sub-menu.open ul.sub-menu.last-subMenu-open li.current-menu-ancestor a:not(.open) {
		box-shadow: 7px 0 0 0px var(--main-color) inset
	}
	 /* текущи задаване на цвят цвят на точката до иконата important презаписва всички */
	.accordion-menu .one-color-highlight .menu-icon::before,
	.accordion-menu .one-color-highlight .menu-icon::after {
		background: var(--main-color) !important;
	}
	/* вариант само с един цвят */
	/****************************/

/* } */ 

/* ДИЗАЙН НА МОБИЛНО МЕНЮ АКОРДИОН  */
/************************************/

/**********************************/
/* ГЛАВНО МЕНЮ - ГЛАВНА НАВИГАЦИЯ */
/**********************************/






.entry-title {
  margin-bottom: 0.6em;
  margin-top: 0;
}




/******************************/
/* LAYER ПУБЛИКАЦИИ КАТЕГОРИИ */


/***********/
/* SIDEBAR */
/* main seting  */
.widget-title {
	font-family: Oswald;

}

/* sidebar box design */
.separate-containers #secondary .widget {
	background-color: #fff;
	margin-bottom: 20px;
	border: 1px solid #3e50623d;
	border-radius: 10px;
	box-shadow: 0 0px 7px 0px #3e506230;
}

/* заглавие на sidebar  */
.separate-containers .widget-title {
	font-weight: 300;
	font-size: 20px;
	margin: 0;
	margin-bottom: 0px;
	margin-bottom: 0.5em;
	line-height: 1.5;
	background: #3E5062;
	background: linear-gradient(180deg, #3E506200 10%, #f7f7f700 50%,#3E506200 80% ),
				repeating-linear-gradient(-45deg, #2d3e4f , #34414f 10px, #4A5C6F 40px, #3E5062 40px, #405264 60px, #3E5062 80px);
	color: #fff;
	padding: 3px 20px;
	border-radius: 5px 5px 0 0;
}
.separate-containers .widget-title::after {
	content: " ";
	position: relative;
	display: block;
	height: 2px;
	width: calc(100% + 40px);
	top: 7px;
	left: -20px;
	background-color: #3e5062;
}
.separate-containers .textwidget {
	padding: 0px 20px 20px 20px;
}



/* sidebar design plain-containers  */
.plain-containers .secondary {
	background-color: var(--mrj-global-color-7);
	padding: 0px 20px 20px 20px;
	border-left: 1px solid #cecece;
}
.plain-containers .widget-title {
	position: relative;
	font-weight: 400;
	font-size: 24px;	
}

.plain-containers .widget-title::before,
.plain-containers .widget-title::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -7px;

}
.plain-containers .widget-title::after {
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg,#4149571f , #414957b2 50%, #4149571f )
}

.plain-containers .widget-title::before {
	height: 15px;
	width: 22px;
	left: calc(50%);
	transform: translate(-50%, 0);
	bottom: -13px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23414957b2" viewBox="0 0 576 512"><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"></path></svg>');
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23414957b2" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="m15 8l-4.03 6L7 8z"/></svg>');
	background-position: center;
	background-repeat: no-repeat;
	background-color: #fafbfc;
	z-index: 1;	
}


/* sidebar v1 */
/*
.separate-containers #secondary .widget {
  background-color: #fff;
  margin-bottom: 20px;
  border: 1px solid #3e50623d;
  border-radius: 10px;
  box-shadow: 0 0px 7px 0px #3e506230;
}

.separate-containers .widget-title {
	font-family: Oswald;
	font-weight: 300;
	font-size: 20px;
	margin: 0;
	margin-bottom: 0px;
	margin-bottom: 0.5em;
	line-height: 1.5;
	background: #3E5062;
	background: linear-gradient(180deg, #3E506200 10%, #f7f7f700 50%,#3E506200 80% ), repeating-linear-gradient(-45deg, #2d3e4f , #34414f 10px, #4A5C6F 40px, #3E5062 40px, #405264 60px, #3E5062 80px);
	color: #fff;
	padding: 3px 20px;
	border-radius: 5px 5px 0 0;
}

.separate-containers .widget-title::after {
  content: " ";
  position: relative;
  display: block;
  height: 2px;
  width: calc(100% + 40px);
  top: 7px;
  left: -20px;
  background-color: #3e5062;
}

.separate-containers .textwidget {
	padding: 0px 20px 20px 20px;
	
}

.separate-containers aside {
	position: relative;
}
.separate-containers aside::before,
.separate-containers aside::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;	
	margin: -4px;
	border-radius: 13px;
	background: #3E5062;
}
.separate-containers aside::after {
	background: conic-gradient(#ff8e61 5%, #ec1899 10%, #9b47ff 20%, #279db0 30%, #47ffb2 40%,
	#29aef0 50%, #5ceac8 60%, #3eb314 70%, #0ec634 80%, #5084ff 90%, #ff8059 100%);
	box-shadow: 0px 0px 4px 0px #3e506280, inset 0px 0px 17px 4px #fff;
}

.separate-containers .widget-title {
	border-radius: 9px 10px 0 0;
}
*/
/* SIDEBAR */
/***********/










/* заглавия в публикация */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.2;
  font-family: Oswald;
}

body.admin-bar .entry-content h1::after {
	content: "Забележка до редактора: използването на H1 в съдържанието не се препоръчва. Това може да навреди на SEO оптимизацията на сайта Ви. Това съобщение е видимо само за влезлите в сайта.";
	position: relative;
	display: block;
	font-size: 12px;
	color: tomato;
}


/* заглави на публикация с Oswald */
h1.entry-title {
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 0.5em;
}

article {
	background-color: #fff;
}

.entry-content-wrap {
	padding: 40px;
}
.entry-content-wrap,
#secondary .widget	{
/* min 18px, default user browser 100% max 30px   */
	font-size: clamp(18px, 100%, 30px);
}


.site-content {
	max-width: var(--mrj-site-max-width);
	/* за да бъде до долу изпълнено за да може footer винаги да е най-долу*/
	flex-grow: 1;
	margin: 0 auto;
	padding: 0 20px;
}

.mrj-has-sidebar .site-content {
	display: grid;
	gap: 20px;
}

/* пропорции десен sidebar  */
.mrj-right-sidebar .site-content {
	grid-template-columns: 5fr minmax(320px, 2fr);
}
/* пропорции ляв sidebar  */
.mrj-left-sidebar .site-content {
	grid-template-columns: minmax(320px, 2fr) 5fr ;
}
/* заради заглавието на категориите се поставя grid-area */
.archive.mrj-has-sidebar .archive-title {
  grid-area: title;
}
.archive.mrj-has-sidebar .content-area {
	grid-area: content;
}
.archive.mrj-has-sidebar .secondary {
	grid-area: sidebar;
}

/* подредба на grid само за категориите защото имат заглавие */
.archive.mrj-right-sidebar .site-content {
	grid-template-rows: auto 1fr;
	grid-template-areas: "title title" "content sidebar";
}
/* подредба на grid само за категориите защото имат заглавие */
.archive.mrj-left-sidebar .site-content {
	grid-template-rows: auto 1fr;
	grid-template-areas: "title title" "sidebar content";
}
/* 
това мисля да не го ползвам защото то е само при мобилните
подредба на grid за целия сайт без категориите 
:not(.archive).mrj-left-sidebar .site-content {
	grid-template-rows: auto 1fr;
	grid-template-areas: "sidebar" "content";
}
:not(.archive).mrj-right-sidebar .site-content {
	grid-template-rows: auto 1fr;
	grid-template-areas: "content" "sidebar";
}*/
.separate-containers .site-content {
	margin-top: 32px; 	
}





/************/
/* КАТЕГОРИ */

/***************************************************/
/* БРОЙ КОЛОНИ И ПРОПОРЦИИ НА СЪДЪРЖАНИЕ И SIDEBAR */

.blog .site-main,
.archive .site-main,
.search-results .site-main  {
	display: grid;
	gap: 20px;
}

/* категории публикации в 3 колони с и без sidebar  */
/* за екрани над 1450px */
@media (min-width: 1450px) {
	.blog .site-content,
	.archive .site-content,
	.search-results .site-content {
		max-width: 1600px;
	}

	/* пропорции на сайта - съдържание и sidebar */
	.site-content {
		--col-main: 10fr;
		--col-side: 3fr;
	}
	
	/* брой колони на публикации */
	.site-main {
		--num-columns: 3;
		--num-columns-no-sidebar: 4;
	}
}

/* категории публикации в 3 колони с и без sidebar  */
/* за екрани над 1600px */
@media (max-width: 1450px) {
	.blog .site-content,
	.archive .site-content,
	.search-results .site-content {
		max-width: 1350px;
	}
	.site-content {
		--col-main: 10fr;
		--col-side: 4fr;
	}
	.site-main {
		--num-columns: 2;
		--num-columns-no-sidebar: 3;
	}
}
/* пропорции на сайта след като за взети променливите */
/* това са пропорциите за два варианта над 1060px и над 1450px */
/* right sidebar - пропорции на сайта съдържание и sidebar */
.blog.mrj-right-sidebar .site-content,
.archive.mrj-right-sidebar .site-content,
.search-results.mrj-right-sidebar .site-content {
	grid-template-columns: var(--col-main) minmax(310px, var(--col-side));
}

/* left sidebar - пропорции на сайта съдържание и sidebar */
.blog.mrj-left-sidebar .site-content,
.archive.mrj-left-sidebar .site-content,
.search-results.mrj-left-sidebar .site-content {
	grid-template-columns: minmax(310px, var(--col-side)) var(--col-main)  ;
}
			
	
	

/* категории 2 колони без sidebar  */
@media (max-width: 1060px) {
	/* вероятно трябва да се постави другаде */
	.site-content { padding: 0 20px; }
	
	/* пропорции на сайта - sidebar и съдържание едно под друго  */
	/* за целия сайт не само за категории */
	.site-content,
	.mrj-right-sidebar .site-content,
	.mrj-left-sidebar  .site-content,
	.mrj-no-sidebar  .site-content,
	.blog.mrj-right-sidebar .site-content,
	.archive.mrj-right-sidebar .site-content,		
	.blog.mrj-left-sidebar  .site-content,	
	.archive.mrj-left-sidebar  .site-content,	
	.blog.mrj-no-sidebar .site-content,
	.archive.mrj-no-sidebar  .site-content {
		grid-template-columns: 1fr;
	}
	/* съдържанието е над sidebar */
	.mrj-left-sidebar  .content-area,
	.blog.mrj-left-sidebar  .content-area {
		order: 1;
	}
	
	/* sidebar е под  съдържанието */
	.mrj-left-sidebar  .secondary,
	.blog.mrj-left-sidebar  .secondary {
		order: 2;
	}

	
	/* само за категориите заради заглавието */	
	.archive.mrj-right-sidebar  .site-content,
	.archive.mrj-left-sidebar  .site-content {
		grid-template-areas: "title" "content" "sidebar";
	}
	.archive.mrj-no-sidebar .site-content {
		grid-template-areas: "sidebar" "content";
	}
	/* за всичко останало */	
	 .site-content {
		 grid-template-areas: "sidebar" "content";
	 }
	
	
	.site-main {
		--num-columns: 2;
		--num-columns-no-sidebar: 2;
	}
}



/* публикации в категории 1 колони */
@media (max-width: 650px) {
	/* брой колони - една колона */
	.site-main {
		--num-columns: 1;
		--num-columns-no-sidebar: 1;
	}
			
	/* perfect padding */
	/*
		най-добрите практики
		 под 375px - 5 px 
		 420–480px - 10 px 
		 над 600px - 20–30 px 
	*/
	
	/* 	px / padding
		650px  = 30px
		420px = 10px
		360px = 5px
		
		650px  = 30px
		30 / 650 * 100 = 4.615vw

		420px = 10px
		10 / 420 * 100 = 2.38vw

		Средна стойност: ~4.35vw works well
		
		Точна формула
		10px + (30 - 10) * ((100vw - 420px) / (650 - 420))
	
	*/
	.site-content,
	.site-content {
		 padding: clamp(5px, calc(5px + (30 - 5) * ((100vw - 360px) / (650 - 360))), 30px);
	}
}


	/************************************************/
	/* брой колони след като за взети променливите  */
	/* брой колони на публикациите със sidebar */
	.blog .site-main,
	.archive .site-main,
	.search-results .site-main {
		grid-template-columns: repeat(var(--num-columns), 1fr);
	}
	
	/* брой колони на публикациите без sidebar*/
	.blog.mrj-no-sidebar .site-main,
	.archive.mrj-no-sidebar .site-main,
	.search-results.mrj-no-sidebar .site-main {
		grid-template-columns: repeat(var(--num-columns-no-sidebar), 1fr);
	} 
	/* брой колони след като за взети променливите  */
	/************************************************/

/* БРОЙ КОЛОНИ И ПРОПОРЦИИ НА СЪДЪРЖАНИЕ И SIDEBAR */
/***************************************************/



/* ДРЕБНИ НЕЩА */

/* сянка и заоблени ъгли */
.entry {
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0px 6px 15px -2px rgba(16,24,40,0.05);
	filter: drop-shadow(0 0px 1px hsl(210, 25%, 73.3%));
	
}

/* размер на картиките */
.blog .loop-entry  .wp-post-image,
.archive .loop-entry  .wp-post-image,
.search-results .loop-entry  .wp-post-image {
	aspect-ratio: 3/2;
	object-fit: cover;
}

.archive .entry-title,
.blog .entry-title,
.search-results .entry-title {
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.3;
}
.archive a .entry-title,
.blog  a .entry-title,
.search-results a .entry-title  {
	color: var(--mrj-body-color-1);
}

/* от 15px до 25px след 650px започва да се намаля до 15px при 360px */
.entry-content-wrap {
	/* padding 25px след 650px започва да се намаля до 15px при 360px */
	padding: clamp(15px, calc(15px + (25 - 15) * ((100vw - 360px) / (650 - 360))), 25px); 
}
.loop-entry img.wp-post-image {
	width: 100%;
	max-width: none;
	display: block;
	height: auto;
}

/* ДРЕБНИ НЕЩА */
/***************/


.archive-title-selection {
	/*
	background: background: url(../img/black.avif);
	background: url(../svg/pattern-1.svg);
	background-size: 150px auto;
	background: url(../img/hexa2-big.avif);
	background-size: 293px auto;
	*/
	background: url(../img/hexa1.avif);
	background-size: clamp(100px, 50.0000px + 10.0000vw, 150px) auto;
	background-position: 0px 15px;
	width: 100%;
	
	display: flex;
	position: relative;
	overflow: hidden;
}

/* варитн без шарена линия
.archive-title-selection::after {
	content: "";
	display: block;
	height: 16px;
	width: 100%;
	background: #3e5062;
	position: absolute;
	z-index: 1;
	bottom: 0px;
	box-shadow: 0px -2px 23px #3e50629c;
	background: linear-gradient(0deg, #f0f5fa 0px ,#cacaca 3px,#d5d5d5 8px, #bbb 100%);
}
*/

.archive-title__sep {
	margin: 0;
	border: none;
	height: 16px;
	width: 100%;
	background: #3e5062;
	position: absolute;
	z-index: 1;
	bottom: 0px;
	box-shadow: 0px -2px 23px #3e50629c,  inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
	background: repeating-linear-gradient(-45deg, #d0d0d0 , #e1e1e1 10px, #FFF 40px, #3E5062 40px, #405264 60px, #3E5062 80px);
}

/* за сйата miraj.bg */
.archive-title__sep.mrj-site {
	background-image: linear-gradient(to right, #01a0d0 0%, #52b415 12%, #ced512 25%, #e30ca9 37%, #00baf2 50%, #52b415 63%, #ced512 76%, #e30ca9 87%, #00baf2 100%)
}


.archive-title__sep:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	animation: move-title-sep 3s cubic-bezier(.68,-0.55,.27,1.55);
	animation-iteration-count: 1;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	z-index: 1;
	overflow: hidden;	
}

/* за сайта miraj.bg */
.archive-title__sep.mrj-site:after {
	background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.64) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.53) 50%, rgba(255, 255, 255, 0.88) 75%, transparent 75%, transparent );		
	background-size: 50px 50px;
}


@keyframes move-title-sep {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -50px -50px;
  }
}


.archive-title {	
	display: flex;
	align-items: center;
	width: 1600px;
	margin: 0 auto;
	padding: 50px 0 60px 0;
}
.archive-title h1 { 
	align-self: center;
}
.archive-title h1 {
	margin: 0;
	font-weight: 300;
	font-size: clamp(1.375rem, 1.0750rem + 1.0667vw, 1.875rem);
	background-color: #000c;
	color: #fff;
	padding: clamp(3px, 1.8000px + 0.2667vw, 5px) clamp(11px, 8.6000px + 0.5333vw, 15px);
	z-index: 2;
}


/* сияние */
.mrj-sheen {
	width: 100%;
	height: 300px;
	position: absolute;
	z-index: 1;
	top: 1px;
	opacity: 0.5;
	mix-blend-mode: darken;
    --stripes: repeating-linear-gradient(
        100deg,
        #fff 0%,
        #fff 7%,
        transparent 10%,
        transparent 12%,
        #fff 16%
    );
    --rainbow: repeating-linear-gradient(
        100deg,
        #60a5fa 10%,
        #e879f9 15%,
        #60a5fa 20%,
        #5eead4 25%,
        #60a5fa 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;
    filter: invert(100%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
	mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    pointer-events: none;
	opacity: 0.2;
}
.mrj-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    animation: mrj-sheen 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
}
@keyframes mrj-sheen {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}
/* сияние */

	

/* КАТЕГОРИ */
/************/


/**************/
/* ПУБЛИКАЦИИ */

.featured-image img {
	aspect-ratio: 16/9;
	object-fit: cover;
}

/* при 100% ширина да е с фон размазана картика */
.mrj-no-sidebar .featured-image {
	position: relative;
	overflow: hidden;
}
.mrj-no-sidebar .featured-image img {
	margin: 0 auto;
	display: block;
	position: relative;
	z-index: 1;
}
.mrj-no-sidebar .featured-image::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background-image: var(--background);
	filter: blur(10px) brightness(0.9);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


/* ПУБЛИКАЦИИ */
/**************/