/* WRKFLW Site Tweaks */

/* ---- Headings that changed tag keep their original look ---- */
.wrk-h4,
.wrk-h5,
.wrk-h6 {
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	color: var(--clb-title-color);
	font-style: var(--clb-title-style);
	text-transform: var(--clb-title-text-transform);
	margin-top: 0;
	margin-bottom: 0;
}
h3.wrk-h4 {
	font-size: clamp(var(--clb-h4-font-size-min), var(--clb-h4-clamp-size), var(--clb-h4-font-size));
	letter-spacing: var(--clb-h4-letter-spacing);
	line-height: var(--clb-h4-line-height);
}
h3.wrk-h5 {
	font-size: clamp(var(--clb-h5-font-size-min), var(--clb-h5-clamp-size), var(--clb-h5-font-size));
	letter-spacing: var(--clb-h5-letter-spacing);
	line-height: var(--clb-h5-line-height);
}
.wrk-h6 {
	font-size: var(--clb-h6-font-size);
	letter-spacing: var(--clb-h6-letter-spacing);
	line-height: var(--clb-h6-line-height);
}
.counter p.title.wrk-h6 { margin-top: .5em; }
.service-table h3.title.wrk-h4 { color: inherit; }
.progress p.label.wrk-h6 { color: inherit; }

/* ---- Typing headline: reserve the height of the longest phrase (no layout shift) ---- */
.dynamic-text.wrk-dt {
	display: grid;
}
.dynamic-text.wrk-dt > .wrk-dt-live,
.dynamic-text.wrk-dt > .wrk-dt-size {
	grid-area: 1 / 1;
}
.dynamic-text.wrk-dt > .wrk-dt-size {
	visibility: hidden;
	pointer-events: none;
	user-select: none;
}
.dynamic-text.wrk-dt > .wrk-dt-size::before {
	content: attr(data-t);
}

/* ---- Hero: subtle particle field replaces the floating chat bubbles ---- */
.wrk-hero .wrk-msg { display: none !important; }
.wrk-hero .wrk-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.wrk-hero .wrk-particles.on { opacity: 1; }

/* ---- Blog cards: show the cover image all the time ---- */
.blog-item.-layout4 .image-holder {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.blog-item.-layout4 .image-holder > a > img.blog-archive-image {
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1.001);
	object-position: center top;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
	filter: saturate(.95);
}
.blog-item.-layout4 .image-holder > a > .overlay {
	opacity: 1 !important;
	background: linear-gradient(180deg, rgba(27, 27, 79, .08) 0%, rgba(27, 27, 79, .3) 32%, rgba(18, 18, 58, .9) 58%, rgba(14, 14, 46, .97) 100%) !important;
}
.blog-item.-layout4:hover .image-holder > a > img.blog-archive-image,
.blog-item.-layout4:focus-within .image-holder > a > img.blog-archive-image {
	transform: scale(1.05);
	filter: saturate(1.05);
}
.blog-item.-layout4 .card-details,
.blog-item.-layout4 .card-details .title,
.blog-item.-layout4 .card-details .title a,
.blog-item.-layout4 .card-details .date,
.blog-item.-layout4 .card-details .post-meta-estimate,
.blog-item.-layout4 .overlay-details .prefix,
.blog-item.-layout4 .overlay-details .author {
	color: #fff !important;
}
.blog-item.-layout4 .card-details .tag {
	background: rgba(255, 255, 255, .16);
	color: #fff !important;
	backdrop-filter: blur(4px);
}

