/*
Theme Name: SEYBE LABS
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seybe-labs
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Full-width sections own the vertical rhythm through their padding (theme.json
   spacing scale). The flow layout's block gap must not add margin between them. */
.wp-block-group.alignfull.sl-section {
	margin-block: 0;
}

/* Short pages: the footer stays at the bottom of the window instead of
   leaving an empty band below it. */
.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* === root tokens === */
:root {
	/* Aliases only: every value lives in theme.json (presets and custom). */
	--sl-surface: var(--wp--preset--color--n-900);
	--sl-bg: var(--wp--preset--color--n-850);
	--sl-text: var(--wp--preset--color--n-300);
	--sl-mist: var(--wp--preset--color--n-200);
	--sl-steel: var(--wp--preset--color--n-300);
	--sl-dim: var(--wp--preset--color--n-300);
	--sl-amber: var(--wp--preset--color--amber);
	--sl-bone: var(--wp--preset--color--bone);
	--sl-ink: var(--wp--preset--color--n-900);
	--sl-gold: var(--wp--preset--color--deep-gold);
	--sl-mono: var(--wp--preset--font-family--jetbrains-mono);
	--sl-sans: var(--wp--preset--font-family--ibm-plex-sans);
	--sl-shell: var(--wp--style--global--content-size);
	--sl-gutter: var(--wp--custom--gutter);
}

/* === shell === */
.sl-shell {
	max-width: var(--sl-shell);
	margin-inline: auto;
	padding-inline: var(--sl-gutter);
}

