/*
Theme Name: 100MCP
Description: Child theme for 100mcp.com, built on Astra. Holds the brand tokens and small helpers used by the Elementor pages.
Author: Satvik Infotech
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 100mcp
Template: astra
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--mcp-brand: #2848E8;
	--mcp-brand-hover: #1E3BC7;
	--mcp-brand-tint: #EEF1FD;
	--mcp-glow: #7B93FF;

	--mcp-ink: #15171C;
	--mcp-text: #4B5263;
	--mcp-bg: #FFFFFF;
	--mcp-bg-soft: #F6F7FA;
	--mcp-border: #E4E7EE;

	--mcp-dark: #15171C;
	--mcp-dark-surface: #1F2229;
	--mcp-dark-border: #2C3039;
	--mcp-dark-muted: #A3A9B8;

	--mcp-success: #15803D;
	--mcp-success-tint: #E8F7EE;

	--mcp-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mcp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

	--mcp-radius-sm: 8px;
	--mcp-radius: 12px;
	--mcp-radius-lg: 16px;
	--mcp-radius-pill: 999px;

	--mcp-shadow-sm: 0 1px 2px rgba(21, 23, 28, .06);
	--mcp-shadow: 0 10px 30px -12px rgba(21, 23, 28, .18);
	--mcp-shadow-lg: 0 30px 70px -24px rgba(21, 23, 28, .30);

	--mcp-container: 1240px;
	--mcp-section-y: 112px;
	--mcp-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 921px) {
	:root { --mcp-section-y: 88px; }
}

@media (max-width: 544px) {
	:root { --mcp-section-y: 72px; }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2 { letter-spacing: -0.02em; }
h3, h4 { letter-spacing: -0.01em; }

::selection {
	background: var(--mcp-brand);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--mcp-brand);
	outline-offset: 2px;
}

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

/* ==========================================================================
   3. Section helpers (add in Elementor → Advanced → CSS Classes)
   ========================================================================== */
.mcp-section { padding-block: var(--mcp-section-y); }

.mcp-soft { background: var(--mcp-bg-soft); }

.mcp-dark {
	background: var(--mcp-dark);
	color: var(--mcp-dark-muted);
}

.mcp-dark h1, .mcp-dark h2, .mcp-dark h3, .mcp-dark h4, .mcp-dark h5, .mcp-dark h6,
.mcp-dark .elementor-heading-title { color: #fff; }

.mcp-dark a:not(.elementor-button) { color: #C9D3FF; }

/* Blue radial glow behind dark sections (hero, CTA). */
.mcp-glow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mcp-glow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -30%;
	width: min(1100px, 140%);
	aspect-ratio: 16 / 9;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(40, 72, 232, .55), rgba(123, 147, 255, .14) 55%, transparent 100%);
	filter: blur(30px);
	z-index: -1;
	pointer-events: none;
}

/* Faint grid texture for dark sections. */
.mcp-grid-bg {
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Eyebrow / pill label above headings. */
.mcp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: var(--mcp-radius-pill);
	background: var(--mcp-brand-tint);
	color: var(--mcp-brand);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
}

.mcp-dark .mcp-eyebrow {
	background: rgba(40, 72, 232, .16);
	border: 1px solid rgba(123, 147, 255, .28);
	color: #C9D3FF;
}

/* Cards. */
.mcp-card {
	background: #fff;
	border: 1px solid var(--mcp-border);
	border-radius: var(--mcp-radius-lg);
	box-shadow: var(--mcp-shadow-sm);
	transition: transform .25s var(--mcp-ease), box-shadow .25s var(--mcp-ease), border-color .25s var(--mcp-ease);
}

.mcp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mcp-shadow);
	border-color: #D5DAE5;
}

.mcp-dark .mcp-card,
.mcp-card--dark {
	background: var(--mcp-dark-surface);
	border-color: var(--mcp-dark-border);
	box-shadow: none;
}

.mcp-dark .mcp-card:hover,
.mcp-card--dark:hover { border-color: rgba(123, 147, 255, .35); }

/* Read & write / Read only badges on integration cards. */
.mcp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: var(--mcp-radius-pill);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.mcp-badge--rw { background: var(--mcp-success-tint); color: var(--mcp-success); }
.mcp-badge--ro { background: var(--mcp-bg-soft); color: var(--mcp-text); border: 1px solid var(--mcp-border); }

/* The private MCP link shown as a copyable chip. */
.mcp-code-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 10px 14px;
	border-radius: var(--mcp-radius);
	background: var(--mcp-dark-surface);
	border: 1px solid var(--mcp-dark-border);
	color: #E6E9F2;
	font-family: var(--mcp-mono);
	font-size: 14px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* Secondary (outline) button: add class mcp-btn-ghost to an Elementor Button widget. */
.mcp-btn-ghost .elementor-button {
	background: transparent;
	color: var(--mcp-ink);
	border: 1px solid var(--mcp-border);
}

.mcp-btn-ghost .elementor-button:hover,
.mcp-btn-ghost .elementor-button:focus {
	background: var(--mcp-bg-soft);
	color: var(--mcp-ink);
}

.mcp-dark .mcp-btn-ghost .elementor-button {
	color: #fff;
	border-color: var(--mcp-dark-border);
}

.mcp-dark .mcp-btn-ghost .elementor-button:hover,
.mcp-dark .mcp-btn-ghost .elementor-button:focus { background: rgba(255, 255, 255, .06); }

.elementor-button,
.ast-button,
.ast-custom-button,
button,
input[type="submit"] {
	transition: background-color .2s var(--mcp-ease), color .2s var(--mcp-ease), border-color .2s var(--mcp-ease), transform .2s var(--mcp-ease);
}

/* ==========================================================================
   5. Latest posts shortcode: [mcp100_latest_posts count="3"]
   ========================================================================== */
.mcp-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 921px) {
	.mcp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 544px) {
	.mcp-posts { grid-template-columns: 1fr; }
}

.mcp-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mcp-border);
	border-radius: var(--mcp-radius-lg);
	transition: transform .25s var(--mcp-ease), box-shadow .25s var(--mcp-ease);
}

.mcp-post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mcp-shadow);
}

.mcp-post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--mcp-brand-tint), #DDE3FB);
	overflow: hidden;
}

.mcp-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mcp-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 24px;
	flex: 1;
}

.mcp-post-card__cat {
	color: var(--mcp-brand);
	font-size: 13px;
	font-weight: 600;
}

.mcp-post-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.35;
}

.mcp-post-card__title a {
	color: var(--mcp-ink);
	text-decoration: none;
}

.mcp-post-card__title a:hover { color: var(--mcp-brand); }

.mcp-post-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.mcp-post-card__meta {
	margin-top: auto;
	color: #8A90A0;
	font-size: 13px;
}

/* ==========================================================================
   6. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}