@import "hi_config.css";
@import "hi_reset.css";
@import "hi_components.css";
@import "hi_responsive.css";

/** PAGINATION **/
body .hi-pagination {
	display: block;
	margin: var(--wp--preset--spacing--55) 0 0;
	text-align: center;
}
body .hi-pagination ul {
	list-style: none;

	display: flex;
	flex-flow: nowrap;
	justify-content: center;
	align-items: flex-end;

	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
}
body .hi-pagination ul li {
	list-style: none;

	display: inline-block;
	vertical-align: middle;

	margin: 0;
	padding: 0;
}
body .hi-pagination ul li:not(.hi-pagination-more) > * {
	display: block;

	min-width: 2.5em;

	margin: 0;
	padding: var(--wp--preset--spacing--10);

	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	color: #777776;

	border: 1px solid #D2D2D1;
	border-radius: 4px;
	text-decoration: none;
}
body .hi-pagination ul li > a:hover,
body .hi-pagination ul li > a:focus {
	color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}
body .hi-pagination ul li.hi-current > * {
	color: var(--wp--preset--color--secondary-text);
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}
/** END PAGINATION **/

/** NAVBAR **/
body .hi-navbar {
	position: relative;

	font-size: var(--hi-font-size-navbar);
	font-weight: var(--hi-font-weight-navbar);
	line-height: var(--hi-line-height-navbar);
}

