/* =====================================================================
   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); }

/* Visually hidden but read by screen readers. Core defines this, but the theme
   relies on it for heading structure, so define it here rather than depend on
   which core stylesheets happen to be enqueued on a given page. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* 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;
}
/* Named paragraph styles (register_block_style) — one central, reusable treatment.
   Colour is intentionally NOT set here; it is a per-instance block colour control. */
.is-style-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);
	line-height: 1.4;
	margin-bottom: 12px;
}
.is-style-lead {
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.65;
}

/* In-image overlay chips (content over core/cover) — pinned inside the photo, reflow on mobile */
.aj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-chip {
	display: inline-flex; align-items: center; gap: 6px;
	font: 700 13px/1.1 var(--aj-font-body);
	padding: 9px 13px; border-radius: 9px;
}
.aj-chip--stat  { background: var(--aj-red); color: #fff; }
.aj-chip--trust { background: rgba(255,255,255,.95); color: var(--aj-ink); }

/* FontAwesome icon wrapper (cards, tiles, info rows) */
.aj-kico { display: inline-block; margin-bottom: 14px; line-height: 1; }

/* Icon chip (B1 soft / B2 solid) */
.aj-chipicon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; font-size: 20px; margin-bottom: 16px; }
.aj-chipicon--soft  { background: #eaf1f8; color: var(--aj-blue, #004280); }
.aj-chipicon--solid { background: var(--aj-blue, #004280); color: #fff; }

/* 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 HEADER — the sticky lives on the TEMPLATE-PART WRAPPER, not on .aj-header
   or .aj-mainbar.
   WordPress wraps a header template part in <div class="wp-block-template-part">
   sized exactly to the header (164px). A sticky element can only travel inside its
   parent's box, so sticky on anything below that wrapper is inert — which is
   precisely why the old `.aj-mainbar { position: sticky }` never did anything.
   Two rules, not one selector list: an unsupported :has() would invalidate the
   whole list, so the positional rule is kept as a standalone fallback. */
.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 60; }
.wp-block-template-part:has(> .aj-header) { position: sticky; top: 0; z-index: 60; }

/* Not sticky itself (see above) — position:relative only so its z-index still applies. */
.aj-mainbar { position: relative; z-index: 60; }
/* The root block gap put 24px of dead white between the blue bar and the nav bar.
   Harmless when the header scrolled away; wasted height now it is pinned. */
.aj-mainbar { margin-block-start: 0; }
/* WordPress puts a root block gap between every top-level block, which shows up as
   ~24px of white between the header and the first section band. :where() gives that
   rule zero specificity, so a plain class selector is enough to close it. */
.aj-main { margin-block-start: 0; }
.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); }

/* ---- Header — mobile (≤860) -----------------------------------------
   The desktop header leans entirely on flex-wrap, so on phones it scatters:
   the utility bar burns three rows and the main bar drops "Call us" + the
   CTA onto a second row below the logo. Collapse it to two tidy rows —
   utility bar (phone · Remote Support) and main bar (logo · Get a Quote · ☰).
   NOTE: the desktop .aj-mainbar uses backdrop-filter, which makes it the
   containing block for its position:fixed descendants — that traps the WP
   nav overlay *inside* the header. Dropping the filter on mobile lets the
   overlay cover the full viewport (and is cheaper to paint on phones). */
@media (max-width: 860px) {
	/* Utility bar: phone + Remote Support only, centred as a pair. */
	.aj-utilitybar.has-background { padding-top: 6px !important; padding-bottom: 6px !important; }
	/* WP prints the block's own justify-content in a .wp-container-* rule, so these
	   need two classes to win rather than relying on source order. */
	.aj-utilitybar .aj-utilitybar__row { gap: 14px; justify-content: center; }
	.aj-utilitybar__row > p { display: none; }                                  /* "…IT partner since 1989" tagline */
	.aj-utilitybar .aj-utilitybar__row > .wp-block-group { justify-content: center; }
	.aj-utilitybar__row > .wp-block-group > p:nth-of-type(2) { display: none; } /* help@ajcomputers.com */

	/* Main bar: one row, no wrap. Logo left, hamburger right — nothing between them. */
	.aj-mainbar.has-background { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.aj-mainbar .aj-mainbar__row { flex-wrap: nowrap; gap: 12px; }
	.aj-mainbar__row .wp-block-site-logo { margin-right: auto; }                /* push everything else to the right */
	.aj-mainbar .wp-block-site-logo img { height: 42px; }
	.aj-mainbar .aj-header__cta { display: none; }   /* Call-us block + Get a Quote: the utility bar already carries both */
	.aj-mainbar .aj-nav { order: 3; }                                          /* hamburger to the far right */
}

/* Hamburger: core ships a two-bar glyph (two <path>s in an inline SVG). Draw a
   conventional three-bar icon instead — the SVG is hidden rather than replaced so
   this survives core updating its markup, and the button keeps its own accessible
   name and 24px+ hit target. */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 26px;
	height: 24px;
	/* middle bar */
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 22px 2px;
	background-position: center;
	background-repeat: no-repeat;
}
.wp-block-navigation__responsive-container-open svg { display: none; }
.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 2px;
	width: 22px;
	height: 2px;
	background: currentColor;
}
.wp-block-navigation__responsive-container-open::before { top: 4px; }
.wp-block-navigation__responsive-container-open::after { bottom: 4px; }

/* WP nav overlay (mobile hamburger menu) — make it a solid white panel instead of
   the default see-through one (page content was bleeding through), with bigger,
   easier-to-tap links. Only exists in the DOM while the menu is open. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 12px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-family: var(--aj-font-heading);
	font-size: 21px;
	font-weight: 600;
	padding: 8px 0;
}

/* Drawer-only items (Get a Quote + phone). Hidden in the desktop inline nav;
   shown at the bottom of the open mobile drawer (HANDOFF-005 §4). */
.wp-block-navigation__responsive-container:not(.is-menu-open) .aj-drawer-only { display: none !important; }
.is-menu-open .aj-drawer-quote { margin-top: 18px; }
.is-menu-open .aj-drawer-quote a {
	background: var(--aj-red); color: #fff !important;
	padding: 13px 30px !important; border-radius: 9px;
}
.is-menu-open .aj-drawer-quote a:hover { background: var(--aj-red-hover); }
.is-menu-open .aj-drawer-phone a { color: var(--aj-blue) !important; }

/* 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; }

/* ---- Layout polish (Design QA, 2026-06) --------------------------- */
/* Full-width section bands sit flush — removes the body-colour seam (blockGap)
   that showed as a thin gap between adjacent coloured sections on built pages. */
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }

/* Column-width covers (e.g. the Home hero) take the global 14px radius;
   full-bleed (.alignfull) covers stay square. */
.aj-main .wp-block-cover:not(.alignfull) { border-radius: 14px; overflow: hidden; }