/**
 * Knowledge Hub ("Technical").
 *
 * REMEMBER: the site sets html root font-size to 10px, so 1rem = 10px here.
 * Sizes follow the measured site scale — body copy 18px Lato, headings Lato.
 */

.mk-hub {
	--mk-brand: #f6c445;
	--mk-ink: #212121;
	--mk-muted: #5a5a5a;
	--mk-rule: #ebebeb;
	--mk-panel: #f7f7f7;

	display: grid;
	grid-template-columns: 32rem minmax(0, 1fr);
	gap: 4rem;
	align-items: stretch;   /* lets the sticky panel travel — see below */
	font-size: 1.8rem;

	/* Total gives singles their white card by styling #single-blocks. An archive
	   has no equivalent, so without this the hub sits straight on the dark body
	   texture. Matching the theme's own padding (40px 60px) keeps it consistent
	   with every other content page. */
	background: #fff;
	/* 40px top matches Total's #single-blocks exactly, so the hub starts level
	   with every other content page. */
	padding: 4rem 6rem 6rem;
	/* Only 20px separated the white card from the footer without this. */
	margin-bottom: 6rem;
}

/* Total wraps the site in #outer-wrap{overflow:hidden}, which silently kills
   position:sticky. Relaxed for this template only. */
body.post-type-archive-knowledge #outer-wrap,
body.single-knowledge #outer-wrap {
	overflow: visible;
	overflow-x: clip;
}

/* ---------------------------------------------------------------- panel */

.mk-hub__panel-inner {
	position: sticky;
	top: 2rem;
}

.mk-hub__searchwrap {
	margin: 0 0 1.8rem;
}

.mk-hub__label {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mk-muted);
	margin: 0 0 .8rem;
}

.mk-hub__field {
	position: relative;
	display: flex;
	align-items: center;
}

.mk-hub__icon {
	position: absolute;
	left: 1.2rem;
	width: 1.8rem;
	height: 1.8rem;
	color: var(--mk-muted);
	pointer-events: none;
}

/* Specificity deliberately raised: Total styles input[type=search] itself and
   was overriding the left padding, dropping it to ~14px so the search icon sat
   on top of the placeholder text. */
.mk-hub .mk-hub__field input.mk-hub__input {
	width: 100%;
	font-size: 1.7rem;
	line-height: 1.4;
	padding: 1.2rem 4rem 1.2rem 4rem;
	border: 1px solid var(--mk-rule);
	border-radius: 2px;
	background: #fff;
	color: var(--mk-ink);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mk-hub .mk-hub__field input.mk-hub__input:focus {
	outline: none;
	border-color: var(--mk-brand);
	box-shadow: 0 0 0 3px rgba(246, 196, 69, .3);
}

.mk-hub__input::-webkit-search-cancel-button { display: none; }

/*
 * The clear button.
 *
 * THE BOX WAS ALREADY CENTRED — the glyph inside it was not, which is why the
 * cross sat low against the bottom of the field. Total styles <button> globally
 * with padding: 11.8px 23.7px, and this rule set no padding of its own, so that
 * inherited padding pushed the × down inside a fixed 26px box while the box
 * itself stayed exactly on the field's centre line.
 *
 * Zeroing the padding and centring with flex puts the glyph in the middle of the
 * box regardless of the font's own metrics — a × sits high in its em square with
 * descender space below, so relying on line-height alone would leave it off
 * centre by a pixel or two even with the padding gone.
 */
.mk-hub__clear {
	position: absolute;
	right: .8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mk-muted);
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.mk-hub__clear:hover { color: var(--mk-ink); background: var(--mk-panel); }

/*
 * The results count. Bigger and darker than it was (client request, 1 Sep) —
 * at 1.3rem in muted grey it read as a caption and was being missed, which
 * matters because it is the only feedback that a search did anything.
 *
 * 1.6rem is the body size on this site, so it now sits at the same weight as
 * the text around it rather than below it. Colour moves to the ink used for
 * headings; the muted grey was 1.3rem-caption grey and looked washed out once
 * the type grew.
 */
.mk-hub__count {
	margin: 1.2rem 0 0;
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--mk-ink);
}

