/* ==========================================================================
   Theme overrides on top of site.css (Webflow design) and projects.css.
   ========================================================================== */

/* ---------- Images ----------
   WordPress prints width/height attributes on every image. Webflow's CSS sets
   widths (e.g. .projects-item-thumb { width: 100% }) but never height, so the
   fixed height attribute would stretch the image. Keep the aspect ratio.
   :where() keeps specificity at zero so intentional crops (v2 cards) still win. */
:where(img[width][height]) { height: auto; }

/* ---------- Mobile nav (was a Webflow interaction) ---------- */
@media screen and (max-width: 991px) {
	.nav-section { position: relative; z-index: 50; }
	.nav-section.is-open .nav-middle { display: flex; }
	.nav-open { transition: background-color 0.2s; }
	.nav-bar { transition: transform 0.25s, opacity 0.25s; }
	.nav-section.is-open .nav-bar._1 { transform: translateY(6px) rotate(45deg); }
	.nav-section.is-open .nav-bar._2 { opacity: 0; }
	.nav-section.is-open .nav-bar._3 { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- Expandable services / FAQ (were Webflow interactions) ---------- */
.service-item-body,
.faq-item-body {
	height: 0;
	transition: height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Home page services: the right column only holds an image the design hides,
   so let the text span the full width of the item instead of a 400px column. */
.service-section .service-right { display: none; }
.service-section .service-left { max-width: none; width: 100%; }

.service-item-icon-1, .service-item-icon-2,
.faq-item-icon-1, .faq-item-icon-2 { transition: opacity 0.25s; }
.service-item.is-open .service-item-icon-1,
.faq-item.is-open .faq-item-icon-1 { opacity: 1; }
.service-item.is-open .service-item-icon-2,
.faq-item.is-open .faq-item-icon-2 { opacity: 0; }
.service-item-heading:focus-visible,
.faq-item-heading:focus-visible,
.nav-open:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.service-item-body, .faq-item-body { transition: none; }
}

/* ---------- Client logo marquee (was a Webflow interaction) ----------
   Each row (.brand-marquee-1 / -2) holds two groups of *different* logos.
   Webflow slid each group by its own width, so groups of different widths moved
   at different speeds and drifted into each other (overlapping logos).
   theme.js instead duplicates the row's logos once and slides the whole strip by
   exactly one set (-50%), which loops seamlessly. Speeds match the live site:
   ~38px/s left (top row), ~48px/s right (bottom row); set via --nt-marquee-duration. */
@keyframes nt-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nt-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.brand-marquee-1.is-marquee,
.brand-marquee-2.is-marquee { width: max-content; justify-content: flex-start; will-change: transform; }
/* Rows now size to their content, so a logo with no declared size (Cala's SVG)
   collapses to 0px wide. Declare the 48px logo height for every logo
   (the small arrow icon keeps its natural size). */
.is-marquee .brand-item img:not([src*="arrow-left"]) { height: 48px; width: auto; }
.brand-marquee-1.is-marquee { animation: nt-marquee-left var(--nt-marquee-duration, 60s) linear infinite; }
.brand-marquee-2.is-marquee { animation: nt-marquee-right var(--nt-marquee-duration, 60s) linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.brand-marquee-1.is-marquee, .brand-marquee-2.is-marquee { animation: none; }
}

/* ---------- Fade-up on scroll (was a Webflow interaction) ----------
   Measured on the live site: starts ~100px low and transparent, eases into
   place over ~1s. Only applies when JS is running (html.nt-js), so content is
   never hidden if the script fails. theme.js adds .is-revealed on scroll-in.
   Keep this list in sync with REVEAL in theme.js. */
.nt-js :is(
	.p-hero-title-wrap,
	.c-sub-title-wrap,
	.common-title-wrap,
	.hero-text-wrap,
	.hero-btn-wrap,
	.hero-thumb-wrap,
	.hero-about-layout,
	.about-title-wrap,
	.about-text-wrap,
	.about-text-wrap-2,
	.about-text-wrap-3,
	.about-thumb-wrap,
	.brand-layout,
	.service-item,
	.values-item,
	.faq-item,
	.cta-btn-wrap,
	.category-layout,
	.projects-layout,
	.projects-layout-2,
	.projects-layout-3,
	.nt-projects,
	.blogs-layout,
	.d-blogs-item-right,
	.b-details-thumb-wrap,
	.b-details-rich-text-wrap,
	.nt-project-entry,
	.contact-form,
	.contact-info-wrap,
	.contact-map-wrap
) {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
	transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.nt-js .is-revealed { opacity: 1; transform: none; }

/* ---------- About page counters: digits roll for 2s (linear), like Webflow ---------- */
@keyframes nt-roll-up { from { transform: translateY(0); } to { transform: translateY(-400%); } }
@keyframes nt-roll-down { from { transform: translateY(0); } to { transform: translateY(400%); } }
.nt-js .about-counter-wrap.is-revealed .upper-movement-inner .counter-item-number,
.nt-js .about-counter-wrap.is-revealed .lower-movement-inner .counter-item-number { animation: nt-roll-up 2s linear both; }
.nt-js .about-counter-wrap.is-revealed .middle-movement-inner .counter-item-number { animation: nt-roll-down 2s linear both; }

@media (prefers-reduced-motion: reduce) {
	.nt-js .about-counter-wrap .counter-item-number { animation: none !important; }
}

/* ---------- Filtered article cards ---------- */
.blogs-item[hidden] { display: none; }

/* ---------- Article body (block editor output inside .blog-rich-text) ---------- */
.nt-entry > * + * { margin-top: 0; }
.nt-entry figure { margin: 32px 0; }
.nt-entry img { max-width: 100%; height: auto; border-radius: 8px; }
.nt-entry ul, .nt-entry ol { margin: 0 0 24px; padding-left: 24px; }
.nt-entry a { color: var(--primary); }
.nt-entry .wp-block-embed iframe { width: 100%; }

/* ---------- Case study body: text column + full-width screenshots ---------- */
.nt-project-entry { margin-top: 0; }
.nt-project-entry > .wp-block-image {
	margin: 52px 0 0;
	border: 1px solid var(--grey);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 5px #0003;
}
/* First image is the full-site screenshot: show it in a scrollable frame, like Webflow */
.nt-project-entry > .wp-block-image:first-child {
	margin-top: 50px;
	height: 600px;
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.nt-project-entry > .wp-block-image img { display: block; width: 100%; height: auto; }
.nt-project-entry > :not(.wp-block-image) { width: 70%; }
.nt-project-entry > h2 {
	font-size: var(--_font-size---fz-32);
	margin: 60px 0 24px;
}
.nt-project-entry > .wp-block-image + h2 { margin-top: 60px; }
@media screen and (max-width: 991px) {
	.nt-project-entry > :not(.wp-block-image) { width: auto; }
	.nt-project-entry > h2 { font-size: var(--_font-size---fz-26); margin: 40px 0 20px; }
}

/* ---------- Contact form ---------- */
.nt-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-us-wrap .success-message { padding: 20px; border-radius: 8px; }
.contact-us-wrap .error-message { margin-top: 16px; border-radius: 8px; }
.contact-us-btn .btn-icon svg { width: 100%; height: 100%; }

/* ---------- Buttons rendered by nt_button() ---------- */
.btn-icon svg { display: block; width: 100%; height: 100%; }

/* ---------- Admin bar shouldn't cover the nav ---------- */
.admin-bar .nav-section { top: 0; }