/*
Theme Name: Matt's Decorating
Theme URI: http://localhost:8090
Author: Miles Clark
Description: Block theme for Matt's Painting, Decorating & Tiling Services of Lenwade, Norfolk. A calm, white-space-led layout in warm paper, terracotta and ink.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matts-decorating
Tags: full-site-editing, business, one-column, block-patterns
*/

/* Most styling lives in theme.json. Only what the editor cannot express belongs here. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------- header --- */

/* The header follows you down the page - the phone number is the whole point
   of this site, so it should never be more than a glance away. */
.mpd-header {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* The frosted-glass backdrop lives on a pseudo-element, not on .mpd-header
   itself, because backdrop-filter (like transform/filter/perspective/
   will-change) makes an element a new "containing block" for any descendant
   with position:fixed. The mobile nav's full-screen menu is exactly that
   (WordPress's own .wp-block-navigation__responsive-container uses
   position:fixed to cover the viewport) and it sits inside .mpd-header - with
   the filter on .mpd-header directly, that menu was pinned to the header's
   own small box instead of the screen, so opening it showed a short dark bar
   with only a couple of items in it rather than the full menu. */
.mpd-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	background-color: rgba(252, 251, 249, 0.88);
}

.mpd-site-title a,
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

/* The full business name and the icon mark trade places at 1226px: above it
   there is room to spell the name out next to the nav, at or below it the
   icon carries the brand instead so the nav has room to breathe. */
.mpd-site-icon-link {
	display: none;
}

@media (max-width: 1226px) {
	.mpd-site-title {
		display: none;
	}

	.mpd-site-icon-link {
		display: block;
		line-height: 0;
	}
}

/* At 827px and narrower the icon goes too, leaving just the nav and the phone
   button - there isn't a good reason given for this one, so taking it as a
   deliberate "brand mark off, hamburger + call button only" choice for the
   narrowest header rather than second-guessing it. */
@media (max-width: 827px) {
	.mpd-site-icon-link {
		display: none;
	}
}

/* Core's own breakpoint for collapsing the nav into the hamburger toggle is a
   hardcoded 600px (wp-includes/blocks/navigation/style.css). Pin it to 744px
   instead, so the six links give way to the toggle sooner rather than
   crowding the header right up until 600px. */
@media (max-width: 744px) {
	.mpd-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.mpd-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

/* Nav links grow an underline from the middle rather than blinking one on. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--clay);
	transition: left 0.22s ease, right 0.22s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	left: 0;
	right: 0;
}

/* The overlay menu inherits the dark canvas, so undo the middle-grow underline
   there - it reads as a stray hairline at that size. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* The phone number in the header: a link that behaves like a quiet button. */
.mpd-phone a {
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mpd-phone a:hover {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* --------------------------------------------------------------- eyebrow --- */

/* Small caps label that sits above a heading. Used all over the content. */
.mpd-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	margin-bottom: 0.6rem !important;
}

/* --------------------------------------------------------------- buttons --- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	background-color: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--chalk);
}

/* On the dark sections the outline needs to invert. */
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--chalk);
	color: var(--wp--preset--color--chalk);
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--chalk);
	color: var(--wp--preset--color--ink);
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ----------------------------------------------------------------- cards --- */

/* A pale panel used for service cards and the contact details block. */
.mpd-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mpd-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -28px rgba(23, 32, 31, 0.5);
}

/* Cards sit side by side, so their photographs have to share a shape. Matt's own
   photos are a mix of portrait and landscape and without this the two headings
   below them land at completely different heights. */
.mpd-card .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* ---------------------------------------------------------------- images --- */

.mpd-gallery .wp-block-image img,
.mpd-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Keep gallery tiles to a consistent shape whatever the photo's own ratio is. */
.mpd-gallery .wp-block-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}

.mpd-gallery .wp-block-image img {
	transition: transform 0.5s ease;
}