/* navbar list */
body .hi-navbar > .menu,
body .hi-navbar .hi-navbar-content > .menu,
body .hi-navbar ul.hi-navbar-content {
	list-style: none;

	display: flex;
	flex-direction: column;

	margin: var(--hi-spacing-vertical-navbar-list) auto;
	padding: 0;
	gap: 0;

	/* navlist first items */
	& > .menu-item {
		cursor: default;
		list-style: none;
		display: block;
		margin: 0;
		padding: var(--hi-padding-vertical-navbar-list) var(--hi-padding-horizontal-navbar-list);

		/* navlist first items links as/has current page */
		&.current-menu-item > a,
		&.current-menu-item > a:focus,
		&.current-menu-item > a:visited,
		&:has(.current-menu-item) > a,
		&:has(.current-menu-item) > a:focus,
		&:has(.current-menu-item) > a:visited {
			color: var(--hi-color-text-navbar-list-link-current);
			text-decoration: var(--hi-text-decoration-navbar-list-link-current);
			text-underline-offset: var(--hi-text-decoration-offset-navbar-list-link-current, var(--hi-text-decoration-offset));
			text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-list-link-current, var(--hi-text-decoration-thickness));
			opacity: var(--hi-opacity-navbar-list-link-current);
		}

		&:has(.current-menu-item)::after {
			color: var(--hi-color-text-navbar-sublist-link-current);
		}

		/* navlist first items links */
		& > a,
		& > a:focus,
		& > a:active,
		& > a:visited {
			color: var(--hi-color-text-navbar-list-link);
			text-decoration: var(--hi-text-decoration-navbar-list-link);
			text-underline-offset: var(--hi-text-decoration-offset-navbar-list-link, var(--hi-text-decoration-offset));
			text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-list-link, var(--hi-text-decoration-thickness));
			opacity: var(--hi-opacity-navbar-list-link);
			transition: opaity var(--hi-transition-time-navbar-list-link);

			&:hover,
			&:focus-visible {
				color: var(--hi-color-text-navbar-list-link-hover);
				text-decoration: var(--hi-text-decoration-navbar-list-link-hover);
				text-underline-offset: var(--hi-text-decoration-offset-navbar-list-link-hover, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-list-link-hover, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-navbar-list-link-hover);
			}
			&:active {
				color: var(--hi-color-text-navbar-list-link-active);
				text-decoration: var(--hi-text-decoration-navbar-list-link-active);
				text-underline-offset: var(--hi-text-decoration-offset-navbar-list-link-active, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-list-link-active, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-navbar-list-link-active);
			}
		}

		/* with sub nav list */
		&:has(> .sub-menu) {
			cursor: pointer;
			position: relative;
			padding-right: calc(var(--hi-padding-horizontal-navbar-list) + calc(var(--hi-size-navbar-sublist-mark) + var(--hi-spacing-navbar-sublist-mark)));

			&:not(:has(> .hi-open-submenu))::after,
			& > .hi-open-submenu {
				position: absolute;
				top: var(--hi-padding-vertical-navbar-list);
				right: var(--hi-padding-horizontal-navbar-list);

				display: inline-block;
				vertical-align: middle;
				transition: transform var(--hi-transition-time-navbar-sublist-mark);
			}
			&:not(:has(> .hi-open-submenu))::after,
			& > .hi-open-submenu::after {
				content: "\f107";
				font-family: var(--hi-font-family-icon-awsome);
				font-weight: var(--hi-font-weight-icon-awsome);
			}

			/*[without JS] &:hover { */
			&.hi-opened {
				background-color: var(--hi-color-background-navbar-list-opened);

				&::after,
				& > .hi-open-submenu {
					transform: rotate(-180deg);
				}

				/*[without JS] & > .sub-menu {
					display: block;
				}*/
			}
		}

		/* sub nav list */
		& > .sub-menu {
			cursor: default;
			list-style: none;
			display: none;

			position: absolute;
			z-index: var(--hi-index-navbar);
			top: 100%;
			left: 0;

			min-width: 100%;
			margin: 0;
			padding: 0 var(--hi-padding-horizontal-navbar-sublist);

			font-size: var(--hi-font-size-navbar-sublist);
			font-weight: var(--hi-font-weight-navbar-sublist);
			line-height: var(--hi-line-height-navbar-sublist);

			background-color: var(--hi-color-background-navbar-sublist);
			color: var(--hi-color-text-navbar-sublist);

			/*[without JS] transition: all var(--hi-transition-time-navbar-sublist-toggle); */

			&::-webkit-scrollbar {
				width: var(--hi-size-scrollbar);
				height: var(--hi-size-scrollbar);
			}

			&::-webkit-scrollbar-track {
				background-color: var(--hi-color-background-navbar-sublist);
				border-radius: var(--hi-border-radius-scrollbar);
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--hi-color-text-navbar-sublist-link);
				border-radius: var(--hi-border-radius-scrollbar);
			}

			&::-webkit-scrollbar-thumb:hover {
				background-color: var(--hi-color-text-navbar-sublist-link-hover);
			}

			/* next sublablels */
			& .sub-menu {
				display: none;
				list-style: none;
				margin: 0;
				padding: 0 0 0 var(--hi-spacing-navbar-sublist-item);
			}

			& .menu-item {
				cursor: default;
				list-style: none;
				margin: 0;
				padding: var(--hi-spacing-navbar-sublist-item) 0 0;
			}

			/* sub nav list with more levels */
			.menu-item:has(> .sub-menu) {
				cursor: pointer;
				position: relative;
				padding-right: calc(var(--hi-size-navbar-sublist-mark) + var(--hi-spacing-navbar-sublist-mark));

				&:not(:has(> .hi-open-submenu))::after,
				& > .hi-open-submenu {
					position: absolute;
					top: var(--hi-padding-horizontal-navbar-list);
					right: 0;

					display: inline-block;
					vertical-align: middle;
					transition: transform var(--hi-transition-time-navbar-sublist-mark);

					opacity: var(--hi-opacity-navbar-list-link);
				}
				&:not(:has(> .hi-open-submenu))::after,
				& > .hi-open-submenu::after {
					content: "\f107";
					font-family: var(--hi-font-family-icon-awsome);
					font-weight: var(--hi-font-weight-icon-awsome);
				}
				&:not(:has(> a:hover)):hover:hover:not(:has(> .hi-open-submenu))::after,
				&:not(:has(> a:hover)):hover > .hi-open-submenu,
				&:not(:has(> a:hover)):hover > .hi-open-submenu:hover,
				&:focus-visible:not(:has(> .hi-open-submenu))::after,
				&:focus-visible > .hi-open-submenu,
				& > .hi-open-submenu:focus-visible {
					color: var(--hi-color-text-navbar-list-link-hover);
					text-decoration: none;
					opacity: var(--hi-opacity-navbar-list-link-hover);
				}
				&:not(:has(> a:active)):active:not(:has(> .hi-open-submenu))::after,
				&:not(:has(> a:active)):active > .hi-open-submenu
				& > .hi-open-submenu:active {
					color: var(--hi-color-text-navbar-list-link-active);
					text-decoration: none;
					opacity: var(--hi-opacity-navbar-list-link-active);
				}

				&.hi-opened::after,
				&.hi-opened > .hi-open-submenu {
					transform: rotate(-180deg);
				}
			}

			/* sub nav list links as/has current page */
			& .menu-item.current-menu-item > a:not(:hover, :focus-visible, :active),
			& .menu-item:has(.current-menu-item) > a:not(:hover, :focus-visible, :active) {
				color: var(--hi-color-text-navbar-sublist-link-current);
				text-decoration: var(--hi-text-decoration-navbar-sublist-link-current);
				text-underline-offset: var(--hi-text-decoration-offset-navbar-sublist-link-current, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-sublist-link-current, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-navbar-sublist-link-current);
			}

			/* sub nav list links */
			& > a,
			& > a:focus,
			& > a:visited,
			& > a:active {
				color: var(--hi-color-text-navbar-sublist-link);
				text-decoration: var(--hi-text-decoration-navbar-sublist-link);
				text-underline-offset: var(--hi-text-decoration-offset-navbar-sublist-link, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-sublist-link, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-navbar-sublist-link);
				transition: opaity var(--hi-transition-time-navbar-sublist-link);

				&:hover,
				&:focus-visible {
					color: var(--hi-color-text-navbar-sublist-link-hover);
					text-decoration: var(--hi-text-decoration-navbar-sublist-link-hover);
					text-underline-offset: var(--hi-text-decoration-offset-navbar-sublist-link-hover, var(--hi-text-decoration-offset));
					text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-sublist-link-hover, var(--hi-text-decoration-thickness));
					opacity: var(--hi-opacity-navbar-sublist-link-hover);
				}
				&:active {
					color: var(--hi-color-text-navbar-sublist-link-active);
					text-decoration: var(--hi-text-decoration-navbar-sublist-link-active);
					text-underline-offset: var(--hi-text-decoration-offset-navbar-sublist-link-active, var(--hi-text-decoration-offset));
					text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-sublist-link-active, var(--hi-text-decoration-thickness));
					opacity: var(--hi-opacity-navbar-sublist-link-active);
				}
			}
		}
	}
}

