:root {
  --bg: #121212;
  --bgSoft:#535353;
  --text: #F9FAFB;
  --textSoft: #cbd2d9;
}

* {
  margin: 0;
  box-sizing: border-box;
}

/* html, body {
  width: 100%;
  overflow-x: hidden; 
  position: relative; 
} */

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Ubuntu", sans-serif;
  /* Forces long unbroken URLs to wrap so they don't break paragraphs */
  overflow-wrap: break-word;
}

body.light {
  --bg: #F9FAFB;
  --text: #121212;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1366px;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*Navbar start*/

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  position: sticky;
  top: 8px;
  /* background-color: var(--bg); */
  /* background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
  background-color: rgba(255, 255, 255, 0.1);

  /* Frosted Effect */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* Rounded Corners */
  border-radius: 5px;

  /* Optional: Light border for glass effect */
  /* border: 1px solid rgba(255, 255, 255, 0.2); */

  /* Optional: Shadow for depth */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Ensure it stays on top */
  /* position: fixed;
    top: 10px;
    left: 10px;
    right: 10px; */

  z-index: 1000;
  padding-left: 15px;
  padding-right: 15px;

}

.logo {
  font-weight: bold;
  font-size: 24px;
}

.links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
}

.searchButton {
  display: none;
  align-items: center;
  gap: 10px;
  background-color: var(--bgSoft);
  color: var(--textSoft);
  padding: 5px;
  border-radius: 15px;
}

.toggle {
  width: 40px;
  height: 20px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--bgSoft);
  border: 0.5px solid var(--textSoft);
  padding: 5px;
  position: relative;
}

.ball {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  background-color: var(--textSoft);
  border: 1px solid var(--bgSoft);
}

.light .ball {
  left: unset;
  right: 0;
}

/*Navbar end*/

/*Footer start*/

/* .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  font-size: 14px;
}

.social {
  display: flex;
  gap: 10px;
} */

/*Footer end*/


/* --- 1. MAIN HERO CONTAINER --- */
.hero-section {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    margin-bottom: 60px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--bgSoft);
    align-items: flex-start; /* Prevents the sidebar from stretching vertically */
}

/* --- 2. LEFT SIDE: FEATURED POST --- */
.hero-featured {
    flex: 2.8; 
    display: flex;
    flex-direction: column;
}

.featured-label {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.featured-label-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--textSoft);
}

.featured-label-line {
    flex: 1;
    height: 1px;
    background-color: var(--bgSoft);
    opacity: 0.3;
}

/* The actual featured post (Locks Image & Text side-by-side) */
.featured-hero {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* The Image Frame (Prevents it from becoming oversized) */
.featured-image-wrapper {
    flex: 1.2;
    display: block;
    /* border-radius: 12px; */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.featured-image-wrapper:hover .featured-image {
    transform: scale(1.03); 
}

.featured-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* The Text Content */
.featured-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.featured-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
    transition: color 0.2s ease;
}

.featured-content > a:hover .featured-title {
    color: #3b82f6; /* Modern blue highlight on hover */
}

.featured-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.featured-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.featured-meta-bottom {
    font-size: 13px;
    color: var(--text);
    display: flex;
    gap: 8px;
}

/* --- 3. RIGHT SIDE: LATEST POSTS SIDEBAR --- */
.hero-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* We removed the left border and padding so your widget card fits perfectly! */
}


/*List start*/

.listItem {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 50px;
  margin-top: 20px;
}

.listItemImage {
  width: 384px;
  height: 216px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  /* display: block;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4),
  0 10px 40px rgba(0, 0, 0, 0.6),
  0 0 15px 2px rgba(255, 255, 255, 0.03); */
flex-shrink: 0;
}

.listItemTexts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.listItemDetail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.listItemAvatar {
  width: 36px;
  height: 36px;
  border-radius: 90%;
  object-fit: cover;
}

.listItemCategories {
  display: flex;
  gap: 10px;
}

.listItemCategory {
  padding: 5px;
  border-radius: 5px;
  background-color: var(--bgSoft);
  color: var(--textSoft);
  font-size: 14px;
  transition: all 0.3s ease; /* ADD THIS: Makes the color change smooth */
}

