/*!
 * Knowband Blog Reader — built for the apptheme (MyThemeShop) blog.
 *
 * Every rule is scoped to one of two body classes:
 *   body.kbr-foot  header + footer, on every front-end page
 *   body.kbr-read    the article layout, on single posts only
 *
 * The theme's markup is never replaced, only repainted. The one exception is
 * the footer, which the theme does not render at all (see inc/footer.php).
 *
 * Theme selectors this depends on:
 *   .main-header  #header  .logo-wrap  #navigation  ul.menu
 *   #page.single  .article  #content_box  .single_post  aside.sidebar.c-4-12
 *   .breadcrumb  h1.single-title  .post-info  .post-single-content  .thecontent
 *   .related-posts  .postauthor  #commentsAdd  footer.footer  .copyrights
 */

/* ------------------------------------------------------------------ tokens */

body.kbr-chrome {
	--kbr-navy: #001d63;
	--kbr-navy-hi: #0a2d85;
	--kbr-red: #c21318;
	--kbr-amber: #ffc153;

	--kbr-ink: #121824;
	--kbr-body: #2a3344;
	--kbr-muted: #5a6478;
	--kbr-faint: #98a0b0;

	--kbr-line: #e4e7ec;
	--kbr-hair: #eef0f4;
	--kbr-tint: #fafbfd;
	--kbr-field: #f8f9fb;
	--kbr-chip: #f3f4f8;
	--kbr-dark: #16181d;

	--kbr-measure: 680px;
	--kbr-sidebar: 320px;
	--kbr-gap: 48px;
	--kbr-container: 1180px;
	--kbr-radius: 10px;

	--kbr-sans: "Libre Franklin", Helvetica, Arial, sans-serif;
	--kbr-serif: "Source Serif 4", Charter, Georgia, Cambria, serif;
}

/* -------------------------------------------------------------------- face
 * The theme writes `body { font-family:'Ubuntu' }` from an inline <style> that
 * comes after this file, so the face is restated element by element. Icons are
 * left alone: no `*` selector, so FontAwesome keeps its own family.
 */

body.kbr-face,
body.kbr-face h1,
body.kbr-face h2,
body.kbr-face h3,
body.kbr-face h4,
body.kbr-face h5,
body.kbr-face h6,
body.kbr-face p,
body.kbr-face li,
body.kbr-face td,
body.kbr-face th,
body.kbr-face dt,
body.kbr-face dd,
body.kbr-face blockquote,
body.kbr-face figcaption,
body.kbr-face a,
body.kbr-face strong,
body.kbr-face em,
body.kbr-face small,
body.kbr-face cite,
body.kbr-face .title,
body.kbr-face .front-view-title,
body.kbr-face .breadcrumb,
body.kbr-face .post-info,
body.kbr-face label,
body.kbr-face input,
body.kbr-face button,
body.kbr-face select,
body.kbr-face textarea,
body.kbr-face .widget-title,
body.kbr-face .single-title,
body.kbr-face #navigation ul li a {
	font-family: var(--kbr-sans) !important;
}

/* The theme paints a grey tiled background; the design is white paper. */
body.kbr-face {
	background-color: #fff !important;
	background-image: none !important;
	color: var(--kbr-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.kbr-chrome a:focus-visible,
body.kbr-chrome button:focus-visible,
body.kbr-chrome input:focus-visible {
	outline: 2px solid var(--kbr-navy);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ header */

/* The theme pins the bar to a fixed 70px with !important. Anything taller then
   spills over the page instead of making the bar grow — which is what broke the
   header when the language list opened. Let it size to its content. */
body.kbr-header .main-header {
	background: #fff;
	border-bottom: 1px solid var(--kbr-line);
	box-shadow: none;
	height: auto !important;
	line-height: normal !important;
	overflow: visible;
}

body.kbr-header .main-header .container {
	max-width: var(--kbr-container);
	width: 100%;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* The content container belongs to the page, not the header — its width must
   not depend on whether the header restyle is switched on. */
body.kbr-blog #page {
	max-width: var(--kbr-container);
	width: 100%;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

body.kbr-header .main-header .container {
	background: none;
}

body.kbr-header #header {
	float: none;
	width: 100%;
	min-height: 70px;
}

body.kbr-header .logo-wrap {
	margin: 0 !important; /* the theme sets this inline, per scroll state */
	float: none;
	display: flex;
	align-items: center;
	line-height: 0;
}

body.kbr-header .logo-wrap img {
	max-height: 38px;
	width: auto;
}

body.kbr-header #navigation {
	border-left: 0;
	text-transform: none;
}

body.kbr-header #navigation ul.menu {
	background: none;
	margin: 0;
}

body.kbr-header #navigation ul.menu > li {
	background: none;
}

/* The single-row header is desktop only. Below 768px the theme's own
   responsive.css takes the menu over with its #pull toggle, so nothing here may
   set `display` on the list or the toggle stops being able to hide it. */
@media (min-width: 768px) {
	body.kbr-header #header {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	body.kbr-header .primary-navigation {
		margin-left: auto;
	}

	body.kbr-header #navigation {
		float: none;
	}

	body.kbr-header #navigation ul.menu {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	body.kbr-header #navigation ul.menu > li {
		float: none;
	}
}

