/*
 * Craftlift theme styles.
 * Colours come from Elementor's Global Colors when Elementor is active
 * (--e-global-color-*), with the Craftlift values as fallback.
 * Layout idea: a workshop drawing sheet. Plain blue-grey paper, chalk-line
 * blue for anything that measures or lifts, timber only for measurements.
 */
:root {
	--cl-chalk: var(--e-global-color-primary, #2456D6);
	--cl-ink: var(--e-global-color-secondary, #16202C);
	--cl-muted: var(--e-global-color-text, #5A6676);
	--cl-timber: var(--e-global-color-accent, #B8742A);
	--cl-paper: var(--e-global-color-craftlift_paper, #F2F4F7);
	--cl-dust: var(--e-global-color-craftlift_dust, #E3EAFB);
	--cl-rule: var(--e-global-color-craftlift_rule, #D5DBE3);
	--cl-sheet: var(--e-global-color-craftlift_white, #FFFFFF);
	--cl-display: "Archivo", "Arial Narrow", Arial, sans-serif;
	--cl-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cl-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	--cl-wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--cl-paper);
	color: var(--cl-ink);
	font: 400 17px/1.6 var(--cl-body);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--cl-chalk); }
h1, h2, h3, h4,
.elementor-heading-title {
	font-family: var(--cl-display);
	font-stretch: 118%;
	text-wrap: balance;
}
h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 .5em; color: var(--cl-ink); }
:focus-visible { outline: 2px solid var(--cl-chalk); outline-offset: 3px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.cl-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--cl-ink); color: #fff; padding: 8px 12px; border-radius: 4px; }
.cl-skip:focus { left: 8px; }

.cl-wrap { max-width: var(--cl-wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* ---------- Header ---------- */
.cl-header {
	background: color-mix(in srgb, var(--cl-paper) 90%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--cl-rule);
	z-index: 50;
}
.cl-sticky-header .cl-header { position: sticky; top: 0; }
.admin-bar.cl-sticky-header .cl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar.cl-sticky-header .cl-header { top: 0; } }

.cl-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.cl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cl-ink); }
.cl-mark-bg { fill: var(--cl-chalk); }
.cl-mark-fg { stroke: #fff; }
.cl-wordmark { font-family: var(--cl-display); font-stretch: 125%; font-weight: 760; font-size: 1.35rem; letter-spacing: -.02em; }
.cl-wordmark b { color: var(--cl-chalk); font-weight: inherit; }
.custom-logo { max-height: 44px; width: auto; }

.cl-nav { display: flex; align-items: center; gap: 24px; }
.cl-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.cl-menu a { text-decoration: none; color: var(--cl-muted); font-size: .95rem; }
.cl-menu a:hover, .cl-menu .current-menu-item > a { color: var(--cl-ink); }
.cl-menu .sub-menu { display: none; }
.cl-header-cta {
	display: inline-flex; align-items: center; text-decoration: none;
	font: 600 .95rem/1 var(--cl-body); padding: 12px 18px; border-radius: 6px;
	background: var(--cl-chalk); color: #fff;
}
.cl-header-cta:hover { filter: brightness(1.08); }

.cl-menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--cl-ink); }
.cl-burger, .cl-burger::before, .cl-burger::after {
	display: block; width: 22px; height: 2px; background: currentColor; position: relative; content: ""; transition: transform .2s;
}
.cl-burger::before { position: absolute; top: -7px; }
.cl-burger::after { position: absolute; top: 7px; }
.cl-menu-toggle[aria-expanded="true"] .cl-burger { background: transparent; }
.cl-menu-toggle[aria-expanded="true"] .cl-burger::before { transform: translateY(7px) rotate(45deg); }
.cl-menu-toggle[aria-expanded="true"] .cl-burger::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
	.cl-menu-toggle { display: block; }
	.cl-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 16px;
		background: var(--cl-paper); border-bottom: 1px solid var(--cl-rule);
		padding: 16px clamp(16px, 4vw, 40px) 24px;
	}
	.cl-nav.is-open { display: flex; }
	.cl-menu { flex-direction: column; gap: 14px; }
	.cl-menu a { font-size: 1.05rem; }
	.cl-header-inner { position: relative; }
	.cl-header-cta { justify-content: center; }
}

/* ---------- Footer ---------- */
.cl-footer { border-top: 1px solid var(--cl-rule); padding-block: 28px; color: var(--cl-muted); font-size: .9rem; }
.cl-footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.cl-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.cl-footer-menu a { color: inherit; }

/* ---------- Normal pages and posts ---------- */
.cl-main { padding-block: clamp(40px, 6vw, 80px); }
.cl-main .cl-entry-content, .cl-main > p { max-width: 68ch; }
.cl-page-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 760; }
.cl-entry-summary { padding-block: 24px; border-bottom: 1px solid var(--cl-rule); }
.cl-meta { font: 400 .8rem var(--cl-mono); color: var(--cl-muted); }
.cl-eyebrow, .cl-eyebrow .elementor-heading-title {
	font: 500 .76rem/1.2 var(--cl-mono); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Elementor sections (classes set in the Home template) ---------- */
/* Each class only adds looks Elementor's free controls can't do. Text, colours,
   spacing and order are all editable in Elementor. */
.cl-section { border-top: 1px solid var(--cl-rule); }
.cl-lead p, .cl-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 58ch; }
.cl-note p { font: 400 .85rem/1.5 var(--cl-mono); }
.cl-note p, .cl-lead p { margin: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.cl-btn .elementor-button { font-family: var(--cl-body); font-weight: 600; transition: transform .15s ease; }
.cl-btn .elementor-button:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .cl-btn .elementor-button { transition: none; } }