/* navbar toggle */
body .hi-navbar > .hi-navbar-toggle {
	--hi-min-width-button: fit-content;
	--hi-min-height-button: fit-content;
	--hi-spacing-vertical-button: 0;
	--hi-padding-vertical-button: var(--hi-padding-vertical-navbar-toggle-button, var(--hi-padding-navbar-toggle-button));
	--hi-padding-horizontal-button: var(--hi-padding-horizontal-navbar-toggle-button, var(--hi-padding-navbar-toggle-button));
	--hi-spacing-icon-button-icon: 0;
	--hi-font-size-button: 0;
	--hi-text-decoration-button: none;
	--hi-color-text-button: transparent;
	--hi-color-background-button: var(--hi-color-background-navbar-toggle-button);
	--hi-border-width-button: var(--hi-border-width-navbar-toggle-button);
	--hi-border-style-button: var(--hi-border-style-navbar-toggle-button);
	--hi-color-border-button: var(--hi-color-border-navbar-toggle-button);
	--hi-border-radius-button: var(--hi-border-radius-navbar-toggle-button);
	--hi-opacity-button: var(--hi-opacity-navbar-toggle-button);
	--hi-transition-time-button: var(--hi-transition-time-navbar-toggle-button);
	/* hover */
	--hi-text-decoration-button-hover: var(--hi-text-decoration-button);
	--hi-color-background-button-hover: var(--hi-color-background-navbar-toggle-button-hover);
	--hi-color-text-button-hover: var(--hi-color-text-button);
	--hi-color-border-button-hover: var(--hi-color-border-navbar-toggle-button-hover);
	/* active */
	--hi-text-decoration-button-active: var(--hi-text-decoration-button);
	--hi-color-text-button-active: var(--hi-color-text-button);
	--hi-color-background-button-active: var(--hi-color-background-navbar-toggle-button-active);
	--hi-color-border-button-active: var(--hi-color-border-navbar-toggle-button-active);


	&::before {
		display: block;

		content: "\f0c9";
		/* fa-bars */
		font-family: var(--hi-font-family-icon-awsome);
		font-weight: var(--hi-font-weight-icon-awsome);
		font-size: var(--hi-font-size-navbar-toggle-button);

		color: var(--hi-color-text-navbar-toggle-button);
	}

	&:hover::before,
	&:focus-visible::before {
		color: var(--hi-color-text-navbar-toggle-button-hover);
	}

	&:active::before {
		color: var(--hi-color-text-navbar-toggle-button-active);
	}
}

