/* ---------- Fonts ---------- */
@font-face {
  font-family: "Faith Collapsing";
  src: url("fonts/Faith_Collapsing.ttf") format("truetype");
}
@font-face {
  font-family: "1942 Report";
  src: url("fonts/1942.ttf") format("truetype");
}
@font-face {
  font-family: "Determination";
  src: url("fonts/determination.ttf") format("truetype");
}
@font-face {
  font-family: "Against";
  src: url("fonts/against_regular.ttf") format("truetype");
}
@font-face {
  font-family: "Cherry";
  src: url("fonts/Cherry_Monospace-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat Thin";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
}

/* ---------- Tokens ---------- */
:root {
  --accent: #f7a780;
  --accent-bright: #facab3;
  --accent-dim: #c8896a;
  --panel-bg: #100b0b;
  --panel-border: #6a4632;
  --header-box-bg: #4a352e;
  --input-bg: #160f0d;
  --input-border: #4a352e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: #05040a;
  background-image: url("images/bg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--accent);
  font-family: "Cherry", monospace;
}

/* Only the homepage opts into this — its two-column feed has its own internal scrollbar,
   so the page itself shouldn't also scroll. Every other page (posts, search, admin) scrolls normally. */
html.no-page-scroll, body.no-page-scroll {
  height: 100%;
  overflow: hidden;
}

.site {
  max-height: 100vh;
  max-width: 1275px;
  margin: 0 auto;
  padding: 26px 27px 20px;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  flex: 0 0 auto;
}

.logo {
  position: relative;
  z-index: 2;
  font-family: "Faith Collapsing", serif;
  font-weight: 400;
  font-size: 74px;
  line-height: 1;
  margin: 0;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(247, 167, 128, 0.25);
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  transform: translateY(22px); /* only the descenders of the "gg" dip onto the panel */
}

.logo-link {
  color: inherit;
  text-decoration: none;
}

.logo-link:hover {
  color: var(--accent-bright);
}

.quote {
  font-family: "Faith Collapsing", serif;
  font-size: 30px;
  margin: 0 50px 5px 0;
  color: var(--accent);
  text-align: right;
}

/* ---------- Panel ---------- */
.panel {
  position: relative;
  z-index: 1;
  border: 1px solid var(--panel-border);
  background: rgba(16, 11, 11, 0.7); /* --panel-bg at 70% opacity — kept separate so scrollbar chrome elsewhere stays fully opaque */
  display: flex;
  align-items: stretch;
  min-height: 0;
}

/* Only the homepage caps panel height and uses the internal custom scrollbar below.
   Every other page (single post, search results, admin) just grows naturally and
   scrolls with the browser's normal scrollbar. */
.no-page-scroll .panel {
  /* capped well under the viewport so the whole page reads shorter, not just viewport-filling */
  max-height: 72vh;
}

/* ---------- Feed ---------- */
.feed {
  flex: 1 1 65%;
  padding: 23px 31px;
  min-height: 0;
  border-right: 1px solid var(--panel-border);
}

.no-page-scroll .feed {
  overflow-y: auto;

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* ---------- Scrollbar (lives in the gap between feed and sidebar) — homepage only ---------- */
.no-page-scroll .feed::-webkit-scrollbar {
  width: 14px;
}

.no-page-scroll .feed::-webkit-scrollbar-track {
  background: transparent;
}

.no-page-scroll .feed::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border: 4px solid var(--panel-bg);
  border-radius: 0;
}

.no-page-scroll .feed::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-bright);
}

.no-page-scroll .feed::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
  height: 14px;
  background-color: var(--panel-bg);
  background-image: linear-gradient(-45deg, transparent 50%, var(--accent) 50%),
                     linear-gradient(45deg, transparent 50%, var(--accent) 50%);
  background-position: left top, right top;
  background-size: 7px 7px;
  background-repeat: no-repeat;
}

.no-page-scroll .feed::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  height: 14px;
  background-color: var(--panel-bg);
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                     linear-gradient(-45deg, transparent 50%, var(--accent) 50%);
  background-position: left bottom, right bottom;
  background-size: 7px 7px;
  background-repeat: no-repeat;
}

.no-page-scroll .feed::-webkit-scrollbar-button:vertical:start:increment,
.no-page-scroll .feed::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

.post + .post {
  margin-top: 34px;
  padding-top: 27px;
}

.post-row {
  position: relative;
  border-bottom: 1px solid var(--panel-border);
  padding: 0 130px 7px 0; /* right space reserved for the date, pinned separately below */
  margin-bottom: 22px;
}