.mpd-gallery .wp-block-image:hover img {
	transform: scale(1.04);
}

/* Portrait-shaped feature image, used beside the hero and on About. */
.mpd-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	border-radius: 4px;
}

@media (max-width: 781px) {
	.mpd-portrait img {
		aspect-ratio: 3 / 2;
	}
}

/* A logo (unlike a photograph) has a deliberate relationship between its mark
   and the empty space around it - it should never be arbitrarily cropped to
   fill a box. This drops .mpd-portrait's forced aspect-ratio/cover crop and
   lets the image keep its own proportions instead, so nothing is ever trimmed
   off any edge at any width. Without this, MattsLogoPortrait.jpg (mostly
   blank space below the mark) got cut across the top at the 781px breakpoint,
   where .mpd-portrait switches to a wide, short 3:2 box. */
.mpd-portrait.mpd-uncropped img {
	aspect-ratio: auto;
	object-fit: contain;
	height: auto;
}

/* At 1150px and narrower, run the home page hero as one column - heading and
   copy on top, the logo underneath - rather than side by side. Above 1150px it
   stays exactly as it was: text and logo side by side. */
@media (max-width: 1150px) {
	.mpd-hero-columns {
		flex-direction: column;
	}

	.mpd-hero-columns > .wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* The text column reads oddly left-aligned once it spans the full stacked
	   width - the eyebrow and heading run edge to edge while the width-capped
	   lead/measure paragraphs stay pinned to the left, out of step with them.
	   Centring the column, and centring the capped paragraphs within it, brings
	   everything onto one shared middle line instead. */
	.mpd-hero-columns > .wp-block-column:first-child {
		text-align: center;
	}

	.mpd-hero-columns > .wp-block-column:first-child .mpd-lead,
	.mpd-hero-columns > .wp-block-column:first-child .mpd-measure {
		margin-left: auto;
		margin-right: auto;
	}

	.mpd-hero-columns > .wp-block-column:first-child .wp-block-buttons {
		justify-content: center;
	}

	.mpd-hero-columns .mpd-uncropped {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------------- typography --- */

/* A lead paragraph: larger, looser, deliberately short. */
.mpd-lead {
	line-height: 1.6;
	max-width: 34ch;
}

.mpd-measure {
	max-width: 62ch;
}

/* Section and page intros: a narrow column of text that keeps the same left edge as
   the full-width content below it. Constraining the wrapper instead would centre the
   text block inside the wide container, which reads as a misalignment rather than as
   a deliberate choice. The !important is to beat WordPress's own constrained-layout
   rule, which sets `margin-left: auto !important` on children. */
.mpd-intro > * {
	max-width: 46rem;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Centred intros are a deliberate, separate treatment - leave those alone. */
.mpd-intro > .has-text-align-center {
	max-width: none;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Tabular figures wherever a price or a phone number appears in body copy. */
.mpd-nums {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ misc --- */

.mpd-hairline {
	border-top: 1px solid var(--wp--preset--color--stone);
}

/* ---------------------------------------------------------------- footer --- */

/* The email address is one long unbreakable token and the footer columns are
   narrow. Without this it splits mid-word ("mattsdecorating.c / o.uk"). */
.mpd-footer a {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Social icons: the social-links block sizes its icons in em off its own
   font-size, so this one rule covers both places it appears (footer and the
   mobile nav overlay below) - core's own default is 24px, this is 44px. */
.mpd-social {
	font-size: 44px;
}

/* The nav overlay's copy of the icons (see parts/header.html) is part of the
   same list as the page links, so it is always in the markup - but it should
   only actually show once that list has become the opened full-screen menu,
   never as an extra item sitting in the plain inline row on desktop. */
.mpd-nav-social {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .mpd-nav-social {
	display: flex !important;
}

/* Respect the reader who has asked the OS for less movement. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.mpd-card:hover {
		transform: none;
	}

	.mpd-gallery .wp-block-image:hover img {
		transform: none;
	}
}