/*
Theme Name: NewsPortal Pro - Mehedi IT Solution
Theme URI: https://mehediit.com
Author: Mehedi IT Solution
Author URI: https://mehediit.com
Description: A modern, pixel-perfect, ultra-fast Bengali News Portal WordPress Theme developed by Mehedi IT Solution. Includes a multi-demo 1-click Demo Importer with switchable homepage layouts, dynamic customizer controls, modular section blocks, and responsive mobile design.
Version: 1.4.4
Text Domain: mits-news
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — © Mehedi IT Solution. All rights reserved.
License URI: https://mehediit.com/license/
Tags: news, magazine, grid-layout, custom-colors, custom-logo, custom-menu, featured-images, theme-options, translation-ready
*/

:root {
	--mits-primary: #c62828;
	--mits-primary-dark: #9b0000;
	--mits-teal: #007074;
	--mits-teal-dark: #005558;
	--mits-dark: #212121;
	--mits-bg: #f0f2f5;
	--mits-card-bg: #ffffff;
	--mits-border: #e2e8f0;
	--mits-text: #222222;
	--mits-meta: #64748b;
	--mits-font-serif: 'Noto Serif Bengali', serif;
	--mits-font-sans: 'Noto Serif Bengali', serif;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--mits-font-serif);
	background-color: var(--mits-bg);
	color: var(--mits-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
	color: var(--mits-primary);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.font-sans-eng {
	font-family: 'Inter', sans-serif;
}

.font-bengali-sans {
	font-family: 'Hind Siliguri', sans-serif;
}

.font-bengali-serif {
	font-family: 'Noto Serif Bengali', serif;
}

/* ── Article Body Typography (WordPress Standard Defaults: Minimum 16px, Natural Line-Height & Gap) ── */
.article-body {
	--article-font-size: 16px;
	font-family: 'Noto Serif Bengali', 'Tiro Bangla', serif;
	font-size: var(--article-font-size, 16px) !important;
	line-height: 1.75 !important;
	color: #1e293b;
}

.article-body.article-body {
	font-size: var(--article-font-size, 16px) !important;
	line-height: 1.75 !important;
}

.article-body p,
.article-body li,
.article-body div,
.article-body span {
	font-size: var(--article-font-size, 16px) !important;
	line-height: 1.75 !important;
}

.article-body p {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.article-body > * + * {
	margin-top: 1.5rem;
}

/* ── Breadcrumb Strictly Inline (Single Line on Mobile & All Screens) ── */
[data-purpose="breadcrumbs"] nav {
	display: flex !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
[data-purpose="breadcrumbs"] nav::-webkit-scrollbar {
	display: none;
}
[data-purpose="breadcrumbs"] nav > * {
	flex-shrink: 0;
}
[data-purpose="breadcrumbs"] nav span.truncate {
	flex-shrink: 1 !important;
	min-width: 0 !important;
}

/* ── Full Theme Sidebar Typography (Minimum 16px All Text & All Titles) ── */
[data-purpose="primary-sidebar"],
.primary-sidebar,
aside[data-purpose="primary-sidebar"],
.widget {
	font-size: 16px !important;
}

aside[data-purpose="primary-sidebar"] a,
aside[data-purpose="primary-sidebar"] span,
aside[data-purpose="primary-sidebar"] p,
aside[data-purpose="primary-sidebar"] li,
aside[data-purpose="primary-sidebar"] div,
aside[data-purpose="primary-sidebar"] button,
aside[data-purpose="primary-sidebar"] time,
aside[data-purpose="primary-sidebar"] label,
.primary-sidebar a,
.primary-sidebar span,
.primary-sidebar p,
.primary-sidebar li,
.primary-sidebar div,
.primary-sidebar button,
.primary-sidebar time,
.primary-sidebar label,
.widget a,
.widget p,
.widget li,
.widget span,
.widget div,
.widget label,
.widget time {
	font-size: 16px !important;
	line-height: 1.5;
}

aside[data-purpose="primary-sidebar"] h1,
aside[data-purpose="primary-sidebar"] h2,
aside[data-purpose="primary-sidebar"] h3,
aside[data-purpose="primary-sidebar"] h4,
aside[data-purpose="primary-sidebar"] h5,
aside[data-purpose="primary-sidebar"] h6,
aside[data-purpose="primary-sidebar"] .sidebar-story-title,
aside[data-purpose="primary-sidebar"] .widget-title,
.primary-sidebar h1,
.primary-sidebar h2,
.primary-sidebar h3,
.primary-sidebar h4,
.primary-sidebar h5,
.primary-sidebar h6,
.primary-sidebar .sidebar-story-title,
.primary-sidebar .widget-title,
.widget .widget-title {
	font-size: 18px !important;
	line-height: 1.4 !important;
}

/* Empty paragraphs (pasted from Word / extra Enters) render as tall gaps. */
.article-body p:empty,
.article-body div:empty {
	display: none;
	margin: 0;
}

.article-body p[style*="text-align: justify"],
.article-body div[style*="text-align: justify"],
.is-style-justify,
.has-text-align-justify {
	text-align: justify !important;
	text-justify: inter-word;
}

.article-body p[style*="text-align: right"],
.article-body div[style*="text-align: right"],
.has-text-align-right {
	text-align: right !important;
}

.article-body p[style*="text-align: left"],
.article-body div[style*="text-align: left"],
.has-text-align-left {
	text-align: left !important;
}

.article-body p[style*="text-align: center"],
.article-body div[style*="text-align: center"],
.has-text-align-center {
	text-align: center !important;
}

.alignleft {
	float: left;
	margin: 0.5rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ── Sidebar Recent Posts (সর্বশেষ পোস্ট) — demo 2 homepage inline style:
   left image (70×48) + right title, clamped 2 lines, thin dividers ── */
.widget_recent_entries ul,
.widget .mits-rp-item {
	list-style: none;
}
.widget_recent_entries ul li.mits-rp-item,
.widget li.mits-rp-item {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: 0;
}
.widget li.mits-rp-item > a {
	display: flex !important;
	align-items: flex-start;
	gap: 10px; /* gap-2.5 */
	padding: 8px 0 8px; /* pb-2 */
	border-bottom: 1px solid #f1f5f9; /* border-gray-100 */
}
.widget li.mits-rp-item:last-child > a {
	border-bottom: 0;
	padding-bottom: 0;
}
.widget li.mits-rp-item:first-child > a {
	padding-top: 0;
}
.widget li.mits-rp-item > a:hover .mits-rp-text {
	color: #dc2626; /* group-hover:text-red-700 */
}
.mits-rp-thumb-wrap {
	flex-shrink: 0;
	width: 70px;
	height: 48px;
	border-radius: 4px;
	overflow: hidden;
	background: #f1f5f9;
	display: block;
}
img.mits-rp-thumb,
.mits-rp-thumb-wrap img {
	width: 70px !important;
	height: 48px !important;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}
.mits-rp-text {
	flex: 1;
	min-width: 0;
	font-size: 12px; /* text-xs */
	font-weight: 500; /* font-medium */
	color: #1f2937; /* text-gray-800 */
	line-height: 1.45; /* leading-snug */
	display: -webkit-box;
	-webkit-line-clamp: 2; /* line-clamp-2 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.15s ease;
}
/* Block editor "Latest Posts" widget — image LEFT, title RIGHT */
.wp-block-latest-posts,
.widget ul.wp-block-latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
li.wp-block-latest-posts__item {
	display: flex !important;
	align-items: flex-start;
	gap: 10px; /* gap-2.5 */
	margin-bottom: 0 !important;
	padding: 8px 0; /* pb-2 — divider spans the full row like homepage */
	border-bottom: 1px solid #f1f5f9; /* border-gray-100 */
}
li.wp-block-latest-posts__item::after {
	content: none;
}
li.wp-block-latest-posts__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
li.wp-block-latest-posts__item:first-child {
	padding-top: 0;
}
li.wp-block-latest-posts__item > a {
	display: -webkit-box;
	-webkit-line-clamp: 2; /* line-clamp-2 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
	min-width: 0;
	font-size: 12px; /* text-xs */
	font-weight: 500; /* font-medium */
	color: #1f2937; /* text-gray-800 */
	line-height: 1.45; /* leading-snug */
	transition: color 0.15s ease;
}
li.wp-block-latest-posts__item > a:hover {
	color: #dc2626; /* group-hover:text-red-700 */
}
li.wp-block-latest-posts__item .wp-block-latest-posts__featured-image {
	flex: 0 0 70px;
	width: 70px;
	margin: 0 !important;
	order: -1; /* keep image on the left regardless of source order */
}
.wp-block-latest-posts__featured-image img,
.wp-block-latest-posts__featured-image a img {
	width: 70px !important;
	height: 48px !important;
	object-fit: cover;
	border-radius: 4px;
}
li.wp-block-latest-posts__item .wp-block-latest-posts__post-date {
	display: none; /* homepage inline list has no date */
}

.line-clamp-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.section-badge {
	position: relative;
	display: inline-block;
	padding: 3px 14px 4px;
	/* Minimum font size policy: never below 16px */
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

.section-badge::after {
	content: '';
	position: absolute;
	top: 0;
	right: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 28px 8px 0 0;
	border-color: inherit transparent transparent transparent;
}

.news-card-border {
	border-left: 5px solid #827717;
}

.accent-border-teal {
	border-left: 4px solid var(--mits-teal);
}

.scrollbar-none::-webkit-scrollbar {
	display: none;
}
.scrollbar-none {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* ─────────────────────────────────────────────
   ONE navbar (desktop) + dropdown + mobile drawer
   ───────────────────────────────────────────── */

/* Single horizontal menu list — never wider than its bar */
.mits-desktop-list {
	max-width: 100%;
}

/* ─────────────────────────────────────────────
   Navbar items — JUSTIFIED (fills the whole red bar)
   Every top-level item shares the full width of the navbar: the first
   sits at the left edge, the last at the right edge, and the remaining
   space is distributed evenly between them (like justified text).
   Uses higher specificity than the Tailwind utilities, so it also wins
   if the CDN injects its stylesheet after this one.
   ───────────────────────────────────────────── */
#mitsDesktopMenu > .mits-desktop-list {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
}

#mitsDesktopMenu > .mits-desktop-list > .mits-menu-item {
	flex: 1 1 auto;
	text-align: center;
	display: flex;
}

/* Top-level links fill their item box and centre their label */
#mitsDesktopMenu > .mits-desktop-list > .mits-menu-item > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* The item box must stay relative for the absolutely positioned panel */
#mitsDesktopMenu > .mits-desktop-list > .mits-has-dropdown {
	position: relative;
}

/* Dropdown panels are left aligned even though the parent is centred */
#mitsDesktopMenu .mits-dropdown-menu {
	text-align: left;
}

.mits-has-dropdown {
	position: relative;
}

/* ── Desktop dropdown — CDN-independent ──
   Panels are closed by default via OUR OWN css (not the Tailwind
   `hidden` class), so the sub-menu keeps working even if the Tailwind
   CDN fails or loads late. Two independent ways to open a sub-menu:
     1) HOVER  — pure CSS `:hover` below (no JS / no matchMedia
                 dependency, so it works in every browser).
     2) CLICK / TAP / KEYBOARD — JS adds `.mits-dropdown-open`
                 (assets/js/main.js) for touch devices, keyboard and
                 click-to-toggle.
   Both states render exactly the same panel. */
.mits-dropdown-menu {
	display: none;
}

/* 1) HOVER — always works, no JavaScript required */
.mits-has-dropdown:hover > .mits-dropdown-menu,
.mits-has-dropdown:focus-within > .mits-dropdown-menu {
	display: block;
}

/* 2) CLICK / TAP state toggled by assets/js/main.js */
.mits-has-dropdown.mits-dropdown-open > .mits-dropdown-menu {
	display: block;
}

.mits-has-dropdown:hover > a .mits-caret,
.mits-has-dropdown:focus-within > a .mits-caret,
.mits-has-dropdown.mits-dropdown-open > a .mits-caret {
	transform: rotate(180deg);
}

/* Keep the pointer inside the item while travelling from the bar to the
   panel (kills the 1px gap flicker) */
.mits-has-dropdown:hover > .mits-dropdown-menu {
	padding-top: 0.375rem;
}

/* Keep the panel inside the viewport for the last few menu items */
.mits-menu-item.mits-has-dropdown:last-child > .mits-dropdown-menu,
.mits-menu-item.mits-has-dropdown:nth-last-child(2) > .mits-dropdown-menu {
	left: auto;
	right: 0;
}

/* Touch devices: hovering a tapped parent must not leave the panel
   floating open after the tap is released */
@media (hover: none) {
	.mits-has-dropdown:hover > .mits-dropdown-menu {
		display: none;
	}

	.mits-has-dropdown.mits-dropdown-open > .mits-dropdown-menu {
		display: block;
	}
}

/* ── Mobile drawer accordion — CDN-independent ──
   Same approach: closed by default, opened by adding `.mits-open`. */
.mits-drawer-sub {
	display: none;
}

.mits-drawer-sub.mits-open {
	display: block;
}

.mits-drawer-toggle .fa {
	transition: transform 0.2s ease;
}

.mits-drawer-toggle[aria-expanded='true'] .fa {
	transform: rotate(180deg);
}

/* Smooth momentum scrolling for the mobile drawer */
#mitsDrawerMenu {
	-webkit-overflow-scrolling: touch;
}

/* Comfortable 44px tap targets in the mobile drawer */
.mits-drawer-toggle,
#mitsDrawerMenu > div > a {
	min-height: 44px;
}

/* ─────────────────────────────────────────────
   Managed image advertisements — IMAGE ONLY
   (Customizer → বিজ্ঞাপন ব্যবস্থাপনা / Ads Manager)

   The wrapper (.mits-ad) gets an INLINE width + aspect-ratio from
   mits_ad_open_wrapper() = the EXACT Google standard size selected in
   the Customizer (e.g. 300×250). These rules only make it behave:
   • the box never stretches wider than the selected size
     (inline width, capped by max-width:100% for narrow columns)
   • the image always FILLS that box (width:100%, not width:auto —
     width:auto would fall back to the uploaded file's native size)
   • object-fit:contain + the img's aspect-ratio guarantee the exact
     W×H shape with no stretching or cropping
   ───────────────────────────────────────────── */
.mits-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 1rem auto;
	text-align: center;
	/* The inline width IS the exact selected Google size — never let a
	   flex/grid parent squeeze the box smaller than that (columns only
	   shrink it via the inline max-width:100% fallback). */
	flex-shrink: 0;
}