.listItemCategory:hover {
  background-color: var(--text); /* Changed from --textSoft to --text */
  color: var(--bg);
}

.pagination {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  margin-top: 80px;
  margin-bottom: 30px;
}

.page-item {
  border: 1px solid gray;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.page-item a, 
.page-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.page-item.active {
  background-color: var(--text);
  color: var(--bg);
}

.page-item.disabled {
  background-color: #83878f;
  cursor: not-allowed;
}

/*List end*/

/*Single start*/
.single{
  margin-top: 10px;
}
.singleHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.singleHeadTexts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.singleHeadTitle {
  font-size: 48px;
}

.singleHeadDesc {
  font-size: 20px;
  font-weight: 300;
}

.singleAvatar {
  width: 60px;
  height: 60px;
  border-radius: 90%;
  object-fit: cover;
}

.singleHeadDetail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;  /* ADD THIS: Allows the row to break to a new line on small screens */
  gap: 20px;
}

/* .singleCategory {
  padding: 5px;
  border-radius: 5px;
  background-color: var(--bgSoft);
  color: var(--textSoft);
  font-size: 14px;
  transition: all 0.3s ease;
} */

.singleCategory {
  display: inline-flex;
  align-items: center;
  height: fit-content;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: var(--bgSoft);
  color: var(--textSoft);
  font-size: 14px;
  
  white-space: nowrap; /* Forces text to a single line */
  flex-shrink: 0;      /* Forbids the browser from squishing the box */
  
  transition: all 0.3s ease;
}

.singleCategory:hover {
  background-color: var(--text); /* Changed from --textSoft to --text */
  color: var(--bg);
}

.singleHeadImg {
  flex: 1;
  max-height: 350px;
  object-fit: cover;
}

.singleBottom {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  margin-top: 50px;
}

.singleContent {
  flex: 3;
  font-size: 20px;
  line-height: 32px;
  min-width: 0; /* ADD THIS: Forces flexbox to respect the container width instead of content width */
  overflow-x: hidden;
}

.singleContent p,
.singleContent h1,
.singleContent h2,
.singleContent h3 {
  margin: 20px 0px;
}

/* .singleContent img {
  width: 100%;
  object-fit: cover;
} */

/* Restrict images to original width and center them */
.singleContent img {
    width: auto !important;   /* Overrides any existing width: 100% rule */
    max-width: 100%;          /* Ensures large images still shrink to fit mobile screens */
    height: auto;             /* Keeps the aspect ratio perfectly intact */
    display: block;           /* Required for margin centering */
    margin: 30px auto;        /* Centers smaller images and adds breathing room above/below */
    /* border-radius: 8px;       */
}

.singleContent .highlight,
.singleContent pre {
  width: 100%;
  max-width: 100%;    
  overflow-x: auto;   
  /* Enables buttery-smooth, native feeling swiping on physical touch screens */
  -webkit-overflow-scrolling: touch; 
}

.singleContent pre {
  padding: 20px;
  font-size: 14px;
  margin: 0; /* Strips any default margins that might push the box wider */
}

.singleRightBar {
  flex: 1;
}




/* Style links specifically within the blog content */
.singleContent a {
    color: #3b82f6; /* A clean, modern blue */
    /* text-decoration: underline;   */
    transition: color 0.2s ease;
}

/* Hover state */
.singleContent a:hover {
    color: #2563eb; /* Darker blue on hover */
    text-decoration: none;
}

/*Single end*/

/*Rightbar start*/

