/*
 * Blog-only fixes, applied on top of the main site's stylesheet (www.onlineparentingprograms.com/css/main-*.css).
 * header.php loads this file right after the main stylesheet, so these rules win where both apply.
 * Added 2026-10-28 (D2).
 */

/*
 * Headings made with the editor's "Heading 2" inside posts.
 * The main stylesheet styles every h2 as a big, white, centred title for hero photos, so on the blog's
 * white page these headings were invisible. Authors use "Heading 2" and "Heading 3" for the same kind of
 * section heading, so h2 here gets exactly the look of the blog's h3: dark, bold, left-aligned,
 * 24 / 34 / 36 px (same sizes and breakpoints as h3 in the main stylesheet).
 */
.blog-article .entry-content h2 {
	position: static;
	margin: 20px 0;
	color: var(--black-95, #121212);
	font-size: 24px;
	font-weight: 900;
	letter-spacing: normal;
	text-align: left;
}
@media (min-width: 768px) {
	.blog-article .entry-content h2 {
		font-size: 34px;
	}
}
@media (min-width: 992px) {
	.blog-article .entry-content h2 {
		font-size: 36px;
	}
}

/*
 * Phones and tablets (narrower than 992 px): start the menu bar and the photo band below the thin black
 * strip at the top, as on the main site. The main stylesheet does this with "#header-bar + .navbar",
 * which never matches on the blog because the menu sits inside the #redo-menu-js wrapper.
 */
@media (max-width: 991px) {
	#header-bar + .site-branding-container > .navbar {
		margin-top: 20px;
	}
	#header-bar + .site-branding-container + .hero-image {
		top: 20px;
	}
}

/*
 * Embedded videos (YouTube, TED): fill the width of the text column and keep their shape, instead of
 * a fixed 640 px width that ran past the column and made phones scroll sideways. The shape is set on
 * the video frame itself, so an embed whose video is gone (only its web address is left as text)
 * keeps its normal height instead of getting an empty box.
 */
.blog-article .wp-block-embed {
	margin: 1em 0; /* a little space above and below the video; until now the next paragraph touched it */
}
.blog-article .wp-block-embed.wp-has-aspect-ratio iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
/* the other shapes WordPress can give a video embed */
.blog-article .wp-block-embed.wp-embed-aspect-21-9 iframe { aspect-ratio: 21 / 9; }
.blog-article .wp-block-embed.wp-embed-aspect-18-9 iframe { aspect-ratio: 18 / 9; }
.blog-article .wp-block-embed.wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }
.blog-article .wp-block-embed.wp-embed-aspect-1-1 iframe { aspect-ratio: 1 / 1; }
.blog-article .wp-block-embed.wp-embed-aspect-9-16 iframe { aspect-ratio: 9 / 16; }
.blog-article .wp-block-embed.wp-embed-aspect-1-2 iframe { aspect-ratio: 1 / 2; }

/*
 * Also against sideways scrolling on phones:
 * - very long web addresses written out in the text (often in the source notes at the end of a post)
 *   may break onto the next line instead of running past the edge of the screen;
 * - a table wider than the screen scrolls inside its own box (as in WordPress's own block styles) instead
 *   of widening the whole page; the space above and below tables stays as it is now.
 */
.blog-article .entry-content {
	overflow-wrap: break-word;
}
.blog-article .entry-content .wp-block-table {
	margin: 1em 0;
	overflow-x: auto;
}
/* the scrolling box would keep the table's own margin inside it and add space; the box's margin replaces it */
.blog-article .entry-content .wp-block-table > table {
	margin: 0;
}

/*
 * Tables inside posts (added 2026-10-28, D3): a header row in the site's burgundy with white uppercase labels, like
 * the site menu; white rows with a very light tint on every other row; thin light-grey lines between rows and
 * columns; a thin grey outer border; comfortable cell spacing.
 * Most tables on the blog have no real header section: their first row holds the column names, so the first row is
 * styled as the header (a real <thead> is handled too). Wide tables scroll inside their own box on narrow screens.
 */