.mits-ad a {
	display: block;
	width: 100%;
}

.mits-ad-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
	object-fit: contain;
	/* Never let the image itself be squeezed by flex either — it must
	   fill the wrapper box (which carries the exact selected size). */
	flex-shrink: 0;
}

/* Empty slot hint — visible only inside the Customizer preview so the
   pen icon always has a target to anchor to. */
.mits-ad-empty {
	display: inline-block;
	border: 1px dashed #cbd5e1;
	background: #f8fafc;
	color: #94a3b8;
	padding: 12px 18px;
	border-radius: 4px;
}

/* ────────────────────────────────────────────
   Mobile friendliness
   ───────────────────────────────────────────── */

/* Long Bengali headlines must wrap instead of pushing the layout wide */
body {
	overflow-wrap: break-word;
}

/* Hide accidental horizontal overflow without breaking the sticky header
   (`clip` does not create a scroll container, unlike `hidden`). */
html {
	overflow-x: clip;
}

/* Bengali serif headings read better with tighter line-height on phones */
@media (max-width: 767px) {
	h1, h2, h3, h4 {
		line-height: 1.35;
	}
}

/* ─────────────────────────────────────────────
   MINIMUM FONT SIZE POLICY — 16px EVERYWHERE
   (mobile + desktop). Every font size is rendered
   in px and is never smaller than 16px.
   1) The Tailwind CDN scale is already overridden
      to px values (>= 16px) via inc/theme-core.php.
   2) The rules below are a hard !important safety
      net, so nothing can ever fall below 16px even
      if the CDN config fails to load.
   ───────────────────────────────────────────── */
