/* ==========================================================
   PART 1 : LAYOUT • HEADER • META • SECTION TITLE • PROGRESS
========================================================== */

/* ==========================
   OVERFLOW
========================== */

body{
	overflow-x:hidden;
}

.ok-feed-wrap{
	width:100%;
	overflow:hidden;
}

/* ==========================
   POST CONTAINER
========================== */

.ok-post-container{
	width:100%;
	max-width:920px;
	margin:0 auto;
	padding:0 24px;
	box-sizing:border-box;
}

.ok-single-article{
	width:100%;
	min-width:0;
}

/* ==========================
   POST HEADER
========================== */

.ok-post-header{
	margin:0 0 32px;
}

.ok-post-title{
	margin:0 0 22px;
	font-size:2.2rem;
	font-weight:800;
	line-height:1.25;
	letter-spacing:-.03em;
	color:#111;
	word-break:break-word;
}

/* ==========================
   UNIVERSAL CARD ICON
   (Use in Meta / Related / Trending / Top Stories)
========================== */

.ok-card-icon{
	width:16px;
	height:16px;
	flex-shrink:0;
	display:block;
	color:var(--ok-primary);
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

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

.post-meta{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:12px;
	margin:0;
	padding:0;
	flex-shrink:0;
}

.meta-item{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	width:100%;
	box-sizing:border-box;
	padding:10px 18px;
	background:#fafafa;
	border:1px solid #e8e8e8;
	border-radius:999px;
	font-size:14px;
	font-weight:600;
	line-height:1;
	color:#555;
	text-decoration:none;
	transition:.25s ease;
}

.meta-item:hover{
	background:#fff5f5;
	border-color:rgba(225,6,0,.28);
	color:var(--ok-primary);
	transform:translateY(-2px);
	box-shadow:0 10px 22px rgba(0,0,0,.06);
}

.meta-item svg{
	width:16px;
	height:16px;
	flex-shrink:0;
	display:block;
	color:var(--ok-primary);
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* ==========================
   UNIVERSAL SECTION TITLE
========================== */

.ok-section-title{
	display:flex;
	align-items:center;
	gap:12px;
	margin:46px 0 22px;
	padding:0 0 14px;
	border-bottom:2px solid #ededed;
	font-size:1.34rem;
	font-weight:800;
	line-height:1.25;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#111;
}

.ok-section-title>*{
	margin:0;
}

.ok-section-title svg{
	width:20px;
	height:20px;
	flex-shrink:0;
	display:block;
	color:var(--ok-primary);
	fill:none;
	stroke:currentColor;
	stroke-width:2.2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* ==========================
   UNIVERSAL LINK STYLE
========================== */

.ok-post-content a,
.ok-related-title,
.ok-story-title,
.ok-trending-title{
	text-decoration:none;
	text-decoration-thickness:2px;
	text-underline-offset:4px;
	transition:.25s;
}

.ok-post-content a:hover,
.ok-related-title:hover,
.ok-story-title:hover,
.ok-trending-title:hover{
	color:var(--ok-primary);
	text-decoration:underline;
}

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

#reading-progress{
	position:fixed;
	top:0;
	left:0;
	width:0;
	height:4px;
	background:var(--ok-primary);
	z-index:9999;
	box-shadow:0 2px 8px rgba(225,6,0,.30);
	transition:width .08s linear;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

	.ok-post-container{
		padding:0 18px;
	}

	.ok-post-header{
		margin-bottom:28px;
	}

	.ok-post-title{
		margin-bottom:18px;
		font-size:1.85rem;
		line-height:1.28;
	}

	.post-meta{
		gap:10px;
	}

	.meta-item{
		padding:9px 15px;
		font-size:.8rem;
	}

	.meta-item svg{
		width:15px;
		height:15px;
	}

	.ok-section-title{
		margin:40px 0 18px;
		padding-bottom:12px;
		font-size:1.12rem;
		gap:10px;
	}

	.ok-section-title svg{
		width:18px;
		height:18px;
	}
}

/* ==========================================================
   SINGLE POST
   PART 2 : AUTHOR BOX • CONTENT
========================================================== */

/* ==========================
   AUTHOR CARD
========================== */

.ok-author-strip{
	display:flex;
	align-items:flex-start;
	gap:20px;
	margin:40px 0;
	padding:24px;
	background:#fff;
	border:1px solid #ececec;
	border-radius:22px;
	box-shadow:0 10px 28px rgba(0,0,0,.06);
	overflow:hidden;
}

/* ==========================
   AVATAR
========================== */

.ok-author-avatar{
	flex:0 0 80px;
	width:80px;
	height:80px;
}

.ok-author-avatar img{
	display:block;
	width:80px;
	height:80px;
	min-width:80px;
	min-height:80px;
	max-width:80px;
	max-height:80px;
	border-radius:50%;
	object-fit:cover;
	background:#f5f5f5;
	border:3px solid #fff;
	box-shadow:0 8px 20px rgba(0,0,0,.12);
	transition:transform .3s ease;
}

.ok-author-strip:hover .ok-author-avatar img{
	transform:scale(1.04);
}

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

.ok-author-content{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:10px;
}

/* ==========================
   TOP ROW
========================== */

.ok-author-top{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:18px;
	width:100%;
}

/* ==========================
   NAME
========================== */

.ok-author-name{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	gap:8px;
	margin:0;
	font-size:1.22rem;
	font-weight:800;
	line-height:1.35;
	color:#111;
	flex:1;
	min-width:0;
}

.ok-author-verified{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:18px;
	height:18px;
	flex:0 0 18px;
	color:#1d9bf0;
}

.ok-author-verified svg{
	display:block;
	width:100%;
	height:100%;
	fill:currentColor;
}

/* ==========================
   FOLLOW BUTTON
========================== */

.ok-follow-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	flex-shrink:0;
	padding:10px 18px;
	border-radius:999px;
	background:var(--ok-primary);
	color:#fff;
	font-size:.88rem;
	font-weight:700;
	text-decoration:none;
	white-space:nowrap;
	transition:
		background .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}

.ok-follow-btn:hover{
	background:var(--ok-primary-hover);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 10px 22px rgba(225,6,0,.20);
}

.ok-follow-btn svg{
	width:16px;
	height:16px;
	flex-shrink:0;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* ==========================
   ROLE BADGE
========================== */

.ok-author-role{
	display:inline-flex;
	align-items:center;
	align-self:flex-start;
	padding:7px 14px;
	border-radius:999px;
	background:var(--ok-primary);
	color:#fff;
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	line-height:1;
}

/* ==========================
   AUTHOR BIO
========================== */

.ok-author-bio{
	margin:0;
	font-size:.94rem;
	line-height:1.75;
	color:#666;
}

/* ==========================
   AUTHOR SOCIAL ROW
========================== */

.ok-author-social-row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin:-14px 0 34px;
}

.ok-author-social-row a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border-radius:50%;
	background:#fff;
	border:1px solid #e7e7e7;
	color:#666;
	text-decoration:none;
	box-shadow:0 4px 12px rgba(0,0,0,.05);
	transition:.25s;
}