.rightBar {
  position: sticky;
  top: 108px; 
  height: fit-content; 
  
  /* BUMPED TO 450px: Gives us the perfect safety buffer for large screens */
  max-height: calc(100vh - 450px);
  
  overflow-y: auto; 
  z-index: 10; 
  
  /* REVERTED TO 20px: Removes the invisible dead space that was hitting the footer! */
  /* padding-bottom: 20px;  */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

/* Optional: Hides the ugly scrollbar on the sidebar for a clean, modern look while keeping it scrollable */
.rightBar::-webkit-scrollbar {
  display: none;
}

.rightBarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rightBarImgHr {
  display: none;
}



/*Rightbar end*/


@media (max-width: 1536px) {
  .container {
    max-width: 1366px;
  }
}

@media (max-width: 1366px) {
  .container {
    max-width: 1280px;
  }
  /* BUMPED TO 600px: Guarantees the taller, wrapped footer slides underneath completely */
  .rightBar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 1280px) {
  .container {
    max-width: 1024px;
  }
  .hero-section {
        flex-direction: column; /* Stacks the sections */
        gap: 50px;
    }
    
    .hero-sidebar {
        width: 100%; /* Allows the widget card to expand across the whole screen */
    }

}

@media (max-width: 1024px) {
  .container {
    max-width: 768px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .singleHeadImg {
    display: none;
  }

  .rightBar {
    position: static; 
    max-height: none; 
    overflow-y: visible; 
  }

  .rightBarImg {
    display: none;
  }

  .rightBarImgHr {
    display: block;
    /* width: 100%; */
    width: 60%;        /* Takes up half the screen width */
    max-width: 350px;  /* But never gets larger than 250px */
    margin: 20px auto;
    height: auto;
  }

  .singleBottom {
    flex-direction: column-reverse;
  }

  .featured-hero {
      flex-direction: column; /* Stacks image and text */
      align-items: stretch;
  }
  
  .featured-image-wrapper {
      width: 100%; /* Allows image to be full width once text is moved */
  }

}

@media (max-width: 768px) {
  .container {
    max-width: 640px;
  }

  .links {
    font-size: 14px;
  }

  .listItem {
    gap: 20px; /* Reduces the large desktop gap so it fits on mobile */
  }

  .listItemImage {
    display: block;
    /* 1. BUMPED THE IMAGE SIZE UP! */
    width: 110px; 
    height: 110px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .listItemTexts {
    flex: 1;
    gap: 8px;
    
    /* 2. THE MAGIC BULLET: This completely stops long text and categories 
       from forcefully stretching the screen sideways! */
    min-width: 0; 
  }

  /* Hide the description on mobile so the card doesn't get too tall */
  .listItemDesc {
    display: none; 
  }

  .listItemTitle {
    font-size: 17px;        
    line-height: 1.3;       
    margin: 0;              
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .listItemDetail {
    font-size: 12px; 
    flex-wrap: wrap; 
    gap: 5px;
  }
  
  /* 3. ALLOW THE CATEGORY ROW TO STACK */
  .listItemCategories {
    display: flex;
    flex-wrap: wrap; /* Lets multiple categories drop to a new line */
    gap: 5px;
  }

  /* 4. PROTECT THE INDIVIDUAL CATEGORY TAGS */
  .listItemCategory {
    font-size: 11px;
    padding: 3px 6px;
    
    /* If a SINGLE category name is insanely long, this cleanly 
       cuts it off with "..." instead of breaking your layout! */
    max-width: 100%; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .searchButton span {
    display: none;
  }
  .singleHeadTitle {
    font-size: 32px; 
  }

}

@media (max-width: 640px) {
  .container {
    max-width: 475px;
  }
  /* 1. Shrink the logo image */
  .logo img, img.logo { 
    width: 150px; 
    height: 55px;
  } 
  
  /* 2. Shrink the spacing between navbar links */
  .links { gap: 10px; } 

  /* 3. Shrink the giant desktop title so it doesn't stretch the screen */
  .singleHeadTitle { font-size: 32px; }
}

@media (max-width: 375px) {
  .navbar {
    padding-left: 5px;
    padding-right: 5px;
  }

  .logo img, img.logo { 
    width: 140px; 
    height: 51px;
  } 

  }




.footer {
    width: 100%;
    background-color: var(--bg);
    margin-top: 50px;
    padding-top: 40px;  
    padding-bottom: 30px;
    position: relative;
    z-index: 10;

    /* MATCHED NAVBAR STYLING */
    /* Matches Navbar's 5px border radius (applied to top corners only) */
    /* border-radius: 5px 5px 0 0;  */
    
    /* MATCHED NAVBAR SHADOW */
    /* Flipped the vertical offset to -4px to point the shadow upwards */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); 
}

/* Ensure inner content remains aligned with navbar width */
.footer-container-inner {
    max-width: 1366px; 
    margin: 0 auto;
    padding: 0 50px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    /* Top line matches Bottom line length */
    border-bottom: 1px solid var(--bgSoft); 
}

.footer-logo {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-desc {
    color: var(--textSoft);
    font-size: 14px;
    font-weight: 300;
}

.footer-social {
    display: flex;
    gap: 20px;
    color: var(--textSoft);
}

.footer-social a {
    color: inherit;
    /* Removed lift animation - Color only hover */
    transition: color 0.3s ease, transform 0.3s ease; /* Added a tiny transform for smoothness */
}

.footer-social a:hover {
    color: var(--text);
}

/* Twitter Blue */
.footer-social a[aria-label="Twitter"]:hover {
    color: #1DA1F2;
}

/* GitHub - Uses the theme's high-contrast text color since their brand is monochrome */
.footer-social a[aria-label="GitHub"]:hover {
    color: var(--text); 
}

/* LinkedIn Blue */
.footer-social a[aria-label="LinkedIn"]:hover {
    color: #0A66C2;
}

/* YouTube Red */
.footer-social a[aria-label="YouTube"]:hover {
    color: #FF0000;
}


.footer-bottom {
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    color: var(--textSoft);
    font-size: 13px;
    font-weight: 300;
}

.footer-bottom a {
    color: inherit; /* Takes the color of the surrounding text */
    text-decoration: none;
    /* margin-left: 10px; */
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .footer-container-inner {
        padding: 0 15px;
    }
    .footer-top {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
}


blockquote {
    /* The vertical line on the left */
    border-left: 4px solid var(--bgSoft); 
    
    /* Indent the text from the line */
    padding: 10px 20px; 
    
    /* Space above and below the blockquote */
    margin: 20px 0;
    
    /* Subtle background and text color to make it pop */
    /* background-color: #f8f9fa; */
    /* color: #555; */
    
    /* Removes default browser italics if you don't want them */
    font-style: normal;
    color: var(--text);
}

body.light blockquote {
  --text: #121212;
  border-left: 4px solid #cbd2d9;
}

/* Optional: Style the heading inside the blockquote */
blockquote h3 {
    margin-top: 0;
    color: #222;
}

/* blockquote p {
    font-size: 18px;
} */




/* Dark Mode (Default) - Lowers opacity to make the text much more subtle */
.reading-time {
    color: var(--textSoft);
    opacity: 0.5; /* Adjust between 0.4 and 0.7 to find the perfect subtlety */
}

/* Light Mode - Restores full opacity so the light gray text doesn't disappear against the white background */
body.light .reading-time {
    opacity: 1;
}



/* --- TRENDING POSTS WIDGET --- */
.popular-widget {
    background-color: #0e0e0e;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    border-radius: 12px;
}

.popular-title {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--textSoft);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    border-bottom: 1px solid var(--bg); /* Creates a clean divider line */
    padding-bottom: 15px;
    opacity: 0.7; 
}

.popular-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popular-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

/* Adds a subtle nudge to the right when hovering */
.popular-item:hover {
    transform: translateX(5px); 
}

/* Changes title to your blue highlight color on hover */
.popular-item:hover .popular-post-title {
    color: #3b82f6; 
}

.popular-img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0; /* Prevents the image from squishing */
}

.popular-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.popular-post-title {
    font-size: 15px;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
    font-weight: 500;
    transition: color 0.2s ease;
}

.popular-post-date {
    font-size: 12px;
    color: var(--textSoft);
}

/* --- LIGHT MODE TRENDING WIDGET OVERRIDES --- */

/* --- LIGHT MODE TRENDING WIDGET OVERRIDES --- */

/* 1. Strip the styling off the wrapper so it doesn't double-layer */
body.light .rightBar {
    background-color: transparent;
    /* box-shadow: none;
    border-radius: 0; */
}

/* 2. Put the beautiful card styling back on the widget */
body.light .popular-widget {
    background-color: #F9FAFB;
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-radius: 12px; */
    
    /* Guarantees the drop-shadow always has space to render perfectly */
    /* margin-bottom: 30px;  */
}

body.light .popular-title {
    color: var(--text);
    opacity: 0.7; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
}