/*
 * Made by Calie: theme styles.
 *
 * Every colour, font and size here comes from theme.json presets, so
 * changing them in Appearance > Editor > Styles updates the whole site.
 * Animations live at the bottom and only run when the visitor allows motion
 * and "Animations" is switched on in Appearance > Theme options.
 */

:root {
	--mbc-base: var(--wp--preset--color--base);
	--mbc-surface: var(--wp--preset--color--surface);
	--mbc-text: var(--wp--preset--color--contrast);
	--mbc-muted: var(--wp--preset--color--muted);
	--mbc-accent: var(--wp--preset--color--accent);
	--mbc-ok: var(--wp--preset--color--success);
	--mbc-line: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	--mbc-heading: var(--wp--preset--font-family--heading);
	--mbc-body: var(--wp--preset--font-family--body);
	--mbc-r-sm: var(--wp--custom--radius--small, 12px);
	--mbc-r-md: var(--wp--custom--radius--medium, 20px);
	--mbc-r-lg: var(--wp--custom--radius--large, 24px);
	--mbc-ease: var(--wp--custom--motion--ease, cubic-bezier(.2, .7, .2, 1));
	--mbc-dur: var(--wp--custom--motion--duration, .8s);
	--mbc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11L11 5M6 5h5v5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- base */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wp-site-blocks > * { margin-block: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
section[id] { scroll-margin-top: 6rem; }
::selection { background: var(--mbc-accent); color: var(--mbc-base); }
mark.has-inline-color { background: none; }
.mbc-muted { color: var(--mbc-muted); }
:where(.wp-block-group.mbc-heading-stack) > * + * { margin-block-start: .75rem; }

.is-style-mbc-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mbc-accent);
}

.is-style-mbc-chip,
.mbc-chip-accent,
.mbc-chip-spec {
	display: inline-block;
	margin: 0;
	padding: .3rem .85rem;
	border: 1px solid var(--mbc-line);
	border-radius: 999px;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--mbc-muted);
}
.mbc-chip-accent {
	border-color: transparent;
	background: color-mix(in srgb, var(--mbc-accent) 16%, transparent);
	color: var(--mbc-accent);
	font-weight: 500;
}
.mbc-chip-accent:empty,
.mbc-chip-spec:empty { display: none; }

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

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 3.25rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--mbc-line);
	background: transparent;
	color: var(--mbc-text);
	font-weight: 500;
	padding-block: .85rem;
}
.wp-block-button.is-style-mbc-contrast > .wp-block-button__link {
	min-height: 2.75rem;
	padding: .55rem 1.25rem;
	background: var(--mbc-text);
	color: var(--mbc-base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.wp-block-button.is-style-mbc-arrow > .wp-block-button__link {
	min-height: 2.75rem;
	padding: 0;
	background: none;
	color: var(--mbc-accent);
	font-weight: 500;
	border-radius: 0;
}
.wp-block-button.is-style-mbc-arrow > .wp-block-button__link::after,
.mbc-big-link a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--mbc-arrow) center / contain no-repeat;
	mask: var(--mbc-arrow) center / contain no-repeat;
}
/* A project with no live link hides its button rather than linking nowhere. */
.wp-site-blocks .mbc-live:not(:has(a[href])) { display: none; }
/* In the Site Editor, hide placeholders for project fields that are empty. */
.mbc-chip-spec[data-rich-text-placeholder] { display: none; }

/* ---------------------------------------------------------------- header + footer */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--mbc-base) 82%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--mbc-line);
}
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }

.mbc-header-inner { padding-block: 1rem; row-gap: .5rem; }
.wp-block-group.mbc-header-nav { gap: .25rem; }
.mbc-nav .wp-block-navigation-item__content { padding: .6rem .75rem; }
.wp-block-site-title a::after { content: "."; color: var(--mbc-accent); }

.mbc-footer { border-top: 1px solid var(--mbc-line); }
.mbc-footer-inner {
	padding-block: 2rem;
	gap: .75rem 2rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mbc-muted);
}
.mbc-footer-inner p { margin: 0; }
.mbc-footer-mark { font-family: var(--mbc-heading); color: var(--mbc-text); font-size: 1rem; }

/* ---------------------------------------------------------------- sections */

.mbc-section { padding-block: var(--wp--preset--spacing--80); }
.mbc-section-head { margin-block-end: 1.5rem; gap: 1.25rem; }
.mbc-section-note { max-width: 40ch; margin: 0; }
.mbc-page-title { font-size: var(--wp--preset--font-size--xx-large); }
.mbc-main-bare { padding-block: 0; }

