/*
Theme Name: Eugenia-C Maison
Theme URI: https://eugenia-c.com/
Author: Eugenia-C Design
Description: A quiet, gallery-like block theme for Eugenia-C Design: full-bleed imagery, restrained type and generous white space.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eugenia-maison
*/

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
a { text-underline-offset: .25em; text-decoration-thickness: 1px; }

.ec-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Understated text link used in place of buttons */
.ec-cta a,
a.ec-cta {
	display: inline-block;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .04em;
	text-decoration: underline;
	text-underline-offset: .45em;
	transition: opacity .2s ease;
}
.ec-cta a:hover { opacity: .6; }
.ec-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.ec-cta-row > * { margin: 0 !important; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.ec-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 64px;
	padding-inline: var(--wp--preset--spacing--gutter);
}
.ec-header__inner > * { margin: 0 !important; }
.ec-header__left { justify-self: start; gap: 1.25rem; }
.ec-header__right { justify-self: end; gap: 1.75rem; }
.ec-header__right p { margin: 0; font-size: var(--wp--preset--font-size--small); }
.ec-header__right a { color: inherit; text-decoration: none; }
.ec-header__right a:hover { text-decoration: underline; }

.ec-wordmark {
	margin: 0;
	font-size: clamp(1.05rem, 1.6vw, 1.4rem);
	font-weight: 400;
	letter-spacing: .32em;
	text-transform: uppercase;
	line-height: 1;
	/* optical centring: compensate for trailing letter-spacing */
	padding-left: .32em;
}
.ec-wordmark a { color: inherit; text-decoration: none; }

/* Hamburger with a "Menu" label */
.ec-menu .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.ec-menu .wp-block-navigation__responsive-container-open::after { content: "Menu"; }

/* Overlay as a left-hand drawer */
.ec-menu .wp-block-navigation__responsive-container.is-menu-open {
	inset: 0 auto 0 0;
	width: min(440px, 100vw);
	padding: 1.25rem var(--wp--preset--spacing--gutter) 2rem;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: 0 0 0 100vmax rgba(28, 24, 20, .35);
	animation: ec-drawer .35s cubic-bezier(.2, .7, .2, 1);
}
@keyframes ec-drawer { from { transform: translateX(-100%); } to { transform: none; } }
.ec-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem !important;
	align-items: flex-start !important;
}
.ec-menu .is-menu-open .wp-block-navigation__container {
	gap: 1.1rem !important;
	align-items: flex-start !important;
}
.ec-menu .is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	padding: 0 !important;
}
.ec-menu .is-menu-open .wp-block-navigation-item__content:hover { text-decoration: underline; }
.ec-menu .wp-block-navigation__responsive-container-close { top: 1.25rem; left: 0; right: auto; }
.ec-menu .wp-block-navigation__responsive-container-close::after { content: "Close"; font-size: var(--wp--preset--font-size--small); margin-left: .5rem; }
.ec-menu .wp-block-navigation__responsive-container-close { display: inline-flex; align-items: center; }

.ec-header .wp-block-search__button {
	background: none;
	border: 0;
	color: inherit;
	padding: 0;
	margin: 0;
}
.ec-header .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }
.ec-header .wp-block-search__inside-wrapper { border: 0; padding: 0; }
.ec-header .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
}

/* Transparent header over the front-page hero */
.home .site-header {
	position: fixed;
	inset: 0 0 auto 0;
	background: transparent;
	color: #fff;
}
.home .site-header.is-solid,
.home .site-header:hover,
.home .site-header:focus-within {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}
body:not(.home) .site-header { box-shadow: 0 1px 0 var(--wp--preset--color--line); }

/* Keep the header below the admin bar when logged in (the bar scrolls away on small screens) */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } .home.admin-bar .site-header { position: absolute; top: 46px; } }

@media (max-width: 781px) {
	.ec-header__right .ec-hide-mobile { display: none; }
	.ec-menu .wp-block-navigation__responsive-container-open::after { content: none; }
	.ec-wordmark { letter-spacing: .24em; padding-left: .24em; }
}

