/* Font stack + smoothing for crisper rendering on Windows */
body { 
  font-family: system-ui, "Segoe UI Variable", "Segoe UI", "Inter", Roboto, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}
body.bg { background: url('../img/bg.jpg') center/cover no-repeat fixed; min-height: 100vh; }
.container { max-width: 900px; margin: 0 auto; padding: 1rem; }
.nav { background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,0.1); }
.nav .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; text-decoration: none; color: #111; }
.nav .brand .logo { width: 28px; height: 28px; display: inline-block; }
.nav .brand .brand-title { font-family: 'Manrope', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.2px; }
.nav .menu { list-style: none; display: inline-flex; gap: 1rem; margin: 0 0 0 1rem; padding: 0; vertical-align: middle; }
.card { background: rgba(255,255,255,0.84); border-radius: 8px; padding: 0.6rem 0.7rem; margin: 0.6rem 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
img, video { width: 100%; height: auto; border-radius: 6px; }
.login-card { background: rgba(255,255,255,0.84); padding: 1.5rem; border-radius: 10px; max-width: 360px; }
.login-card.center { position: relative; margin: 0 auto; top: 6vh; }
.form label { display: block; margin-top: 0.5rem; }
.form input, .form textarea { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px; background: rgba(255,255,255,0.9); }
.form button, .login-card button { margin-top: 0.75rem; padding: 0.5rem 0.75rem; border: none; background: #111; color: #fff; border-radius: 6px; cursor: pointer; }
.link { background: transparent; color: #111; text-decoration: underline; }
.flash { list-style: none; padding: 0; }
.flash li { padding: 0.5rem 0.75rem; margin: 0.5rem 0; border-radius: 6px; }
.flash .success { background: rgba(46,204,113,0.2); }
.flash .error { background: rgba(231,76,60,0.2); }
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); }
.modal.show { display: flex; }
.modal .modal-content { background: rgba(255,255,255,0.96); padding: 1rem; border-radius: 10px; width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.modal .modal-content label { color: #111; font-weight: 500; }
.modal .modal-content input, .modal .modal-content textarea { background: rgba(255,255,255,0.98); color: #111; }
.modal .modal-content input::placeholder, .modal .modal-content textarea::placeholder { color: #666; opacity: 1; }
.checkbox { display: flex; align-items: center; gap: 0.5rem; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.inline { display: inline-flex; gap: 0.5rem; align-items: center; }
.actions .danger { background: #b00020; }
.post-header { display: grid; grid-template-columns: auto 1fr auto; gap: 0.3rem; cursor: pointer; }
.post-header .title { justify-self: start; font-family: 'Manrope', 'Inter', system-ui, sans-serif; font-weight: 700; }
.post-header .author { color: #444; font-size: 0.9rem; }
.post .post-body { margin-top: 0.35rem; }
.post .post-body p { margin: 0.2rem 0; line-height: 1.3; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.col.text { white-space: pre-wrap; }
.col.media { align-self: start; }
.actions-row { margin-top: 0.35rem; gap: 0.5rem; }
.actions-row .link { padding: 0; }
.actions-row .danger { padding: 0.3rem 0.5rem; }

/* Emoji reactions: horizontal row */
.reactions { display: flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0; flex-wrap: wrap; }
.reaction-form { display: inline-flex; }
.reaction-form button { padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.85); }

/* Halvtransparent bakgrund för huvudinnehållet */
main.container { background: rgba(255,255,255,0.8); backdrop-filter: blur(4px); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

/* Login-vy: ännu lättare panel och fokus på login-kortet */
body.login-view main.container { background: transparent; box-shadow: none; border-radius: 0; }
@media (max-width: 480px) {
  .login-card.center { top: 3vh; }
}

/* Tydligare fält ovanpå bakgrundsbilden */
.form input, .form textarea { background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.2); }
.form label { color: #111; font-weight: 500; }

@media (min-resolution: 2dppx) {
  .post-header .title,
  .nav .brand .brand-title { font-weight: 600; }
}
@media (min-resolution: 1.5dppx) and (max-resolution: 1.99dppx) {
  .post-header .title,
  .nav .brand .brand-title { font-weight: 650; }
}
@media (max-resolution: 1.24dppx) {
  .post-header .title,
  .nav .brand .brand-title { letter-spacing: 0.1px; }
}

/* Mobilanpassning */
@media (max-width: 640px) {
  /* Global basfont tillbaka till 15px */
  body { font-size: 15px; }
  .card { padding: 0.5rem 0.6rem; margin: 0.5rem 0; }
  /* Mobil-list: rad 1 = datum + titel, rad 2 = författare under datum */
  .post-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    align-items: baseline;
    white-space: nowrap;
  }
  .post-header .meta { grid-column: 1; grid-row: 1; font-size: 0.82em; }
  .post-header .title { grid-column: 2; grid-row: 1 / span 2; min-width: 0; font-size: 0.92em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .post-header .author { grid-column: 1; grid-row: 2; display: block; font-size: 0.8em; color: #555; white-space: normal; }
  /* Mindre text inne i inläggsrutan (brödtext) och mindre vertikal luft */
  .post .post-body p { font-size: 0.85em; line-height: 1.35; margin: 0.25rem 0; }
  .cols { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .form label { font-size: 0.9rem; }
  .form input, .form textarea { padding: 0.4rem; font-size: 0.9rem; }
}