body .hi-navbar.hi-opened > .hi-navbar-toggle::before,
body .hi-navbar.hi-opened > .hi-navbar-toggle:focus::before {
	content: "\f00d";
	/* fa-xmark */
}

body .hi-navbar > .hi-navbar-toggle + .hi-navbar-content,
body .hi-navbar > .hi-navbar-toggle + div:has( > ul.hi-navbar-content) {
	display: none;
	overflow: auto;

	position: fixed;
	z-index: var(--hi-index-navbar);
	top: calc(var(--hi-height-wp-admin-bar) + var(--hi-height-header));
	right: 0;

	width: 100%;
	max-height: var(--hi-max-height-screen);
	background-color: var(--hi-color-background-header);
	border-bottom: var(--hi-border-header);
	box-shadow: var(--hi-box-shadow-header);

	&::-webkit-scrollbar {
		width: var(--hi-size-scrollbar);
		height: var(--hi-size-scrollbar);
	}

	&::-webkit-scrollbar-track {
		background-color: var(--hi-color-background-navbar-sublist);
		border-radius: var(--hi-border-radius-scrollbar);
	}

	&::-webkit-scrollbar-thumb {
		background-color: var(--hi-color-text-navbar-sublist-link);
		border-radius: var(--hi-border-radius-scrollbar);
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: var(--hi-color-text-navbar-sublist-link-hover);
	}

	& > .menu {
		width: 100%;
		max-width: min(100%, var(--wp--style--global--wide-size));
		margin-inline: auto;
		padding-inline: var(--hi-spacing-horizontal-screen);

		& > .menu-item > .sub-menu {
			position: relative;
			top: auto;
		}
	}
}

/** END NAVBAR **/

