/* ==========================================================================
   JCN Technology — Insights (Blog) Styles
   Used by: pages/insights/index.html, pages/insights/*.html, admin pages
   ========================================================================== */

/* ---- Search / filter bar ---- */
.insight-toolbar{
	display:flex;
	flex-wrap:wrap;
	gap:15px;
	align-items:center;
	justify-content:space-between;
	margin-bottom:30px;
}
.insight-search-box{
	position:relative;
	flex:1 1 320px;
	max-width:420px;
}
.insight-search-box input[type="search"]{
	width:100%;
	padding:12px 18px;
	border:1px solid #e1e1e1;
	border-radius:30px;
	font-family:"Open Sans", sans-serif;
	font-size:14px;
	outline:none;
	box-sizing:border-box;
	transition:border-color .3s ease;
}
.insight-search-box input[type="search"]:focus{
	border-color:#FA4F06;
}
.insight-tags-filter{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.insight-tag-btn{
	font-family:"Open Sans", sans-serif;
	font-size:13px;
	padding:6px 14px;
	border-radius:20px;
	border:1px solid #FA4F06;
	background:#fff;
	color:#FA4F06;
	cursor:pointer;
	transition:all .3s ease;
}
.insight-tag-btn:hover,
.insight-tag-btn.active{
	background:#FA4F06;
	color:#fff;
}

/* ---- Card grid (index page) ---- */
.insight-card{
	width:100%;
	background-color:#fff;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0px 4px 30px 3px rgba(0,0,0,0.10);
	text-decoration:none;
	display:block;
	margin-bottom:30px;
	transition:transform .3s ease, box-shadow .3s ease;
}
.insight-card:hover{
	transform:translateY(-4px);
	box-shadow:0px 8px 30px 3px rgba(0,0,0,0.15);
}
.insight-card-img{
	width:100%;
	height:200px;
	object-fit:cover;
	display:block;
	background:#f3f3f3;
}
.insight-card-body{
	padding:20px;
}
.insight-card .insight-tags{
	margin-bottom:10px;
}
.insight-tag{
	display:inline-block;
	font-family:"Open Sans", sans-serif;
	font-size:11px;
	font-weight:600;
	letter-spacing:.5px;
	text-transform:uppercase;
	color:#FA4F06;
	background:rgba(250,79,6,0.08);
	border-radius:4px;
	padding:3px 10px;
	margin:0 6px 6px 0;
}
.insight-card .insight-card-title{
	font-family:"Open Sans", sans-serif;
	font-size:1.15em;
	font-weight:700;
	color:#000;
	margin-bottom:10px;
	line-height:1.4;
	transition:color .3s ease;
}
.insight-card:hover .insight-card-title{
	color:#FA4F06;
}
.insight-card .insight-excerpt{
	font-family:"Open Sans", sans-serif;
	font-size:14px;
	color:#333;
	line-height:22px;
	margin-bottom:14px;
}
.insight-meta{
	font-family:"Open Sans", sans-serif;
	font-size:12px;
	color:#777;
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:wrap;
}
.insight-meta .insight-author{
	font-weight:600;
	color:#444;
}
.insight-empty{
	font-family:"Open Sans", sans-serif;
	color:#777;
	text-align:center;
	padding:60px 20px;
}
.insight-no-results{
	display:none;
	font-family:"Open Sans", sans-serif;
	color:#777;
	text-align:center;
	padding:40px 20px;
}

/* ---- Single post page ---- */
.insight-post-header{
	margin-bottom:25px;
}
.insight-post-header .insight-post-title{
	font-size:32px;
	font-weight:700;
	color:#000;
	line-height:1.3;
	margin-bottom:15px;
}
.insight-post-cover{
	width:100%;
	max-height:420px;
	object-fit:cover;
	border-radius:10px;
	margin-bottom:25px;
}
.insight-content{
	font-family:"Open Sans", sans-serif;
	font-size:16px;
	line-height:28px;
	color:#2A2A2A;
}
.insight-content h2{
	font-size:24px;
	font-weight:700;
	margin:30px 0 15px;
	color:#000;
}
.insight-content h3{
	font-size:20px;
	font-weight:700;
	margin:25px 0 12px;
	color:#000;
}
.insight-content p{
	margin-bottom:18px;
}
.insight-content ul,
.insight-content ol{
	margin-bottom:18px;
	padding-left:22px;
}
.insight-content li{
	margin-bottom:8px;
}
.insight-content img{
	max-width:100%;
	height:auto;
	border-radius:8px;
	margin:15px 0;
}
.insight-content a{
	color:#FA4F06;
	text-decoration:underline;
}
.insight-content blockquote{
	border-left:4px solid #FA4F06;
	margin:20px 0;
	padding:10px 20px;
	background:#fbfbfb;
	font-style:italic;
	color:#444;
}
.insight-content pre,
.insight-content code{
	background:#f5f5f5;
	border-radius:4px;
	font-family:monospace;
}
.insight-content pre{
	padding:15px;
	overflow-x:auto;
}
.insight-content code{
	padding:2px 6px;
}
.insight-share{
	margin:30px 0;
	padding:20px 0;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	display:flex;
	align-items:center;
	gap:15px;
	flex-wrap:wrap;
}
.insight-related .ser-heading{
	font-family:"Open Sans", sans-serif;
}
.insight-back-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:"Open Sans", sans-serif;
	font-size:14px;
	color:#FA4F06;
	text-decoration:none;
	margin-bottom:20px;
}
.insight-back-link:hover{
	text-decoration:underline;
}

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-bg{
	background:#f4f5f7;
	min-height:100vh;
	font-family:"Open Sans", sans-serif;
}
.admin-wrapper{
	max-width:1100px;
	margin:0 auto;
	padding:30px 15px;
}
.admin-card{
	background:#fff;
	border-radius:10px;
	box-shadow:0px 4px 30px 3px rgba(0,0,0,0.06);
	padding:30px;
	margin-bottom:25px;
}
.admin-login-card{
	max-width:420px;
	margin:80px auto;
}
.admin-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:15px;
	margin-bottom:25px;
}
.admin-header h1{
	font-size:22px;
	font-weight:700;
	margin:0;
}
.admin-header .logo img{
	width:90px;
}
.admin-form label{
	display:block;
	font-weight:600;
	font-size:13px;
	margin-bottom:6px;
	color:#333;
}
.admin-form .form-control,
.admin-form textarea,
.admin-form select{
	width:100%;
	padding:10px 14px;
	border:1px solid #ddd;
	border-radius:6px;
	font-family:"Open Sans", sans-serif;
	font-size:14px;
	margin-bottom:18px;
	box-sizing:border-box;
}
.admin-form textarea{
	min-height:280px;
	font-family:monospace;
	font-size:13px;
}
.admin-form .form-row{
	display:flex;
	gap:18px;
	flex-wrap:wrap;
}
.admin-form .form-row > div{
	flex:1 1 200px;
}
.btn-admin{
	display:inline-block;
	font-size:14px;
	font-weight:600;
	color:#fff;
	background:#FA4F06;
	border:1px solid #FA4F06;
	border-radius:6px;
	padding:10px 24px;
	cursor:pointer;
	text-decoration:none;
	transition:all .3s ease;
}
.btn-admin:hover{
	background:#000;
	border-color:#000;
	color:#fff;
}
.btn-admin-outline{
	display:inline-block;
	font-size:14px;
	font-weight:600;
	color:#333;
	background:#fff;
	border:1px solid #ccc;
	border-radius:6px;
	padding:10px 24px;
	cursor:pointer;
	text-decoration:none;
	transition:all .3s ease;
}
.btn-admin-outline:hover{
	border-color:#000;
}
.btn-admin-danger{
	color:#dc3545;
	border-color:#dc3545;
}
.btn-admin-danger:hover{
	background:#dc3545;
	border-color:#dc3545;
	color:#fff;
}
.admin-table{
	width:100%;
	border-collapse:collapse;
}
.admin-table th,
.admin-table td{
	text-align:left;
	padding:12px 10px;
	border-bottom:1px solid #eee;
	font-size:14px;
	vertical-align:middle;
}
.admin-table th{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:#888;
}
.admin-alert{
	padding:12px 18px;
	border-radius:6px;
	margin-bottom:20px;
	font-size:14px;
}
.admin-alert-success{
	background:#e6f7ec;
	color:#1a7f37;
	border:1px solid #b7ebc6;
}
.admin-alert-error{
	background:#fdecea;
	color:#b3261e;
	border:1px solid #f7c5c0;
}
.admin-help{
	font-size:12px;
	color:#888;
	margin-top:-12px;
	margin-bottom:18px;
}

