/* =========================================================
   365 DAYS ABOUT WEBSITES
   Modern SaaS / Knowledge Base UI
   Production Ready CSS
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {

	--bg: #f8fafc;
	--surface: #ffffff;

	--text: #0f172a;
	--muted: #64748b;

	--border: #e2e8f0;

	--primary: #2563eb;
	--primary-hover: #1d4ed8;

	--success: #16a34a;

	--radius-sm: 12px;
	--radius-md: 20px;
	--radius-lg: 28px;

	--shadow-sm: 0 4px 20px rgba(15, 23, 42, .04);
	--shadow-md: 0 10px 40px rgba(15, 23, 42, .06);
	--shadow-lg: 0 20px 60px rgba(15, 23, 42, .08);

	--container: 1280px;

	--transition: .25s ease;

}

/* =========================================================
   BASE
========================================================= */

body {



	font-size: 18px;
	line-height: 1.8;
	font-weight: 400;

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

}

#ez-toc-container {
  
  border: 0px solid #aaa !important;
  border-radius: 0px !important;
  -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.05) !important;
  box-shadow: 0 0px 0px rgba(0,0,0,.05) !important;
  display: table;
  margin-bottom: 0em !important;
  padding: 0px !important;
  position: relative;
  width: auto;
}

div#ez-toc-container ul li, div#ez-toc-container ul li a {
  font-weight: 400 !important;
}

.single-article {
    padding: 40px 0px 0px 40px;
}

.inside-article {


	margin: 0 auto;

	padding-left: 24px;
	padding-right: 24px;

}

.single-knowledge {

	padding-bottom: 100px;

}

a {

	text-decoration: none;
	transition: var(--transition);

}

img {

	max-width: 100%;
	height: auto;
	display: block;

}

/* =========================================================
   READING PROGRESS
========================================================= */

.reading-progress {

	position: fixed;

	top: 0;
	left: 0;

	width: 0%;
	height: 4px;

	background: var(--primary);

	z-index: 9999;

}

/* =========================================================
   HERO
========================================================= */

.single-hero {

	padding-top: 0px;
	padding-bottom: 20px;
	display: flex;

}

.single-category {

	margin-bottom: 24px;

}

.single-category a {

	display: inline-flex;

	padding: 8px 14px;

	background: rgba(37,99,235,.08);

	color: var(--primary);

	border-radius: 999px;

	font-size: 14px;
	font-weight: 600;

}

.single-title {

font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;

}

/* =========================================================
   META
========================================================= */

.single-meta {

	display: flex;
	flex-wrap: wrap;
	gap: 20px;

	align-items: center;

}

.meta-author,
.meta-item {

	display: flex;
	align-items: center;
	gap: 14px;

	background: var(--surface);

	padding: 14px 18px;

	border-radius: var(--radius-sm);

	box-shadow: var(--shadow-sm);

}

.meta-author img {

	border-radius: 999px;

}

.meta-author span,
.meta-item span {

	display: block;

	font-size: 13px;
	line-height: 1.2;

	color: var(--muted);

}

.meta-author strong,
.meta-item strong {

	display: block;

	font-size: 15px;
	font-weight: 700;

	color: var(--text);

}

/* =========================================================
   FEATURED IMAGE
========================================================= */

.single-cover {

	margin-top: 0px;
	margin-bottom: 0px;

}

.single-cover-image {

	border-radius: var(--radius-lg);

	overflow: hidden;

	box-shadow: var(--shadow-lg);

}

.single-cover-image img {

	width: 100%;
	object-fit: cover;

}

/* =========================================================
   GRID
========================================================= */

.single-grid {

	display: grid;

	grid-template-columns: minmax(0, 1fr) 340px;

	gap: 60px;

	align-items: start;

}

/* =========================================================
   CONTENT
========================================================= */

.single-content {

	min-width: 0;

}

.entry-content {

	font-size: 18px;

}

