/*
	Site-wide corrections layered on top of the compiled Tailwind build in
	site.css. site.css is generated and must not be hand-edited, so fixes live
	here. Loaded by every page, after site.css.
*/

/*
	Download button in the primary nav.

	site.css sets `.site-nav__inner a { color: rgba(239,246,255,.9) }` (specificity
	0,2,1) and `.site-nav__download { color: #005fa3 }` (0,1,0). The nav rule wins,
	so the label rendered as near-white text on the white pill - an empty-looking
	button. Re-assert the blue at a higher specificity.
*/
.site-nav__inner a.site-nav__download {
	color: #005fa3;
}

.site-nav__inner a.site-nav__download:hover,
.site-nav__inner a.site-nav__download:focus {
	background-color: #fff;
	color: #065086;
}

/*
	Sidebar link lists on the legacy pages (.list-group of <a class="list-group-item">).

	site.css styles each item as a card - padding, border, radius, hover lift - but
	never sets a display, so the anchors stayed `display: inline`: they flowed as
	text, wrapped two per line, and their padding overlapped into a stack of
	half-drawn cards. Give the container a column layout and the items a block box.
*/
.legacy-page .list-group {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.legacy-page .list-group-item {
	display: block;
	position: relative;
	padding: .75rem 1rem;
	text-decoration: none;
}

.legacy-page .list-group-item.active {
	border-color: #7cc8fd;
	background-color: #eff8ff;
	color: #065086;
	font-weight: 600;
}

/*
	Grid columns the legacy layer in site.css doesn't map.

	`.legacy-page .row` is a 12-track CSS grid and each Bootstrap column class is
	translated to a `grid-column: span N`. The generated layer covers the sm/md/lg
	tiers but not xl, so `col-xl-9` / `col-xl-3` (Order.php) fell back to `auto` -
	one 15px track - and the pricing content wrapped a character per line inside a
	3000px-tall card. Map the xl tier the same way the other tiers are mapped.
*/
.legacy-page .col-xl-12 { grid-column: span 12 / span 12; }
.legacy-page .col-xl-9,
.legacy-page .col-xl-8 { grid-column: span 8 / span 8; }
.legacy-page .col-xl-7 { grid-column: span 7 / span 7; }
.legacy-page .col-xl-6 { grid-column: span 6 / span 6; }
.legacy-page .col-xl-5 { grid-column: span 5 / span 5; }
.legacy-page .col-xl-4,
.legacy-page .col-xl-3 { grid-column: span 4 / span 4; }

/* bare `.col` / `.col-auto` behave as an equal share rather than one track */
.legacy-page .row > .col,
.legacy-page .row > .col-auto { grid-column: span 4 / span 4; }

/*
	"Trusted by" customer logos in the sidebar.

	The <img>s carry .avatar/.avatar-lg/.avatar-4x3 from the old Bootstrap theme,
	which nothing defines any more, so they fell back to `max-width:100%` and
	stretched to the full 336px sidebar (Siemens rendered 336x143). Cap them and
	lay the list out as a wrapped row, matching the muted treatment the home page
	trust bar uses.
*/
.legacy-page .avatar {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 26px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
}

.legacy-page .avatar-lg {
	max-height: 28px;
}

/*
	A 3-column grid rather than a wrapped flex row: the logos have very different
	aspect ratios (microsoft 1997x374 vs siemens 1024x437), so free wrapping gave
	ragged 3/2/1 rows with cells a couple of pixels out of alignment.
*/
.legacy-page .nav.flex-column:has(.avatar) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 1rem;
	align-items: center;
	justify-items: center;
}

.legacy-page .nav .nav-item:has(.avatar) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	width: 100%;
	margin: 0;
}

/* ============================================================
   ARTICLES
   Long-form pages under /articles/. site.css has no prose layer,
   so the typography for article bodies lives here.
   ============================================================ */

.article {
	max-width: 46rem;
	color: #334155;
	font-size: 16px;
	line-height: 1.75;
}

.article > * + * { margin-top: 1.1rem; }

.article h2 {
	margin-top: 2.5rem;
	color: #0a1a33;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
}

.article h3 {
	margin-top: 1.9rem;
	color: #0a1a33;
	font-size: 1.15rem;
	font-weight: 600;
}

.article p.lead {
	color: #475569;
	font-size: 1.1rem;
	line-height: 1.7;
}

.article a { color: #005fa3; text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: #0a1a33; }

.article ul, .article ol { margin-left: 1.25rem; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-top: .4rem; }
.article li > ul, .article li > ol { margin-top: .3rem; }

.article strong { color: #0f172a; font-weight: 600; }

.article code {
	border-radius: 4px;
	background: #f1f5f9;
	padding: .12em .38em;
	color: #0f172a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .89em;
}

.article pre {
	overflow-x: auto;
	border-radius: 8px;
	background: #142140;
	padding: 16px 18px;
	color: #e2e8f0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13.5px;
	line-height: 1.65;
}

.article pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

.article table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	width: 100%;
	font-size: 14.5px;
}

.article th, .article td {
	border-bottom: 1px solid #e2e8f0;
	padding: 8px 12px;
	text-align: left;
	vertical-align: top;
}

.article th { color: #0f172a; font-weight: 600; white-space: nowrap; }

.article blockquote,
.article .note {
	border-left: 4px solid #0078ca;
	border-radius: 0 6px 6px 0;
	background: #eff8ff;
	padding: 14px 16px;
	color: #334155;
}

.article .warn {
	border-left: 4px solid #f59e0b;
	border-radius: 0 6px 6px 0;
	background: #fffbeb;
	padding: 14px 16px;
	color: #334155;
}

.article-meta { color: #64748b; font-size: .875rem; }

.article-aside > * + * { margin-top: 1rem; }

.article-card {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
	padding: 1.15rem 1.25rem;
}

.article-card h2 {
	margin: 0 0 .5rem;
	color: #0a1a33;
	font-size: 1rem;
	font-weight: 600;
}

.article-card p { font-size: .9rem; line-height: 1.6; }

.article-list { margin: 0; list-style: none; font-size: .9rem; }
.article-list li { margin-top: .5rem; line-height: 1.45; }
.article-list a { color: #005fa3; }
.article-list a:hover { text-decoration: underline; }

/* index listing */
.article-index { display: grid; gap: 1rem; max-width: 46rem; }

.article-index a.entry {
	display: block;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.15rem 1.25rem;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

.article-index a.entry:hover {
	transform: translateY(-2px);
	border-color: #b9e0fe;
	box-shadow: 0 8px 20px -6px rgba(2,120,202,.22);
}

.article-index .entry h2 { margin: 0; color: #0a1a33; font-size: 1.12rem; font-weight: 600; }
.article-index .entry p { margin-top: .35rem; font-size: .92rem; line-height: 1.6; }
.article-index .entry .meta { margin-top: .5rem; color: #64748b; font-size: .8rem; }

/* "Further reading" block appended to the legacy marketing pages */
.further-reading {
	margin: 0 auto;
	max-width: 72rem;
	padding: 0 1.25rem 3rem;
}

.further-reading h2 {
	margin-bottom: .75rem;
	color: #0a1a33;
	font-size: 1.25rem;
	font-weight: 600;
}

.further-reading ul {
	display: grid;
	gap: .6rem;
	margin: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.further-reading ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.further-reading li {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	padding: .8rem 1rem;
}

.further-reading a { color: #005fa3; font-weight: 500; }
.further-reading a:hover { text-decoration: underline; }
.further-reading span { display: block; color: #64748b; font-size: .85rem; line-height: 1.5; }