/**
 * Cubbing × Elementor — makes native Elementor layouts match the theme.
 * Loaded only when Elementor is active.
 */

/* ------------------------------------------------------------------
 * 1. Globals follow the live theme tokens (dark/light + style variations)
 * ------------------------------------------------------------------ */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--wp--preset--color--contrast);
	--e-global-color-secondary: var(--wp--preset--color--muted);
	--e-global-color-text: var(--wp--preset--color--muted);
	--e-global-color-accent: var(--wp--preset--color--accent);
	--e-global-color-cb_base: var(--wp--preset--color--base);
	--e-global-color-cb_surface: var(--wp--preset--color--surface);
	--e-global-color-cb_surface_2: var(--wp--preset--color--surface-2);
	--e-global-color-cb_line: var(--wp--preset--color--line);
	--e-global-color-cb_contrast: var(--wp--preset--color--contrast);
	--e-global-color-cb_muted: var(--wp--preset--color--muted);
	--e-global-color-cb_accent: var(--wp--preset--color--accent);
	--e-global-color-cb_accent_text: var(--wp--preset--color--accent-text);
	--e-global-color-cb_on_accent: var(--wp--preset--color--on-accent);
	--e-global-color-cb_success: var(--wp--preset--color--success);
	--e-global-color-cb_ink: var(--wp--preset--color--ink);
	--e-global-color-cb_paper: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------------
 * 2. Let Elementor own the width inside the theme's page template
 * ------------------------------------------------------------------ */
.wp-block-post-content:has(> .elementor) { padding-left: 0 !important; padding-right: 0 !important; }
.wp-block-post-content > .elementor { max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
.elementor a.e-con,
.elementor a.e-con:hover { color: inherit; text-decoration: none; }
.elementor .elementor-widget-heading .elementor-heading-title { text-wrap: balance; }
.elementor .cb-text p { margin: 0 0 .8em; }
.elementor .cb-text p:last-child,
.elementor .cb-text ul:last-child { margin-bottom: 0; }
.elementor .cb-text a { color: var(--wp--preset--color--accent-text); }

/* ------------------------------------------------------------------
 * 3. Type details
 * ------------------------------------------------------------------ */
.cb-accent { color: var(--wp--preset--color--accent-text); }
.cb-eyebrow--dot .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; }
.cb-eyebrow--dot .elementor-heading-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 4px;
	flex: none;
	background: var(--wp--preset--color--success);
	animation: cubbing-pulse 2.4s ease-out infinite;
}
.cb-h1 .elementor-heading-title { text-wrap: balance; }

/* ------------------------------------------------------------------
 * 4. Buttons
 * ------------------------------------------------------------------ */
.cb-btn .elementor-button { transition: transform .25s var(--cubbing-ease), background-color .2s, border-color .2s, color .2s; line-height: 1.2; }
.cb-btn .elementor-button:hover { transform: translateY(-2px); }
.cb-btn--ghost .elementor-button:hover { border-color: var(--wp--preset--color--contrast) !important; }
.cb-btn--arrow .elementor-button-text::after { content: "→"; display: inline-block; margin-left: .6em; transition: transform .2s; }
.cb-btn--arrow .elementor-button:hover .elementor-button-text::after { transform: translateX(4px); }
.cb-btn--wa .elementor-button-text::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: .55em;
	vertical-align: -.2em;
	background: currentColor;
	-webkit-mask: 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='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.7-5A8.5 8.5 0 1 1 8 19.3z'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.7-5A8.5 8.5 0 1 1 8 19.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cb-btn--text .elementor-button,
