/*
 * Breikuchen.de – overrides loaded after the parent theme's responsive.css
 * (the child style.css is printed before it and cannot override it).
 *
 * Below 768px the theme pins the layout to 410px / 260px columns, wasting a large part
 * of the screen. Make the column fluid and derive the inner fixed widths from it
 * (same offsets the theme uses, e.g. 260px column -> 222px title, 170px text).
 */

/* Top navigation: spread the four items over the whole bar instead of leaving a gap after the last one */
@media only screen and (min-width: 768px) {
	#top-menu ul.menu {
		display: flex;
		justify-content: space-between;
		float: none;
		width: auto;
		padding: 0 16px;
	}

	#top-menu ul.menu > li,
	#top-menu ul.menu > li:last-child {
		float: none;
		padding: 0 14px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	#top-menu ul.menu { padding: 0 6px; }

	#top-menu ul.menu > li,
	#top-menu ul.menu > li:last-child { padding: 0 10px; }
}

/* 404: the German text is much longer than "Probably 404!" / "Back" the layout was made for */
.error404 h1.big-title {
	font-size: clamp(34px, 6vw, 64px);
	margin: 10px 0 30px;
}

.error404 .back-btn {
	float: none;
	display: block;
	margin: 0 auto 30px;
	font-size: 40px;
	padding-left: 30px;
	width: 220px;
}

@media only screen and (max-width: 767px) {
	.container,
	.slider-container,
	.main-container {
		width: auto;
		margin-left: 24px;
		margin-right: 24px;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.post-title { width: calc(100% - 40px); }
	.post-content { width: calc(100% - 110px); }
	#searchform input[type="text"],
	#searchform input[type="text"]:hover,
	#searchform input[type="text"]:focus { width: calc(100% - 65px); }
}

@media only screen and (max-width: 479px) {
	.container,
	.slider-container,
	.main-container {
		margin-left: 16px;
		margin-right: 16px;
	}

	.post-title { width: calc(100% - 38px); }
	.post-content { width: calc(100% - 90px); }
	#searchform input[type="text"],
	#searchform input[type="text"]:hover,
	#searchform input[type="text"]:focus { width: calc(100% - 65px); }

	/* smaller back-button sprite on phones (145×56) */
	.error404 .back-btn {
		width: 150px;
		margin: 0 auto 30px;
		font-size: 26px;
		padding-left: 25px;
	}

	/* tables in posts (e.g. "Termine") scroll instead of overflowing */
	.post-content .wp-block-table { overflow-x: auto; }

	#gallery-frame { min-height: 400px; }
}