/* ---------- Hero ---------- */
.ec-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	color: #fff;
	overflow: hidden;
}
.ec-hero__media {
	position: absolute !important; /* the editor sets every block to position: relative */
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.ec-hero__media > * { margin: 0 !important; height: 100%; }
.ec-hero__media img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
.ec-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.38) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%);
	pointer-events: none;
}
.ec-hero__caption {
	position: absolute !important;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 0 var(--wp--preset--spacing--gutter) clamp(2.5rem, 8vh, 5rem);
	text-align: center;
}
.ec-hero__caption > * { margin-block: 0; }
.ec-hero__caption h1 {
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 400;
	letter-spacing: .01em;
	margin-bottom: .6rem;
}
.ec-hero__caption p:not(.ec-cta) { font-size: var(--wp--preset--font-size--small); opacity: .9; margin-bottom: 1.4rem; }
.ec-hero__caption .ec-cta a { color: #fff; }

@media (max-width: 781px) {
	.ec-hero__media { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

/* ---------- Sections ---------- */
.ec-section { padding-block: var(--wp--preset--spacing--section); padding-inline: var(--wp--preset--spacing--gutter); }
.ec-section-title {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	margin: 0 auto .75rem;
}
.ec-section-lede {
	text-align: center;
	max-width: 36rem;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Hides the top of a photo (the current product shots have titles baked into the top).
 * Remove the "ec-crop-top" class from the image block once clean photography is in place.
 */
.wp-block-image.ec-crop-top { position: relative; overflow: hidden; }
.wp-block-image.ec-crop-top img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 145% !important;
	object-fit: cover;
	object-position: center bottom;
}
.wp-block-image.ec-crop-top.ec-focus-left img { object-position: 15% bottom; }
/* Editor: let the image escape the resize handle wrapper so the crop matches the front end */
.ec-hero__media .components-resizable-box__container,
.wp-block-image.ec-crop-top .components-resizable-box__container {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
}

/* Tool Room category index */
.ec-index {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem var(--wp--preset--spacing--gutter);
	max-width: var(--wp--style--global--wide-size);
	margin: 3.5rem auto 3rem !important;
}
.ec-index > * {
	margin: 0 !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
}
.ec-index h3 { font-size: var(--wp--preset--font-size--medium); font-weight: 400; margin: .5rem 0 1rem; }
.ec-index .ec-eyebrow { margin: 0; }
.ec-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ec-index li { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
@media (max-width: 1023px) { .ec-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ec-index { grid-template-columns: 1fr; } }

/* Full-bleed feature: image + text panel */
.ec-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 80vh;
	background: var(--wp--preset--color--stone);
}
.ec-feature > * { margin: 0 !important; }
.ec-feature .wp-block-image { margin: 0; height: 100%; }
.ec-feature .wp-block-image img { width: 100%; height: 100% !important; object-fit: cover; min-height: 420px; }
.ec-feature__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter);
}
.ec-feature__text > * { max-width: 30rem; margin-block: 0 !important; }
.ec-feature__text h2 { font-size: var(--wp--preset--font-size--x-large); font-weight: 400; margin-block: .9rem 1.1rem !important; }
.ec-feature__text p:not(.ec-eyebrow):not(.ec-cta) { color: var(--wp--preset--color--muted); margin-bottom: 1.75rem !important; }
.ec-feature--reverse .wp-block-image { order: 2; }

@media (max-width: 781px) {
	.ec-feature { grid-template-columns: 1fr; min-height: 0; }
	.ec-feature--reverse .wp-block-image { order: 0; }
	.ec-feature .wp-block-image img { aspect-ratio: 4 / 5; min-height: 0; height: auto !important; }
}

/* Product-style gallery grid */
.ec-grid .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--grid) !important;
	margin-top: 3rem;
}
.ec-grid .wp-block-gallery .wp-block-image {
	width: auto !important;
	margin: 0 !important;
	background: var(--wp--preset--color--stone);
	overflow: hidden;
}
.ec-grid .wp-block-gallery .wp-block-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.ec-grid .wp-block-gallery .wp-block-image:hover img { transform: scale(1.04); }
@media (max-width: 1023px) { .ec-grid .wp-block-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Story */
.ec-story { text-align: center; }
.ec-story > * { max-width: 40rem; margin-inline: auto !important; }
.ec-story h2 { font-size: var(--wp--preset--font-size--x-large); font-weight: 400; margin-block: .9rem 1.5rem; }
.ec-story p:not(.ec-eyebrow):not(.ec-cta) { color: var(--wp--preset--color--muted); }

/* Services row */
.ec-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--grid);
	margin-top: 3rem !important;
}
.ec-services > * {
	margin: 0 !important;
	padding: 2.5rem 1.5rem;
	background: var(--wp--preset--color--stone);
	text-align: center;
}
.ec-services h3 { font-size: var(--wp--preset--font-size--medium); font-weight: 400; margin: 0 0 .6rem; }
.ec-services p:not(.ec-cta) { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: 0 0 1.25rem; }
@media (max-width: 781px) { .ec-services { grid-template-columns: 1fr; } }

/* Video tutorials grid (page pattern) */
.ec-videos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem var(--wp--preset--spacing--grid);
	margin-top: 3rem !important;
}
.ec-videos > * { margin: 0 !important; }
.ec-videos figure { margin: 0; }
.ec-videos figcaption { font-size: var(--wp--preset--font-size--small); text-align: center; margin-top: 1rem; }
@media (max-width: 781px) { .ec-videos { grid-template-columns: 1fr; } }

/* Full-bleed page content (homepage and the "Full-width page" template): sections sit edge to edge */
.ec-flush > * { margin-block: 0 !important; }

/* ---------- Inner pages ---------- */
.ec-page-head { text-align: center; padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter) 2rem; }
.ec-page-head h1 { font-size: var(--wp--preset--font-size--xx-large); font-weight: 400; margin: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--wp--preset--color--line); }
.ec-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	padding: 4rem var(--wp--preset--spacing--gutter) 3rem;
}
.ec-footer__cols > * { margin: 0 !important; }
.ec-footer__cols h2 {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
}
.ec-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ec-footer__cols a { color: var(--wp--preset--color--muted); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.ec-footer__cols a:hover { color: var(--wp--preset--color--contrast); text-decoration: underline; }
.ec-footer__cols p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: 0; }
.ec-footer__mark {
	text-align: center;
	padding: 2rem var(--wp--preset--spacing--gutter) 2.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.ec-footer__mark > * { margin: 0 !important; }
.ec-footer__mark .ec-wordmark { font-size: clamp(1.4rem, 3vw, 2rem); }
.ec-footer__mark p:last-child { margin-top: 1rem !important; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--x-small); }
@media (max-width: 781px) { .ec-footer__cols { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}