/*
Theme Name: Simplex IT
Theme URI: https://simplexit.co.uk
Author: Simplex IT Ltd
Description: Custom block theme for Simplex IT. IBM Plex type, blue accent, drawing-sheet grid motif.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simplex-it
*/

/* ---------- Header ---------- */
.sx-header {
	padding: 24px clamp(20px, 6vw, 80px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	gap: 24px;
}
.sx-header .wp-block-navigation { font-weight: 500; font-size: 15px; }
.sx-header .wp-block-navigation a:hover { color: var(--wp--preset--color--blue); }
.sx-header .wp-block-button__link { padding: 12px 20px; font-size: 15px; }

.sx-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
}
.sx-brand:hover { color: var(--wp--preset--color--navy); }
.sx-brand svg { width: 36px; height: 36px; flex: none; }
.sx-brand .sx-brand-it { font-weight: 500; color: var(--wp--preset--color--blue); }

/* ---------- Sections ---------- */
.sx-section {
	padding: clamp(56px, 8vw, 88px) clamp(20px, 6vw, 80px);
}
.sx-section + .sx-section { border-top: 1px solid var(--wp--preset--color--line); }

.sx-eyebrow {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin-bottom: 0;
}
.sx-lead { font-size: 19px; line-height: 1.6; color: var(--wp--preset--color--muted); max-width: 540px; }

/* ---------- Hero ---------- */
.sx-hero { align-items: flex-end; gap: 64px; }
.sx-hero h1 { margin-top: 20px; }

.sx-drawing {
	min-height: 380px;
	border: 1px solid var(--wp--preset--color--blue);
	background-color: #FFFFFF;
	background-image:
		linear-gradient(#DCE5F2 1px, transparent 1px),
		linear-gradient(90deg, #DCE5F2 1px, transparent 1px);
	background-size: 32px 32px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	overflow: hidden;
}
.sx-drawing img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-titleblock {
	background: #FFFFFF;
	border-top: 1px solid var(--wp--preset--color--blue);
	border-left: 1px solid var(--wp--preset--color--blue);
	padding: 14px 18px;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	white-space: pre;
}

/* ---------- Service cards ---------- */
.sx-cards { gap: 24px; }
.sx-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--line);
	padding: 32px;
	display: flex;
	flex-direction: column;
}
.sx-card > * { margin-top: 0; margin-bottom: 14px; }
.sx-card > :last-child { margin-top: auto; margin-bottom: 0; }
.sx-card h3 { font-size: 22px; }
.sx-card p { font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.sx-card .sx-num { font-family: var(--wp--preset--font-family--plex-mono); font-size: 13px; color: var(--wp--preset--color--blue); }
.sx-card .sx-cardlink a { font-weight: 600; font-size: 15px; color: var(--wp--preset--color--blue); text-decoration: none; }
.sx-card .sx-cardlink a:hover { text-decoration: underline; }

.sx-card--dark { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--ground); }
.sx-card--dark h3 { color: #FFFFFF; }
.sx-card--dark p { color: #C8D2E1; }
.sx-card--dark .sx-num,
.sx-card--dark .sx-cardlink a { color: var(--wp--preset--color--light-blue); }

/* ---------- About ---------- */
.sx-about { gap: 64px; }
.sx-photo {
	min-height: 300px;
	border: 1px solid var(--wp--preset--color--line);
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 13px;
	color: var(--wp--preset--color--subtle);
}
.sx-about p { font-size: 17px; line-height: 1.65; color: var(--wp--preset--color--muted); }

/* ---------- Contact band ---------- */
.sx-cta-wrap { padding: 24px clamp(20px, 6vw, 80px) 0; }
.sx-cta {
	background: var(--wp--preset--color--blue);
	color: #FFFFFF;
	padding: clamp(32px, 5vw, 56px);
	gap: 24px;
}
.sx-cta h2 { color: #FFFFFF; font-size: clamp(28px, 3vw, 36px); margin: 0 0 10px; }
.sx-cta p { margin: 0; font-size: 17px; }
.sx-cta a:not(.wp-block-button__link) { color: #FFFFFF; }
.sx-cta .wp-block-button__link { background: #FFFFFF; color: var(--wp--preset--color--navy); }
.sx-cta .wp-block-button__link:hover { background: var(--wp--preset--color--ground); }

/* ---------- Footer ---------- */
.sx-footer {
	margin-top: 64px;
	padding: 32px clamp(20px, 6vw, 80px);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 14px;
	color: var(--wp--preset--color--subtle);
	gap: 16px;
}
.sx-footer p { margin: 0; }
.sx-footer a { color: var(--wp--preset--color--subtle); }

/* ---------- Inner pages ---------- */
.sx-page { padding: clamp(48px, 7vw, 80px) clamp(20px, 6vw, 80px); }

/* ---------- Quality floor ---------- */
:where(a, button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}
@media (max-width: 781px) {
	.sx-hero, .sx-about { gap: 40px; }
	.sx-drawing { min-height: 240px; }
}