/* === header === */
/* Sticky must live on the wrapper (header template-part), not on .sl-header:
   sticky only travels within its containing block, and the wrapper spans the
   full page height while .sl-header is only as tall as the bar itself. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.sl-header {
	position: relative;
	background: var(--sl-surface);
	border-bottom: 1px solid var(--wp--custom--line--subtle);
}
.sl-header--zezen {
	background: var(--sl-surface);
	border-bottom: 1px solid var(--wp--custom--line--subtle);
}
.sl-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: var(--wp--custom--header-height);
}
.sl-header__inner a {
	text-decoration: none;
}
.sl-brand {
	display: inline-flex;
	shrink: 0;
}
.sl-header .sl-brand img {
	display: block;
	height: var(--wp--custom--logo-height);
	width: auto;
}
.sl-header__nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-left: clamp(0.5rem, 2vw, 2rem);
}
.sl-nav__link {
	font-family: var(--sl-sans);
	font-size: var(--wp--custom--nav-size);
	line-height: 24px;
	font-weight: 400;
	color: var(--sl-bone);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.sl-nav__link:hover {
	color: var(--sl-amber);
}
.sl-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.15s ease;
}
.sl-drop[open] .sl-caret {
	transform: rotate(180deg);
}
.sl-drop {
	position: relative;
}
.sl-drop > summary {
	list-style: none;
}
.sl-drop > summary::-webkit-details-marker {
	display: none;
}
.sl-drop__panel {
	position: absolute;
	top: calc(100% + 12px);
	left: -16px;
	min-width: 280px;
	background: var(--sl-bg);
	border: 1px solid var(--wp--custom--line--default);
	border-radius: var(--wp--custom--radius--md);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-shadow: var(--wp--custom--shadow--menu);
}
.sl-drop__item {
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--bone);
}
.sl-drop__item:hover {
	color: var(--sl-amber);
}
.sl-drop__desc {
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--label);
	color: var(--sl-steel);
}
.sl-header__tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1.1rem;
}
/* language switcher (Polylang output) */
.sl-sww-wrap {
	display: inline-flex;
	align-items: center;
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: var(--wp--custom--letter-spacing--label);
}
.sl-sww-wrap li {
	display: inline-flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sl-sww-wrap li + li::before {
	content: "·";
	color: var(--sl-steel);
	margin: 0 0.6rem;
}
.sl-sww-wrap a {
	color: var(--sl-steel);
	text-decoration: none;
}
.sl-sww-wrap a:hover {
	color: var(--sl-amber);
}
.sl-sww-wrap .current-lang a,
.sl-sww-wrap .lang-item-current a {
	color: var(--wp--preset--color--bone);
}

.sl-btn {
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--button--line-height);
	padding: var(--wp--custom--button--sm--padding-y) var(--wp--custom--button--sm--padding-x);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.sl-btn--cta {
	background: var(--sl-mist);
	color: var(--sl-ink);
}
.sl-btn--cta:hover {
	background: var(--wp--preset--color--bone);
}
.sl-burger {
	display: none;
}
.sl-header--zezen .zezen-brand .zezen-brand__logo {
	display: block;
	height: 40px;
	width: auto;
}

/* === footer === */
.sl-footer {
	background: var(--sl-surface);
	border-top: 1px solid var(--wp--custom--line--subtle);
	padding-block: clamp(2.5rem, 5vw, 3.5rem) 2.5rem;
}
.sl-footer--zezen {
	border-top-color: var(--wp--custom--line--subtle);
}
.sl-footer a {
	text-decoration: none;
}

.sl-foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	padding-block: 1.4rem;
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-bone);
}
.sl-foot__links a {
	color: var(--sl-bone);
}
.sl-foot__links a:hover {
	color: var(--sl-amber);
}
.sl-foot__links .sl-foot__social svg {
	display: block;
	width: 20px;
	height: 20px;
}
/* === footer sitemap row === */
.sl-foot__sitemap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.8rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--wp--custom--line--subtle);
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-bone);
}
.sl-foot__sitemap-label {
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
	margin-right: 0.2rem;
}
.sl-foot__sitemap a {
	color: var(--sl-bone);
}
.sl-foot__sitemap a:hover {
	color: var(--sl-amber);
}
.sl-sep {
	color: var(--sl-steel);
}
.sl-foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.3rem 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--custom--line--subtle);
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.04em;
	color: var(--sl-steel);
}
.sl-foot__legal a {
	color: var(--sl-steel);
}
.sl-foot__legal a:hover {
	color: var(--sl-amber);
}
.sl-foot__legal .sl-sww-wrap {
	margin-left: auto;
}
.sl-foot__madeby {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--custom--line--subtle);
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-steel);
}
.sl-foot__madeby img {
	display: block;
	width: auto;
}
.sl-foot__madeby-zezen {
	height: 28px;
}
/* SEYBE LABS logo at the same visual weight as the Zezen logo (brand: max size ratio 1:3). */
.sl-foot__madeby-seybe {
	height: 28px;
}
/* === typography & eyebrow === */
p.eyebrow,
.wp-block-post-terms.eyebrow {
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-amber);
	margin: 0;
}
p.lede,
.wp-block-post-excerpt.lede .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.6;
	font-weight: 300;
	color: var(--sl-steel);
	max-width: var(--wp--custom--reading-max);
}
/* === heading scale (reference v1.1) === */
h2.wp-block-heading {
	font-weight: 500;
}
h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 500;
}
.cta h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--title);
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* === technical grid background === */
.grid-bg {
	background-image:
		linear-gradient(var(--wp--custom--line--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--custom--line--grid) 1px, transparent 1px);
	background-size: 32px 32px;
}

/* === sections === */
.sl-section {
	padding-block: clamp(4rem, 9vw, 6.5rem);
}

/* === section divider === */
.sl-section--divider {
	border-bottom: 1px solid var(--wp--preset--color--n-800);
}

/* === closing cta === */
.cta {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

.cta__note {
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--body);
	color: var(--sl-text);
	max-width: var(--wp--custom--reading-max);
}

/* === contact page === */
.contact-cols {
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.contact-company {
	font-style: normal;
}
.wp-block-social-links.is-style-logos-only .wp-social-link a {
	padding: 0;
}

/* === cards with a link at the bottom (home products) === */
.sl-cards-row .is-style-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Open card: an invitation rather than a product, so it is drawn as an outline. */
.is-style-card.sl-card--open {
	background: transparent;
	border-style: dashed;
	border-color: var(--wp--custom--line--strong);
}
.sl-cards-row .sl-bullets {
	font-size: var(--wp--preset--font-size--body);
	gap: var(--wp--preset--spacing--10);
}
.sl-more {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.sl-more a {
	text-underline-offset: 4px;
}

/* === partners / ecosystem logos (grows into a carousel later) === */
.sl-partners {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--40);
}
.sl-partners > .sl-partner {
	flex: 0 1 18rem;
	margin: 0;
}
.sl-partner figure {
	margin: 0;
}
/* Partner logos keep their original colours, so each sits on a light tile to stay legible on the dark band. */
.sl-partner figure {
	display: inline-block;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--bone);
	border-radius: var(--wp--custom--radius--md);
}
.sl-partner img {
	display: block;
	height: 80px;
	width: auto;
}
.sl-partner p {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-steel);
}

