/*
 * Spacevibes Blocks: vertical rhythm on a 4px baseline.
 * Each text style has a line-height multiplier (--sv-lh). Browsers that
 * support CSS round() snap the resulting line height to the nearest 4px, so
 * fluid headings stay on the grid at every screen width.
 */

:root {
	--sv-base: 4px;
	--sv-line: var(--wp--custom--line, 28px);
	--sv-before-heading: var(--wp--custom--space-before-heading, 56px);
	--sv-after-heading: var(--wp--custom--space-after-heading, 16px);
}

body,
p, li, dd, dt, blockquote, figcaption, td, th,
h1, h2, h3, h4, h5, h6,
[class*="-font-size"] {
	line-height: var(--sv-lh, 1.5556);
}
@supports (line-height: round(nearest, 10px, 4px)) {
	body,
	p, li, dd, dt, blockquote, figcaption, td, th,
	h1, h2, h3, h4, h5, h6,
	[class*="-font-size"] {
		line-height: round(nearest, calc(1em * var(--sv-lh, 1.5556)), var(--sv-base));
	}
}

/* Line-height multipliers per role. Values give the same results as the playground. */
body, p, li { --sv-lh: 1.5556; }
h1, h2, .has-display-font-size, .has-xxx-large-font-size, .has-xx-large-font-size { --sv-lh: 1.15; }
h3, h4, .has-x-large-font-size, .has-large-font-size { --sv-lh: 1.3; }
h5 { --sv-lh: 1.5556; }
h6, .has-small-font-size, figcaption, .wp-element-caption { --sv-lh: 1.45; }
.has-lead-font-size { --sv-lh: 1.5; }
.has-display-font-size { letter-spacing: -0.015em; }

h1, h2, h3, h4, .has-display-font-size, .has-xxx-large-font-size { text-wrap: balance; }

/* Rhythm inside content, at any depth (top level, groups, columns):
 * two lines of space above a subheading that follows text, a little below every heading. */
:is(.wp-block-post-content, .wp-block-post-content :is(.is-layout-flow, .is-layout-constrained):not(.sv-card)) > :is(p, ul, ol, dl, blockquote, pre, .wp-block-quote, .wp-block-table, .wp-block-buttons) + :is(h2, h3, h4, h5) {
	margin-block-start: var(--sv-before-heading);
}
:is(.wp-block-post-content, .wp-block-post-content :is(.is-layout-flow, .is-layout-constrained):not(.sv-card)) > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--sv-after-heading);
}
.wp-block-post-content > .alignfull + :is(h2, h3, h4, h5) {
	margin-block-start: var(--wp--preset--spacing--90);
}

/* Text links. Element-level selectors so the old theme's utility classes still win inside legacy blocks. */
p a, li a, figcaption a, dd a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
p a:hover, li a:hover, figcaption a:hover, dd a:hover { color: var(--wp--preset--color--primary); }
h1, h2, h3 { letter-spacing: -0.01em; }
:is(h1, h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; }
:is(h1, h2, h3, h4, h5, h6) a:hover { color: var(--wp--preset--color--primary); }

/* Lists sit on the same grid */
.wp-block-post-content :is(ul, ol), :is(ul, ol).wp-block-list { padding-inline-start: var(--wp--preset--spacing--50); }
.wp-block-post-content li + li { margin-block-start: var(--wp--preset--spacing--20); }

/* Images */
.wp-block-image img { border-radius: 4px; }
.wp-block-image figcaption { margin-block-start: var(--wp--preset--spacing--30); }

/* Buttons: "Arrow" style adds the arrow from the current site */
.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-start: 12px;
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button.is-style-text-link .wp-block-button__link {
	border: 0; border-radius: 0; padding: 0; background: none !important;
	color: inherit; text-decoration: underline; text-underline-offset: 6px;
}
.wp-block-button.is-style-text-link .wp-block-button__link:hover { color: var(--wp--preset--color--primary) !important; }

/* Header */
.sv-header { position: relative; z-index: 20; }
.sv-header .wp-block-navigation__responsive-container-open {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: var(--wp--preset--font-size--small); letter-spacing: 0.02em;
}
.sv-header .wp-block-navigation__responsive-container-open::before { content: "menu"; }
.sv-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter);
}
.sv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	padding-block: var(--wp--preset--spacing--20);
}

/* Footer: black panel with the dot grid from the current site */
.sv-footer {
	background-color: #000;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.28) 1px, transparent 1.5px),
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px, 112px 112px, 112px 112px;
	background-position: 28px 28px, 0 0, 0 0;
}
.sv-footer a { color: inherit; }
.sv-footer .wp-block-button__link { border-color: rgba(255, 255, 255, .6); color: #fff; }
.sv-footer .wp-block-button__link:hover { background: #fff; color: #000; }

/* Cards in query loops */
.sv-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.sv-card .wp-block-post-featured-image { overflow: hidden; border-radius: 4px; }
.sv-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.sv-card .wp-block-post-title a { text-decoration: none; }
.sv-card .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

/* Stat numbers line up */
.sv-stats .has-display-font-size, .sv-stats .has-xxx-large-font-size { font-variant-numeric: tabular-nums; }

/* Skip link and focus */
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

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


/* Case study headline (excerpt rendered as H1) */
.sv-excerpt-h1 .wp-block-post-excerpt__excerpt { margin: 0; font-size: inherit; font-weight: 400; --sv-lh: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.sv-excerpt-h1 .wp-block-post-excerpt__more-text { display: none; }

/* ---------------------------------------------------------------
 * Gallery styles
 * ------------------------------------------------------------- */

/* Scroller: one row of images that scrolls sideways, captions below */
.wp-block-gallery.is-style-scroller.has-nested-images {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--50);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--wp--preset--spacing--40);
	scrollbar-width: thin;
}
.wp-block-gallery.is-style-scroller.has-nested-images figure.wp-block-image {
	flex: 0 0 min(80%, 400px) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
	flex-direction: column;
	align-items: stretch;
}
.wp-block-gallery.is-style-scroller.has-nested-images figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	height: auto !important;
	flex: none;
}
.wp-block-gallery.is-style-scroller.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }
.wp-block-gallery.is-style-scroller.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: none;
	color: inherit;
	text-shadow: none;
	max-height: none;
	overflow: visible;
	padding: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	text-align: left;
}
.wp-block-gallery.is-style-scroller.has-nested-images figure.wp-block-image figcaption a { color: inherit; }

