/* ---------------------------------------------------------------------------
   Accurate Industries Knowledge Hub
   Loads after the Knowledge Base plugin's knowledge-base.css and reuses its
   tokens (--ai-kb-charcoal, --ai-kb-yellow, --ai-kb-dark, --ai-kb-muted,
   --ai-kb-head). Brand kit: Alata at weight 400 for every label, no Poppins.

   Every selector starts at .ai-kb-hub so it beats the Elementor kit's link
   colour (.elementor-kit-8 a). Rules marked "beats the old page CSS" are one
   step more specific again, so the hub looks right straight after the plugin
   is uploaded, before page 3548's Custom CSS (body .ai-kb-hub ...) is trimmed.
   --------------------------------------------------------------------------- */

/* --- Layout (moved from page 3548's Custom CSS) --------------------------- */

.ai-kb-hub {
	display: flex;
	flex-direction: column;
	gap: 56px;
	max-width: 1140px;
	margin: 0 auto;
}

.ai-kb-hub .ai-kb-hub-group {
	scroll-margin-top: 110px;
}

/* The shortcode prints the sections in order now. Beats the old page CSS's
   nth-child "order" rules, which would otherwise reshuffle them. */
.ai-kb-hub > .ai-kb-hub-group[id] {
	order: 0;
}

/* --- Section heads ---------------------------------------------------------- */

/* Beats the old page CSS, which put the yellow rule on the title itself. */
.ai-kb-hub .ai-kb-hub-group__head .ai-kb-hub-group__title {
	font-family: var(--ai-kb-head);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: #343a3b;
	margin: 0;
	padding: 0;
	border: 0;
}

.ai-kb-hub .ai-kb-hub-group__head--rule {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 18px;
	padding-bottom: 14px;
	margin-bottom: 22px;
	border-bottom: 3px solid var(--ai-kb-yellow);
}

.ai-kb-hub .ai-kb-hub-group__lead {
	margin: 0 0 5px;
	font-size: 15px;
	line-height: 1.45;
	color: #5c6263;
}

.ai-kb-hub .ai-kb-hub-group--brands .ai-kb-hub-group__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.ai-kb-hub .ai-kb-hub-group__eyebrow {
	display: block;
	font-family: var(--ai-kb-head);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #d88619;
	margin-bottom: 6px;
}

.ai-kb-hub .ai-kb-hub-group__blurb {
	max-width: 520px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5c6263;
	text-align: right;
}

/* --- Brand tiles ------------------------------------------------------------ */