.entry-content > * {

	

}

.entry-content h2 {

	font-size: clamp(30px, 4vw, 44px);

	line-height: 1.15;
	letter-spacing: -0.03em;

	font-weight: 800;

	margin-top: 80px;
	margin-bottom: 24px;

}

.entry-content h3 {

	font-size: 28px;
	font-weight: 700;

	margin-top: 56px;
	margin-bottom: 20px;

}

.entry-content p {

	color: #1e293b;

}

.entry-content ul,
.entry-content ol {

	padding-left: 0px;

}

.entry-content li {

	margin-bottom: 12px;

}

.entry-content strong {

	font-weight: 700;
	color: var(--text);

}

/* =========================================================
   CODE BLOCKS
========================================================= */

.entry-content pre {

	background: #0f172a;

	color: #f8fafc;

	padding: 28px;

	border-radius: var(--radius-md);

	overflow-x: auto;

	font-size: 15px;
	line-height: 1.7;

	box-shadow: var(--shadow-md);

}

.entry-content code {

	font-family: monospace;

}

/* =========================================================
   BLOCKQUOTE
========================================================= */

.entry-content blockquote {

	position: relative;

	padding: 32px;

	background: #ffffff;

	border-left: 5px solid var(--primary);

	border-radius: var(--radius-md);

	box-shadow: var(--shadow-sm);

	font-size: 22px;
	line-height: 1.6;

	font-weight: 500;

}

/* =========================================================
   AI SUMMARY
========================================================= */

.ai-summary {

	background: linear-gradient(
		135deg,
		rgba(37,99,235,.08),
		rgba(37,99,235,.03)
	);

	padding: 32px;

	border-radius: var(--radius-md);

	margin-bottom: 40px;

	border: 1px solid rgba(37,99,235,.12);

}

.ai-summary h3 {

	margin-bottom: 12px;

	font-size: 20px;
	font-weight: 700;

}

/* =========================================================
   TOC
========================================================= */

.table-of-contents {

	background: var(--surface);

	padding: 32px;

	border-radius: var(--radius-md);

	box-shadow: var(--shadow-sm);

	margin-bottom: 40px;

}

.table-of-contents h3 {

	margin-bottom: 20px;

	font-size: 22px;
	font-weight: 700;

}

.table-of-contents ul {

	list-style: none;
	padding: 0;
	margin: 0;

}

.table-of-contents li {

	margin-bottom: 14px;

}

.table-of-contents a {

	color: var(--muted);

	font-size: 16px;

}

.table-of-contents a:hover {

	color: var(--primary);

}

/* =========================================================
   CTA
========================================================= */

.article-cta {

	margin-top: 80px;

	background: #0f172a;

	color: #ffffff;

	padding: 48px;

	border-radius: var(--radius-lg);

	position: relative;

	overflow: hidden;

}

.article-cta h3 {

	font-size: 34px;

	line-height: 1.1;

	margin-bottom: 14px;

}

.article-cta p {

	color: rgba(255,255,255,.7);

	max-width: 600px;

	margin-bottom: 28px;

}

/* =========================================================
   BUTTONS
========================================================= */

.btn-primary {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 14px 24px;

	background: var(--primary);

	color: #ffffff;

	border-radius: 14px;

	font-weight: 600;

	box-shadow: var(--shadow-sm);

}

.btn-primary:hover {

	background: var(--primary-hover);

	transform: translateY(-2px);

}

/* =========================================================
   FAQ
========================================================= */

.faq-block {

	margin-top: 80px;

}

.faq-item {

	background: var(--surface);

	padding: 30px;

	border-radius: var(--radius-md);

	box-shadow: var(--shadow-sm);

	margin-bottom: 20px;

}

.faq-item h3 {

	font-size: 22px;
	font-weight: 700;

	margin-bottom: 12px;

}

/* =========================================================
   AUTHOR BOX
========================================================= */

