/* Styles for: pft-npb-feature */
/* First level nesting syntax due to Safari Shadow DOM bug */
:host {
	/* Vars */
	--pft-1: #111317;
	--pft-2: #0c1a3f;
	--pft-3: #1f43a2;

	--pft-3-hover: #1f43a266;
	--pft-3-light: #1f43a233;
	--pft-3-active: #1f43a299;
	--pft-3-lightest: #1f43a211;

	--pft-gap: 2rem;
	--pft-gap-half: calc(var(--pft-gap) / 2);
	--pft-gap-double: calc(var(--pft-gap) * 2);
	--pft-gap-quad: calc(var(--pft-gap-double) * 2);
	--pft-gap-fourth: calc(var(--pft-gap-half) / 2);

	--pft-nav-height: 85px;
	--pft-max-width: 1280px;
	--pft-border-1: solid 1px lightgrey;
	--pft-box-shadow: 2px 2px 12px -4px #111111dd;

	color: white;
	overflow: clip;
	background-color: var(--pft-2);

	display: grid;
	font-size: 20px;
	line-height: 1.4;
	position: relative;
	box-sizing: border-box;
	font-family: Abel, Helvetica, Arial, Lucida, sans-serif;

	opacity: 0;
	transition: opacity 0.2s 0.2s;

	@media screen and (max-width: 980px) {
		grid-template-columns: 1fr;
	}
}

/* Navigation */
:host > aside {
	z-index: 1;
	position: sticky;
	top: var(--pft-nav-height);
	background-color: var(--pft-2);

	@media screen and (max-width: 980px) {
		display: none;
	}

	&[admin-bar] {
		top: calc(var(--pft-nav-height) + 32px);
	}

	& > nav {
		z-index: 1;
		display: flex;
		flex-flow: wrap;

		transition: background-size 0.2s;

		@media screen and (max-width: 980px) {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		}

		/* Links */
		& > a {
			flex: auto;
			display: block;
			font-weight: bold;
			font-size: smaller;
			text-align: center;
			align-items: center;
			text-decoration: none;
			color: rgba(255, 255, 255, 1);
			border-top: solid 1px #ffffff33;
			border-right: solid 1px #ffffff33;
			border-bottom: solid 1px #ffffff33;
			padding: var(--pft-gap-fourth) var(--pft-gap-half);

			background-size: 0% 100%;
			background-repeat: no-repeat;
			background-position: bottom left;
			background-image: linear-gradient(to right, var(--pft-3-active), var(--pft-3-active));

			transition:
				background-size 0.1s,
				background-color 0.2s;

			&:hover {
				background-color: var(--pft-3-active);
			}

			@media screen and (max-width: 980px) {
				border: unset;
				border: solid 1px var(--pft-3-active);
				&[active] {
					background-color: var(--pft-3-active);
				}
			}

			@media screen and (min-width: 980px) {
				&:last-of-type {
					border-right: unset;
				}
			}
		}

		/* Hide category labels in navigation in case of JS fails/disabled */
		& > small {
			display: none;
		}
	}
}