/* === long-form reading column (legal texts) ===
   The width goes on the children: the wrapper sits in a constrained layout,
   which would centre it if it had a max-width of its own. */
.reading > * {
	max-width: var(--wp--custom--reading-max);
}

/* === bold text: stands out in bone over the steel body text === */
.wp-site-blocks :is(p, li, label) :is(strong, b) {
	font-weight: 500;
	color: var(--wp--preset--color--bone);
}

/* === FAQ (native details/summary accordion) === */
.sl-faq {
	margin-top: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--custom--line--default);
}
.sl-faq > .wp-block-details {
	margin: 0;
	border-top: 1px solid var(--wp--custom--line--default);
}
.sl-faq summary {
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--bone);
}
.sl-faq summary::-webkit-details-marker {
	display: none;
}
/* Plus sign drawn with two bars; it turns into a cross when the answer is open. */
.sl-faq summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	color: var(--sl-mist);
	transition: transform 0.2s ease;
}
.sl-faq details[open] > summary::after {
	transform: rotate(45deg);
}
.sl-faq summary:hover {
	color: var(--sl-mist);
}
.sl-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--n-200);
	outline-offset: 2px;
}
.sl-faq details > :not(summary) {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--reading-max);
	color: var(--sl-text);
}

/* === contact reasons === */
.sl-reasons__label {
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
}
.sl-reasons > .sl-reason {
	margin: 0;
}
.sl-reason {
	position: relative;
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: var(--wp--preset--spacing--20);
	row-gap: 2px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	border-left: 2px solid transparent;
	transition: background-color 0.15s ease;
}
.sl-reason::before {
	content: "";
	grid-row: 1 / span 2;
	width: 24px;
	height: 24px;
	background: var(--wp--preset--color--n-200);
	-webkit-mask: var(--sl-reason-icon) center / contain no-repeat;
	mask: var(--sl-reason-icon) center / contain no-repeat;
}
.sl-reason > p {
	grid-column: 2;
	margin: 0;
}
.sl-reason {
	cursor: pointer;
}
.sl-reason__title {
	color: var(--wp--preset--color--bone);
	font-weight: 500;
}
.sl-reason__text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-steel);
}
.sl-reason:hover,
.sl-reason:focus-within {
	background: var(--wp--custom--fill--raised);
}
.sl-reason.is-selected {
	border-left-color: var(--wp--preset--color--amber);
	background: var(--wp--custom--fill--raised);
}
.sl-reason:focus-visible {
	outline: 2px solid var(--wp--preset--color--n-200);
	outline-offset: 2px;
}
.sl-reason--partners { --sl-reason-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.sl-reason--press { --sl-reason-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E"); }
.sl-reason--support { --sl-reason-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.sl-reason--investment { --sl-reason-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"); }

/* === article === */
.sl-post-meta {
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--sl-steel);
}
.eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sl-post-hero .wp-block-post-title {
	margin: 0;
}
.sl-post-hero__image {
	margin: 0;
}
.sl-post-hero__image img {
	border-radius: var(--wp--custom--radius--md);
}
/* The invitation text keeps the article's reading width. */
.sl-article-cta .cta__note {
	max-width: 760px;
}

/* Hidden when there are no related articles. */
.sl-related-section:not(:has(.sl-related)) {
	display: none;
}
.sl-related__title {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* === blog index === */
.sl-post-card {
	height: 100%;
}
.sl-post-card .wp-block-post-featured-image {
	width: 100%;
	margin: 0;
}
.sl-post-card .wp-block-post-featured-image img,
.sl-cover-fallback a {
	border-radius: var(--wp--custom--radius--md);
}
.sl-cover-fallback a {
	display: block;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--n-800);
	background-image:
		linear-gradient(var(--wp--custom--line--subtle) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--custom--line--subtle) 1px, transparent 1px);
	background-size: var(--wp--custom--grid-module) var(--wp--custom--grid-module);
	border: 1px solid var(--wp--custom--line--default);
	position: relative;
}
.sl-cover-fallback__mark {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 38%;
	aspect-ratio: 150 / 55;
	background: var(--wp--preset--color--n-600);
	-webkit-mask: url(assets/images/seybe-logo-negative.svg) center / contain no-repeat;
	mask: url(assets/images/seybe-logo-negative.svg) center / contain no-repeat;
}
/* The rule between image and text, as in most blog card layouts. */
.sl-post-card__date {
	width: 100%;
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--n-600);
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--sl-steel);
}
.sl-post-card:hover .sl-post-card__date {
	border-top-color: var(--wp--preset--color--amber);
}
.sl-post-card__title {
	margin: 0;
	line-height: var(--wp--custom--line-height--snug);
}
.sl-post-card__title a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}
.sl-post-card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-text);
}
.sl-post-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}
.sl-post-card__more {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--n-200);
	text-underline-offset: 4px;
}
.sl-pagination {
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--meta);
	gap: var(--wp--preset--spacing--10);
}
.sl-pagination a,
.sl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--wp--preset--spacing--10);
	border: 1px solid var(--wp--custom--line--default);
	border-radius: var(--wp--custom--radius--md);
	color: var(--sl-text);
	text-decoration: none;
}
.sl-pagination .page-numbers.current {
	background: var(--wp--preset--color--n-200);
	border-color: var(--wp--preset--color--n-200);
	color: var(--wp--preset--color--n-950);
}
.sl-pagination a:hover {
	border-color: var(--wp--preset--color--n-200);
	color: var(--wp--preset--color--bone);
}
.sl-pagination .page-numbers.dots {
	border: 0;
}
.sl-blog__empty {
	color: var(--sl-steel);
}

