/*
 * Digi Tech design layer for Elementor.
 *
 * Colours, fonts, sizes and spacing are set in Elementor (Site Settings and each widget), so they stay editable.
 * This file only adds what Elementor's free panel cannot express: hover/motion behaviour, a few layout helpers
 * toggled through "CSS Classes" (Advanced tab), and styling for non-Elementor views (blog posts, archives, search).
 * Selectors use :where() so any value set in Elementor wins.
 */

:root {
	--dt-primary: var(--e-global-color-primary, #0066FF);
	--dt-dark: var(--e-global-color-secondary, #0B1F3A);
	--dt-text: var(--e-global-color-text, #172033);
	--dt-muted: var(--e-global-color-dtmuted, #5F6B7A);
	--dt-border: var(--e-global-color-dtborder, #E5EAF0);
	--dt-light: var(--e-global-color-dtlight, #EAF4FF);
	--dt-bg: var(--e-global-color-dtbg, #F7FAFD);
	--dt-radius: 16px;
	--dt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dt-shadow: 0 1px 2px rgba(11, 31, 58, 0.04), 0 8px 24px rgba(11, 31, 58, 0.06);
	--dt-shadow-hover: 0 2px 4px rgba(11, 31, 58, 0.05), 0 18px 40px rgba(11, 31, 58, 0.1);
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: "Inter", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(body) { color: var(--dt-text); background: #fff; }
img { max-width: 100%; height: auto; }

/* Focus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--dt-primary);
	outline-offset: 3px;
	border-radius: 4px;
}
.skip-link.screen-reader-text:focus { z-index: 100000; background: #fff; color: var(--dt-dark); padding: 12px 18px; border-radius: 8px; box-shadow: var(--dt-shadow-hover); }

/* ---------- Header (Header & Footer Builder) ---------- */
#masthead,
.ehf-header #masthead { position: sticky; top: 0; z-index: 900; background: #fff; transition: box-shadow 0.25s var(--dt-ease); }
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar #masthead { top: 0; } }
.dt-scrolled #masthead { box-shadow: 0 1px 0 var(--dt-border), 0 10px 30px rgba(11, 31, 58, 0.06); }
#masthead .dt-header { overflow-x: clip; }
.dte-main { display: block; }
.dte-main:focus { outline: 0; }
#masthead .hfe-nav-menu__toggle { cursor: pointer; }
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item { transition: color 0.2s var(--dt-ease); }
@media (max-width: 1024px) {
	#masthead .hfe-nav-menu__layout-horizontal { box-shadow: 0 18px 40px rgba(11, 31, 58, 0.12); border-top: 1px solid var(--dt-border); }
}

/* ---------- Helpers toggled with "CSS Classes" ---------- */

/* Eyebrow label with leading rule. */
.dt-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.dt-eyebrow .elementor-heading-title::before { content: ""; width: 20px; height: 2px; background: currentColor; border-radius: 2px; flex-shrink: 0; }
.dt-eyebrow--center .elementor-heading-title { justify-content: center; }

/* Cards that lift on hover. */
.dt-lift { transition: transform 0.25s var(--dt-ease), box-shadow 0.25s var(--dt-ease), border-color 0.25s var(--dt-ease); }
.dt-lift:hover { transform: translateY(-4px); box-shadow: var(--dt-shadow-hover); border-color: rgba(0, 102, 255, 0.35) !important; }
.dt-shadow { box-shadow: var(--dt-shadow); }

/* Image scale on hover (card or image widget). */
.dt-zoom .elementor-widget-image, .dt-zoom.elementor-widget-image { overflow: hidden; border-radius: inherit; }
.dt-zoom img { transition: transform 0.3s var(--dt-ease); }
.dt-zoom:hover img { transform: scale(1.04); }

/* Arrow nudges right on hover (buttons with an icon at the end). */
.dt-arrow .elementor-button-icon { transition: transform 0.2s var(--dt-ease); }
.dt-arrow .elementor-button:hover .elementor-button-icon,
.dt-arrow .elementor-button:focus-visible .elementor-button-icon,
.dt-lift:hover .dt-arrow .elementor-button-icon { transform: translateX(4px); }

/* Text-style link button. */
.dt-link .elementor-button { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.dt-link .elementor-button:hover .elementor-button-text { text-decoration: underline; text-underline-offset: 4px; }

/* Rounded media with border. */
.dt-media img { width: 100%; border-radius: var(--dt-radius); border: 1px solid var(--dt-border); box-shadow: var(--dt-shadow); display: block; }

/* Icon list chips (inline). */
.dt-chips .elementor-icon-list-items { gap: 10px; }
.dt-chips .elementor-icon-list-item { margin: 0 !important; padding: 7px 14px !important; border: 1px solid var(--dt-border); border-radius: 999px; background: #fff; }
.dt-chips .elementor-icon-list-item::after { display: none !important; }

/* Strategy flow: inline items joined by arrows. */
.dt-flow .elementor-icon-list-items { gap: 8px 6px; }
.dt-flow .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.dt-flow .elementor-icon-list-item::after { display: none !important; }
.dt-flow .elementor-icon-list-item:last-child .elementor-icon-list-text { color: var(--dt-primary); font-weight: 700; }

/* Process steps with connecting line. */
.dt-step { position: relative; }
@media (min-width: 1025px) {
	.dt-steps > .e-con-inner > .dt-step:not(:last-child)::after,
	.dt-steps > .dt-step:not(:last-child)::after {
		content: ""; position: absolute; top: 27px; left: 64px; right: -20px; height: 2px;
		background: linear-gradient(90deg, var(--dt-primary), var(--dt-border));
	}
}
.dt-step-num .elementor-heading-title { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--dt-primary); background: #fff; position: relative; z-index: 1; transition: background-color 0.2s var(--dt-ease), color 0.2s var(--dt-ease); }
.dt-step:hover .dt-step-num .elementor-heading-title { background: var(--dt-primary); color: #fff !important; }

/* Editorial / masonry gallery. */
.dt-masonry { grid-auto-rows: 180px; grid-auto-flow: dense; }
.dt-masonry > .elementor-element, .dt-masonry > .e-con-inner > .elementor-element { position: relative; overflow: hidden; border-radius: var(--dt-radius); min-height: 0; }
.dt-masonry .elementor-widget-image, .dt-masonry .elementor-widget-image > .elementor-widget-container { height: 100%; }
.dt-masonry img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.3s var(--dt-ease); }
.dt-masonry .elementor-element:hover img { transform: scale(1.04); }
.dt-masonry figcaption.widget-image-caption { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 6px 12px; background: rgba(255, 255, 255, 0.94); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--dt-dark); }
.dt-masonry figure.wp-caption { height: 100%; margin: 0; }
@media (min-width: 768px) {
	.dt-tall { grid-row: span 2; }
	.dt-wide { grid-column: span 2; }
}
@media (max-width: 767px) {
	.dt-masonry { grid-auto-rows: 200px; }
}

/* Portfolio filter. */
.dt-filters .elementor-button { transition: background-color 0.2s var(--dt-ease), color 0.2s var(--dt-ease), border-color 0.2s var(--dt-ease); }
.dt-filters .dt-filter.is-active .elementor-button { background-color: var(--dt-dark) !important; border-color: var(--dt-dark) !important; color: #fff !important; }
.dt-filters .dt-filter.is-active .elementor-button .elementor-button-text { color: #fff; }
.dt-work.is-hidden { display: none !important; }
@media (max-width: 767px) {
	.dt-filters { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.dt-filters::-webkit-scrollbar { display: none; }
	.dt-filters > .elementor-element { flex-shrink: 0; }
}

/* Technology logo tiles. */
.dt-logo-tile .elementor-image-box-img img { transition: transform 0.25s var(--dt-ease); }
.dt-logo-tile:hover .elementor-image-box-img img { transform: scale(1.06); }

.hfe-nav-menu .current-page-ancestor > a.hfe-menu-item { color: var(--dt-primary); }

/* Width limits and grid helpers. */
.dt-maxw-760 { max-width: 760px; }
.dt-maxw-860 { max-width: 860px; }
.dt-maxw-980 { max-width: 980px; }
.e-con.dt-center { margin-inline: auto; text-align: center; }
@media (min-width: 768px) {
	.dt-two-col .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
	.dt-two-col .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
}
@media (min-width: 1025px) {
	.dt-span2x2 { grid-column: span 2; grid-row: span 2; position: relative; min-height: 280px; }
	.dt-span2x2 .elementor-widget-container,
	.dt-span2x2 img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
}
@media (max-width: 767px) {
	.dt-span-all-m { grid-column: 1 / -1; }
}
.dt-chips--dark .elementor-icon-list-item { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.dt-chips--dark .elementor-icon-list-text { color: #fff; }

/* Placeholder note, visible only inside the Elementor editor. */
.dt-editor-note { display: none; }
.elementor-editor-active .dt-editor-note { display: block; }

/* Floating contact button. */
.dt-float { position: fixed !important; right: 20px; bottom: 20px; z-index: 950; width: auto !important; }
.dt-float .elementor-button { box-shadow: 0 10px 30px rgba(11, 31, 58, 0.25); }
@media (max-width: 767px) { .dt-float .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .dt-float .elementor-button { padding: 16px !important; border-radius: 50% !important; } }

/* Dark CTA glow. */
.dt-cta { position: relative; overflow: hidden; isolation: isolate; }
.dt-cta::before { content: ""; position: absolute; width: 640px; height: 640px; right: -180px; top: -260px; background: radial-gradient(circle, rgba(0, 133, 255, 0.35), transparent 65%); z-index: -1; pointer-events: none; }

/* Accordion polish. */
.dt-faq .e-n-accordion-item { border-bottom: 1px solid var(--dt-border); }
.dt-faq .e-n-accordion-item-title { transition: color 0.2s var(--dt-ease); }
.dt-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--dt-primary); }

/* Fluent Forms inside the contact card. */
.dt-form .ff-el-group { margin-bottom: 18px; }
.dt-form .ff-el-input--label label { font-weight: 600; font-size: 14px; color: var(--dt-text); }
.dt-form .ff-el-form-control { border: 1px solid var(--dt-border) !important; border-radius: 10px !important; padding: 12px 14px !important; font: inherit !important; font-size: 15px !important; background: #fff !important; transition: border-color 0.2s, box-shadow 0.2s; }
.dt-form .ff-el-form-control:focus { border-color: var(--dt-primary) !important; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15) !important; outline: none; }
.dt-form .ff-btn-submit { background: var(--dt-primary) !important; border-radius: 10px !important; padding: 14px 26px !important; font: 600 15px/1 "Inter", Arial, sans-serif !important; transition: background-color 0.2s; }
.dt-form .ff-btn-submit:hover { background: var(--dt-dark) !important; }
.dt-form .ff-message-success { border: 1px solid #b7e1c1; background: #f0faf2; color: #14532d; border-radius: 10px; padding: 16px 18px; box-shadow: none; }
.dt-form .error.text-danger { font-size: 13px; }

/* Footer */
.dt-footer a { transition: color 0.2s var(--dt-ease); }
.dt-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #fff !important; }

/* ---------- Entrance motion (Elementor Motion Effects) ---------- */
.elementor-element.animated { animation-duration: 0.3s; animation-timing-function: var(--dt-ease); }
.elementor-element.animated.fadeInUp { animation-name: dtFadeUp; }
@keyframes dtFadeUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
/* Keep not-yet-animated content in the accessibility tree (Elementor hides it with visibility). */
.elementor-invisible { visibility: visible !important; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.elementor-invisible { opacity: 1; }
	.dt-lift:hover, .dt-zoom:hover img, .dt-masonry .elementor-element:hover img { transform: none; }
}

/* ---------- WordPress views not built with Elementor (posts, archives, search) ---------- */
body:not(.elementor-page) .site-main {
	max-width: 1328px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) 24px;
}
.site-main .page-header { margin-bottom: 40px; text-align: start; }
.site-main .page-header .entry-title { margin-inline: 0; }
.site-main .page-header .entry-title,
.single-post .site-main .entry-title { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; color: var(--dt-dark); max-width: 900px; }

/* Single post */
.dte-post { max-width: 820px; margin: 0 auto; }
.dte-post__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 18px 0 32px; color: var(--dt-muted); font-size: 15px; }
.dte-post__cat, a.dte-post__cat { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--dt-light); color: #0057E0; font-size: 13px; font-weight: 600; text-decoration: none; }
.dte-post__image { margin: 0 0 40px; }
.dte-post__image img { width: 100%; border-radius: var(--dt-radius); border: 1px solid var(--dt-border); display: block; }
.dte-post__content { font-size: 18px; line-height: 1.75; color: var(--dt-text); }
.dte-post__content h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2em 0 0.6em; letter-spacing: -0.02em; color: var(--dt-dark); }
.dte-post__content h3 { font-size: 1.35rem; margin: 1.6em 0 0.5em; color: var(--dt-dark); }
.dte-post__content p, .dte-post__content ul, .dte-post__content ol { margin: 0 0 1.25em; }
.dte-post__content li { margin-bottom: 0.5em; }
.dte-post__content a { color: var(--dt-primary); text-decoration: underline; text-underline-offset: 3px; }
.dte-breadcrumbs { font-size: 14px; color: var(--dt-muted); margin-bottom: 18px; }
.dte-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.dte-breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--dt-border); }
.dte-breadcrumbs a { color: var(--dt-muted); text-decoration: none; }
.dte-breadcrumbs a:hover { color: var(--dt-primary); }
.dte-post__back { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--dt-border); }
.dte-post__back a { font-weight: 600; color: var(--dt-primary); text-decoration: none; }

/* Archive + search lists */
.dte-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dte-card { display: flex; flex-direction: column; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); overflow: hidden; background: #fff; transition: transform 0.25s var(--dt-ease), box-shadow 0.25s var(--dt-ease); }
.dte-card:hover { transform: translateY(-4px); box-shadow: var(--dt-shadow-hover); }
.dte-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.dte-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dte-card__meta { font-size: 13px; color: var(--dt-muted); }
.dte-card__title { font-size: 20px; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
.dte-card__title a { color: var(--dt-dark); text-decoration: none; }
.dte-card__title a::after { content: ""; position: absolute; inset: 0; }
.dte-card { position: relative; }
.dte-card__excerpt { color: var(--dt-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.dte-search-form { display: flex; gap: 10px; max-width: 560px; margin-top: 24px; }
.dte-search-form input[type="search"] { flex: 1; border: 1px solid var(--dt-border); border-radius: 10px; padding: 12px 14px; font: inherit; }
.dte-search-form button { border: 0; border-radius: 10px; padding: 12px 22px; background: var(--dt-primary); color: #fff; font: 600 15px/1 "Inter", Arial, sans-serif; cursor: pointer; }
.dte-search-form button:hover { background: var(--dt-dark); }
.dte-empty { color: var(--dt-muted); font-size: 18px; }
.site-main .pagination, .site-main .nav-links { display: flex; gap: 8px; margin-top: 40px; }
.site-main .page-numbers { padding: 8px 14px; border: 1px solid var(--dt-border); border-radius: 8px; text-decoration: none; color: var(--dt-text); }
.site-main .page-numbers.current { background: var(--dt-primary); border-color: var(--dt-primary); color: #fff; }

/* HFE basic posts widget cards */
.dt-posts .hfe-post-card, .dt-posts article { border-radius: var(--dt-radius); transition: transform 0.25s var(--dt-ease), box-shadow 0.25s var(--dt-ease); }
.dt-posts .hfe-post-card:hover, .dt-posts article:hover { transform: translateY(-4px); box-shadow: var(--dt-shadow-hover); }