.text-xs,
.text-sm,
.text-base,
.text-\[8px\],
.text-\[9px\],
.text-\[10px\],
.text-\[11px\],
.text-\[12px\],
.text-\[13px\],
.text-\[14px\],
.text-\[15px\] {
	font-size: 16px !important;
}

.text-lg {
	font-size: 18px !important;
}

/* Responsive variants of the small utilities (Tailwind breakpoints) */
@media (min-width: 640px) {
	.sm\:text-xs,
	.sm\:text-sm,
	.sm\:text-base,
	.sm\:text-\[8px\],
	.sm\:text-\[9px\],
	.sm\:text-\[10px\],
	.sm\:text-\[11px\],
	.sm\:text-\[12px\],
	.sm\:text-\[13px\],
	.sm\:text-\[14px\],
	.sm\:text-\[15px\] {
		font-size: 16px !important;
	}

	.sm\:text-lg {
		font-size: 18px !important;
	}
}

@media (min-width: 768px) {
	.md\:text-xs,
	.md\:text-sm,
	.md\:text-base,
	.md\:text-\[8px\],
	.md\:text-\[9px\],
	.md\:text-\[10px\],
	.md\:text-\[11px\],
	.md\:text-\[12px\],
	.md\:text-\[13px\],
	.md\:text-\[14px\],
	.md\:text-\[15px\] {
		font-size: 16px !important;
	}

	.md\:text-lg {
		font-size: 18px !important;
	}
}

