/*
Theme Name: Dahuk News Themes
Theme URI: https://dahuk.com.bd
Author: Shariful Islam Azad
Author URI: https://dahuk.com.bd
Description: Dahuk News Themes একটি আধুনিক, দ্রুত ও হালকা WordPress নিউজ থিম। এতে ডার্ক ও লাইট মোড, বাংলা তারিখ (বাংলা সন ও হিজরি), কাস্টম উইজেট লেআউট, ক্যাটাগরি ভিত্তিক নিউজ সেকশন এবং নিউজ পোর্টালের জন্য অপ্টিমাইজড ডিজাইন অন্তর্ভুক্ত।
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dahuk-news
Tags: news, newspaper, dark-mode, light-mode, bangla, responsive, two-columns, custom-logo, custom-menu
*/

/* ======================
   FONT
====================== */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('assets/fonts/SolaimanLipi.ttf') format('truetype');
    font-display: swap;
}

body {
    margin: 0;
    font-family: 'SolaimanLipi', sans-serif;
    transition: background .3s, color .3s;
}

/* ======================
   CONTAINER
====================== */
.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

/* ======================
   DARK MODE (DEFAULT)
====================== */
.dark-mode {
    background: #050505;
    color: #eaeaea;
}

.dark-mode .site-header,
.dark-mode .main-menu {
    background: #000;
    border-bottom: 1px solid #111;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .85);
}

/* ======================
   LIGHT MODE (CREAM)
====================== */
.light-mode {
    background: #f7f4ee;
    color: #111;
}

.light-mode .site-header,
.light-mode .main-menu {
    background: #fdfaf4;
    border-bottom: 1px solid #e0d9cc;
}

/* ======================
   HEADER
====================== */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-right {
    text-align: right;
}

.bangla-date {
    font-size: 14px;
    margin-bottom: 6px;
}

/* Dark toggle */
.dark-toggle span {
    cursor: pointer;
    font-size: 22px;
    margin-left: 8px;
    opacity: .6;
}

.dark-toggle span.active {
    opacity: 1;
    color: #ffcc00;
}

/* ======================
   LOGO AUTO SWITCH
====================== */
.site-logo img {
    display: none;
}

.dark-mode .logo-dark {
    display: block;
}

.light-mode .logo-light {
    display: block;
}

/* =========================
   FIXED CATEGORY MENU STYLE
========================= */

.main-menu ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 10px 0;   /* 🔥 left-right padding বাদ */
}

.main-menu ul li {
    list-style: none;
}

.main-menu ul li a {
    display: inline-block;
    font-size: 21px;              /* ✅ চাওয়া অনুযায়ী */
    padding: 6px 16px;
    border-radius: 999px;         /* 🔵 oblong shape */
    text-decoration: none;        
    white-space: nowrap;
    transition: all 0.25s ease;
}

body.light-mode .main-menu ul li a {
    background: #e6e1d8;
    color: #111;
}

body.dark-mode .main-menu ul li a {
    background: #2a2a2a;
    color: #f2f2f2;
}

.main-menu ul li a:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.main-menu ul::-webkit-scrollbar {
    height: 0;
}

/* ======================
   HEADER SLIDE EFFECT STICKY MENU
====================== */

.site-header {
    position: relative;
    width: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-header.hide {
    transform: translateY(-100%);
    opacity: 0;
}

.main-menu.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: top 0.3s, background 0.3s;
}

/* ======================
   MAIN CONTENT LAYOUT FIX (DESKTOP / TABLET)
====================== */
.body-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* ✅ Desktop/Tablet: 3-column */
    gap: 20px;
}

.body-box {
    width: 100%;
}

.content-area {
    display: flex;              /* ✅ Desktop/Tablet: flex row */
    gap: 20px;
    align-items: flex-start;
}

.body2 {
    width: 70%;                 /* ✅ Desktop/Tablet: main content */
}

.sidebar {
    width: 30%;                 /* ✅ Desktop/Tablet: sidebar */
}

