/*
DEECO blog front-end styles
Loaded by mu-plugins/deeco-blog-front-end-styles.php, after twentyten's
style.css and after core's block CSS.
*/


/* =Site typefaces
DESCRIPTION: The blog uses the same two faces as www.deecometals.com, served
from the main site's /fonts directory so there is one copy to maintain:
Roboto Medium for body copy, Mada for headings and interface text. This
replaces twentyten's Georgia serif and Helvetica Neue stacks.
-------------------------------------------------------------- */

@font-face {
	font-family: Mada;
	src: url(/fonts/Mada-Regular.woff2) format('woff2');
	font-weight: normal;
	font-display: swap;
}
@font-face {
	font-family: Mada;
	src: url(/fonts/Mada-SemiBold.woff2) format('woff2');
	font-weight: bold;
	font-display: swap;
}
@font-face {
	font-family: Mada;
	src: url(/fonts/Mada-Black.woff2) format('woff2');
	font-weight: 800;
	font-display: swap;
}
@font-face {
	font-family: Roboto;
	src: url(/fonts/Roboto-Medium.woff2) format('woff2');
	font-weight: normal;
	font-display: swap;
}
@font-face {
	font-family: Roboto;
	src: url(/fonts/Roboto-Bold.woff2) format('woff2');
	font-weight: bold;
	font-display: swap;
}

/* Body copy, replacing the theme's Georgia stack. */
body,
input,
textarea,
select,
button,
.page-title span,
.pingback a.url {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

/* Headings and interface text, replacing the theme's Helvetica Neue stack. */
h1,
h2,
h3,
h4,
h5,
h6,
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#site-description,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {
	font-family: 'Mada', Arial, Helvetica, sans-serif;
}

/* The theme's table rules name their own sans-serif stack; follow the site. */
#content table,
#content tr th,
#content thead th,
#content tr td {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
}


/* =Blog home page post grid
DESCRIPTION: The Latest Posts block that lists the posts on /blog.

Since the WordPress update the block's column count is no longer part of a
stylesheet: core generates it per page request as an inline rule keyed to a
hashed container class (.wp-container-core-latest-posts-is-layout-<hash>).
When that inline rule is missing from the served HTML - a cached copy of the
page, for instance - the list is still display:grid but has no columns
defined, so it falls back to one column and the posts stack, which is what the
client reported. Core's own CSS also drops the grid to a single column below a
600px viewport, which a zoomed-in browser window hits.

Pinning the columns here fixes both: the rules key off the block's own class
names, which are stable across updates, and the #content prefix keeps them
ahead of core's hashed container rule no matter which order the two are
printed in.
-------------------------------------------------------------- */

#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid) {
	display: grid;
	gap: 24px 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0 0 24px 0;
	padding: 0;
}

/* Follow the column count set on the block in the editor. */
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid).columns-1 {
	grid-template-columns: minmax(0, 1fr);
}
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid).columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid).columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid).columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid).columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid) > li {
	margin: 0;
	width: auto;
}

/* One image width per column, so the tops of the columns line up. */
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid) .wp-block-latest-posts__featured-image {
	margin: 0 0 8px 0;
}
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid) .wp-block-latest-posts__featured-image img {
	display: block;
	height: auto;
	width: 100%;
}

#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid) .wp-block-latest-posts__post-title {
	display: block;
	line-height: 18px;
}
#content ul.wp-block-latest-posts:is(.is-grid, .is-layout-grid) .wp-block-latest-posts__post-excerpt {
	margin: 8px 0 0 0;
}