.author-box {

	display: flex;
	gap: 24px;

	align-items: center;

	margin-top: 80px;

	background: var(--surface);

	padding: 36px;

	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-md);

}

.author-avatar img {

	border-radius: 999px;

}

.author-content h3 {

	margin-bottom: 10px;

	font-size: 24px;
	font-weight: 700;

}

.author-content p {

	color: var(--muted);

	margin: 0;

}

/* =========================================================
   SIDEBAR
========================================================= */

.single-sidebar {

	position: sticky;
  top: 45px;

}

.sticky-box {



}

.sidebar-box {

	background: var(--surface);

	padding: 28px;

	border-radius: var(--radius-md);

	box-shadow: var(--shadow-sm);

	margin-bottom: 24px;

}

.sidebar-box h3 {

	font-size: 20px;
	font-weight: 700;

	margin-bottom: 18px;

}

/* =========================================================
   RELATED POSTS
========================================================= */

.related-posts {

	margin-top: 10px;

}

.related-posts h2 {

	font-size: 42px;
	font-weight: 800;

	margin-bottom: 40px;

}

.related-grid {

	display: grid;

	grid-template-columns: repeat(3,1fr);

	gap: 24px;

}

.related-card {

	background: var(--surface);

	border-radius: var(--radius-md);

	overflow: hidden;

	box-shadow: var(--shadow-sm);

	transition: var(--transition);

}

.related-card:hover {

	transform: translateY(-6px);

	box-shadow: var(--shadow-lg);

}

.related-thumb img {

	width: 100%;
	height: 240px;

	object-fit: cover;

}

.related-content {

	padding: 24px;

}

.related-content h3 {

	font-size: 22px;
	line-height: 1.35;

	font-weight: 700;

	color: var(--text);

}

/* =========================================================
   BREADCRUMBS
========================================================= */

.custom-breadcrumbs {



	font-size: 14px;

	color: var(--muted);

}

.custom-breadcrumbs a {

	color: var(--muted);

}

.custom-breadcrumbs a:hover {

	color: var(--primary);

}

/* =========================================================
   TABLES
========================================================= */

.entry-content table {

	width: 100%;

	border-collapse: collapse;

	background: var(--surface);

	border-radius: var(--radius-md);

	overflow: hidden;

	box-shadow: var(--shadow-sm);

	margin: 40px 0;

}

.entry-content th,
.entry-content td {

	padding: 18px;

	border-bottom: 1px solid var(--border);

	text-align: left;

}

.entry-content th {

	background: #f1f5f9;

	font-weight: 700;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

	.single-grid {

		grid-template-columns: 1fr;

	}

	.single-sidebar {

		display: none;

	}

}

@media (max-width: 768px) {

	body {

		font-size: 16px;

	}

	.single-title {

		font-size: 42px;

	}

	.single-meta {

		flex-direction: column;
		align-items: stretch;

	}

	.meta-author,
	.meta-item {

		width: 100%;

	}

	.related-grid {

		grid-template-columns: 1fr;

	}

	.article-cta {

		padding: 32px;

	}

	.author-box {

		flex-direction: column;
		align-items: flex-start;

	}

	.entry-content h2 {

		font-size: 34px;

	}

	.entry-content h3 {

		font-size: 26px;

	}

}

@media (max-width: 480px) {

	.inside-article {

		padding-left: 18px;
		padding-right: 18px;

	}

	.single-title {

		font-size: 34px;

	}

	.article-cta h3 {

		font-size: 28px;

	}

}

/* INFO */

.obabko-info-box {

	background: #eff6ff;

	border-left: 4px solid #2563eb;

	padding: 28px;

	border-radius: 20px;

	margin: 40px 0;

}

/* WARNING */

.obabko-warning-box {

	background: #fff7ed;

	border-left: 4px solid #f97316;

	padding: 28px;

	border-radius: 20px;

	margin: 40px 0;

}

/* CHECKLIST */