/* Content section */
:host > section {
	scroll-margin-top: calc(var(--pft-gap) + var(--pft-nav-height));
	padding: var(--pft-gap) 0;

	@media screen and (max-width: 980px) {
		overflow-x: auto;
	}

	/* Category label in the corner */
	& > span {
		display: none;
	}

	/* Header & intro */
	& > hgroup {
		z-index: 0;
		position: relative;
		margin: var(--pft-gap-double) 0;
		padding: var(--pft-gap-double) 0 var(--pft-gap) 0;

		& > div {
			width: 80%;
			margin: 0 auto;
			max-width: var(--pft-max-width);

			& > h2,
			& > p {
				max-width: 66%;
				color: white;

				@media screen and (max-width: 980px) {
					max-width: 100%;
				}
			}

			/* Device badges */
			& > span {
				color: white;
				font-size: small;
				font-weight: bold;
				white-space: nowrap;
				display: inline-block;
				margin-bottom: var(--pft-gap-fourth);
				border-radius: var(--pft-gap-fourth);
				background-color: var(--pft-3-active);
				padding: var(--pft-gap-fourth) var(--pft-gap-half);
			}
		}

		/* Background visual */
		&:before {
			content: "";

			z-index: -1;
			position: absolute;
			top: var(--pft-gap);
			transform-origin: top;
			transform: skewX(-8deg);
			left: calc(var(--pft-gap) * -1);
			box-shadow: var(--pft-box-shadow);
			height: calc(100% - var(--pft-gap));
			background-color: var(--pft-3-light);
			width: calc(66% + var(--pft-gap-quad));

			border-top-right-radius: var(--pft-gap-fourth);
			border-bottom-right-radius: var(--pft-gap-fourth);

			@media screen and (max-width: 980px) {
				width: 100%;
				left: unset;
				transform: unset;
				border-radius: unset;
			}
		}

		@media screen and (max-width: 980px) {
			&:before {
				width: 100%;
				left: unset;
				transform: unset;
				border-radius: unset;
			}
		}
	}

	/* Tables */
	& > table {
		width: 80%;
		overflow: clip;
		font-size: smaller;
		table-layout: fixed;
		border-collapse: collapse;
		max-width: var(--pft-max-width);
		box-shadow: var(--pft-box-shadow);
		border-radius: var(--pft-gap-fourth);
		background-color: var(--pft-3-light);
		margin: var(--pft-gap-double) auto var(--pft-gap);

		@media screen and (max-width: 980px) {
			display: block;
			overflow-x: auto;
		}

		& > thead {
			background-color: var(--pft-3-hover);

			& img {
				width: 100%;
				min-width: 125px;
				max-width: 150px;
			}
		}

		& th,
		& td {
			border: solid 1px;
			vertical-align: text-top;
			border-color: #ffffff11;
			padding: var(--pft-gap-half);

			& dl {
				margin: 0;
			}

			& dd {
				margin-left: 0;
			}

			& dt {
				font-weight: bold;
			}
		}

		& th[colspan="3"] {
			background-color: var(--pft-3-lightest);
		}
	}

	/* Content container */
	& > section {
		width: 80%;
		max-width: var(--pft-max-width);
		margin: var(--pft-gap-double) auto;

		& > div {
			display: grid;
			gap: var(--pft-gap-double);
			grid-template-columns: 1fr 1fr;

			@media screen and (max-width: 980px) {
				gap: 0;
				grid-template-columns: auto;
			}
		}

		&[links] {
			display: grid;
			gap: var(--pft-gap);
			grid-template-columns: 1fr 1fr 1fr;
			margin-top: var(--pft-gap);

			@media screen and (max-width: 980px) {
				display: none;
			}

			& > a {
				width: fit-content;
				font-size: smaller;
				color: var(--pft-2);
				justify-self: center;
				text-decoration: none;
				background-color: white;
				padding: var(--pft-gap-fourth) var(--pft-gap-half);

				transition:
					background-color 0.2s,
					color 0.2s;

				&:hover {
					color: white;
					cursor: pointer;
					background-color: var(--pft-3);
				}
			}
		}
	}

	/* General list styles */
	& ul {
		padding-left: var(--pft-gap-half);

		& > li {
			&:not(:last-of-type) {
				margin-bottom: var(--pft-gap-half);
			}

			& > ul {
				margin: var(--pft-gap-fourth) 0 var(--pft-gap) 0;

				& > li {
					&:not(:last-of-type) {
						margin-bottom: var(--pft-gap-fourth);
					}
				}
			}
		}
	}

	/* General heading styles */
	& h2,
	& h3,
	& h4 {
		color: white;
		font-weight: bold;

		&:is(h2) {
			font-size: 3rem;

			@media screen and (max-width: 980px) {
				font-size: 2.25rem;
			}
		}
	}

	/* Every other section */
	&:nth-of-type(2n) {
		color: var(--pft-2);
		background-color: white;

		& > hgroup:before {
			background-color: var(--pft-2);
		}

		& > table {
			color: white;
			background-color: var(--pft-2);

			& > thead {
				background: var(--pft-3-hover);
			}
		}

		& h3,
		& h4 {
			color: var(--pft-2);
		}

		/* Content container */
		& > section[links] > a {
			color: white;
			background-color: var(--pft-2);

			&:hover {
				background-color: var(--pft-3);
			}
		}
	}
}

