/*
 * MicroLab Core design layer for GeneratePress (free).
 * Everything is scoped to body.mlab so it can be switched off from the settings page.
 * Elements with inline styles (the buying-guide layouts) are left alone where it matters.
 */

body.mlab {
	--mlab-brand: #1e73be;
	--mlab-brand-dark: #155a96;
	--mlab-brand-soft: #e8f1fb;
	--mlab-accent: #f59e0b;
	--mlab-text: #1f2933;
	--mlab-muted: #5b6776;
	--mlab-border: #e3e8ef;
	--mlab-bg: #f4f6fa;
	--mlab-card: #ffffff;
	--mlab-code-bg: #0f172a;
	--mlab-code-text: #e2e8f0;
	--mlab-radius: 14px;
	--mlab-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
	--mlab-nav-offset: 0px;

	background: var(--mlab-bg);
	color: var(--mlab-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.mlab.admin-bar { --mlab-nav-offset: 32px; }
@media (max-width: 782px) {
	body.mlab.admin-bar { --mlab-nav-offset: 46px; }
}
@media (max-width: 600px) {
	body.mlab.admin-bar { --mlab-nav-offset: 0px; }
}

/* ---------- Fonts ---------- */

body.mlab.mlab-system-fonts,
body.mlab.mlab-system-fonts button,
body.mlab.mlab-system-fonts input,
body.mlab.mlab-system-fonts select,
body.mlab.mlab-system-fonts textarea,
body.mlab.mlab-system-fonts .main-navigation a,
body.mlab.mlab-system-fonts .main-title,
body.mlab.mlab-system-fonts h1,
body.mlab.mlab-system-fonts h2,
body.mlab.mlab-system-fonts h3,
body.mlab.mlab-system-fonts h4,
body.mlab.mlab-system-fonts h5,
body.mlab.mlab-system-fonts h6 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- Reading typography ---------- */

body.mlab .entry-content {
	font-size: 18px;
	line-height: 1.75;
}
body.mlab .entry-content > p,
body.mlab .entry-content > ul,
body.mlab .entry-content > ol {
	margin-bottom: 1.25em;
}
body.mlab .entry-content li {
	margin-bottom: .35em;
}

body.mlab .entry-title {
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #111827;
	margin-bottom: .35em;
}

body.mlab .entry-content h2:not([style]) {
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.3;
	font-weight: 750;
	color: #111827;
	margin: 1.9em 0 .7em;
	padding-left: 14px;
	border-left: 4px solid var(--mlab-brand);
	scroll-margin-top: calc(var(--mlab-nav-offset) + 80px);
}
body.mlab .entry-content h3:not([style]) {
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.35;
	font-weight: 700;
	color: #1f2933;
	margin: 1.6em 0 .6em;
	scroll-margin-top: calc(var(--mlab-nav-offset) + 80px);
}
body.mlab .entry-content h4:not([style]) {
	font-size: 18px;
	font-weight: 700;
	margin: 1.4em 0 .5em;
}
body.mlab .entry-content h2[id],
body.mlab .entry-content h3[id] {
	scroll-margin-top: calc(var(--mlab-nav-offset) + 80px);
}

body.mlab .entry-content a:not([style]):not(.button):not(.wp-block-button__link) {
	color: var(--mlab-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(30, 115, 190, .35);
	transition: color .15s, text-decoration-color .15s;
}
body.mlab .entry-content a:not([style]):not(.button):not(.wp-block-button__link):hover {
	color: var(--mlab-brand-dark);
	text-decoration-color: currentColor;
}

body.mlab .entry-content img {
	border-radius: 8px;
	height: auto;
}

body.mlab .entry-content blockquote:not([style]) {
	margin: 1.5em 0;
	padding: 16px 20px;
	border-left: 4px solid var(--mlab-accent);
	background: #fffbeb;
	border-radius: 0 10px 10px 0;
	font-style: normal;
	color: #3f3f46;
}
body.mlab .entry-content blockquote p:last-child { margin-bottom: 0; }

body.mlab .entry-content hr {
	border: 0;
	height: 1px;
	background: var(--mlab-border);
	margin: 2.2em 0;
}

/* ---------- Cards (articles, sidebar widgets, comments) ---------- */

body.mlab.separate-containers .inside-article,
body.mlab.separate-containers .comments-area,
body.mlab.separate-containers .page-header,
body.mlab .sidebar .widget {
	background: var(--mlab-card);
	border: 1px solid var(--mlab-border);
	border-radius: var(--mlab-radius);
	box-shadow: var(--mlab-shadow);
}
body.mlab.separate-containers .page-header {
	background: transparent;
	border: 0;
	box-shadow: none;
}

body.mlab .sidebar .widget {
	padding: 24px;
	margin-bottom: 20px;
}
body.mlab .sidebar .widget-title {
	font-size: 15px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #111827;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mlab-brand-soft);
}
body.mlab .sidebar .widget ul {
	margin: 0;
}
body.mlab .sidebar .widget li {
	padding: 7px 0;
	border-bottom: 1px dashed var(--mlab-border);
	margin: 0;
	line-height: 1.45;
}
body.mlab .sidebar .widget li:last-child { border-bottom: 0; }
body.mlab .sidebar .widget a { color: #24303d; }
body.mlab .sidebar .widget a:hover { color: var(--mlab-brand); }

/* Email subscribe widget as a highlighted card. */
body.mlab .sidebar .widget_blog_subscription {
	background: linear-gradient(135deg, #1e73be 0%, #155a96 100%);
	border-color: transparent;
	color: #fff;
}
body.mlab .sidebar .widget_blog_subscription .widget-title {
	background: transparent;
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .25);
}
body.mlab .sidebar .widget_blog_subscription input[type="email"],
body.mlab .sidebar .widget_blog_subscription input[type="text"] {
	width: 100%;
	border-radius: 10px;
	border: 0;
	padding: 12px 14px;
}
body.mlab .sidebar .widget_blog_subscription button,
body.mlab .sidebar .widget_blog_subscription input[type="submit"] {
	background: #f59e0b;
	color: #111827;
	border-radius: 10px;
	font-weight: 700;
	border: 0;
}

/* ---------- Navigation ---------- */

body.mlab .main-navigation {
	background: linear-gradient(90deg, #1a6ab0 0%, #1e73be 60%, #2383d6 100%);
	box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
}
body.mlab .main-navigation .main-nav ul li a {
	font-weight: 600;
	letter-spacing: .01em;
}
body.mlab .main-navigation .main-nav ul ul {
	border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .18);
	overflow: hidden;
}

body.mlab.mlab-sticky-nav #site-navigation {
	position: -webkit-sticky;
	position: sticky;
	top: var(--mlab-nav-offset);
	z-index: 500;
}

/* ---------- Sticky sidebar (bottom ad slot) ---------- */

@media (min-width: 769px) {
	body.mlab.mlab-sticky-sidebar .site-content {
		display: flex;
		align-items: stretch;
	}
	body.mlab.mlab-sticky-sidebar .site-content::before,
	body.mlab.mlab-sticky-sidebar .site-content::after {
		display: none;
	}
	body.mlab.mlab-sticky-sidebar #right-sidebar {
		display: flex;
		flex-direction: column;
	}
	body.mlab.mlab-sticky-sidebar #right-sidebar > .inside-right-sidebar {
		flex: 1 0 auto;
	}
	body.mlab.mlab-sticky-sidebar .mlab-slot--sidebar-bottom {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--mlab-nav-offset) + 76px);
	}
}