.widget {
    width: 100%;
    box-sizing: border-box;
}

/* ======================
   RESPONSIVE (MOBILE)
====================== */
@media (max-width: 768px) {

    /* ===== HEADER ===== */
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .header-right {
        text-align: left;
    }

    /* ===== Body 1 Top Boxes ===== */
    .body-boxes {
        grid-template-columns: 1fr;      /* 🔴 পরিবর্তন: single column stack */
        gap: 15px;                        /* 🔴 পরিবর্তন: gap adjust */
    }

    /* ===== Body2 + Sidebar ===== */
    .content-area {
        display: flex;
        flex-direction: column;           /* 🔴 vertical stack */
        gap: 15px;                        /* 🔴 spacing */
    }

    .body2 {
        width: 100%;                       /* 🔴 full width */
    }

    /* Body2 widgets vertical stack */
    .body2 .widget {
        width: 100%;                       /* 🔴 full width */
        margin-bottom: 15px;               /* 🔴 vertical spacing */
    }

    .sidebar {
        width: 100%;                       /* 🔴 full width */
    }

    /* Sidebar widgets vertical stack */
    .sidebar .widget {
        width: 100%;                       /* 🔴 full width */
        margin-bottom: 15px;               /* 🔴 vertical spacing */
    }

    /* Optional: reduce gap between top boxes and content */
    .body-boxes, .content-area {
        margin-bottom: 15px;               /* 🔴 vertical spacing */
    }
}


/* ======================
   MOBILE SWIPE MENU FIX
====================== */
@media (max-width: 768px) {

    .main-menu ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .main-menu ul li {
        flex: 0 0 auto;
    }

}


/* =====================================================
   GLOBAL WIDGET LAYOUT FIX (NO OVERLAP – TIGHT VERSION)
===================================================== */

.theme-widget,
.box-widget,
.body2-widget,
.sidebar-widget,
.footer-widget {
    display: block;
    width: 100%;
    position: relative;
    isolation: isolate;
    clear: both;
    overflow: hidden;

    margin: 9px 0;      /* 🔽 28px → 18px */
}

/* Ensure consecutive widgets never touch */
.theme-widget + .theme-widget,
.box-widget + .box-widget,
.body2-widget + .body2-widget,
.sidebar-widget + .sidebar-widget {
    margin-top: 10px;   /* 🔽 32px → 20px */
}

/* Body 2 widget area safety */
#body-2,
.body-2,
.body2,
.body2-area {
    overflow: hidden;
}

/* Sidebar safety */
.sidebar,
#sidebar,
.widgets-area {
    overflow: hidden;
}

/* Mobile tightening */
@media (max-width: 768px) {
    .theme-widget,
    .box-widget,
    .body2-widget,
    .sidebar-widget {
        margin: 14px 0;  /* 🔽 22px → 14px */
    }
}


/* ======================
   FOOTER
====================== */

#site-footer {
    background: #000;
    color: #fff;
    padding: 40px 15px 20px;
    margin-top: 40px;
}

.footer-widgets {
    max-width: 1440px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.footer-box {
    flex: 1 1 30%;
    min-width: 250px;
}

.footer-box h4 {
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid #444;
    margin-bottom: 10px;
    padding-bottom: 6px;
}

.footer-box a {
    color: #ccc;
    text-decoration: none;
}

.footer-box a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    color: #aaa;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-widgets {
        flex-direction: column;
    }

    .footer-box {
        flex: 1 1 100%;
    }
}



/* ===============================
   DAHUK Side Post Widget
=============================== */
.dahuksidepost-widget {
    background: var(--widget-bg);
    border: var(--widget-border);
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    transition: background-color 0.3s ease, border 0.3s ease;
}

/* Light / Dark mode variables */
body.light-mode {
    --widget-bg: #ffffff;
    --text-color: #222;
    --title-bg: #e0e0e0;
    --more-bg: #d3d3d3;
    --widget-border: 1px solid #ddd;
}

