/* =====================================================
   AGYATRAAZ THEME - LIGHT & PREMIUM READING VERSION
   Main Stylesheet
   Version : 2.0.0 (Optimized for Readability & Hindi Content)
====================================================== */

/* Google Font Import (Mukta for clean Hindi & English text) */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700&display=swap');

/* ==========================
   CSS RESET
========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family: 'Mukta', Arial, sans-serif;
    background:var(--background);
    color:var(--text);
    line-height:1.8;
    overflow-x:hidden;
    transition: background 0.3s ease, color 0.3s ease;
}
img{
    max-width:100%;
    height:auto;
    display:block;
}
a{
    color:inherit;
    text-decoration:none;
}
ul{
    list-style:none;
}
button{
    cursor:pointer;
    border:none;
    outline:none;
    font-family: 'Mukta', sans-serif;
}
input,
textarea{
    outline:none;
    font-family: 'Mukta', sans-serif;
}

/* ==========================
   CONTAINER
========================== */
.container{
    width:min(1280px,94%);
    margin:auto;
}

/* ==========================
   ROOT COLORS (LIGHT THEME)
========================== */
:root{
    /* Primary Blue - Instills trust for finance and calm for psychology */
    --primary:#2563eb; 
    --secondary:#0ea5e9;
    
    /* Clean, distraction-free backgrounds */
    --background:#f8fafc; /* Very soft cool white for body */
    --card:#ffffff;       /* Pure white for cards to pop out */
    --border:#e2e8f0;     /* Elegant light border */
    
    /* Readability optimized text colors */
    --text:#0f172a;       /* Deep slate for headings (reduces eye strain) */
    --paragraph:#334155;  /* Soft slate gray for long reading */
}

h1,h2,h3,h4,h5,h6{
    color:var(--text);
    font-weight:700;
    letter-spacing: -0.3px;
}
p{
    color:var(--paragraph);
}

/* ====================================
   HEADER
==================================== */
#site-header{
    background:rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    position:sticky;
    top:0;
    z-index:999;
    border-bottom:1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.header-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:75px;
}
.header-actions{
	display:flex;
	align-items:center;
	gap:15px;
}
.site-logo a{
    font-size:30px;
    font-weight:700;
    color:var(--text);
    letter-spacing: -0.5px;
}
.primary-menu{
    display:flex;
    gap:32px;
}
.primary-menu li a{
    color:#475569;
    font-size:17px;
    font-weight:600;
    transition:.3s;
}
.primary-menu li a:hover{
    color:var(--primary);
}

@media(max-width:768px){
	.site-logo a{ font-size:24px; }
}

/*=========================================
    LAYOUT (Updated for more breathing room)
=========================================*/
.content-wrapper{
    display:grid;
    grid-template-columns:2.2fr 1fr; /* Main content is slightly wider now */
    gap:40px;
    margin:50px 0;
}
.main-content, .sidebar{
    min-width:0;
}

