/*
Theme Name: CLRMO Blocksy
Template: blocksy
Version: 1.0
Description: CLRMO child theme for Blocksy
*/

/* ── Brand Variables ──────────────────────────────── */
:root {
	--clrmo-ink:       #0f172a;
	--clrmo-ink-mid:   #334155;
	--clrmo-ink-soft:  #64748b;
	--clrmo-accent:    #4f46e5;
	--clrmo-accent-lt: #6366f1;
	--clrmo-bg:        #ffffff;
	--clrmo-bg-soft:   #f8fafc;
	--clrmo-border:    #e2e8f0;
	--clrmo-code:      #1e293b;
	--clrmo-radius:    6px;
	--clrmo-mono:      "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
	--clrmo-sans:      "Inter", system-ui, -apple-system, sans-serif;
}

/* ── Import Fonts ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Base ─────────────────────────────────────────── */
body {
	font-family: var(--clrmo-sans);
	color: var(--clrmo-ink);
	background: var(--clrmo-bg);
	-webkit-font-smoothing: antialiased;
}

/* ── Header ───────────────────────────────────────── */
.ct-header {
	border-bottom: 1px solid var(--clrmo-border);
	background: rgba(255,255,255,0.96) !important;
	backdrop-filter: blur(8px);
}

.site-logo a,
.site-title a {
	font-family: var(--clrmo-mono);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--clrmo-ink) !important;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.site-title a::after {
	content: "_";
	color: var(--clrmo-accent);
	animation: blink 1.2s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Navigation ───────────────────────────────────── */
.ct-main-nav > ul > li > a {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--clrmo-ink-mid) !important;
	letter-spacing: 0.01em;
}
.ct-main-nav > ul > li > a:hover {
	color: var(--clrmo-accent) !important;
}

/* ── Hero (home page) ─────────────────────────────── */
.clrmo-hero {
	padding: 96px 0 80px;
	text-align: center;
}
.clrmo-hero .clrmo-eyebrow {
	display: inline-block;
	font-family: var(--clrmo-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clrmo-accent);
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 100px;
	padding: 4px 14px;
	margin-bottom: 24px;
}
.clrmo-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--clrmo-ink);
	margin-bottom: 20px;
}
.clrmo-hero h1 em {
	font-style: normal;
	color: var(--clrmo-accent);
}
.clrmo-hero .clrmo-sub {
	font-size: 1.125rem;
	color: var(--clrmo-ink-soft);
	max-width: 540px;
	margin: 0 auto 36px;
	line-height: 1.6;
}
.clrmo-cta-group {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ── Buttons ──────────────────────────────────────── */
.clrmo-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border-radius: var(--clrmo-radius);
	font-size: 0.9rem;
	font-weight: 600;
	font-family: var(--clrmo-sans);
	text-decoration: none !important;
	transition: all 0.15s ease;
	cursor: pointer;
	border: none;
}
.clrmo-btn-primary {
	background: var(--clrmo-accent);
	color: #fff !important;
}
.clrmo-btn-primary:hover {
	background: #4338ca;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(79,70,229,0.3);
}
.clrmo-btn-ghost {
	background: transparent;
	color: var(--clrmo-ink-mid) !important;
	border: 1px solid var(--clrmo-border);
}
.clrmo-btn-ghost:hover {
	border-color: var(--clrmo-accent);
	color: var(--clrmo-accent) !important;
}

/* ── Section layout ───────────────────────────────── */
.clrmo-section {
	padding: 72px 0;
}
.clrmo-section-alt {
	background: var(--clrmo-bg-soft);
	border-top: 1px solid var(--clrmo-border);
	border-bottom: 1px solid var(--clrmo-border);
}
.clrmo-section-label {
	font-family: var(--clrmo-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clrmo-accent);
	margin-bottom: 8px;
}
.clrmo-section-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--clrmo-ink);
	margin-bottom: 12px;
}
.clrmo-section-desc {
	font-size: 1rem;
	color: var(--clrmo-ink-soft);
	max-width: 520px;
	line-height: 1.65;
}