/* The theme's inline CSS paints the hover and current states amber with
   `color:#fff!important`, at #navigation ul li specificity. Both have to be
   answered here or the menu keeps its old states. */
body.kbr-header #navigation ul.menu > li > a,
body.kbr-header #navigation ul.menu > li > a:link,
body.kbr-header #navigation ul.menu > li > a:visited {
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--kbr-ink) !important;
	background: none !important;
	padding: 8px 14px;
	border: 0;
	border-radius: 6px;
	line-height: 1.3;
	height: auto;
	position: relative;
	transition: color 0.15s ease, background 0.15s ease;
}

/* Hover is a colour change, not a filled block — a tinted panel behind one item
   reads far louder than the rest of the header. */
body.kbr-header #navigation ul.menu > li:hover,
body.kbr-header #navigation ul.menu > li:focus-within {
	background: none !important;
}

body.kbr-header #navigation ul.menu > li:hover > a,
body.kbr-header #navigation ul.menu > li:focus-within > a {
	background: none !important;
	color: var(--kbr-red) !important;
}

body.kbr-header #navigation ul.menu > li.current-menu-item > a,
body.kbr-header #navigation ul.menu > li.current_page_parent > a,
body.kbr-header #navigation ul.menu > li.current-menu-ancestor > a {
	color: var(--kbr-ink) !important;
	background: none !important;
	font-weight: 600;
}

body.kbr-header #navigation ul.menu > li.current-menu-item > a::after,
body.kbr-header #navigation ul.menu > li.current_page_parent > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	background: var(--kbr-red);
	border-radius: 2px;
}

/* Dropdowns, including the sub-menu the blog-UI plugin adds. */
body.kbr-header #navigation ul ul,
body.kbr-header #navigation ul .pcbu-sub-menu {
	background: #fff;
	border: 1px solid var(--kbr-line);
	border-radius: var(--kbr-radius);
	box-shadow: 0 14px 32px rgba(18, 24, 36, 0.12);
	padding: 6px;
	min-width: 230px;
}

body.kbr-header #navigation ul ul li,
body.kbr-header #navigation ul .pcbu-sub-menu li {
	float: none;
	width: 100%;
	border: 0;
}

body.kbr-header #navigation ul ul a,
body.kbr-header #navigation ul .pcbu-sub-menu a {
	display: block !important;
	width: auto;
	font-size: 14px;
	text-transform: none;
	color: var(--kbr-body) !important;
	background: none !important;
	border: 0;
	border-radius: 6px;
	padding: 8px 12px;
	line-height: 1.35;
	height: auto;
}

body.kbr-header #navigation ul ul a:hover,
body.kbr-header #navigation ul .pcbu-sub-menu a:hover {
	background: var(--kbr-field) !important;
	color: var(--kbr-navy) !important;
}

/* GTranslate switcher. The plugin absolutely positions its wrapper against a
   172px gap the theme reserves with a margin; in a flex header that gap is gone
   and the box escapes over the page. Put it back in the flow. */
body.kbr-header .primary-navigation #navigation {
	margin-right: 0 !important;
}

body.kbr-header #gtranslate_wrapper {
	position: static !important;
	margin-top: 0 !important;
}

body.kbr-header .menu-item-gtranslate {
	display: flex;
	align-items: center;
	position: relative;
}

body.kbr-header .switcher {
	width: auto;
	min-width: 150px;
	line-height: 1.3;
	position: relative;
	overflow: visible; /* the plugin clips its own dropdown */
}

/* The open language list is in the flow by default. Inside the header that
   makes the bar grow by 200px when it opens, which shoves the logo over the
   page. Float it instead, so opening it changes nothing but what is on top. */
body.kbr-header .switcher .option {
	position: absolute !important;
	top: calc(100% + 4px);
	left: auto;
	right: 0;
	width: 190px;
	max-height: 280px;
	overflow-y: auto;
	z-index: 9999;
	background: #fff;
	border: 1px solid var(--kbr-line);
	border-radius: 8px;
	box-shadow: 0 14px 32px rgba(18, 24, 36, 0.14);
	padding: 4px;
	box-sizing: border-box;
}

body.kbr-header .switcher .option a {
	color: var(--kbr-body);
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 14px;
	line-height: 1.3;
}

body.kbr-header .switcher .option a:hover,
body.kbr-header .switcher .option a.selected {
	background: var(--kbr-field);
	color: var(--kbr-navy);
}

body.kbr-header .switcher .selected a {
	width: auto;
	border: 1px solid var(--kbr-line);
	border-radius: 6px;
	color: var(--kbr-ink);
	font-family: var(--kbr-sans);
	font-size: 14px;
}

body.kbr-header .switcher .selected {
	background: var(--kbr-field);
	border-radius: 6px;
}

body.kbr-header #pull.toggle-mobile-menu {
	background: var(--kbr-navy);
	color: #fff;
	border-radius: 6px;
}

/* --------------------------------------------------------- progress bar
 * Added by reader.js on single posts. Absent, and harmless, without JS.
 */

body.kbr-read .kbr-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	overflow: hidden;
	pointer-events: none;
	z-index: 5;
}

body.kbr-read .kbr-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--kbr-red);
}

