/* ================= GLOBAL ================= */

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

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f5f6f7;
  color: #222;
}

/* ================= HEADER ================= */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #228B22;
}

/* BIG HEADER */
.top-header {
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #228B22;
  transition: height 0.3s ease;
}

.logo {
  height: 80px;
}

/* SHRINK MODE */
.header.shrink .top-header {
  height: 0;
  overflow: hidden;
}

/* COMPACT HEADER */
.bottom-header {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #228B22;
  color: white;
}

/* Left Z */
.z-logo {
  font-size: 22px;
  font-weight: bold;
  flex-shrink: 0;
}

/* Search takes remaining space */
.search-bar {
  flex: 1;
}

/* Input fills available width */
.search-bar input {
  width: 100%;
  padding: 8px 14px;
  border-radius: 22px;
  border: none;
  outline: none;
}

/* Right icons */
.header-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.header-actions i,
.hamburger {
  color: white;
  font-size: 22px;
}

/* ================= FILTER BAR ================= */

#filterBar {
  transform: translateY(-100%);
  transition: 0.3s ease;
}

.filter-bar {
  position: sticky;
  top: 60px;
  background: white;
  padding: 8px;
  display: flex;
  gap: 8px;
  z-index: 999;
  transition: transform 0.3s ease;
}

.hidden-bar {
  transform: translateY(-100%);
}

.show-bar {
  transform: translateY(0);
}

.filter-btn {
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  background: #eee;
}

.filter-btn.active {
  background: black;
  color: white;
}

/* ================= FEATURED ================= */

.featured-wrapper {
  background: white;
}

.featured-slider {
  display: flex;
  gap: 12px;
  padding: 10px;
  overflow-x: auto;
}

.featured-card {
  min-width: 90px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
}

.featured-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= POSTS ================= */

#postContainer {
  padding: 12px;
}

.card {
  background: white;
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.postprofile-pic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

/* ================= CAROUSEL ================= */

.carousel img {
  width: 100%;
  border-radius: 12px;
  object-fit: contain;
}

/* ================= FAB ================= */

.post-fab{
position:fixed;
bottom:100px;
right:20px;
width:55px;
height:55px;
background:#228B22;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 6px 20px rgba(0,0,0,.25);
z-index:999;
}

.post-fab img{
width:26px;
height:26px;
border-radius:70%;
object-fit:cover;
}

/* ================= SIDEBAR ================= */

/* ================= SIDEBAR / BOTTOM NAV ================= */

.sidebar {
  width: 60px;
  background: #f1f1f1;
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  z-index: 2000;
}

/* icon container */
.sidebar .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;               /* 👈 SPACE BETWEEN ICONS */
  margin-top: 24px;
}

/* icon images */
.sidebar img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* ================= MOBILE = BOTTOM BAR ================= */

@media (min-width: 992px) {

  .bottom-header {
    max-width: 900px;
    margin: auto;
  }

  .search-bar input {
    max-width: 500px;
  }
}


@media (max-width: 768px) {

  .sidebar {
    width: 100%;
    height: 60px;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    background: #f1f1f1;
    border-top: 1px solid #ddd;
  }

  .sidebar .icon {
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: 0;
    gap: 0;               /* spacing handled by space-around */
  }

  .sidebar img {
    width: 32px;
    height: 32px;
  }
}

/* ================= SLIDE NAV ================= */

.slide-nav {
  position: fixed;
  top: 0;
  left: -280px;
  width: 260px;
  height: 100%;
  background: white;
  z-index: 3000;
  padding: 20px;
  transition: left 0.3s ease;
  box-shadow: 2px 0 10px rgba(0,0,0,0.15);
}

.slide-nav.active {
  left: 0;
}

.slide-nav a {
  display: block;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.slide-nav a:hover {
  color: #228B22;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.profile-pic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

#navEmail {
  display: none;
}

/* Dark overlay */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 2500;
}

.overlay.active {
  display: block;
}

.ig-post{
max-width:420px;
margin:auto;
background:#fff;
color:#000;
border-radius:12px;
overflow:hidden;
margin-bottom:20px;
}

.ig-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 10px;
}

.ig-user{
display:flex;
align-items:center;
gap:6px;
}

.ig-avatar{
width:35px;
height:35px;
border-radius:50%;
object-fit:cover;
}

.follow-btn{
margin-left:8px;
color:#0d6efd;
font-weight:600;
cursor:pointer;
font-size:14px;
}

.follow-btn:hover{
text-decoration:underline;
}

.post-menu{
cursor:pointer;
font-size:20px;
}

.ig-image{
width:100%;
display:block;
}

.ig-actions{
display:flex;
justify-content:space-between;
padding:8px 12px;
align-items:center;
}

.ig-left span{
margin-right:15px;
}

.ig-actions span{
display:inline-flex;
align-items:center;
gap:4px;
font-size:18px;
cursor:pointer;
}

.ig-actions small{
font-size:12px;
}

.ig-caption{
padding:10px;
font-size:14px;
}


.ig-actions{
display:flex;
justify-content:space-between;
padding:10px;
font-size:20px;
}

.ig-left{
display:flex;
gap:18px;
}

.ig-actions span{
display:flex;
align-items:center;
gap:4px;
}

.slide-count{
position:absolute;
top:8px;
right:8px;
background:#0008;
color:#fff;
padding:2px 6px;
border-radius:12px;
font-size:12px;
}

.event-badge,.hiring-badge{
position:absolute;
top:8px;
left:8px;
background:#198754;
color:#fff;
padding:4px 8px;
border-radius:10px;
font-size:12px;
}


.see-more{
color:#0095f6;
cursor:pointer;
font-weight:500;
}

.see-more:hover{
text-decoration:underline;
}

.profile-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.4);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.profile-popup-content{
background:#fff;
padding:20px;
border-radius:12px;
width:280px;
}

.close-popup{
float:right;
font-size:22px;
cursor:pointer;
}

.text-success{
color:#198754 !important;
}


/*featured story*/

.story-viewer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.story-content{
position:relative;
max-width:500px;
width:100%;
}

.story-content img{
width:100%;
height:auto;
border-radius:8px;
}

.story-close{
position:absolute;
top:20px;
right:20px;
background:none;
border:none;
color:white;
font-size:24px;
cursor:pointer;
}

.story-user{
position:absolute;
top:10px;
left:10px;
display:flex;
align-items:center;
gap:8px;
color:white;
}

.story-user img{
width:35px;
height:35px;
border-radius:50%;
}