/* ===== BASE ===== */
* { box-sizing: border-box; }
html, body {
  height: 100%;              /* full height for sticky footer */
  margin: 0;
}
body {
  display: flex;             /* vertical layout */
  flex-direction: column;
  font-family: Arial, sans-serif;
  background: #fff;
  color: #222;
}

/* ===== HEADER / NAV ===== */
header {
  background: #f2f2f2;
  border-bottom: 1px solid #ddd;
}
header nav {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
  display: flex;   /* flex for menu */
  gap: 8px;
  align-items: center; /* Lev: align links & avatar vertically */
}
/* child selector */
nav > a {
  text-decoration: none;
  color: #222;
  padding: 6px 10px;
  border-radius: 6px;
}
/* hover */
nav > a:hover {
  background: #e0e0e0;
}

/* Lev: normalize avatar size and shape (no stretch) */
.user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block; /* Lev: removes inline gaps around img */
}

/* ===== MAIN LAYOUT ===== */
main {
  flex: 1;                   /* takes available space */
  max-width: 900px;          /* Lev: slightly narrower page */
  margin: 0 auto;
  padding: 14px;             /* Lev: a bit tighter padding */
  display: flex;             /* 3 columns */
  gap: 14px;                 /* Lev: smaller gap */
}
.sidebar-left,
.sidebar-right {
  flex: 0 0 180px;           /* Lev: slimmer sidebars */
  border: 1px solid #ddd;
  padding: 8px;              /* Lev: tighter padding */
  border-radius: 6px;
  background: #fafafa;
}
/* descendant selector */
.sidebar-left p {
  margin: 0;
  color: #555;
}
.posts {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ===== POSTS ===== */
.post {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;              /*Lev smaller box */
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;                  /*Lev tighter inner gap */
  margin-bottom: 10px;       /*Lev tighter list spacing */
  transition: box-shadow .15s ease; /* subtle hover */
}
.post:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06); } /* Lev */
 /* pseudo-element */
.post::before {
  content: "";
  display: inline-block;
  width: 3px;                /* Lev: thinner accent bar */
  height: 100%;
  background: #ddd;
  margin-right: 6px;
}
.post .date {
  font-size: 12px;
  color: #666;
  min-width: 85px;           /* Lev: smaller date width */
}
.like-button {
  margin-left: auto;
  border: 1px solid #ddd;
  background: #f7f7f7;
  padding: 4px 6px;          /* Lev: smaller button */
  border-radius: 6px;
  cursor: pointer;
}
.like-button:hover { background: #eee; }
/* adjacent sibling */
.post + .post { border-top: 1px solid #eee; }
/* general sibling */
.post ~ .post { margin-top: 6px; } /* Lev: a bit less top margin */

/* ===== ADD POST PAGE ===== */
/* Lev: make the add-post box smaller and centered; prevent flex stretching */
.add-post-box {
  max-width: 420px;      /* smaller box */
  width: 100%;
  align-self: center;    /* vertically center within main */
  margin: 24px auto;     /* horizontal center + some top/bottom space */
  padding: 12px;         /* keep your padding */
  height: auto;          /* ensure natural height */
}

textarea {
  width: 100%;
  min-height: 110px;         /* smaller default height */
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  font: inherit;
  outline: none;
  resize: vertical;          /* allow vertical resize */
}
/* focus */
textarea:focus { border-color: #999; }
.file-section {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* id selector */
#file-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* adjacent sibling with focus */
#file-input:focus + .file-button {
  outline: 2px solid #999;
  outline-offset: 2px;
}
.file-button,
.create-button,
.login-button {
  border: 1px solid #ddd;
  background: #f7f7f7;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.file-button:hover,
.create-button:hover,
.login-button:hover {
  background: #eee;
}

/* ===== LOGIN PAGE ===== */
.login-box {
  max-width: 340px;          /* Levsmaller login box */
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 12px;             /* tighter padding */
  border-radius: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;                  /*Lev tighter gap */
  text-align: center;
}
#email,
#password {
  width: 100%;
  padding: 9px;              /* Lev slightly slimmer inputs */
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font: inherit;
  text-align: left;
}
/* pseudo-element placeholder */
#email::placeholder,
#password::placeholder { color: #888; }
#email:focus,
#password:focus { border-color: #999; }
/* adjacent sibling for spacing */
#email + #password { margin-top: 6px; } /* Lev: tighter spacing */
.login-button { width: 100%; }

/* ===== FOOTER ===== */
footer {
  background: #f2f2f2;
  border-top: 1px solid #ddd;
}
footer p {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px;              /* Lev: smaller footer padding */
  color: #666;
  text-align: center;
  font-size: 14px;           /* Lev: slightly smaller text */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
  main { flex-direction: column; }
  .sidebar-left, .sidebar-right { flex-basis: auto; width: 100%; }
}

/* visible focus for links */
a:focus { outline: 2px solid #999; outline-offset: 2px; }


/* Lev: center Login page only (no impact on other pages) */
.page-login main {
  justify-content: center;   /* Lev: horizontal center */
  align-items: center;       /* Lev: vertical center */
  min-height: calc(100vh - 120px); /* Lev: account for header+footer approx */
}

/* Lev: make login card a bit smaller */
.login-box {
  max-width: 320px;  /* Lev: smaller width */
  padding: 12px;     /* Lev: compact padding */
  margin: 0 auto;    /* Lev: keep horizontal centering fallback */
}