/* ------------------------------------------------------- article: the shell
 * #page.single holds .article and aside.sidebar as floated siblings. Floats
 * off, grid on, nothing moves in the DOM.
 */

body.kbr-blog #page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--kbr-sidebar);
	gap: var(--kbr-gap);
	align-items: start;
	padding-top: 36px;
	margin-inline: auto;
}

body.kbr-blog #page > .article,
body.kbr-blog #page > aside.sidebar {
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
}

body.kbr-blog #content_box,
body.kbr-blog #content_box > .post {
	float: none;
	width: 100%;
}

/* The theme's white card sits on a white page now, so it only needs to stop
   being a card. */
body.kbr-read .single_post {
	background: none;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}

body.kbr-read .single_post header {
	margin-bottom: 0;
	padding: 0;
	float: none;
	width: 100%;
}

/* --------------------------------------------------- article: title block */

body.kbr-read .breadcrumb {
	font-size: 13px;
	font-weight: 500;
	color: var(--kbr-muted);
	margin: 0 0 16px;
	max-width: var(--kbr-measure);
	line-height: 1.6;
}

body.kbr-read .breadcrumb a {
	color: var(--kbr-muted);
}

body.kbr-read .breadcrumb a:hover {
	color: var(--kbr-red);
	text-decoration: underline;
}

body.kbr-read .breadcrumb i {
	color: var(--kbr-faint);
	font-size: 11px;
}

body.kbr-read h1.single-title,
body.kbr-read h1.entry-title {
	font-size: 42px;
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--kbr-ink);
	text-transform: none;
	margin: 0 0 20px;
	float: none;
	width: 100%;
	max-width: var(--kbr-measure);
	text-wrap: balance;
}

/* Byline row ------------------------------------------------------------- */

body.kbr-read .post-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	float: none;
	width: 100%;
	max-width: var(--kbr-measure);
	font-size: 14px;
	color: var(--kbr-muted);
	margin: 0 0 28px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--kbr-line);
}

body.kbr-read .post-info > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

body.kbr-read .post-info i {
	color: var(--kbr-faint);
	font-size: 12px;
}

body.kbr-read .post-info a,
body.kbr-read .single .post-info a {
	color: var(--kbr-muted);
}

body.kbr-read .post-info a:hover {
	color: var(--kbr-navy);
}

body.kbr-read .post-info .theauthor {
	order: -1;
	color: var(--kbr-ink);
	font-weight: 600;
}

body.kbr-read .post-info .theauthor a {
	color: var(--kbr-ink);
}

body.kbr-read .post-info .theauthor i {
	display: none; /* replaced by the initials disc */
}

/* Initials disc, filled in by reader.js from the author name already printed. */
body.kbr-read .kbr-initials {
	order: -2;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--kbr-navy);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	margin-right: -4px;
}

/* ------------------------------------------------------- article: the body */

body.kbr-read .post-single-content,
body.kbr-read .thecontent {
	float: none;
	width: 100%;
	max-width: var(--kbr-measure);
	font-size: 18px;
	line-height: 1.75;
	color: var(--kbr-body);
}

body.kbr-read .thecontent p {
	margin: 0 0 28px;
}

/* The theme uppercases every heading inside .post-single-content. */
body.kbr-read .post-single-content h2,
body.kbr-read .post-single-content h3,
body.kbr-read .post-single-content h4,
body.kbr-read .post-single-content h5 {
	color: var(--kbr-ink);
	font-weight: 700;
	letter-spacing: -0.015em;
	text-transform: none;
	text-wrap: balance;
}

body.kbr-read .post-single-content h2 {
	font-size: 28px;
	line-height: 1.25;
	margin: 48px 0 18px;
}

body.kbr-read .post-single-content h3 {
	font-size: 20px;
	line-height: 1.35;
	margin: 36px 0 12px;
}

body.kbr-read .post-single-content h4 {
	font-size: 17px;
	margin: 28px 0 10px;
}

body.kbr-read .post-single-content h2 strong,
body.kbr-read .post-single-content h3 strong,
body.kbr-read .post-single-content h4 strong {
	font-weight: 700;
}

body.kbr-read .thecontent a,
body.kbr-read .thecontent p a {
	color: var(--kbr-navy);
	border-bottom: 0; /* the theme underlines with a dotted border */
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(0, 29, 99, 0.35);
}

body.kbr-read .thecontent a:hover {
	color: var(--kbr-red);
	text-decoration-color: currentColor;
}

body.kbr-read .article .thecontent ul,
body.kbr-read .article .thecontent ol {
	margin: 0 0 28px 0;
	padding-left: 24px;
}

body.kbr-read .thecontent li {
	margin-bottom: 10px;
	line-height: 1.7;
}

body.kbr-read .thecontent li::marker {
	color: var(--kbr-faint);
}

body.kbr-read .thecontent blockquote {
	font-family: var(--kbr-serif) !important;
	font-size: 21px;
	line-height: 1.55;
	color: var(--kbr-ink);
	border: 0;
	border-left: 3px solid var(--kbr-red);
	background: none;
	margin: 36px 0;
	padding: 4px 0 4px 24px;
}

body.kbr-read .thecontent figure {
	margin: 36px 0;
	max-width: 100%;
}

body.kbr-read .thecontent img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

