/* =========================================================
   KNOWLEDGE TABLE
   Componente circoscritto ai Knowledge Article
   ========================================================= */

.knowledge-table-section {
	width: 100%;
	margin: clamp(42px, 5vw, 80px) 0;
	color: var(--color-content-bg);
}


/* =========================================================
   SCROLL CONTAINER
   ========================================================= */

.knowledge-table-section .knowledge-table__scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color:
		var(--color-content-primary)
		color-mix(
			in srgb,
			var(--color-content-bg) 10%,
			transparent
		);
}

.knowledge-table-section .knowledge-table__scroll::-webkit-scrollbar {
	height: 6px;
}

.knowledge-table-section .knowledge-table__scroll::-webkit-scrollbar-track {
	background:
		color-mix(
			in srgb,
			var(--color-content-bg) 8%,
			transparent
		);
	border-radius: 999px;
}

.knowledge-table-section .knowledge-table__scroll::-webkit-scrollbar-thumb {
	background: var(--color-content-primary);
	border-radius: 999px;
}


/* =========================================================
   TABLE
   ========================================================= */

.knowledge-table-section .knowledge-table {
	width: 100%;
	min-width: 1180px;

	margin: 0;
	padding: 0;

	border: 0;
	border-collapse: separate;
	border-spacing: 0;

	table-layout: fixed;

	font-family: var(--font-family);
	font-size: 14px;
	font-weight: var(--font-weight);
	line-height: 1.35;
}


/* Prima colonna */

.knowledge-table-section .knowledge-table__property-column {
	width: 18%;
}