/** SITE HEADER **/
body:has(.hi-site-header) {
	padding-top: var(--hi-height-header);
}
body .hi-site-header {
	position: fixed;
	z-index: var(--hi-index-header);
	top: var(--hi-height-wp-admin-bar);
	left: 0;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	width: 100%;
	min-height: var(--hi-height-header);
	margin: 0;
	padding: 0 var(--hi-padding-horizontal-header);

	background-color: var(--hi-color-background-header);
	color: var(--hi-color-text-header);
	border-bottom: var(--hi-border-header);
	box-shadow: var(--hi-box-shadow-header);

	& > * {
		margin-block: 0;

		& > .wp-block-buttons,
		& > .wpml-language-switcher-block {
			width: auto !important;
			margin: 0;
		}
	}

	/* header links */
	& a:not(.wp-element-button),
	& a:not(.wp-element-button):focus,
	& a:not(.wp-element-button):visited,
	& a:not(.wp-element-button):active {
		color: var(--hi-color-text-navbar-list-link);
		text-decoration: var(--hi-text-decoration-navbar-list-link);
		text-underline-offset: var(--hi-text-decoration-offset-navbar-list-link, var(--hi-text-decoration-offset));
		text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-list-link, var(--hi-text-decoration-thickness));
		opacity: var(--hi-opacity-navbar-list-link);
		transition: opacity var(--hi-transition-time-navbar-list-link);

		&:hover,
		&:focus-visible {
			color: var(--hi-color-text-navbar-list-link-hover);
			text-decoration: var(--hi-text-decoration-navbar-list-link-hover);
			text-underline-offset: var(--hi-text-decoration-offset-navbar-list-link-hover, var(--hi-text-decoration-offset));
			text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-list-link-hover, var(--hi-text-decoration-thickness));
			opacity: var(--hi-opacity-navbar-list-link-hover);
		}

		&:active {
			color: var(--hi-color-text-navbar-list-link-active);
			text-decoration: var(--hi-text-decoration-navbar-list-link-active);
			text-underline-offset: var(--hi-text-decoration-offset-navbar-list-link-active, var(--hi-text-decoration-offset));
			text-decoration-thickness: var(--hi-text-decoration-thickness-navbar-list-link-active, var(--hi-text-decoration-thickness));
			opacity: var(--hi-opacity-navbar-list-link-active);
		}

		&.hi-main-link {
			position: fixed;
			top: var(--hi-height-wp-admin-bar);
			left: 50%;
			z-index: var(--hi-index-header);
			transform: translate(-50%, 0);

			display: block;
			transition: transform var(--hi-transition-time-s);

			&:not(:focus-visible) {
				transform: translate(-50%, calc(-100% - var(--hi-height-wp-admin-bar)));
			}

			&:first-child + * {
				margin-top: 0;
			}
		}
	}

	/* Columns */
	& > .wp-block-columns {
		padding-block: var(--hi-padding-vertical-header);
	}

	& > .wp-block-columns > .wp-block-column {
		display: flex;
		flex: none;
		justify-content: center;
		align-items: center;
		gap: var(--hi-spacing-header-columns);

		&:first-child {
			justify-content: flex-start;
		}

		&:last-child {
			justify-content: flex-end;
		}

		& > .wp-block-buttons {
			max-width: fit-content;
			margin: 0;
		}
	}

	/* Logo */
	.custom-logo-link {
		display: inline-block;

		& img {
			width: auto;
			max-height: var(--hi-height-header);

			/* DEMO */
			height: 30px;
		}
	}

	/* Navbar */
	& .hi-navbar > .menu,
	& .hi-navbar .hi-navbar-content,
	& .hi-navbar div.hi-navbar-content > .menu {
		margin: 0;

		& .sub-menu {
			--hi-color-text-navbar-list-link: var(--hi-color-text-navbar-sublist-link, var(--hi-color-text-navbar-list-link));
			--hi-text-decoration-navbar-list-link: var(--hi-text-decoration-navbar-sublist-link, var(--hi-text-decoration-navbar-list-link));
			--hi-opacity-navbar-list-link: var(--hi-opacity-navbar-sublist-link, var(--hi-opacity-navbar-list-link));
			--hi-color-text-navbar-list-link-hover: var(--hi-color-text-navbar-sublist-link-hover, var(--hi-color-text-navbar-list-link-hover));
			--hi-text-decoration-navbar-list-link-hover: var(--hi-text-decoration-navbar-sublist-link-hover, var(--hi-text-decoration-navbar-list-link-hover));
			--hi-opacity-navbar-list-link-hover: var(--hi-opacity-navbar-sublist-link-hover, var(--hi-opacity-navbar-list-link-hover));
			--hi-color-text-navbar-list-link-active: var(--hi-color-text-navbar-sublist-link-active, var(--hi-color-text-navbar-list-link-active));
			--hi-text-decoration-navbar-list-link-active: var(--hi-text-decoration-navbar-sublist-link-active, var(--hi-text-decoration-navbar-list-link-active));
			--hi-opacity-navbar-list-link-active: var(--hi-opacity-navbar-sublist-link-active, var(--hi-opacity-navbar-list-link-active));
		}
	}
}
/** END SITE HEADER **/

/** SITE FOOTER **
body .hi-site-footer {}
/** END SITE FOOTER **/

