/* ==================== COLOR VARIABLES ==================== */
:root {
    --link-color: #0048E0;
    --link-visited: #6B4E3A;
}
body.dark-mode {
    --link-color: #6EA8FE;
    --link-visited: #C084FC;
}
a, a:link {
    color: var(--link-color);
    text-decoration: none;
}
a:visited {
    color: var(--link-visited);
}
a:hover {
    text-decoration: underline;
}
:root {
    --color-primary: #0048E0;
    --color-primary-dark: #0035A8;
    --color-accent: #DC1E35;
    --pastel-pink: #FFD1DC;
    --pastel-blue: #B5EAD7;
    --pastel-yellow: #FFF5BA;
    --pastel-mint: #C7E9D0;
    --pastel-lavender: #E0D3FF;
    --pastel-peach: #FFDAB9;
    --pastel-coral: #FFB7B2;
    --text-dark: #2D3E50;
    --text-soft: #8B5E3C;
    --text-light: #6B4E3A;
    --text-on-primary: #FFFFFF;
    --body-bg: #FFF8F0;
    --card-bg: #FFF8F0;
    --widget-bg: #FFFDF7;
    --divider-bg: var(--pastel-yellow);
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.05);
	--card-description: #000000;
	--card-title:  #000000;
	--card-date: #000000;
/*     --border-light: var(--pastel-peach);
    --border-card: var(--pastel-mint);
    --border-radius-card: 24px; */
}
/* Dark mode variables */
body.dark-mode {
	
    --color-primary: #1E3A8A;
    --color-primary-dark: #0F2B6F;
    --color-accent: #DC1E35;
    --pastel-pink: #5C2A3A;
    --pastel-blue: #1E3A4A;
    --pastel-yellow: #5C4A1E;
    --pastel-mint: #1E4A2A;
    --pastel-lavender: #3A2A5C;
    --pastel-peach: #5C3A2A;
    --pastel-coral: #7A3A3A;
    --text-dark: #E0E0E0;
    --text-soft: #B0B0B0;
    --text-light: #D0D0D0;
    --text-on-primary: #FFFFFF;
    --body-bg: #1A1A2E;
    --card-bg: #1A1A2E;
    --widget-bg: #16213E;
    --divider-bg: #2A3A5C;
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.3);
	--card-description: #ffffff;
	--card-date: #ffffff;
	--card-title:  #ffffff;
}
/* Light mode link colors (using your existing variables) */
a, a:link {
    color: var(--color-primary, #0048E0);
    text-decoration: none;
}
a:visited {
    color: #6B4E3A; /* or var(--text-soft) */
}
a:hover {
    text-decoration: underline;
}

/* Dark mode link overrides */
body.dark-mode a,
body.dark-mode a:link {
    color: #6EA8FE; /* bright blue, readable on dark backgrounds */
}
body.dark-mode a:visited {
    color: #C084FC; /* soft purple for visited */
}
body.dark-mode a:hover {
    color: #90C8FF;
    text-decoration: underline;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 
html {
    overflow-y: scroll;           
    scrollbar-gutter: stable;     
}

body {
    margin: 0;
}
comment-section {
    margin-top: 2rem;
    border-top: 1px solid var(--pastel-peach);
    padding-top: 1rem;
}
.comment {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
}
   .section-title {
        color: var(--card-description);
    }
body {
    font-family: 'Inter', sans-serif;
    background: var(--body-bg);
    padding-top: 0;
	padding: 10px;
	margin: 10px;
}
.nutiminn-article h3 {
   margin-bottom: 1rem;
   margin-top: 2rem;
}
.nutiminn-article p {
   margin-bottom: 1rem;
}
.alignnone
{
    display: none;
}
.x_MsoNormal {
    margin:0;
	padding:0;margin-bottom: -10px;
}
.pullquote {
   margin-top: 2rem;
      margin-bottom: 1rem;
}
.strong
{
   margin-top: 2rem;
      margin-bottom: 1rem;
}
.article__image {
	    display: none;
	}
.article-single .article-content p {
    margin-bottom: 0.5rem;      /* default is often 1rem or 1.2rem – reduce this */
    line-height: 1.9;           /* optional: reduce line height (default ~1.6) */
}
/* ==================== FIXED BANNER ==================== */
.fixed-banner {
    position: fixed;
    top: 0;
    height: 50px;
    left: 0;
    width: 100%;
    background: #0048E0;
    z-index: 9999;
    border-bottom: 6px solid #DC1E35;
}
.banner-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
	z-index: -9999;
}
.logo-areaxx {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.site-logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFFFFF;
}

.search-input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 1rem;
    border-radius: 40px;
    border: none;
    background: rgba(255,255,255,0.95);
}
.clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
}
.info-aread {
    display: flex;
    gap: 1rem;
    background: white;
    padding: 0.3rem 1rem;
    border-radius: 40px;
    color: #0048E0;
    margin-right: 40px;
    margin-top: -15px;
}
.banner-contenttt {
    display: flex;
    align-items: center;
    height: 67px;
	    justify-content: space-between;

	top: 0px;
	 margin-top: 0px;
}
.search-wrapper {
    position: relative;
    width: 260px;
    margin-top: -20px;
}
.logo-area {
    display: flex;
    align-items: center;
    /* gap: 1rem; */
	   height: 67px;
	top: 0px;
	 margin-top: 0px;
}
/* ==================== MAIN CONTAINER ==================== */
.main-container {
    max-width: 1400px;
 margin: 50px auto;
 box-sizing: border-box;
}
.single-title {
   
    margin-bottom: 30px;
}
/* ==================== NORMAL ARTICLES GRID ==================== */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}
.article-card {
    background: var(--card-bg);
 /*    border-radius: var(--border-radius-card);
    border: 1px solid var(--border-card); */
    overflow: hidden;
    transition: 0.3s;
}
.art3icle-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-sm);
}
.card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 32px;
    margin-bottom: 1.5rem;
	margin:0;
}
.card-content {
    padding: 1rem;
}
.card-title {
    font-size: 1.2rem;
    margin: 0.5rem 0;
	color: var(--card-title);
}
.card-description {
    font-size: 0.9rem;
    color: var(--card-description);
}
.sort-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}
.sort-controls select {
    padding: 0.3rem 0.8rem;
    border-radius: 40px;
    border: 1px solid var(--pastel-peach);
    background: white;
}
.richtext-image{
    display: none;
}
.cs-content {
    margin: 0 0;
	
}
.top-hashtags{
	z-index: +9999;
    display: flex;
  justify-content: center;
  align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
 }