/*=========================================
    POST CARD
=========================================*/
.post-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    margin-bottom:40px;
    transition:0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.post-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(0,0,0,.06);
    border-color: #cbd5e1;
}
.post-thumbnail img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}
.post-content{
    padding:30px;
}
.post-meta{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
    font-size:15px;
    color:var(--paragraph);
    font-weight: 500;
}
.post-title{
    margin-bottom:15px;
    font-size:32px;
    line-height:1.35;
}
.post-title a{
    color:var(--text);
}
.post-title a:hover{
    color:var(--primary);
}
.post-excerpt{
    margin-bottom:25px;
    color:var(--paragraph);
    font-size:17px;
}
.read-more{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:12px 28px;
    border-radius:12px;
    font-weight:600;
    transition:.3s;
}
.read-more:hover{
    background:#1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/*=========================================
    SIDEBAR
=========================================*/
.widget{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px;
    margin-bottom:30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.widget-title{
    margin-bottom:20px;
    font-size:22px;
    color:var(--text);
    border-bottom: 2px solid var(--background);
    padding-bottom: 12px;
}
.widget ul li{
    margin-bottom:14px;
    color:var(--paragraph);
    font-size: 16px;
}
.widget ul li:last-child{
    margin-bottom:0;
}
.widget a{
    transition:.3s;
}
.widget a:hover{
    color:var(--primary);
    padding-left: 4px; /* subtle hover effect */
}

/*=========================================
    HERO SECTION
=========================================*/
.hero-section{ margin-bottom:50px; }
.hero-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.hero-image img{
    width:100%;
    height:500px;
    object-fit:cover;
}
.hero-content{ padding:40px; }
.hero-category{ margin-bottom:15px; }
.hero-category a{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:8px 20px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
}
.hero-title{
    font-size:46px;
    line-height:1.2;
    margin-bottom:20px;
}
.hero-title a{ color:var(--text); }
.hero-title a:hover{ color:var(--primary); }
.hero-excerpt{
    font-size:19px;
    margin-bottom:30px;
    color:var(--paragraph);
}
.hero-button{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:15px 32px;
    border-radius:12px;
    font-weight:700;
    transition:.3s;
}
.hero-button:hover{ opacity: 0.9; }

/*=========================================
    HERO GRID
=========================================*/
.hero-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
}
.hero-left, .hero-right{ min-width:0; }
.trending-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:25px;
    transition:.3s;
}
.trending-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.06);
}
.trending-thumb img{
    width:100%;
    height:180px;
    object-fit:cover;
}
.trending-content{ padding:20px; }
.trending-content h3{
    font-size:19px;
    margin-bottom:10px;
    line-height:1.4;
}
.trending-content a{ color:var(--text); }
.trending-content a:hover{ color:var(--primary); }
.trending-content span{
    font-size:14px;
    color:var(--paragraph);
}

/*=========================================
    SECTION TITLE
=========================================*/
.section-title{ margin:60px 0 30px; }
.section-title h2{
    font-size:36px;
    font-weight:700;
    color:var(--text);
}

/*=========================================
    LATEST POSTS
=========================================*/
.latest-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.latest-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    transition:.3s;
}
.latest-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.06);
}
.latest-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}
.latest-content{ padding:25px; }
.latest-category{ margin-bottom:12px; }
.latest-category a{
    color:var(--primary);
    font-size:14px;
    font-weight:700;
}
.latest-content h3{
    font-size:24px;
    line-height:1.4;
    margin-bottom:14px;
}
.latest-content h3 a{ color:var(--text); }
.latest-content h3 a:hover{ color:var(--primary); }
.latest-content p{
    color:var(--paragraph);
    font-size:16px;
}

/*=========================================
    CATEGORY SECTION
=========================================*/
.category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-bottom:60px;
}
.category-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:35px;
    transition:.3s;
    text-align:center;
}
.category-card:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
    box-shadow:0 12px 25px rgba(37, 99, 235, 0.08);
}
.category-card h3{
    font-size:26px;
    margin-bottom:10px;
    color:var(--text);
}
.category-card span{
    color:var(--paragraph);
    font-size:16px;
}

/*=========================================
    POPULAR POSTS
=========================================*/
.popular-posts{ margin:70px 0; }
.popular-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.popular-card{
    background:var(--card);
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border);
    transition:.3s;
}
.popular-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.06);
}
.popular-thumb img{
    width:100%;
    height:240px;
    object-fit:cover;
}
.popular-content{ padding:25px; }
.popular-meta{
    font-size:14px;
    margin-bottom:12px;
    color:var(--paragraph);
}
.popular-content h3{
    font-size:22px;
    line-height:1.45;
}
.popular-content h3 a{ color:var(--text); }
.popular-content h3 a:hover{ color:var(--primary); }