@media (min-width: 1024px) {
	.lg\:text-xs,
	.lg\:text-sm,
	.lg\:text-base,
	.lg\:text-\[8px\],
	.lg\:text-\[9px\],
	.lg\:text-\[10px\],
	.lg\:text-\[11px\],
	.lg\:text-\[12px\],
	.lg\:text-\[13px\],
	.lg\:text-\[14px\],
	.lg\:text-\[15px\] {
		font-size: 16px !important;
	}

	.lg\:text-lg {
		font-size: 18px !important;
	}
}

@media (min-width: 1280px) {
	.xl\:text-xs,
	.xl\:text-sm,
	.xl\:text-base,
	.xl\:text-\[8px\],
	.xl\:text-\[9px\],
	.xl\:text-\[10px\],
	.xl\:text-\[11px\],
	.xl\:text-\[12px\],
	.xl\:text-\[13px\],
	.xl\:text-\[14px\],
	.xl\:text-\[15px\] {
		font-size: 16px !important;
	}

	.xl\:text-lg {
		font-size: 18px !important;
	}
}

/* Form controls & widgets never render below 16px
   (also prevents iOS Safari zoom-on-focus). */
input,
select,
textarea,
button,
.widget {
	font-size: 16px;
}

/* ─────────────────────────────────────────────
   SITE FONTS (Bengali) — declared in plain CSS so they are independent
   of the Tailwind CDN font-family overrides. Single post content and
   every Bengali surface use these.
   ───────────────────────────────────────────── */