body.kbr-read .thecontent figcaption {
	font-size: 13.5px;
	color: var(--kbr-muted);
	text-align: center;
	margin-top: 10px;
}

/* Code samples. The editor writes these as .wp-block-preformatted, full of
   &nbsp; runs, so they have to scroll rather than wrap. */
body.kbr-read .thecontent pre,
body.kbr-read .thecontent .wp-block-preformatted {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 14px;
	line-height: 1.6;
	color: var(--kbr-ink);
	background: var(--kbr-field);
	border: 1px solid var(--kbr-line);
	border-left: 3px solid var(--kbr-navy);
	border-radius: 8px;
	padding: 16px 18px;
	margin: 0 0 28px;
	overflow-x: auto;
	white-space: pre;
	tab-size: 4;
}

body.kbr-read .thecontent code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 0.86em;
	background: var(--kbr-chip);
	border-radius: 4px;
	padding: 2px 6px;
}

body.kbr-read .thecontent pre code {
	background: none;
	padding: 0;
}

body.kbr-read .thecontent table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
	margin: 0 0 28px;
}

body.kbr-read .thecontent th,
body.kbr-read .thecontent td {
	border: 1px solid var(--kbr-line);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

body.kbr-read .thecontent th {
	background: var(--kbr-field);
	color: var(--kbr-ink);
	font-weight: 600;
}

/* ------------------------------------------- the other blog-UI plugin's blocks
 * prestacheckout-blog-ui prints a read time and a table of contents. They are
 * styled to match rather than hidden, and reader.js stands down on read time
 * when its block is present, so the figure never appears twice.
 */

body.kbr-read .pcbu-readtime {
	font-size: 14px;
	color: var(--kbr-muted);
	margin: 0 0 24px;
}

/* Settings -> Blog Reader -> Table of contents. */
body.kbr-no-toc .pcbu-toc,
body.kbr-no-toc .kbr-toc {
	display: none !important;
}

body.kbr-read .pcbu-toc {
	background: var(--kbr-tint);
	border: 1px solid var(--kbr-line);
	border-radius: var(--kbr-radius);
	padding: 20px 24px;
	margin: 0 0 36px;
	max-width: var(--kbr-measure);
}

body.kbr-read .pcbu-toc h4 {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kbr-muted);
	margin: 0 0 12px;
}

body.kbr-read .pcbu-toc ol {
	margin: 0;
	padding-left: 20px;
}

body.kbr-read .pcbu-toc li {
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.5;
}

body.kbr-read .pcbu-toc a {
	color: var(--kbr-body);
	text-decoration: none;
}

body.kbr-read .pcbu-toc a:hover {
	color: var(--kbr-red);
	text-decoration: underline;
}

/* ------------------------------------------------------------- share rail
 * The theme pins .shareit with a negative margin against a 1173px container.
 * Re-anchor it to the grid instead of leaving it over the text.
 */

body.kbr-read .shareit.floating {
	position: sticky;
	top: 90px;
	left: auto;
	margin: 0 0 24px;
	width: auto;
	max-width: var(--kbr-measure);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	background: none;
	box-shadow: none;
	border: 0;
	border-top: 1px solid var(--kbr-line);
	padding: 20px 0 0;
	overflow: visible;
}

/* ------------------------------------------- related, author box, comments */

body.kbr-read .related-posts,
body.kbr-read .postauthor,
body.kbr-read #commentsAdd {
	max-width: var(--kbr-measure);
	background: none;
	box-shadow: none;
	float: none;
	width: 100%;
	padding: 0;
	margin-top: 44px;
}

body.kbr-read .related-posts > h4,
body.kbr-read .postauthor > h4,
body.kbr-read #commentsAdd .comment-reply-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kbr-muted);
	margin: 0 0 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--kbr-line);
}

body.kbr-read .related-posts .latestPost {
	float: none;
	width: 100%;
	margin: 0 0 16px;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
}

body.kbr-read .related-posts .featured-thumbnail {
	margin: 0;
	width: 64px;
}

body.kbr-read .related-posts .featured-thumbnail img {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	margin: 0;
}

body.kbr-read .related-posts .front-view-title {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	text-transform: none;
	margin: 0;
}

body.kbr-read .related-posts .front-view-title a {
	color: var(--kbr-ink);
}

body.kbr-read .related-posts .front-view-title a:hover {
	color: var(--kbr-red);
}

/* The markup order is h4, img, h5, p with no wrapper, so each child is placed
   explicitly — left to flow, the paragraph lands in the 72px avatar column and
   wraps one word per line. */
body.kbr-read .postauthor {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: 18px;
	row-gap: 6px;
	align-items: start;
}

body.kbr-read .postauthor > h4 {
	grid-column: 1 / -1;
	grid-row: 1;
}

body.kbr-read .postauthor img.avatar {
	grid-column: 1;
	grid-row: 2 / span 2;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin: 0;
}

body.kbr-read .postauthor h5 {
	grid-column: 2;
	grid-row: 2;
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	margin: 0;
}

body.kbr-read .postauthor h5 a,
body.kbr-read .postauthor h5 a.fn {
	color: var(--kbr-ink); /* the theme paints .fn a amber */
}

body.kbr-read .postauthor > p {
	grid-column: 2;
	grid-row: 3;
}

