/* Crushjs Showcase: component styles that theme.json can't express. */

:root {
	--cj-radius: var(--wp--custom--radius--medium, 14px);
	--cj-radius-lg: var(--wp--custom--radius--large, 22px);
	--cj-shadow: var(--wp--custom--shadow);
	--cj-border: var(--wp--preset--color--border);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--accent-soft); }

/* ---------- Demo bar ---------- */

.crushjs-demo-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .75rem;
	padding: .55rem 20px;
	font-size: .8125rem;
	line-height: 1.4;
	text-align: center;
	color: #e6e8f2;
	background: var(--wp--preset--color--night);
}
.crushjs-demo-bar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, .2);
}
.crushjs-demo-bar__cta { color: #fff !important; font-weight: 600; }
/* CodeCanyon's preview frame has its own buy bar. */
.is-framed .crushjs-demo-bar { display: none; }

/* ---------- Header ---------- */

.cj-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--cj-border);
}
.admin-bar .cj-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .cj-header { top: 0; } }

.cj-logo {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	font-size: .8rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, #6366f1, #ec4899);
}
.cj-header .wp-block-navigation a { color: var(--wp--preset--color--muted); }
.cj-header .wp-block-navigation a:hover,
.cj-header .wp-block-navigation .current-menu-item a { color: var(--wp--preset--color--contrast); }
.cj-header .wp-block-button__link { padding: .55em 1.05em; font-size: .875rem; }
@media (max-width: 781px) { .cj-header .wp-block-buttons { display: none; } }

/* ---------- Typography helpers ---------- */

