/* DezPost site styles — replaces Bootstrap 2.
   A small, self-contained sheet: base element styling plus the handful of
   component classes the templates actually use (buttons, alerts, labels,
   navbar, forms, table, pagination). Layout is done with flexbox directly;
   Bootstrap's float-based grid (row/span*) is gone. */

/* ---- Base ---- */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}
a { color: #0a66c2; text-decoration: none; }
a:hover { color: #084c91; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0.6em 0 0.4em; font-weight: 600; }
h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }
p { margin: 0 0 0.8em; }

hr { border: none; border-top: 1px solid #e2e2e2; margin: 1.5em 0; }

/* ---- Form controls ---- */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: #0a66c2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.15);
}
label { display: inline-block; margin-bottom: 4px; font-weight: 600; }

/* Sign in / sign up: stack each label above its input so the input fields line
   up vertically regardless of label length ("Password Again" vs "Email"). */
.authForms label { display: block; }
.authForms input { width: 100%; }

/* Stacked form layout (replaces Bootstrap 2's horizontal-form scaffolding). */
.control-group { margin-bottom: 12px; }
.control-label { display: block; margin-bottom: 4px; font-weight: 600; }
.controls { display: block; }
.span2 { width: 12em; }            /* legacy narrow-input width */
.input-append { display: flex; gap: 6px; align-items: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
}
.btn:hover { background: #e9e9e9; text-decoration: none; color: #333; }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: default; }

.btn-primary { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.btn-primary:hover { background: #084c91; border-color: #084c91; color: #fff; }
.btn-danger { background: #d23b3b; border-color: #d23b3b; color: #fff; }
.btn-danger:hover { background: #b32e2e; border-color: #b32e2e; color: #fff; }
.btn-success { background: #2e8b4f; border-color: #2e8b4f; color: #fff; }
.btn-success:hover { background: #246e3f; border-color: #246e3f; color: #fff; }
.btn-warning { background: #e08a1e; border-color: #e08a1e; color: #fff; }
.btn-warning:hover { background: #c0731a; border-color: #c0731a; color: #fff; }

.btn-large { padding: 10px 18px; font-size: 16px; }
.btn-small { padding: 4px 10px; font-size: 13px; }
.btn-mini  { padding: 2px 8px; font-size: 12px; }

/* ---- Alerts ---- */
.alert {
  padding: 10px 14px;
  border: 1px solid #cfe0f3;
  border-radius: 6px;
  background: #eef4fb;
  color: #1c3a5e;
  margin-bottom: 1em;
}
.alert-success { background: #e6f4ea; border-color: #bfe3c9; color: #1e5631; }
.alert-error   { background: #fdecea; border-color: #f5c6c2; color: #842029; }

/* ---- Labels / badges ---- */
.label {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 10px;
  background: #888;
  color: #fff;
}
.label-info    { background: #3a87c8; }
.label-success { background: #2e8b4f; }
.label-warning { background: #e08a1e; }

/* ---- Navbar ---- */
.navbar { margin-bottom: 1em; }
.navbar-inner {
  background: #2b2f36;
  border-radius: 8px;
  padding: 8px 12px;
}
.navbar .container { display: flex; align-items: center; gap: 8px; }
.navbar .nav {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  order: -1;            /* keep nav links left of the sign-in button (which is first in the DOM) */
}
.navbar .nav li a {
  display: block;
  padding: 6px 12px;
  border-radius: 6px;
  color: #cdd2da;
  text-decoration: none;
}
.navbar .nav li a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.navbar .nav li.active a { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pull-right { margin-left: auto; }

/* ---- Table ---- */
.table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.table th, .table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e2e2e2; }
.table th { border-bottom: 2px solid #ccc; }
.table-striped tbody tr:nth-child(odd) { background: #f7f7f7; }

/* ---- Pagination ---- */
.pagination ul {
  display: flex;
  list-style: none;
  gap: 4px;
  padding: 0;
  margin: 1em 0;
}
.pagination-centered ul { justify-content: center; }
.pagination li a {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #0a66c2;
  text-decoration: none;
}
.pagination li a:hover { background: #f0f6fc; }
.pagination li.active a { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.pagination li.disabled a { color: #aaa; background: #f5f5f5; pointer-events: none; }

/* ---- Scene / background (shared by every page via layout) ---- */
@view-transition { navigation: auto; }
/* Center the page content on the full viewport width (100vw) so it stays put
   when a scrollbar appears/disappears. overflow-x: clip swallows the
   ~scrollbar-width of horizontal overflow 100vw introduces (no h-scroll) and
   does not clip the fixed full-width background layers. */
html { overflow-x: clip; }
.modalx {
  background-color: rgba(255, 255, 255, 1.0);
  height: 100%;
  padding: 0.5em;
  border-radius: 5px;
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  margin-top: 5px;
  margin-left: 20px;
  margin-right: 20px;
  opacity: 0;
  flex-direction: column;
  flex: 0 1 400px;
  transition: margin-top 0.25s, opacity 0.25s, ease-in-out;
}
.modalx.show { margin-top: 40px; opacity: 1; }
.modalContainer {
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: fixed;
  top: 0px; left: 0px;
  min-width: 100%; min-height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, ease-in-out;
}
.modalContainer.show { opacity: 1; pointer-events: auto; }
#bgCanvas { position: fixed; background-color: #CFE8F7; z-index: -100; }
/* Use 100vw (full window width, incl. scrollbar) to match the canvas drawing
   buffer (window.innerWidth). With width:100% the display width would shrink
   when a scrollbar appears (e.g. on the tall home page) while the buffer
   stayed full, rescaling every avatar's position and making them jump on
   navigation. The walkers stop ~48px short of the edge, so they never reach
   under the scrollbar. */
/* Green ground strip the avatars walk on. Layered behind the page content
   but in front of the distant background: mountains (-4) < grass (-3) <
   temple (-2) < avatars (-1) < content. Its banded gradient (dark at top ->
   light at bottom) is set per time-of-day by site.js, like the sky.
   The mountains sit on its top edge (bottom: 32px); the temple overlaps it
   (bottom: 28px); the avatars stand around the middle of the grass with a
   slight per-avatar vertical variance. */
#bgGround {
  position: fixed; bottom: 0; left: 0; width: 100vw; height: 32px; z-index: -3; pointer-events: none;
  background: #5A9032; /* fallback; the time-of-day script sets the banded per-period gradient */
}
#avatarCanvas { position: fixed; bottom: 0; left: 0; width: 100vw; height: 72px; pointer-events: none; z-index: -1; image-rendering: pixelated; }
#pageContainer {
  background-color: rgba(255, 255, 255, 1.0);
  height: 100%;
  border-radius: 10px;
  padding-left: 1em; padding-right: 1em;
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
}
.pixelated { image-rendering: pixelated; image-rendering: -moz-crisp-edges; }
.background { z-index: -4; position: fixed; }
#bgSky { width: 100%; height: 100%; }
#bgMountains { background-repeat: repeat-x; background-size: 128px 124px; width: 100%; height: 124px; bottom: 32px; }
#bgTemple { width: 60px; height: 80px; left: 40px; bottom: 28px; z-index: -2; }
#bgCloud1 { width: 64px; height: 16px; }
#bgCloud2 { width: 104px; height: 28px; }
#bgCloud3 { width: 44px; height: 16px; }
#bgCloud4 { width: 48px; height: 16px; }
#bgCloud5 { width: 56px; height: 20px; }
#bgCloud6 { width: 224px; height: 52px; }
.itemList div { padding-top:5px; padding-bottom:5px; padding-left:7px; border-radius:2px; }
.itemList div:nth-child(odd) { background-color: rgba(215,215,215,0.4); }
.tag-link + .tag-link::before { content: ", "; }
.comment { display: flex; gap: 7px; padding: 5px; }
.comment-author { flex: 0 0 60px; }
.comment-body { flex: 1; min-width: 0; }
#commentsDiv > div:nth-child(even) { background-color: rgba(215,215,215,0.4); }
@keyframes cloudX { from { left: 100%; } to { left: -300px; } }
@keyframes cloudBob {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(100px); }
  50%  { transform: translateY(0px); }
  75%  { transform: translateY(-100px); }
  100% { transform: translateY(0px); }
}
#bgCloud1, #bgCloud2, #bgCloud3, #bgCloud4, #bgCloud5, #bgCloud6 {
  animation-name: cloudX, cloudBob;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}