.cb-btn--text-ink .elementor-button { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cb-btn--text .elementor-button:hover,
.cb-btn--text-ink .elementor-button:hover { transform: none; }
.cb-btn--full { width: 100%; }
.cb-btn--full .elementor-button { width: 100%; justify-content: center; }
.cb-push { margin-top: auto !important; }

/* ------------------------------------------------------------------
 * 5. Frames & media
 * ------------------------------------------------------------------ */
.cb-img img { display: block; width: 100%; height: auto; }
.cb-frame { position: relative; }
.cb-frame--browser {
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface-2);
	padding-top: 34px !important;
	overflow: hidden;
	box-shadow: var(--cubbing-shadow);
}
.cb-frame--browser::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 34px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(circle at 18px 17px, var(--wp--preset--color--line) 4.5px, transparent 5px),
		radial-gradient(circle at 34px 17px, var(--wp--preset--color--line) 4.5px, transparent 5px),
		radial-gradient(circle at 50px 17px, var(--wp--preset--color--line) 4.5px, transparent 5px);
}
.cb-frame--phone {
	width: 100%;
	max-width: 300px;
	margin-inline: auto;
	border-radius: 36px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface-2);
	padding: 10px !important;
	box-shadow: var(--cubbing-shadow);
}
.cb-frame--phone img { border-radius: 26px; }
.cb-frame--plain img { border-radius: 18px; }

.cb-stage { position: relative; overflow: hidden; isolation: isolate; }
.cb-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(var(--wp--preset--color--line) 1px, transparent 1px), linear-gradient(90deg, var(--wp--preset--color--line) 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: .35;
}
.cb-stage .cb-frame--browser { border-bottom: 0; border-radius: 16px 16px 0 0; max-width: 1120px; }
.cb-stage .cb-frame--browser img { max-height: 620px; object-fit: cover; object-position: top; }
.cb-stage--portrait .cb-frame--phone { border-bottom: 0; border-radius: 36px 36px 0 0; padding-bottom: 0 !important; max-width: 320px; }
.cb-stage--portrait .cb-frame--phone img { border-radius: 26px 26px 0 0; max-height: 560px; object-fit: cover; object-position: top; }

/* Cards */
.cb-card { transition: transform .3s var(--cubbing-ease); }
.cb-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 22px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}
.cb-card--boxed .cb-card-media { border-radius: 14px; border: 0; aspect-ratio: 16 / 10; }
.cb-card-media > .cb-card-img,
.cb-card-media > .cb-card-img .elementor-widget-container { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; }
.cb-card-media > .cb-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .45s var(--cubbing-ease); }
.cb-card-media--portrait { background: var(--wp--preset--color--surface-2); }
.cb-card-media--portrait > .cb-card-img img { object-fit: contain; object-position: center; padding: 18px 0; }
.cb-card:hover .cb-card-img img { transform: scale(1.025); }
.cb-card--boxed:hover,
.cb-svc-card:hover,
.cb-ind-card:hover,
.cb-logo-card:hover { border-color: var(--wp--preset--color--muted) !important; }
.cb-svc-card, .cb-ind-card, .cb-logo-card, .cb-card--boxed { transition: border-color .2s, transform .3s var(--cubbing-ease); }
.cb-svc-card:hover, .cb-ind-card:hover { transform: translateY(-4px); }
.cb-card-kind .elementor-heading-title { text-transform: none; letter-spacing: 0; font-size: 12px; white-space: nowrap; }
.cb-logo-card { position: relative; }
.cb-logo-card::after,
.cb-svc-card::after {
	content: "↗";
	position: absolute;
	right: 24px;
	top: 20px;
	font-size: 20px;
	color: var(--wp--preset--color--muted);
	transition: color .2s, transform .2s;
}
.cb-svc-card { position: relative; }
.cb-svc-card::after { right: 32px; top: 30px; }
.cb-svc-card:hover::after,
.cb-logo-card:hover::after { color: var(--wp--preset--color--accent); transform: translate(2px, -2px); }
.cb-svc-card .cb-pills-wrap { margin-top: auto !important; }

/* Badges */
.cb-badge { width: auto !important; }
.cb-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	font-size: 11px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.3 !important;
}
.cb-card-media .cb-badge,
.cb-video .cb-badge { position: absolute !important; left: 16px; top: 16px; z-index: 2; }
.cb-badge--bottom { top: auto !important; bottom: 14px; }
.cb-badge--dot .elementor-heading-title::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--wp--preset--color--success); }
.cb-badge--accent .elementor-heading-title { background: var(--wp--preset--color--accent); border-color: transparent; color: var(--wp--preset--color--on-accent) !important; }
.cb-price { position: relative; overflow: visible !important; }
.cb-badge--top { position: absolute !important; top: -14px; left: 40px; }

