/*
Theme Name: Adbul News
Theme URI: abdulnews.com
Author: Adbul News
Author URI: abdulnews.com
Version: 1.0
*/
/* ===== Base Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: Arial, sans-serif;
  overflow: hidden;
}


.navbar {
  position: relative;
  height: 70px;
  background-color: #ffffff;
  display: flex;
  justify-content: center; /* Center brand */
  align-items: center;
}

/* Logo image styling */
.site-logo {
  height: 99px;
  max-width: 100%;
  object-fit: contain;
}

/* Responsive logo for small screens */
@media (max-width: 600px) {
  .site-logo {
    height: 95px;
  }
}

.download-btn {
  position: absolute;
  left: 17px;
  background-color: red;
  color: white;
  padding: 9px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: large;
  border: 2px solid red;
  transition: background-color 0.3s, color 0.3s;
}

.download-btn:hover {
  background-color: rgb(255, 255, 255);
  color: red;
}

.reset-btn {
  position: absolute;
  right: 17px;
  background-color: red;
  color: white;
  padding: 9px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: large;
  border: 2px solid red;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.reset-btn:hover {
  background-color: rgb(255, 255, 255);
  color: Red;
}

/* ✅ Final responsive fix for ≤407px */
@media (max-width: 407px) {
  .navbar {
    position: relative;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }

  .download-btn,
  .reset-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  .download-btn {
    left: 8px;
  }

  .reset-btn {
    right: 8px;
  }

  /* .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    white-space: nowrap;
    text-align: center;
  } */
}



/* ===== Responsive Navbar ===== */
@media (max-width: 768px) {
  .navbar {
    padding: 0.4rem 0;
  }

  /* .brand {
    font-size: 1.4rem;
  } */
}

@media (max-width: 480px) {
  .navbar {
    padding: 0.3rem 0;
  }

  /* .brand {
    font-size: 1.2rem;
  } */
}

/* ===== News Scroll Layout ===== */
.news-container {
  height: calc(100vh - 40px); /* Adjust based on navbar height */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.news-card {
  scroll-snap-align: start;
  min-height: calc(100vh - 40px); /* Account for navbar height */
  display: flex;
  flex-direction: column;
  background: white;
  padding: 0px 0px; /* Reduced padding */
  justify-content: flex-start;
}

.news-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.news-text h2 {
  font-size: 1.40rem;
  margin-bottom: 6px;
  font-weight: bold;
  padding-left: 15px;
  padding-right: 15px;
}

.news-text p {
  font-size: 1.30rem;
  line-height: 1.35;
  margin-bottom: 6px;
  padding-left: 15px;
  padding-right: 15px;
}

.meta {
  font-size: 0.8rem;
  color: gray;
  padding-left: 15px;
  padding-right: 15px;
}

/* ===== Desktop View (768px and above) ===== */
@media (min-width: 768px) {
  .news-card {
    align-items: center;
    justify-content: flex-start;
    padding: 0;
  }

  .news-image {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    
  }

  .news-text h2 {
    font-size: 1.55rem; /* ✅ Only size increased */
    padding-left: 22px;
    padding-right: 22px;
    text-align: left;
  }

  .news-text p {
    font-size: 1.50rem; /* ✅ Only size increased */
    padding-left: 22px;
    padding-right: 22px;
    text-align: left;
  }

  .meta {
    font-size: 0.9rem; /* ✅ Slightly bigger */
    padding-left: 22px;
    padding-right: 22px;
    text-align: left;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .news-image {
    max-height: 440px;
  }

  .news-text p {
    font-size: 1.8\rem;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .news-text h2 {
    font-size: 1.80rem;
  }
}
@media (max-width: 406px) {
  .news-text h2 {
    font-size: 1.10rem; /* ya jo bhi size chahiye */
  }

  .news-text p {
    font-size: 0.66rem; /* ya jo bhi size chahiye */
  }
  .meta {
  font-size: 0.5rem;
  color: gray;
  padding-left: 15px;
  padding-right: 15px;
}
 
}
@media (min-width: 360px) and (max-width: 956px) {
  .news-text p {
	  font-size: 0.95rem;}
	.news-text h2{
		font-size: 1.20rem:}	
  }
@media (min-width: 768px) and (max-width: 1280px) {
  .news-text p {
	  font-size: 1.60rem;}	
  }
@media (min-width: 450px) and (max-width: 600px) {
  .news-text p {
	  font-size: 0.85rem;}
	.news-text h2{
		font-size: 0.85rem:}	
  }
@media (min-width: 390px) and (max-width: 445px) {
  .news-text p {
	  font-size: 1.18rem;}

  }
	
	

/* ===== Add to Home Buttons & Instructions ===== */
.container {
  max-width: 500px;
  margin: 0 auto 30px;
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 0px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  margin-bottom: 25px;
  color: #222;
  font-size: 22px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.btn {
  background-color: #ffffff;
  border: none;
  padding: 12px 20px;
  color: rgb(0, 0, 0);
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background-color: red;
}

.instruction-box {
  display: none;
  background-color: #fff8e1;
  border: 1px solid #ffecb3;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  max-width: 90%;
  margin: 0 auto;
}

strong {
  color: #000;
}