.hashtag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.5rem;
}
.hashtag {
   /*  background: #ff0000; */
   background: var(--color-accent, #DC1E35);
    padding: 0.2rem 0.7rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
	color: white;
}
.card-date {
	 color: var(--card-date);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    
    display: flex;
    justify-content: space-between;
}
.old-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #F4A261;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.3rem 0.8rem;
    border-radius: 40px;
    z-index: 2;
}
.article-date {
     
    margin-right: 1.1rem;
     
}


/* ==================== SINGLE ARTICLE PAGE ==================== */
.single-article {
    background: var(--card-bg);
	color: var(--card-description);
    border-radius: 40px;
    padding: 2rem;
    max-width: 900px;
    margin: 50px auto 0;
    border: 1px solid var(--border-card);
}
.single-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 32px;
    margin-bottom: 1.5rem;
}
.old-banner-single {
    background: #FFE0B5;
    padding: 0.8rem;
    border-radius: 40px;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: bold;
}
.article__headline {
   display: none;
}
.article-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
	    justify-content: space-between;

}
.article-content {
    line-height: 1.6;
    margin: 1.5rem 0;
    font-size: 1.05rem;
    /* white-space: pre-wrap; */
    /* color: #000000; */
}

.article-content a {
    color: var(--color-primary);
    text-decoration: underline;
}
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 1rem 0;
}

/* ==================== WIDGETS & OTHER ==================== */
.widgets-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
    justify-content: space-between;
}
.widget {
    background: var(--widget-bg);
    border-radius: 32px;
    padding: 1.5rem;
    flex: 1;
    min-width: 240px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}
