/*
Theme Name: Taskhug News PRO
Author: ITWEBINFO1
Version: 1.0.0
Description: Ultra Fast • SEO Optimized • News Portal Theme

*/

@import "assets/css/variables.css";
@import "assets/css/reset.css";
@import "assets/css/base.css";
@import "assets/css/layout.css";
@import "assets/css/header.css";
@import "assets/css/footer.css";
@import "assets/css/components.css";
@import "assets/css/blog.css";
@import "assets/css/toc.css";
@import "assets/css/relatespost.css";
@import "assets/css/sidebar.css";
@import "assets/css/responsive.css";
@import "assets/css/contact.css";

@import "assets/css/home-style.css";
@import "assets/css/inner-pages.css";



body{
    font-family:'Inter',sans-serif;
    background:#f5f5f5;
     color:#0f172a;
  line-height:1.7;
}



.article-title{
    font-size:34px;
    font-weight:800;
    line-height:1.3;
}

.load-more-btn{
    display:block;
    margin:40px auto;
    padding:12px 30px;
    background:#c3131b;
    color:#fff;
    border:none;
    font-weight:600;
    cursor:pointer;
}


.dark-mode{
    background:#111;
    color:#eee;
}

.dark-mode .normal-card,
.dark-mode .featured-card{
    background:#1c1c1c;
}
 

 .normal-card:hover,
.featured-card:hover{
    transform:scale(1.03);
    transition:.3s;
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
}
 

 

.comment-form input,
.comment-form textarea{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:5px;
}

.comment-form textarea{
height:120px;
}

.comment-form input[type="submit"]{
background:#c3131b;
color:#fff;
border:none;
cursor:pointer;
}
 


/* SINGLE POST */
.post-title{font-size:30px;margin-bottom:5px}
.post-meta{font-size:13px;color:#555;margin-bottom:15px}
.post-layout{
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:25px;
}
.post-content h2{margin:25px 0 10px}
.post-sidebar{
  position:sticky;
  top:90px;
}
.toc-box,.sidebar-box{
  background:#fff;
  padding:12px;
  margin-bottom:15px;
  border-left:4px solid #e10600;
}
@media(max-width:992px){
  .post-layout{grid-template-columns:1fr}
}


.ad{
  margin:25px 0;
  text-align:center;
}
.ad iframe,
.ad ins{
  max-width:100%;
}

.vd-toc{
  background:#f8fafc;
  border-left:4px solid #e10600;
  padding:15px;
  margin:20px 0;
}
.vd-toc ul{margin:10px 0;padding-left:18px}
.vd-toc a{font-weight:600;text-decoration:none}


/*praveen */


.container{
/*  max-width:100%;*/
/*  margin:auto;*/
/*  padding:0 15px;*/
}



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


.breaking-wrap{
  background:#e10600;
  color:#fff;
  display:flex;
  align-items:center;
  padding:8px 0;
  overflow:hidden;
}

.breaking-label{
  background:#020617;
  padding:6px 14px;
  font-weight:800;
  margin-right:15px;
  white-space:nowrap;
}

.breaking-marquee{
  white-space:nowrap;
  animation:breakingMove 35s linear infinite;
}

.breaking-marquee a{
  color:#fff;
  margin-right:40px;
  font-weight:600;
  text-decoration:none;
}

@keyframes breakingMove{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}
 


 .hero-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  margin:25px 0;
}

.hero-main{
  position:relative;
  border-radius:14px;
  overflow:hidden;
}

.hero-main img{
  height:420px;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  color:#fff;
}

.hero-overlay h1{
  font-size:28px;
  line-height:1.3;
}


.news-card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
  transition:.25s;
}

.news-card:hover{
  transform:translateY(-4px);
}

.news-card img{
  height:200px;
  object-fit:cover;
}

.news-card-body{
  padding:14px;
}

.news-card-body h3{
  font-size:17px;
  font-weight:700;
  line-height:1.4;
}

.news-meta{
  font-size:12px;
  color:#64748b;
  margin-bottom:6px;
}






/* HERO SECTION */
.hero-section{
display:grid;
grid-template-columns:2fr 1fr;
gap:25px;
margin:30px 0;
}

.hero-slider{
position:relative;
overflow:hidden;
border-radius:12px;
}

.slide-item{
position:relative;
}

.slide-item img{
width:100%;
height:420px;
object-fit:cover;
border-radius:12px;
}

