/* 1) Design tokens: colors, spacing, typography */

@font-face {
	font-display: swap;
	font-family: 'Noto Sans DWS';
	font-style: normal;
	font-weight: 100 900;
	src: url('../fonts/noto-sans-variable.woff2') format('woff2-variations');
}

:root {
/* Color scheme hint */
--color-scheme: light;
color-scheme: var(--color-scheme, light);

/* TOKENS from theme.json
--wp--preset--color--dws-gray-100
--wp--preset--color--dws-gray-200
--wp--preset--color--dws-gray-300
--wp--preset--color--dws-gray-400
--wp--preset--color--dws-gray-500
--wp--preset--color--dws-gray-600
--wp--preset--color--dws-gray-700
--wp--preset--color--dws-gray-800
--wp--preset--color--dws-gray-900

/* Brand colors (light mode) */
--color-bg: var(--wp--preset--color--dws-gray-100);
--color-bg-light: var(--color-gray-200);
--color-bg-medium: var(--color-gray-600);
--color-bg-dark: var(--color-gray-800);
--color-surface: #ffffff;
--color-text: --wp--preset--color--dws-gray-900;
--color-muted: var(--color-gray-600);

/* Semantic tokens */
--color-link: light-dark(var(--wp--preset--color--dws-blue-500), var(--wp--preset--color--dws-blue-900));
--color-link-hover: light-dark(var(--wp--preset--color--dws-blue-700), var(--wp--preset--color--dws-blue-700));

/* Typography */
--font-base: "Noto Sans DWS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-size-root: 18px; /* mobile font size */
--font-weight-base: 440;
--line-height-base: 1.4;

/* Spacing scale */
--space-1: 0.25rem;
--space-2: calc(var(--space-1) * 2);
--space-3: calc(var(--space-1) * 3);
--space-4: calc(var(--space-1) * 4);
--space-5: calc(var(--space-1) * 6);
--space-6: calc(var(--space-1) * 8);

--shadow-s:
	inset 0 1px 2px #ffffff30, /* top highlight */ 
	0 1px 2px #00000030, /* dark shadow */ 
	0 2px 4px #00000015; /* soft shadow */
--shadow-m:
	inset 0 1px 2px #ffffff50, /* top highlight */
	0 2px 4px #00000030, /* dark shadow */ 
	0 4px 8px #00000015; /* soft shadow */
--shadow-l:
	inset 0 1px 2px #ffffff70, /* top highlight */ 
	0 4px 6px #00000030, /* dark shadow */
	0 6px 10px #00000015; /* soft shadow */



	/* page preference is "dark" */
	&:has([name="toggle-color-scheme"]:checked) {
		--color-scheme: dark;
		--font-weight-base: 410; /* lighter base font weight for dark mode */
	}

	/* page preference is "system", and system preference is "dark" */
	@media (prefers-color-scheme: dark) {
		&:has([name="toggle-color-scheme"]:checked) {
			--color-scheme: dark;
			--font-weight-base: 410;
		}
	}

	@media (min-width: 770px) {
		--font-size-root: 20px; /* desktop font size */
	}

}

@supports (margin: 1lh) {
	:root {
		--space-1: 0.25lh;
	}
}

/* manual dark mode toggle on the page */
/*
@media (prefers-color-scheme: dark) {
	&:has([name="toggle-color-scheme"]:checked) {
		color-scheme: light;
	}
}

@media (prefers-color-scheme: light) {
	&:has([name="toggle-color-scheme"]:checked) {
		color-scheme: dark;
	}
}
*/

/* 2) Reset: normalize defaults */

*, *::before, *::after {
	box-sizing: border-box;
}