.ok-author-social-row a:hover{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
	transform:translateY(-3px);
}

.ok-author-social-row svg{
	width:18px;
	height:18px;
	fill:currentColor;
}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

	.ok-author-strip{
		gap:16px;
		padding:18px;
	}

	.ok-author-avatar{
		flex:0 0 64px;
	}

	.ok-author-avatar img{
		width:64px;
		height:64px;
	}

	.ok-author-content{
		gap:8px;
	}

	.ok-author-top{
		flex-direction:row;
		align-items:flex-start;
		justify-content:space-between;
		gap:12px;
	}

	.ok-author-name{
		font-size:1.08rem;
	}

	.ok-follow-btn{
		padding:8px 14px;
		font-size:.82rem;
	}

	.ok-author-role{
		padding:6px 12px;
		font-size:.68rem;
	}

	.ok-author-meta{
		font-size:.84rem;
		gap:10px;
	}

}

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

.ok-post-content{
	font-size:1.06rem;
	line-height:1.9;
	color:#222;
	word-break:break-word;
}

.ok-post-content>*:first-child{
	margin-top:0;
}

.ok-post-content p{
	margin:0 0 22px;
}

.ok-post-content h2{
	margin:42px 0 18px;
	font-size:1.82rem;
	font-weight:800;
	line-height:1.3;
	color:#111;
}