/*=========================================
    NEWSLETTER
=========================================*/
.newsletter-section{ margin:80px 0; }
.newsletter-box{
    background:linear-gradient(135deg, #2563eb, #0ea5e9);
    padding:70px 40px;
    border-radius:24px;
    text-align:center;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
}
.newsletter-box h2{
    font-size:40px;
    color:#fff;
    margin-bottom:15px;
}
.newsletter-box p{
    max-width:700px;
    margin:auto;
    color:#f1f8ff;
    font-size:19px;
    margin-bottom:35px;
}
.newsletter-form{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
.newsletter-form input{
    width:420px;
    max-width:100%;
    padding:18px 20px;
    border:none;
    border-radius:12px;
    font-size:17px;
    color: var(--text);
}
.newsletter-form button{
    padding:18px 32px;
    border:none;
    border-radius:12px;
    background:#0f172a;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}
.newsletter-form button:hover{
    transform:translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/*=========================================
    FOOTER
=========================================*/
.site-footer{
    margin-top:80px;
    background:var(--card);
    color:var(--paragraph);
    border-top: 1px solid var(--border);
}
.footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:50px;
    padding:80px 0;
}
.footer-widget h3{
    margin-bottom:22px;
    font-size:24px;
    color:var(--text);
}
.footer-widget p{ line-height:1.8; font-size: 16px; }
.footer-widget ul{
    list-style:none;
    padding:0;
}
.footer-widget li{ margin-bottom:14px; }
.footer-widget a{
    color:var(--paragraph);
    transition:.3s;
    font-size: 16px;
}
.footer-widget a:hover{ color:var(--primary); }
.social-links li{
    display:inline-block;
    margin-right:15px;
}
.footer-bottom{
    border-top:1px solid var(--border);
    padding:30px 0;
    text-align:center;
    font-size:15px;
    color: var(--paragraph);
}

/*=========================================
    READING PROGRESS BAR
=========================================*/
#reading-progress{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:5px;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    z-index:99999;
    transition:width .1s linear;
}

/*=========================================
    POST META & AUTHOR BOX
=========================================*/
.post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
    margin:20px 0 30px;
    font-size:16px;
    color:var(--paragraph);
}
.post-meta span{
    display:flex;
    align-items:center;
    gap:8px;
}
.author-box{
    display:flex;
    align-items:flex-start;
    gap:30px;
    margin:70px 0;
    padding:40px;
    background:var(--background);
    border:1px solid var(--border);
    border-radius:20px;
}
.author-avatar img{
    border-radius:50%;
    display:block;
    width: 100px;
    height: 100px;
}
.author-info{ flex:1; }
.author-info h3{
    font-size:26px;
    margin-bottom:12px;
    color:var(--text);
}
.author-info p{
    margin-bottom:18px;
    font-size: 17px;
    color:var(--paragraph);
}
.author-info a{
    font-weight:700;
    color:var(--primary);
}

/*=========================================
    RELATED POSTS
=========================================*/
.related-posts{ margin:70px 0; }
.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.related-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    transition:.3s;
}
.related-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.06);
}
.related-thumb img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}
.related-content{ padding:25px; }
.related-content h3{
    font-size:22px;
    line-height:1.4;
}
.related-content a{ color:var(--text); }
.related-content a:hover{ color:var(--primary); }