.blog-article .entry-content table {
	width: 100%;
	border: 1px solid var(--black-17, #d4d4d4);
	border-collapse: collapse;
	border-spacing: 0;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
	color: var(--black-80, #474747);
}
.blog-article .entry-content thead,
.blog-article .entry-content tfoot {
	border: 0;
}
/* every cell: spacing, a light line above it, text at the top */
.blog-article .entry-content td,
.blog-article .entry-content th {
	padding: 8px;
	border: 0;
	border-top: 1px solid var(--black-11, #e3e3e3);
	background: #fff;
	font-size: inherit;
	font-weight: 400;
	vertical-align: top;
}
/* light lines between columns */
.blog-article .entry-content tr > :not(:first-child) {
	border-left: 1px solid var(--black-11, #e3e3e3);
}
/* a very light tint on every other data row (the header row is not counted) */
.blog-article .entry-content table > tbody:first-child > tr:nth-child(odd):not(:first-child) > *,
.blog-article .entry-content table > thead + tbody > tr:nth-child(even) > * {
	background: var(--black-3, #f9f9f9);
}
/* row names in the first column when they are <th> (for example the days in the old worksheet) */
.blog-article .entry-content tbody th {
	font-weight: 700;
	color: var(--black-95, #121212);
}
/* the header row: a real <thead>, or the first row when the table has no <thead> */
.blog-article .entry-content table > thead > tr > *,
.blog-article .entry-content table > tbody:first-child > tr:first-child > * {
	padding: 10px 8px;
	border: 1px solid var(--accent-bg-color, #aa515d);
	background: var(--accent-bg-color, #aa515d);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: bottom;
}
/* inside the header the column lines stay burgundy, so the header reads as one band */
.blog-article .entry-content table > thead > tr > :not(:first-child),
.blog-article .entry-content table > tbody:first-child > tr:first-child > :not(:first-child) {
	border-left-color: var(--accent-bg-color, #aa515d);
}
.blog-article .entry-content table > thead a,
.blog-article .entry-content table > tbody:first-child > tr:first-child a {
	color: #fff;
	text-decoration: underline;
}
/* the editor's "Footer section": a light grey closing row */
.blog-article .entry-content table > tfoot > tr > * {
	border-top: 2px solid var(--black-17, #d4d4d4);
	background: var(--black-5, #f2f2f2);
	font-weight: 700;
	color: var(--black-95, #121212);
}
/* empty cells keep room to write in (the old printable worksheet) */
.blog-article .entry-content td:empty {
	height: 2.75em;
}
/* links in cells: site colour with a soft underline, so they stand out in dense text */
.blog-article .entry-content td a {
	text-decoration: underline;
	text-decoration-color: rgba(166, 74, 87, .4);
	text-underline-offset: 2px;
}
.blog-article .entry-content td a:hover,
.blog-article .entry-content td a:focus {
	color: var(--accent-bg-color-2, #822a42);
	text-decoration-color: currentColor;
}
/* caption under a table */
.blog-article .entry-content .wp-block-table figcaption {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	font-style: italic;
	color: var(--black-77, #595959);
	text-align: left;
}
/* the editor's "Stripes" style looks the same (rows are already tinted) */
.blog-article .entry-content .wp-block-table.is-style-stripes {
	border-bottom: 0;
}
/* phones and tablets (post column about 345 px): tables with 4 or more columns keep readable columns and scroll
   sideways inside their box instead of squeezing the text */
@media (max-width: 991px) {
	.blog-article .entry-content .wp-block-table > table:has(tr > :nth-child(4)) {
		min-width: 440px;
	}
	.blog-article .entry-content .wp-block-table > table:has(tr > :nth-child(5)) {
		min-width: 540px;
	}
	.blog-article .entry-content .wp-block-table > table:has(tr > :nth-child(6)) {
		min-width: 640px;
	}
}
/* very small phones: an old table outside that box (the worksheet inside a list) scrolls inside itself, so it never
   makes the page wider */
@media (max-width: 359px) {
	.blog-article .entry-content :not(.wp-block-table) > table {
		display: block;
		overflow-x: auto;
	}
	/* and a little less side spacing, so 3-column tables still fit */
	.blog-article .entry-content td,
	.blog-article .entry-content th,
	.blog-article .entry-content table > thead > tr > *,
	.blog-article .entry-content table > tbody:first-child > tr:first-child > * {
		padding-left: 5px;
		padding-right: 5px;
	}
	.blog-article .entry-content table > thead > tr > *,
	.blog-article .entry-content table > tbody:first-child > tr:first-child > * {
		letter-spacing: 0;
	}
}
@media (min-width: 768px) {
	.blog-article .entry-content table {
		font-size: 14px;
	}
	.blog-article .entry-content .wp-block-table figcaption {
		font-size: 14px;
	}
}
/* laptops 992-1259 px (post column 455 px): tablet text sizes with tighter side spacing, so a 5-column table fits */
@media (min-width: 992px) and (max-width: 1259px) {
	.blog-article .entry-content td,
	.blog-article .entry-content th {
		padding: 8px 6px;
	}
	.blog-article .entry-content table > thead > tr > *,
	.blog-article .entry-content table > tbody:first-child > tr:first-child > * {
		padding: 10px 6px;
	}
}
/* wide screens (post column 585 px): text close to the post text, more air */
@media (min-width: 1260px) {
	.blog-article .entry-content table {
		font-size: 15px;
	}
	.blog-article .entry-content td,
	.blog-article .entry-content th {
		padding: 10px 12px;
	}
	.blog-article .entry-content table > thead > tr > *,
	.blog-article .entry-content table > tbody:first-child > tr:first-child > * {
		padding: 12px;
		font-size: 13px;
	}
}