/* ── Product card ─────────────────────────────────── */
.clrmo-product-card {
	background: #fff;
	border: 1px solid var(--clrmo-border);
	border-radius: 10px;
	padding: 36px;
	max-width: 680px;
	margin: 0 auto;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
	position: relative;
	overflow: hidden;
}
.clrmo-product-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--clrmo-accent), var(--clrmo-accent-lt));
}
.clrmo-product-name {
	font-family: var(--clrmo-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--clrmo-accent);
	margin-bottom: 8px;
}
.clrmo-product-title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--clrmo-ink);
	margin-bottom: 12px;
}
.clrmo-product-desc {
	color: var(--clrmo-ink-soft);
	line-height: 1.65;
	margin-bottom: 24px;
}
.clrmo-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 540px) {
	.clrmo-feature-list { grid-template-columns: 1fr; }
}
.clrmo-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--clrmo-ink-mid);
	line-height: 1.4;
}
.clrmo-feature-list li::before {
	content: "✓";
	color: var(--clrmo-accent);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}
.clrmo-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 100px;
	background: #dcfce7;
	color: #166534;
	margin-left: 8px;
	vertical-align: middle;
}

/* ── Services grid ────────────────────────────────── */
.clrmo-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 36px;
}
.clrmo-service-card {
	background: #fff;
	border: 1px solid var(--clrmo-border);
	border-radius: 8px;
	padding: 24px;
}
.clrmo-service-icon {
	font-size: 1.5rem;
	margin-bottom: 12px;
}
.clrmo-service-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--clrmo-ink);
	margin-bottom: 6px;
}
.clrmo-service-desc {
	font-size: 0.875rem;
	color: var(--clrmo-ink-soft);
	line-height: 1.55;
}

/* ── Blog cards ───────────────────────────────────── */
.ct-blog .ct-post-item {
	border: 1px solid var(--clrmo-border) !important;
	border-radius: 8px !important;
	overflow: hidden;
}

/* ── About / Content pages ────────────────────────── */
.entry-content {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--clrmo-ink-mid);
	max-width: 680px;
}
.entry-content h2 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--clrmo-ink);
	margin-top: 2em;
}
.entry-content code {
	font-family: var(--clrmo-mono);
	font-size: 0.85em;
	background: var(--clrmo-bg-soft);
	border: 1px solid var(--clrmo-border);
	border-radius: 4px;
	padding: 1px 5px;
	color: var(--clrmo-accent);
}
.entry-content pre {
	background: var(--clrmo-code);
	color: #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	overflow-x: auto;
	font-family: var(--clrmo-mono);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* ── Footer ───────────────────────────────────────── */
.ct-footer {
	border-top: 1px solid var(--clrmo-border);
	background: var(--clrmo-bg-soft) !important;
}
.ct-footer,
.ct-footer a {
	color: var(--clrmo-ink-soft) !important;
	font-size: 0.85rem;
}
.ct-footer a:hover {
	color: var(--clrmo-accent) !important;
}

/* ── Layout fixes ─────────────────────────────────── */

/* Center the constrained content column itself */
.entry-content {
	margin-left: auto;
	margin-right: auto;
}

/* Full-width blocks escape the content-width constraint */
.entry-content > .alignfull,
.entry-content > .wp-block-html.alignfull {
	max-width: 100% !important;
	width: 100%;
}

/* Hide the page title on the static front page */
.home .hero-section .entry-header,
.home .page-title {
	display: none;
}

/* ── Utility ──────────────────────────────────────── */
.clrmo-mono { font-family: var(--clrmo-mono); }
.clrmo-center { text-align: center; }
.clrmo-container {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 24px;
}
.clrmo-divider {
	border: none;
	border-top: 1px solid var(--clrmo-border);
	margin: 0;
}