body {
	font-family: 'Noto Serif Bengali', serif;
}

/* All Bengali text & headings — Noto Serif Bengali exclusively */
.font-bengali-serif,
.font-bengali-sans,
h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Serif Bengali', serif !important;
}

/* Latin/numbers font (dates, phone numbers) */
.font-sans-eng {
	font-family: 'Inter', sans-serif;
}

/* Single post: article body always renders in Noto Serif Bengali */
.article-body,
.article-body p,
.article-body li,
.article-body div,
.article-body span,
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
	font-family: 'Noto Serif Bengali', serif !important;
}

/* ─────────────────────────────────────────────
   HEADER NAVIGATION MENU HOVER & ACTIVE STYLES
   ───────────────────────────────────────────── */
.mits-desktop-list > li > a {
	color: #ffffff;
	transition: all 0.2s ease-in-out !important;
}
.mits-desktop-list > li > a:hover,
.mits-desktop-list > li:hover > a {
	background-color: #9b0000 !important;
	color: #ffffff !important;
}
.mits-desktop-list > li.current-menu-item > a,
.mits-desktop-list > li.current-category-ancestor > a,
.mits-desktop-list > li.current-menu-ancestor > a {
	background-color: #7f0000 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}
.mits-dropdown-menu li a {
	transition: all 0.15s ease-in-out !important;
}
.mits-dropdown-menu li a:hover {
	background-color: #fef2f2 !important;
	color: #c62828 !important;
	font-weight: 700 !important;
}

/* Footer columns: free HTML text areas — honour the inline
   formatting (bold / alignment / links) saved from the Customizer. */
.mits-footer-col {
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: break-word;
}
.mits-footer-col p { margin: 0 0 0.6em; }
.mits-footer-col p:last-child { margin-bottom: 0; }
.mits-footer-col strong,
.mits-footer-col b { font-weight: 700; color: #111827; }
.mits-footer-col a { color: #c62828; word-break: break-word; }
.mits-footer-col a:hover { text-decoration: underline; }
.mits-footer-col ul,
.mits-footer-col ol { margin: 0 0 0.6em; padding-left: 1.25rem; }

/* Global "Justify" block style (Block Editor Styles dropdown) — works
   inside .article-body and anywhere else (editor canvas included). */
.is-style-justify,
.has-text-align-justify {
	text-align: justify;
}

/* ─────────────────────────────────────────────
   ARTICLE BODY — Classic-editor-style typography defaults:
   paragraphs, lists, blockquotes and links are styled, text reads
   left/justified consistently, and inline styles (align / bold /
   color set from the editor) render as-is.
   ───────────────────────────────────────────── */
.article-body p {
	margin: 0 0 1em;
	line-height: 1.8;
	font-size: var(--article-font-size, 16px);
	text-align: justify;
}

.article-body ul,
.article-body ol {
	margin: 0 0 1em;
	padding-left: 1.5rem;
	line-height: 1.8;
	font-size: var(--article-font-size, 16px);
}

.article-body li {
	margin-bottom: 0.35em;
}

.article-body blockquote {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border-left: 4px solid #c62828;
	background: #f8fafc;
	color: #334155;
	font-style: italic;
	font-size: 19px;
}

.article-body a {
	color: #c62828;
	text-decoration: underline;
	word-break: break-word;
}

.article-body a:hover {
	color: #9b0000;
}

.article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 16px;
}

.article-body th,
.article-body td {
	border: 1px solid #e2e8f0;
	padding: 0.5em 0.75em;
	text-align: left;
}

.article-body h2 {
	font-size: 28px;
	margin: 1.4em 0 0.5em;
}

.article-body h3 {
	font-size: 24px;
	margin: 1.4em 0 0.5em;
}

/* Inline text alignment set in the editor (align-left/center/right/
   justify classes from the block/classic editor) is honoured verbatim. */
.article-body .has-text-align-left {
	text-align: left;
}

.article-body .has-text-align-center {
	text-align: center;
}

.article-body .has-text-align-right {
	text-align: right;
}

.article-body .has-text-align-justify {
	text-align: justify;
}

/* "Justify (ন্যায্য সারি)" paragraph block style — Block Editor
   (registered in inc/editor.php) and the classic editor alike. */
.article-body .is-style-justify {
	text-align: justify;
}

.article-body .alignleft {
	float: left;
	margin: 0.35em 1.4em 1em 0;
	text-align: left;
}

.article-body .alignright {
	float: right;
	margin: 0.35em 0 1em 1.4em;
	text-align: right;
}

.article-body .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


/* ─────────────────────────────────────────────
   UNIFIED SEARCH BARS — one modern design everywhere
   (header desktop, mobile drawer, searchform.php → 404,
   no-results, search widget). Plain CSS so it works even
   if the Tailwind CDN fails to load.
   Colours: primary red #c62828 / dark #9b0000.
   ───────────────────────────────────────────── */
.mits-search {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	font-family: 'Noto Serif Bengali', serif;
}

/* Never force flex when the Tailwind `hidden` class is used (header pill is
   hidden on mobile); higher specificity would otherwise break `hidden`, while
   `sm:flex` still shows it from the sm breakpoint onwards. */
.mits-search:not(.hidden) {
	display: flex;
}

.mits-search__box {
	display: flex;
	align-items: stretch;
	width: 100%;
	position: relative;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.mits-search__box:focus-within {
	border-color: #c62828;
	box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.14), 0 4px 14px rgba(198, 40, 40, 0.12);
}

.mits-search__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 14px;
	padding-right: 6px;
	color: #94a3b8;
	font-size: 15px;
	pointer-events: none;
	flex-shrink: 0;
}

.mits-search__box:focus-within .mits-search__icon {
	color: #c62828;
}

.mits-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	font-family: 'Noto Serif Bengali', serif;
	font-size: 15px;
	color: #1e293b;
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	padding: 11px 10px 11px 4px;
}