/* Hero drawing: a sheet of grid paper behind the sail */
.cl-drawing {
	background-color: var(--cl-sheet);
	border: 1px solid var(--cl-rule);
	border-radius: 10px;
	background-image:
		linear-gradient(var(--cl-rule) 1px, transparent 1px),
		linear-gradient(90deg, var(--cl-rule) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: -1px -1px;
}
.cl-sail-svg { display: block; width: 100%; height: auto; }
.cl-sail { fill: var(--cl-dust); stroke: var(--cl-chalk); stroke-width: 2.5; }
.cl-post { stroke: var(--cl-ink); stroke-width: 5; stroke-linecap: round; }
.cl-shadow { fill: var(--cl-ink); opacity: .08; }
.cl-dim { stroke: var(--cl-timber); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.cl-dimtxt { font: 500 12px var(--cl-mono); fill: var(--cl-timber); }
.cl-ptxt { font: 600 12px var(--cl-mono); fill: var(--cl-ink); }
.cl-drawing-bar {
	display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
	background: var(--cl-sheet); border: 1px solid var(--cl-rule); border-radius: 6px;
	padding: 8px 12px; font: 500 .78rem/1.3 var(--cl-mono); color: var(--cl-ink);
}
.cl-drawing-bar span:last-child { color: var(--cl-chalk); }

/* Three-up cards with a ruled top edge */
.cl-grid3 > .e-con, .cl-grid3 > .e-con-inner > .e-con { flex: 1 1 240px; min-width: 0; }
.cl-outcome { border-top: 3px solid var(--cl-ink); }
.cl-step {
	background: var(--cl-sheet); border: 1px solid var(--cl-rule) !important; border-radius: 10px;
	--padding-top: 22px; --padding-right: 22px; --padding-bottom: 22px; --padding-left: 22px;
}

/* Product feature lists: two columns with rule lines */
.cl-features { border-top: 1px solid var(--cl-rule); }
.cl-features > .e-con, .cl-features > .e-con-inner > .e-con { flex: 1 1 calc(50% - 1px); min-width: 0; border-bottom: 1px solid var(--cl-rule); }
@media (max-width: 560px) { .cl-features > .e-con, .cl-features > .e-con-inner > .e-con { flex-basis: 100%; } }
.cl-feature .elementor-widget-text-editor { font-size: .95rem; }

/* Founding partner band */
.cl-band .cl-eyebrow .elementor-heading-title { opacity: .85; }
.cl-band h2.elementor-heading-title { font-size: clamp(1.4rem, 2.6vw, 2rem); }

/* Placeholder box for the contact form */
.cl-formbox { background: var(--cl-sheet); border: 1px dashed var(--cl-rule); border-radius: 10px; }

/* Forms inside the theme (Elementor Pro form, WPForms, CF7) */
.cl-content input[type="text"], .cl-content input[type="email"], .cl-content input[type="tel"], .cl-content textarea {
	font: inherit; color: var(--cl-ink); background: var(--cl-paper);
	border: 1px solid var(--cl-rule); border-radius: 6px; padding: 11px 12px; width: 100%;
}