*:focus-visible {
	outline-color: currentColor;
	outline-offset: 0.1em;
	outline-style: solid;
	outline-width: 2px;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	/* text-decoration: none; */
	color: currentColor;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

.hidden-on-mobile {
	@media (max-width: 770px) { /* watch out, magic number from custom NAV styles! */
		display: none !important;
	}
}

.hidden-on-desktop {
	@media (min-width: 771px) { /* watch out, magic number from custom NAV styles! */
		display: none !important;
	}
}

/* Custom Theme styles */

html {
	hyphens: auto;
	text-wrap: pretty;
}

body {
	background-color: var(--wp--preset--color--dws-gray-100);
	color: var(--wp--preset--color--dws-gray-900);
	font-family: var(--font-base);
	font-size: var(--font-size-root);
	font-weight: var(--font-weight-base);
	line-height: var(--line-height-base);

	padding-block: 2rem 8rem;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: calc(var(--font-weight-base) + 160);
	line-height: 1.05;
	color: currentColor;
	text-wrap: balance;
	margin-block-start: 0;
	margin-block-end: var(--space-1);
}

h1 {
	margin-block-end: var(--space-3);
	font-size: clamp(1.4rem, 1.4vw + 1.05rem, 2rem);
}

h2 {
	font-size: clamp(1.2rem, 1.3vw + 0.9rem, 1.5rem);
}

h3 {
	font-size: clamp(1.1rem, 0.85vw + 0.9rem, 1.3rem);
}

* + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--space-4);
}

p {
	margin-top: 0;
	margin-bottom: var(--space-2);
}

code, pre {
	font-family: var(--font-mono);
}

pre {
	padding: var(--space-3);
	border-radius: 0.5rem;
	background-color: var(--color-surface);
	overflow-x: auto;
}

button,
.button,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6em 1.1em;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
	background-color: var(--color-primary);
	color: var(--color-primary-text);
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible {
	filter: brightness(1.05);
}

/* site logo */
header .logo-link {

}

@keyframes fenster-fade-dark {
	0% {
		fill: transparent;
		stroke: white;
	} 
	100% {
		fill: var(--wp--preset--color--dws-orange-500);
		stroke: var(--wp--preset--color--dws-orange-500);
	}
}

@keyframes fenster-fade-light {
	0% {
		fill: transparent;
	} 
	100% {
		fill: var(--wp--preset--color--dws-orange-500);
	}
}

header .logo-link svg {
	width: 10rem;
	height: auto;
	aspect-ratio: 2 / 1;

	#kontur path {
		fill: var(--wp--preset--color--dws-gray-900, #888);
		transition: fill 0.3s;
	}

	#fenster rect {
		animation: 0.5s fenster-fade-light forwards;
		stroke: var(--wp--preset--color--dws-gray-900, #888);
		stroke-width: 6px;
		transition: all 0.3s;
	}

	&:hover {
		#kontur path {
			fill: var(--wp--preset--color--dws-teal-500);
		}
		#fenster rect {
			stroke: var(--wp--preset--color--dws-teal-500);
		}
	}
}

[data-mode="dark"] #fenster rect {
	animation: 0.5s fenster-fade-dark forwards;
	stroke: var(--wp--preset--color--dws-gray-100);
	/* fill: var(--wp--preset--color--dws-orange-500); */
	fill: transparent;
}

.wp-block-site-title {
	width: 10rem;
	margin-block-start: 0.2rem;
}

.wp-block-site-title a {
	display: block;
	box-sizing: content-box;
	font-size: 1rem;
	text-align: center;
	/*
	text-indent: -9000px;
	width: calc(544px / 2.5);
	height: calc(277px / 2.5);
	width: 14rem;
	height: auto;
	aspect-ratio: 1.963898917 / 1;
	background-image: url('../img/logo-diesterweg-web-light.svg');
	*/

	/*
	width: 10rem;
	margin-block-start: 0.2rem;
	background-image: url('../img/logo-diesterweg-mini-light.svg');
	background-size: contain;
	background-repeat: no-repeat;
	*/
	&:hover {
		color: currentColor;
	}
}

[data-mode="dark"] .wp-block-site-title a {
	/* background-image: url('../img/logo-diesterweg-web-dark.svg'); */
	/* background-image: url('../img/logo-diesterweg-mini-dark.svg'); */
}

/* NAV custom styles */