/* Hide native search clear button for a cleaner look */
.mits-search__input::-webkit-search-cancel-button,
.mits-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.mits-search__input::placeholder {
	color: #94a3b8;
	opacity: 1;
}

.mits-search__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	background: linear-gradient(135deg, #d32f2f 0%, #c62828 55%, #9b0000 100%);
	border: none;
	color: #fff;
	cursor: pointer;
	font-family: 'Noto Serif Bengali', serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	padding: 0 22px;
	transition: filter 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}

.mits-search__btn i {
	font-size: 14px;
}

.mits-search__btn:hover,
.mits-search__btn:focus-visible {
	filter: brightness(1.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	outline: none;
}

.mits-search__btn:active {
	transform: translateY(1px);
}

/* Block variant — full width card-style bar (404, no-results, widgets, results page) */
.mits-search--bar .mits-search__box {
	width: 100%;
}

/* Pill variant — compact header / drawer search */
.mits-search--pill {
	gap: 0;
}

.mits-search--pill .mits-search__box {
	border-radius: 9999px;
	background: #f1f5f9;
	border-color: #e2e8f0;
	box-shadow: none;
}

.mits-search--pill .mits-search__box:focus-within {
	background: #fff;
}

.mits-search--pill .mits-search__icon {
	padding-left: 13px;
	font-size: 13px;
}

.mits-search--pill .mits-search__input {
	font-size: 14px;
	padding: 8px 46px 8px 4px;
	background: transparent;
}

.mits-search--pill .mits-search__btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 9999px;
	padding: 0;
}

