/*
 * PotsKids 2.0: layout for tablets and phones.
 *
 * The old theme is built for a fixed 870px page inside a 940px frame. Below 940px the frame, the
 * header and the main menu become fluid; from 940px on the desktop look stays as it was.
 * The breakpoint is repeated in the media query below (custom properties do not work there).
 */

:root {
	--page-gutter: 16px;
	--color-menu-top: #35468b;
	--color-menu-bottom: #192b77;
	--color-menu-line: rgba(255, 255, 255, 0.15);
	--color-submenu: #fff;
	--menu-row-height: 44px;
}

/* All widths: the logo wrapper replaces an inline float; menu buttons are for small screens. */
.cp-header-logo {
	float: left;
}

.cp-menu-toggle,
.cp-submenu-toggle {
	display: none;
}

/* Keyboard users open the desktop drop-downs like mouse users do. */
.menu li:focus-within > ul {
	top: 100%;
	visibility: visible;
}

.menu li li:focus-within > ul {
	left: 100%;
	top: 0;
}

@media (max-width: 939px) {

	/* Header: logo without its empty top area, Kindergeburtstage banner beside it. */
	.header-container {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 12px;
		height: auto;
		padding: 8px var(--page-gutter) 0;
	}

	.cp-header-logo {
		flex: 1 1 auto;
		float: none;
		min-width: 0;
		max-width: 480px;
	}

	/* The image is 480 x 168 with the artwork in rows 86 to 160. */
	.cp-header-logo img {
		display: block;
		width: 100%;
		aspect-ratio: 480 / 74;
		object-fit: cover;
		object-position: 50% 91%;
	}

	a.ad-kigeb,
	a.ad-kigeb:hover {
		flex: 0 0 34%;
		float: none;
		max-width: 337px;
		height: auto;
		aspect-ratio: 337 / 168;
		margin: 0;
		background-size: cover;
	}

	/* Frame */
	#overall,
	#container {
		float: none;
		width: auto;
		max-width: none;
	}

	.col-940 {
		width: auto;
	}

	#content-full {
		float: none;
		margin: 0 var(--page-gutter);
	}

	.post-entry {
		overflow-wrap: break-word;
	}

	.post-entry table {
		display: block;
		overflow-x: auto;
	}

	/* Main menu: toggle button, then one row per category. */
	.cp-menu-toggle,
	.cp-menu-toggle:hover,
	.cp-menu-toggle:focus {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: var(--menu-row-height);
		padding: 0 var(--page-gutter);
		border: 0;
		border-radius: 0;
		background: linear-gradient(var(--color-menu-top), var(--color-menu-bottom));
		color: #fff;
		font: inherit;
		font-size: 15px;
		font-weight: 700;
		text-align: left;
		cursor: pointer;
	}

	.cp-menu-toggle-icon,
	.cp-menu-toggle-icon::before,
	.cp-menu-toggle-icon::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
	}

	.cp-menu-toggle-icon {
		position: relative;
	}

	.cp-menu-toggle-icon::before,
	.cp-menu-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.cp-menu-toggle-icon::before {
		top: -6px;
	}

	.cp-menu-toggle-icon::after {
		top: 6px;
	}

	.cp-menu-toggle[aria-expanded="true"] .cp-menu-toggle-icon {
		background: transparent;
	}

	.cp-menu-toggle[aria-expanded="true"] .cp-menu-toggle-icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.cp-menu-toggle[aria-expanded="true"] .cp-menu-toggle-icon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.menu {
		width: auto;
	}

	/* Without JavaScript the menu simply stays open. */
	.js .menu {
		display: none;
	}

	.js .menu.cp-menu-open {
		display: block;
	}

	.menu li {
		float: none;
		text-align: left;
	}

	.menu a {
		height: auto;
		padding: 12px var(--page-gutter);
		border-top: 1px solid var(--color-menu-line);
		font-size: 15px;
	}

	.menu .menu-item-has-children > a {
		padding-right: calc(var(--menu-row-height) + var(--page-gutter));
	}

	.menu ul {
		display: none;
		position: static;
		min-width: 0;
		margin: 0;
		visibility: visible;
	}

	.menu li.cp-submenu-open > ul {
		display: block;
	}

	.menu li li {
		margin: 0;
		background: var(--color-submenu);
	}

	.menu li li a {
		height: auto;
		padding: 10px var(--page-gutter) 10px calc(2 * var(--page-gutter));
		border-top: 1px solid var(--color-border-light);
		font-size: 14px;
	}

	.menu li li li a {
		padding-left: calc(3 * var(--page-gutter));
	}

	.menu li li.current-menu-item > a {
		color: var(--color-accent);
		font-weight: 700;
	}

	.cp-submenu-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: var(--menu-row-height);
		height: var(--menu-row-height);
		padding: 0;
		border: 0;
		border-left: 1px solid var(--color-menu-line);
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.menu li li .cp-submenu-toggle {
		border-left-color: var(--color-border-light);
		color: var(--color-heading);
	}

	.cp-submenu-toggle::before {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		margin: -4px auto 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	.cp-submenu-toggle[aria-expanded="true"]::before {
		margin-top: 4px;
		transform: rotate(-135deg);
	}
}