/* Widget: Meniu header. */

.icc-menu {
	--icc-menu-ink: #fff;
	--icc-menu-ink-hover: rgba(255, 255, 255, 0.68);
	--icc-menu-chevron: 11px;
	--icc-menu-blur: 18px;
	--icc-menu-bd-culoare: rgba(255, 255, 255, 0.45);
	--icc-menu-bd-unghi: 100deg;
	--icc-menu-bd-stop: 80%;
	--icc-menu-dd-gap: 24px;
	--icc-menu-pad-jos: 10px;
	--icc-menu-dd-offset: calc(var(--icc-menu-pad-jos) + var(--icc-menu-dd-gap));
	--icc-menu-dd-bg: rgba(22, 41, 58, 0.6);
	--icc-menu-dd-blur: 18px;
	--icc-menu-dd-ink: #fff;
	--icc-menu-dd-ink-hover: #fff;
	--icc-menu-dd-bg-hover: rgba(255, 255, 255, 0.08);
	--icc-menu-dd-col-gap: 44px;
	--icc-menu-dd-row-gap: 0px;
	--icc-menu-bg: rgba(12, 32, 47, 0.55);
	--icc-menu-durata: 0.28s;
	--icc-menu-dd-lat: max-content;
	--icc-menu-dd-decalaj: 10px;
	--icc-menu-dd-decalaj-primul: -20px;
	--icc-menu-item-pad: 10px;
	--icc-menu-dd-pad: 24px 32px;
	--icc-menu-sub-pad: 7px 0;
	--icc-menu-btn-pad: 14px 24px 14px 22px;
	--icc-menu-btn-bg: #fff;
	--icc-menu-btn-ink: var(--icc-color-navy, #0c202f);

	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	padding: 10px 10px 10px 24px;
	border-radius: 12px;
}

/* Fundalul si blur-ul stau pe un strat separat: altfel dropdown-urile, fiind
   descendente, nu si-ar putea aplica propriul blur. */
.icc-menu::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--icc-menu-bg);
	backdrop-filter: blur(var(--icc-menu-blur));
	-webkit-backdrop-filter: blur(var(--icc-menu-blur));
	transition: background-color var(--icc-menu-durata, 0.28s) ease;
}

.icc-menu.is-scrolat::before {
	background-color: var(--icc-menu-bg-scroll, var(--icc-menu-bg));
}

/* Prima pagina, cat timp nu s-a derulat: pastila nu are fundal, doar blur. */
.icc-menu.is-transparent-repaus:not(.is-scrolat)::before {
	background-color: transparent;
}

/* Contur in degrade: plin pe prima jumatate, apoi se stinge. */
.icc-menu::after,
.icc-menu .icc-menu__dropdown::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		var(--icc-menu-bd-unghi),
		var(--icc-menu-bd-culoare) 0%,
		var(--icc-menu-bd-culoare) calc(var(--icc-menu-bd-stop) / 2),
		transparent var(--icc-menu-bd-stop)
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.icc-menu__panou {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* -------------------------------------------------------------- Bara ------ */

.icc-menu__lista {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.icc-menu__item {
	position: relative;
	display: flex;
	align-items: center;
}

.icc-menu .icc-menu__declansator {
	/* Reset-ul temei parinte pune `nowrap` pe <button>. */
	white-space: normal;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--icc-menu-item-pad);
	border: 0;
	background: none;
	color: var(--icc-menu-ink);
	font-family: inherit;
	font-size: var(--icc-fs-ui, 1rem);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.18s ease;
}

.icc-menu .icc-menu__declansator:hover,
.icc-menu .icc-menu__declansator:focus-visible {
	color: var(--icc-menu-ink-hover);
}

.icc-menu button.icc-menu__comutator:not(.icc-menu__declansator) {
	display: inline-flex;
	align-items: center;
	padding: 10px 8px 10px 0;
	border: 0;
	background: none;
	color: var(--icc-menu-ink);
	cursor: pointer;
	transition: color 0.18s ease;
}

.icc-menu__chevron {
	width: var(--icc-menu-chevron);
	height: auto;
	transition: transform 0.2s ease;
}

.icc-menu__item.is-deschis .icc-menu__chevron {
	transform: rotate(180deg);
}

.icc-menu__declansator:focus-visible,
.icc-menu__comutator:focus-visible,
.icc-menu .icc-menu__sub-link:focus-visible,
.icc-menu .icc-menu__hamburger:focus-visible,
.icc-menu .icc-menu__buton:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------- Dropdown ------ */

.icc-menu .icc-menu__dropdown {
	position: absolute;
	inset-inline-start: var(--icc-menu-dd-decalaj);
	top: calc(100% + var(--icc-menu-dd-offset));
	z-index: 40;
	display: none;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: start;
	width: var(--icc-menu-dd-lat);
	max-width: calc(100vw - 2 * var(--icc-gutter, 20px));
	margin: 0;
	padding: var(--icc-menu-dd-pad);
	border-radius: 12px;
	background-color: var(--icc-menu-dd-bg);
	backdrop-filter: blur(var(--icc-menu-dd-blur));
	-webkit-backdrop-filter: blur(var(--icc-menu-dd-blur));
	list-style: none;
	column-gap: var(--icc-menu-dd-col-gap);
	row-gap: var(--icc-menu-dd-row-gap);
}

.icc-menu__item.is-deschis > .icc-menu__dropdown {
	display: grid;
}

.icc-menu__item.is-flip > .icc-menu__dropdown {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.icc-menu__lista > .icc-menu__item:first-child:not(.is-flip) > .icc-menu__dropdown {
	inset-inline-start: var(--icc-menu-dd-decalaj-primul);
}

.icc-menu .icc-menu__dropdown::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: calc(-1 * var(--icc-menu-dd-offset));
	height: var(--icc-menu-dd-offset);
}

.icc-menu .icc-menu__sub-link {
	display: block;
	padding: var(--icc-menu-sub-pad);
	border-radius: 6px;
	color: var(--icc-menu-dd-ink);
	font-size: var(--icc-fs-ui, 1rem);
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease;
}

.icc-menu .icc-menu__sub-link:hover {
	color: var(--icc-menu-dd-ink-hover);
	background-color: var(--icc-menu-dd-bg-hover);
}

/* ----------------------------------------------------------- Buton -------- */

.icc-menu .icc-menu__buton {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	padding: var(--icc-menu-btn-pad);
	border-radius: 8px;
	background-color: var(--icc-menu-btn-bg);
	color: var(--icc-menu-btn-ink);
	font-size: var(--icc-fs-ui, 1rem);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.18s ease;
}

.icc-menu .icc-menu__buton:hover {
	background-color: var(--icc-menu-btn-bg-hover, var(--icc-menu-btn-bg));
	color: var(--icc-menu-btn-ink-hover, var(--icc-menu-btn-ink));
	filter: brightness(0.94);
}

.icc-menu__buton-icon {
	display: inline-flex;
	align-items: center;
	font-size: 1.05em;
}

.icc-menu__buton-icon svg {
	width: 1em;
	height: 1em;
}

.icc-menu__buton-icon svg:not([fill]) {
	fill: currentColor;
}

/* --------------------------------------------------------- Hamburger ------ */

.icc-menu .icc-menu__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--icc-menu-ink);
	cursor: pointer;
}