/* ------------------------------------------------------------------
 * 6. Rules, rows, bands
 * ------------------------------------------------------------------ */
.cb-rule { border-top: 2px solid var(--wp--preset--color--line); }
.cb-rule--accent { border-top-color: var(--wp--preset--color--accent); }

.cb-stat-band { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.cb-stat-band > .cb-stat + .cb-stat { border-left: 1px solid var(--wp--preset--color--line); }
.cb-stat-band > .cb-stat:first-child { padding-left: 0 !important; }
.cb-counter .elementor-counter { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; text-align: left; }
.cb-counter .elementor-counter-number-wrapper { justify-content: flex-start; font-variant-numeric: tabular-nums; }
.cb-counter .elementor-counter-title { justify-content: flex-start; text-align: left; }
@media (max-width: 767px) {
	.cb-stat-band > .cb-stat + .cb-stat { border-left: 0; }
	.cb-stat-band > .cb-stat { padding-left: 0 !important; border-top: 1px solid var(--wp--preset--color--line); }
	.cb-stat-band > .cb-stat:nth-child(-n + 2) { border-top: 0; }
	.cb-stat-band > .cb-stat:nth-child(even) { padding-left: 16px !important; border-left: 1px solid var(--wp--preset--color--line) !important; }
}

.cb-rows { border-top: 1px solid var(--wp--preset--color--line); }
.cb-row { border-bottom: 1px solid var(--wp--preset--color--line); transition: background-color .2s, padding .25s var(--cubbing-ease); }
.cb-row > .cb-row-n { flex: 0 0 48px; width: 48px !important; }
.cb-row > .cb-row-n--wide { flex: 0 0 110px; width: 110px !important; }
.cb-row > .cb-row-body,
.cb-row > .cb-text { flex: 1 1 auto; }
.cb-row--arrow { position: relative; padding-right: 48px !important; }
.cb-row--arrow::after {
	content: "↗";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	color: var(--wp--preset--color--contrast);
	transition: transform .2s, color .2s;
}
a.cb-row:hover { background: var(--wp--preset--color--surface); padding-left: 24px !important; }
a.cb-row:hover::after { color: var(--wp--preset--color--accent); transform: translate(6px, -50%); }
.cb-sticky { position: sticky; top: 120px; }
@media (max-width: 1024px) { .cb-sticky { position: static; } }

.cb-bars { width: 100%; }
.cb-bars > .cb-bar { width: auto !important; flex: 1 1 0; background: var(--wp--preset--color--surface-2); border: 1px solid var(--wp--preset--color--line); }
.cb-bars > .cb-bar--0 { flex: 3 1 0; background: var(--wp--preset--color--accent); border-color: transparent; }
.cb-bars > .cb-bar--1 { flex: 2 1 0; }
.cb-bars > .cb-bar--2 { background: transparent; border-style: dashed; }
@media (max-width: 767px) { .cb-bars > .cb-bar { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } }

.cb-hairline { overflow: hidden; }
.cb-hairline > .cb-cell { height: 100%; }

.cb-meta-row { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.cb-meta-row > .cb-fact + .cb-fact { border-left: 1px solid var(--wp--preset--color--line); }
.cb-meta-row > .cb-fact:first-child { padding-left: 0 !important; }
@media (max-width: 767px) {
	.cb-meta-row > .cb-fact { padding: 18px 0 !important; border-left: 0 !important; }
	.cb-meta-row > .cb-fact:nth-child(even) { padding-left: 16px !important; border-left: 1px solid var(--wp--preset--color--line) !important; }
	.cb-meta-row > .cb-fact:nth-child(n + 3) { border-top: 1px solid var(--wp--preset--color--line); }
}

.cb-pills { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cb-pills li {
	margin: 0;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
}
.cb-checks .elementor-icon-list-icon i,
.cb-checks .elementor-icon-list-icon svg { color: var(--wp--preset--color--accent); fill: var(--wp--preset--color--accent); }
.cb-checks .elementor-icon-list-text { color: var(--wp--preset--color--contrast); }
.cb-checks--lg .elementor-icon-list-item { padding: 12px 0 !important; border-bottom: 1px solid var(--wp--preset--color--line); }

.cb-band a:not(.elementor-button) { color: var(--wp--preset--color--ink); }
.cb-band .elementor-heading-title .cb-accent { color: inherit; }

.cb-panel .cb-intro { max-width: 760px; }
.cb-video { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--wp--preset--color--line); }
.cb-video img { aspect-ratio: 16 / 9; object-fit: cover; }

.cb-placeholder .elementor-heading-title { text-transform: none; letter-spacing: 0; }

.cb-quote-card { height: 100%; }
.cb-quote .elementor-testimonial-wrapper { text-align: left !important; display: flex; flex-direction: column; gap: 28px; }
.cb-quote .elementor-testimonial-content { margin: 0 !important; text-align: left; }
.cb-quote .elementor-testimonial-meta { text-align: left; margin-top: auto; }
.cb-quote .elementor-testimonial-meta-inner { justify-content: flex-start; }
.cb-quote .elementor-testimonial-details { text-align: left; display: flex; flex-direction: column; gap: 2px; }

.cb-faq .elementor-toggle-item { border-bottom: 1px solid var(--wp--preset--color--line) !important; margin: 0 !important; }
.cb-faq .elementor-toggle-item:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.cb-faq .elementor-tab-title { padding: 26px 0 !important; border: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cb-faq .elementor-tab-title a { color: inherit; }
.cb-faq .elementor-toggle-icon { order: 2; width: auto !important; }
.cb-faq .elementor-tab-content { padding: 0 0 26px !important; border: 0 !important; max-width: 680px; }

.cb-next { transition: border-color .2s; }
.cb-next:hover { border-color: var(--wp--preset--color--muted) !important; }
.cb-next .cb-next-arrow { transition: transform .2s; }
.cb-next:hover .cb-next-arrow { transform: translateX(6px); }

.cb-narrow { max-width: 760px; }
.cb-prose h2, .cb-prose h3 { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--contrast); letter-spacing: -0.03em; line-height: 1.1; margin: 1.6em 0 .6em; }
.cb-prose h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }
.cb-prose h3 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); }
.cb-prose ul, .cb-prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.cb-prose li + li { margin-top: .4em; }