/* Prevent FOUC */
:host(:state(show)) {
	opacity: 1;
}

/* Tabs layout */
:host(:state(tabs)) {
	opacity: 1;
	max-width: 80%;
	background-color: white;
	width: var(--pft-max-width);
	border: solid 1px var(--pft-3-light);
	border-radius: var(--pft-gap-fourth);
	margin: 0 auto var(--pft-gap-double);
}

/* Tabs layout - Navigation */
:host(:state(tabs)) > aside {
	z-index: 0;

	&[admin-bar] > nav {
		top: calc(var(--pft-nav-height) + 32px);
	}

	& > nav {
		margin: unset;
		display: grid;
		z-index: unset;
		flex-flow: column;
		justify-content: flex-start;
		box-shadow: var(--pft-box-shadow);
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

		position: sticky;
		top: var(--pft-nav-height);

		/* Links */
		& > a {
			flex: 0;
			border: unset;
			text-align: left;
			padding: var(--pft-gap-half);
			padding-left: var(--pft-gap-half);
			background-color: var(--pft-3-light);
			border: solid 1px var(--pft-3-active);

			&:hover {
				background-color: var(--pft-3-hover);
			}

			&[active] {
				background-color: var(--pft-3-active);
				cursor: auto;
			}

			@media screen and (min-width: 980px) {
				&:not(:last-of-type) {
					border-bottom: none;
				}
			}
		}
	}
}

/* Tabs layout - Content section */
:host(:state(tabs)) > section[id] {
	top: 0;
	margin: 0;
	opacity: 0;
	display: none;
	position: absolute;
	grid-column: 2 / 2;
	background-color: var(--pft-3-lightest);
	padding: 0 var(--pft-gap-double) var(--pft-gap-double);

	transition:
		display 0.2s,
		opacity 0.2s;

	transition-behavior: allow-discrete;

	@media screen and (max-width: 980px) {
		opacity: 1;
		display: block;
		position: relative;
		padding: var(--pft-gap-half) var(--pft-gap-half) var(--pft-gap-double);

		&:not(:last-of-type) {
			border-bottom: var(--pft-border-1);
		}
	}

	&[active] {
		opacity: 1;
		display: block;
		position: relative;

		@starting-style {
			opacity: 1;
			display: block;
		}
	}

	/* Category label in the corner */
	& > span {
		top: 0;
		right: 0;
		margin: 0;
		display: block;
		position: absolute;
		font-size: smaller;
		font-weight: bolder;
		background-color: var(--pft-3-light);
		color: oklch(from var(--pft-2) l c h / 75%);
		border-bottom-left-radius: var(--pft-gap-fourth);
		padding: var(--pft-gap-fourth) var(--pft-gap-half);

		@media screen and (max-width: 980px) {
			display: none;
		}
	}

	/* Header & intro */
	& > hgroup {
		margin: 0;
		padding: 0;

		&:before {
			content: unset;
		}

		& > div {
			width: 100%;
			margin: unset;

			& > h2 {
				max-width: 100%;
				color: var(--pft-2);
			}

			& > p {
				max-width: 100%;
				color: #444444;
			}

			/* Device badges */
			& > span {
				background-color: var(--pft-3);
			}
		}
	}

	/* Content container */
	& > section {
		padding: 0;
		width: auto;
		color: #444444;
		margin: var(--pft-gap-double) 0;

		& h4,
		& > h3,
		& > strong {
			color: var(--pft-2);
		}
	}

	/* Tables */
	& > table {
		width: 100%;
		margin: 0 auto;
		background-color: var(--pft-2);
	}
}