/* Hero */
.mbc-hero { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 11vw, 8rem) clamp(4rem, 9vw, 7rem); }
.mbc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(color-mix(in srgb, var(--mbc-text) 14%, transparent) 1px, transparent 1.5px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 30%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 72% 30%, #000 20%, transparent 75%);
}
.mbc-hero > * { position: relative; }
.wp-block-group.mbc-hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: end; }
.wp-block-group.mbc-hero-grid > * { margin: 0; }
@media (min-width: 960px) { .wp-block-group.mbc-hero-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.wp-block-group.mbc-hero-copy > * + * { margin-block-start: 1.75rem; }
.mbc-hero h1 { max-width: 13ch; }
.mbc-lede {
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	color: var(--mbc-muted);
}

/* Availability card (template part, edit it once in the Site Editor) */
.mbc-availability {
	padding: 1.75rem;
	border: 1px solid var(--mbc-line);
	border-radius: var(--mbc-r-md);
	background: color-mix(in srgb, var(--mbc-surface) 85%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.wp-block-group.mbc-availability > * { margin: 0; }
.wp-block-group.mbc-availability > * + * { margin-block-start: .6rem; }
.mbc-status { display: flex; align-items: center; gap: .75rem; font-weight: 500; margin-bottom: 1.1rem !important; }
.mbc-status::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mbc-ok);
}
.mbc-kv { display: grid; grid-template-columns: 5.5rem 1fr; font-size: 1rem; }
.mbc-kv strong { font-weight: 400; color: var(--mbc-muted); }

/* At a glance band */
.mbc-band { border-block: 1px solid var(--mbc-line); padding-block: 2.25rem; }
.mbc-stat { margin: 0; font-family: var(--mbc-heading); font-size: 2.25rem; line-height: 1.1; }
.mbc-stat-label { margin: .25rem 0 0 !important; font-size: var(--wp--preset--font-size--small); color: var(--mbc-muted); }

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

.mbc-work-query .wp-block-post-template { gap: 2rem; }
.is-style-mbc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--mbc-surface);
	border: 1px solid var(--mbc-line);
	border-radius: var(--mbc-r-lg);
	overflow: hidden;
}
.wp-block-group.is-style-mbc-card > * { margin: 0; }