body.dark-mode {
    --widget-bg: transparent; /* ভাসা দেখাবে */
    --text-color: #f0f0f0;
    --title-bg: #333;
    --more-bg: #555;
    --widget-border: none; /* বর্ডার নেই */
}

/* Apply variables */
.dahuksidepost-widget {
    background-color: var(--widget-bg);
    color: var(--text-color);
    border: var(--widget-border);
}

/* Category Title */
.cat-title-wrap {
    display: inline-block;
    border-radius: 999px;
    padding: 6px 18px;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

/* Light/Dark mode category title text color */
body.light-mode .cat-title-wrap .oblong-bg {
    color: #000;  /* light mode title */
}
body.dark-mode .cat-title-wrap .oblong-bg {
    color: #fff;  /* dark mode title */
}

.cat-title-wrap .oblong-bg {
    font-size: 18px;
    font-weight: bold;
}

/* Post List */
.dahuksidepost-post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dahuksidepost-post-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
}

/* Thumbnail Image with rounded corners + hover zoom */
.dahuksidepost-post-item .thumb img {
    width: 150px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px; /* 🔹 rounded corners */
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(90%);
    cursor: pointer;
}

/* Light/Dark mode filter for image */
body.light-mode .dahuksidepost-post-item .thumb img {
    filter: brightness(80%);
}
body.dark-mode .dahuksidepost-post-item .thumb img {
    filter: brightness(110%);
}

/* Hover / Touch Zoom */
.dahuksidepost-post-item .thumb img:hover,
.dahuksidepost-post-item .thumb img:active {
    transform: scale(1.05);
}

/* Info Section */
.dahuksidepost-post-item .info .title {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

/* Light / Dark mode post title color */
body.light-mode .dahuksidepost-post-item .info .title {
    color: #222;
}
body.dark-mode .dahuksidepost-post-item .info .title {
    color: #f0f0f0;
}

.dahuksidepost-post-item .info .meta {
    font-size: 12px;
    margin-top: 3px;
    color: var(--text-color);
}

/* More Button */
.more-button {
    text-align: right;
    margin-top: 10px;
}
.more-button .oblong-bg {
    background-color: var(--more-bg);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.more-button .oblong-bg:hover {
    opacity: 0.85;
}

/* Responsive */
@media (max-width: 768px) {
    .dahuksidepost-post-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .dahuksidepost-post-item .thumb img {
        width: 100%;
        height: auto;
    }
    .dahuksidepost-post-item .info .title {
        font-size: 15px;
        -webkit-line-clamp: 3;
    }
}






/* ========== DAHUK 7 Post Widget ===========*/

.dahuk-widget {
  background-color: var(--widget-bg);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--widget-shadow);
  transition: background-color 0.3s ease;
  max-width: 100%;
}

body.light-mode {
  --widget-bg: #ffffff;
  --widget-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  --text-color: #222;
  --title-bg: #e0e0e0;
  --more-bg: #d3d3d3;
}

body.dark-mode {
  --widget-bg: #1a1a1a;
  --widget-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
  --text-color: #f0f0f0;
  --title-bg: #333;
  --more-bg: #555;
}

.category-title .oblong-bg {
  background-color: var(--title-bg);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 21px;
  display: inline-block;
  margin-bottom: 12px;
}

/* Main Post */
.main-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px; /* 🔶 নিচের ফাঁকা জায়গা কমানো */
}

.main-img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  transition: transform 0.3s ease;
  filter: brightness(90%);
  border-radius: 12px; /* 🔹 কোণ গোলাকার */
}

body.light-mode .main-img { filter: brightness(80%); }
body.dark-mode .main-img { filter: brightness(110%); }

/* Small Posts */
.item {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 100px; /* 🔶 সব ব্লক সমান উচ্চতা */
  align-items: center;
  padding: 6px 0;
  box-sizing: border-box;
}

.thumb-img {
  width: 170px;
  height: 90px;
  object-fit: cover;
  transition: transform 0.3s ease;
  filter: brightness(90%);
  border-radius: 8px; /* 🔹 ছোট থাম্বনেইল গোলাকার */
}