/* ---- Rich-text content editor ---- */
.rte-wrapper{
	margin-bottom:18px;
}
.rte-toolbar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
	padding:8px;
	border:1px solid #ddd;
	border-bottom:none;
	border-radius:6px 6px 0 0;
	background:#f8f8f8;
}
.rte-btn{
	font-family:"Open Sans", sans-serif;
	font-size:13px;
	font-weight:600;
	color:#333;
	background:#fff;
	border:1px solid #ddd;
	border-radius:4px;
	padding:6px 10px;
	cursor:pointer;
	transition:all .2s ease;
}
.rte-btn:hover{
	background:#FA4F06;
	border-color:#FA4F06;
	color:#fff;
}
.rte-sep{
	display:inline-block;
	width:1px;
	height:22px;
	background:#ddd;
	margin:0 4px;
}
.rte-status{
	font-size:12px;
	color:#888;
	margin-left:auto;
}
.rte-editor{
	min-height:320px;
	max-height:none;
	padding:14px 16px;
	border:1px solid #ddd;
	border-top:none;
	border-radius:0 0 6px 6px;
	font-family:"Open Sans", sans-serif;
	font-size:15px;
	line-height:1.6;
	color:#2A2A2A;
	overflow-y:auto;
	box-sizing:border-box;
}
.rte-editor:focus{
	outline:none;
	border-color:#FA4F06;
}
.rte-editor img{
	max-width:100%;
	height:auto;
	border-radius:6px;
}
.rte-editor h2, .rte-editor h3, .rte-editor h4{
	margin:0.6em 0 0.3em;
}
.rte-editor blockquote{
	border-left:4px solid #FA4F06;
	margin:10px 0;
	padding:8px 16px;
	background:#fbfbfb;
	color:#444;
	font-style:italic;
}