body.kbr-read .postauthor p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--kbr-muted);
	margin: 0;
}

body.kbr-read #commentsAdd textarea,
body.kbr-read #commentsAdd input[type="text"],
body.kbr-read #commentsAdd input[type="email"] {
	width: 100%;
	font-size: 15px;
	color: var(--kbr-ink);
	background: var(--kbr-field);
	border: 1px solid var(--kbr-line);
	border-radius: 8px;
	padding: 12px 14px;
	box-shadow: none;
}

body.kbr-read #commentsAdd input#submit {
	background: var(--kbr-navy);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 24px;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	width: auto;
	float: none;
}

body.kbr-read #commentsAdd input#submit:hover {
	background: var(--kbr-navy-hi);
}

/* ---------------------------------------------------------------- sidebar */

body.kbr-blog aside.sidebar.c-4-12 {
	position: sticky;
	top: 90px;
}

body.kbr-blog #sidebars,
body.kbr-blog #sidebars .sidebar,
body.kbr-blog .sidebar_list {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.kbr-blog #sidebars .widget {
	float: none;
	width: 100%;
	margin: 0 0 20px;
}

body.kbr-blog #sidebars .widget-content {
	float: none;
	/* Several widget lists float their items. Without a block formatting context
	   the card collapses to the height of its heading and the next widget draws
	   straight over it. */
	display: flow-root;
	width: 100%;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--kbr-line);
	border-radius: var(--kbr-radius);
	box-shadow: none;
	font-size: 14px;
	line-height: 1.55;
	color: var(--kbr-body);
	box-sizing: border-box;
}

body.kbr-blog #sidebars h3.widget-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kbr-muted);
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: none;
}

body.kbr-blog #sidebars .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The theme separates widget items with `border-top: 2px solid #222`, which
   reads as a row of heavy black rules, and floats the items of every
   recent-posts list. Both are undone here. */
body.kbr-blog #sidebars .widget li,
body.kbr-blog #sidebars .widget-content li,
body.kbr-blog #sidebars .widget_recent_entries li {
	float: none;
	width: auto;
	padding: 0 0 11px;
	margin: 0 0 11px;
	border-top: 0;
	border-bottom: 1px solid var(--kbr-hair);
	line-height: 1.45;
	list-style: none;
}

body.kbr-blog #sidebars .widget li:last-child,
body.kbr-blog #sidebars .widget-content li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* The theme uppercases every widget link (`.widget-content li a`), which makes
   a list of post titles unreadable at this size. */
body.kbr-blog #sidebars .widget a,
body.kbr-blog #sidebars .widget-content li a,
body.kbr-blog .sidebar.c-4-12 a {
	color: var(--kbr-ink);
	font-weight: 500;
	text-transform: none;
	text-decoration: none;
}

body.kbr-blog #sidebars .widget a:hover {
	color: var(--kbr-red);
}

/* The design's 01 / 02 / 03 rail, applied to the recent-posts widget. */
body.kbr-blog #sidebars .widget_recent_entries ul {
	counter-reset: kbr-n;
}

body.kbr-blog #sidebars .widget_recent_entries li {
	counter-increment: kbr-n;
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

body.kbr-blog #sidebars .widget_recent_entries li::before {
	content: counter(kbr-n, decimal-leading-zero);
	font-size: 14px;
	font-weight: 600;
	color: var(--kbr-faint);
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}

/* A long archive list in a sticky column cannot be reached; cap and scroll. */
body.kbr-blog #sidebars .widget_archive ul,
body.kbr-blog #sidebars .widget_categories ul {
	max-height: 260px;
	overflow-y: auto;
}

/* Sidebar search — the theme's amber button becomes the navy one. */
body.kbr-blog #sidebars #searchform fieldset {
	display: flex;
	gap: 8px;
	border: 0;
	padding: 0;
	margin: 0;
}

body.kbr-blog #sidebars #s {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 42px;
	font-size: 14px;
	color: var(--kbr-ink);
	background: var(--kbr-field);
	border: 1px solid var(--kbr-line);
	border-radius: 8px;
	padding: 0 14px;
	box-shadow: none;
	float: none;
}

body.kbr-blog #sidebars #search-image.sbutton {
	flex: none;
	width: auto;
	height: 42px;
	background-color: var(--kbr-navy) !important;
	color: #fff !important;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0 18px;
	text-indent: 0;
	float: none;
}

body.kbr-blog #sidebars #search-image.sbutton:hover {
	background-color: var(--kbr-navy-hi) !important;
}

/* ------------------------------------------------------------------ footer
 * The theme renders no footer menu and no social icons, so inc/footer.php
 * prints a footer and the two blocks it replaces are hidden here.
 */

body.kbr-foot footer.footer .pcbu-footer,
body.kbr-foot footer.footer .copyrights {
	display: none !important;
}

body.kbr-foot footer.footer {
	background: none;
	overflow: visible;
}

body.kbr-foot .kbr-footer {
	background: var(--kbr-dark);
	color: #b9c0cc;
	font-size: 14px;
	line-height: 1.6;
	margin-top: 64px;
}

body.kbr-foot .kbr-footer__inner {
	max-width: var(--kbr-container);
	margin-inline: auto;
	padding: 44px 24px 36px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
	box-sizing: border-box;
}