@media (min-width: 771px) {
	/* desktop nav design */

	header nav {
		.wp-block-navigation__container {

			& > .wp-block-navigation-item {
				outline: 0px solid pink;

				--nav-item-bg: var(--wp--preset--color--dws-gray-200);

				background-color: var(--nav-item-bg);
				border-color: color-mix(in oklch, var(--wp--preset--color--dws-gray-800) 14%, var(--nav-item-bg));
				/* border-color: oklch(from var(--nav-item-bg) 0.65 c h); */
				border-block-start-width: 2px;
				border-block-start-style: solid;

				&:is(:hover, :focus) {
					--nav-item-bg: var(--wp--preset--color--dws-gray-300);
				}

				& > a {
					padding: 0.25em 0.6em;
				}
			}
		}

		.wp-block-navigation__submenu-container {
			box-shadow: 0 3px 8px black;
			box-shadow: var(--shadow-m);
			border-width: 0 !important;

			.wp-block-navigation-item {
				outline: 0px solid cyan;
				background-color: var(--wp--preset--color--dws-gray-200);
				color: var(--wp--preset--color--dws-gray-900);

				&:is(:hover, :focus) {
					background-color: color-mix(in srgb, var(--wp--preset--color--dws-gray-200) 35%, transparent);
				}

				a {
					/* color: var(--wp--preset--color--dws-gray-900) !important; */
					color: currentColor !important;
				}
			}
		}

		.wp-block-navigation-item.current-menu-item {
			--nav-item-bg: var(--wp--preset--color--dws-yellow-900);
			background-color: var(--nav-item-bg);
			color: color-mix(in oklch, var(--nav-item-bg), #900 60%) !important;

			&:is(:hover, :focus) {
				--nav-item-bg: var(--wp--preset--color--dws-orange-900);
				background-color: var(--nav-item-bg);
			}
		}

		.wp-block-navigation__submenu-icon {
			margin-inline-end: 0.25em;
		}
	}
}

@media (max-width: 770px) {
	/* mobile nav design */

	header nav {
		--nav-gap-size: 0.5ch;
		--nav-item-padding: 0.25em 0.6em 0.3em;
		--nav-item-radius: 1em;
		--nav-debug-width: 0px;
		width: 100%;
	}

	header nav > ul {
		outline: var(--nav-debug-width) solid red;
		justify-content: space-between !important;
		align-items: start !important;

		display: grid !important;
		gap: 1ch !important;
		grid-template-columns: repeat(2, 1fr);
		grid-template-columns: repeat(2, calc(50% - 0.5ch)); /* fix visual width bug on tap */

		& > .wp-block-navigation-item {
			outline: var(--nav-debug-width) solid cyan;
			flex-direction: column;
			gap: var(--nav-gap-size);
			gap: 0;

			&:nth-child(1) {
				grid-column-start: 1;
				grid-row-start: 1;
			}

			&:nth-child(2) {
				grid-column-start: 2;
				grid-row-start: span 3;
			}

			&:nth-child(3) {
				grid-column-start: 1;
				grid-row-start: 2;
			}

			&:nth-child(4) {
				grid-column-start: 1;
				grid-row-start: 3;
			}

			& > a { /* level 1 / top level items */
				width: 100%;
				text-align: center;
				color: color-mix(in srgb, var(--wp--preset--color--dws-blue-900), oklch(1.0 0.0 0) 85%) !important;
				background: var(--wp--preset--color--dws-blue-500);
				border-radius: var(--nav-item-radius);
				corner-shape: superellipse(1.4);
				padding: var(--nav-item-padding);

				/*
				@supports (corner-shape: superellipse(1)) {
					box-shadow: inset 0 1px 1px color-mix(in srgb, var(--wp--preset--color--dws-blue-900), transparent 80%),
								inset 0 -2px 3px oklch(0.1 0.0 0 / 0.25);
				}
				*/

				/* top-level links that have submenus attached */
				&:has(~ .wp-block-navigation__submenu-container) {
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}

				&:is(:hover, :focus) {
					background: color-mix(in srgb, var(--wp--preset--color--dws-blue-500), oklch(1.0 0.0 0) 10%) !important;
				}
			}

			&.current-menu-item > a {
				background-color: var(--wp--preset--color--dws-orange-300);
			}
		}
	}

	header nav li {
		
	}


	header nav .wp-block-navigation__submenu-container {
		outline: var(--nav-debug-width) solid green;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		width: auto !important;

		padding-block: 0 !important;
		border: 0 !important;
		background-color: transparent !important;
		color: currentColor !important;
		width: 100% !important;
		
		gap: var(--nav-gap-size);
		gap: 0;
		align-items: center !important;
		

		& > .wp-block-navigation-item {
			display: block;
			width: 100%;
		}

		a { /* level 2 / submenu items */
			display: block !important;
			text-align: center;
			color: color-mix(in srgb, var(--wp--preset--color--dws-teal-900), oklch(1.0 0.0 0) 60%) !important;
			color: color-mix(in srgb, var(--wp--preset--color--dws-blue-500), oklch(1.0 0.0 0) 90%) !important;
			background: var(--wp--preset--color--dws-blue-100);
			background: color-mix(in srgb, var(--wp--preset--color--dws-blue-500), var(--color-bg) 20%);
			border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--dws-blue-500), var(--color-bg) 60%);
			border-radius: var(--nav-item-radius);
			border-radius: 0;
			corner-shape: superellipse(1.4);
			padding: var(--nav-item-padding) !important;

			/*
			@supports (corner-shape: superellipse(1)) {
				box-shadow: inset 0 1px 1px color-mix(in srgb, var(--wp--preset--color--dws-teal-900), transparent 80%),
							inset 0 -2px 3px oklch(0.1 0.0 0 / 0.25);
			}
			*/

			&:is(:hover, :focus) {
				background: color-mix(in srgb, var(--wp--preset--color--dws-blue-100), oklch(1.0 0.0 0) 5%);
			}
		}

		.current-menu-item a {
			background-color: var(--wp--preset--color--dws-orange-300);
		}

		li:last-of-type a {
			border-bottom-left-radius: var(--nav-item-radius);
			border-bottom-right-radius: var(--nav-item-radius);
		}
	}

	.wp-block-navigation-submenu__toggle {
		display: none !important;
	}
}

