header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	padding-inline: 5px;
	margin-block-start: 5px;
	margin-block-end: 10px;

	.bars {
		height: calc(100% - 50px);
		margin-block: 15px;
		border-block: 3px solid var(--accent-color);
		background-color: var(--accent-color-2);
		display: flex;
		align-items: center;

		.hamburger {
			display: none;
		}

		.content {
			flex-grow: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-inline: 4px;
		}
	}
	height: 100px;
}

@media(max-width: 450px) {
	header .bars {
		.hamburger {
			display: flex;
			margin-inline: auto;
			.gw-icon {
				width: 26px;
			}
		}

		.content {
			display: none;
		}

		&:has(.hamburger[aria-expanded="true"]) {
			.content {
				display: flex;
				flex-direction: column;
				gap: 10px;
				padding: 5px;
				width: 70vw;

				position: absolute;
				left: 15vw;
				top: calc(100px - 5px - 3px);

				background-color: var(--accent-color-2);
				border-bottom: 2px solid var(--accent-color);
			}
		}
	}
}

#imgSideLogo, #confSide {
	display: none;
}

@media(min-width: 1350px) {
	#imgSideLogo, #confSide {
		display: block;
		position: fixed;
		top: 4px;
	}

	#imgSideLogo {
		left: 17px;
		margin-block-start: 1px;
		margin-inline-start: 2px;
	}

	#confSide {
		right: 9px;
	}

	#imgHeaderLogo, #confHeader {
		opacity: 0;
	}
}

main {
	max-width: 1100px;
	margin-inline: auto;
	padding: 2px;
	background-color: var(--document-color);
	box-shadow: 0px 0px 3px 0px var(--text-color);
	
	section:has(h2), > .sidebar {
		margin: 10px;
		padding: 6px;
		border-inline-start: 4px solid var(--accent-color);
		padding-inline-start: 6px;
	}
	
	section:has(h2) {
		background-color: var(--section-color);

		h2 {
			display: inline-block;
			width: fit-content;
			padding-inline-end: 10px;
			padding-inline-start: 6px;
			margin-block-start: -6px;
			margin-inline-start: -6px;
			border-radius: 0 0 10px 0;
			background-color: var(--accent-color-2);
		}
	}

	h3, h4, h5, h6 {
		margin-block: 0;
		+ p {
			margin-block-start: 2px;
		}
	}
}

h1 {
	display: inline-flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	width: 100%;
	gap: 5px;
	padding-inline: 5px;
	line-height: 1em;

	.bp {
		font-size: 0.75em;
		text-wrap: nowrap;
	}

	strong {
		font-size: 1.5em;
	}

	em {
		flex-grow: 1;
		text-align: end;
	}
}
.notice {
	background-color: var(--warn-color);

	summary {
		background-color: var(--warn-color);
	}

	.headline {
		background-color: var(--warn-color);
		display: flex;
		align-items: baseline;
		gap: 5px;
		word-break: break-word;
		text-align: center;
		padding-inline: 5px;
	}

	.content {
		padding: 5px;
	}
}

#asiSidebar {
	background-color: var(--document-color);
	border-block-end: 4px solid var(--accent-color);

	float: inline-end;
	display: flex;
	flex-direction: column;
	gap: 10px;

	.status {
		text-align: center;

		.approved {
			background-color: var(--positive-color);
			border-radius: 25px;
			padding-inline: 5px;
		}

		+ * {
			border-block-start: 1px solid var(--border-color);
		}
	}

	ul {
		list-style: none;
		padding-inline-start: 10px;
		margin: 0;
	}

	li {
		display: flex;
		gap: 2px;
		flex-wrap: wrap;
		align-items: baseline;
	}
}

@media (max-width: 460px) {
	#asiSidebar {
		float: none;
		border-block-end: none;

		> section {
			padding-inline-start: 15px;
		}
	}
}

dt {
	font-weight: bold;
}

.collapsible-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;

	> * {
		flex-basis: 325px;
		flex-grow: 1;
	}
}

.title-owner {
	display: flex;
	flex-direction: row;
	gap: 5px;
	align-items: baseline;

	.owner::before {
		content: "-"
	}

	+ p {
		margin-block-start: 2px;
	}
}

.signatures {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	max-width: 400px;
	margin-inline: auto;
	
	.salutation {
		width: 100%;

		&::after {
			content: ",";
		}
	}

	.two {
		font-family: PinyonScript;
		font-size: 1.5em;
	}
	.three {
		font-family: HomemadeApple;
		font-size: 1.25em;
	}
	.four {
		font-family: Pacifico;
		font-size: 1.1em;
	}
	.five {
		font-family: GreatVibes;
		font-size: 1.15em;
	}
}

footer {
	margin-block-start: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}