/*
Theme Name:   Network News BD
Theme URI:    https://networknews.bd
Author:       RJ Tanjid
Author URI:   https://rjtanjid24.github.io/me/
Description:  A Super Fast & Clean News Portal Theme. Optimized for Bangla content and reading speed.
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  nnewsbd
Tags:         news, blog, bangla, magazine, dark-mode, responsive
*/

/* ==========================================================================
   1. Typography & Fonts
   ========================================================================== */

/* SolaimanLipi Font Setup */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('assets/fonts/SolaimanLipi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improves loading performance */
}

body {
    font-family: 'SolaimanLipi', 'Hind Siliguri', sans-serif;
    line-height: 1.6;
}

/* Force Bangla Font on all elements */
h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, input, button, textarea {
    font-family: 'SolaimanLipi', 'Hind Siliguri', sans-serif !important;
}

/* ==========================================================================
   2. Color Variables (Light & Dark Mode)
   ========================================================================== */

:root {
    /* Light Mode (Default) */
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --secondary-bg: #f3f4f6;
    --border-color: #e5e7eb;
    --card-bg: #ffffff;
    --heading-color: #111827;
    --primary-color: #dc2626; /* Red Accent */
    --link-color: #2563eb;
}

/* Dark Mode Palette (Slate & Navy) */
.dark {
    --bg-color: #0f172a;      /* Slate 900 */
    --text-color: #cbd5e1;    /* Slate 300 */
    --secondary-bg: #1e293b;  /* Slate 800 */
    --border-color: #334155;  /* Slate 700 */
    --card-bg: #1e293b;
    --heading-color: #f8fafc; /* Slate 50 */
    --link-color: #60a5fa;
}

/* ==========================================================================
   3. Global Styles
   ========================================================================== */

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

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

/* Tailwind Utilities Fix for Scrollbars */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   4. Tailwind Overrides for Dark Mode
   ========================================================================== */
/* These map Tailwind classes to our CSS variables for dynamic switching */

.bg-white { background-color: var(--card-bg) !important; }
.bg-gray-50, .bg-gray-100 { background-color: var(--secondary-bg) !important; }
.text-gray-800, .text-gray-900 { color: var(--heading-color) !important; }
.text-gray-600, .text-gray-500 { color: var(--text-color) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--border-color) !important; }

/* ==========================================================================
   5. WordPress Core Standards (Essential for Client Delivery)
   ========================================================================== */
/* Without these, images in the Post Editor will look broken */

/* Alignments */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 20px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }

/* Captions */
.wp-caption { max-width: 100%; background: var(--secondary-bg); padding: 5px; border-radius: 4px; }
.wp-caption img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.wp-caption-text { text-align: center; font-size: 14px; margin-top: 5px; color: var(--text-color); }

/* Screen Reader Text */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%);
    clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}