/* === about: values and visual slots === */
.sl-values {
	margin-top: var(--wp--preset--spacing--40);
}
/* Three cards per row; an incomplete last row is centred (flex layout, wrap, centred). */
.sl-values > .sl-value {
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
}
/* Variant: four cards per row (Zezen security). */
.sl-values--4 > .sl-value {
	flex-basis: calc((100% - 3 * var(--wp--preset--spacing--30)) / 4);
	/* Narrower cards: lighter inner padding so the text keeps a readable measure. */
	padding: var(--wp--preset--spacing--40);
}
@media (max-width: 1100px) {
	.sl-values > .sl-value {
		flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2);
	}
}
@media (max-width: 640px) {
	.sl-values > .sl-value {
		flex-basis: 100%;
	}
}
.sl-value::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--n-200);
	-webkit-mask: var(--sl-value-icon) center / contain no-repeat;
	mask: var(--sl-value-icon) center / contain no-repeat;
}
.sl-value h3 {
	margin: 0;
}
.sl-value p {
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-text);
}
.sl-value--excellence { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E"); }
.sl-value--innovation { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.sl-value--honesty { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
.sl-value--commitment { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.sl-value--lock { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.sl-value--europe { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.sl-value--anonymous { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E"); }
.sl-value--control { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); }
.sl-value--layers { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
.sl-value--ai { --sl-value-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2'/%3E%3C/svg%3E"); }

.sl-about-visual,
.sl-photo {
	margin: 0;
}
.sl-about-visual img,
.sl-photo img {
	display: block;
	width: 100%;
	height: auto;
}
.sl-about-photo img,
.sl-photo img {
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--wp--custom--line--default);
}

/* Space reserved for a visual still to be defined: visible only to logged-in editors. */
.sl-visual-slot {
	display: none;
}
body.logged-in .sl-visual-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border: 1px dashed var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--md);
	color: var(--sl-steel);
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}
.sl-visual-slot p {
	margin: 0;
}

/* Social links with labels (about page closing). */
.wp-block-social-links.has-visible-labels.is-style-logos-only {
	gap: var(--wp--preset--spacing--30);
}
.wp-block-social-links.has-visible-labels .wp-social-link a {
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--bone);
}
.wp-block-social-links.has-visible-labels .wp-block-social-link-label {
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--body);
}

/* === bullet list (Zezen hero) === */
.sl-bullets {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--lede);
	color: var(--sl-text);
}
/* Hero bullets read like the hero lede (same size, weight and colour). */
.sl-hero .sl-bullets {
	font-weight: 300;
}
.sl-bullets li {
	position: relative;
	padding-left: 1.4em;
	line-height: var(--wp--custom--line-height--snug);
}
.sl-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--n-200);
}
.z-hero__visual {
	margin: 0;
}
.z-hero__visual img {
	display: block;
	width: 100%;
	height: auto;
}

