/* ==========================================================================
   blogspare custom — site-wide overrides
   ========================================================================== */

/* Mobile: hide the dark hero header cover */
@media (max-width: 782px) {
	header .wp-block-cover { display: none }
}

/* ==========================================================================
   Content typography (single posts + entry content)
   ========================================================================== */

/* Responsive content images — never overflow the reading column */
.wp-block-post-content img,
.entry-content img,
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.wp-block-post-content figure,
.wp-block-post-content .wp-block-image {
	max-width: 100%;
	margin: 1.6em auto;
}

/* Single posts only — body type and rhythm */
.single .wp-block-post-content p,
.single .wp-block-post-content li {
	font-size: 20px;
	line-height: 1.75;
}

.single .wp-block-post-content p {
	margin: 0 0 1.4em;
}

.single .wp-block-post-content li {
	margin: 0 0 .6em;
}

.single .wp-block-post-content h2 {
	font-size: 30px;
	line-height: 1.25;
	margin: 1.9em 0 .6em;
	font-weight: 700;
}

.single .wp-block-post-content h3 {
	font-size: 24px;
	line-height: 1.3;
	margin: 1.6em 0 .5em;
	font-weight: 700;
}

.single .wp-block-post-content blockquote {
	margin: 1.6em 0;
	padding: .4em 1.2em;
	border-left: 3px solid #ce242c;
	color: #444;
	font-style: italic;
}

.single .wp-block-post-content ul,
.single .wp-block-post-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.6em;
}

/* ==========================================================================
   Mobile overflow safeguards
   ========================================================================== */

/* WP caption shortcodes often hardcode width:NNNpx via inline style. */
.wp-caption,
figure[style*="width"] {
	max-width: 100% !important;
	box-sizing: border-box;
}

.wp-caption img,
figure img {
	max-width: 100%;
	height: auto;
}

/* Catch any other content overflow on small screens */
@media (max-width: 600px) {
	.wp-block-post-content,
	.entry-content {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.wp-block-post-content img,
	.wp-block-post-content iframe,
	.wp-block-post-content video,
	.wp-block-post-content table {
		max-width: 100% !important;
		height: auto;
	}

	.wp-block-post-content pre,
	.wp-block-post-content table {
		overflow-x: auto;
	}
}