/*
Theme Name: Liz Manette
Theme URI: https://liz-manette.local
Author: Liz Manette
Author URI: https://liz-manette.local
Description: A bespoke WooCommerce-first block theme for Liz Manette.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: liz-manette
Domain Path: /languages
Tags: woocommerce, block-theme, editor-style, custom-colors, responsive
*/

:root {
	/* Base colour palette */
	--white: #FFFFFF;
	--graphite: #423E3F;
	--white-2: #FFFFFF;
	--white-3: #FEFEFE;
	--dim-grey: #757474;

	/* Semantic aliases */
	--color-background: var(--white-3);
	--color-foreground: var(--graphite);
	--color-muted: var(--dim-grey);
	--color-surface: var(--white);
	--color-border: var(--dim-grey);

	/* Gradients */
	--gradient-top: linear-gradient(0deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-right: linear-gradient(90deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-bottom: linear-gradient(180deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-left: linear-gradient(270deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-top-right: linear-gradient(45deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-bottom-right: linear-gradient(135deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-top-left: linear-gradient(225deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-bottom-left: linear-gradient(315deg, #FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);
	--gradient-radial: radial-gradient(#FFFFFF, #423E3F, #FFFFFF, #FEFEFE, #757474);

	/* Typography */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-headings: var(--font-body);
	--line-height: 1.6;
	--font-size-base: 1rem;

	/* Spacing */
	--site-width: 75rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

a {
	color: var(--color-foreground);
	text-decoration: underline;
}

a:hover,
a:focus {
	color: var(--color-muted);
}

.is-layout-constrained,
.is-layout-flow {
	max-width: var(--site-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-sm);
	padding-right: var(--spacing-sm);
}

/* -----------------------------------------------------------------------
 * Static page content (page.html template)
 * ----------------------------------------------------------------------- */

.site-main {
	padding-top: 3rem;
	padding-bottom: 4rem;
}

.site-main .wp-block-post-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 600;
	color: var(--graphite);
	margin: 0 0 2rem;
	line-height: 1.2;
}

.site-main .entry-content,
.site-main .wp-block-post-content {
	max-width: 75rem;
}

.site-main .wp-block-post-content p,
.site-main .entry-content p {
	color: var(--graphite);
	line-height: 1.75;
	margin-bottom: 1.25rem;
}

.site-main .wp-block-post-content h2,
.site-main .wp-block-post-content h3,
.site-main .wp-block-post-content h4 {
	color: var(--graphite);
	margin-top: 2rem;
	margin-bottom: 1rem;
	line-height: 1.3;
}

/* -----------------------------------------------------------------------
 * Blog listing (home.html)
 * ----------------------------------------------------------------------- */

.lm-blog__grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
	margin-bottom: 3rem;
}

@media (max-width: 900px) {
	.lm-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.lm-blog__grid {
		grid-template-columns: 1fr;
	}
}

.lm-blog__card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.lm-blog__card-image img,
.lm-blog__card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 3px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.lm-blog__card-category .wp-block-post-terms a,
.lm-blog__card .wp-block-post-terms a {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim-grey);
	text-decoration: none;
}

.lm-blog__card-title a,
.lm-blog__card .wp-block-post-title a {
	font-size: 1rem;
	font-weight: 600;
	color: var(--graphite);
	text-decoration: none;
	line-height: 1.35;
}

.lm-blog__card-title a:hover,
.lm-blog__card .wp-block-post-title a:hover {
	color: var(--dim-grey);
}

.lm-blog__card-excerpt p,
.lm-blog__card .wp-block-post-excerpt p {
	font-size: 0.875rem;
	color: var(--dim-grey);
	line-height: 1.65;
	margin: 0;
}

.lm-blog__card-excerpt .wp-block-post-excerpt__more-link,
.lm-blog__card .wp-block-post-excerpt__more-link {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--graphite);
	text-decoration: none;
	display: inline-block;
	margin-top: 0.5rem;
}

.lm-blog__card-date,
.lm-blog__card .wp-block-post-date {
	font-size: 0.75rem;
	color: var(--dim-grey);
}

/* Pagination */
.lm-blog .wp-block-query-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-bottom: 2rem;
}

.lm-blog .wp-block-query-pagination a,
.lm-blog .wp-block-query-pagination-numbers a,
.lm-blog .wp-block-query-pagination-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	font-size: 0.8125rem;
	color: var(--graphite);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.lm-blog .wp-block-query-pagination-numbers .current {
	background: var(--graphite);
	color: #fff;
	border-color: var(--graphite);
}

/* -----------------------------------------------------------------------
 * Single blog post (single.html)
 * ----------------------------------------------------------------------- */

.lm-single-post {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}

.lm-single-post__hero img,
.lm-single-post .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 3px;
	margin-bottom: 2rem;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.lm-single-post__meta,
.lm-single-post .wp-block-post-date,
.lm-single-post .wp-block-post-terms {
	font-size: 0.75rem;
	color: var(--dim-grey);
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.lm-single-post__cat a,
.lm-single-post .wp-block-post-terms a {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim-grey);
	text-decoration: none;
}

.lm-single-post__title,
.lm-single-post .wp-block-post-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--graphite);
	margin: 0 0 2rem;
}

.lm-single-post .wp-block-post-content p {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--graphite);
	margin-bottom: 1.5rem;
}

.lm-single-post .wp-block-post-content h2,
.lm-single-post .wp-block-post-content h3 {
	font-weight: 600;
	color: var(--graphite);
	margin: 2.5rem 0 1rem;
	line-height: 1.3;
}

.lm-single-post .wp-block-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
	margin: 1.5rem 0;
}

.lm-single-post .wp-block-separator {
	border-color: #eeeceb;
	margin: 2.5rem 0;
}

.lm-single-post__footer {
	margin-top: 1.5rem;
}

.lm-single-post__tags a {
	font-size: 0.75rem;
	color: var(--dim-grey);
	text-decoration: none;
}

.lm-single-post .wp-block-post-navigation-link a {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--graphite);
	text-decoration: none;
}

.lm-single-post .wp-block-post-navigation-link a:hover {
	color: var(--dim-grey);
}