/*=========================================
    POST NAVIGATION
=========================================*/
.post-navigation{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin:70px 0;
}
.post-navigation a{
    display:block;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px;
    transition:.3s;
}
.post-navigation a:hover{
    border-color:var(--primary);
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.04);
}
.nav-label{
    display:block;
    margin-bottom:12px;
    color:var(--primary);
    font-size:15px;
    font-weight:700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.post-navigation h3{
    color:var(--text);
    font-size:22px;
    line-height:1.5;
}

/*=========================================
    SINGLE CONTENT LAYOUT (PREMIUM READING)
=========================================*/
.single-content-wrapper{
	display:grid;
	grid-template-columns: minmax(0, 2.7fr) 1fr; /* Much wider reading area */
	gap:50px;
	align-items:start;
	margin:50px 0;
}
.single-sidebar{
	position:sticky;
	top:110px;
}
.entry-content{
	min-width:0;
}
.entry-content img{
	max-width:100%;
	height:auto;
	border-radius:16px; /* Softer edges for images */
    margin: 35px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.entry-content h2,
.entry-content h3,
.entry-content h4{
	margin:50px 0 25px;
	line-height:1.4;
    color: var(--text);
}
.entry-content p{
	margin-bottom:28px;
	line-height:1.95;
    font-size: 19px; /* Perfect size for reading long articles */
    color: var(--paragraph);
}
.entry-content ul, 
.entry-content ol {
    margin-bottom: 28px;
    padding-left: 24px;
    font-size: 19px;
    line-height: 1.95;
    color: var(--paragraph);
}
.entry-content li {
    margin-bottom: 12px;
}

/*=========================================
    SHARE BUTTONS
=========================================*/
.share-buttons{
    margin:60px 0;
    padding:35px;
    background:var(--background);
    border:1px solid var(--border);
    border-radius:20px;
}
.share-buttons h3{
    margin-bottom:25px;
    font-size:26px;
    color: var(--text);
}
.share-links{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}
.share-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 26px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    font-size: 16px;
    color:#fff;
    transition:.3s;
}
.share-links a:hover{
    transform:translateY(-4px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.share-whatsapp{ background:#25D366; }
.share-facebook{ background:#1877F2; }
.share-twitter{ background:#1da1f2; }
.share-telegram{ background:#229ED9; }

/*=========================================
    POST VIEWS & BREADCRUMB
=========================================*/
.post-views{
    display:flex;
    align-items:center;
    gap:8px;
}
.agyatraaz-breadcrumb{
    margin-bottom:30px;
    font-size:15px;
    color:var(--paragraph);
    font-weight: 500;
}
.agyatraaz-breadcrumb a{
    color:var(--primary);
    text-decoration:none;
}
.agyatraaz-breadcrumb span{
    margin:0 10px;
    color:var(--border);
}

/*=========================================
    FLOATING SHARE
=========================================*/
.floating-share{
    position:fixed;
    left:25px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:999;
}
.floating-share a{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:16px;
    color:#fff;
    transition:.3s;
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}
.floating-share a:hover{
    transform:scale(1.1) translateY(-2px);
}
.floating-share .share-whatsapp{ background:#25D366; }
.floating-share .share-facebook{ background:#1877F2; }
.floating-share .share-twitter{ background:#1da1f2; }

/*=========================================
    TOGGLES & SEARCH
=========================================*/
.dark-mode-toggle{
	cursor:pointer;
	padding:12px 16px;
	border:1px solid var(--border);
	border-radius:10px;
	font-size:18px;
	background:var(--background);
	color:var(--text);
    transition: 0.3s;
}
.dark-mode-toggle:hover{
    background: var(--border);
}
.copy-link-button{
    margin:25px 0;
    padding:14px 24px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    font-size: 16px;
    transition:.3s;
}
.copy-link-button:hover{
    background:#1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.live-search-wrapper{
	position:relative;
	margin-left:25px;
}
#agyatraaz-live-search{
	padding:12px 18px;
	border:1px solid var(--border);
	border-radius:10px;
	width:240px;
    background: var(--background);
    color: var(--text);
    font-size: 15px;
}
#agyatraaz-search-results{
	position:absolute;
	top:calc(100% + 10px);
	left:0;
	right:0;
	background:var(--card);
	border:1px solid var(--border);
	display:none;
	z-index:999;
	border-radius:12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/*=========================================
    MOBILE MENU BUTTON & RESPONSIVENESS 
=========================================*/
.menu-toggle{
	display:none;
	width:48px;
	height:48px;
	background:transparent;
	border:none;
	padding:0;
	cursor:pointer;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:6px;
}
.menu-toggle span{
	display:block;
	width:26px;
	height:3px;
	background:var(--text); 
	border-radius:50px;
	transition:.3s;
}
.custom-logo{
    max-height:75px;
    width:auto;
    display:block;
}
.site-logo{
    display:flex;
    align-items:center;
}

@media(max-width:992px){
    .content-wrapper, .single-content-wrapper, .hero-grid {
        grid-template-columns: 1fr;
    }
    .latest-grid, .category-grid, .popular-grid, .related-grid, .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:768px){
    .latest-grid, .category-grid, .popular-grid, .related-grid, .footer-grid {
        grid-template-columns: 1fr;
    }
    .primary-menu { display: none; } /* Hide menu on mobile, assuming you have JS for it */
    .menu-toggle { display: flex; }
    .entry-content p { font-size: 18px; } /* Slightly smaller text for mobile */
    .hero-title { font-size: 36px; }
}