body.light-mode .thumb-img { filter: brightness(80%); }
body.dark-mode .thumb-img { filter: brightness(110%); }

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Title & Date */
.item-content h3,
.main-content h2 {
  font-size: 16px;
  color: var(--text-color);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 🔶 সর্বোচ্চ ২ লাইনে সীমাবদ্ধ */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bangla-date {
  font-size: 14px;
  color: var(--text-color);
  margin-top: 4px;
}

/* Links */
.hidden-link {
  text-decoration: none;
  color: inherit;
}

.main-img:hover,
.thumb-img:hover {
  transform: scale(1.05);
}

/* More Button */
.more-button a {
    display: inline-block;       /* লেখাটা দেখাবে */
    text-decoration: none;       /* আন্ডারলাইন থাকবে না */
    color: var(--text-color);    /* light/dark অনুযায়ী রঙ */
    background-color: var(--more-bg);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.more-button a:hover {
    background-color: var(--title-bg);
}



/* ✅ Responsive adjustments for mobile */
@media (max-width: 768px) {
  .dahuk-widget {
    padding: 12px;
  }

  .category-title .oblong-bg {
    font-size: 18px;
    padding: 4px 10px;
  }

  .main-item {
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
  }

  .main-img {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .item {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    gap: 8px;
    margin-bottom: 12px;
  }

  .thumb-img {
    width: 100%;
    height: auto;
  }

  .item-content h3,
  .main-content h2 {
    font-size: 15px;
    -webkit-line-clamp: 3; /* 🔶 মোবাইলে সর্বোচ্চ ৩ লাইনে সীমাবদ্ধ */
  }

  .bangla-date {
    font-size: 13px;
  }
}






/* ==========================
   DAHUK Post Scroll Widget 
============================= */

.dahuk-post-scroll-widget {
    width: 100%;
    overflow: hidden;
    padding-top: 0 !important;   /* 🔥 ZERO TOP GAP */
    padding-bottom: 10px;        /* শুধু নিচে একটু padding */
    box-sizing: border-box;
}

/* Scroll outer wrapper */
.dahuk-scroll-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Inner scrolling track */
.dahuk-scroll-inner {
    display: flex;
    gap: 20px;
    width: max-content;          
    will-change: transform;
}

/* Each post item */
.dahuk-scroll-item {
    flex: 0 0 auto;
    width: 250px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    overflow: hidden;
}

/* Zoom effect (safe) */
.dahuk-scroll-item:hover {
    transform: translateZ(0) scale(1.05);
}

/* Post link */
.dahuk-scroll-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image fix */
.dahuk-scroll-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

/* Post title */
.dahuk-scroll-title {
    font-size: 16px;
    font-weight: 600;
    margin: 6px 10px 2px 10px;
    line-height: 1.3em;
    height: 2.6em;
    overflow: hidden;
}

/* Post date */
.dahuk-scroll-date {
    font-size: 14px;
    color: #555;
    margin: 0 10px 10px 10px;
}

/* Category title */
.dahuk-post-scroll-cat {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 10px 0;       /* 🔥 ZERO TOP GAP */
}

/* Dark / Light mode text color fix */
body.dark-mode .dahuk-post-scroll-cat {
    color: #ffffff;
}

body.light-mode .dahuk-post-scroll-cat {
    color: #111111;
}

/* Card background colors */
body.dark-mode .dahuk-scroll-item {
    background-color: #1a1a1a;
    color: #eee;
}

body.light-mode .dahuk-scroll-item {
    background-color: #fff;
    color: #111;
}

/* ===============================
   Responsive adjustments
=============================== */

@media (max-width: 1200px) {
    .dahuk-scroll-item {
        width: 220px;
    }
    .dahuk-scroll-item img {
        height: 120px;
    }
}

@media (max-width: 992px) {
    .dahuk-scroll-item {
        width: 180px;
    }
    .dahuk-scroll-item img {
        height: 110px;
    }
    .dahuk-scroll-title {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .dahuk-scroll-item {
        width: 160px;
    }
    .dahuk-scroll-item img {
        height: 100px;
    }
    .dahuk-scroll-title {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .dahuk-scroll-item {
        width: 140px;
    }
    .dahuk-scroll-item img {
        height: 90px;
    }
    .dahuk-scroll-title {
        font-size: 12px;
    }
    .dahuk-post-scroll-cat {
        font-size: 18px;
        padding: 4px 12px;
    }
}





/* ===================== DAHUK-3 Post Widget (FIXED OVERLAP) ===================== */
.wzed-widget, .wzed-widget * { box-sizing: border-box; }

/* Wrapper */
.wzed-widget {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 28px; /* আগের ওয়েজেড থেকে পরের ওয়েজেড আলাদা রাখতে বড় spacing */
    position: relative;
    z-index: 1;
    clear: both; /* উপরের ওয়েজেডের সাথে overlap বন্ধ করে */
    background: var(--wzed-bg, #fff);
    transition: background .3s ease, margin .3s ease;
}

/* Light/Dark background */
body.light-mode .wzed-widget { background: #fff; }
body.dark-mode .wzed-widget { background: rgba(255,255,255,.05); }

/* Category Title */
.wzed-category-title {
    display: inline-block;
    padding: 6px 20px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    border-radius: 30px;
    background: var(--wzed-cat-bg);
    margin-bottom: 14px;
    transition: color .3s ease, background .3s ease;
}
body.light-mode .wzed-category-title { color: #000; }
body.dark-mode .wzed-category-title { color: #fff; }

/* Grid */
.wzed-post-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Column */
.wzed-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* column এর ভিতরে পোস্টের spacing */
    padding: 0;
}

/* Column divider */
.wzed-column:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,.12);
}
body.dark-mode .wzed-column:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.15);
}

/* Post */
.wzed-post {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .3s ease;
}

/* Thumb */
.wzed-thumb {
    flex: 0 0 100px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    transition: background .3s ease;
}
body.dark-mode .wzed-thumb { background: #2a2a2a; }

.wzed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.wzed-post:hover .wzed-thumb img { transform: scale(1.06); }

/* Content */
.wzed-post-content { flex: 1; }
.wzed-post-title {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    transition: color .3s ease;
}
body.dark-mode .wzed-post-title { color: #fff; }

.wzed-post-date {
    font-size: 13px;
    opacity: .7;
    margin-top: 2px;
}

/* More news */
.wzed-more-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}
.wzed-more {
    padding: 5px 14px;
    font-size: 14px;
    border-radius: 20px;
    background: #e5e5e5;
    color: #000;
    text-decoration: none !important;
    transition: background .3s ease, color .3s ease, opacity .3s ease;
}
.wzed-more:hover { opacity: .85; }
body.dark-mode .wzed-more { background: #3a3a3a; color: #fff; }

/* Responsive Fixes */
@media (max-width: 991px) {
    .wzed-post-grid { flex-direction: column; }
    .wzed-column { border-right: none; }
}
@media (max-width: 576px) {
    .wzed-thumb { flex: 0 0 96px; height: 72px; }
    .wzed-post-title { font-size: 14px; }
    .wzed-column { gap: 10px; }
}





/* ======================================
   DAHUK 2 Column Widget – FINAL CSS
====================================== */

/* ---------- Widget base ---------- */
.dahuk-2col-widget{
    margin:20px 0;
    padding:15px;
    border-radius:14px;
    box-sizing:border-box;
    transition:.3s;
}

body.light-mode .dahuk-2col-widget{ background:#ffffff; }
body.dark-mode  .dahuk-2col-widget{ background:#1e1e1e; }

/* ---------- Header ---------- */
.dahuk-widget-head{ margin-bottom:14px; }

.dahuk-cat-title{
    padding:6px 18px;
    border-radius:999px;
    font-size:21px;
    font-weight:400;
    display:inline-block;
}

body.light-mode .dahuk-cat-title{ color:#111; }
body.dark-mode  .dahuk-cat-title{ color:#fff; }

/* ---------- Main layout ---------- */
.dahuk-2col-wrap{
    display:flex;
    gap:16px;
}

/* ================= LEFT COLUMN ================= */

.dahuk-left { 
    flex: 1; 
}

.dahuk-left-link{
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer; /* finger pointer দেখাবে */
}

.dahuk-left-link:hover,
.dahuk-left-link:focus,
.dahuk-left-link:visited,
.dahuk-left-link:active{
    color:inherit;
    text-decoration:none;
    outline:none;
}

/* ⚡ এখানে আর * selector নেই, finger দেখাবে */
.dahuk-left .dahuk-img{
    border-radius:10px;
    overflow:hidden;
}

.dahuk-left img{
    width:100%;
    height:auto;
    display:block;
}

.dahuk-title{
    font-size:16px;
    line-height:1.35;
    margin:6px 0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:inherit;
}

.dahuk-date{
    font-size:13px;
    opacity:.7;
}

.dahuk-excerpt{
    font-size:14px;
    line-height:1.45;
    margin-top:6px;
}

/* ================= RIGHT COLUMN ================= */

.dahuk-right{
    flex:1;
    padding-left:16px;
    border-left:1px solid rgba(0,0,0,.12);
}

body.dark-mode .dahuk-right{
    border-color:rgba(255,255,255,.12);
}

/* 🔥 IMPORTANT:
   right item is <a>, theme forces block
   so we FORCE flex with !important
*/
.dahuk-right a.dahuk-right-item{
    display:flex !important;
    flex-direction:row !important;
    gap:10px;
    align-items:flex-start;
    margin-bottom:14px;
    text-decoration:none;
    color:inherit;
}

/* Fixed image */
.dahuk-thumb{
    width:170px;
    height:70px;
    flex-shrink:0;
    overflow:hidden;
    border-radius:6px;
}

.dahuk-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Content beside image */
.dahuk-right-content{
    display:flex;
    flex-direction:column;
}

/* Title beside image */
.dahuk-right-content h4{
    font-size:15px;
    line-height:1.35;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Date under title */
.dahuk-right-content .dahuk-date{
    margin-top:4px;
    font-size:13px;
    opacity:.75;
}

/* ---------- Interaction ---------- */
.zoom img{
    transition:transform .4s ease;
}

.zoom:hover img{
    transform:scale(1.08);
}

/* ---------- More button ---------- */
.dahuk-more{
    text-align:right;
    margin-top:12px;
}

.dahuk-more-btn{
    background:#cfcfcf;
    padding:6px 16px;
    border-radius:999px;
    font-size:14px;
    text-decoration:none;
    color:#000;
}

/* ---------- Hover outline ---------- */
body.light-mode .dahuk-2col-widget:hover{
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

body.dark-mode .dahuk-2col-widget:hover{
    box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

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

/* Mobile */
@media(max-width:768px){

    .dahuk-2col-wrap{
        flex-direction:column;
    }

    .dahuk-right{
        border-left:none;
        padding-left:0;
    }

    /* stack right items */
    .dahuk-right a.dahuk-right-item{
        flex-direction:column !important;
    }

    .dahuk-thumb{
        width:100%;
        height:auto;
    }

    .dahuk-thumb img{
        width:100%;
        height:auto;
    }

    .dahuk-right-content{
        margin-top:6px;
    }
}




/* ===== CATEGORY GRID ===== */
.category-post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ডিফল্ট 2 কলাম */
    gap: 20px;
}

/* Desktop + Tablet = 2 column */
@media (max-width: 600px) {
    .category-post-grid {
        grid-template-columns: 1fr;
    }
}

/* 4K স্ক্রিনে 3 column */
@media (min-width: 2560px) {
    .category-post-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.category-post-box {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* ===== POST FLEX ===== */
.post-flex {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* ===== POST IMAGE ===== */
.post-thumb img {
    width: 140px;
    height: auto;
    display: block;
    border-radius: 8px; /* ছবির কোনা গোল */
    object-fit: cover;   /* ছবি সুন্দরভাবে ফিট হবে */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* হোভার ইফেক্ট */
.post-thumb img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Lazy load */
.post-thumb img {
    loading: lazy; /* শুধু HTML তে লাগবে <img loading="lazy"> */
}

.post-info {
    flex: 1;
}

/* ===== POST TITLE ===== */
.post-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;

    /* 2 লাইনের বেশি হলে auto clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== POST DATE ===== */
.post-date {
    font-size: 13px;
    color: #555;
    margin-top: 4px;
}

/* link hidden but clickable */
.post-link-hidden,
.post-link-hidden * {
    color: inherit !important;
    text-decoration: none !important;
    border: none !important;
}

.post-link-hidden:hover,
.post-link-hidden:hover * {
    color: inherit !important;
    text-decoration: none !important;
}

/* ===== PAGINATION BUTTON ===== */
.category-pagination .nav-links {
    display: flex;
    justify-content: center; /* space-between থেকে centered look */
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.category-pagination a,
.category-pagination span {
    padding: 10px 18px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333 !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Hover effect for pagination */
.category-pagination a:hover {
    background: #007bff;
    color: #fff !important;
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
}

/* Active page */
.category-pagination .current {
    background: #007bff;
    color: #fff !important;
    border-color: #007bff;
    pointer-events: none;
}




/* ================= single php Final ================= */

.single-inner{
    max-width:760px;
    margin:0 auto;
    padding:0 15px;
}

/* ===== Category Title ===== */
.single-category-title{
    font-size:25px;
    font-weight:700;
    margin-bottom:15px;
}

/* ===== Featured Image ===== */
.single-featured-wrap{
    max-width:800px;
    margin:0 auto 20px;
}
.single-featured-img{
    width:100%;
    height:auto;
    aspect-ratio:800/460;
    object-fit:cover;
    border-radius:8px;
}

/* ===== Post Title & Date ===== */
.single-post-title{
    font-size:30px;
    font-weight:700;
    margin:10px 0;
}
.single-post-date{
    font-size:15px;
    opacity:.8;
    margin-bottom:20px;
}

/* ===== Content ===== */
.single-post-content{
    line-height:1.8;
    text-align:justify;
    overflow-wrap:break-word;
}

/* ===== More News ===== */
.category-more-news{
    margin-top:40px;
}

.more-news-title{
    display:inline-block;
    font-size:21px;
    padding:6px 18px;
    border-radius:999px;
    background:#e0e0e0;
    color:#000;   /* 🔴 আপনি যেমন বলেছেন: কালো */
    margin-bottom:20px;
}

.more-news-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.more-news-item{
    display:flex;
    gap:10px;
    text-decoration:none;
    color:inherit;
}

.more-news-thumb img{
    width:90px;
    height:65px;
    object-fit:cover;
    border-radius:6px;
}

.more-news-text{
    font-size:15px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ================= Responsive Updates ================= */

/* ===== Desktop Font Increase for Post Content ONLY ===== */
@media (min-width:1024px){
    .single-post-content{
        font-size:20px;      /* ✅ UPDATED */
        line-height:1.95;    /* ✅ UPDATED */
    }
}

/* ===== Tablet / Mobile Adjustments ===== */
@media (max-width:1023px){
    .more-news-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:767px){
    .single-inner{
        padding:0 12px;
    }

    .single-post-content{
        font-size:16px;      /* ✅ UPDATED */
        line-height:1.7;     /* ✅ UPDATED */
        text-align:left;
    }

    .more-news-grid{
        grid-template-columns:1fr;
    }

    .more-news-item{
        gap:12px;
    }

    .more-news-thumb img{
        width:95px;
        height:70px;
    }

    .single-featured-img{
        border-radius:6px;
    }
}