/* Base container width */
.wp-site-blocks {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: var(--space-4);

	display: flex;
	flex-direction: column;
	gap: 2rem;

	& > * {
		outline: 0px solid red;
	}

	& > .wp-block-columns {
		gap: var(--space-4);
	}
}

.wp-block-columns {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1rem;

	& > * {
		flex: 1;
	}
}

.wp-block-image {

	max-width: 90%;
	height: auto;

	figcaption {
		margin-block-start: 0;
		font-size: 0.85rem;
		padding: 0.2em 0 0.5em 0.5em;
		background-color: light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
		color: color-mix(in oklch, currentColor 65%, transparent);
	}
}

.entry-content {

	:is(h1, h2, h3) { max-width: 50ch; }
	p { max-width: 60ch; }
	li {
		max-width: 60ch;
		margin-block-end: var(--space-3);
		list-style-type: square;
	}
	li ul {
		margin-block: var(--space-3);
		padding-inline-start: 6ch;
		list-style-position: outside;
	}
	li li {
		margin-block-end: var(--space-1);
	}

	li li > strong {
		text-transform: uppercase;
	}

	blockquote {
		background: var(--wp--preset--color--dws-gray-800);
		color: var(--wp--preset--color--dws-gray-100);
		margin-inline: 0;
		padding: var(--space-2) var(--space-2);
		max-width: 90%;
	}

	.wp-block-table {

		margin-block: var(--space-2);

		:is(th, td) {
			border-inline: 0;
			border-color: light-dark(var(--wp--preset--color--dws-gray-300), var(--wp--preset--color--dws-gray-500));
		}
	}
}

.wp-block-separator {



	&.is-style-dots {
		margin-block-end: 0.25rem;

		&::before {
			content: none;
		}
	}

}