.ok-post-content h3{
	margin:34px 0 16px;
	font-size:1.48rem;
	font-weight:700;
	line-height:1.35;
	color:#111;
}

.ok-post-content h4{
	margin:28px 0 14px;
	font-size:1.22rem;
	font-weight:700;
	line-height:1.4;
	color:#111;
}

.ok-post-content img{
	display:block;
	max-width:100%;
	height:auto;
	margin:28px auto;
	border-radius:16px;
}

.ok-post-content a{
	font-weight:600;
	color:#0b63f6;
	text-decoration:none;
	text-decoration-thickness:2px;
	text-underline-offset:4px;
	transition:.25s;
}

.ok-post-content a:hover{
	color:var(--ok-primary);
	text-decoration:underline;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

	.ok-post-content{
		font-size:1rem;
		line-height:1.85;
	}

	.ok-post-content h2{
		font-size:1.56rem;
	}

	.ok-post-content h3{
		font-size:1.32rem;
	}

	.ok-post-content h4{
		font-size:1.12rem;
	}
}

/* ==========================================================
   SINGLE POST
   PART 3 : SHARE • RELATED • TRENDING
========================================================== */

/* ==========================
   SHARE SECTION
========================== */

.ok-share-section{
	margin:42px 0 48px;
}

.ok-share-box{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px;
}