/** BREADCRUMBS **/
body .hi-breadcrumbs {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--hi-spacing-vertical-breadcrumbs) 0;

	& .hi-breadcrumbs-list,
	& .hi-breadcrumbs-item {
		display: flex;
		flex-wrap: nowrap;
		vertical-align: middle;
		align-items: flex-start;
		gap: var(--hi-spacing-horizontal-breadcrumbs);

		list-style: none;

		font-size: var(--hi-font-size-breadcrumbs);
		font-weight: var(--hi-font-weight-breadcrumbs);
		line-height: var(--hi-height-breadcrumbs);

		&.hi-breadcrumbs-list {
			width: 100%;
			max-width: min(100%, var(--wp--style--global--wide-size));
			margin: 0 auto;
			padding: 0 var(--hi-spacing-horizontal-screen);
		}

		&.hi-breadcrumbs-item {
			margin: 0;
			padding: 0;
		}

		& a {
			display: block;
		}

		& .hi-breadcrumbs-item + .hi-breadcrumbs-item::before {
			content: "\f105";
			/* fa-angle-right */
			font-family: var(--hi-font-family-icon-awsome);
			font-weight: var(--hi-font-weight-icon-awsome);

			display: block;
		}
	}
}

/* Put breadcrumbs in next element */
body .hi-breadcrumbs:has(+ .alignfull.has-background),
body .hi-breadcrumbs:has(+ .wp-block-cover),
body .hi-breadcrumbs:has(+ .wp-block-cover-image),
body .hi-breadcrumbs:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .alignfull.has-background:first-child),
body .hi-breadcrumbs:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .alignfull.wp-block-cover:first-child),
body .hi-breadcrumbs:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .alignfull.wp-block-cover-image:first-child) {
	position: absolute;
	z-index: var(--hi-index-breadcrumbs);
	top: 0;
	left: 0;

	& + .has-background,
	& + .wp-block-cover > .wp-block-cover__inner-container,
	& + .wp-block-cover-image > .wp-block-cover__inner-container,
	& + .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > *:first-child {
		padding-top: calc(var(--hi-height-breadcrumbs) + var(--hi-spacing-vertical-breadcrumbs)*2);
	}

	/* Breadcrumbs with primary text color */
	&:has(+ .has-primary-gradient-background) .hi-breadcrumbs-item,
	&:has(+ .has-primary-gradient-light-background) .hi-breadcrumbs-item,
	&:has(+ .has-primary-gradient-dark-background) .hi-breadcrumbs-item,
	&:has(+ .has-primary-background-color) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-primary-gradient-background:first-child) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-primary-gradient-light-background:first-child) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-primary-gradient-dark-background:first-child) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-primary-background-color:first-child) .hi-breadcrumbs-item {
		color: var(--hi-color-text-has-primary, var(--hi-color-text-has-secondary));

		& a,
		& a:focus,
		& a:visited {
			color: currentColor;
			text-decoration: var(--hi-text-decoration-has-background-link);
			text-underline-offset: var(--hi-text-decoration-offset-has-background-link, var(--hi-text-decoration-offset));
			text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link, var(--hi-text-decoration-thickness));
			opacity: var(--hi-opacity-has-background-link);

			&:hover,
			&:focus-visible {
				color: currentColor;
				text-decoration: var(--hi-text-decoration-has-background-link-hover);
				text-underline-offset: var(--hi-text-decoration-offset-has-background-link-hover, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link-hover, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-has-background-link-hover);
			}
			&:active {
				color: currentColor;
				text-decoration: var(--hi-text-decoration-has-background-link-active);
				text-underline-offset: var(--hi-text-decoration-offset-has-background-link-active, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link-active, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-has-background-link-active);
			}
		}
	}

	/* Breadcrumbs with secondary text color */
	&:has(+ .has-secondary-gradient-background) .hi-breadcrumbs-item,
	&:has(+ .has-secondary-gradient-light-background) .hi-breadcrumbs-item,
	&:has(+ .has-secondary-gradient-dark-background) .hi-breadcrumbs-item,
	&:has(+ .has-secondary-background-color) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-secondary-gradient-background:first-child) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-secondary-gradient-light-background:first-child) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-secondary-gradient-dark-background:first-child) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .has-secondary-background-color:first-child) .hi-breadcrumbs-item {
		color: var(--hi-color-text-has-primary, var(--hi-color-text-has-secondary));

		& a,
		& a:focus,
		& a:visited {
			color: currentColor;
			text-decoration: var(--hi-text-decoration-has-background-link);
			text-underline-offset: var(--hi-text-decoration-offset-has-background-link, var(--hi-text-decoration-offset));
			text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link, var(--hi-text-decoration-thickness));
			opacity: var(--hi-opacity-has-background-link);

			&:hover,
			&:focus-visible {
				color: currentColor;
				text-decoration: var(--hi-text-decoration-has-background-link-hover);
				text-underline-offset: var(--hi-text-decoration-offset-has-background-link-hover, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link-hover, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-has-background-link-hover);
			}
			&:active {
				color: currentColor;
				text-decoration: var(--hi-text-decoration-has-background-link-active);
				text-underline-offset: var(--hi-text-decoration-offset-has-background-link-active, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link-active, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-has-background-link-active);
			}
		}
	}

	/* Breadcrumbs with image text color */
	&:has(+ .wp-block-cover) .hi-breadcrumbs-item,
	&:has(+ .wp-block-cover-image) .hi-breadcrumbs-item,
	&:has(+ .alignfull:not(.has-background):not(.wp-block-cover):not(.wp-block-cover-image) > .alignfull:first-child) .hi-breadcrumbs-item {
		color: var(--hi-color-text-cover);

		& a,
		& a:focus,
		& a:visited {
			color: currentColor;
			text-decoration: var(--hi-text-decoration-has-background-link);
			text-underline-offset: var(--hi-text-decoration-offset-has-background-link, var(--hi-text-decoration-offset));
			text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link, var(--hi-text-decoration-thickness));
			opacity: var(--hi-opacity-has-background-link);
			transition: opacity var(--hi-transition-time-has-background-link);

			&:hover,
			&:focus-visible {
				color: currentColor;
				text-decoration: var(--hi-text-decoration-has-background-link-hover);
				text-underline-offset: var(--hi-text-decoration-offset-has-background-link-hover, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link-hover, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-has-background-link-hover);
			}
			&:active {
				color: currentColor;
				text-decoration: var(--hi-text-decoration-has-background-link-active);
				text-underline-offset: var(--hi-text-decoration-offset-has-background-link-active, var(--hi-text-decoration-offset));
				text-decoration-thickness: var(--hi-text-decoration-thickness-has-background-link-active, var(--hi-text-decoration-thickness));
				opacity: var(--hi-opacity-has-background-link-active);
			}
		}
	}
}