body.kbr-foot .kbr-footer__brand {
	margin-right: auto;
	min-width: 0;
}

/* `line-height: 0` belongs on the image, not the link. With a text site name
   that wraps to two lines on a phone, a zero line box painted both lines on top
   of each other. */
body.kbr-foot .kbr-footer__logo {
	display: inline-block;
	line-height: 1.3;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	max-width: 100%;
}

body.kbr-foot .kbr-footer__logo img {
	display: block;
	max-height: 34px;
	width: auto;
	/* A dark-on-white logo needs lifting onto the dark ground. */
	filter: brightness(0) invert(1);
}

body.kbr-foot .kbr-footer__tagline {
	margin: 10px 0 0;
	font-size: 13px;
	color: #8d96a5;
	max-width: 42ch;
}

body.kbr-foot .kbr-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.kbr-foot .kbr-footer__menu li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.kbr-foot .kbr-footer__menu a {
	color: #d4d9e2;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
}

body.kbr-foot .kbr-footer__menu a:hover {
	color: var(--kbr-amber);
}

body.kbr-foot .kbr-footer__social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.kbr-foot .kbr-footer__social li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.kbr-foot .kbr-social {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

body.kbr-foot .kbr-social:hover {
	background: var(--kbr-amber);
	color: var(--kbr-dark);
	transform: translateY(-2px);
}

body.kbr-foot .kbr-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #8d96a5;
	font-size: 13px;
	text-align: center;
	padding: 18px 24px 28px;
	max-width: var(--kbr-container);
	margin-inline: auto;
	box-sizing: border-box;
}

body.kbr-foot .kbr-footer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------ listing pages (blog home, categories)
 * Typography only. The theme lays these out with floats and fixed widths, and
 * changing that would reflow the grid, so nothing here sets float, width,
 * display or position. `:not(.kbr-read)` keeps it off the single-post byline,
 * which has its own treatment above.
 */

body.kbr-face:not(.kbr-read) .latestPost .title,
body.kbr-face:not(.kbr-read) .latestPost .title a,
body.kbr-face:not(.kbr-read) .front-view-title,
body.kbr-face:not(.kbr-read) .front-view-title a {
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--kbr-ink);
}

body.kbr-face:not(.kbr-read) .latestPost .title a:hover,
body.kbr-face:not(.kbr-read) .front-view-title a:hover {
	color: var(--kbr-red);
}

body.kbr-face:not(.kbr-read) .front-view-content,
body.kbr-face:not(.kbr-read) .latestPost p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--kbr-body);
}

body.kbr-face:not(.kbr-read) .post-info,
body.kbr-face:not(.kbr-read) .post-info a {
	font-size: 13.5px;
	color: var(--kbr-muted);
	text-transform: none;
}

body.kbr-face:not(.kbr-read) .post-info a:hover {
	color: var(--kbr-red);
}

body.kbr-face:not(.kbr-read) .readMore a,
body.kbr-face:not(.kbr-read) .read-more a {
	font-weight: 600;
	color: var(--kbr-navy);
	text-transform: none;
}

body.kbr-face:not(.kbr-read) .breadcrumb,
body.kbr-face:not(.kbr-read) .breadcrumb a {
	font-size: 13px;
	color: var(--kbr-muted);
}

body.kbr-face:not(.kbr-read) h1.postsby,
body.kbr-face:not(.kbr-read) .archive-title,
body.kbr-face:not(.kbr-read) .page-title {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--kbr-ink);
}

/* ------------------------------------------------- the mobile side drawer
 * customscript.js CLONES .primary-navigation into #mobile-menu-wrapper and
 * appends it to <body> — a 300px dark panel that slides in. The clone carries
 * `#navigation`, `ul.menu`, `.pcbu-sub-menu` and the language switcher with it,
 * so every header rule above lands inside the drawer too. Left alone, the
 * sub-menu renders as a white floating card over a dark panel and the language
 * chip becomes unreadable. Everything here hands the drawer back to the theme.
 */

body.kbr-header #mobile-menu-wrapper #navigation ul ul,
body.kbr-header #mobile-menu-wrapper #navigation ul .pcbu-sub-menu {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0;
	width: 100%;
}

body.kbr-header #mobile-menu-wrapper #navigation ul li a,
body.kbr-header #mobile-menu-wrapper #navigation ul ul a,
body.kbr-header #mobile-menu-wrapper #navigation ul .pcbu-sub-menu a {
	color: #fff !important;
	background: none !important;
	border-radius: 0;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
}

body.kbr-header #mobile-menu-wrapper #navigation ul ul a,
body.kbr-header #mobile-menu-wrapper #navigation ul .pcbu-sub-menu a {
	color: #cfd5de !important;
	font-size: 14px;
	font-weight: 400;
}

body.kbr-header #mobile-menu-wrapper #navigation ul li a:hover,
body.kbr-header #mobile-menu-wrapper #navigation ul ul a:hover {
	color: var(--kbr-amber) !important;
}

/* The current item's red underline is a desktop device; in a vertical drawer it
   reads as a stray line under one row. */
body.kbr-header #mobile-menu-wrapper #navigation ul.menu > li > a::after {
	display: none;
}

