/*
 * Inside posts and pages: text and heading sizes, separators, tables, embeds, and the GenerateBlocks boxes, buttons
 * and product boxes the posts were written with under today's theme.
 */
/* Reading size: larger text rather than a narrower column (the owner asked for wide posts). Lists and tables
   inherit it. */
.cc-article .cc-entry__content {
	font-size: var(--cc-size-post);
	line-height: var(--cc-line-reading);
}

.cc-entry--reading .cc-entry__content {
	font-size: var(--cc-size-page);
	line-height: var(--cc-line-reading);
}

/* Headings: a step below the page title, kept restrained (the owner found today's too large), with room above so
   each section starts clearly. The same size inside the posts' boxes. */
.cc-entry__content h2 {
	margin-top: var(--cc-space-7);
	font-size: var(--cc-size-content-h2);
}

.cc-entry__content h3 {
	margin-top: var(--cc-space-6);
	font-size: var(--cc-size-content-h3);
}

.cc-entry__content h4 {
	margin-top: var(--cc-space-6);
	font-size: var(--cc-size-content-h4);
	font-weight: 700;
}

:is(.cc-entry__content, .gb-container, .wp-block-group, .wp-block-column) > :is(h2, h3, h4):first-child {
	margin-top: 0;
}

/* Dividers: one thin grey line */
.cc-entry__content hr.wp-block-separator {
	height: 0;
	margin-block: var(--cc-space-6);
	border: 0;
	border-top: var(--cc-line) solid var(--cc-grey-200);
	background: none;
	opacity: 1;
}

/* Tables in posts (the shop's own tables keep theirs): grey lines between rows, a black line under the heading row,
   no lines between columns */
.cc-entry__content table:not(.shop_table) {
	width: 100%;
	border-collapse: collapse;
}

.cc-entry__content .wp-block-table :is(thead, tfoot) {
	border: 0;
}

.cc-entry__content table:not(.shop_table) :is(th, td) {
	padding: var(--cc-space-3) var(--cc-space-4) var(--cc-space-3) 0;
	border: 0;
	border-bottom: var(--cc-line) solid var(--cc-grey-200);
	text-align: left;
	vertical-align: top;
}

.cc-entry__content table:not(.shop_table) thead th {
	border-bottom-color: var(--cc-ink);
}

/* Phones: tighter columns, and long words may break at a hyphen, so a three-column table fits without scrolling */
@media (max-width: 599px) {
	.cc-entry__content table:not(.shop_table) :is(th, td) {
		padding-right: var(--cc-space-2);
		hyphens: auto;
	}
}

/* Pinterest pins are a fixed 450px wide; centred in the column */
.cc-entry__content .wp-block-embed-pinterest .wp-block-embed__wrapper {
	display: flex;
	justify-content: center;
}

/* Phones: the posts' boxes keep a small inner margin, without adding it again for boxes inside boxes */
@media (max-width: 719px) {
	.cc-entry__content .gb-container {
		padding-inline: var(--cc-space-3);
	}

	.cc-entry__content .gb-container .gb-container {
		padding-inline: 0;
	}
}

/* "Love these printables?" box: the same inner space at every width */
.cc-entry__content .featured-product-container {
	padding: var(--cc-space-5);
}

/* Freebie posts: each picture beside its description. Today's theme pushed the words 15px in; here they line up
   with the text above. Phones: the words above the picture, both full width. */
.cc-entry__content .wp-block-group.is-nowrap > .gb-container {
	padding-left: 0;
}

@media (max-width: 599px) {
	.cc-entry__content .wp-block-group.is-nowrap {
		flex-wrap: wrap;
	}

	.cc-entry__content .wp-block-group.is-nowrap > * {
		flex-basis: 100%;
		width: 100%;
		padding-right: 0;
	}
}

/* GenerateBlocks buttons (the book pages' "Paperback on Amazon", "Instant eBook Download"): the theme's solid
   button. Today's were dark grey with white words, so solid black is the match. */
.cc-entry__content .gb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cc-control-height);
	padding: 0 var(--cc-space-5);
	border: var(--cc-line) solid var(--cc-ink);
	border-radius: var(--cc-radius);
	background: var(--cc-ink);
	color: var(--cc-white);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-card);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.cc-entry__content .gb-button:is(:hover, :focus) {
	background: var(--cc-white);
	color: var(--cc-ink);
}

/*
 * Product boxes in posts ("Love these printables?", "Match and create", "Download all … free images", the book
 * pages' downloads, and any other product block in a post, as in the newest freebie posts). Today's theme shows
 * each product's linked name as a SHOP NOW or DOWNLOAD NOW button (its Customizer CSS, which stays with that
 * theme); the same here, in our button style. "Download now" only on free products (marked by
 * cc_theme_mark_product_block(), which also names the link "Download now: <name>" or "Shop now: <name>" for screen
 * readers, so what they hear starts with what is shown).
 */
.cc-entry__content :is(.featured-product-container, .two-premium-products, .download-all-images, .download-resources, .wp-block-woocommerce-single-product) .wp-block-post-title {
	margin: var(--cc-space-3) 0 var(--cc-space-5);
	line-height: 1;
}

.cc-entry__content :is(.featured-product-container, .two-premium-products, .download-all-images, .download-resources, .wp-block-woocommerce-single-product) .wp-block-post-title a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cc-control-height);
	padding: 0 var(--cc-space-5);
	border: var(--cc-line) solid var(--cc-ink);
	border-radius: var(--cc-radius);
	background: var(--cc-white);
	color: var(--cc-ink);
	font-size: 0;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.cc-entry__content :is(.featured-product-container, .two-premium-products, .download-all-images, .download-resources, .wp-block-woocommerce-single-product) .wp-block-post-title a::before {
	content: "Shop now";
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-card);
	font-weight: 600;
	line-height: 1.2;
}

.cc-entry__content .cc-product-block--free .wp-block-post-title a::before {
	content: "Download now";
}

.cc-entry__content :is(.featured-product-container, .two-premium-products, .download-all-images, .download-resources, .wp-block-woocommerce-single-product) .wp-block-post-title a:hover {
	background: var(--cc-ink);
	color: var(--cc-white);
}

/* Product rows in a post ([products columns="2"], P3-CNT-02): two across from 720px, as the post asks; the shop's grid
   would make them three, then four (190px cards) */
@media (min-width: 720px) {
	.cc-entry__content .woocommerce.columns-2 ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* "Match and create": two products side by side, each centred over its button, as today */
.cc-entry__content .two-premium-products .gb-grid-column {
	text-align: center;
}