/* --------------------------------------------------------------- results */

.mk-hub__results {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: calc(100vh - 20rem);
	overflow-y: auto;
	border-top: 1px solid var(--mk-rule);
}

.mk-hub__result {
	border-bottom: 1px solid var(--mk-rule);
}

.mk-hub__result-link {
	display: block;
	padding: 1.4rem 1.4rem 1.4rem 1.6rem;
	border-left: 3px solid transparent;
	text-decoration: none;
	transition: background .14s ease, border-color .14s ease;
}

.mk-hub__result-link:hover,
.mk-hub__result.is-cursor .mk-hub__result-link {
	background: var(--mk-panel);
	border-left-color: var(--mk-rule);
}

.mk-hub__result.is-active .mk-hub__result-link {
	background: var(--mk-panel);
	border-left-color: var(--mk-brand);
}

.mk-hub__result-title {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mk-ink);
	margin: 0 0 .4rem;
}

.mk-hub__result.is-active .mk-hub__result-title { color: var(--mk-ink); }

.mk-hub__result-excerpt {
	display: block;
	font-size: 1.45rem;
	line-height: 1.45;
	color: var(--mk-muted);
}

.mk-hub__result-title mark {
	background: var(--mk-brand);
	color: var(--mk-ink);
	padding: 0 .2rem;
	border-radius: 2px;
}

.mk-hub__empty {
	padding: 2rem 0 0;
	font-size: 1.5rem;
	color: var(--mk-muted);
}

/* "show all", a bare-text button sitting inside a sentence in the empty state.
   It still needs to look clickable, and an underline is out — so it takes the
   small bordered-chip shape used elsewhere for service links rather than
   pretending to be a text link.

   (The `text-decoration: underline` that used to be here never rendered anyway:
   Total's own button rule carries `text-decoration: none !important`.) */
.mk-hub__linkbtn {
	display: inline-block;
	border: 1px solid var(--mk-rule);
	background: #fff;
	padding: .2rem 1rem;
	font: inherit;
	font-size: 1.4rem;
	color: var(--mk-ink);
	cursor: pointer;
	transition: border-color .3s ease, color .3s ease;
}

.mk-hub__linkbtn:hover,
.mk-hub__linkbtn:focus-visible {
	border-color: var(--mk-brand);
	color: var(--mk-muted);
}

/* --------------------------------------------------------------- article */

.mk-hub__content {
	position: relative;
	min-width: 0;
}

.mk-hub__article.is-loading { opacity: .35; }

.mk-hub__article.is-entering .mk-article {
	animation: mk-fade .28s ease both;
}

