/*
Theme Name: Mater Base
Theme URI: https://matercleaningservices.com/
Author: Mater Cleaning Services
Description: A deliberately minimal classic theme for the Mater plugin suite. It provides the document shell and the three navigation locations, and nothing else. All page design lives in mater-templates, so this theme should stay small: if you find yourself adding layout here, it probably belongs in the plugin.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mater-base
*/

/*
 * WHY THIS THEME EXISTS.
 *
 * Every WordPress default theme since 2022 is a block theme, and block themes ship no
 * header.php. A plugin template calling get_header() on one of those falls through to
 * wp-includes/theme-compat/header.php, which emits 2003-era markup, raises a deprecation
 * notice on every page load, and critically does NOT call wp_body_open() — so the entire
 * Mater primary navigation silently never rendered.
 *
 * With a classic theme installed the plugin's own header.php runs, wp_body_open() fires,
 * and the navigation appears. That is the whole job.
 *
 * There is almost no CSS here on purpose. mater-templates/assets/location.css carries the
 * design and is enqueued on every page the plugin owns. What follows is only what a
 * document needs before that stylesheet loads, plus sensible defaults for the handful of
 * pages the plugin does not own, such as blog posts.
 */

:root {
	--mater-ink: #1b2a3a;
	--mater-navy: #174a7e;
	--mater-max: 1180px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--mater-ink);
	background: #fff;
	/* Stops a long unbroken URL in post content forcing a horizontal scrollbar. */
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--mater-navy);
}

/*
 * Skip link. Visible only on focus, which is the point: a keyboard user landing on a page
 * with a large navigation should be able to jump past it, and a mouse user should never
 * see the control.
 */
.mater-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--mater-navy);
	color: #fff;
	text-decoration: none;
}

.mater-skip:focus {
	left: 0;
}

/* The default container, used only by pages the plugin does not template. */
.mater-shell {
	max-width: var(--mater-max);
	margin: 0 auto;
	padding: 40px 22px 60px;
}

.mater-shell h1,
.mater-shell h2,
.mater-shell h3 {
	font-family: Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--mater-navy);
	letter-spacing: -0.02em;
}

:focus-visible {
	outline: 3px solid var(--mater-navy);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}


/* ==========================================================================
 * THE BLOG. Archive, category archives, search and single posts.
 *
 * WHY THIS IS IN THE THEME AND NOT IN location.css.
 *
 * The plugin owns every page it has a template for and routes them through
 * template_include. It has no template for a post, a posts page or a taxonomy
 * archive, and it never will while the file editor cannot create files, so all
 * of them land on this theme's index.php. location.css is the plugin's
 * stylesheet and its rules are scoped to .mc-loc, which index.php does not and
 * must not carry: adopting that class would pull 276KB of section, hero and
 * band rules onto a layout that shares none of their structure. So the blog
 * carries its own, self-contained styles here, next to the markup they dress.
 *
 * SELF-CONTAINED ON PURPOSE. Every colour below is a literal from the approved
 * MaterBlog.dc.html / MaterBlogPost.dc.html files rather than a --mc-* token,
 * because the design tokens are declared on .mc-loc and .mc-hero and would
 * resolve to nothing out here. The two tokens that ARE on :root - the button
 * fill and the two shape settings written by MC_Templates::enqueue() - are read
 * WITH a fallback, so the Business Info > Appearance controls still reach the
 * blog and a missing token can never collapse a radius to zero.
 *
 * EVERY RULE IS PREFIXED WITH .mater-blog, which appears once, on <main>. That
 * is what makes the load order between this file and location.css irrelevant:
 * the two stylesheets select disjoint subtrees, so neither can win or lose
 * against the other.
 * ========================================================================== */

