/* ==========================================================================
   Block theme: map core block output onto the Webflow design (site.css).
   ========================================================================== */

/* WordPress prints width/height attributes on images; the design sets only widths,
   so keep the aspect ratio. Loaded on the site AND in the editor (theme.css is
   front-end only, which is why images looked stretched while editing). */
:where(img[width][height]) { height: auto; }

/* Text-only divs converted to paragraphs keep their original zero margins */
:where(p.nt-div) { margin: 0; }

/* ---------- Buttons: New Theory styles (Block toolbar → Styles) ---------- */
.nt-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wp-block-button[class*="is-style-nt-"] > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 100px;
	padding: 16px 28px;
	font-family: var(--_font-family---inter, Inter, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px; /* Webflow's .btn-inner is 16px tall: buttons come out at exactly 50px */
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: all 0.3s linear;
}
.wp-block-button[class*="is-style-nt-"]:not([class*="is-style-nt-lp"]) > .wp-block-button__link::after {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M10.4767 6.1664L6.00668 1.6964L7.18501 0.518066L13.6667 6.99973L7.18501 13.4814L6.00668 12.3031L10.4767 7.83307H0.333344V6.1664H10.4767Z'/%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 14 14'%3E%3Cpath d='M10.4767 6.1664L6.00668 1.6964L7.18501 0.518066L13.6667 6.99973L7.18501 13.4814L6.00668 12.3031L10.4767 7.83307H0.333344V6.1664H10.4767Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s;
}
.wp-block-button[class*="is-style-nt-"] > .wp-block-button__link:hover::after { transform: translateX(3px); }

.wp-block-button.is-style-nt-primary > .wp-block-button__link { border: 1px solid var(--primary); background: var(--primary); color: #fff; }
.wp-block-button.is-style-nt-primary > .wp-block-button__link:hover { border-color: var(--dark); background: var(--dark); }
.wp-block-button.is-style-nt-outline > .wp-block-button__link { border: 1px solid #e0e0e0; background: transparent; color: #0c0407; font-size: 16px; }
.wp-block-button.is-style-nt-outline > .wp-block-button__link:hover { border-color: #a930a9; color: #000; }
.wp-block-button.is-style-nt-white > .wp-block-button__link { border: 1px solid #fff; background: #fff; color: #000; }
.wp-block-button.is-style-nt-white > .wp-block-button__link:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
.wp-block-button.cta-btn > .wp-block-button__link { width: 344px; }
@media screen and (max-width: 991px) {
	.wp-block-button[class*="is-style-nt-"] > .wp-block-button__link { padding: 14px 22px; }
	.wp-block-button.cta-btn > .wp-block-button__link { width: 200px; }
}
.cta-btn-wrap .nt-buttons { justify-content: center; }

/* ---------- Navigation (core Navigation block styled like .nav-link) ---------- */
.nt-nav .wp-block-navigation__container { gap: 40px; }
.nt-nav .wp-block-navigation-item__content {
	color: var(--dark);
	font-size: var(--_font-size---fz-14);
	line-height: var(--_line-height---lh-150);
	letter-spacing: var(--_letter-spacing---is-1);
	padding: 5px 0;
	text-decoration: none;
}
.nt-nav .wp-block-navigation-item__content:hover { color: var(--primary); }
.nt-nav .wp-block-navigation-item__content.w--current {
	text-decoration: underline;
	text-decoration-color: var(--primary);
}
.nt-nav .wp-block-navigation__responsive-container-open {
	width: 40px;
	height: 40px;
	padding: 8px;
	background: #0c0407;
	color: #fff;
}
/* Switch to the mobile menu at the design's 991px breakpoint (core default is 600px) */
@media (min-width: 600px) and (max-width: 991px) {
	.nt-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.nt-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 991px) {
	.nt-nav .wp-block-navigation__responsive-container-open { display: flex; align-items: center; justify-content: center; }
}
.nav-layout { gap: 20px; }
/* Logo: the design's .logo-wrap (170px) on the linked image */
.wp-block-image.logo-wrap { display: block; flex: none; width: 170px; max-width: 170px; margin: 0; }
.wp-block-image.logo-wrap img { display: block; width: 100%; height: auto; }
@media screen and (max-width: 767px) { .wp-block-image.logo-wrap { width: 140px; } }
.nav-layout .nt-buttons { flex: none; }
@media screen and (max-width: 991px) {
	.nav-layout .nt-nav { margin-left: auto; }
	.nt-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 80px 20px 20px; }
	.nt-nav .is-menu-open .wp-block-navigation__container { gap: 20px; }
	.nt-nav .is-menu-open .wp-block-navigation-item__content { font-size: 20px; }
	/* Left-aligned like the original mobile menu (core centers/right-aligns) */
	.nt-nav .is-menu-open .wp-block-navigation__responsive-container-content,
	.nt-nav .is-menu-open .wp-block-navigation__container,
	.nt-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; }
	.nt-nav .is-menu-open .wp-block-navigation__container { margin-left: 0 !important; }
}

/* ---------- Counters: theme.js turns the number into rolling digit columns ---------- */
.nt-counter-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Project/article list blocks sit directly in the layout ---------- */
.nt-block-project-list > .category-layout { margin-bottom: 22px; }

/* ---------- Case study body ---------- */
.wp-block-post-content.nt-project-entry > .wp-block-image:first-child { margin-top: 50px; }