.slide-content{
position:absolute;
bottom:0;
left:0;
right:0;
padding:25px;
background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
color:#fff;
}

.slide-content h2{
font-size:28px;
font-weight:700;
}

/* HERO SIDEBAR */
.hero-sidebar{
background:#fff;
padding:20px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.latest-item{
display:flex;
gap:12px;
margin-bottom:15px;
}

.latest-item img{
width:80px;
height:60px;
object-fit:cover;
border-radius:6px;
}

.latest-item h4{
font-size:15px;
margin:0;
}

/* CATEGORY SECTION */
.category-section{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin:40px 0;
}

.category-block{
background:#fff;
padding:20px;
border-radius:12px;
}

.cat-featured img{
width:100%;
height:200px;
object-fit:cover;
border-radius:8px;
}

.cat-list a{
display:block;
margin:8px 0;
font-size:14px;
}

/* TRENDING */
.trending-section{
margin:40px 0;
}

.trending-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.trend-card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
}

.trend-card h4{
font-size:14px;
margin-top:8px;
}

/* RESPONSIVE */
@media(max-width:992px){
.hero-section{
grid-template-columns:1fr;
}

.category-section{
grid-template-columns:1fr;
}

.trending-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.trending-grid{
grid-template-columns:1fr;
}

.slide-item img{
height:260px;
}
}
 














 /* GLOBAL */
.home-wrapper{
  max-width:1300px;
  margin:auto;
  padding:20px;
}

.section-title{
  font-size:28px;
  margin-bottom:20px;
  font-weight:700;
}

/* HERO AREA */
.hero-area{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:25px;
  margin-bottom:40px;
}

.hero-slide{
  position:relative;
  border-radius:12px;
  overflow:hidden;
}

.hero-slide img{
  width:100%;
  height:480px;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:25px;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  color:#fff;
}

.hero-overlay h2{
  font-size:28px;
}

.hero-right{
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.side-news{
  display:flex;
  gap:12px;
  margin-bottom:15px;
}

.side-news img{
  width:80px;
  height:60px;
  object-fit:cover;
  border-radius:6px;
}

.side-news p{
  font-size:14px;
  margin:0;
}

/* EDITOR PICKS */
.editor-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:50px;
}

.editor-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}

.editor-card img{
  width:100%;
  height:240px;
  object-fit:cover;
}

.editor-content{
  position:absolute;
  bottom:0;
  width:100%;
  padding:15px;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  color:#fff;
}

/* CATEGORY */
.category-section{
  margin-bottom:50px;
}

.cat-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.cat-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:10px;
}

/* TRENDING */
.trending-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.trend-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:10px;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-area{
    grid-template-columns:1fr;
  }
  .editor-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .cat-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .trending-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .editor-grid,
  .cat-grid,
  .trending-grid{
    grid-template-columns:1fr;
  }
  .hero-slide img{
    height:300px;
  }
}
 

 


.site-footer{
  background:#020617;
  color:#cbd5e1;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:25px;
}

.footer-col h6{
  color:#fff;
  margin-bottom:10px;
}

.footer-col ul{
  list-style:none;
  padding:0;
}

.footer-col a{
  color:#cbd5e1;
  font-size:14px;
  text-decoration:none;
}

.footer-col a:hover{color:#fff}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:25px;
  padding:15px 0;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}



@media(max-width:992px){
  .hero-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:576px){
  .footer-grid{grid-template-columns:1fr}
  .single-post h1{font-size:26px}
  .hero-main img{height:280px}
}



/* Example: Sticky header offset for WP admin bar */
html.is-position-sticky {
  --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
}

@media screen and (max-width: 600px) {
  html.is-position-sticky {
    --wp-admin--admin-bar--position-offset: 0px;
  }
}

/* Accessibility helper classes */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #ddd;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}




/* HEADER */

.post-header h1{
font-size:32px;
line-height:1.3;
margin:15px 0;
}

.breadcrumb{
font-size:13px;
color:#777;
}

.post-meta{
font-size:14px;
color:#f30600;
margin-bottom:15px;
}

small.post-meta {
    padding: 5px;
}

.post-thumb img{
width:100%;
border-radius:14px;
margin-bottom:25px;
}

/* MAIN GRID */

.post-layout{
display:grid;
grid-template-columns:250px 1fr;
gap:30px;
}

/* TOC */

.post-toc{
background:#f7f7f7;
padding:15px;
border-radius:12px;
position:sticky;
top:100px;
height:max-content;
font-size:14px;
}

/* CONTENT */

