/*
 * Leer24 – Twenty Ten responsive additions.
 * Only the homepage post list is arranged in columns; single posts and pages are untouched.
 */
.leer24-mobile-navigation {
	display: none;
	font-family: inherit;
	position: relative;
	z-index: 1000;
	background: #111;
	color: #fff;
}
.leer24-mobile-menu-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 16px 18px;
	border: 0;
	border-radius: 0;
	background: #111;
	color: #fff;
	font: inherit;
	font-size: 42px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.leer24-mobile-menu-toggle:focus-visible,
.leer24-mobile-navigation a:focus-visible {
	outline: 3px solid #d7193f;
	outline-offset: 2px;
}
.leer24-menu-icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
}
.leer24-menu-icon span {
	display: block;
	height: 3px;
	width: 28px;
	border-radius: 2px;
	background: #fff;
}
.leer24-mobile-menu-panel {
	padding: 8px 6px 14px;
	background: #111;
}
.leer24-mobile-menu-panel[hidden] {
	display: none !important;
}
.leer24-mobile-menu-list,
.leer24-mobile-menu-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.leer24-mobile-menu-list li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #393939;
}
.leer24-mobile-menu-list li a {
	display: block;
	box-sizing: border-box;
	min-height: 58px;
	padding: 17px 10px;
	color: #fff;
	background: transparent;
	font-size: 40px;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.leer24-mobile-menu-list li a:hover,
.leer24-mobile-menu-list li a:focus {
	color: #fff;
	background: #292929;
	text-decoration: underline;
}
.leer24-mobile-menu-list .sub-menu,
.leer24-mobile-menu-list .children {
	margin-left: 14px;
	border-left: 3px solid #d7193f;
}
.leer24-mobile-menu-list .sub-menu a,
.leer24-mobile-menu-list .children a {
	padding-left: 12px;
	font-size: 36px;
}
.leer24-mobile-menu-list .current-menu-item > a,
.leer24-mobile-menu-list .current_page_item > a {
	border-left: 4px solid #d7193f;
	font-weight: 700;
}

/* Desktop: row-major two-column grid keeps the chronological/source order intact.
   A conventional grid can leave some whitespace beside longer posts, but never
   changes the visible article order. */
@media screen and (min-width: 768px) {
	body.home #content {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 24px;
		align-content: start;
	}
	body.home #content > .hentry {
		display: block;
		float: none;
		clear: none;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0 0 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #ddd;
	}
	body.home #content > #nav-above,
	body.home #content > #nav-below,
	body.home #content > .page-title {
		grid-column: 1 / -1;
	}
	body.home #content .entry-content,
	body.home #content .entry-summary {
		overflow-wrap: anywhere;
	}
	body.home #content .entry-content img,
	body.home #content .entry-summary img,
	body.home #content .post-thumbnail img {
		max-width: 100%;
		height: auto;
	}
}

/* Mobile: hide the original tiny navigation and show the accessible replacement. */
@media screen and (max-width: 767px) {
	/* Make the whole legacy Twenty Ten layout responsive, not just the menu.
	   The viewport meta tag exposes the real device width, so fixed 940px theme
	   containers must be fluid or the page will require horizontal zooming. */
	html, body {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}
	#page, #wrapper, #header, #masthead, #main, #footer,
	#branding, #access, #content, #container, #primary, #secondary,
	#colophon, #site-info, #site-generator {
		box-sizing: border-box !important;
		max-width: 100% !important;
	}
	#page, #wrapper, #header, #masthead, #main, #footer,
	#branding, #container, #content, #primary, #secondary, #colophon {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#page, #wrapper {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	#main, #container, #content, #primary, #secondary {
		float: none !important;
		clear: both !important;
	}
	#content {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* Keep Twenty Ten's widget sidebar on the right on mobile, rather than
	   allowing it to fall below the article column. Compact proportions are
	   intentional: the phone remains at its natural viewport scale. */
	#main {
		display: flex !important;
		align-items: flex-start !important;
		gap: 6px !important;
		width: 100% !important;
	}
	#container {
		float: none !important;
		clear: none !important;
		flex: 0 0 calc(66.6667% - 4px) !important;
		width: calc(66.6667% - 4px) !important;
		max-width: calc(66.6667% - 4px) !important;
		min-width: 0 !important;
		margin: 0 !important;
	}
	#content {
		width: 100% !important;
		max-width: 100% !important;
		padding: 8px !important;
		margin: 0 !important;
	}
	#secondary {
		display: block !important;
		float: none !important;
		clear: none !important;
		flex: 0 0 calc(33.3333% - 2px) !important;
		width: calc(33.3333% - 2px) !important;
		max-width: calc(33.3333% - 2px) !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 4px 2px !important;
		box-sizing: border-box !important;
	}
	#secondary .widget {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 12px !important;
		padding: 6px !important;
		box-sizing: border-box !important;
		font-size: 11px !important;
		line-height: 1.25 !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}
	#secondary .widget-title,
	#secondary h2,
	#secondary h3 {
		font-size: 13px !important;
		line-height: 1.2 !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}
	#secondary img {
		max-width: 100% !important;
		height: auto !important;
	}
	#secondary ul,
	#secondary ol {
		padding-left: 12px !important;
	}

	#branding img,
	#content img,
	.entry-content img,
	.entry-summary img,
	.widget img,
	img {
		max-width: 100% !important;
		height: auto !important;
	}
	.entry-content, .entry-summary, .widget, .hentry,
	#site-title, #site-description {
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-wrap: anywhere;
	}
	.entry-content iframe, .entry-summary iframe, iframe,
	video, embed, object {
		max-width: 100% !important;
	}
	input, select, textarea, button {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.leer24-mobile-navigation,
	#leer24-mobile-navigation {
		display: block !important;
		position: relative !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 100vw !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	#leer24-mobile-menu-panel,
	#leer24-mobile-navigation .leer24-mobile-menu-toggle {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.leer24-mobile-menu-panel,
	.leer24-mobile-menu-toggle {
		width: 100%;
		box-sizing: border-box;
	}
	#access {
		display: none !important;
	}
	body.home #content {
		display: block;
		column-count: 1;
	}
	.leer24-mobile-navigation {
		display: block;
	}
	body.home #content {
		column-count: 1;
		column-gap: 0;
	}
	body.home #content > .hentry {
		break-inside: auto;
		float: none;
		clear: both;
		width: 100%;
		box-sizing: border-box;
	}
	body.home #content .entry-content img,
	body.home #content .entry-summary img,
	body.home #content .post-thumbnail img {
		max-width: 100%;
		height: auto;
	}
}