/* === tabs (Zezen profiles) === */
.sl-tabs.is-enhanced {
	display: grid;
	grid-template-columns: 20rem 1fr;
	gap: var(--wp--preset--spacing--40);
	/* Panels stretch to the row: the card is never shorter than the tab list
	   and all three share the height of the tallest content. */
	align-items: stretch;
}
.sl-tabs.is-enhanced > .sl-tab-panel {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sl-tabs.is-enhanced .sl-tabs__list {
	align-content: start;
}
/* All panels share the same cell, so the box keeps the height of the tallest one
   and does not jump when switching. Inactive panels are invisible and inert. */
.sl-tabs.is-enhanced > .sl-tab-panel[hidden] {
	display: flex;
	visibility: hidden;
}
.sl-tabs.is-enhanced .sl-tab-panel__title,
.sl-tabs.is-enhanced .sl-tab-panel__lead {
	display: none;
}
.sl-tabs.is-enhanced .sl-tab-panel > .wp-block-columns {
	margin-top: 0;
}
.sl-tabs__list {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}
.sl-tabs__tab {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--wp--preset--spacing--20);
	align-items: start;
	width: 100%;
	text-align: left;
	padding: var(--wp--preset--spacing--20);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	color: var(--sl-text);
	font: inherit;
	cursor: pointer;
}
.sl-tabs__tab:hover {
	background: var(--wp--custom--fill--raised);
}
.sl-tabs__tab[aria-selected="true"] {
	background: var(--wp--preset--color--n-800);
	border-color: var(--wp--preset--color--n-200);
}
.sl-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--n-200);
	outline-offset: 2px;
}
.sl-tabs__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--wp--custom--line--strong);
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--sl-text);
}
.sl-tabs__tab[aria-selected="true"] .sl-tabs__num {
	background: var(--wp--preset--color--n-200);
	border-color: var(--wp--preset--color--n-200);
	color: var(--wp--preset--color--n-950);
}
.sl-tabs__title {
	display: block;
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	color: var(--wp--preset--color--bone);
	line-height: var(--wp--custom--line-height--snug);
}
.sl-tabs__lead {
	display: block;
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sl-steel);
}
.sl-tab-panel h4 {
	margin: 0;
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
}
.sl-tab-panel .sl-bullets {
	font-size: var(--wp--preset--font-size--body);
	color: var(--sl-text);
	gap: var(--wp--preset--spacing--20);
}
.sl-tab-panel__answer {
	padding-left: var(--wp--preset--spacing--20);
	border-left: 2px solid var(--wp--preset--color--amber);
	color: var(--wp--preset--color--bone);
}
@media (max-width: 960px) {
	.sl-tabs.is-enhanced {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Tabs on row 1; all panels share row 2 so hidden ones leave no gap. */
	.sl-tabs.is-enhanced > .sl-tab-panel {
		grid-column: 1;
		grid-row: 2;
	}
	.sl-tabs__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sl-tabs__lead {
		display: none;
	}
}
@media (max-width: 600px) {
	/* Phone: number above a smaller title so three tabs fit side by side. */
	.sl-tabs__tab {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: var(--wp--preset--spacing--10);
	}
	.sl-tabs__title {
		font-size: var(--wp--preset--font-size--small);
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}

/* === feature rows (Zezen: text + image, alternating) === */
.sl-feature .sl-bullets {
	font-size: var(--wp--preset--font-size--body);
	gap: var(--wp--preset--spacing--10);
}

/* === media-first rows (image left, text right): text goes first once the columns stack === */
@media (max-width: 781px) {
	.wp-block-columns.sl-media-first:not(.is-not-stacked-on-mobile) > .wp-block-column:first-child {
		order: 1;
	}
}

/* === tables (cookie policy) === */
.wp-block-table table {
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-table :is(th, td) {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--n-700);
	text-align: left;
	vertical-align: top;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}
.wp-block-table thead {
	border-bottom: 0;
}
.wp-block-table th {
	color: var(--wp--preset--color--bone);
	font-weight: 500;
}
.wp-block-table code {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--meta);
	white-space: nowrap;
}

/* === forms === */
.wp-block-jetpack-contact-form {
	/* Jetpack sizes fields and the submit button from these variables:
	   both take the theme button height (12 + 20 + 12 = 44 px). */
	--jetpack--contact-form--input-height: calc(var(--wp--custom--button--line-height) + 2 * var(--wp--custom--button--md--padding-y));
	--jetpack--contact-form--input-padding-top: var(--wp--custom--button--md--padding-y);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}
.wp-block-jetpack-contact-form > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.wp-block-jetpack-contact-form label {
	font-family: var(--sl-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
}
.wp-block-jetpack-contact-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	width: 100%;
	background: var(--wp--custom--fill--field);
	border: 1px solid var(--sl-steel);
	border-radius: var(--wp--custom--radius--sm);
	padding: calc(var(--wp--custom--button--md--padding-y) - 1px) 14px;
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--button--line-height);
	color: var(--wp--preset--color--bone);
}
.wp-block-jetpack-contact-form textarea {
	min-height: 130px;
	resize: vertical;
}
.wp-block-jetpack-contact-form :is(input[type="text"], input[type="email"], textarea, select):focus {
	outline: none;
	border-color: var(--sl-amber);
}
/* The form button inherits the theme button (theme.json styles.elements.button). */
.wp-block-jetpack-contact-form label.consent {
	display: block;
	font-family: var(--sl-sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sl-text);
}
.wp-block-jetpack-contact-form label.consent input[type="checkbox"] {
	margin: 0 var(--wp--preset--spacing--10) 0 0;
	vertical-align: -2px;
}
.wp-block-jetpack-contact-form input[type="checkbox"] {
	accent-color: var(--sl-amber);
}
/* Keep the contact form at a comfortable reading width instead of stretching the full column. */
.contact-cols .wp-block-jetpack-contact-form {
	max-width: 640px;
}

