/* =========================================================================
* Matthew Costa (Child) — overrides on top of bm-starter + bmuller-blocks
*
* Version 1.1.0
* Requires: bmuller-blocks >= 1.6.0
*
* The "multi-line headline workaround" from v1.0.0 is GONE. With
* bmuller-blocks 1.6.0, headlines render real
tags via wp_kses on
* fields marked allow_inline_html=true. Line breaks now live in the
* content data itself ("Line one.
Line two."), so no CSS rule is needed
* to make \n collapse — we don't use \n anymore.
* ========================================================================= */
/* -------------------------------------------------------------------------
* Hero stacked headline — smaller than bm-starter default.
*
* Matt's standalone uses clamp(28px, 3.2vw, 44px) for the H1, deliberately
* understated. The bm-starter default is much larger (ranges up to ~68px
* on desktop). Override to match the design.
* ------------------------------------------------------------------------- */
.bm-hero-stacked-headline {
font-size: clamp(28px, 3.2vw, 44px) !important;
line-height: 1.05 !important;
letter-spacing: -0.035em !important;
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
/* -------------------------------------------------------------------------
* Subtle paper-grain texture across the body.
*
* Matt's standalone has a fixed paper-grain noise overlay at 35% opacity.
* Replicate with the same SVG noise filter.
* ------------------------------------------------------------------------- */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.35;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* Make sure block content sits above the grain layer */
.wp-site-blocks,
header.wp-block-template-part,
footer.wp-block-template-part,
main {
position: relative;
z-index: 2;
}
header.bms-nav-open{ z-index:200; }
/* =========================================================================
* Recipes & Research — archive + single styles
*
* Pairs with templates/archive-recipes.html, taxonomy-books.html,
* archive-research.html, single-recipes.html, single-research.html and the
* [mc_book_pills] shortcode in inc/recipe-archive-ui.php.
*
* Uses existing theme.json tokens only — no new colours or fonts introduced.
* Append to assets/css/child-overrides.css (already enqueued), or enqueue
* this file separately from functions.php.
* ========================================================================= */
/* Archive intro spacing -------------------------------------------------- */
.mc-archive-hero {
padding-top: var(--wp--preset--spacing--xl);
padding-bottom: var(--wp--preset--spacing--sm);
}
/* Book pills ------------------------------------------------------------- */
.mc-pills-wrap {
margin-top:0;
margin-bottom: var(--wp--preset--spacing--lg);
}
.mc-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.mc-pill {
display: inline-flex;
align-items: center;
padding: 7px 16px;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 999px;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
line-height: 1;
color: var(--wp--preset--color--ink-2);
text-decoration: none;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.mc-pill:hover,
.mc-pill:focus-visible {
color: var(--wp--preset--color--accent);
border-color: var(--wp--preset--color--accent);
}
.mc-pill.is-active {
background: var(--wp--preset--color--ink);
border-color: var(--wp--preset--color--ink);
color: var(--wp--preset--color--bg);
}
/* List rows (shared by recipes + research) ------------------------------- */
.mc-list {
border-top: 1px solid var(--wp--preset--color--rule);
margin-top: var(--wp--preset--spacing--sm);
}
.mc-list-row {
position: relative;
padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
border-bottom: 1px solid var(--wp--preset--color--rule);
transition: background-color .2s ease;
}
.mc-list-row:hover {
background-color: var(--wp--preset--color--bg-card);
}
/* Arrow on the right. It's a flex item (the row is a flex container), so
* space-between pushes it to the edge. pointer-events:none lets the click
* fall through to the stretched title link below. */
.mc-list-row::after {
content: "→";
font-family: var(--wp--preset--font-family--headline);
font-size: var(--wp--preset--font-size--lg);
color: var(--wp--preset--color--ink-3);
pointer-events: none;
transition: transform .25s ease, color .25s ease;
}
.mc-list-row:hover::after {
transform: translateX(6px);
color: var(--wp--preset--color--accent);
}
.mc-list-title {
margin: 0;
font-family: var(--wp--preset--font-family--headline);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
}
.mc-list-title a {
color: var(--wp--preset--color--ink);
text-decoration: none;
}
.mc-list-row:hover .mc-list-title a {
color: var(--wp--preset--color--accent);
}
/* Stretch the title's link across the whole padded row so the entire row
* (and the arrow) is one click target. */
.mc-list-title a::after {
content: "";
position: absolute;
inset: 0;
}
/* Pagination ------------------------------------------------------------- */
.mc-pagination {
margin-top: var(--wp--preset--spacing--lg);
gap: var(--wp--preset--spacing--sm);
}
/* Single back-link ------------------------------------------------------- */
.mc-back-link {
margin-bottom: var(--wp--preset--spacing--sm);
font-size: var(--wp--preset--font-size--sm);
}
.mc-back-link a {
color: var(--wp--preset--color--ink-3);
text-decoration: none;
}
.mc-back-link a:hover {
color: var(--wp--preset--color--accent);
}
.mc-list-recipes li{ margin-top:0; }