.mbc-browser { padding: 1.25rem 1.25rem 0; background: color-mix(in srgb, var(--mbc-text) 4%, var(--mbc-surface)); }
.wp-block-group.mbc-browser > * { margin: 0; }
.mbc-browser-bar {
	display: flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 .75rem;
	border-radius: 10px 10px 0 0;
	background: var(--mbc-base);
	font-size: .8125rem;
	color: var(--mbc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mbc-browser-bar::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 2.4rem;
	border-radius: 50%;
	background: var(--mbc-line);
	box-shadow: 14px 0 0 var(--mbc-line), 28px 0 0 var(--mbc-line);
}
.mbc-browser .wp-block-post-featured-image { overflow: hidden; background: color-mix(in srgb, var(--mbc-text) 8%, var(--mbc-base)); }
.mbc-browser .wp-block-post-featured-image img { display: block; width: 100%; object-fit: cover; object-position: top; }
.mbc-browser:not(:has(.wp-block-post-featured-image))::after {
	content: "";
	display: block;
	aspect-ratio: 16 / 10;
	background: color-mix(in srgb, var(--mbc-text) 8%, var(--mbc-base));
}

.mbc-card-body { display: flex; flex-direction: column; flex-grow: 1; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.wp-block-group.mbc-card-body > * { margin: 0; }
.mbc-card-head { gap: .25rem 1rem; }
.mbc-card-head .wp-block-post-title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.mbc-card-head .wp-block-post-title a { color: inherit; }
.mbc-meta { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--mbc-muted); }
.mbc-card-body .mbc-live { margin-top: auto; }

.wp-block-group.mbc-fields { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .6rem 1rem; font-size: 1rem; }
.wp-block-group.mbc-fields > * { margin: 0; }
.mbc-field-label { color: var(--mbc-muted); }
.mbc-field-value:empty,
.mbc-field-label:has(+ .mbc-field-value:empty) { display: none; }
@media (max-width: 480px) {
	.wp-block-group.mbc-fields { grid-template-columns: 1fr; gap: .1rem; }
	.mbc-field-value { margin-bottom: .6rem !important; }
}

.wp-block-group.mbc-chips { gap: .5rem; }
.wp-block-post-terms.is-style-mbc-pills { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; }
.wp-block-post-terms.is-style-mbc-pills a,
ul.is-style-mbc-pills li {
	display: inline-block;
	padding: .3rem .85rem;
	border: 1px solid var(--mbc-line);
	border-radius: 999px;
	line-height: 1.4;
	color: var(--mbc-muted);
}
.wp-block-post-terms.is-style-mbc-pills a:hover { color: var(--mbc-text); border-color: var(--mbc-accent); text-decoration: none; }
.wp-block-post-terms.is-style-mbc-pills .wp-block-post-terms__separator { display: none; }
ul.is-style-mbc-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
ul.is-style-mbc-pills li { color: var(--mbc-text); }

/* "This site" panel */
.mbc-this-site {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-block-start: 2rem !important;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px dashed var(--mbc-line);
	border-radius: var(--mbc-r-lg);
}
.wp-block-group.mbc-this-site > * { margin: 0; }
.mbc-this-site-copy { flex: 999 1 26rem; }
.wp-block-group.mbc-this-site-copy > * + * { margin-block-start: .5rem; }
.mbc-this-site h3 { margin: 0; font-size: 1.625rem; }
.mbc-inline { gap: .75rem; }
.mbc-scores { flex: 1 1 16rem; gap: .75rem; text-align: center; }
.mbc-score-box { padding: .9rem .5rem; border-radius: 14px; background: var(--mbc-surface); }
.wp-block-group.mbc-score-box > * { margin: 0; }
.mbc-score-label { font-size: .8125rem; color: var(--mbc-muted); }
.mbc-score { font-family: var(--mbc-heading); font-size: 1.5rem; line-height: 1.3; }

/* ---------------------------------------------------------------- services */

.mbc-services { border-block: 1px solid var(--mbc-line); }
.mbc-services > .wp-block-group + .wp-block-group { margin-block-start: 3rem; }
.mbc-tile {
	height: 100%;
	box-sizing: border-box;
	padding: 1.75rem;
	border: 1px solid var(--mbc-line);
	border-radius: var(--mbc-r-md);
	background: var(--mbc-base);
}
.wp-block-group.mbc-tile > * { margin: 0; }
.wp-block-group.mbc-tile > * + * { margin-block-start: .75rem; }
.mbc-num { font-family: var(--mbc-heading); font-size: 1.25rem; color: var(--mbc-accent); }
.mbc-tile h3 { font-family: var(--mbc-body); font-size: var(--wp--preset--font-size--large); font-weight: 600; letter-spacing: 0; }
.mbc-tile p:last-child { font-size: 1rem; }
.mbc-tools { gap: .75rem 1.25rem; }
.mbc-tools-label {
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mbc-muted);
}

/* ---------------------------------------------------------------- about + contact */

.wp-block-group.mbc-about-grid,
.wp-block-group.mbc-split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.wp-block-group.mbc-about-grid > *,
.wp-block-group.mbc-split > * { margin: 0; }
@media (min-width: 900px) {
	.wp-block-group.mbc-about-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
	.wp-block-group.mbc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.mbc-portrait { max-width: 380px; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--mbc-line); border-radius: var(--mbc-r-lg); background: var(--mbc-surface); }
.mbc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mbc-about-copy { max-width: 60ch; }

.mbc-contact { border-top: 1px solid var(--mbc-line); }
.mbc-contact-title { font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem); line-height: 1.02; letter-spacing: -0.025em; }
.mbc-big-link { font-family: var(--mbc-heading); font-size: var(--wp--preset--font-size--x-large); }
.mbc-big-link a { display: inline-flex; align-items: center; gap: .6rem; overflow-wrap: anywhere; }
.mbc-big-link a::after { width: 1.25rem; height: 1.25rem; }

/* ---------------------------------------------------------------- enquiry form (from the companion plugin) */

.mbc-form-wrap {
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid var(--mbc-line);
	border-radius: var(--mbc-r-lg);
	background: var(--mbc-surface);
}
.mbc-form { display: grid; gap: 1.25rem; }
.mbc-form__field { display: grid; gap: .5rem; }
.mbc-form label { font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.mbc-form input,
.mbc-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 3.25rem;
	padding: .75rem 1rem;
	border: 1px solid var(--mbc-line);
	border-radius: var(--mbc-r-sm);
	background: var(--mbc-base);
	color: var(--mbc-text);
	font: inherit;
}
.mbc-form textarea { resize: vertical; min-height: 9rem; }
.mbc-form input:focus-visible,
.mbc-form textarea:focus-visible { outline: 2px solid var(--mbc-accent); outline-offset: 2px; }
.mbc-form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mbc-form button {
	justify-self: start;
	min-height: 3.25rem;
	padding: 0 1.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--mbc-accent);
	color: var(--mbc-base);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.mbc-form button:focus-visible { outline: 2px solid var(--mbc-text); outline-offset: 3px; }
