/* Ferco Computers brand styles */
:root {
	--ferco-ink: #14161f;
	--ferco-ink-soft: #3a3d52;
	--ferco-paper: #f6f6fb;
	--ferco-paper-raised: #ffffff;
	--ferco-line: #dcdce8;
	--ferco-primary: #322fbd;
	--ferco-primary-ink: #221fa0;
	--ferco-accent: #e8a33d;
	--ferco-seal: #12a594;
	--ferco-muted: #6b6e82;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ferco-ink: #f2f2f7;
		--ferco-ink-soft: #c7c8db;
		--ferco-paper: #14151d;
		--ferco-paper-raised: #1b1d28;
		--ferco-line: #2d2f3e;
		--ferco-primary: #837fff;
		--ferco-primary-ink: #a5a2ff;
		--ferco-accent: #f2b559;
		--ferco-seal: #35c9b3;
		--ferco-muted: #9294ab;
	}
}

body {
	background: var(--ferco-paper) !important;
	color: var(--ferco-ink) !important;
}

/* .wp-block-group.ferco-cat-grid beats core .wp-block-group on specificity
   (two classes vs one), which is required since wp-block-library's CSS
   loads after this file and would otherwise win the display property. */
.ferco-cat-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 20px !important;
}

.ferco-cat-card {
	background: var(--ferco-paper-raised) !important;
	border: 1px solid var(--ferco-line) !important;
	border-radius: 10px;
	padding: 22px 24px !important;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.ferco-cat-card:hover {
	border-color: var(--ferco-primary);
	transform: translateY(-2px);
}

.ferco-cat-card h3 {
	margin: 0 0 8px;
}

.ferco-cat-card h3 a {
	color: var(--ferco-ink);
	text-decoration: none;
}

.ferco-cat-card h3 a:hover {
	color: var(--ferco-primary);
}

.ferco-cat-card p {
	margin: 0;
	color: var(--ferco-muted);
	line-height: 1.5;
}

.ferco-hero h1 {
	text-wrap: balance;
	color: var(--ferco-ink);
}

.ferco-eyebrow {
	color: var(--ferco-muted);
	font-weight: 700;
}

.wp-block-group.ferco-newsletter {
	background: var(--ferco-paper-raised);
	border-color: var(--ferco-line) !important;
}

.wp-block-group.ferco-verdict {
	background: var(--ferco-paper);
	border-color: var(--ferco-line) !important;
}

.wp-block-button__link, .wp-element-button {
	background-color: var(--ferco-primary);
	border-radius: 7px;
	color: #fff;
}

.is-style-outline .wp-block-button__link {
	color: var(--ferco-primary);
	border-color: var(--ferco-primary);
	border-radius: 7px;
	background-color: transparent;
}

a {
	color: var(--ferco-primary-ink);
}

h1, h2, h3, h4, h5, h6, p, .entry-content {
	color: var(--ferco-ink) !important;
}

.site-header {
	background: var(--ferco-paper-raised) !important;
	border-bottom: 1px solid var(--ferco-line) !important;
}

#wrapper.site,
.content-bg,
.entry-content-wrap,
.entry,
.loop-entry {
	background: var(--ferco-paper) !important;
}

/* --- Visual polish: category icons + hero illustration --- */

.ferco-cat-icon {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--ferco-primary) 12%, transparent);
	color: var(--ferco-primary);
	margin-bottom: 14px;
}

.ferco-cat-icon svg {
	width: 22px;
	height: 22px;
}

.ferco-cat-card {
	display: flex;
	flex-direction: column;
}

.ferco-hero {
	position: relative;
	overflow: visible;
}

.ferco-hero-art {
	margin-top: 32px;
	display: flex;
	justify-content: center;
	opacity: 0.9;
}

.ferco-hero-art svg {
	width: 100%;
	max-width: 320px;
	height: auto;
}

@media (min-width: 1080px) {
	.ferco-hero-art {
		position: absolute;
		top: 50%;
		right: -40px;
		transform: translateY(-50%);
		margin-top: 0;
		pointer-events: none;
	}
	.ferco-hero-art svg { max-width: 380px; }
	.ferco-hero > .wp-block-heading,
	.ferco-hero > p,
	.ferco-hero > .ferco-eyebrow,
	.ferco-hero > .wp-block-buttons {
		max-width: 560px;
	}
}

.ferco-art-ring {
	fill: none;
	stroke: var(--ferco-line);
	stroke-width: 1;
	stroke-dasharray: 3 6;
}

.ferco-art-panel-a, .ferco-art-panel-b {
	fill: var(--ferco-paper-raised) !important;
	stroke: var(--ferco-line);
	stroke-width: 1.5;
}

.ferco-art-screen {
	fill: color-mix(in srgb, var(--ferco-primary) 14%, transparent);
}

.ferco-art-dot {
	fill: var(--ferco-accent);
}

.ferco-art-link {
	stroke: var(--ferco-muted);
	stroke-width: 1.5;
}

.ferco-art-bar-a {
	fill: var(--ferco-line);
}

.ferco-art-bar-b {
	fill: var(--ferco-line);
	opacity: 0.6;
}

.ferco-art-badge {
	fill: var(--ferco-seal);
}

.ferco-art-check {
	stroke: #fff;
	stroke-width: 2.4;
}