/* =====================================================================
   A&J Computers — brand base layer
   Translates design-tokens.css into reusable classes for Beaver Builder
   modules + Beaver Themer layouts. This is the "small CSS the modules
   can't express" the handoff calls for. Tokens are the source of truth;
   never hard-code a hex here that already exists as a --aj-* variable.
   ===================================================================== */

/* ---- Base typography ------------------------------------------------ */
body {
	font-family: var(--aj-font-body);
	color: var(--aj-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--aj-font-heading);
	color: var(--aj-ink);
	font-weight: 800;
	line-height: 1.22;
}

a { color: var(--aj-blue); }
a:hover { color: var(--aj-blue-deep); }

/* Display face for hero H1 / big CTA H2 */
.aj-display,
.fl-builder-content .aj-display .fl-heading-text {
	font-family: var(--aj-font-display);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--aj-ink);
}

/* Type scale (clamped for responsive) */
.aj-h1 { font-size: clamp(34px, 5vw, 52px); }
.aj-h2 { font-size: clamp(28px, 3.6vw, 38px); }
.aj-h3 { font-size: clamp(18px, 1.4vw, 20px); }
.aj-lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--aj-body); }

/* Eyebrow / label */
.aj-eyebrow {
	font-family: var(--aj-font-heading);
	font-size: var(--aj-eyebrow-size);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--aj-eyebrow-ls);
	color: var(--aj-accent, var(--aj-red));
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
/* Optional leading rule on eyebrows (matches prototype) */
.aj-eyebrow--rule::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
	display: inline-block;
}

/* ---- Layout helpers ------------------------------------------------- */
.aj-container { max-width: var(--aj-container); margin-inline: auto; padding-inline: var(--aj-gutter); }
.aj-section   { padding-block: var(--aj-section-y); }
.aj-section--soft { background: var(--aj-bg-soft); }
.aj-section--hero { background: var(--aj-bg-hero); }

/* ---- Buttons -------------------------------------------------------- */
.aj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--aj-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 26px;
	border-radius: var(--aj-radius-btn);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Primary = brand red (key CTAs incl. "Get a Quote", "Send message") */
