/*
Theme Name: TechBuzzEra
Author: Afaq Khalid
Description: A modern tech blog theme with category-based article sections
Version: 1.0
*/

@import "tailwindcss";

/* <weight> Use a value from 100 to 900 */

body{
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-style: normal;
 overflow-x: hidden;
 letter-spacing: 1px;
}
.raleway-text {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    font-style: normal;
    opacity: 0.8;
    line-height: inherit;
    letter-spacing: 0.02rem;
}


:root {
  --color-green: #3BC883;
  --color-secondary: #000000;
  --color-text: #2F4858;
  --footer-bg: #2F4858;
  --ai-sidebar-bg: #dcf4e6;
  --hero-bg: #3bc88340;
  --article-card-bg: #eaeaeab3;

}

/* header  */
[x-cloak] {
  display: none !important;
}


/* Active button style */
.active {
  @apply bg-[color:var(--color-green)] text-white border-[color:var(--color-green)];
}

/* Section header animations - only custom CSS that can't be done with Tailwind */
.section-header h2 {
  position: relative;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-green);
  transition: width 0.3s ease;
  display: block; /* Add this */
}

.section-header:hover h2::after {
  width: 100%;
}

/* about us page styling */

.about-page h2, .about-page h3 {
  line-height: 1.3;
  letter-spacing: 1px;
}





/* Layout fixes to prevent footer overlap */

footer {
  position: relative !important;
  z-index: 10;
}

/* Ensure main wrapper grows naturally and doesn't hide content behind footer */
.main {
  min-height: 100vh;
  overflow: visible !important;
  position: relative;
}

/* If theme uses a fixed footer elsewhere, add a body utility class to reserve space. Adjust value if footer height changes. */
body.has-fixed-footer {
  padding-bottom: 6rem; /* change to actual footer height if fixed */
}


/* ================================
   RESPONSIVE SIDEBAR CONTROL
================================ */

/* Default: Mobile & Tablet */
.sidebar {
  width: 100%;
  position: static;
}

/* 1024px → 1500px */
@media (min-width: 1024px) and (max-width: 1499px) {
  .sidebar {
    width: 90%;
    position: sticky;
    top: 7rem;
    align-self: flex-start;
    height: max-content;
  }
}

/* 1500px and above */
@media (min-width: 1500px) {
  .sidebar {
    width: 100%;
    position: sticky;
    top: 7rem;
    align-self: flex-start;
    height: max-content;
  }
}