.mbc-form__notice { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: var(--mbc-r-sm); font-size: 1rem; }
.mbc-form__notice--ok { background: color-mix(in srgb, var(--mbc-ok) 14%, transparent); }
.mbc-form__notice--error { background: color-mix(in srgb, #F87171 18%, transparent); }

/* ---------------------------------------------------------------- single project */

.mbc-single { padding-block-start: var(--wp--preset--spacing--70); }
.mbc-back { margin: 0; font-size: var(--wp--preset--font-size--small); }
.mbc-back a { color: var(--mbc-muted); }
.mbc-single-title { margin-block: 1rem .75rem; font-size: var(--wp--preset--font-size--display); }
.mbc-single-shot { margin-block-start: 2.5rem !important; }
.mbc-single-shot .mbc-browser { border: 1px solid var(--mbc-line); border-radius: var(--mbc-r-lg); overflow: hidden; }
.mbc-single-details { margin-block-start: 2.5rem !important; }
.wp-block-group.mbc-single-details > * + * { margin-block-start: 1.5rem; }
.wp-block-group.mbc-fields-lg { grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem 2rem; font-size: var(--wp--preset--font-size--medium); max-width: 900px; }
.mbc-single-content { margin-block-start: 3rem !important; }

/* ---------------------------------------------------------------- blog fallback */

.mbc-post-item { padding-block: 1.75rem; border-bottom: 1px solid var(--mbc-line); }
.wp-block-group.mbc-post-item > * + * { margin-block-start: .5rem; }

/* ---------------------------------------------------------------- motion */

@keyframes mbc-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes mbc-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mbc-ok) 55%, transparent); }
	70% { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: no-preference) {
	/* Hero entrance on load */
	.mbc-motion .mbc-in { animation: mbc-up var(--mbc-dur) var(--mbc-ease) both; }
	.mbc-motion .mbc-d1 { animation-delay: .06s; }
	.mbc-motion .mbc-d2 { animation-delay: .14s; }
	.mbc-motion .mbc-d3 { animation-delay: .22s; }
	.mbc-motion .mbc-d4 { animation-delay: .3s; }
	.mbc-motion .mbc-d5 { animation-delay: .42s; }

	/* Reveal on scroll: CSS only, no JavaScript. Browsers without support simply show everything. */
	@supports (animation-timeline: view()) {
		.mbc-motion :is(.is-style-mbc-reveal, .is-style-mbc-card, .mbc-tile) {
			animation: mbc-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}

	/* Availability pulse */
	.mbc-motion .mbc-status::before { animation: mbc-pulse 2.4s ease-out infinite; }

	/* Hover details */
	.mbc-motion .is-style-mbc-card { transition: translate .35s var(--mbc-ease), border-color .35s ease; }
	.mbc-motion .is-style-mbc-card:hover { translate: 0 -6px; border-color: color-mix(in srgb, var(--mbc-accent) 55%, transparent); }
	.mbc-motion .mbc-browser .wp-block-post-featured-image img { transition: scale .6s var(--mbc-ease); }
	.mbc-motion .is-style-mbc-card:hover .wp-block-post-featured-image img { scale: 1.025; }
	.mbc-motion .wp-block-button__link { transition: translate .2s ease, filter .2s ease; }
	.mbc-motion .wp-block-button:not(.is-style-mbc-arrow) .wp-block-button__link:hover { translate: 0 -2px; filter: brightness(1.08); }
	.mbc-motion .is-style-mbc-arrow .wp-block-button__link::after,
	.mbc-motion .mbc-big-link a::after { transition: translate .25s ease; }
	.mbc-motion .is-style-mbc-arrow .wp-block-button__link:hover::after,
	.mbc-motion .mbc-big-link a:hover::after { translate: 3px -3px; }
	.mbc-motion .mbc-form button { transition: translate .2s ease, filter .2s ease; }
	.mbc-motion .mbc-form button:hover { translate: 0 -2px; filter: brightness(1.08); }
}

/* ---------------------------------------------------------------- small screens */

/* One-page site: on phones the section links are dropped so the sticky
   header stays a single slim row with the name and the contact button. */
@media (max-width: 600px) {
	.mbc-nav { display: none; }
	.mbc-header-inner { flex-wrap: nowrap; }
	.mbc-header-inner .wp-block-site-title { font-size: 1.3rem; }
}