.mits-search--pill .mits-search__btn i {
	font-size: 12px;
}

.mits-search--pill .mits-search__btn:active {
	transform: translateY(calc(-50% + 1px));
}

/* Minimal variant — inline fallback */
.mits-search--minimal .mits-search__box {
	border-radius: 10px;
}

.mits-search--minimal .mits-search__btn {
	padding: 0 16px;
}

/* Screen-reader-only label (works without the Tailwind CDN) */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
   DEMO 2 (home2.html / "চট্টগ্রাম খবর" design)
   ================================================================== */

/* The reference design uses a RED navbar instead of the teal one.
   Scoped to body.mits-demo-demo-2, so demo 1 keeps its own colour. */
body.mits-demo-demo-2 .mits-primary-nav {
	background-color: #c62828;
	color: #ffffff !important;
}

body.mits-demo-demo-2 .mits-primary-nav a:not(.mits-dropdown-menu a),
body.mits-demo-demo-2 #mitsDesktopMenu > .mits-desktop-list > .mits-menu-item > a,
body.mits-demo-demo-2 .mits-desktop-list > li > a,
body.mits-demo-demo-2 #mitsPrimaryNav,
body.mits-demo-demo-2 #mitsPrimaryNav span,
body.mits-demo-demo-2 #mitsPrimaryNav i {
	color: #ffffff !important;
}

body.mits-demo-demo-2 .mits-desktop-list > li > a:hover,
body.mits-demo-demo-2 .mits-desktop-list > li:hover > a {
	background-color: #9b0000 !important;
	color: #ffffff !important;
}

body.mits-demo-demo-2 .mits-desktop-list > li.current-menu-item > a,
body.mits-demo-demo-2 .mits-desktop-list > li.current-category-ancestor > a,
body.mits-demo-demo-2 .mits-desktop-list > li.current-menu-ancestor > a {
	background-color: #7f0000 !important;
	color: #ffffff !important;
}

/* Strip under the navbar: Bengali date + the homepage section links. */
.mits-subnav {
	line-height: 1.6;
}

.mits-subnav a {
	color: #4b5563;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.mits-subnav a:hover {
	color: #c62828;
	text-decoration: underline;
}

/* Every demo 2 section card is `lg:col-span-6`; on the smallest phones the
   reference design keeps the feature image + list stacked full width. */
body.mits-demo-demo-2 .section-badge {
	border-radius: 3px 0 0;
}