/* Logos: client logos in a calm grey row */
.wp-block-gallery.is-style-logos.has-nested-images { align-items: center; }
.wp-block-gallery.is-style-logos.has-nested-images figure.wp-block-image img {
	object-fit: contain !important;
	aspect-ratio: 3 / 2;
	filter: grayscale(1);
	opacity: 0.75;
	border-radius: 0;
	transition: filter .2s ease, opacity .2s ease;
}
.wp-block-gallery.is-style-logos.has-nested-images figure.wp-block-image:hover img { filter: none; opacity: 1; }

/* Testimonials */
.sv-testimonials .wp-block-quote { font-size: var(--wp--preset--font-size--medium); margin: 0; }
.sv-testimonials .wp-block-quote cite { display: block; margin-top: var(--wp--preset--spacing--40); font-style: normal; font-weight: 600; font-size: var(--wp--preset--font-size--small); }

/* Cards (static or query loop): spacing set explicitly on the grid, not left to browser defaults */
.sv-card > * { margin-block: 0; }
.sv-card > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.sv-card > :is(.wp-block-image, .wp-block-post-featured-image) + * { margin-block-start: var(--wp--preset--spacing--40); }
.sv-card .wp-block-image { margin-bottom: 0 !important; }

/* Cards built from static blocks (featured projects, insights) */
.sv-card .wp-block-image { overflow: hidden; border-radius: 4px; margin-bottom: var(--wp--preset--spacing--40); }
.sv-card .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .4s ease; }
.sv-card:hover .wp-block-image img { transform: scale(1.03); }
.sv-card :is(h2, h3, h4) a { text-decoration: none; }
.sv-card :is(h2, h3, h4) a:hover { color: var(--wp--preset--color--primary); }

/* ---------------------------------------------------------------
 * Contact Form 7 (form 373 uses the old theme's markup)
 * ------------------------------------------------------------- */
.wpcf7 form br { display: none; }
.wpcf7 form > p:first-of-type { font-size: var(--wp--preset--font-size--lead); --sv-lh: 1.5; margin-top: 0; margin-bottom: var(--wp--preset--spacing--60); }
.wpcf7 form > div:has(> .chip-group) { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--80); max-width: 900px; }
.wpcf7 .chip-group p { margin: 0; }
.wpcf7 .chip { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wpcf7 .chip-label {
	display: inline-block; cursor: pointer; user-select: none;
	border: 1px solid var(--wp--preset--color--ink); border-radius: 999px;
	padding: 5px 20px; font-size: var(--wp--preset--font-size--medium); /* 1px border + 5 + 28 + 5 + 1 = 40px */
	transition: background-color .15s ease, color .15s ease;
}
.wpcf7 .chip-label:hover { background: var(--wp--preset--color--lavender); }
.wpcf7 .chip:checked ~ .chip-label { background: var(--wp--preset--color--ink); color: #fff; }
.wpcf7 .chip:focus-visible ~ .chip-label { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.wpcf7 .input-group.md\:hidden { display: none; }
.wpcf7 .max-w-\[660px\] { max-width: 660px; }
.wpcf7 .input-group { margin-bottom: var(--wp--preset--spacing--50); }
.wpcf7 .input-group p { margin: 0; }
.wpcf7 .input {
	width: 100%; border: 0; border-bottom: 1px solid var(--wp--preset--color--ink);
	background: transparent; padding: 0; font: inherit;
	font-size: var(--wp--preset--font-size--lead); --sv-lh: 1.5; border-radius: 0;
	box-sizing: border-box; block-size: 56px;
}
.wpcf7 .input:focus { outline: none; border-bottom-color: var(--wp--preset--color--primary); box-shadow: 0 1px 0 var(--wp--preset--color--primary); }
.wpcf7 select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2322262C' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 20px; padding-right: 32px; }
.wpcf7 #budget_ref { display: none; }
.wpcf7 .file-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wpcf7 .file-label { cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.wpcf7 .file-label svg { display: none; }
.wpcf7 .file { color: var(--wp--preset--color--grey); margin-left: var(--wp--preset--spacing--40); }
.wpcf7 .mt-24 { margin-top: var(--wp--preset--spacing--70); }
.wpcf7 .wpcf7-submit {
	display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
	border: 1px solid var(--wp--preset--color--ink); border-radius: 999px;
	padding: 9px 24px; background: transparent; color: var(--wp--preset--color--ink); line-height: 28px; /* 48px tall */
	font: inherit; font-weight: 600;
}
.wpcf7 .wpcf7-submit:hover { background: var(--wp--preset--color--ink); color: #fff; }
.wpcf7 .wpcf7-submit svg { width: 20px; height: 12px; }
.wpcf7 .wpcf7-not-valid-tip { color: var(--wp--preset--color--red); font-size: var(--wp--preset--font-size--small); margin-top: 4px; }
.wpcf7 .wpcf7-response-output { margin: var(--wp--preset--spacing--50) 0 0 !important; padding: 12px 16px !important; border-radius: 4px; }