.mater-blog {
	--mb-navy: #174a7e;
	--mb-blue: #2b8fe5;
	--mb-coral: var( --mc-coral-btn, #ff7a66 );
	--mb-coral-hi: var( --mc-coral-btn-hi, #f2634d );
	--mb-tint: #eaf6ff;
	--mb-tint-2: #d7ecff;
	--mb-ink: #253746;
	--mb-body: #33475a;
	--mb-muted: #607080;
	--mb-muted-2: #8a99a8;
	--mb-line: #c3d0da;
	--mb-h: var( --mc-font-h, Sora, system-ui, -apple-system, "Segoe UI", sans-serif );

	color: var( --mb-ink );
	display: block;
}

.mater-blog h1,
.mater-blog h2,
.mater-blog h3 {
	font-family: var( --mb-h );
	color: var( --mb-navy );
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

.mater-blog p {
	margin: 0;
	text-wrap: pretty;
}

.mater-blog a {
	color: var( --mb-blue );
	text-decoration: none;
}

.mater-blog a:hover {
	color: var( --mb-navy );
}

/* min-width:0 on the grid children is what keeps a long unbroken title from
   widening a track and pushing the document past the viewport. */
.mater-blog__wrap {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
}

.mater-blog__wrap--art {
	max-width: 808px;
}

/* ---- Breadcrumb. Same visual language as the plugin's .mc-crumb, written out
   here because --mc-muted-2 and --mc-divider are declared on .mc-loc. ---- */
.mater-blog__crumb {
	font-size: 13.5px;
	color: var( --mb-muted );
	padding-top: 14px;
}

.mater-blog__crumb ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mater-blog__crumb li + li::before {
	content: "/";
	color: var( --mb-line );
	margin-inline-end: 8px;
}

.mater-blog__crumb a {
	color: var( --mb-muted );
	display: inline-block;
	padding: 11px 2px;
	min-width: 44px;
}

.mater-blog__crumb [aria-current="page"] {
	color: var( --mb-navy );
	font-weight: 600;
}

/* ---- Archive head ---- */
.mater-blog__head {
	max-width: 784px;
	padding-top: 30px;
	padding-bottom: 16px;
}

.mater-blog__eyebrow {
	display: inline-block;
	background: var( --mb-tint );
	color: var( --mb-blue );
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
}

.mater-blog__title {
	font-size: clamp( 34px, 5vw, 52px );
	line-height: 1.05;
	margin-top: 16px;
}

.mater-blog__intro {
	font-size: 18px;
	color: #4a5c6b;
	margin-top: 16px;
	line-height: 1.6;
}

/* ---- Category pills. Real links to real term archives. ---- */
.mater-blog__filters {
	padding-top: 20px;
	padding-bottom: 16px;
}

.mater-blog__filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mater-blog a.mater-blog__pill {
	display: inline-block;
	background: var( --mb-tint );
	color: var( --mb-navy );
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 16px;
	border-radius: 999px;
	line-height: 1.2;
}

.mater-blog a.mater-blog__pill:hover {
	background: var( --mb-tint-2 );
	color: var( --mb-navy );
}

.mater-blog a.mater-blog__pill[aria-current="page"] {
	background: var( --mb-navy );
	color: #fff;
}

.mater-blog a.mater-blog__pill[aria-current="page"]:hover {
	background: var( --mb-navy );
	color: #fff;
}

/* ---- Featured post ---- */
.mater-blog__featured {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 36px;
	align-items: center;
	padding-top: 20px;
	padding-bottom: 44px;
}

.mater-blog__featured > * {
	min-width: 0;
}

.mater-blog__shot {
	display: block;
	overflow: hidden;
	border-radius: var( --mc-img-radius, 24px );
	box-shadow: 0 18px 40px rgba( 23, 74, 126, 0.16 );
	aspect-ratio: 16 / 10;
	background: var( --mb-tint );
}

.mater-blog__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mater-blog__kicker {
	color: var( --mb-coral );
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: block;
}

.mater-blog__featured h2 {
	font-size: clamp( 24px, 3vw, 32px );
	margin-top: 12px;
	line-height: 1.15;
}

.mater-blog__featured h2 a {
	color: var( --mb-navy );
}

.mater-blog__featured h2 a:hover {
	color: var( --mb-blue );
}

.mater-blog__standfirst {
	font-size: 16px;
	color: #4a5c6b;
	margin-top: 12px;
	line-height: 1.6;
}

.mater-blog__byline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	font-size: 13.5px;
	color: var( --mb-muted );
}

.mater-blog__avatar {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	background: var( --mb-coral );
	color: #fff;
	font-family: var( --mb-h );
	font-weight: 700;
	display: grid;
	place-items: center;
	font-size: 13px;
}

.mater-blog a.mater-blog__more {
	display: inline-block;
	margin-top: 18px;
	font-family: var( --mb-h );
	font-weight: 700;
	color: var( --mb-coral );
}

.mater-blog a.mater-blog__more:hover {
	color: var( --mb-coral-hi );
}

/* ---- The grid ---- */
.mater-blog__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
	padding-bottom: 60px;
	list-style: none;
	margin: 0;
}

.mater-blog__card {
	min-width: 0;
}

.mater-blog__card a.mater-blog__cardlink {
	display: block;
	color: inherit;
	transition: transform 0.18s ease;
}

.mater-blog__card a.mater-blog__cardlink:hover {
	transform: translateY( -4px );
	color: inherit;
}

.mater-blog__thumb {
	overflow: hidden;
	border-radius: var( --mc-img-radius, 18px );
	aspect-ratio: 16 / 10;
	box-shadow: 0 10px 26px rgba( 23, 74, 126, 0.1 );
	background: var( --mb-tint );
}

.mater-blog__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mater-blog__cat {
	display: inline-block;
	margin-top: 14px;
	color: var( --mb-blue );
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mater-blog__card h3 {
	font-size: 19px;
	margin-top: 6px;
	line-height: 1.25;
}

.mater-blog__excerpt {
	font-size: 14px;
	color: var( --mb-muted );
	margin-top: 8px;
	line-height: 1.55;
}

.mater-blog__meta {
	font-size: 13px;
	color: var( --mb-muted-2 );
	margin-top: 12px;
}

/* ---- Pagination ---- */
.mater-blog .mater-blog__pagination {
	padding-bottom: 60px;
}

.mater-blog .mater-blog__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
}

.mater-blog .mater-blog__pagination .page-numbers {
	display: inline-block;
	min-width: 44px;
	text-align: center;
	padding: 11px 16px;
	border-radius: 999px;
	background: var( --mb-tint );
	color: var( --mb-navy );
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
}

.mater-blog .mater-blog__pagination .page-numbers.current {
	background: var( --mb-navy );
	color: #fff;
}

/* ---- The closing band ---- */
.mater-blog__band {
	padding-bottom: 76px;
}

.mater-blog__band-inner {
	background: var( --mb-tint );
	border-radius: var( --mc-img-radius, 28px );
	padding: 44px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

.mater-blog__band-inner h2 {
	font-size: clamp( 22px, 3vw, 30px );
}

.mater-blog__band-copy {
	max-width: 520px;
	min-width: 0;
}

.mater-blog__band-copy p {
	font-size: 16px;
	color: #4a5c6b;
	margin-top: 10px;
}

.mater-blog a.mater-blog__btn {
	display: inline-block;
	background: var( --mb-coral );
	color: #fff;
	font-family: var( --mb-h );
	font-weight: 700;
	font-size: 16px;
	padding: 15px 28px;
	border-radius: var( --mc-btn-radius, 999px );
}

.mater-blog a.mater-blog__btn:hover {
	background: var( --mb-coral-hi );
	color: #fff;
}

.mater-blog a.mater-blog__btn--ghost {
	background: #fff;
	color: var( --mb-navy );
	font-size: 15px;
	padding: 13px 22px;
}

.mater-blog a.mater-blog__btn--ghost:hover {
	background: var( --mb-tint-2 );
	color: var( --mb-navy );
}

/* ---- Single post ---- */
.mater-blog__article {
	padding-top: 26px;
	padding-bottom: 20px;
}

.mater-blog__article .mater-blog__title {
	font-size: clamp( 32px, 4.6vw, 48px );
	line-height: 1.08;
	margin-top: 12px;
}

.mater-blog__article .mater-blog__byline {
	font-size: 14px;
	gap: 11px;
	margin-top: 18px;
}

.mater-blog__article .mater-blog__avatar {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	font-size: 15px;
}

.mater-blog__byline b {
	color: var( --mb-navy );
}

.mater-blog__hero {
	overflow: hidden;
	border-radius: var( --mc-img-radius, 22px );
	aspect-ratio: 16 / 9;
	margin-top: 24px;
	box-shadow: 0 18px 40px rgba( 23, 74, 126, 0.16 );
	background: var( --mb-tint );
}

.mater-blog__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mater-blog__body p {
	font-size: 17.5px;
	line-height: 1.75;
	color: var( --mb-body );
	margin-top: 18px;
}

.mater-blog__body h2 {
	font-size: clamp( 24px, 3vw, 30px );
	margin-top: 38px;
}

.mater-blog__body h3 {
	font-size: 20px;
	margin-top: 26px;
}

.mater-blog__body ul,
.mater-blog__body ol {
	margin-top: 16px;
	padding-left: 22px;
	color: var( --mb-body );
	font-size: 17px;
	line-height: 1.7;
}

.mater-blog__body li {
	margin-top: 8px;
}

.mater-blog__body img {
	border-radius: var( --mc-img-radius, 16px );
	margin-top: 24px;
}

.mater-blog__body figure {
	margin: 24px 0 0;
}

.mater-blog__body figcaption {
	font-size: 14px;
	color: var( --mb-muted );
	margin-top: 8px;
}

.mater-blog__body blockquote {
	margin: 24px 0 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var( --mb-coral );
	color: var( --mb-body );
}

/* ---- The inline call to action ---- */
.mater-blog__cta {
	background: var( --mb-tint );
	border-radius: var( --mc-img-radius, 20px );
	padding: 26px;
	margin-top: 34px;
}

.mater-blog__cta h2 {
	font-size: 20px;
	font-weight: 800;
}

.mater-blog__cta p {
	font-size: 15.5px;
	color: #4a5c6b;
	margin-top: 8px;
	line-height: 1.6;
}

.mater-blog__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

/* ---- Keep reading ---- */
.mater-blog__related {
	padding-top: 44px;
	padding-bottom: 76px;
}

.mater-blog__related h2 {
	font-size: 22px;
}

.mater-blog__related ul {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.mater-blog__related a {
	display: flex;
	gap: 16px;
	align-items: center;
	border: 1.5px solid var( --mb-tint );
	border-radius: var( --mc-img-radius, 16px );
	padding: 14px;
	color: inherit;
}

.mater-blog__related a:hover {
	border-color: var( --mb-coral );
	background: #fffaf9;
	color: inherit;
}

.mater-blog__related-thumb {
	width: 88px;
	height: 66px;
	flex: 0 0 88px;
	border-radius: var( --mc-img-radius, 11px );
	overflow: hidden;
	background: var( --mb-tint );
}

.mater-blog__related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mater-blog__related-cat {
	color: var( --mb-blue );
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mater-blog__related-title {
	font-family: var( --mb-h );
	font-weight: 700;
	color: var( --mb-navy );
	font-size: 16px;
	margin-top: 3px;
}

.mater-blog__empty {
	padding-top: 30px;
	padding-bottom: 76px;
}

.mater-blog__empty p {
	margin-top: 12px;
	color: var( --mb-muted );
}

@media ( max-width: 1000px ) {

	.mater-blog__featured {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}

	.mater-blog__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 820px ) {

	.mater-blog__band-inner {
		padding: 30px;
	}
}

@media ( max-width: 640px ) {

	.mater-blog__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.mater-blog__wrap {
		padding: 0 18px;
	}

	.mater-blog__related a {
		align-items: flex-start;
	}

	.mater-blog__related-thumb {
		width: 72px;
		height: 60px;
		flex: 0 0 72px;
	}
}

/* ----------------------------------------------------------------------------
 * The card, the related row and the byline are built from <span>s inside a
 * single <a>, because one link wrapping the whole card is what makes the whole
 * card clickable without nesting a link inside a link. Spans are inline by
 * default, so every one that has to behave like a line of its own is told to.
 * -------------------------------------------------------------------------- */
.mater-blog__thumb,
.mater-blog__excerpt,
.mater-blog__meta,
.mater-blog__related-thumb,
.mater-blog__related-cat,
.mater-blog__related-title {
	display: block;
}

.mater-blog__related a > span:last-child {
	min-width: 0;
}

.mater-blog__card h3 a {
	color: var( --mb-navy );
}

/* ----------------------------------------------------------------------------
 * SPECIFICITY, MEASURED RATHER THAN ASSUMED.
 *
 * .mater-blog a sets the body-copy link colour at (0,1,1). Every component above
 * that is itself an <a> - the pills, the coral buttons, the "Read the guide"
 * link and the category eyebrow on a post - was written as a single class at
 * (0,1,0) and LOST to it: the coral button rendered with blue text on coral,
 * and an inactive pill rendered blue on the pale tint. Both were measured with
 * getComputedStyle rather than eyeballed, which is the only reason they were
 * caught at all.
 *
 * The fix is the a.<class> form, which reaches (0,2,1) and beats the generic
 * rule outright rather than relying on source order. The eyebrow below is the
 * same rule for the one place it is a link.
 * -------------------------------------------------------------------------- */
.mater-blog a.mater-blog__kicker {
	color: var( --mb-coral );
}

.mater-blog a.mater-blog__kicker:hover {
	color: var( --mb-coral-hi );
}

/* ----------------------------------------------------------------------------
 * THE BYLINE, HARDENED AGAINST CONTENT IT WAS NEVER SIZED FOR.
 *
 * .mater-blog__byline is a flex row: avatar, then one <span> carrying the
 * author name, the date and the read time. That span is a flex item, and a flex
 * item's min-width defaults to auto, which refuses to shrink below its longest
 * unbreakable run. A 100-character surname or a long URL therefore pushed the
 * row - and with it the article and the document - wider than the viewport.
 * Measured before the fix at 390px: html scrollWidth 786 against clientWidth
 * 390 for a 103-character name, and 1744 against 390 for a bio ending in a
 * 200-character URL.
 *
 * min-width: 0 lets it shrink; overflow-wrap: anywhere gives the shrunken box
 * somewhere to break. Both are needed - either one alone still overflows.
 *
 * The avatar is pinned to the top of the row rather than its centre, because
 * centring a 38px circle against a ten-line bio parks it halfway down the
 * paragraph. The padding-top on the text puts the first line back on the
 * avatar's centre line: half the difference between the avatar and one line of
 * text, written as calc so it tracks the font size instead of being a constant
 * that goes stale. Single-line bylines therefore render exactly as before -
 * measured at 38px tall, avatar centre within 0.56px of the first-line centre.
 * -------------------------------------------------------------------------- */
.mater-blog__byline {
	align-items: flex-start;
	flex-wrap: nowrap;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.mater-blog__byline > .mater-blog__avatar {
	flex: 0 0 32px;
	align-self: flex-start;
}

.mater-blog__article .mater-blog__byline > .mater-blog__avatar {
	flex: 0 0 38px;
}

.mater-blog__byline > :not( .mater-blog__avatar ) {
	min-width: 0;
	flex: 1 1 auto;
	display: block;
	overflow-wrap: anywhere;
	line-height: 1.65;
	padding-top: calc( ( 32px - 1.65em ) / 2 );
}

.mater-blog__article .mater-blog__byline > :not( .mater-blog__avatar ) {
	padding-top: calc( ( 38px - 1.65em ) / 2 );
}