/* ---------- Ad and code slots ---------- */

body.mlab .mlab-slot {
	text-align: center;
	margin: 24px auto;
	max-width: 100%;
	overflow: hidden;
}
body.mlab .mlab-slot--after-nav {
	margin: 16px auto;
}
body.mlab .mlab-slot--sidebar-top,
body.mlab .mlab-slot--sidebar-bottom {
	margin: 0 0 20px;
}

/* ---------- Code ---------- */

body.mlab .entry-content code,
body.mlab .entry-content kbd,
body.mlab .entry-content pre,
body.mlab .entry-content samp {
	font-family: ui-monospace, SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

body.mlab .entry-content :not(pre) > code {
	font-size: .88em;
	background: #eef2f7;
	color: #b4235a;
	padding: .12em .4em;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	white-space: break-spaces;
}

body.mlab .entry-content pre:not([style]) {
	background: var(--mlab-code-bg);
	color: var(--mlab-code-text);
	font-size: 14.5px;
	line-height: 1.65;
	padding: 20px 22px;
	border-radius: 12px;
	border: 1px solid #1e293b;
	overflow-x: auto;
	white-space: pre;
	word-wrap: normal;
	tab-size: 4;
	margin: 1.4em 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
body.mlab .entry-content pre code {
	background: none;
	color: inherit;
	padding: 0;
	border: 0;
	font-size: inherit;
}
body.mlab .entry-content pre::-webkit-scrollbar { height: 8px; }
body.mlab .entry-content pre::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }

body.mlab .mlab-code {
	position: relative;
	margin: 1.4em 0;
}
body.mlab .mlab-code > pre {
	margin: 0 !important;
	padding-top: 38px !important;
}
body.mlab .mlab-copy {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .03em;
	color: #cbd5e1;
	background: #1e293b;
	border: 1px solid #334155;
	border-radius: 7px;
	padding: 7px 10px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
body.mlab .mlab-copy:hover { background: #334155; color: #fff; }
body.mlab .mlab-copy.is-done { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ---------- Tables (plain tables only; styled layouts keep their own look) ---------- */

body.mlab .mlab-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.4em 0;
	border: 1px solid var(--mlab-border);
	border-radius: 12px;
	box-shadow: var(--mlab-shadow);
}
body.mlab .entry-content table:not([style]) {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	border: 0;
}
body.mlab .mlab-table-wrap table:not([style]) { margin: 0; }
body.mlab .entry-content table:not([style]) th {
	background: #1e73be;
	color: #fff;
	font-weight: 650;
	text-align: left;
	padding: 12px 14px;
	border: 0;
	white-space: nowrap;
}
body.mlab .entry-content table:not([style]) td {
	padding: 11px 14px;
	border: 0;
	border-top: 1px solid var(--mlab-border);
	vertical-align: top;
}
body.mlab .entry-content table:not([style]) tr:nth-child(even) td { background: #f8fafc; }
body.mlab .entry-content table:not([style]) tr:hover td { background: var(--mlab-brand-soft); }

/* ---------- Table of contents ---------- */

body.mlab .mlab-toc {
	margin: 1.6em 0 2em;
	background: #f8fbff;
	border: 1px solid #d6e6f7;
	border-radius: 12px;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
}
body.mlab .mlab-toc__title {
	cursor: pointer;
	list-style: none;
	padding: 14px 18px;
	font-weight: 750;
	color: #111827;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.mlab .mlab-toc__title::-webkit-details-marker { display: none; }
body.mlab .mlab-toc__title::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--mlab-brand);
	border-bottom: 2px solid var(--mlab-brand);
	transform: rotate(45deg);
	transition: transform .2s;
	margin-left: 12px;
}
body.mlab .mlab-toc[open] .mlab-toc__title::after { transform: rotate(-135deg); }
body.mlab .mlab-toc__list {
	margin: 0;
	padding: 0 18px 16px 40px;
	columns: 2 260px;
	column-gap: 28px;
}
body.mlab .mlab-toc__list li {
	margin: 0 0 6px;
	break-inside: avoid;
}
body.mlab .entry-content .mlab-toc__list a {
	color: #24303d;
	text-decoration: none;
}
body.mlab .entry-content .mlab-toc__list a:hover { color: var(--mlab-brand); text-decoration: underline; }

/* ---------- Reading progress ---------- */

.mlab-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--mlab-nav-offset, 0);
	height: 3px;
	background: linear-gradient(90deg, #f59e0b, #ef4444);
	transform-origin: 0 50%;
	transform: scaleX(0);
	z-index: 9999;
	pointer-events: none;
}

/* ---------- Post meta, buttons, comments, footer ---------- */

body.mlab .entry-meta {
	font-size: 14px;
	color: var(--mlab-muted);
}
body.mlab .entry-meta a { color: var(--mlab-muted); }
body.mlab .entry-meta a:hover { color: var(--mlab-brand); }
body.mlab footer.entry-meta .cat-links a,
body.mlab footer.entry-meta .tags-links a {
	display: inline-block;
	background: var(--mlab-brand-soft);
	color: var(--mlab-brand-dark);
	padding: 3px 10px;
	border-radius: 999px;
	margin: 2px 2px 2px 0;
	text-decoration: none;
}

body.mlab .button,
body.mlab .wp-block-button__link,
body.mlab input[type="submit"],
body.mlab button:not(.menu-toggle):not(.mlab-copy):not(.search-submit) {
	border-radius: 10px;
	font-weight: 650;
	transition: transform .12s, box-shadow .12s, background .15s;
}
body.mlab .button:hover,
body.mlab .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
}

body.mlab .comments-area input[type="text"],
body.mlab .comments-area input[type="email"],
body.mlab .comments-area input[type="url"],
body.mlab .comments-area textarea {
	border-radius: 10px;
	border: 1px solid var(--mlab-border);
	padding: 12px 14px;
	background: #fbfcfe;
}
body.mlab .comments-area .comment-body {
	border-radius: 12px;
}

body.mlab .site-footer .site-info {
	background: #0f172a;
	color: #94a3b8;
	font-size: 14px;
}
body.mlab .site-footer .site-info a { color: #cbd5e1; }
body.mlab .footer-widgets {
	background: #111c33;
	color: #cbd5e1;
}
body.mlab .footer-widgets .widget-title { color: #fff; }
body.mlab .footer-widgets a { color: #e2e8f0; }

body.mlab .generate-back-to-top {
	border-radius: 12px;
	background: var(--mlab-brand);
	box-shadow: 0 8px 20px rgba(30, 115, 190, .35);
}

/* ---------- Archives and search results ---------- */

body.mlab.blog .inside-article,
body.mlab.archive .inside-article,
body.mlab.search .inside-article {
	transition: box-shadow .2s, transform .2s;
}
body.mlab.blog .inside-article:hover,
body.mlab.archive .inside-article:hover,
body.mlab.search .inside-article:hover {
	box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
	transform: translateY(-2px);
}
body.mlab.blog .entry-title a,
body.mlab.archive .entry-title a,
body.mlab.search .entry-title a {
	color: #111827;
}
body.mlab.blog .entry-title a:hover,
body.mlab.archive .entry-title a:hover,
body.mlab.search .entry-title a:hover {
	color: var(--mlab-brand);
}
body.mlab.blog .post-image img,
body.mlab.archive .post-image img {
	border-radius: 10px;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
	body.mlab .entry-content { font-size: 17px; line-height: 1.7; }
	body.mlab.separate-containers .inside-article { border-radius: 0; border-left: 0; border-right: 0; }
	body.mlab .entry-content pre:not([style]) { font-size: 13.5px; padding: 16px; border-radius: 10px; }
	body.mlab .mlab-toc__list { columns: 1; }
	body.mlab .sidebar .widget { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	body.mlab *,
	body.mlab *::before,
	body.mlab *::after {
		transition: none !important;
	}
}

@media print {
	.mlab-progress,
	.mlab-copy,
	.mlab-slot { display: none !important; }
}