.cb-marquee-head { width: 100%; max-width: 1440px; margin-inline: auto; }
.elementor-widget-cubbing-marquee { width: 100%; }

/* Theme widgets inside Elementor */
.elementor-widget-cubbing-work-grid,
.elementor-widget-cubbing-contact-form,
.elementor-widget-cubbing-hero-showcase,
.elementor-widget-cubbing-section,
.elementor-widget-cubbing-breadcrumbs,
.elementor-widget-cubbing-project-meta { width: 100%; }
.elementor-widget-cubbing-section .wp-block-query { margin: 0; }

@media (max-width: 767px) {
	.cb-frame--browser { padding-top: 26px !important; }
	.cb-frame--browser::before { height: 26px; }
	.cb-logo-card::after { right: 18px; top: 16px; }
}

.cb-intro-row > .cb-buttons,
.cb-hero-foot > .cb-buttons { width: auto !important; flex: 0 0 auto; }
.cb-intro-row > .cb-video { flex: 0 0 auto; max-width: 420px; }
.cb-bars > .cb-bar--2 { flex: 1.6 1 0; }
.cb-bar .elementor-widget-heading { width: auto !important; }
@media (max-width: 767px) {
	.cb-intro-row > .cb-video { max-width: none; width: 100% !important; }
}

.cb-faq .elementor-toggle-icon i { font-size: 16px; }
.cb-faq .elementor-toggle-icon svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
	.cb-hero-foot > .cb-buttons,
	.cb-band .cb-buttons { justify-content: flex-start !important; }
}