@keyframes mk-fade {
	from { opacity: 0; transform: translateY(.6rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-hub__article.is-entering .mk-article { animation: none; }
}

.mk-article__title {
	font-family: 'Lato', sans-serif;
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 1.2;
	color: var(--mk-ink);
	margin: 0 0 1.6rem;
	padding-bottom: 1.2rem;
	border-bottom: 2px solid var(--mk-brand);
}

.mk-article__title:focus { outline: none; }

.mk-article__body p,
.mk-article__body li {
	font-size: 1.8rem;
	line-height: 1.65;
}

.mk-article__body h2 {
	font-size: 2.5rem;
	font-weight: 300;
	line-height: 1.25;
	margin: 3.2rem 0 1.2rem;
}

.mk-article__body h3 {
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 2.8rem 0 1rem;
}

/*
 * Chemical equations and similar notation.
 *
 * These arrive from the client's documents on their own line and used to be
 * marked up as <h3>, which put a formula into the page outline and into the
 * screen-reader heading list. They are paragraphs now, so they need something to
 * stop them reading as ordinary prose: centred, a little larger, and set on the
 * panel grey so the line is visibly a piece of notation rather than a sentence.
 *
 * Not monospaced — these carry subscripts and arrows (CO₂, →) that the body face
 * renders properly and a mono stack often does not.
 */
.mk-article__body .mk-formula {
	margin: 2.4rem 0;
	padding: 1.6rem 2rem;
	background: var(--mk-panel);
	border-left: 3px solid var(--mk-brand);
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
	color: var(--mk-ink);
}

.mk-article__body > *:last-child { margin-bottom: 0; }

.mk-article__body img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------- intro */

.mk-hub__intro {
	border-left: 4px solid var(--mk-brand);
	background: var(--mk-panel);
	padding: 3rem 3.2rem;
}

.mk-hub__intro-title {
	font-family: 'Lato', sans-serif;
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 1.2rem;
}

.mk-hub__intro-lead {
	font-size: 1.9rem;
	line-height: 1.6;
	margin: 0 0 1.2rem;
}

/* --------------------------------------------------------------- loading */

.mk-hub__loading {
	position: absolute;
	top: 3rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .6rem;
}

/* A display value beats the [hidden] attribute, so state it explicitly —
   without this the dots sit permanently on the page. */
.mk-hub__loading[hidden],
.mk-hub__empty[hidden],
.mk-hub__clear[hidden] {
	display: none;
}

.mk-hub__loading span {
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: var(--mk-brand);
	animation: mk-bounce 1s infinite ease-in-out both;
}

.mk-hub__loading span:nth-child(2) { animation-delay: .14s; }
.mk-hub__loading span:nth-child(3) { animation-delay: .28s; }

@keyframes mk-bounce {
	0%, 80%, 100% { transform: scale(.5); opacity: .5; }
	40%           { transform: scale(1);  opacity: 1; }
}

/* ---------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
	.mk-hub {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding: 2.5rem 2rem 3.5rem;
		margin-bottom: 3rem;
	}

	.mk-hub__panel-inner { position: static; }

	.mk-hub__results {
		max-height: 34rem;   /* keep the article reachable without endless scrolling */
	}

	.mk-article__title { font-size: 2.6rem; }
}

/* ------------------------------------------------ clear the footer

   Total floats the content column on singular templates, and this site's legacy
   stylesheet clears the footer one template at a time — .single-post,
   .single-casestudies, .blog and .search-results each carry a `clear: both` on
   #footer-bottom-inner. A new singular template has to join that list.

   Without it the footer sits beside the float. #footer-bottom-inner's inner row
   is display:flex, and a flex container establishes a block formatting context,
   so instead of overlapping the float the way a plain block does it shrinks to
   the space left over — which squeezed the copyright line down to a fraction of
   its width. Found on the sector pages and present here too. */
.single-knowledge #footer-bottom-inner {
	clear: both;
}

/* ================================================== no hover underlines

   Total's base rule is `a:hover { text-decoration: underline }`, and the theme
   then cancels it for every button, card title, menu item and footer link —
   the underline is only left on plain body copy. The hub's article list and
   controls are navigation, so they follow the same convention.

   `.mk-hub__linkbtn` ("show all") keeps its underline deliberately: it is a
   bare-text button sitting inside a sentence, and the underline is the only
   thing marking it as clickable. That is the one place this site does underline
   — inline links in body copy.

   Scoped to these templates rather than set globally: a site-wide change would
   also strip the underline from body-copy links on every legacy WPBakery page,
   which is a separate decision. */
.mk-hub a:hover,
.mk-hub a:focus,
.mk-hub a:focus-visible,
.mk-article a:hover,
.mk-article a:focus,
.mk-article a:focus-visible {
	text-decoration: none;
}

/* ------------------------------------------------ diagrams in an article

   Some of the client's Technical documents carry diagrams. They sit in the flow
   where the author placed them, full width of the article column. */
.mk-article__figure {
	margin: 2.4rem 0;
}

.mk-article__image {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--mk-rule);
}