.post-content{
font-size:17px;
line-height:1.8;
}

.post-content img{
max-width:100%;
border-radius:10px;
margin:20px 0;
}

/* ADS */

.ad-slot{
margin:30px 0;
text-align:center;
}

/* FOOTER */

.post-footer{
display:flex;
justify-content:space-between;
margin-top:40px;
flex-wrap:wrap;
gap:15px;
}

/* AUTHOR */

.author-box{
display:flex;
gap:15px;
margin:40px 0;
background:#fafafa;
padding:20px;
border-radius:15px;
}

.author-box img{
border-radius:50%;
}

/* RELATED */

.related-posts h3{
margin-bottom:15px;
}

.posts-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.posts-grid article img{
width:100%;
height:150px;
object-fit:cover;
border-radius:10px;
}

.posts-grid h4{
font-size:15px;
margin-top:8px;
}

/* MOBILE */

@media(max-width:900px){

.post-layout{
grid-template-columns:1fr;
}

.post-toc{
order:2;
}

.posts-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:480px){

.post-header h1{
font-size:24px;
}

.posts-grid{
grid-template-columns:1fr;
}

}

.notranslate {
 translate:no;
}

/*inner pages */





/* DARK MODE */

body.dark-mode {
  background:#111;
  color:#eee;
}

body.dark-mode a{
 color:#ffd700;
}

body.dark-mode header,
body.dark-mode footer,
body.dark-mode section,
body.dark-mode article,
body.dark-mode div{
 background:#111 !important;
 color:#eee;
}

body.dark-mode img{
 filter:brightness(.8);
}

/* Button */

.dark-toggle{
 background:none;
 border:0;
 font-size:22px;
 cursor:pointer;
}
 



 /* =========================================
   WORDPRESS COMMENT SECTION
========================================= */

.comments-area{
  margin:70px 0;
  padding:35px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
}

/* Title */

.comment-reply-title{
  font-size:24px;
  font-weight:800;
  margin-bottom:25px;
  position:relative;
}

.comment-reply-title::after{
  content:"";
  width:60px;
  height:3px;
  background:#c4161c;
  position:absolute;
  bottom:-8px;
  left:0;
}

/* Cancel reply link */

#cancel-comment-reply-link{
  font-size:13px;
  margin-left:10px;
  color:#c4161c;
  text-decoration:none;
}

/* Notes */

.comment-notes{
  font-size:13px;
  color:#777;
  margin-bottom:20px;
}

/* Form Layout */

.comment-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Textarea */

.comment-form textarea{
  width:100%;
  min-height:140px;
  padding:14px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:14px;
  resize:none;
  transition:.3s ease;
}

.comment-form textarea:focus{
  border-color:#c4161c;
  outline:none;
  box-shadow:0 0 0 3px rgba(196,22,28,.1);
}

/* Inputs */

.comment-form input[type="text"],
.comment-form input[type="email"]{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:14px;
  transition:.3s ease;
}

.comment-form input:focus{
  border-color:#c4161c;
  outline:none;
  box-shadow:0 0 0 3px rgba(196,22,28,.1);
}

/* Checkbox */

.comment-form-cookies-consent{
  font-size:13px;
  color:#555;
  display:flex;
  align-items:center;
  gap:8px;
}

.comment-form-cookies-consent input{
  accent-color:#c4161c;
}

/* Submit Button */

.btn-submit{
  background:#c4161c;
  color:#fff;
  border:none;
  padding:12px 26px;
  border-radius:30px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.3s ease;
}

.btn-submit:hover{
  background:#000;
}

/* =========================================
   COMMENT LIST (If comments exist)
========================================= */

.comment-list{
  margin-bottom:50px;
  list-style:none;
  padding:0;
}

.comment-list li{
  margin-bottom:30px;
  padding:20px;
  border-radius:16px;
  background:#f9f9f9;
}

.comment-author{
  font-weight:700;
  margin-bottom:6px;
}

.comment-meta{
  font-size:12px;
  color:#777;
  margin-bottom:10px;
}

.comment-content{
  font-size:14px;
  line-height:1.6;
}

/* Reply button */

.comment-reply-link{
  font-size:13px;
  color:#c4161c;
  font-weight:600;
  text-decoration:none;
}

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

@media(max-width:768px){

  .comments-area{
    padding:25px;
  }

  .comment-reply-title{
    font-size:20px;
  }

  .btn-submit{
    width:100%;
    text-align:center;
  }

}