.ok-share-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-height:54px;
	padding:0 20px;
	border-radius:14px;
	font-size:.92rem;
	font-weight:700;
	text-decoration:none;
	color:#fff;
	transition:.28s;
	box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.ok-share-btn:hover{
	color:#fff;
	transform:translateY(-3px);
	box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.ok-share-btn svg{
	width:18px;
	height:18px;
	display:block;
	flex-shrink:0;
	fill:currentColor;
	stroke:none;
}

.ok-share-btn.fb{background:#1877f2;}
.ok-share-btn.x{background:#111111;}
.ok-share-btn.wa{background:#25d366;}
.ok-share-btn.ig{background:#e1306c;}

.ok-share-btn.tg{
	grid-column:1/-1;
	background:#229ed9;
}

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

.ok-related-posts{
	margin:48px 0;
}

.ok-related-list{
	display:flex;
	flex-direction:column;
	gap:22px;
}

.ok-related-item{
	display:flex;
	align-items:flex-start;
	gap:18px;
	text-decoration:none;
	color:inherit;
}

.ok-related-thumb{
	width:145px;
	height:96px;
	flex-shrink:0;
	border-radius:14px;
	overflow:hidden;
}

.ok-related-thumb img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	transition:.35s;
}

.ok-related-item:hover .ok-related-thumb img{
	transform:scale(1.05);
}

.ok-related-content{
	flex:1;
	min-width:0;
}

.ok-related-title{
	margin:0;
	font-size:1.05rem;
	font-weight:700;
	line-height:1.48;
	color:#111;
	text-decoration:none;
	transition:.25s;
}

.ok-related-item:hover .ok-related-title{
	color:var(--ok-primary);
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:4px;
}

.ok-related-meta,
.ok-trending-meta{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	margin-top:10px;
	font-size:.82rem;
	font-weight:600;
	color:#666;
}

.ok-related-meta span,
.ok-trending-meta span{
	display:inline-flex;
	align-items:center;
	gap:6px;
	line-height:1;
}

.ok-related-meta svg,
.ok-trending-meta svg{
	width:15px;
	height:15px;
	display:block;
	flex-shrink:0;
	color:var(--ok-primary);
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.ok-related-meta svg[fill],
.ok-trending-meta svg[fill]{
	fill:currentColor;
	stroke:none;
}

.ok-dot{
	color:#c5c5c5;
}

/* ==========================
   TRENDING POSTS
========================== */

.ok-trending-section{
	margin:52px 0;
}

.ok-trending-posts{
	display:flex;
	flex-direction:column;
	gap:20px;
}

.ok-trending-item{
	display:flex;
	align-items:flex-start;
	gap:16px;
	text-decoration:none;
	color:inherit;
}

.ok-trending-number{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	flex-shrink:0;
	border-radius:50%;
	background:var(--ok-primary);
	color:#fff;
	font-size:.9rem;
	font-weight:800;
}

.ok-trending-content{
	flex:1;
	min-width:0;
}

.ok-trending-title{
	margin:0;
	font-size:1.03rem;
	font-weight:700;
	line-height:1.5;
	color:#111;
	text-decoration:none;
	transition:.25s;
}

.ok-trending-item:hover .ok-trending-title{
	color:var(--ok-primary);
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:4px;
}

.ok-trending-arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:2px;
	color:#999;
	transition:.25s;
}

.ok-trending-arrow svg{
	width:18px;
	height:18px;
	display:block;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.ok-trending-item:hover .ok-trending-arrow{
	color:var(--ok-primary);
	transform:translateX(4px);
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

	.ok-share-box{
		gap:12px;
	}

	.ok-share-btn{
		min-height:50px;
		font-size:.88rem;
		padding:0 14px;
	}

	.ok-share-btn svg{
		width:17px;
		height:17px;
	}

	.ok-related-item{
		gap:14px;
	}

	.ok-related-thumb{
		width:120px;
		height:82px;
	}

	.ok-related-title{
		font-size:.96rem;
		line-height:1.42;
	}

	.ok-related-meta,
	.ok-trending-meta{
		font-size:.75rem;
		gap:8px;
	}

	.ok-related-meta svg,
	.ok-trending-meta svg{
		width:14px;
		height:14px;
	}

	.ok-trending-item{
		gap:14px;
	}

	.ok-trending-number{
		width:36px;
		height:36px;
		font-size:.8rem;
	}

	.ok-trending-title{
		font-size:.95rem;
	}
}

/* ==========================================================
   SINGLE POST
   PART 4 : TOP STORIES • TOC • EMPTY STATE
========================================================== */

/* ==========================
   TOP STORIES
========================== */

.ok-top-stories{
	margin:52px 0;
}

.ok-stories-list{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:22px;
}

.ok-story-item{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid #ececec;
	border-radius:18px;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	transition:.28s;
	box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.ok-story-item:hover{
	transform:translateY(-4px);
	border-color:rgba(225,6,0,.25);
	box-shadow:0 16px 34px rgba(0,0,0,.08);
}

.ok-story-thumb{
	width:100%;
	aspect-ratio:16/9;
	background:#f5f5f5;
	overflow:hidden;
}

.ok-story-thumb img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	transition:.4s;
}

.ok-story-item:hover .ok-story-thumb img{
	transform:scale(1.06);
}

.ok-story-content{
	padding:18px;
}

.ok-story-title{
	display:block;
	margin:0 0 12px;
	font-size:1.08rem;
	font-weight:700;
	line-height:1.5;
	color:#111;
	text-decoration:none;
	transition:.25s;
}

.ok-story-item:hover .ok-story-title{
	color:var(--ok-primary);
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:4px;
}

.ok-story-meta{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	font-size:.82rem;
	font-weight:600;
	color:#666;
}

.ok-story-meta span{
	display:inline-flex;
	align-items:center;
	gap:6px;
	line-height:1;
}

.ok-story-meta svg{
	width:15px;
	height:15px;
	display:block;
	flex-shrink:0;
	color:var(--ok-primary);
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.ok-story-meta svg[fill]{
	fill:currentColor;
	stroke:none;
}

/* ==========================
   TABLE OF CONTENTS
========================== */

#custom-toc{
	margin:40px 0;
	padding:22px;
	background:#fff;
	border:1px solid #ececec;
	border-radius:18px;
	box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.toc-title{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 18px;
	padding-bottom:12px;
	border-bottom:1px solid #ececec;
	font-size:1.08rem;
	font-weight:800;
	color:#111;
}

.toc-title svg{
	width:20px;
	height:20px;
	display:block;
	color:var(--ok-primary);
	fill:none;
	stroke:currentColor;
	stroke-width:2;
}

.toc-title svg[fill]{
	fill:currentColor;
	stroke:none;
}

.toc-scroll{
	max-height:300px;
	overflow-y:auto;
	padding-right:4px;
	scrollbar-width:thin;
	scrollbar-color:#d6d6d6 transparent;
}

.toc-scroll::-webkit-scrollbar{
	width:6px;
}

.toc-scroll::-webkit-scrollbar-thumb{
	background:#d6d6d6;
	border-radius:20px;
}

#toc-list{
	margin:0;
	padding:0;
	list-style:none;
}

#toc-list li{
	margin:5px 0;
}

#toc-list a{
	display:block;
	padding:10px 12px;
	border-radius:10px;
	font-size:.91rem;
	font-weight:600;
	line-height:1.5;
	color:#444;
	text-decoration:none;
	transition:.25s;
}

#toc-list a:hover,
#toc-list a.active{
	color:var(--ok-primary);
	background:rgba(225,6,0,.08);
}

#toc-list li li a{
	padding-left:24px;
	font-size:.86rem;
}

#toc-list li li li a{
	padding-left:38px;
	font-size:.82rem;
}