.knowledge-table-section .knowledge-table__value-column {
	width: 10.25%;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

.knowledge-table-section .knowledge-table thead th {
	position: relative;

	padding: 22px 16px;

	background: var(--color-content-secondary);
	color: var(--color-content-text);

	border: 0;
	border-right: 1px solid
		color-mix(
			in srgb,
			var(--color-content-text) 14%,
			transparent
		);

	font-size: 13px;
	font-weight: var(--bold-font-weight);
	line-height: 1.25;
	text-align: center;
	vertical-align: middle;
}

.knowledge-table-section .knowledge-table thead th:first-child {
	padding-left: 24px;

	border-radius:
		clamp(20px, 1.7vw, 28px)
		0
		0
		clamp(20px, 1.7vw, 28px);

	text-align: left;
}

.knowledge-table-section .knowledge-table thead th:last-child {
	border-right: 0;

	border-radius:
		0
		clamp(20px, 1.7vw, 28px)
		clamp(20px, 1.7vw, 28px)
		0;
}


/* =========================================================
   BODY
   ========================================================= */

.knowledge-table-section .knowledge-table tbody th,
.knowledge-table-section .knowledge-table tbody td {
	position: relative;

	padding: 18px 16px;

	background:
		color-mix(
			in srgb,
			var(--color-content-bg) 3.5%,
			transparent
		);

	color: var(--color-content-bg);

	border: 0;
	border-right: 1px solid
		color-mix(
			in srgb,
			var(--color-content-bg) 8%,
			transparent
		);
	border-bottom: 1px solid
		color-mix(
			in srgb,
			var(--color-content-bg) 8%,
			transparent
		);

	text-align: center;
	vertical-align: middle;

	transition:
		background-color .2s ease,
		color .2s ease;
}

.knowledge-table-section .knowledge-table tbody th {
	padding-left: 24px;

	font-weight: var(--bold-font-weight);
	text-align: left;
}

.knowledge-table-section .knowledge-table tbody td:last-child {
	border-right: 0;
}


/* =========================================================
   ROW HOVER
   ========================================================= */

.knowledge-table-section .knowledge-table tbody tr:not(.knowledge-table__group):hover th,
.knowledge-table-section .knowledge-table tbody tr:not(.knowledge-table__group):hover td {
	background:
		color-mix(
			in srgb,
			var(--color-content-primary) 8%,
			transparent
		);
}


/* =========================================================
   GROUP TITLE
   ========================================================= */

.knowledge-table-section .knowledge-table tbody .knowledge-table__group th {
	padding:
		clamp(38px, 4vw, 62px)
		0
		18px;

	background: transparent;

	border: 0;

	color: var(--color-content-primary);

	font-family: var(--h3-font-family);
	font-size: clamp(23px, 2vw, 32px);
	font-weight: var(--h3-font-weight);
	line-height: var(--h3-line-height);
	text-align: left;
}

.knowledge-table-section .knowledge-table tbody .knowledge-table__group:first-child th {
	padding-top: clamp(34px, 3vw, 48px);
}

.knowledge-table-section .knowledge-table__group span {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.knowledge-table-section .knowledge-table__group span::before {
	content: "";

	display: block;
	width: 28px;
	height: 2px;

	background: var(--color-content-primary);
}


/* =========================================================
   TOOLTIP WRAPPER
   ========================================================= */

.knowledge-table-section .knowledge-tooltip {
	position: relative;

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

	max-width: 100%;
}


/* =========================================================
   TOOLTIP TRIGGER
   ========================================================= */

.knowledge-table-section .knowledge-tooltip__trigger {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	margin: 0;
	padding: 0;

	background: none;
	border: 0;
	border-radius: 0;

	color: inherit;

	font: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: inherit;

	cursor: help;

	appearance: none;
	-webkit-appearance: none;
}

.knowledge-table-section .knowledge-tooltip__trigger::after {
	content: "i";

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 16px;
	height: 16px;

	border: 1px solid currentColor;
	border-radius: 50%;

	color: var(--color-content-primary);

	font-family: var(--font-family);
	font-size: 10px;
	font-weight: var(--bold-font-weight);
	font-style: normal;
	line-height: 1;
}

.knowledge-table-section thead .knowledge-tooltip__trigger::after {
	color: var(--color-content-primary);
}


/* Restricted */

.knowledge-table-section .knowledge-tooltip__trigger--status {
	color: var(--color-content-primary);
	font-weight: var(--bold-font-weight);
}


/* Property tooltip */

.knowledge-table-section .knowledge-tooltip__trigger--property {
	justify-content: flex-start;
	color: var(--color-content-bg);
	font-weight: var(--bold-font-weight);
	text-align: left;
}


/* =========================================================
   TOOLTIP CONTENT
   ========================================================= */

.knowledge-table-section .knowledge-tooltip__content {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);

	width: max-content;
	max-width: min(290px, 70vw);

	padding: 18px 20px;

	background: var(--color-content-bg);
	color: var(--color-content-text);

	border-radius: 18px;

	box-shadow:
		0 16px 40px
		color-mix(
			in srgb,
			var(--color-content-bg) 22%,
			transparent
		);

	text-align: left;

	opacity: 0;
	visibility: hidden;

	transform: translate(-50%, 8px);

	pointer-events: none;

	z-index: 1000;

	transition:
		opacity .18s ease,
		visibility .18s ease,
		transform .18s ease;
}


/* Tooltip arrow */

.knowledge-table-section .knowledge-tooltip__content::after {
	content: "";

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

	width: 12px;
	height: 12px;

	background: var(--color-content-bg);

	transform:
		translate(-50%, -6px)
		rotate(45deg);
}


/* =========================================================
   TOOLTIP CONTENT TYPOGRAPHY
   ========================================================= */

.knowledge-table-section .knowledge-tooltip__content strong {
	display: block;

	margin-bottom: 7px;

	color: var(--color-content-primary);

	font-family: var(--font-family);
	font-size: 13px;
	font-weight: var(--bold-font-weight);
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.knowledge-table-section .knowledge-tooltip__content p {
	margin: 0;

	color: var(--color-content-text);

	font-family: var(--font-family);
	font-size: 13px;
	font-weight: var(--font-weight);
	line-height: 1.45;
	text-align: left;
	text-transform: none;
}


/* =========================================================
   TOOLTIP HOVER + KEYBOARD FOCUS
   ========================================================= */

.knowledge-table-section .knowledge-tooltip:hover .knowledge-tooltip__content,
.knowledge-table-section .knowledge-tooltip:focus-within .knowledge-tooltip__content {
	opacity: 1;
	visibility: visible;

	transform: translate(-50%, 0);

	pointer-events: auto;
}


/* =========================================================
   LEFT TOOLTIP
   ========================================================= */

.knowledge-table-section .knowledge-tooltip--left .knowledge-tooltip__content {
	left: 0;

	transform: translate(0, 8px);
}

.knowledge-table-section .knowledge-tooltip--left:hover .knowledge-tooltip__content,
.knowledge-table-section .knowledge-tooltip--left:focus-within .knowledge-tooltip__content {
	transform: translate(0, 0);
}

.knowledge-table-section .knowledge-tooltip--left .knowledge-tooltip__content::after {
	left: 22px;

	transform:
		translate(0, -6px)
		rotate(45deg);
}


/* =========================================================
   RIGHT TOOLTIP
   ========================================================= */

.knowledge-table-section .knowledge-tooltip--right .knowledge-tooltip__content {
	right: 0;
	left: auto;

	transform: translate(0, 8px);
}

.knowledge-table-section .knowledge-tooltip--right:hover .knowledge-tooltip__content,
.knowledge-table-section .knowledge-tooltip--right:focus-within .knowledge-tooltip__content {
	transform: translate(0, 0);
}

.knowledge-table-section .knowledge-tooltip--right .knowledge-tooltip__content::after {
	right: 22px;
	left: auto;

	transform:
		translate(0, -6px)
		rotate(45deg);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.knowledge-table-section .knowledge-tooltip__trigger:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-content-primary);
	outline-offset: 5px;
	border-radius: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

	.knowledge-table-section .knowledge-table {
		min-width: 1100px;
	}

	.knowledge-table-section .knowledge-table thead th,
	.knowledge-table-section .knowledge-table tbody th,
	.knowledge-table-section .knowledge-table tbody td {
		padding-right: 14px;
		padding-left: 14px;
	}

	.knowledge-table-section .knowledge-table tbody th {
		padding-left: 20px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.knowledge-table-section {
		margin: 36px 0;
	}

	.knowledge-table-section .knowledge-table {
		min-width: 1050px;
		font-size: 13px;
	}

	.knowledge-table-section .knowledge-table thead th {
		padding: 17px 12px;
	}

	.knowledge-table-section .knowledge-table tbody th,
	.knowledge-table-section .knowledge-table tbody td {
		padding: 15px 12px;
	}

	.knowledge-table-section .knowledge-table__property-column {
		width: 190px;
	}

	.knowledge-table-section .knowledge-table tbody .knowledge-table__group th {
		padding-top: 34px;
		font-size: 24px;
	}

	.knowledge-table-section .knowledge-tooltip__content {
		max-width: 260px;
		padding: 16px 18px;
	}

}


/* =========================================================
   TOUCH DEVICES
   Il focus permette di aprire il tooltip con un tap
   ========================================================= */

@media (hover: none) {

	.knowledge-table-section .knowledge-tooltip__trigger {
		cursor: pointer;
	}

}


/* =========================================================
   TOOLTIP THEAD
   Nei titoli delle colonne il tooltip si apre verso il basso
   per evitare il clipping del contenitore scrollabile
   ========================================================= */

.knowledge-table-section .knowledge-table thead {
	position: relative;
	z-index: 20;
}

.knowledge-table-section .knowledge-table thead th {
	overflow: visible;
}

.knowledge-table-section .knowledge-table thead .knowledge-tooltip {
	position: relative;
	z-index: 30;
}


/* Tooltip sotto al trigger */

.knowledge-table-section .knowledge-table thead .knowledge-tooltip__content {
	top: calc(100% + 16px);
	bottom: auto;

	transform: translate(-50%, -8px);

	z-index: 1000;
}


/* Hover / focus */

.knowledge-table-section .knowledge-table thead .knowledge-tooltip:hover .knowledge-tooltip__content,
.knowledge-table-section .knowledge-table thead .knowledge-tooltip:focus-within .knowledge-tooltip__content {
	transform: translate(-50%, 0);
}


/* Freccia rivolta verso l'alto */

.knowledge-table-section .knowledge-table thead .knowledge-tooltip__content::after {
	top: auto;
	bottom: 100%;
	left: 50%;

	transform:
		translate(-50%, 6px)
		rotate(45deg);
}


/* =========================================================
   THEAD - TOOLTIP LEFT
   Es. OSP
   ========================================================= */

.knowledge-table-section .knowledge-table thead .knowledge-tooltip--left .knowledge-tooltip__content {
	top: calc(100% + 16px);
	right: auto;
	bottom: auto;
	left: 0;

	transform: translate(0, -8px);
}

.knowledge-table-section .knowledge-table thead .knowledge-tooltip--left:hover .knowledge-tooltip__content,
.knowledge-table-section .knowledge-table thead .knowledge-tooltip--left:focus-within .knowledge-tooltip__content {
	transform: translate(0, 0);
}

.knowledge-table-section .knowledge-table thead .knowledge-tooltip--left .knowledge-tooltip__content::after {
	top: auto;
	right: auto;
	bottom: 100%;
	left: 22px;

	transform:
		translate(0, 6px)
		rotate(45deg);
}


/* =========================================================
   THEAD - TOOLTIP RIGHT
   ========================================================= */

.knowledge-table-section .knowledge-table thead .knowledge-tooltip--right .knowledge-tooltip__content {
	top: calc(100% + 16px);
	right: 0;
	bottom: auto;
	left: auto;

	transform: translate(0, -8px);
}

.knowledge-table-section .knowledge-table thead .knowledge-tooltip--right:hover .knowledge-tooltip__content,
.knowledge-table-section .knowledge-table thead .knowledge-tooltip--right:focus-within .knowledge-tooltip__content {
	transform: translate(0, 0);
}

.knowledge-table-section .knowledge-table thead .knowledge-tooltip--right .knowledge-tooltip__content::after {
	top: auto;
	right: 22px;
	bottom: 100%;
	left: auto;

	transform:
		translate(0, 6px)
		rotate(45deg);
}