.wp-block-file {
	display: inline-flex;
	background: var(--wp--preset--color--dws-blue-500);
	color: var(--wp--preset--color--dws-gray-100);
	font-size: 1em !important;
	border-radius: 0.5em;
	margin-block-end: 0.25rem;

	&:hover {
		background: color-mix(in srgb, var(--wp--preset--color--dws-blue-500), var(--wp--preset--color--dws-gray-100) 15%);
	}

	a {
		flex: 1;
		padding: 0.3em 0.5em;
		color: currentColor;
		text-decoration: none;
		text-wrap: nowrap;
	}

	.wp-element-button {
		display: block;
		width: 2em;
		margin: 0;
		text-indent: -9000px;
		background-image: url('../img/icon-download-light.svg');
		background-size: 1.2em 1.2em;
		background-repeat: no-repeat;
		background-position: center 0.3em;
	}
}

[data-mode="dark"] .wp-block-file {
	color: var(--wp--preset--color--dws-gray-900);
}

aside {
	/*
	background-color: var(--color-gray-300);
	box-shadow: var(--shadow-s);
	border-radius: 1em;
	padding: 1rem;
	*/

	a { color: currentColor; }
	a:is(:focus, :hover) { color: color-mix(in srgb, currentColor, var(--color-link) 50%); }

	h2 { margin-block-end: var(--space-3); }

	* + :is(h2, h3) {
		
	}

	.wp-block-table {
		margin-block: var(--space-2);
	}

	.wp-block-table :is(th, td) {
		border-color: color-mix(in srgb, currentColor 20%, transparent);
		border-inline: 0;
		padding: 0;
	}

	.wp-block-table td:last-child {
		
	}

	.wp-block-group,
	.wp-block-details {
		padding: 0.5em 0.75em;
		color: light-dark(currentColor, var(--wp--preset--color--dws-gray-100));

		/* default sidebar background colors */
		background-color: var(--wp--preset--color--dws-gray-200);
		border-color: color-mix(in srgb, var(--wp--preset--color--dws-gray-800) 20%, transparent);
		border-block-start-width: 2px;
		border-block-start-style: solid;

		summary {
			font-size: 1.17em; /* emulate h3 style */
			font-weight: 600;
			line-height: 1.05;
			margin-block-start: 0;
			list-style: none;
		}

		&[open] summary {
			margin-block-end: var(--space-2);
		}

		& + :is(.wp-block-group, .wp-block-details) {
			margin-block-start: var(--space-2);
			border-block-start-width: 2px;
			border-block-start-style: solid;
			padding-block-start: var(--space-1);
		}
	}
}

header {


	& > .wp-block-group {
		align-items: center;
		flex-direction: column;

		@media (min-width: 770px) {
			justify-content: space-between;
			align-items: start;
			flex-direction: row;
		}
	}
}

footer {
	grid-column-start: 1;
	grid-column-end: 3;
}

[name="toggle-color-scheme"] {
	position: relative;
	width: 1em;
	height: 1em;
	background: transparent;
	margin-block-start: 1rem;

	& + span {
		display: inline-block;
		text-indent: -9000px;
	}

	&::before {
		content: "Dark Mode";
		display: block;
		width: 12.75ch;
		padding-inline-start: 1.5em;
		position: relative;
		top: -0.1em;
		left: -0.2em;
		border-radius: 0.5em;
		background-color: var(--wp--preset--color--dws-gray-900);
		color: var(--wp--preset--color--dws-gray-100);
		background-image: url('../img/icon-dark-mode.svg');
		background-size: 1em 1em;
		background-repeat: no-repeat;
		background-position: 0.25em center;
		/* filter: invert(0); */
	}

	&:checked::before {
		content: "Light Mode";
		background-image: url('../img/icon-light-mode.svg');
		/* filter: invert(1); */
	}

	/*
	&::after {
		display: inline-block;
		content: "Light Mode";
	}

	&:checked::after {
		display: inline-block;
		content: "Dark Mode";
	}
	*/
}

footer .color-grid {
	margin-block: 2rem;
	display: grid;
	display: none;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 100px;

	ul { display: contents; }
	li {
		width: 100%;
		height: 100%;
		list-style: none;
	}
}