/*!
Theme Name: moralstorytheme
Theme URI: http://underscores.me/
Author: SeoToolKing
Author URI: http://seotoolking.com
Description: custom theme for moralstory
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: moralstory-in
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
 
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:#f5f4f0;color:#111827;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit}
button{border:0;background:none;cursor:pointer}
:root{
  --brand:#1c3a6e;
  --brand-2:#2563a8;
  --brand-pale:#e8f0fb;
  --accent:#d97706;
  --accent-pale:#fef3c7;
  --surface:#f5f4f0;
  --white:#fff;
  --text-1:#111827;
  --text-2:#4b5563;
  --text-3:#8b95a5;
  --border:#e5e7eb;
  --border-2:#d1d5db;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --shadow:0 1px 4px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.07);
  --ff-serif:'Noto Serif Devanagari',Georgia,serif;
  --ff-body:'DM Sans',system-ui,sans-serif;
  --max:1180px;
}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(.875rem,4vw,2rem)}
.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}
.skip-link{position:absolute;top:-999px;left:1rem;z-index:999;background:var(--brand);color:#fff;padding:.55rem 1rem;border-radius:0 0 var(--r-sm) var(--r-sm);font-size:.875rem;font-weight:700}
.skip-link:focus{top:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .wrap{position:relative}
.nav-inner{display:flex;align-items:center;gap:1.25rem;height:60px}
.nav-logo{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.nav-logo-mark{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-family:var(--ff-serif);font-size:1rem;font-weight:700}
.nav-logo-name{font-size:.9375rem;font-weight:700;color:var(--brand)}
.nav-logo-tag{display:block;font-size:.625rem;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;flex:1;min-width:0}
.nav-item{height:60px}
.nav-top{display:flex;align-items:center;height:60px;padding:0 .7rem;border-bottom:2px solid transparent;color:var(--text-2);font-size:.8125rem;font-weight:700;white-space:nowrap;transition:color .15s,border-color .15s}
.nav-top:hover,.nav-top[aria-current],.nav-item:focus-within>.nav-top,.nav-item:hover>.nav-top{color:var(--brand);border-color:var(--brand)}
.nav-top::after{content:"";width:0;height:0;margin-left:.35rem;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.55}
.nav-item>a.nav-top:not([aria-haspopup])::after{display:none}
.mega-menu{position:absolute;left:clamp(.875rem,4vw,2rem);right:clamp(.875rem,4vw,2rem);top:60px;display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;padding:1.25rem;background:#fff;border:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:0 18px 45px rgba(17,24,39,.14);z-index:110}
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{display:grid}
.mega-col{display:flex;flex-direction:column;gap:.35rem}
.mega-title{margin-bottom:.25rem;color:var(--brand);font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.mega-link{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.42rem .5rem;border-radius:var(--r-sm);color:var(--text-2);font-family:var(--ff-serif);font-size:.8425rem;line-height:1.35}
.mega-link:hover{background:var(--brand-pale);color:var(--brand)}
.mega-link.featured{background:var(--accent-pale);color:#92400e;font-weight:700}
.nav-search-btn{display:flex;align-items:center;gap:.5rem;margin-left:auto;padding:.375rem .875rem;border:1px solid var(--border-2);border-radius:2rem;background:var(--surface);color:var(--text-3);font-size:.8125rem;transition:all .15s}
.nav-search-btn:hover{background:#fff;border-color:var(--brand-2);color:var(--brand)}
.nav-search-btn svg{width:15px;height:15px}
.nav-menu-btn{display:none;color:var(--text-2);padding:.375rem;border-radius:var(--r-sm)}
.nav-menu-btn svg{width:22px;height:22px}
.mobile-nav{display:none;position:fixed;inset:0;z-index:200;background:rgba(17,24,39,.52)}
.mobile-nav:target{display:flex}
.mobile-nav-panel{width:min(360px,88vw);height:100%;overflow-y:auto;background:#fff;padding:1.5rem}
.mobile-nav-close{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.mobile-nav-close span{font-weight:700;color:var(--text-1)}
.mobile-nav-close a{font-size:1.5rem;color:var(--text-3)}
.mobile-nav-links{display:flex;flex-direction:column;gap:.375rem}
.mobile-nav-links a{padding:.65rem .75rem;border-radius:var(--r-sm);color:var(--text-2);font-size:.9375rem;font-weight:600}
.mobile-nav-links a:hover{background:var(--brand-pale);color:var(--brand)}
.mobile-nav-links details{border:1px solid var(--border);border-radius:var(--r-md);background:#fff}
.mobile-nav-links summary{padding:.65rem .75rem;color:var(--text-1);font-weight:700;cursor:pointer}
.mobile-sub-links{display:flex;flex-direction:column;padding:0 .5rem .5rem}
.mobile-sub-links a{padding:.45rem .625rem;font-size:.875rem}
.breadcrumb-wrap{background:#fff;border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .375rem;padding:.625rem 0;color:var(--text-3);font-size:.8125rem}
.breadcrumb a{color:var(--brand-2)}
.breadcrumb a:hover{text-decoration:underline}
.post-hero{background:var(--brand);color:#fff}
.post-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2.5rem;align-items:center;padding:clamp(2rem,5vw,3.75rem) 0}
.post-badge{display:inline-flex;align-items:center;gap:.375rem;margin-bottom:.875rem;padding:.25rem .75rem;border-radius:2rem;background:rgba(255,255,255,.14);color:rgba(255,255,255,.86);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.post-badge span{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.post-hero h1{max-width:16ch;margin-bottom:.875rem;font-family:var(--ff-serif);font-size:clamp(1.85rem,4vw,3rem);line-height:1.18;font-weight:700}
.post-dek{max-width:62ch;color:rgba(255,255,255,.74);font-family:var(--ff-serif);font-size:1rem;line-height:1.75}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1.25rem;color:rgba(255,255,255,.72);font-size:.8125rem}
.post-meta strong{color:#fff}
.hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.18)}
.story-art{min-height:260px;display:grid;place-items:center;background:linear-gradient(145deg,#fef3c7 0%,#dbeafe 54%,#f8fafc 100%);position:relative;color:var(--brand)}
.story-art::before{content:"";position:absolute;inset:22px;border:1px solid rgba(28,58,110,.14);border-radius:var(--r-md)}
.story-art-symbol{position:relative;display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:#fff;box-shadow:0 12px 30px rgba(28,58,110,.14);font-size:4rem}
.hero-card-caption{padding:1rem 1.125rem;background:#fff;color:var(--text-2);font-family:var(--ff-serif);font-size:.875rem}
.article-shell{padding:2rem 0 3rem}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start}
.article-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.article-content{max-width:760px;margin-inline:auto;padding:clamp(1.25rem,4vw,2.25rem)}
.quick-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:1.75rem;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-md);background:var(--border)}
.summary-item{background:#fbfbfa;padding:.875rem}
.summary-label{font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.summary-value{margin-top:.25rem;font-family:var(--ff-serif);font-size:.9375rem;font-weight:700;color:var(--text-1)}
.article-content p,.article-content li{font-family:var(--ff-serif);font-size:1.0625rem;line-height:1.9;color:var(--text-2)}
.article-content p{margin-bottom:1.125rem}
.article-content h2{margin:2rem 0 .875rem;font-family:var(--ff-serif);font-size:clamp(1.25rem,2.4vw,1.625rem);line-height:1.35;color:var(--text-1)}
.article-content h3{margin:1.5rem 0 .625rem;font-family:var(--ff-serif);font-size:1.125rem;color:var(--text-1)}
.article-content ul{display:flex;flex-direction:column;gap:.625rem;margin:0 0 1.25rem 1.25rem;list-style:disc}
.lead{font-size:1.1875rem!important;line-height:1.9!important;color:var(--text-1)!important}
.moral-box{margin:2rem 0;padding:1.25rem 1.375rem;border:1px solid rgba(217,119,6,.24);border-radius:var(--r-lg);background:var(--accent-pale)}
.moral-box strong{display:block;margin-bottom:.375rem;color:#92400e;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
.moral-box p{margin:0;color:#3f2f1d}
.toc{display:flex;flex-direction:column;gap:.125rem}
.toc-title{margin-bottom:.375rem;font-weight:700;color:var(--text-1)}
.toc a{display:block;padding:.45rem 0;border-bottom:1px solid var(--border);color:var(--brand-2);font-family:var(--ff-serif);font-size:.9375rem}
.toc a:last-child{border-bottom:0}
.toc a:hover{text-decoration:underline}
.post-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.share-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.share-row span{font-size:.8125rem;color:var(--text-3);font-weight:700}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--brand);background:#fff;font-size:.8125rem;font-weight:700}
.share-btn:hover{background:var(--brand-pale);border-color:var(--brand-2)}
.next-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--brand-2);font-size:.875rem;font-weight:700}
.sidebar{position:sticky;top:76px;display:flex;flex-direction:column;gap:1rem}
.widget{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.toc-widget{border-top:4px solid var(--accent)}
.toc-widget .widget-body{padding:1.125rem}
.widget-head{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--brand);color:#fff}
.widget-head-title{font-size:.8125rem;font-weight:700}
.widget-body{padding:1rem}
.author-card{display:flex;gap:.875rem;align-items:flex-start}
.author-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--brand-pale);color:var(--brand);font-family:var(--ff-serif);font-weight:700}
.author-name{font-weight:700;color:var(--text-1)}
.author-bio{margin-top:.25rem;font-family:var(--ff-serif);font-size:.8125rem;line-height:1.65;color:var(--text-2)}
.side-list{display:flex;flex-direction:column;gap:1px;overflow:hidden;border-radius:var(--r-md);background:var(--border)}
.side-link{display:flex;gap:.75rem;background:#fff;padding:.75rem;transition:background .12s}
.side-link:hover{background:var(--brand-pale)}
.side-icon{flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface)}
.side-title{font-family:var(--ff-serif);font-size:.875rem;font-weight:700;line-height:1.4;color:var(--text-1)}
.side-meta{margin-top:.125rem;color:var(--text-3);font-size:.6875rem}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.4375rem}
.tag{padding:.3125rem .75rem;border:1px solid var(--border-2);border-radius:2rem;background:var(--surface);color:var(--text-2);font-family:var(--ff-serif);font-size:.75rem;font-weight:600}
.tag:hover{background:var(--brand-pale);border-color:var(--brand-2);color:var(--brand)}
.newsletter{background:linear-gradient(160deg,var(--brand-pale),var(--accent-pale));border-color:#e0ddd4}
.nl-title{font-weight:700;color:var(--text-1)}
.nl-desc{margin:.25rem 0 .875rem;font-family:var(--ff-serif);font-size:.8125rem;color:var(--text-2);line-height:1.6}
.nl-form{display:flex;flex-direction:column;gap:.5rem}
.nl-input{width:100%;padding:.5625rem .875rem;border:1px solid var(--border-2);border-radius:var(--r-sm);background:#fff;color:var(--text-1);outline:none}
.nl-input:focus{border-color:var(--brand-2)}
.nl-btn{padding:.6rem;border-radius:var(--r-sm);background:var(--brand);color:#fff;font-weight:700}
.nl-btn:hover{background:var(--brand-2)}
.related-section{margin-top:2rem}
.related-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.related-head h2{font-size:1.125rem;color:var(--text-1)}
.related-head a{color:var(--brand-2);font-size:.875rem;font-weight:700}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.related-card{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.related-thumb{height:118px;display:grid;place-items:center;background:linear-gradient(135deg,#e8f0fb,#fef3c7);font-size:2.25rem}
.related-body{padding:.875rem}
.related-title{font-family:var(--ff-serif);font-size:.9375rem;line-height:1.45;font-weight:700;color:var(--text-1)}
.related-meta{margin-top:.35rem;color:var(--text-3);font-size:.6875rem}
.site-footer{margin-top:3rem;background:var(--brand)}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding:clamp(2rem,5vw,3rem) 0}
.footer-brand-mark{width:fit-content;height:34px;margin-bottom:.75rem;border-radius:9px;background:rgba(255,255,255,.15);display:grid;place-items:center;color:#fff;font-family:var(--ff-serif);font-weight:700}
.footer-brand-name{margin-bottom:.625rem;color:#fff;font-weight:700}
.footer-brand-desc{font-family:var(--ff-serif);font-size:.8125rem;line-height:1.65;color:rgba(255,255,255,.62)}
.footer-col-title{margin-bottom:.875rem;color:rgba(255,255,255,.55);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.footer-nav{display:flex;flex-direction:column;gap:.5rem}
.footer-nav a{font-family:var(--ff-serif);font-size:.8125rem;color:rgba(255,255,255,.68)}
.footer-nav a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1.125rem 0;border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom p,.footer-bottom a{color:rgba(255,255,255,.42);font-size:.75rem}
.footer-bottom nav{display:flex;gap:1rem}
 .pagination-wrap{
    margin-top:40px;
    text-align:center;
}

.pagination-wrap .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    padding:0 14px;
    margin:0 5px;
    border-radius:12px;
    background:#f3f3f3;
    color:#111;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.pagination-wrap .page-numbers:hover{
    background:#111;
    color:#fff;
}

.pagination-wrap .current{
    background:#111;
    color:#fff;
}
 
.nav-logo img , .flogo{
  height: 50px;width:auto;
}
.featured-thumb{
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:16px;
    display:block;
}
/* -- HERO -- */
  .hero {
    background: var(--brand);
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 5vw, 3rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
    max-width: 1200px; margin: 0 auto;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
    letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 1.25rem;
  }
  .hero-eyebrow span { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
  .hero h1 {
    font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
    color: white; line-height: 1.15; margin-bottom: 1rem; font-weight: 800;
  }
  .hero h1 em { color: #fbbf24; font-style: normal; }
  .hero-desc { font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 2rem; font-family: var(--font-hindi); }

  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: white; font-weight: 600;
    padding: 12px 24px; border-radius: 10px; text-decoration: none; font-size: 15px;
    transition: all 0.2s; border: none; cursor: pointer;
  }
  .btn-primary:hover { background: #b45309; transform: translateY(-1px); }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.1); color: white; font-weight: 500;
    padding: 12px 24px; border-radius: 10px; text-decoration: none; font-size: 15px;
    border: 1px solid rgba(255,255,255,0.25); transition: all 0.2s;
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.18); }

  .hero-visual { display: flex; flex-direction: column; gap: 12px; }
  .hero-stat-card {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md); padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
  }
  .hero-stat-icon { font-size: 24px; }
  .hero-stat-num { font-size: 22px; font-weight: 700; color: white; line-height: 1; }
  .hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }

  /* -- WRAPPER -- */
  .wrapper { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2.5rem); }

  /* -- CATEGORIES -- */
  .section { padding: clamp(2rem, 5vw, 3.5rem) 0; }
  .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
  .section-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
  .section-title span { color: var(--brand-mid); }
  .see-all { font-size: 14px; color: var(--brand-mid); text-decoration: none; font-weight: 500; }
  .see-all:hover { text-decoration: underline; }

  .categories-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
  }
  .cat-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 18px 16px;
    text-decoration: none; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: all 0.2s; box-shadow: var(--shadow-card);
  }
  .cat-card:hover { border-color: var(--brand-mid); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
  .cat-icon { font-size: 28px; line-height: 1; }
  .cat-label { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: var(--font-hindi); line-height: 1.3; }
  .cat-count { font-size: 11px; color: var(--text-muted); }

  /* -- STORY CARDS -- */
  .stories-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
  }
  .story-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    text-decoration: none; display: flex; flex-direction: column;
    transition: all 0.22s; box-shadow: var(--shadow-card);
  }
  .story-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

  .story-thumb {
    background: linear-gradient(135deg, var(--brand-light) 0%, #dde8f8 100%);
    height: 160px; display: flex; align-items: center; justify-content: center;
    font-size: 56px; position: relative; overflow: hidden;
  }
  .story-thumb::before {
    content: ''; position: absolute; inset: 0;
    background: var(--brand); opacity: 0.05;
  }
  .story-tag {
    position: absolute; top: 10px; left: 10px;
    background: var(--brand); color: white;
    font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
  }

  .story-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
  .story-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .story-category { font-size: 11px; font-weight: 600; color: var(--brand-mid); text-transform: uppercase; letter-spacing: 0.5px; }
  .story-dot { width: 3px; height: 3px; background: var(--text-muted); border-radius: 50%; }
  .story-read-time { font-size: 11px; color: var(--text-muted); }
  .story-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 8px; font-family: var(--font-hindi); }
  .story-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.6; flex: 1; font-family: var(--font-hindi); }
  .story-footer { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
  .story-date { font-size: 11px; color: var(--text-muted); }
  .story-arrow { font-size: 16px; color: var(--brand-mid); }

  /* -- FEATURED STORY -- */
  .featured-story {
    background: var(--brand); border-radius: var(--radius-lg); overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2.5rem;
  }
  .featured-content { padding: clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; }
  .featured-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
    padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase; width: fit-content;
  }
  .featured-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: white; font-weight: 700; line-height: 1.25; }
  .featured-excerpt { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.65; font-family: var(--font-hindi); }
  .featured-read { display: inline-flex; align-items: center; gap: 8px; color: #fbbf24; font-weight: 600; font-size: 14px; text-decoration: none; }
  .featured-read:hover { text-decoration: underline; }
  .featured-visual { background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 100px; }

  /* -- DIVIDER -- */
  .divider { height: 1px; background: var(--border); margin: 0; }

  /* -- TRENDING -- */
  .trending-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--radius-md); overflow: hidden; }
  .trending-item {
    background: var(--card-bg); padding: 16px 20px;
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; transition: background 0.15s;
  }
  .trending-item:hover { background: var(--brand-light); }
  .trending-num { font-size: 22px; font-weight: 800; color: var(--border-strong); width: 32px; flex-shrink: 0; line-height: 1; }
  .trending-num.top { color: var(--accent); }
  .trending-content { flex: 1; }
  .trending-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; font-family: var(--font-hindi); }
  .trending-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .trending-icon { font-size: 20px; flex-shrink: 0; }

  /* -- TWO-COL LAYOUT -- */
  .two-col { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }

  /* -- SIDEBAR -- */
  .sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
  .widget { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
  .widget-header { background: var(--brand); padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
  .widget-header-icon { font-size: 18px; }
  .widget-header-title { font-size: 14px; font-weight: 600; color: white; letter-spacing: 0.2px; }
  .widget-body { padding: 16px 18px; }

  .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
  .tag {
    display: inline-block; padding: 5px 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--text-secondary);
    text-decoration: none; font-family: var(--font-hindi); transition: all 0.15s;
  }
  .tag:hover { background: var(--brand-light); border-color: var(--brand-mid); color: var(--brand); }

  /* -- NEWSLETTER -- */
  .newsletter-widget { background: var(--accent-light); border: 1px solid rgba(217,119,6,0.2); }
  .newsletter-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
  .newsletter-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; font-family: var(--font-hindi); }
  .newsletter-input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 10px;
    outline: none; transition: border 0.2s; background: white;
  }
  .newsletter-input:focus { border-color: var(--brand-mid); }
  .newsletter-btn {
    width: 100%; padding: 10px; background: var(--brand); color: white;
    border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
  }
  .newsletter-btn:hover { background: var(--brand-mid); }

  /* -- BREADCRUMB -- */
  .breadcrumb { display: flex; align-items: center; gap: 6px; padding: 16px 0; font-size: 13px; }
  .breadcrumb a { color: var(--brand-mid); text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb span { color: var(--text-muted); }
  .breadcrumb .current { color: var(--text-primary); font-weight: 500; }
  
  
  /* -- RESPONSIVE -- */
  @media (max-width: 900px) {
    .hero, .featured-story, .two-col, .footer-inner {
      grid-template-columns: 1fr;
    }
    .featured-visual { display: none; }
    .nav-links { display: none; }
  }
  @media (max-width: 600px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .stories-grid { grid-template-columns: 1fr; }
  } 
@media(max-width:1080px){
  .nav-links,.nav-search-btn{display:none}
  .nav-menu-btn{display:flex;margin-left:auto}
}
@media(max-width:920px){
  .post-hero-inner,.article-grid{grid-template-columns:1fr}
  .post-hero h1{max-width:22ch}
  .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .post-hero-inner{gap:1.5rem}
  .quick-summary,.related-grid,.sidebar,.footer-inner{grid-template-columns:1fr}
  .post-actions{align-items:flex-start;flex-direction:column}
  .footer-bottom{align-items:flex-start;flex-direction:column}
}
@media print{
  .site-header,.breadcrumb-wrap,.sidebar,.related-section,.site-footer,.post-actions{display:none}
  body{background:#fff}
  .post-hero{background:#fff;color:#111827}
  .post-dek,.post-meta{color:#4b5563}
  .article-shell{padding:0}
  .article-card{border:0;box-shadow:none}
}