body.kbr-header #mobile-menu-wrapper ul.menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The language switcher goes back to its own styling and back into the flow —
   absolutely positioned, it floated outside the scrolling drawer. */
body.kbr-header #mobile-menu-wrapper .menu-item-gtranslate {
	display: block;
	width: 100%;
	padding: 6px 0;
}

body.kbr-header #mobile-menu-wrapper #gtranslate_wrapper,
body.kbr-header #mobile-menu-wrapper .switcher {
	position: static !important;
	width: 100% !important;
	min-width: 0;
	margin: 0 !important;
}

/* The list stays behind the chip and opens on tap. reader.js supplies the
   handler, because `.clone()` without `true` dropped GTranslate's own. */
body.kbr-header #mobile-menu-wrapper .switcher .option {
	display: none !important;
	position: static !important;
	width: 100% !important;
	max-height: none;
	overflow: visible;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.04);
}

body.kbr-header #mobile-menu-wrapper .switcher.kbr-open .option {
	display: block !important;
}

body.kbr-header #mobile-menu-wrapper .switcher .selected a {
	cursor: pointer;
}

body.kbr-header #mobile-menu-wrapper .switcher.kbr-open .selected a::after {
	transform: rotate(-180deg);
}

/* The flags are lazy and 24px square; keep them from dominating the row. */
body.kbr-header #mobile-menu-wrapper .switcher img {
	width: 18px;
	height: 12px;
	object-fit: cover;
	margin-right: 8px;
	vertical-align: -1px;
}

body.kbr-header #mobile-menu-wrapper #navigation .switcher .option a {
	padding: 11px 14px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* `#navigation` is needed here: the white-link rule above carries two ids, and
   between two !important declarations specificity still decides. Without it the
   chip renders white on its own white background. */
body.kbr-header #mobile-menu-wrapper #navigation .switcher .selected a {
	color: #1b1b1b !important;
	width: auto !important;
	box-sizing: border-box;
}

body.kbr-header #mobile-menu-wrapper #navigation .switcher .option a {
	color: #e8ecf2 !important;
	background: none !important;
	width: auto !important;
	box-sizing: border-box;
}

/* Drawer furniture added by reader.js ------------------------------------- */

/* The drawer sits off-canvas at a negative left, and the theme shifts
   .main-container 300px right while it is open. Both widen the document, which
   is why the page could be dragged sideways. `clip` contains it without making
   a scroll container, so the sticky header still sticks. */
body.kbr-header {
	overflow-x: clip;
}

body.kbr-header .main-container {
	max-width: 100%;
}

body.kbr-header .kbr-scrim {
	position: fixed;
	inset: 0;
	background: rgba(10, 14, 20, 0.5);
	z-index: 9998;
	border: 0;
}

html.kbr-locked,
html.kbr-locked body {
	overflow: hidden;
}

body.kbr-header #mobile-menu-wrapper {
	z-index: 9999;
	width: min(86vw, 320px);
	left: calc(-1 * min(86vw, 320px));
	background: #1d2228;
	padding-bottom: 32px;
	box-sizing: border-box;
	overscroll-behavior: contain;
}

body.kbr-header.mobile-menu-active #mobile-menu-wrapper {
	left: 0;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
}

body.kbr-header .kbr-drawer-close {
	position: sticky;
	top: 0;
	z-index: 2;
	display: block;
	margin-left: auto;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: #1d2228;
	border: 0;
	cursor: pointer;
}

/* Sub-menus start closed behind their caret. The theme forces them open from a
   mobile media query with `display: block !important`, so both states here have
   to be !important too — specificity alone loses to it. */
body.kbr-header #mobile-menu-wrapper #navigation ul ul,
body.kbr-header #mobile-menu-wrapper #navigation ul .pcbu-sub-menu {
	display: none !important;
}

body.kbr-header #mobile-menu-wrapper li.kbr-open > ul {
	display: block !important;
	padding-bottom: 6px;
}

body.kbr-header #mobile-menu-wrapper ul.menu > li {
	position: relative;
}

body.kbr-header .kbr-sub-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 46px;
	background: none;
	border: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
}

body.kbr-header .kbr-sub-toggle span {
	width: 9px;
	height: 9px;
	border-right: 2px solid #aab3c0;
	border-bottom: 2px solid #aab3c0;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s ease;
}

body.kbr-header li.kbr-open > .kbr-sub-toggle span {
	transform: rotate(-135deg) translate(-3px, -3px);
	border-color: var(--kbr-amber);
}

/* --------------------------------------------------------- phone header
 * A compact bar: logo left, a square toggle right — rather than the theme's
 * full-width "Menu" slab.
 */