.ai-kb-hub .ai-kb-brands {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

.ai-kb-hub .ai-kb-brand {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	min-height: 128px;
	padding: 20px 18px;
	border: 1px solid #dcdede;
	background: #fff;
	color: var(--ai-kb-charcoal);
	text-decoration: none;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

.ai-kb-hub .ai-kb-brand:hover {
	border-color: var(--ai-kb-yellow);
	color: var(--ai-kb-charcoal);
}

.ai-kb-hub .ai-kb-brand__label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ai-kb-hub .ai-kb-brand__name {
	font-family: var(--ai-kb-head);
	font-size: 20px;
	line-height: 1.2;
	color: var(--ai-kb-dark);
	overflow-wrap: anywhere;
}

.ai-kb-hub .ai-kb-brand__model {
	font-size: 12px;
	line-height: 1.4;
	color: var(--ai-kb-muted);
	overflow-wrap: anywhere;
}

.ai-kb-hub .ai-kb-brand__more {
	font-family: var(--ai-kb-head);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #d88619;
}

.ai-kb-hub .ai-kb-brand__more::after {
	content: " \2192";
}

/* --- Guide cards (moved from page 3548's Custom CSS) ---------------------- */

.ai-kb-hub .ai-kb-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	justify-content: stretch;
}

.ai-kb-hub .ai-kb-card {
	min-height: 196px;
	padding: 24px 24px 22px;
	border: 1px solid #e2e4e4;
	border-top: 4px solid var(--ai-kb-yellow);
	background: #fff;
}

.ai-kb-hub .ai-kb-card:hover {
	border-color: var(--ai-kb-yellow);
	transform: none;
	box-shadow: 0 6px 18px rgba(52, 58, 59, 0.1);
}

.ai-kb-hub .ai-kb-card__topic {
	font-family: var(--ai-kb-head);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	color: #d88619;
	margin-bottom: 12px;
}

.ai-kb-hub .ai-kb-grid .ai-kb-card .ai-kb-card__title {
	font-family: var(--ai-kb-head);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.25;
	color: #1f2324;
	margin: 0 0 12px;
}

.ai-kb-hub .ai-kb-card__desc {
	font-size: 14px;
	line-height: 1.55;
	color: #5c6263;
	margin: 0 0 16px;
}

.ai-kb-hub .ai-kb-card__more {
	margin-top: auto;
	font-family: var(--ai-kb-head);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #343a3b;
}

.ai-kb-hub .ai-kb-card__more::after {
	content: " \2192";
}

/* --- Promo tile (all of it beats the old page CSS's card rules) ----------- */

.ai-kb-hub .ai-kb-grid .ai-kb-card.ai-kb-card--promo {
	justify-content: center;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--ai-kb-charcoal);
	border-top-width: 4px;
	background: var(--ai-kb-charcoal);
	color: #fff;
}

.ai-kb-hub .ai-kb-grid .ai-kb-card.ai-kb-card--promo:hover {
	border-color: var(--ai-kb-charcoal);
	transform: none;
	box-shadow: none;
}

.ai-kb-hub .ai-kb-grid .ai-kb-card.ai-kb-card--promo .ai-kb-card__title {
	margin: 0;
	color: #fff;
}

.ai-kb-hub .ai-kb-card.ai-kb-card--promo .ai-kb-card__desc {
	flex: 0 0 auto;
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
}

.ai-kb-hub .ai-kb-card--promo .ai-kb-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	margin-top: 8px;
	padding: 0 18px;
	background: var(--ai-kb-yellow);
	color: var(--ai-kb-dark);
	font-family: var(--ai-kb-head);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.ai-kb-hub .ai-kb-card--promo .ai-kb-btn:hover {
	background: #ffd73a;
	color: var(--ai-kb-dark);
}

.ai-kb-hub .ai-kb-card--promo .ai-kb-btn::after {
	content: "\2192";
	margin-left: 0.45em;
}

/* --- Keyboard focus --------------------------------------------------------- */

.ai-kb-hub .ai-kb-card:focus-visible,
.ai-kb-hub .ai-kb-brand:focus-visible {
	outline: 3px solid var(--ai-kb-charcoal);
	outline-offset: 3px;
}

.ai-kb-hub .ai-kb-card--promo .ai-kb-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* --- Tablet ------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ai-kb-hub .ai-kb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ai-kb-hub .ai-kb-hub-group__head .ai-kb-hub-group__title {
		font-size: 26px;
	}

	.ai-kb-hub .ai-kb-brands {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ai-kb-hub .ai-kb-hub-group--brands .ai-kb-hub-group__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ai-kb-hub .ai-kb-hub-group__blurb {
		text-align: left;
	}
}

/* --- Phone -------------------------------------------------------------------- */

@media (max-width: 640px) {
	.ai-kb-hub {
		gap: 40px;
	}

	.ai-kb-hub .ai-kb-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.ai-kb-hub .ai-kb-card {
		min-height: 0;
	}

	.ai-kb-hub .ai-kb-brands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ai-kb-hub .ai-kb-brand {
		min-height: 112px;
		padding: 16px 14px;
	}

	.ai-kb-hub .ai-kb-brand__name {
		font-size: 18px;
	}

	.ai-kb-hub .ai-kb-hub-group__head--rule {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}