/* ==========================================================================
   Single article — reference-site layout
   ========================================================================== */

:root { --dn-blue: #1a6fc7; }

.dn-single-wrap { padding-top: 22px; }
.dn-single-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
.dn-article { max-width: none; }

/* ---------- Head ---------- */
.dn-s-cat {
	display: inline-block; margin-bottom: 14px; padding-bottom: 3px;
	font-size: 17px; line-height: 1.4; color: var(--dn-blue); border-bottom: 2px solid var(--dn-blue);
}
.dn-s-cat:hover { color: var(--dn-blue); opacity: .85; }
.dn-s-title { font-size: 36px; line-height: 1.45; font-weight: 400; color: #111; margin: 0; }
.dn-s-shoulder { color: var(--dn-accent); }
.dn-s-shoulder::after { content: " •"; color: #999; }
.dn-s-sub { margin: 12px 0 0; font-size: 18px; line-height: 1.6; color: #555; }
.dn-s-bar { display: block; width: 34px; height: 4px; margin: 22px 0 16px; background: #d9d9d9; border-radius: 2px; }

.dn-s-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid #e6e6e6; }
.dn-s-byline p { margin: 0; }
.dn-s-author { font-size: 15.5px; line-height: 1.5; }
.dn-s-author strong { font-weight: 700; color: #111; font-synthesis: weight; }
.dn-s-author a:hover strong { color: var(--dn-link); }
.dn-s-place { margin-left: 6px; font-size: 13.5px; color: #777; }
.dn-s-date { margin-top: 8px !important; font-size: 13.5px; color: #666; }
.dn-date-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.dn-date-toggle svg { color: #999; }

/* ---------- Tools row (share / font size / print / save) ---------- */
.dn-tools { display: flex; align-items: center; gap: 10px; }
.dn-tool {
	display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
	border: 0; border-radius: 50%; color: #fff; cursor: pointer; line-height: 1; transition: transform .15s, opacity .15s;
}
.dn-tool:hover { transform: translateY(-1px); opacity: .9; color: #fff; }
.dn-tool-fb { background: #1877f2; }
.dn-tool-x { background: #000; }
.dn-tool-share { background: #fde4e4; color: #e5202a; }
.dn-tool-share:hover { color: #e5202a; }
.dn-tool-font { background: #3b86d6; font-family: var(--dn-font-body); font-size: 12px; font-synthesis: none; }
.dn-tool-print { background: #6d6d6d; }
.dn-tool-save { background: #fff; color: #555; border: 1.5px solid #8a8a8a; border-radius: 5px; width: 28px; height: 28px; }
.dn-tool-save:hover { color: #555; }
.dn-tool-save[aria-pressed="true"] { background: var(--dn-accent); color: #fff; border-color: var(--dn-accent); }
.dn-tool.dn-tool-save[aria-pressed="true"] svg path + path { display: none; }
.dn-tool.dn-tool-save[aria-pressed="true"] svg path:first-child { fill: currentColor; }

/* ---------- Body column (narrower, like the reference) ---------- */
.dn-s-body-col { max-width: 660px; margin: 26px auto 0; }

.dn-s-media { margin: 0 0 24px; }
.dn-s-media img { width: 100%; height: auto; }
.dn-s-media figcaption { padding: 8px 0 10px; font-size: 13.5px; line-height: 1.6; color: #666; border-bottom: 1px solid #e3e3e3; }
.dn-credit { color: #888; }
.dn-credit::before { content: "| "; color: var(--dn-accent); }
.dn-video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.dn-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.dn-article-body { --dn-fs: 18px; font-size: var(--dn-fs); line-height: 1.8; color: #222; }
.dn-article-body p { margin: 0 0 1.15em; }
.dn-article-body a { color: var(--dn-blue); text-decoration: none; }
.dn-article-body a:hover { text-decoration: underline; }
.dn-article-body h2 { font-size: 1.3em; font-weight: 400; margin: 1.4em 0 .6em; }
.dn-article-body h3 { font-size: 1.15em; font-weight: 400; margin: 1.3em 0 .5em; }
.dn-article-body blockquote { font-size: 1.15em; font-weight: 400; border-left-color: var(--dn-accent); }

/* In-article "আরও পড়ুন" card */
.dn-readmore { margin: 1.6em 0; }
.dn-readmore-label { margin: 0 0 6px !important; font-size: 14px; color: #555; }
.dn-article-body .dn-readmore-card, .dn-readmore-card {
	display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid #dcdcdc;
	color: #111; text-decoration: none; background: #fff;
}
.dn-readmore-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); text-decoration: none !important; }
.dn-readmore-text { flex: 1; min-width: 0; }
.dn-readmore-title { display: block; font-family: var(--dn-font-head); font-size: 17px; line-height: 1.5; color: #111; }
.dn-readmore-card:hover .dn-readmore-title { color: var(--dn-link); }
.dn-readmore-time { display: block; margin-top: 6px; font-size: 12.5px; color: #777; }
.dn-readmore-img { flex: 0 0 96px; line-height: 0; }
.dn-readmore-img img { width: 96px; height: 60px; object-fit: cover; }

/* Google News follow */
.dn-gnews-follow { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 8px; font-size: 15.5px; color: var(--dn-blue); }
.dn-gnews-follow:hover { color: var(--dn-blue); text-decoration: underline; }

/* "{category} থেকে আরও পড়ুন" + tag chips */
.dn-s-topics { margin: 30px 0 34px; padding-bottom: 30px; border-bottom: 1px solid #e3e3e3; }
.dn-s-topics-title { font-family: var(--dn-font-body); font-size: 19px; font-weight: 400; margin: 0 0 18px; }
.dn-s-topics-title a { color: var(--dn-blue); border-bottom: 2px solid var(--dn-blue); padding-bottom: 2px; }
.dn-s-chips { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.dn-s-chips a { padding: 8px 16px; background: #f0f0f0; color: var(--dn-blue); font-size: 15.5px; line-height: 1.4; border-radius: 2px; }
.dn-s-chips a:hover { background: #e4ecf6; }

/* ---------- Reactions + comments (pink box) ---------- */
.dn-feedback { margin: 0 0 30px; padding: 32px 22px 26px; background: #fff5f5; border-top: 3px solid #e3141d; }
.dn-reactions { display: flex; justify-content: center; gap: 34px; padding-bottom: 26px; border-bottom: 1px solid #f0d9d9; }
.dn-react { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #e3141d; cursor: pointer; }
.dn-react svg { transition: transform .15s; }
.dn-react:hover svg { transform: scale(1.1); }
.dn-react.is-picked svg { transform: scale(1.12); filter: drop-shadow(0 2px 3px rgba(227,20,29,.3)); }
.dn-react-pct { font-family: Arial, Helvetica, sans-serif; font-size: 12.5px; color: #555; }
.dn-react.is-top .dn-react-pct { font-weight: 700; color: #333; }
.dn-react.is-top .dn-react-pct::before { content: "★"; color: #f5b400; margin-right: 2px; }

/* ---------- মন্তব্য (reference style) ---------- */
.dn-cmts { margin-top: 0; font-family: var(--dn-font-body); }
.dn-cmts-auth { display: flex; justify-content: flex-end; align-items: center; padding: 14px 0 10px; border-bottom: 1px solid #f0d9d9; }
.dn-cmts-signin { font-size: 16px; font-weight: 600; color: #e3141d; }
.dn-cmts-signin:hover { color: #b00e15; text-decoration: underline; }
.dn-cmts-me { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #444; }
.dn-cmts-me .dn-user-av { font-size: 11px; }
.dn-cmts-bar { display: flex; align-items: center; gap: 12px; padding: 22px 10px 18px; }
.dn-cmts-sort select { height: 32px; padding: 0 30px 0 12px; border: 1px solid #e3141d; border-radius: 3px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23777'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; appearance: none; font: inherit; font-size: 13.5px; color: #222; cursor: pointer; }
.dn-cmts-count { font-size: 13px; color: #888; }
.dn-cmts-share { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: #333; cursor: pointer; }
.dn-cmts-share svg { color: #e3141d; }
.dn-cmts-form { display: flex; align-items: flex-start; gap: 14px; padding: 0 10px; }
.dn-cm-av { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; font-size: 15px; line-height: 1; }
.dn-cm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dn-cm-av--guest { width: 40px; height: 40px; background: none; }
.dn-cmts-form > .dn-user-av { width: 40px !important; height: 40px !important; font-size: 16px; }
.dn-cmts-field { flex: 1; min-width: 0; }
.dn-cmts-replying { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 5px 10px; border-radius: 4px; background: #ffe6e7; font-size: 13px; color: #a40d12; }
.dn-cmts-replying[hidden] { display: none; }
.dn-cmts-replying button { border: 0; background: none; font-size: 18px; line-height: 1; color: #a40d12; cursor: pointer; }
.dn-cmts-input { position: relative; }
.dn-cmts-input textarea { display: block; width: 100%; min-height: 40px; padding: 9px 40px 9px 12px; border: 1.5px solid #9a9a9a; border-radius: 4px; background: #fff; font: inherit; font-size: 14.5px; line-height: 1.5; color: #222; resize: none; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.dn-cmts-input textarea:focus { outline: none; border-color: #555; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.dn-cmts-form.is-guest textarea { cursor: pointer; }
.dn-cmts-emoji { position: absolute; top: 8px; right: 8px; padding: 0; border: 0; background: none; color: #999; cursor: pointer; }
.dn-cmts-emoji:hover { color: #e3141d; }
.dn-cmts-emojis { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.dn-cmts-emojis[hidden] { display: none; }
.dn-cmts-emojis button { width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; font-size: 19px; cursor: pointer; }
.dn-cmts-emojis button:hover { background: #f5f5f5; }
.dn-cmts-submit { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.dn-cmts-msg { flex: 1; font-size: 13px; }
.dn-cmts-msg.is-ok { color: #13824a; }
.dn-cmts-msg.is-err { color: #c0151c; }
.dn-cmts-post { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 16px; border: 0; border-radius: 3px; background: #1f8bf0; color: #fff; font: inherit; font-size: 14px; cursor: pointer; transition: background .15s, opacity .15s; }
.dn-cmts-post:hover { background: #0f6fd0; }
.dn-cmts-post:disabled { opacity: .45; cursor: default; }
.dn-cmts-form.is-busy .dn-cmts-post { opacity: .6; cursor: progress; }
.dn-cmts-legal { margin: 20px 10px 0; text-align: center; font-size: 12px; line-height: 1.7; color: #555; }
.dn-cmts-legal a { color: #1a4fd6; text-decoration: underline; }
.dn-cmts-closed, .dn-cmts-empty { margin: 16px 10px 0; text-align: center; font-size: 14px; color: #888; }
.dn-cm-list { list-style: none; margin: 22px 0 0; padding: 0 10px; }
.dn-cm { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid #f0d9d9; }
.dn-cm[hidden] { display: none; }
.dn-cm.is-new { animation: dnCmIn .4s ease; }
@keyframes dnCmIn { from { background: #ffe9ea; } to { background: transparent; } }
.dn-cm-body { flex: 1; min-width: 0; }
.dn-cm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dn-cm-name { font-size: 15px; color: #111; }
.dn-cm-badge { padding: 1px 7px; border-radius: 3px; background: #e3141d; color: #fff; font-size: 11px; }
.dn-cm-time { font-size: 12.5px; color: #888; }
.dn-cm-pending { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid #f5b400; background: #fff8e1; font-size: 12.5px; color: #7a5a00; }
.dn-cm.is-pending .dn-cm-text { opacity: .75; }
.dn-cm-text { margin-top: 5px; font-size: 15.5px; line-height: 1.7; color: #222; word-wrap: break-word; }
.dn-cm-text p { margin: 0 0 6px; }
.dn-cm-actions { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.dn-cm-like, .dn-cm-reply { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: #666; cursor: pointer; }
.dn-cm-like:hover, .dn-cm-reply:hover { color: #e3141d; }
.dn-cm-like[aria-pressed="true"] { color: #e3141d; }
.dn-cm-like[aria-pressed="true"] path { fill: currentColor; }
.dn-cm-replies { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; border-left: 2px solid #f6c9cb; }
.dn-cm-replies .dn-cm { padding: 12px 0 12px 12px; border-top: 0; }
.dn-cm-more { display: block; margin: 16px auto 0; padding: 8px 22px; border: 1px solid #e3141d; border-radius: 3px; background: #fff; font: inherit; font-size: 14px; color: #e3141d; cursor: pointer; }
.dn-cm-more:hover { background: #e3141d; color: #fff; }
.dn-cm-more[hidden] { display: none; }
@media (max-width: 600px) {
	.dn-feedback { padding-left: 14px; padding-right: 14px; }
	.dn-cmts-bar, .dn-cmts-form, .dn-cm-list { padding-left: 0; padding-right: 0; }
	.dn-cmts-form { gap: 10px; }
	.dn-cmts-emojis { grid-template-columns: repeat(6, 34px); }
	.dn-cmts-legal { margin-left: 0; margin-right: 0; }
}

/* ---------- "X নিয়ে আরও পড়ুন" ---------- */
.dn-s-related { margin: 36px 0 10px; }
.dn-s-related-title { font-family: var(--dn-font-body); font-size: 20px; font-weight: 400; margin: 0 0 22px; }
.dn-s-related-title a { color: #111; border-bottom: 2px solid #111; padding-bottom: 3px; }
.dn-s-related-title a:hover { color: var(--dn-link); }

/* ---------- Sticky tools bar (mobile) ---------- */
.dn-sticky-tools { display: none; }

@media (max-width: 1024px) {
	.dn-single-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; }
}

@media (max-width: 900px) {
	.dn-single-grid { grid-template-columns: 1fr; }
	.dn-s-body-col { max-width: none; }
}

@media (max-width: 767px) {
	.dn-single-wrap { padding-top: 14px; }
	.dn-s-cat { font-size: 17px; margin-bottom: 12px; }
	.dn-s-title { font-size: 28px; line-height: 1.45; }
	.dn-s-sub { font-size: 16.5px; }
	.dn-s-bar { margin: 18px 0 14px; }
	.dn-s-meta { flex-direction: column; align-items: flex-start; border-bottom: 0; padding-bottom: 14px; }
	.dn-tools { gap: 12px; }
	.dn-tool { width: 32px; height: 32px; }
	.dn-tool-save { width: 28px; height: 28px; }

	/* Full-bleed photo */
	.dn-s-body-col { margin-top: 4px; }
	.dn-s-media { margin-left: -14px; margin-right: -14px; }
	.dn-s-media figcaption { padding: 8px 14px 10px; margin: 0 0; }
	.dn-article-body { --dn-fs: 17.5px; }
	.dn-readmore-img { flex-basis: 84px; }
	.dn-readmore-img img { width: 84px; height: 56px; }
	.dn-reactions { gap: 22px; }
	.dn-react svg { width: 40px; height: 40px; }
	.dn-feedback { padding: 26px 14px 20px; }

	.dn-s-related .dn-grid-4 { grid-template-columns: 1fr; }

	.dn-sticky-tools {
		display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 300; background: #fff;
		box-shadow: 0 3px 10px rgba(0,0,0,.14); transform: translateY(-110%); transition: transform .25s ease;
	}
	.dn-sticky-tools.is-visible { transform: none; }
	body.dn-tools-on .dn-header { position: relative; box-shadow: none; }
	body.admin-bar .dn-sticky-tools { top: 0; }
	.dn-sticky-tools-in { display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 12px; }
	.dn-tools-sticky { gap: 10px; }
	.dn-tools-sticky .dn-tool-print { display: none; }
	.dn-follow-btn {
		display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid #d0d0d0; border-radius: 4px;
		font-size: 14px; color: var(--dn-blue); white-space: nowrap; background: #fff;
	}
}

@media print {
	.dn-tools, .dn-sticky-tools, .dn-feedback, .dn-s-topics, .dn-gnews-follow, .dn-s-related { display: none !important; }
	.dn-s-body-col { max-width: none; }
}

.dn-feedback .comment-form-author, .dn-feedback .comment-form-email { display: inline-block; width: calc(50% - 6px); vertical-align: top; }
.dn-feedback .comment-form-author { margin-right: 8px; }
@media (max-width: 767px) { .dn-feedback .comment-form-author, .dn-feedback .comment-form-email { width: 100%; margin-right: 0; } }

/* ---------- Desktop floating share bar (left) ---------- */
.dn-float-share {
	position: fixed; left: 0; top: 50%; z-index: 120; width: 70px; transform: translate(-110%, -50%);
	background: #fff; border-radius: 0 6px 6px 0; box-shadow: 0 2px 14px rgba(0,0,0,.14); transition: transform .3s ease; text-align: center;
}
.dn-float-share.is-visible { transform: translate(0, -50%); }
.dn-float-share.is-collapsed { transform: translate(calc(-100% + 0px), -50%); }
.dn-fs-collapse { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; border: 0; background: #6b6b6b; color: #fff; cursor: pointer; border-radius: 0 6px 0 0; }
.dn-float-share.is-collapsed .dn-fs-collapse { position: absolute; left: 100%; top: 0; width: 30px; border-radius: 0 6px 6px 0; }
.dn-float-share.is-collapsed .dn-fs-collapse svg { transform: rotate(180deg); }
.dn-fs-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 14px; }
.dn-fs-label { margin: 0 !important; font-size: 11px; color: #555; }
.dn-fs-btn { display: inline-flex; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; transition: transform .15s; }
.dn-fs-btn:hover { transform: scale(1.08); }
.dn-fs-round { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--dn-font-body); font-size: 11px; line-height: 1; }
.dn-fs-round--share { background: #fde4e4; color: #e5202a; }
.dn-fs-round--blue { background: #3b86d6; color: #fff; }
.dn-fs-round--grey { background: #6d6d6d; color: #fff; }
.dn-fs-round--save { background: #fff; color: #555; border: 1.5px solid #8a8a8a; border-radius: 5px; width: 24px; height: 24px; }
.dn-tool-save[aria-pressed="true"] .dn-fs-round--save { background: var(--dn-accent); color: #fff; border-color: var(--dn-accent); }
.dn-tool-save[aria-pressed="true"] .dn-fs-round--save path { fill: currentColor; }
.dn-fs-sep { width: 42px; height: 1px; background: #e2e2e2; }
@media (max-width: 1100px) { .dn-float-share { display: none; } }

/* Mobile sticky bar: smaller icons */
@media (max-width: 767px) {
	.dn-sticky-tools-in { height: 48px; gap: 10px; }
	.dn-tools-sticky { gap: 8px; }
	.dn-tools-sticky .dn-tool { width: 26px; height: 26px; }
	.dn-tools-sticky .dn-tool svg { width: 13px; height: 13px; }
	.dn-tools-sticky .dn-tool-font { font-size: 10.5px; }
	.dn-tools-sticky .dn-tool-save { width: 24px; height: 24px; }
	.dn-follow-btn { height: 30px; padding: 0 8px; font-size: 12.5px; gap: 4px; }
	.dn-follow-btn svg { width: 16px; height: 16px; }
}

/* Mobile: 7 related posts instead of the সর্বশেষ/জনপ্রিয় tabs */
.dn-s-mobrel { display: none; }
@media (max-width: 900px) {
	.dn-s-sidebar, .dn-s-related { display: none; }
	.dn-s-mobrel { display: block; margin: 8px 0 20px; }
	.dn-s-mobrel .dn-s-related-title { font-size: 17px; margin-bottom: 8px; }
	.dn-card--mobrel { grid-template-columns: minmax(0, 1fr) 124px; }
	.dn-card--mobrel .dn-title { font-size: 18px; }
	.dn-card--mobrel .dn-excerpt { display: none; }
	.dn-card--mobrel:last-child { border-bottom: 0; }
}

/* ---------- Responsive video embeds (YouTube / Facebook / Vimeo) ---------- */
.dn-embed { position: relative; width: 100%; margin: 22px 0; overflow: hidden; border-radius: 6px; background: #000; }
.dn-embed--video { aspect-ratio: 16 / 9; }
.dn-embed--vertical { max-width: 360px; margin-left: auto; margin-right: auto; aspect-ratio: 9 / 16; }
.dn-embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.dn-s-media .dn-embed { margin: 0; border-radius: 0; }
.wp-block-embed .dn-embed { margin: 0; }
.wp-has-aspect-ratio .wp-block-embed__wrapper:has(.dn-embed)::before { display: none; }
.wp-block-embed__wrapper:has(.dn-embed) { position: static; }
.dn-article-body .wp-block-embed { margin: 22px 0; }
.dn-article-body iframe[src*="youtube"], .dn-article-body iframe[src*="facebook.com/plugins/video"] { max-width: 100%; }
.dn-video-embed:has(.dn-embed) { aspect-ratio: auto; }
.dn-video-embed:has(.dn-embed--vertical) { background: #111; padding: 12px 0; }