@media (max-width: 767px) {
	body.kbr-header .main-header .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.kbr-header #header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 58px;
	}

	body.kbr-header .logo-wrap {
		flex: 0 1 auto;
		min-width: 0;
		padding: 8px 0;
	}

	body.kbr-header .logo-wrap img {
		max-height: 30px;
	}

	body.kbr-header .primary-navigation {
		flex: none;
		margin: 0;
	}

	body.kbr-header #navigation {
		border: 0;
		float: none;
		padding: 0;
	}

	/* The label is replaced by the glyph, so the text is zeroed and the
	   ::after given its own size. */
	body.kbr-header nav a#pull {
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		padding: 0;
		font-size: 0 !important;
		line-height: 1;
		text-indent: 0 !important;
		background: var(--kbr-navy) !important;
		color: #fff !important;
		border-radius: 10px;
	}

	body.kbr-header nav a#pull::after {
		position: static;
		font-size: 17px;
		line-height: 1;
	}

	/* The drawer holds the menu at this width; the inline copy stays hidden. */
	body.kbr-header .main-header #navigation ul.menu {
		display: none;
	}
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1199px) {
	body.kbr-chrome {
		--kbr-sidebar: 290px;
		--kbr-gap: 36px;
	}

	body.kbr-read h1.single-title,
	body.kbr-read h1.entry-title {
		font-size: 36px;
	}
}

@media (max-width: 991px) {
	body.kbr-blog #page {
		display: block;
	}

	body.kbr-blog aside.sidebar.c-4-12 {
		position: static;
		margin-top: 48px;
		padding-top: 32px;
		border-top: 1px solid var(--kbr-line);
	}

	body.kbr-read h1.single-title,
	body.kbr-read h1.entry-title,
	body.kbr-read .post-info,
	body.kbr-read .post-single-content,
	body.kbr-read .thecontent,
	body.kbr-read .breadcrumb,
	body.kbr-read .pcbu-toc,
	body.kbr-read .related-posts,
	body.kbr-read .postauthor,
	body.kbr-read #commentsAdd,
	body.kbr-read .shareit.floating {
		max-width: none;
	}

	body.kbr-header #header {
		flex-wrap: wrap;
	}

	body.kbr-foot .kbr-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	body.kbr-foot .kbr-footer__brand {
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	/* No `display` on ul.menu here: the theme's #pull toggle owns that, and
	   overriding it leaves the menu permanently open with no way to close it. */
	body.kbr-header #navigation ul.menu > li > a {
		padding: 12px 4px;
		font-size: 16px;
	}

	body.kbr-header #navigation ul.menu > li.current-menu-item > a::after {
		left: 4px;
		right: auto;
		width: 24px;
	}

	body.kbr-header .logo-wrap img {
		max-height: 32px;
	}

	/* The language chip is absolutely positioned by its plugin; at this width
	   give it the full row rather than letting it sit over the logo. */
	body.kbr-header .menu-item-gtranslate {
		width: 100%;
		padding: 8px 0;
	}

	body.kbr-header .switcher,
	body.kbr-header .switcher .selected a {
		width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
	}

	body.kbr-header .switcher .option {
		left: 0;
		right: auto;
		width: 100%;
	}

	body.kbr-blog #page {
		padding-top: 24px;
		padding-left: 16px;
		padding-right: 16px;
	}

	body.kbr-read h1.single-title,
	body.kbr-read h1.entry-title {
		font-size: 28px;
	}

	body.kbr-read .thecontent,
	body.kbr-read .post-single-content {
		font-size: 17px;
		line-height: 1.7;
	}

	body.kbr-read .post-single-content h2 {
		font-size: 23px;
		margin-top: 36px;
	}

	/* Footer: more room, bigger tap targets, no cramped two-line brand. */
	body.kbr-foot .kbr-footer__inner {
		padding: 36px 20px 28px;
		gap: 26px;
	}

	body.kbr-foot .kbr-footer__logo {
		font-size: 16px;
		line-height: 1.35;
	}

	body.kbr-foot .kbr-footer__tagline {
		font-size: 13.5px;
		line-height: 1.65;
		margin-top: 12px;
		max-width: none;
	}

	body.kbr-foot .kbr-footer__menu {
		gap: 12px 22px;
		width: 100%;
	}

	body.kbr-foot .kbr-footer__menu a {
		font-size: 15px;
	}

	body.kbr-foot .kbr-footer__social {
		gap: 12px;
	}

	body.kbr-foot .kbr-social {
		width: 42px;
		height: 42px;
		font-size: 16px;
	}

	body.kbr-foot .kbr-footer__legal {
		text-align: left;
		padding: 16px 20px 26px;
		line-height: 1.6;
	}
}

/* ------------------------------------------------------- overflow guards
 * A long URL, an API path or a code token in running text is the usual cause
 * of a phone page that scrolls sideways.
 */

body.kbr-read .thecontent,
body.kbr-read .post-single-content,
body.kbr-face:not(.kbr-read) .front-view-content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Only the overflow behaviour here. An earlier version also set
   `max-width: 100%`, which overrode the shell's 1180px cap further up the file
   — same selector, later in the cascade — and stretched the grid to the full
   viewport, pushing the sidebar off the right edge on desktop. */
body.kbr-blog #page,
body.kbr-blog #content_box {
	overflow-x: clip;
}

body.kbr-read .thecontent .wp-block-table,
body.kbr-read .thecontent figure.wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}

/* ----------------------------------------------------------------- print */

@media print {
	body.kbr-read .kbr-progress,
	body.kbr-read .shareit,
	body.kbr-blog aside.sidebar.c-4-12,
	body.kbr-foot .kbr-footer__social {
		display: none !important;
	}

	body.kbr-read .thecontent {
		max-width: none;
		font-size: 12pt;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.kbr-chrome * {
		transition: none !important;
		animation: none !important;
	}
}