/* ==========================
   EMPTY STATE
========================== */

.ok-no-post{
	padding:80px 20px;
	text-align:center;
}

.ok-no-post-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:88px;
	height:88px;
	margin:0 auto 22px;
	border-radius:50%;
	background:#f6f7f9;
	color:var(--ok-primary);
}

.ok-no-post-icon svg{
	width:40px;
	height:40px;
	display:block;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
}

.ok-no-post-title{
	margin:0 0 14px;
	font-size:1.8rem;
	font-weight:800;
	line-height:1.3;
	color:#111;
}

.ok-no-post-text{
	max-width:560px;
	margin:0 auto 28px;
	font-size:1rem;
	line-height:1.8;
	color:#666;
}

.ok-no-post-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:13px 24px;
	border-radius:999px;
	background:var(--ok-primary);
	color:#fff;
	font-size:.92rem;
	font-weight:700;
	text-decoration:none;
	transition:.25s;
}

.ok-no-post-btn:hover{
	color:#fff;
	background:var(--ok-primary-hover);
	transform:translateY(-2px);
	box-shadow:0 12px 24px rgba(225,6,0,.24);
}

.ok-no-post-btn svg{
	width:18px;
	height:18px;
	display:block;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

	.ok-stories-list{
		grid-template-columns:1fr;
		gap:18px;
	}

	.ok-story-content{
		padding:16px;
	}

	.ok-story-title{
		font-size:1rem;
	}

	.ok-story-meta{
		font-size:.76rem;
		gap:8px;
	}

	.ok-story-meta svg{
		width:14px;
		height:14px;
	}

	#custom-toc{
		padding:18px;
		border-radius:16px;
	}

	.toc-title{
		font-size:1rem;
		margin-bottom:16px;
	}

	.toc-scroll{
		max-height:240px;
	}

	#toc-list a{
		padding:9px 10px;
		font-size:.86rem;
	}

	#toc-list li li a{
		padding-left:20px;
	}

	#toc-list li li li a{
		padding-left:32px;
	}

	.ok-no-post{
		padding:60px 16px;
	}

	.ok-no-post-title{
		font-size:1.5rem;
	}

	.ok-no-post-text{
		font-size:.92rem;
	}

}