/*
Theme Name: Custom News Theme
Author: Naveed
Author URI: mailto:nrehman86@gmail.com
Version: 1.0
*/
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {
	font-family: serif;
}
/* ✅ Fixed header with background */
header {
	width: 100%;
	background: #FFDFD5;
	border-bottom: 1px solid #ccc;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

/* Add space below header so content doesn't hide */
body::before {
  content: "";
  display: block;
  height: 120px; /* adjust based on header height */
}

/* Search Bar */
.search-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFDFD5;
  padding: 10px;
  position: relative;
  z-index: 100;
}

.search-box {
  position: relative;
  flex: 1;
  margin-right: 10px;
}

.search-box input {
  width: 100%;
  padding: 10px 10px 10px 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #666;
}

.menu-icon {
	font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    padding: 5px 10px;
    background-color: #ad6a60;
}

/* ✅ Right-side sliding menu */
.side-menu {
  position: fixed;
  top: 0;
  right: -300px; /* hidden by default */
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.side-menu.active {
  right: 0;
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFDFD5;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.menu-header h3 {color: #ad6a60; }
.close-menu {
  font-size: 36px;
  cursor: pointer;
  color: #ad6a60;
}

.menu-links {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.menu-links a {
  padding: 10px;
  text-decoration: none;
  color: #333;
  font-size: 18px;
  border-bottom: 1px solid #eee;
}

.menu-links a:hover {
  background: #f2f2f2;
}


/* Menu icon */
.menu-wrapper {
  position: relative;
}


/* Dropdown menu */
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 120%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: none;
  flex-direction: column;
  min-width: 150px;
  z-index: 999;
}

.dropdown-menu a {
  padding: 10px;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  display: block;
}

.dropdown-menu a:hover {
  background: #f2f2f2;
}

.dropdown-menu.active {
  display: flex;
}


/* Horizontal Tabs */
.menu-container {
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	scroll-behavior: smooth;
	cursor: grab;
}

/* ✅ Updated font styles */
.menu-container a {
	flex: 0 0 auto;

	font-family: serif;
	font-weight: 400;
	color: #ad6a60;
	text-decoration: none;
	transition: 0.3s;
	user-select: none;
}
.menu-container a:hover {
	text-decoration: underline;
}

/* ✅ Active tab style */
.menu-container a.active {
	color: #000;
	font-weight: 700;
}

/* Scrollbar visible */
.menu-container::-webkit-scrollbar { height: 8px; }
.menu-container::-webkit-scrollbar-track { background: #f0cfc7; }
.menu-container::-webkit-scrollbar-thumb { background: #ad6a60; border-radius: 4px; }
.menu-container::-webkit-scrollbar-thumb:hover { background: #8b544d; }

.news-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* ? keeps items centered */
  padding: 10px;
  gap: 10px;
  margin-top:25px;
}

.news-item-link {
  display: block;
  width: 100%;
  max-width: 600px; /* ? control box width */
  text-decoration: none;
  color: inherit;
  background-color:#fff3ef;
}
.news-item-link:hover { background-color: #eaeaea; }
.news-item {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;

}

.news-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.news-text {
  flex: 1;
}

.news-title {
  color: #222;
  line-height: 1.4;
  flex-wrap: wrap;
}

.rank {
background: #ccc;
    color: #333;
    border-radius: 4px;
    padding: 0px 8px;
    font-weight: bold;

}

.hot {
  background: #ff4d4d;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
}

.new {
  background: #ffc107;
  color: #333;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
}

.news-date {
  color: #777;
  margin-top: 17px;
}

.news-image img {
  object-fit: cover;
  border-radius: 6px;
}

hr {
  border: none;
  border-bottom: 1px solid #eee;
  margin-top: 22px;
}
/* Responsive breakpoints */
@media (min-width: 300px) {
.menu-container a { font-size:16px; padding: 12px 15px; }
.menu-container a.active { font-size:18px; }
.rank { font-size:14px; }
   .news-image img {
 	 width: 103px;
  	height: 90px;
  }
  .news-title {
  font-size: 15px;
  }
  .news-date {
  font-size: 11px;
  }
      .back-arrow {
        font-size: 20px;
        text-decoration: none;
        color: #3B88C3;
    }
}
/* Responsive breakpoints */
@media (min-width: 768px) {
 .menu-container a { font-size:25px;  	padding: 15px 25px; }
 .menu-container a.active { font-size:27px; }
 .rank { font-size:22px; }
   .news-image img {
 	 width: 163px;
  	height: 120px;
  }
  .news-title {
  font-size: 25px;
  }
  .news-date {
  font-size: 18px;
  }
    .back-arrow {
        font-size: 24px;
        text-decoration: none;
        color: #3B88C3;
    }
}
@media (min-width: 1024px) {
  .news-image img {
 	 width: 163px;
  	height: 120px;
  }
}

.overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
	  display:none;
    }

    /* Loader container */
    .loader {
      position: relative;
      width: 80px;
      height: 80px;
    }

    /* Expanding circle effect */
    .loader::before, .loader::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 4px solid #3498db;
      border-radius: 50%;
      opacity: 0;
      animation: ripple 1.5s infinite;
    }

    .loader::after {
      animation-delay: 0.75s; /* second wave */
    }

    @keyframes ripple {
      0% {
        transform: scale(0.2);
        opacity: 0.8;
      }
      70% {
        opacity: 0.2;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }