/* style.css – Version 56 (polish + stable glass) */
:root {
  --primary-color: #467c9e;       /* main hue */
  --secondary-color: #e68f46;     /* accent */
  --header-bg: #ffffff;
  --header-text: #204b63;
  --container-bg: rgba(255,255,255,0.36);
  --header-height: 100px;
}

/* Box‐sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Base reset */
html, body {
  height: 100%; margin: 0; padding: 0;
  font-family: Arial, sans-serif;
  background: url('/community/uploads/city_limits.png') no-repeat center center fixed;
  background-size: cover;
  background-color: #eef2f5;
  padding-top: var(--header-height);
}
body::before {
  content: ""; position: fixed; inset: 0;
  background: rgba(255,255,255,0.32);
  pointer-events: none; z-index: -1;
}

/* Header */
header.site-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-height);
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: var(--header-text);
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  z-index: 1000;
}
header.site-header > .container {
  max-width: none; margin: 0; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logo & nav */
.logo { display: flex; align-items: center; text-decoration: none; }
.site-logo { height: calc(var(--header-height) - 20px); }
nav.main-nav { display: flex; gap: 15px; }
nav.main-nav a {
  color: var(--header-text);
  text-decoration: none;
  font-weight: bold;
}
nav.main-nav a:hover { color: var(--primary-color); }

/* Unified container */
.container {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 20px;
  background: var(--container-bg);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
@media (max-width: 1000px) {
  .container { margin: 0 20px 40px; }
}

/* Layout wrapper */
.layout { display: flex; gap: 20px; }
@media (max-width: 1000px) { .layout { flex-direction: column; } }

/* Sidebar */
.sidebar {
  position: sticky; top: var(--header-height);
  width: 15%; min-width: 160px;
  max-height: calc(100vh - var(--header-height) - 20px);
  overflow-y: auto;
  background: var(--container-bg);
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.sidebar-section h2 {
  margin-top: 0;
  font-size: 1.1em;
  color: var(--primary-color);
}
.sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
}

/* Flash messages */
.flash { padding: 10px; margin-bottom: 15px; border-radius: 4px; font-weight: bold; }
.flash.success { background: #e8f5e9; color: #2e7d32; }
.flash.error   { background: #fdecea; color: #b71c1c; }

/* Buttons */
button,
.btn-load-more,
.new-post-form button,
.edit-profile-link a,
.action-buttons a,
.action-buttons button {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}
button:hover,
.action-buttons a:hover { background: var(--secondary-color); }
.btn-pending { background: var(--primary-color); opacity: 0.7; cursor: default; }

/* New Post Form */
.new-post-form {
  background: rgba(255,255,255,0.38);
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 14px;
  padding: 15px;
  margin-bottom: 20px;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Posts list */
.posts-list { display: flex; flex-direction: column; gap: 20px; }
.post {
  background: rgba(255,255,255,0.36);
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: visible;
}

/* Post media */
.post-photo, .post-video {
  width: 100%; max-height: 65vh; object-fit: cover; border-radius: 12px; background: #000;
}

/* Comments */
.comments-container { border-top: 1px solid #eee; background: rgba(255,255,255,0.32); }
.comment { background: rgba(255,255,255,0.45); border-left: 3px solid var(--primary-color); border-radius: 6px; padding: 8px; }

/* Accessibility */
:focus-visible { outline: 3px solid rgba(99,102,241,0.35); outline-offset: 2px; }