/** END BREADCRUMBS **/

/** CONTENT HEADER **/
body .hi-content-header {
	margin: 0;

	& + .hi-content.alignwide,
	& + .hi-content:not(.alignwide) > *:not(.wp-block-cover):first-child,
	& + .hi-content-wrapper > .hi-content.alignwide:first-child,
	& + .hi-content-wrapper > .hi-content:not(.alignwide) > *:not(.wp-block-cover):first-child {
		&:not(.hi-slider):not(.wp-block-details) {
			padding-top: var(--hi-spacing-vertical-content);
		}

		&.hi-slider,
		&.wp-block-details {
			margin-top: var(--hi-spacing-vertical-content);
		}

		&.hi-slider > .hi-slider-prev,
		&.hi-slider > .hi-slider-next {
			top: calc(calc(50% - var(--hi-padding-bottom-slider)/2) - var(--hi-size-button-icon)/2);
		}
	}

	& + .hi-content.alignwide:last-child,
	& + .hi-content:not(.alignwide) > *:not(.wp-block-cover):last-child,
	& + .hi-content-wrapper > .hi-content.alignwide:last-child,
	& + .hi-content-wrapper > .hi-content:not(.alignwide) > *:not(.wp-block-cover):last-child {
		&:not(.hi-slider) {
			padding-bottom: var(--hi-spacing-vertical-content);
		}

		&.hi-slider {
			margin-bottom: var(--hi-spacing-vertical-content);
		}
	}
}

