/* Stacksole WordPress Development page: page-specific additions.
 * Builds on stacksole-seo.css (shared design system) and stacksole-shopify.css
 * (shared components). Adds the website mock-up, service rows, code-editor
 * visual and industry tiles. Scoped to the .sk section classes. */

.sk {
	--i-heart: 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='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
	--i-home: 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 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
	--i-book: 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='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
	--i-globe: 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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
	--i-coffee: 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='M18 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/%3E%3Cpath d='M6 1v3'/%3E%3Cpath d='M10 1v3'/%3E%3Cpath d='M14 1v3'/%3E%3C/svg%3E");
	--i-users: 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='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--i-cpu: 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%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3'/%3E%3C/svg%3E");
	--i-film: 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%3Crect x='2' y='2' width='20' height='20' rx='2.18' ry='2.18'/%3E%3Cpath d='M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5'/%3E%3C/svg%3E");
	--i-message: 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='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
}

.sk-i-heart { --ic: var(--i-heart); }
.sk-i-home { --ic: var(--i-home); }
.sk-i-book { --ic: var(--i-book); }
.sk-i-globe { --ic: var(--i-globe); }
.sk-i-coffee { --ic: var(--i-coffee); }
.sk-i-users { --ic: var(--i-users); }
.sk-i-cpu { --ic: var(--i-cpu); }
.sk-i-film { --ic: var(--i-film); }
.sk-i-message { --ic: var(--i-message); }

/* Page frame: hide the theme banner, let the sections span the page */
body.page-id-6876 .page-title-wrapper {
	display: none;
}

body.page-id-6876 .convis-content-area,
body.page-id-6876 .convis-content-area > .container,
body.page-id-6876 .convis-content-area .content-area,
body.page-id-6876 .convis-content-area .page-inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

/* Hero: website mock-up */
.sk.sk-hero-long h1 {
	font-size: clamp(2.35rem, 1rem + 3.6vw, 3.75rem);
}

.sk .sk-site {
	padding: 18px 20px 22px;
	font-size: 12px;
	color: var(--sk-navy);
}

.sk .sk-site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sk .sk-site-nav nav {
	display: flex;
	gap: 18px;
	font-weight: 500;
	color: var(--sk-muted);
}

.sk .sk-site-hero {
	margin-top: 16px;
	padding: 26px 24px;
	border-radius: 16px;
	background: var(--sk-blue-t);
}

.sk .sk-site-hero small {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sk-blue);
}

.sk .sk-site-hero strong {
	display: block;
	max-width: 14em;
	margin: 8px 0 14px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.025em;
}

.sk .sk-site-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
}

.sk .sk-site-cols div i {
	display: block;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 12px;
	background: #eef2f8;
}

.sk .sk-site-cols div b {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
}

.sk .sk-site-cols div span {
	display: block;
	width: 85%;
	height: 7px;
	border-radius: 4px;
	background: #dfe5ef;
}

.sk .sk-wp-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-top: 1px solid var(--sk-line);
	font-size: 12px;
}

.sk .sk-wp-row span {
	color: var(--sk-muted);
}

.sk .sk-wp-row b {
	font-weight: 500;
}

.sk .sk-wp-float .sk-float-b {
	margin-top: 10px;
}

/* Services: two aligned panels of rows */
.sk .sk-rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 16px;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.sk .sk-rows-col {
	display: flex;
	flex-direction: column;
	padding: 6px 28px;
	border: 1px solid var(--sk-line);
	border-radius: 24px;
	background: #ffffff;
	box-shadow: var(--sk-shadow);
}

.sk .sk-row {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 18px;
	padding: 24px 0;
	border-bottom: 1px solid var(--sk-line);
}

.sk .sk-row:last-child {
	border-bottom: 0;
}

.sk .sk-row h3 {
	margin: 2px 0 6px;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--sk-navy);
}

.sk .sk-row p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sk-text);
}

.sk .sk-row .sk-link {
	margin-top: 10px;
	font-size: 14px;
}

/* Custom development: code editor */
.sk .sk-code {
	overflow: hidden;
	border: 1px solid var(--sk-line);
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(11, 27, 58, .05), 0 40px 80px -40px rgba(11, 27, 58, .22);
}

.sk .sk-code-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--sk-line);
	background: var(--sk-soft);
}

.sk .sk-code-bar > span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d5dbe7;
}

.sk .sk-code-bar b {
	margin-left: 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--sk-muted);
}

.sk .sk-code-body {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
}

.sk .sk-tree {
	padding: 16px;
	border-right: 1px solid var(--sk-line);
	background: var(--sk-soft);
}

.sk .sk-tree ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk .sk-tree li {
	margin: 0;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 12.5px;
	color: var(--sk-text);
}

.sk .sk-tree li.dir {
	font-weight: 600;
	color: var(--sk-navy);
}

.sk .sk-tree li.on {
	background: #ffffff;
	box-shadow: inset 0 0 0 1px var(--sk-line);
	font-weight: 500;
	color: var(--sk-blue);
}

.sk .sk-code pre {
	margin: 0;
	padding: 20px 22px;
	overflow: hidden;
	border: 0;
	background: #ffffff;
	font: 12.5px/1.85 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--sk-navy);
	white-space: pre;
}

.sk .sk-code pre .c {
	color: #98a2b3;
}

.sk .sk-code pre .k {
	color: var(--sk-blue);
}

.sk .sk-code pre .s {
	color: #475467;
}

.sk .sk-wp-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 16px;
	padding: 16px 20px;
	border: 1px solid var(--sk-line);
	border-radius: 18px;
	background: #ffffff;
}

.sk .sk-wp-card div {
	display: grid;
	gap: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-navy);
}

.sk .sk-wp-card small {
	font-size: 12px;
	font-weight: 400;
	color: var(--sk-muted);
}

.sk .sk-toggle {
	position: relative;
	flex: 0 0 38px;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var(--sk-blue);
}

.sk .sk-toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
}

/* Industries */
.sk .sk-ind-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.sk .sk-ind {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 22px;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	background: #ffffff;
	box-shadow: var(--sk-shadow);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--sk-navy);
}

@media (max-width: 1100px) {
	.sk .sk-code {
		max-width: 640px;
		margin-inline: auto;
		width: 100%;
	}

	.sk .sk-ind-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sk .sk-rows {
		grid-template-columns: minmax(0, 1fr);
	}

	.sk .sk-rows-col {
		padding: 4px 20px;
	}

	.sk .sk-code-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.sk .sk-tree {
		display: none;
	}

	.sk .sk-site-nav nav {
		display: none;
	}

	.sk .sk-ind {
		padding: 18px;
	}
}