/*
 * Styles of the sites with template key "programmieren", loaded after the default theme.
 * Change the design tokens below to give this site its own colours, or add any CSS you like.
 * Avoid class names starting with tag-, category- or author- (WordPress-style term classes use them).
 */
:root {
	/* Currently the default theme's values; change them to restyle the site. */
	--theme-accent: #0b6e78;
	--theme-accent-strong: #08545c;
	--theme-band: #eef3f3;
	--bs-link-color-rgb: 11, 110, 120;
	--bs-link-hover-color-rgb: 8, 84, 92;
	--bs-focus-ring-color: rgba(11, 110, 120, 0.35);
}

/* Header in the link colour, with white text. */
.site-header {
	background: var(--theme-accent);
	border-bottom: 0;
}
.site-header .site-title a,
.site-header .primary-navigation a {
	color: #ffffff;
}
.site-header .site-description {
	color: rgba(255, 255, 255, 0.8);
}
.site-header .primary-navigation a:hover,
.site-header .primary-navigation .current-menu-item > a {
	color: #ffffff;
	text-decoration-color: rgba(255, 255, 255, 0.7);
}
.site-header .menu-toggle {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff;
}
.site-header :focus-visible {
	outline-color: #ffffff;
}

/* Category navigation: its own full-width band in a lighter shade of the header colour. */
.site-header {
	padding-bottom: 0;
}
.site-header .primary-navigation {
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.25rem 0;
	background: color-mix(in srgb, var(--theme-accent) 72%, #ffffff);
	/* extend the band to the window edges, beyond the content container */
	box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--theme-accent) 72%, #ffffff);
	clip-path: inset(0 -100vmax);
}
.js .site-header .primary-navigation:not(.is-open) {
	display: none;
}
@media (min-width: 992px) {
	.js .site-header .primary-navigation:not(.is-open),
	.site-header .primary-navigation {
		display: block;
		width: 100%;
	}
}
/* without a visible band (mobile, menu closed) keep the usual space below the title */
@media (max-width: 991.98px) {
	.site-header {
		padding-bottom: 1.25rem;
	}
	.site-header .primary-navigation.is-open {
		margin-bottom: -1.25rem;
	}
}

/* Logo next to the site title */
.site-logo img {
	display: block;
	width: 3rem;
	height: 3rem;
}
@media (max-width: 575.98px) {
	.site-logo img {
		width: 2.5rem;
		height: 2.5rem;
	}
}