/** END CONTENT HEADER **/

/** NO DESKTOP **/
@media (max-width: 780px) {
	body .hi-only-desktop {
		display: none;
	}
}
/** END NO DESKTOP **/


/** BIGGER THAN TABLET (tablet==768) **/
@media (min-width: 781px) {
	body .hi-only-mobile {
		display: none;
	}

	/* .wp-block-columns stacked when not mobile */
	/* Toogle navbar content in one row */
	body .hi-navbar > .hi-navbar-toggle + .hi-navbar-content,
	body .hi-navbar > .hi-navbar-toggle + div:has( > ul.hi-navbar-content) {
		overflow: visible;

		& > .menu {
			flex-direction: row;
			justify-content: space-between;
		}

		& > .menu > .menu-item > .sub-menu {
			position: absolute;
			overflow: auto;
			max-height: var(--hi-max-height-screen);
			padding-bottom: var(--hi-spacing-navbar-sublist-item);
		}
	}
}

/** END BIGGER THAN TABLET **/

/** BIGGER THAN PORTATIL (portatil==1024) **/
@media (min-width: 1320px) {

	/* Disable toogle navbar (alwais visible) */
	body .hi-navbar > .hi-navbar-toggle {
		display: none;

		& + .hi-navbar-content,
		& + div:has( > ul.hi-navbar-content) {
			position: relative;
			top: auto;

			display: block !important;
			width: auto;
			max-height: none;

			background-color: transparent;
			border-bottom: none;
			box-shadow: none;

			& > .menu {
				padding-inline: 0;
			}
		}
	}
}

/** END BIGGER THAN TABLET **/

/** GENERIC CLASS **/
body .hi-margin-left-none {
	margin-left: 0;
}
body .hi-margin-right-none {
	margin-right: 0;
}
body .hi-margin-left-auto {
	margin-left: auto;
}
body .hi-margin-right-auto {
	margin-right: auto;
}
/** END GENERIC CLASS **/


/** ONLY FOR DEMO **/
/* Test group
<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" id="test"><!-- wp:group {"backgroundColor":"secondary-dark","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-secondary-dark-background-color has-background"><!-- wp:paragraph -->
<p>NO ALIGN</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","backgroundColor":"secondary-dark","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-secondary-dark-background-color has-background"><!-- wp:paragraph -->
<p>ALIGN WIDE</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","backgroundColor":"secondary-dark","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-secondary-dark-background-color has-background"><!-- wp:paragraph -->
<p>ALIGN FULL</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
*/
body #test {
	position: fixed;
	z-index: var(--hi-index-popup);
	bottom: 0;
	left: 0;

	display: block;
	width: 100%;
	margin: 0;
	padding: 0;

	opacity: 0.5;

	& p {
		color: transparent;
		background-color: red;
	}
}
#hi_slider18 {
	background-color: darksalmon;
}
/** END ONLY FOR DEMO **/

/** Put slider buttons in current slide and only show on hover **
body .hi-slider,
body .wp-block-latest-posts.hi-slider {
	&.hi-slider.alignfull,
	&.wp-block-latest-posts.hi-slider.alignfull {
		--hi-padding-horizontal-slider: 0px;
	}
	& button.hi-button-icon.hi-slider-prev {
		left: calc(var(--hi-padding-horizontal-slider) + var(--hi-margin-button-icon) ) !important;
	}
	& button.hi-button-icon.hi-slider-next {
		right: calc(var(--hi-padding-horizontal-slider) + var(--hi-margin-button-icon) ) !important;
		
	}
	&:not(:hover) button.hi-button-icon.hi-slider-prev,
	&:not(:hover) button.hi-button-icon.hi-slider-next,
	&.hi-slider-moving button.hi-button-icon.hi-slider-prev,
	&.hi-slider-moving button.hi-button-icon.hi-slider-next {
		opacity: 0 !important;
	}
}
/** END CUSTOM SLIDER **/