.widget h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: #C87A3E;
}
.most-read-widget ul {
    list-style: none;
}
.most-read-widget li {
    border-left: 4px solid var(--pastel-coral);
    padding-left: 0.8rem;
    margin-bottom: 0.8rem;
}
.most-read-widget a {
    text-decoration: none;
    font-weight: 500;
    color: var(--text-dark);
}
.mostread-hashtags {
    margin-top: 0.3rem;
}
.hashtag-mini {
    display: inline-block;
    background: var(--pastel-lavender);
    padding: 0.1rem 0.5rem;
    border-radius: 30px;
    font-size: 0.65rem;
    margin-right: 0.3rem;
    cursor: pointer;
}
.wide-divider {
    grid-column: 1 / -1;
    background: var(--divider-bg);
    padding: 1rem;
    text-align: center;
    border-radius: 28px;
    margin: 1rem 0;
    font-weight: bold;
    color: #C87A3E;
}

 

.spinner {
    border: 4px solid var(--pastel-peach);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
    margin: 2rem auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) and (min-width: 769px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
	/* Make embedded videos responsive */
.article-content .flowplayer,
.article-content div[id^="wpfp_"],
.article-content .fp-ui {
    max-width: 100% !important;
    height: auto !important;
}
.article-content .fp-ratio {
    padding-top: 56.25% !important; /* 16:9 aspect ratio */
}
.article-content .flowplayer img.fp-splash {
    width: 100%;
    height: auto;
}
}

@media (max-width: 768px) {
    body {
        /* padding-top: 65px; */
		margin:0 0 0 0;
		padding:0;
		
    }
	.main-container {
        padding: 10px;    /* was likely 0.8rem or 1rem */
    }

    /* Add more space between grid items */
    .articles-grid {
        gap: 1.5rem;  /* increase gap between cards */
        margin: 1.5rem 0;
    }

    /* Increase card internal padding */
    .article-card .card-content {
        padding: 0.8rem 1rem;  /* more breathing room inside cards */
    }

    /* Slightly larger font for better readability (optional) */
    .card-title {
        font-size: 1.1rem;
    }
    .card-description {
        font-size: 0.95rem;
    }
    .card-date {
        font-size: 0.75rem;
    }

    /* For pinned cards, also increase spacing */
    .pinned-scroll-container .articles-top {
        gap: 1rem;  /* more space between pinned cards */
        padding: 0.5rem 0;
    }
    .pinned-section .article-top1 {
        flex: 0 0 140px;  /* slightly wider if needed */
    }

    /* Adjust banner padding if too tight */
    .fixed-banner {
        padding: 0.6rem 1rem;
    }
	.card-content {
    padding: 0;
}
	 .main-container {
		 box-sizing: border-box;
		 	 
    }
    .search-input {
        position: relative;
        top: -5px;
	
    } 

	.clear-search {
        
        top: 10px;
    }
    .fixed-banner {
        padding: 0.4rem 1rem;
    }
    .banner-content {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .info-area {
        display: none;
    }
	.search-wrapper {
    position: relative;
    width: 260px;
    margin-top: -2px;
}
.logo-area {
    display: flex;
    align-items: center;
    gap: 1rem;margin-top: -24px;
}
	.single-article {
       margin-top: -24px;
	   box-sizing: border-box;
	    max-width: 1400px;
    margin: 20px auto;
    padding: 10px;
    
    }
    .articles-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .widgets-row {
        flex-direction: column;
    }

   
	
    /* Remove left/right margins from articles grid */
    .articles-grid {
        gap: 0.8rem;
        margin: 1rem 0;
    }
    /* Make article cards full width (they already are 1fr, but ensure no extra margin) */
    .article-card {
        max-width: 100%;
        margin: 0;
    }
	.more-card {
        max-width: 100%;
        margin: 0;
    }
    /* Reduce or remove padding inside cards */
    .card-content {
        padding: 0.5rem;
    }
    /* Pinned section: use full width, less gap */
    .pinned-scroll-container .articles-top {
        gap: 0.5rem;
        padding: 0.2rem 0;
    }
    .pinned-section .article-top1 {
        flex: 0 0 140px;   /* adjust width as needed */
    }
    /* Remove side margins from section titles */
    .section-title {
        margin-left: 0;
        margin-right: 0;
    }
    /* Make the banner use full width with minimal padding */
    .fixed-banner {
        padding: 0.4rem 0.8rem;
    }
    .banner-content {
        gap: 0.5rem;
		z-index: -9999;
    }
	.single-title {
     font-size: 0.65rem;
    margin-top: -20px;
	margin-bottom: 10px;
}
    /* If you have any side margins on body or html, reset them */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
	 

}