/* ---- Mobile: the full-screen menu (same as desktop) ---- */
@media (max-width: 1024px) {
	.clb-popup.hamburger-nav.wrk-mobile-open {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	html.wrk-menu-lock,
	html.wrk-menu-lock body {
		overflow: hidden;
	}
}

/* ---- Mobile menu: sized for phones, submenu opens in place ---- */
@media (max-width: 1024px) {
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-holder .menu > li > a {
		font-size: clamp(26px, 7.6vw, 34px);
		line-height: 1.15;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open li.has-submenu > .sub-menu {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		display: none;
		padding: .4em 0 .6em 1.1em;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open li.has-submenu.wrk-sub-open > .sub-menu {
		display: block;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .sub-menu a {
		font-size: 19px;
		line-height: 1.9;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open li.wrk-sub-open .has-submenu-icon {
		transform: rotate(45deg);
	}
	html.wrk-menu-lock #hubspot-messages-iframe-container,
	html.wrk-menu-lock .wrk-mcta {
		display: none !important;
	}
}

/* ---- Footer column titles are labels, not headings ---- */
.wrk-footer-title {
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: var(--clb-h6-font-size, 1rem);
	color: var(--clb-title-color);
	margin: 0 0 .75em;
}

/* ---- Contact form privacy note (replaces the old tick box) ---- */
.wpcf7 .wrk-f-note {
	font-size: 13px;
	line-height: 1.5;
	opacity: .8;
	margin: .25em 0 1em;
}

/* ---- Mobile: shorter page, same content ---- */
@media (max-width: 767px) {
	/* Decorative illustrations outside the hero */
	.e-con:not(.wrk-hero .e-con):has(> .elementor-widget-html .wrk-ill-img) {
		display: none !important;
	}

	/* Sections with a background colour get proper breathing room */
	.elementor > .e-con.e-parent[data-settings*="background_background"]:not(.wrk-hero) {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}

	/* Stats sit two to a row (only groups made purely of counters) */
	.e-con:not(#wrk-x):has(> .e-con > .elementor-widget-ohio_counter):not(:has(> .e-con:not(:has(> .elementor-widget-ohio_counter)))) {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 20px 0 !important;
	}
	.e-con:not(#wrk-x):has(> .e-con > .elementor-widget-ohio_counter):not(:has(> .e-con:not(:has(> .elementor-widget-ohio_counter)))) > .e-con {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		border: 0 !important;
	}

	/* "Small jobs" service cards: stacked, a little more compact */
	.e-con:has(> .e-con > .elementor-widget-ohio_icon_box) {
		gap: 12px !important;
	}
	.elementor-widget-ohio_icon_box .ohio-widget.icon-box {
		padding: 22px 20px !important;
	}
	.progress.-tooltip .progress-percent.tooltip {
		display: none !important;
	}
	.ohio-widget.progress {
		overflow: hidden;
	}

	/* Pricing: stacked (no sideways scroll) */
	.e-con:not(#wrk-x):has(> .e-con > .elementor-widget-ohio_pricing_table) {
		gap: 20px !important;
	}

	/* Case studies and client reviews swipe sideways */
	.elementor-widget-ohio_recent_projects:not(#wrk-x) .portfolio-grid,
	.elementor-228093:not(#wrk-x) > .e-con > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px !important;
		padding-bottom: 14px !important;
		scrollbar-width: none;
		height: auto !important;
	}
	.elementor-widget-ohio_recent_projects:not(#wrk-x) .portfolio-grid::-webkit-scrollbar,
	.elementor-228093:not(#wrk-x) > .e-con > .e-con-inner::-webkit-scrollbar {
		display: none;
	}
	.elementor-widget-ohio_recent_projects:not(#wrk-x) .portfolio-grid > .grid-item,
	.elementor-228093:not(#wrk-x) > .e-con > .e-con-inner > .e-con {
		flex: 0 0 86% !important;
		width: 86% !important;
		max-width: 86% !important;
		scroll-snap-align: start;
	}
	.elementor-widget-ohio_recent_projects:not(#wrk-x) .portfolio-grid > .grid-item {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.elementor-228093:not(#wrk-x) > .e-con > .e-con-inner > .e-con > .e-con {
		height: 100%;
	}
	.elementor-228093 .ohio-widget.badge {
		white-space: normal !important;
		max-width: 100%;
		line-height: 1.35;
		height: auto;
	}

	/* Case study cards: tidy text under each image */
	.elementor-widget-ohio_recent_projects .card-details {
		padding-top: 14px;
	}
	.elementor-widget-ohio_recent_projects .card-details .title {
		font-size: 20px !important;
		line-height: 1.25 !important;
		margin-bottom: 6px !important;
	}
	.elementor-widget-ohio_recent_projects .card-details .category-holder,
	.elementor-widget-ohio_recent_projects .card-details .category-holder a {
		font-size: 13px !important;
		color: #5b5b86 !important;
	}
	.elementor-widget-ohio_recent_projects .card-details .project-details,
	.elementor-widget-ohio_recent_projects .card-details p {
		font-size: 15px !important;
		line-height: 1.55 !important;
		color: #3a3a5c;
	}

	/* "Tell us what's eating your week" block */
	#get-started > .e-con-inner > .e-con,
	#get-started > .e-con {
		padding: 32px 18px 24px !important;
		border-radius: 20px;
	}
}

/* Blog cards: when the text sits under the image (phones, narrow cards) give it the dark card */
.blog-item.-layout4 .image-holder,
.blog-item.-layout4 {
	background: #1b1b4f !important;
	border-radius: 20px;
	overflow: hidden;
}

/* Pricing cards: equal heights on desktop */
@media (min-width: 768px) {
	.e-con:has(> .e-con > .elementor-widget-ohio_pricing_table) {
		align-items: stretch !important;
	}
	.e-con:has(> .e-con > .elementor-widget-ohio_pricing_table) > .e-con:has(> .elementor-widget-ohio_pricing_table) {
		display: flex !important;
		flex-direction: column !important;
	}
	.e-con > .elementor-widget-ohio_pricing_table {
		flex-grow: 1;
	}
	.elementor-widget-ohio_pricing_table > .elementor-widget-container,
	.elementor-widget-ohio_pricing_table .pricing-table {
		height: 100%;
	}
	.elementor-widget-ohio_pricing_table .pricing-table {
		display: flex;
		flex-direction: column;
	}
	.elementor-widget-ohio_pricing_table .pricing-table .pricing-table-features {
		flex-grow: 1;
	}
}

/* Old sticky "Book a free call" bar on phones: retired (the button lives in the menu now) */
.wrk-mcta { display: none !important; }

/* ---- Mobile menu layout ---- */
@media (max-width: 1024px) {
	.clb-popup.hamburger-nav.wrk-mobile-open {
		background: #0e0e2e !important;
		backdrop-filter: none !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		padding: 0 !important;
		overflow-y: auto;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .close-bar {
		position: fixed !important;
		top: calc(14px + var(--wp-admin--admin-bar--height, 0px));
		right: 14px !important;
		left: auto !important;
		width: auto !important;
		padding: 0 !important;
		z-index: 10;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-holder {
		padding: 88px 24px 8px !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		display: block !important;
		position: static !important;
		transform: none !important;
		top: auto !important;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-holder > .menu {
		margin: 0 !important;
		width: 100% !important;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-holder .menu > li > a {
		white-space: nowrap;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-details,
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-details a {
		color: rgba(255, 255, 255, .72) !important;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-details b {
		color: #fff;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .wrk-menu-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin: 22px 24px 0;
		padding: 15px 22px;
		border-radius: 999px;
		background: #0a6cf0;
		color: #fff !important;
		font-family: 'DM Sans', sans-serif;
		font-weight: 500;
		font-size: 17px;
		text-decoration: none;
		box-shadow: 0 10px 30px rgba(10, 108, 240, .35);
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .wrk-menu-cta svg {
		width: 18px;
		height: 18px;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-details {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 18px 20px;
		margin: auto 24px 0 !important;
		padding: 22px 0 calc(22px + env(safe-area-inset-bottom)) !important;
		border-top: 1px solid rgba(255, 255, 255, .12);
		width: auto !important;
		position: static !important;
		font-size: 14px;
		line-height: 1.55;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-details .details-column {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		word-break: break-word;
	}
	.clb-popup.hamburger-nav.wrk-mobile-open .hamburger-nav-details .social-networks {
		grid-column: 1 / -1;
		display: flex;
		gap: 14px;
	}
}
@media (min-width: 1025px) {
	.wrk-menu-cta { display: none !important; }
}

/* ---- Theme page-title bar when the page already has its own H1 ---- */
.page-headline p.title.wrk-h1 {
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	color: var(--clb-title-color);
	font-size: clamp(var(--clb-h1-font-size-min), var(--clb-h1-clamp-size), var(--clb-h1-font-size));
	line-height: var(--clb-h1-line-height);
	letter-spacing: var(--clb-h1-letter-spacing);
	margin: 0;
}

h2.wrk-h4 {
	font-size: clamp(var(--clb-h4-font-size-min), var(--clb-h4-clamp-size), var(--clb-h4-font-size));
	letter-spacing: var(--clb-h4-letter-spacing);
	line-height: var(--clb-h4-line-height);
}
p.wrk-h5 {
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	color: var(--clb-title-color);
	font-size: clamp(var(--clb-h5-font-size-min), var(--clb-h5-clamp-size), var(--clb-h5-font-size));
	letter-spacing: var(--clb-h5-letter-spacing);
	line-height: var(--clb-h5-line-height);
	margin: 0;
}

h2.wrk-h3 {
	font-size: clamp(var(--clb-h3-font-size-min), var(--clb-h3-clamp-size), var(--clb-h3-font-size));
	letter-spacing: var(--clb-h3-letter-spacing);
	line-height: var(--clb-h3-line-height);
}

/* Typing cursor drawn by CSS on the typed text itself: the theme's separate cursor
   element jumps between lines as words wrap, which browsers count as layout shift. */
.dynamic-text.wrk-dt .typed-cursor {
	display: none !important;
}
.dynamic-text.wrk-dt .wrk-dt-live .dynamic {
	border-right: .055em solid currentColor;
	padding-right: .04em;
	animation: wrk-caret 1s step-end infinite;
}
@keyframes wrk-caret {
	50% { border-right-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.dynamic-text.wrk-dt .wrk-dt-live .dynamic { animation: none; }
}

/* The theme's demo social links (they point to the theme author, not WRKFLW) */
.hamburger-nav-details .social-networks {
	display: none !important;
}

/* Pricing: the small print under each card gets the same space, so the cards line up */
@media (min-width: 768px) {
	.e-con > .elementor-widget-ohio_pricing_table + .elementor-widget-text-editor {
		min-height: 4.4em;
	}
}