.obabko-checklist {

	background: #f0fdf4;

	padding: 28px;

	border-radius: 20px;

	margin: 40px 0;

}

.obabko-checklist ul {

	list-style: none;

	padding: 0;

}

.obabko-checklist li {

	position: relative;

	padding-left: 30px;

	margin-bottom: 14px;

}

.obabko-checklist li::before {

	content: "✔";

	position: absolute;

	left: 0;

	color: #16a34a;

}

/* CTA */

.obabko-cta-box {

	background: #0f172a;

	color: #fff;

	padding: 40px;

	border-radius: 28px;

	margin: 60px 0;

}

.obabko-cta-box p {

	color: rgba(255,255,255,.7);

}


/* STEP */
.obabko-step {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 24px;
	margin: 30px 0;
	box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

.obabko-step .step-number {
	font-weight: 700;
	color: #2563eb;
	margin-bottom: 10px;
}

/* QUOTE */
.obabko-quote {
	background: #0f172a;
	color: #fff;
	padding: 28px;
	border-radius: 20px;
	margin: 30px 0;
	position: relative;
}

.obabko-quote .quote-icon {
	font-size: 40px;
	opacity: .3;
	position: absolute;
	top: 10px;
	left: 20px;
}

/* PROS */
.obabko-pros {
	background: #f0fdf4;
	border-left: 4px solid #16a34a;
	padding: 24px;
	border-radius: 16px;
	margin: 30px 0;
}

.obabko-pros h4 {
	color: #16a34a;
}

/* CONS */
.obabko-cons {
	background: #fef2f2;
	border-left: 4px solid #ef4444;
	padding: 24px;
	border-radius: 16px;
	margin: 30px 0;
}

.obabko-cons h4 {
	color: #ef4444;
}

/* COMPARE */
.obabko-compare {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 24px;
	border-radius: 18px;
	margin: 30px 0;
}

/* TOOL */
.obabko-tool {
	background: #eff6ff;
	border-left: 4px solid #2563eb;
	padding: 24px;
	border-radius: 16px;
	margin: 30px 0;
}

.obabko-tool h4 {
	color: #2563eb;
}

.obabko-faq {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 28px;
	margin: 40px 0;
}

.obabko-faq h4 {
	margin-bottom: 20px;
	font-size: 22px;
	font-weight: 700;
}

.obabko-faq b {
	display: block;
	margin-top: 18px;
	color: #0f172a;
}

.obabko-reklama {
	background: #0f172a;
	color: #fff;
	padding: 40px;
	border-radius: 24px;
	margin: 50px 0;
}

.reklama-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
}

.reklama-image img {
	width: 100%;
	border-radius: 16px;
}

.reklama-content h3 {
	font-size: 28px;
	margin-bottom: 12px;
}

.reklama-content p {
	color: rgba(255,255,255,.7);
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	.reklama-grid {
		grid-template-columns: 1fr;
	}
}

.obabko-columns {
	display: grid;
	gap: 20px;
	margin: 40px 0;
}

.obabko-columns.cols-1 {
	grid-template-columns: 1fr;
}

.obabko-columns.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.obabko-columns.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.obabko-columns.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* mobile fallback */
@media (max-width: 768px) {
	.obabko-columns {
		grid-template-columns: 1fr !important;
	}
}

.obabko-code-wrap {

	margin: 40px 0;

}

.obabko-code {

	background: #0f172a;

	color: #f8fafc;

	padding: 28px;

	border-radius: 20px;

	overflow-x: auto;

	font-size: 15px;
	line-height: 1.7;

	font-family:
		"Fira Code",
		"JetBrains Mono",
		monospace;

	box-shadow:
		0 10px 40px rgba(0,0,0,.12);

}

/* scrollbar */

.obabko-code::-webkit-scrollbar {

	height: 10px;

}

.obabko-code::-webkit-scrollbar-thumb {

	background: rgba(255,255,255,.15);

	border-radius: 999px;

}