.cj-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .35rem .8rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
	border-radius: 999px;
}
.cj-eyebrow--dark { color: #c7d2fe; background: rgba(99, 102, 241, .18); border: 1px solid rgba(165, 180, 252, .25); }
.cj-lead { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--large); line-height: 1.6; }
.cj-hero .cj-lead { color: #b9bfd3; }
.cj-gradient-text {
	background: linear-gradient(90deg, #a5b4fc, #f0abfc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cj-muted { color: var(--wp--preset--color--muted); }

/* ---------- Hero ---------- */

.cj-hero { position: relative; overflow: hidden; color: #fff; }
.cj-hero h1, .cj-hero h2 { color: #fff; }
.cj-hero .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .3); }
.cj-hero .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .08); }
.cj-stats { color: #9aa3bd; font-size: .875rem; }
.cj-stats strong { color: #fff; }

/* Live preview "window" in the hero. */
.cj-window {
	color: var(--wp--preset--color--contrast);
	background: #fff;
	border-radius: var(--cj-radius-lg);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
	overflow: hidden;
}
.cj-window__bar {
	display: flex;
	gap: 6px;
	padding: 12px 16px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--cj-border);
}
.cj-window__bar span { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e4; }
.cj-window__bar span:nth-child(1) { background: #ff5f57; }
.cj-window__bar span:nth-child(2) { background: #febc2e; }
.cj-window__bar span:nth-child(3) { background: #28c840; }
.cj-window__body { padding: 20px 22px 8px; }
.cj-window__body .cjfaq { margin: 0; }

/* ---------- Cards ---------- */

.cj-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-radius);
	box-shadow: var(--cj-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cj-card:hover { transform: translateY(-3px); border-color: #c9cfe0; box-shadow: 0 2px 4px rgba(11,16,32,.04), 0 18px 40px -12px rgba(11,16,32,.18); }
.cj-card > .wp-block-buttons { margin-top: auto; }
.wp-block-column > .cj-card { display: flex; flex-direction: column; }

.cj-badge {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 12px;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: #fff;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.cj-badge--rt { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.cj-badge--ad { background: linear-gradient(135deg, #f59e0b, #ec4899); }

.cj-check-list { list-style: none; padding-left: 0; }
.cj-check-list li { position: relative; padding-left: 1.6rem; margin: .4rem 0; }
.cj-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.cj-feature { padding: 1.5rem; background: var(--wp--preset--color--surface); border-radius: var(--cj-radius); height: 100%; }
.cj-feature h3 { font-size: 1.0625rem; margin-top: 0; }
.cj-feature p { color: var(--wp--preset--color--muted); font-size: .9375rem; margin-bottom: 0; }

.cj-step-num {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	font-weight: 700;
	font-size: .875rem;
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
}

/* Live demo panel on landing pages. */
.cj-demo-panel {
	background: #fff;
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-radius-lg);
	box-shadow: var(--cj-shadow);
}
.cj-demo-label {
	display: inline-block;
	margin: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------- Posts ---------- */

.cj-post-card {
	height: 100%;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--cj-border);
	border-radius: var(--cj-radius);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cj-post-card:hover { border-color: #c9cfe0; box-shadow: var(--cj-shadow); }
.cj-post-card .wp-block-post-title { font-size: 1.1875rem; line-height: 1.35; }
.cj-post-card .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); font-size: .9375rem; }
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .cj-post-card { flex: 1; }

.wp-block-post-terms a {
	display: inline-block;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
}
.wp-block-post-terms a:hover { text-decoration: none; }

.cj-article .wp-block-post-content > p:first-of-type { font-size: var(--wp--preset--font-size--large); color: #2b3245; }
.cj-article .wp-block-post-content { font-size: 1.0625rem; }
.cj-article .wp-block-post-content h2 { margin-top: 2.25em; }

/* ---------- Reading Time plugin ---------- */

.crushjs-rt {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 1.5rem !important;
	padding: .3rem .75rem .3rem .6rem;
	font-size: .8125rem !important;
	font-weight: 600;
	line-height: 1.4;
	opacity: 1 !important;
	color: var(--wp--preset--color--accent-dark);
	background: var(--wp--preset--color--accent-soft);
	border-radius: 999px;
}
.crushjs-rt::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cj-post-card .crushjs-rt { margin: 0 !important; }

/* ---------- Paragraph Ads plugin ---------- */

.crushjs-pa-ad,
.crushjs-ad-placeholder {
	margin: 2rem 0;
}
.crushjs-ad-placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	min-height: 160px;
	padding: 2rem 1.25rem 1.5rem;
	text-align: center;
	font-size: .9375rem;
	color: var(--wp--preset--color--muted);
	background:
		repeating-linear-gradient(-45deg, transparent 0 12px, rgba(79, 70, 229, .035) 12px 24px),
		var(--wp--preset--color--surface);
	border: 2px dashed #c7cbe0;
	border-radius: var(--cj-radius);
}
.crushjs-ad-placeholder strong { color: var(--wp--preset--color--contrast); font-size: 1rem; }
.crushjs-ad-placeholder span:last-child { font-size: .8125rem; }
.crushjs-ad-placeholder__tag {
	position: absolute;
	top: .6rem;
	left: .75rem;
	font-size: .6875rem !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9aa1b5;
}

/* ---------- FAQ Accordion plugin ---------- */

.cjfaq {
	--cjfaq-radius: 12px;
	--cjfaq-border: var(--wp--preset--color--border);
	--cjfaq-bg: var(--wp--preset--color--surface);
}
.cjfaq__toggle { font-weight: 600; }
.cjfaq__search-input { background: #fff; }
.cj-styles-grid .cjfaq { margin: .5rem 0 0; }

/* ---------- Footer ---------- */

.cj-footer { color: #9aa3bd; }
.cj-footer a { color: #c9cfe0; }
.cj-footer a:hover { color: #fff; }
.cj-footer h2, .cj-footer h3 { color: #fff; }
.cj-footer .wp-block-site-title a { color: #fff; }
.cj-footer .cj-footer-links { list-style: none; padding: 0; margin: 0; }
.cj-footer .cj-footer-links li { margin: .45rem 0; }

/* ---------- Misc ---------- */

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	padding: .4rem .8rem;
	border-radius: 8px;
}
.wp-block-query-pagination .current { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); }
.wp-block-search__input { border-radius: 10px; border-color: var(--cj-border); padding: .7rem 1rem; }
.wp-block-search__button { border-radius: 10px; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid #cdd2e0;
	color: var(--wp--preset--color--contrast);
	background: #fff;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: #fff;
}
.cj-hero .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; }