/* ============================================================================
   callido — brand tokens + gentle typography overlay on Softy Solutions.
   Designed to STAY OUT OF THE WAY of the parent theme's demo design.
   We only inject:
     - CSS custom properties for the brand palette
     - Body font swap to DM Sans (the parent uses Inter by default)
     - JetBrains Mono for code
     - Helper classes for our block patterns (callido-hero, callido-stats, …)
   That's it. Every other tweak happens in the parent theme's Theme Options
   (colors, typography) or the Elementor Site Settings imported by the demo.
   ============================================================================ */

:root {
	/* Primary blues (from the raccoon mark) */
	--callido-navy:   #101431;
	--callido-steel:  #1D6BA9;
	--callido-blue:   #4499D9;
	--callido-frost:  #B6DAF4;
	--callido-ice:    #E2EFF9;

	/* Neutrals */
	--callido-white:  #FFFFFF;
	--callido-off:    #FAFAF8;
	--callido-warm:   #F3F1ED;
	--callido-border: #E0DDD7;
	--callido-tert:   #9A9DAB;
	--callido-sec:    #5A5E78;

	/* Accents */
	--callido-amber:  #BA7517;
	--callido-teal:   #0F6E56;
	--callido-red:    #D93B3B;

	/* Type */
	--callido-sans:   'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--callido-mono:   'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------------------------
   Typography swap — DM Sans for headings + body, JetBrains Mono for code.
   No !important here; theme options + Elementor kit settings should win when
   the user sets explicit fonts via the parent theme's UI.
   ---------------------------------------------------------------------------- */

body {
	font-family: var(--callido-sans);
}

h1, h2, h3, h4, h5, h6,
.cmsmasters-headline,
.elementor-heading-title {
	font-family: var(--callido-sans);
	letter-spacing: -0.01em;
}

code, pre, kbd, samp, tt {
	font-family: var(--callido-mono);
}

/* ----------------------------------------------------------------------------
   Block patterns shipped by callido-core ([callido_hero], [callido_stats],
   [callido_services]). These have explicit class names, so they only style
   what we explicitly render — they cannot leak into the demo's pages.
   ---------------------------------------------------------------------------- */

.callido-hero {
	background: var(--callido-off);
	padding: clamp(3rem, 8vw, 6rem) 1.25rem;
}
.callido-hero__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 860px) {
	.callido-hero__inner { grid-template-columns: 1fr; text-align: center; }
}
.callido-hero__eyebrow {
	font-family: var(--callido-mono);
	font-size: 14px;
	color: var(--callido-steel);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.callido-hero__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--callido-navy);
	line-height: 1.1;
	margin: 0 0 1.25rem;
}
.callido-hero__subtitle {
	font-size: 1.125rem;
	color: var(--callido-sec);
	max-width: 38em;
	margin: 0 0 2rem;
}
.callido-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.callido-hero__mark img {
	max-width: 360px;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 48px rgba(16, 20, 49, 0.12));
}

.callido-section { padding: clamp(3rem, 6vw, 5rem) 1.25rem; }
.callido-section--alt  { background: var(--callido-off); }
.callido-section--warm { background: var(--callido-warm); }
.callido-section__inner { max-width: 1180px; margin: 0 auto; }

.callido-eyebrow {
	font-family: var(--callido-mono);
	font-size: 14px;
	color: var(--callido-steel);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 0.75rem;
}

.callido-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}
.callido-stat__num {
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	color: var(--callido-blue);
	letter-spacing: -0.03em;
}
.callido-stat__label { font-size: 14px; color: var(--callido-sec); margin-top: 0.5rem; }

.callido-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}
.callido-service {
	background: var(--callido-white);
	border: 1px solid var(--callido-border);
	border-radius: 12px;
	padding: 1.75rem;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.callido-service:hover {
	border-color: var(--callido-blue);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(16, 20, 49, 0.08);
}
.callido-service__icon {
	width: 40px; height: 40px;
	background: var(--callido-ice);
	color: var(--callido-blue);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1rem;
	font-size: 20px;
}
.callido-service__title { font-size: 1.25rem; margin: 0 0 0.5rem; font-weight: 600; }
.callido-service__desc  { color: var(--callido-sec); font-size: 14px; margin: 0; }

/* Buttons used INSIDE our block patterns. Won't touch parent theme buttons. */
.callido-hero a.callido-btn,
.callido-section a.callido-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 1rem;
	background: var(--callido-blue);
	color: var(--callido-white);
	border: 1px solid var(--callido-blue);
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	line-height: 1;
	transition: background .15s, border-color .15s, transform .15s;
}
.callido-hero a.callido-btn:hover,
.callido-section a.callido-btn:hover {
	background: var(--callido-steel);
	border-color: var(--callido-steel);
	color: var(--callido-white);
	transform: translateY(-1px);
}
.callido-hero a.callido-btn--outline,
.callido-section a.callido-btn--outline {
	background: transparent;
	color: var(--callido-navy);
	border-color: var(--callido-navy);
}
.callido-hero a.callido-btn--outline:hover,
.callido-section a.callido-btn--outline:hover {
	background: var(--callido-navy);
	color: var(--callido-white);
}

/* ----------------------------------------------------------------------------
   Logo lockup helpers ([callido_logo] shortcode)
   ---------------------------------------------------------------------------- */

.callido-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--callido-navy);
	line-height: 1;
}
.callido-logo:hover { text-decoration: none; color: var(--callido-navy); }
.callido-logo__mark { display: block; height: auto; }
.callido-logo__text { display: inline-flex; flex-direction: column; gap: 2px; }
.callido-logo__wordmark {
	font-family: var(--callido-sans);
	font-weight: 700;
	font-size: 1.75rem;
	letter-spacing: -0.03em;
	color: var(--callido-navy);
}
.callido-logo__sub {
	font-family: var(--callido-mono);
	font-size: 0.7rem;
	letter-spacing: 0.4em;
	color: var(--callido-blue);
}
.callido-logo--icon .callido-logo__mark { width: 48px; height: 48px; }
.callido-logo--full .callido-logo__mark { width: 64px; height: 64px; }
.callido-logo--stacked {
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}
.callido-logo--stacked .callido-logo__mark { width: 96px; height: 96px; }

/* ----------------------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------------------- */

.callido-mono { font-family: var(--callido-mono); }
.callido-mute { color: var(--callido-sec); }