.aj-btn--primary { background: var(--aj-red); color: #fff; }
.aj-btn--primary:hover { background: var(--aj-red-hover); color: #fff; }

/* Accent = per-page service color (reads --aj-accent from the row wrapper) */
.aj-btn--accent { background: var(--aj-accent, var(--aj-blue)); color: #fff; }
.aj-btn--accent:hover { background: var(--aj-accent-hover, var(--aj-blue-deep)); color: #fff; }

/* Blue = default brand */
.aj-btn--blue { background: var(--aj-blue); color: #fff; }
.aj-btn--blue:hover { background: var(--aj-blue-deep); color: #fff; }

/* Ghost / outline */
.aj-btn--ghost {
	background: transparent;
	color: var(--aj-accent, var(--aj-blue));
	border-color: var(--aj-border);
}
.aj-btn--ghost:hover { border-color: var(--aj-accent, var(--aj-blue)); color: var(--aj-accent, var(--aj-blue)); }

/* On dark bands */
.aj-btn--on-dark.aj-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.aj-btn--on-dark.aj-btn--ghost:hover { border-color: #fff; }

/* ---- Monogram tiles (service / feature icons) ----------------------- */
.aj-mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 12px;
	font-family: var(--aj-font-heading);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .02em;
	background: var(--aj-accent-tint, var(--aj-bg-soft));
	color: var(--aj-accent, var(--aj-blue));
}

/* ---- Cards ---------------------------------------------------------- */
.aj-card {
	background: #fff;
	border: var(--aj-border-w) solid var(--aj-border);
	border-radius: var(--aj-radius-card);
	padding: var(--aj-card-pad);
}
.aj-card--hover { transition: box-shadow .18s ease, transform .18s ease; }
.aj-card--hover:hover { box-shadow: 0 14px 40px -18px rgba(13,27,42,.28); transform: translateY(-2px); }

/* ---- Rounded gradient bands (CTA / AI) ------------------------------ */
.aj-band { border-radius: var(--aj-radius-band); padding: clamp(36px, 6vw, 64px); }
.aj-band--cta { background: linear-gradient(135deg, var(--aj-accent, var(--aj-blue)), var(--aj-accent-hover, var(--aj-blue-deep))); color: #fff; }
.aj-band--ai  { background: linear-gradient(135deg, var(--aj-ai-hero-1), var(--aj-ai-hero-2)); color: #fff; }
.aj-band h1, .aj-band h2, .aj-band h3 { color: #fff; }

/* ---- Stats strip ---------------------------------------------------- */
.aj-stat__num { font-family: var(--aj-font-display); font-weight: 800; font-size: clamp(30px, 4vw, 44px); color: var(--aj-ink); line-height: 1; }
.aj-stat__label { color: var(--aj-muted); font-size: 14px; margin-top: 6px; }

/* ---- Blog category pills (fg / bg per topic) ------------------------ */
.aj-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--aj-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
}
.aj-pill--cyber { color: var(--aj-cat-cyber-fg); background: var(--aj-cat-cyber-bg); }
.aj-pill--voip  { color: var(--aj-cat-voip-fg);  background: var(--aj-cat-voip-bg); }
.aj-pill--net   { color: var(--aj-cat-net-fg);   background: var(--aj-cat-net-bg); }
.aj-pill--m365  { color: var(--aj-cat-m365-fg);  background: var(--aj-cat-m365-bg); }
.aj-pill--mit   { color: var(--aj-cat-mit-fg);   background: var(--aj-cat-mit-bg); }

/* ---- Utility bar (deep blue, top of header) ------------------------- */
.aj-utilitybar { background: var(--aj-blue-deep); color: #fff; font-size: 13px; }
.aj-utilitybar a { color: #fff; text-decoration: none; }

/* ---- Footer (navy) -------------------------------------------------- */
.aj-footer { background: var(--aj-navy); color: #cbd5e1; }
.aj-footer a { color: #cbd5e1; text-decoration: none; }
.aj-footer a:hover { color: #fff; }
.aj-footer h4 { color: #fff; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

/* ---- Mobile niceties ------------------------------------------------ */
@media (max-width: 768px) {
	.aj-section { padding-block: 56px; }
	.aj-band { padding: 28px; }
}

/* =====================================================================
   FSE component layer — styles for the block-theme header/footer/hero
   pieces that theme.json can't express. Classes match parts/*.html and
   patterns/*.php.
   ===================================================================== */

/* ---- Header / utility bar ------------------------------------------ */
.aj-header { position: relative; z-index: 60; }
.aj-utilitybar a { color: #fff; text-decoration: none; }
.aj-utilitybar a:hover { text-decoration: underline; }

/* Constrain the SVG logo (native 450x218) to a sane header height regardless
   of the block's width setting — SVGs don't honor the img width attr reliably. */
.aj-mainbar .wp-block-site-logo { line-height: 0; }
.aj-mainbar .wp-block-site-logo img,
.aj-header .custom-logo {
	height: 50px;
	width: auto;
	max-width: 220px;
}

/* Sticky, slightly translucent main bar with a hairline + blur */
.aj-mainbar { position: sticky; top: 0; z-index: 60; box-shadow: 0 1px 0 var(--aj-border); }
.aj-mainbar.has-background { background-color: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Lean nav */
.aj-nav .wp-block-navigation-item__content,
.aj-nav a { color: var(--aj-ink); font-family: var(--aj-font-body); font-weight: 600; font-size: 16px; text-decoration: none; }
.aj-nav .wp-block-navigation-item__content:hover,
.aj-nav a:hover { color: var(--aj-blue); }

/* Call-us block */
.aj-callus a { color: var(--aj-ink); text-decoration: none; }
.aj-callus a:hover { color: var(--aj-blue); }

/* Remote Support pill (outline on dark) */
.aj-btn-remote .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
	padding: 6px 14px;
	border-radius: 7px;
}
.aj-btn-remote .wp-block-button__link:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Hero secondary (outline) button on light */
.aj-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--aj-blue);
	border: 1px solid var(--aj-border);
}
.aj-btn-outline .wp-block-button__link:hover { border-color: var(--aj-blue); color: var(--aj-blue); }

/* ---- Hero image placeholder + 1989 badge --------------------------- */
.aj-photo-ph {
	position: relative;
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid var(--aj-border);
	background-color: var(--aj-bg-soft);
	background-image: repeating-linear-gradient(135deg, rgba(0, 66, 128, .055) 0 14px, transparent 14px 28px);
}
.aj-photo-ph__label {
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 13px;
	color: var(--aj-muted);
	background: rgba(255, 255, 255, .85);
	padding: 6px 12px;
	border-radius: 6px;
}
.aj-badge-1989 {
	position: absolute;
	top: 18px;
	right: 18px;
	background: var(--aj-red);
	color: #fff;
	border-radius: 12px;
	padding: 10px 14px 9px;
	text-align: center;
	line-height: 1;
	font-family: var(--aj-font-heading);
}
.aj-badge-1989 strong { display: block; font-size: 22px; font-weight: 800; }
.aj-badge-1989 span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; }

/* ---- Footer overrides for block-theme markup ----------------------- */
.aj-footer__h { color: #fff !important; font-family: var(--aj-font-heading); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; }
.aj-footer__list { list-style: none; margin: 0; padding: 0; }
.aj-footer__rule { border: none; border-top: 1px solid rgba(255, 255, 255, .14); height: 0; }
.aj-footer .aj-wordmark { color: #fff; }
.aj-footer__logo { height: 50px; width: auto; display: block; margin-bottom: 18px; }