/* franciszekszpak.pl: styl LiveJournal / Verdana */

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

html { scroll-behavior: smooth; }

body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  background: #ffffff;
  color: #000;
}

a { color: #003366; text-decoration: underline; cursor: pointer; }
a:hover { color: #0055aa; }

/* ── TOP BAR ── */
#topbar {
  background: #003366;
  color: #fff;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 3px solid #ff9900;
}

#topbar .logo {
  font-size: 20px;
  font-weight: bold;
  color: #66aaff;
  font-style: italic;
  letter-spacing: -1px;
  text-decoration: none;
}

#topbar .logo:hover { color: #99ccff; }

#topbar .site-name { font-size: 14px; font-weight: bold; }

#topbar .tagline {
  font-size: 10px;
  color: #aaccff;
  margin-top: 2px;
}

#topbar .tagline a {
  color: #cce8ff;
  text-decoration: underline;
}

#topbar .tagline a:hover { color: #fff; }

/* ── NAV ── */
#nav {
  background: #336699;
  padding: 4px 14px;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#nav a {
  color: #fff;
  text-decoration: none;
}

#nav a:hover { text-decoration: underline; }

#nav a.nav-current {
  font-weight: bold;
  text-decoration: underline;
}

/* ── LAYOUT ── */
#wrapper {
  display: flex;
  gap: 12px;
  padding: 10px 10px 20px;
  max-width: 960px;
  margin: 0 auto;
}

#sidebar { width: 165px; flex-shrink: 0; }

.sbox {
  background: #fff;
  border: 1px solid #99aacc;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 11px;
}

.sbox-title {
  background: #336699;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 6px;
  margin: -8px -8px 7px -8px;
}

.avatar {
  width: 72px;
  height: 72px;
  background: #003366;
  border: 2px solid #336699;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaccff;
  font-size: 24px;
  font-weight: bold;
  margin: 4px auto 6px;
  font-family: Verdana, sans-serif;
}

.profile-name {
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #000;
}

.profile-sub {
  text-align: center;
  font-size: 10px;
  color: #555;
  margin-top: 2px;
}

.user-table { width: 100%; font-size: 10px; color: #333; border-collapse: collapse; }
.user-table td { padding: 2px 0; }
.user-table td:first-child { color: #666; width: 50%; }

.interests-list { font-size: 10px; color: #003366; line-height: 2; }

.proj-link {
  display: block;
  font-size: 10px;
  color: #003366;
  line-height: 2;
}

.proj-link::before { content: "▶ "; }

.sidebar-text { font-size: 10px; color: #555; line-height: 1.7; }

/* ── MAIN ── */
#main { flex: 1; min-width: 0; }

.page-title {
  background: #c8d8e8;
  border: 1px solid #99aacc;
  padding: 6px 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: bold;
  color: #003366;
}

.entry {
  background: #fff;
  border: 1px solid #99aacc;
  margin-bottom: 12px;
}

.entry-header {
  background: #c8d8e8;
  padding: 5px 10px;
  font-size: 11px;
  color: #333;
  border-bottom: 1px solid #99aacc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.entry-title {
  font-weight: bold;
  color: #003366;
  font-size: 13px;
}

.entry-body {
  padding: 10px 12px;
  line-height: 1.8;
  color: #000;
  font-size: 12px;
}

.entry-body p { margin-bottom: 8px; }
.entry-body p:last-child { margin-bottom: 0; }

.entry-footer {
  background: #eef3f8;
  border-top: 1px solid #99aacc;
  padding: 4px 10px;
  font-size: 10px;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.entry-footer a { color: #003366; }

.comment-wrap {
  background: #f0f4f8;
  border-top: 1px solid #99aacc;
  padding: 8px 12px;
}

.comment {
  border-bottom: 1px dotted #99aacc;
  padding: 6px 0;
  font-size: 11px;
  color: #333;
}

.comment:last-of-type { border-bottom: none; }

.comment-user { color: #003366; font-weight: bold; }
.comment-time { color: #888; font-size: 10px; }

.comment-form {
  border-top: 1px solid #99aacc;
  background: #eef3f8;
  padding: 8px 12px;
}

.comment-form p { font-size: 11px; font-weight: bold; color: #003366; margin-bottom: 6px; }

.comment-form input[type=text],
.comment-form textarea,
.form-block input[type=text],
.form-block textarea {
  width: 100%;
  max-width: 100%;
  border: 1px inset #99aacc;
  background: #fff;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  padding: 4px;
  margin-bottom: 6px;
  display: block;
}

.comment-form textarea { height: 60px; resize: vertical; }

.form-block textarea {
  min-height: 160px;
  height: auto;
  resize: vertical;
}

.comment-form button,
.btn-retro {
  background: #336699;
  color: #fff;
  border: 1px outset #aaaaff;
  padding: 4px 14px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.comment-form button:hover,
.btn-retro:hover { background: #003366; }

a.btn-retro {
  color: #fff;
  text-decoration: none;
}

a.btn-retro:hover {
  color: #fff;
  text-decoration: none;
}

.form-block p { font-size: 11px; font-weight: bold; color: #003366; margin-bottom: 6px; margin-top: 8px; }
.form-block p:first-child { margin-top: 0; }

/* ── FOOTER ── */
#footer {
  background: #003366;
  color: #aaccff;
  text-align: center;
  padding: 8px;
  font-size: 10px;
  border-top: 3px solid #ff9900;
  margin-top: 8px;
}

#footer a { color: #66aaff; }

/* ── HIT COUNTER ── */
.hit-counter {
  background: #000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 16px;
  padding: 3px 8px;
  display: inline-block;
  border: 2px inset #00aa00;
  letter-spacing: 4px;
  margin: 4px 0;
}

/* ── tabele (archiwum, znajomi, profil) ── */
.retro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border: 1px solid #99aacc;
}

.retro-table th {
  background: #336699;
  color: #fff;
  padding: 6px 8px;
  text-align: left;
  font-size: 11px;
  border: 1px solid #2a5080;
}

.retro-table td {
  padding: 8px;
  border-bottom: 1px solid #ccc;
  vertical-align: top;
}

.retro-table tr:nth-child(even) td { background: #f8fafc; }

.blink-soft { opacity: 1; }

/* ── kalendarz ── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #99aacc;
  border: 1px solid #99aacc;
  font-size: 11px;
}

.cal-grid div {
  background: #fff;
  padding: 6px 4px;
  text-align: center;
  min-height: 2em;
}

.cal-grid .cal-h {
  background: #336699;
  color: #fff;
  font-weight: bold;
}

.cal-grid .cal-empty { background: #f0f0f0; }

.cal-grid .cal-today {
  background: #ffffcc;
  font-weight: bold;
  outline: 1px solid #ff9900;
}

.cal-grid a { font-weight: bold; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  #wrapper { flex-direction: column; }
  #sidebar { width: 100%; }
}