.icc-menu .icc-menu__hamburger svg {
	width: 24px;
	height: 24px;
}

.icc-menu .icc-menu__inchide {
	display: none;
}

.icc-menu__jos {
	display: contents;
}

/* ---------------------------------------------------------- Sertar -------- */

@media (max-width: 1024px) {
	.icc-menu {
		padding: 6px;
	}

	.icc-menu .icc-menu__hamburger {
		display: inline-flex;
	}

	.icc-menu.is-deschis {
		z-index: 9999;
	}

	.icc-menu__panou {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 60;
		box-sizing: border-box;
		flex-direction: column;
		align-items: stretch;
		gap: var(--icc-menu-mobil-gap, 18px);
		width: var(--icc-menu-mobil-lat, 72%);
		max-width: calc(100vw - 40px);
		padding: var(--icc-menu-mobil-pad, 30px);
		background-color: var(--icc-menu-mobil-bg, var(--icc-color-cream, #fef9ef));
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.32s ease, visibility 0.32s;
	}

	.icc-menu.is-deschis .icc-menu__panou {
		visibility: visible;
		transform: none;
	}

	.icc-menu .icc-menu__inchide {
		display: inline-flex;
		flex: 0 0 auto;
		align-self: flex-end;
		align-items: center;
		justify-content: center;
		width: var(--icc-menu-inchide, 56px);
		height: var(--icc-menu-inchide, 56px);
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: var(--icc-menu-inchide-bg, var(--icc-color-orange, #bf592d));
		color: var(--icc-menu-inchide-ink, #fff);
		cursor: pointer;
	}

	.icc-menu .icc-menu__inchide svg {
		width: 45%;
		height: 45%;
	}

	.icc-menu__nav {
		flex: 0 0 auto;
	}

	.icc-menu__lista {
		flex-direction: column;
		align-items: stretch;
		gap: var(--icc-menu-mobil-gap, 18px);
	}

	.icc-menu__item {
		flex-wrap: wrap;
	}

	.icc-menu .icc-menu__declansator {
		flex: 0 0 auto;
		justify-content: flex-start;
		padding: 0;
		color: var(--icc-menu-mobil-ink, var(--icc-color-ink, #0c202f));
		font-size: var(--icc-menu-mobil-fs, 21px);
	}

	.icc-menu button.icc-menu__comutator:not(.icc-menu__declansator) {
		padding: 0 6px;
		color: var(--icc-menu-mobil-ink, var(--icc-color-ink, #0c202f));
	}

	.icc-menu__chevron {
		transform: rotate(-90deg);
	}

	.icc-menu__item.is-deschis .icc-menu__chevron {
		transform: none;
	}

	.icc-menu__item.is-deschis > .icc-menu__dropdown {
		display: block;
	}

	.icc-menu .icc-menu__dropdown {
		position: static;
		width: 100%;
		max-width: none;
		padding: 12px 0 0;
		border-radius: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.icc-menu .icc-menu__dropdown::before,
	.icc-menu .icc-menu__dropdown::after {
		content: none;
	}

	.icc-menu .icc-menu__sub-link {
		padding: 8px 0;
		color: var(--icc-menu-mobil-sub-ink, var(--icc-color-ink, #0c202f));
		font-size: var(--icc-menu-mobil-sub-fs, 17px);
		white-space: normal;
	}

	.icc-menu__jos {
		display: block;
		flex: 0 0 auto;
		margin-top: auto;
		padding-top: 24px;
	}

	.icc-menu .icc-menu__buton,
	.icc-menu .icc-menu__buton:hover {
		display: flex;
		justify-content: center;
		background-color: var(--icc-menu-mobil-btn-bg, var(--icc-color-orange, #bf592d));
		color: var(--icc-menu-mobil-btn-ink, #fff);
	}
}

html.icc-menu-blocat,
html.icc-menu-blocat body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.icc-menu__chevron,
	.icc-menu__panou,
	.icc-menu .icc-menu__declansator,
	.icc-menu .icc-menu__sub-link,
	.icc-menu .icc-menu__buton {
		transition: none;
	}
}

.icc-menu .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}