/* =========================================
   CODE BLOCK
========================================= */

.obabko-code-block {

	margin: 40px 0;

	border-radius: 20px;

	overflow: hidden;

	background: #0f172a;

	box-shadow:
		0 20px 60px rgba(0,0,0,.12);

}

/* HEADER */

.code-header {

	display: flex;

	align-items: center;
	justify-content: space-between;

	padding: 14px 20px;

	background: #111827;

	border-bottom: 1px solid rgba(255,255,255,.06);

}

.code-filename {

	color: rgba(255,255,255,.7);

	font-size: 14px;

	font-family: monospace;

}

/* COPY BUTTON */

.copy-code-btn {

	background: rgba(255,255,255,.08);

	border: 0;

	color: #fff;

	padding: 8px 14px;

	border-radius: 10px;

	cursor: pointer;

	font-size: 13px;

	transition: .2s ease;

}

.copy-code-btn:hover {

	background: rgba(255,255,255,.14);

}

/* CODE */

.obabko-code-block pre {

	margin: 0 !important;

	border-radius: 0 !important;

	background: transparent !important;

	font-size: 15px;

}

/* TERMINAL */

.obabko-terminal {

	background: #020617;

	border-radius: 20px;

	overflow: hidden;

	margin: 0px 0;

	box-shadow:
		0 20px 60px rgba(0,0,0,.12);

}

.terminal-header {

	display: flex;

	align-items: center;

	gap: 8px;

	padding: 14px 18px;

	background: #111827;

}

.dot {

	width: 12px;
	height: 12px;

	border-radius: 999px;

}

.red {
	background: #ef4444;
}

.yellow {
	background: #f59e0b;
}

.green {
	background: #22c55e;
}

.obabko-terminal pre {

	margin: 0;

	padding: 28px;

	color: #f8fafc;

	font-family:
		"JetBrains Mono",
		monospace;

	font-size: 15px;

	line-height: 1.7;

	overflow-x: auto;

}

/* TABS */

.obabko-code-tabs {

	margin: 50px 0;

}

/* LINE NUMBERS */

.line-numbers .line-numbers-rows {

	border-right:
		1px solid rgba(255,255,255,.08);

}



/* =========================================
   COLUMNS
========================================= */

.obabko-columns {

	display: grid;

	gap: 24px;

	margin: 40px 0;

}

/* 1 */

.obabko-columns.cols-1 {

	grid-template-columns: 1fr;

}

/* 2 */

.obabko-columns.cols-2 {

	grid-template-columns:
		repeat(2, minmax(0,1fr));

}

/* 3 */

.obabko-columns.cols-3 {

	grid-template-columns:
		repeat(3, minmax(0,1fr));

}

/* 4 */

.obabko-columns.cols-4 {

	grid-template-columns:
		repeat(4, minmax(0,1fr));

}

/* 5 */

.obabko-columns.cols-5 {

	grid-template-columns:
		repeat(5, minmax(0,1fr));

}

/* COLUMN */

.obabko-col {

	background: #ffffff;

	border: 1px solid #e2e8f0;

	border-radius: 20px;

	padding: 24px;

	box-shadow:
		0 10px 30px rgba(0,0,0,.04);

	transition:
		transform .2s ease,
		box-shadow .2s ease;

}

/* HOVER */

.obabko-col:hover {

	transform: translateY(-4px);

	box-shadow:
		0 20px 40px rgba(0,0,0,.08);

}

/* MOBILE */

@media (max-width: 992px) {

	.obabko-columns.cols-3,
	.obabko-columns.cols-4,
	.obabko-columns.cols-5 {

		grid-template-columns:
			repeat(2, minmax(0,1fr));

	}

}

@media (max-width: 768px) {

	.obabko-columns {

		grid-template-columns:
			1fr !important;

	}

}

.obabko-col span {
    display:block;
}