/* Hide Jetpack form error frames until real feedback happens: default visibility leaks
   an empty red box + "fill out the form correctly" on first load. Jetpack toggles these
   classes itself when the user submits or edits. */
.wp-block-jetpack-contact-form .contact-form__error,
.wp-block-jetpack-contact-form .contact-form__input-error {
	display: none;
}
.wp-block-jetpack-contact-form .contact-form__error,
.wp-block-jetpack-contact-form .contact-form__error-message {
	color: var(--wp--preset--color--bone);
}
.wp-block-jetpack-contact-form .contact-form__error.show-errors,
.wp-block-jetpack-contact-form .contact-form__input-error.has-errors {
	display: flex;
}

/* === responsive === */

@media (max-width: 820px) {
	.sl-header__nav {
		display: none;
		position: absolute;
		top: 66px;
		left: 0;
		right: 0;
		background: var(--sl-surface);
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin: 0;
		padding: 0.5rem var(--sl-gutter) 1.25rem;
		border-bottom: 1px solid var(--wp--custom--line--subtle);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
	}
	.sl-header--zezen .sl-header__nav {
		background: var(--sl-bone);
	}
	.sl-header__nav.is-open {
		display: flex;
	}
	.sl-drop__panel {
		position: static;
		box-shadow: none;
		border: 0;
		padding: 0.4rem 0 0.5rem 0.5rem;
		min-width: 0;
	}
	.sl-header__nav .sl-nav__link,
	.sl-header__nav .sl-drop {
		padding: 0.9rem 0;
		width: 100%;
	}
	.sl-burger {
		display: inline-flex;
		flex-direction: column;
		gap: 3px;
		background: none;
		border: 0;
		cursor: pointer;
		padding: 8px 4px;
	}
	.sl-burger span {
		width: 22px;
		height: 3px;
		background: var(--sl-mist);
		display: block;
		border-radius: var(--wp--custom--radius--sm);
	}
	.sl-header--zezen .sl-burger span {
		background: var(--sl-ink);
	}
	.sl-foot__legal .sl-sww-wrap {
		margin-left: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* === Zezen header and brand extras === */
.sl-login.is-hidden { display: none; }

@media (max-width: 640px) {
	.zezen-brand__logo { height: 32px; }
}

/* === hero sections === */
.sl-hero {
	overflow: hidden;
	border-bottom: 1px solid var(--wp--custom--line--grid);
}

.sl-hero h1 { font-weight: 300; }