.post-title {
  font-family: "Cherry", monospace;
  font-weight: 400;
  font-size: 24px;
  margin: 0;
  letter-spacing: 1px;
}

.post-title a {
  color: inherit;
  text-decoration: none;
}

.post-title a:hover {
  color: var(--accent-bright);
  text-decoration: underline;
}

.post-date {
  position: absolute;
  bottom: 7px; /* sits flush just above the row's border-bottom divider, regardless of title height */
  right: 0;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0.9;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.responses {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}

.responses:hover {
  color: var(--accent-bright);
  text-decoration: underline;
}

.post-body {
  font-family: "Montserrat Thin", sans-serif;
}

.post-body p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.4px;
  margin: 0 0 15px;
}

.see-more {
  font-family: "Cherry", sans-serif;
  color: var(--accent);
  text-decoration: underline;
  font-size: 13px;
}

.see-more:hover {
  color: var(--accent-bright);
}

.post-tags {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tags-label {
  font-family: "Cherry", sans-serif;
  font-size: 11pt;
  opacity: 0.7;
}

.tag {
  font-family: "Cherry", monospace;
  font-size: 11pt;
  color: var(--accent);
  opacity: 0.85;
  text-decoration: none;
}

.tag:hover {
  color: var(--accent-bright);
  text-decoration: underline;
}

/* ---------- Sidebar ---------- */
.sidebar {
  flex: 1 1 30%;
  padding: 20px 27px;
  font-family: "Cherry", sans-serif;
  min-height: 0;
}

.no-page-scroll .sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.sidebar-heading {
  font-family: "Cherry", sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-transform: lowercase;
  background: var(--header-box-bg);
  border: 1px solid var(--panel-border);
  color: var(--accent);
  margin: 0 0 12px;
  padding: 8px 14px;
  opacity: 0.7;
}

.post-list, .link-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.post-list li, .link-list li {
  border-bottom: 1px solid rgba(106, 70, 50, 0.5);
}

.post-list li:last-child, .link-list li:last-child {
  border-bottom: none;
}

.post-list a, .link-list a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.post-list a:hover, .link-list a:hover {
  color: var(--accent-bright);
}

.list-date {
  font-weight: 400;
  opacity: 0.85;
}

.search {
  width: 100%;  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--accent);
  font-family: "Cherry", sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 24px;
}

.search::placeholder {
  color: rgba(247, 167, 128, 0.5);
}

.search:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  html, body { overflow-y: auto; height: auto; }
  .site { height: auto; }
  .panel { flex-direction: column; }
  .feed { border-right: none; border-bottom: 1px solid var(--panel-border); max-height: 400px; }
  .sidebar { max-height: 400px; }
  .logo { font-size: 44px; }
  .quote { font-size: 17px; text-align: left; }
  .site-header { flex-direction: column; align-items: flex-start; margin-bottom: 0; }
  .panel { padding-top: 0; }
}

/* ---------- Comments ---------- */
.comments {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--panel-border);
}

.comment {
  border-bottom: 1px solid rgba(106, 70, 50, 0.5);
  padding: 14px 0;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  font-family: "Cherry", sans-serif;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 6px;
}

.comment-author {
  font-weight: 700;
}

.comment-body {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.no-comments {
  opacity: 0.7;
  font-style: italic;
  font-size: 14px;
}

.comment-form {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 520px;
}

.comment-label {
  font-family: "Cherry", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 10px;
}

.comment-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--accent);
  font-family: "Cherry", monospace;
  font-size: 14px;
  padding: 10px 12px;
  resize: vertical;
}

.comment-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.comment-submit {
  align-self: flex-start;
  margin-top: 14px;
  background: var(--header-box-bg);
  border: 1px solid var(--panel-border);
  color: var(--accent);
  font-family: "Cherry", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 22px;
  cursor: pointer;
}

.comment-submit:hover {
  color: var(--accent-bright);
}

/* Honeypot field — invisible to real visitors, bots tend to fill it anyway */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.search-form {
  margin: 0;
}

/* ---------- Rich content from the WYSIWYG editor ---------- */
.post-body ul, .post-body ol {
  margin: 0 0 15px 22px;
  padding: 0;
}

.post-body li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.post-body a {
  color: var(--accent);
  text-decoration: underline;
}

.post-body a:hover {
  color: var(--accent-bright);
}

.post-body strong { font-weight: 700; }
.post-body em { font-style: italic; }

.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
  margin: 20px 0 10px;
  letter-spacing: 0.5px;
}

.post-body pre {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 12px;
  overflow-x: auto;
  font-size: 13px;
}

.form-error-inline {
  color: #ff8a8a;
  font-size: 14px;
  margin: 0 0 16px;
}