/* =========================================================
   JEETS LQST — IMAGEBOARD STYLE
   Brown /jeets/ + White /tab8/ Soyjak-style theme
========================================================= */


/* =========================================================
   GLOBAL BACKGROUND
========================================================= */

html {
  background-color: #160d09;
  background-image: url("background4.png");
  background-repeat: repeat;
  background-size: 64px 64px;
  background-attachment: fixed;

  color: #eee1d2;

  scrollbar-width: thin;
  scrollbar-color: #8f6342 #160d09;
}

body {
  margin: 0;
  min-height: 100vh;

  padding-top: 30px;
  box-sizing: border-box;

  background: rgba(22, 13, 9, 0.78);

  color: #eee1d2;

  font-family: Arial, Helvetica, sans-serif;

  overflow-x: hidden;
}


/* =========================================================
   TAB8 THEME
   White / light Soyjak-style appearance
========================================================= */

html:has(#tab8-theme) {
  background-color: #f1f1f1;
  background-image: url("tab8/tab8bg.png");
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;

  color: #222;

  scrollbar-color: #999 #e8e8e8;
}

body:has(#tab8-theme) {
  background: rgba(255, 255, 255, 0.08);

  color: #222;
}


/* =========================================================
   GLOBAL FIXED TOP NAV
========================================================= */

.top-nav {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 99999;

  box-sizing: border-box;

  width: 100%;

  margin: 0;
  padding: 5px 8px;

  background: rgba(66, 39, 25, 0.97);

  border: 0;
  border-bottom: 1px solid #805b3c;

  text-align: left;
}

.top-nav a {
  display: inline-block;

  margin-right: 14px;

  color: #d6a875;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;

  text-decoration: none;
}

.top-nav a:hover {
  color: #f0c89d;

  text-decoration: underline;
}


/* =========================================================
   TAB8 NAV
========================================================= */

body:has(#tab8-theme) .top-nav {
  background: rgba(238, 238, 238, 0.98);

  border-bottom-color: #aaa;
}

body:has(#tab8-theme) .top-nav a {
  color: #0000ee;
}

body:has(#tab8-theme) .top-nav a:hover {
  color: #551a8b;
}


/* =========================================================
   TAB8 LIGHT THEME ELEMENTS
========================================================= */

body:has(#tab8-theme) a {
  color: #0000ee;
}

body:has(#tab8-theme) a:hover {
  color: #551a8b;
}

body:has(#tab8-theme) .header-box {
  background: rgba(238, 238, 238, 0.96);
  border-color: #aaa;
}

body:has(#tab8-theme) .forum-title {
  background: rgba(238, 238, 238, 0.96);
  border-color: #aaa;
}

body:has(#tab8-theme) .forum-title::before {
  background: #aaa;
}

body:has(#tab8-theme) .forum-title h1 {
  color: #222;
  text-shadow: none;
}

body:has(#tab8-theme) .forum-title p {
  color: #555;
}

body:has(#tab8-theme) .forum-title a {
  color: #0000ee;
}

body:has(#tab8-theme) .post-form {
  background: rgba(238, 238, 238, 0.96);
  border-color: #aaa;
}

body:has(#tab8-theme) .post-form h2 {
  color: #222;
}

body:has(#tab8-theme) .post-form input,
body:has(#tab8-theme) .post-form textarea {
  background: #fff;
  border-color: #aaa;
  color: #222;
}

body:has(#tab8-theme) .post-form input:focus,
body:has(#tab8-theme) .post-form textarea:focus {
  background: #fff;
  border-color: #777;
}

body:has(#tab8-theme) .post-form input::placeholder,
body:has(#tab8-theme) .post-form textarea::placeholder {
  color: #777;
}

body:has(#tab8-theme) .image-label,
body:has(#tab8-theme) .media-label {
  color: #555;
}


/* =========================================================
   TAB8 BUTTONS
========================================================= */

body:has(#tab8-theme) button {
  background: #ddd;

  border-color: #999;

  color: #222;
}

body:has(#tab8-theme) button:hover {
  background: #ccc;

  border-color: #777;

  color: #000;
}


/* =========================================================
   TAB8 POSTS
========================================================= */

body:has(#tab8-theme) .forum-post {
  background: rgba(238, 238, 238, 0.96);

  border-color: #aaa;
}

body:has(#tab8-theme) .forum-post:hover {
  border-color: #888;
}

body:has(#tab8-theme) .post-header {
  background: rgba(221, 221, 221, 0.96);

  border-bottom-color: #aaa;

  color: #555;
}

body:has(#tab8-theme) .post-header strong {
  color: #222;
}

body:has(#tab8-theme) .post-date {
  color: #777;
}

body:has(#tab8-theme) .forum-post h2 {
  color: #222;
}

body:has(#tab8-theme) .post-content {
  color: #333;
}

body:has(#tab8-theme) .post-image {
  border-color: #aaa;
}

body:has(#tab8-theme) .post-image:hover {
  border-color: #777;
}

body:has(#tab8-theme) .reply-button {
  color: #0000ee;
}

body:has(#tab8-theme) .reply-button:hover {
  color: #551a8b;
}

body:has(#tab8-theme) .delete-button {
  color: #777;
}

body:has(#tab8-theme) .delete-button:hover {
  color: #cc0000;
}


/* =========================================================
   TAB8 REPLIES
========================================================= */

body:has(#tab8-theme) .reply-box {
  background: rgba(221, 221, 221, 0.9);

  border-color: #aaa;
}

body:has(#tab8-theme) .reply-box input,
body:has(#tab8-theme) .reply-box textarea {
  background: #fff;

  border-color: #aaa;

  color: #222;
}

body:has(#tab8-theme) .reply-box input:focus,
body:has(#tab8-theme) .reply-box textarea:focus {
  border-color: #777;
}

body:has(#tab8-theme) .replies {
  border-left-color: #aaa;
}

body:has(#tab8-theme) .forum-reply {
  background: rgba(245, 245, 245, 0.96);

  border-color: #aaa;
}

body:has(#tab8-theme) .reply-header {
  color: #555;
}

body:has(#tab8-theme) .reply-header strong {
  color: #222;
}

body:has(#tab8-theme) .reply-content {
  color: #333;
}


/* =========================================================
   TAB8 EMPTY / STATUS
========================================================= */

body:has(#tab8-theme) .empty-post {
  background: rgba(238, 238, 238, 0.96);

  border-color: #aaa;

  color: #555;
}


/* =========================================================
   TEXT
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial, Helvetica, sans-serif;

  font-weight: bold;
}

p {
  line-height: 1.4;
}

a {
  color: #d6a875;

  font-weight: normal;

  text-decoration: underline;
}

a:hover {
  color: #f0c89d;
}


/* =========================================================
   PAGE
========================================================= */

#page {
  width: 900px;

  max-width: calc(100% - 16px);

  margin: 0 auto;

  padding: 8px 0 50px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  margin: 0 0 8px;

  text-align: center;
}

.header-logo {
  display: inline-block;
}

.header-image {
  display: block;

  width: 150px;
  height: auto;

  margin: 0 auto;

  border: 1px solid #795438;

  border-radius: 0;
}

.header-image:hover {
  filter: brightness(1.08);
}


/* =========================================================
   MASON IMAGE BOX
========================================================= */

.header-box {
  display: table;

  margin: 7px auto 8px;

  padding: 5px;

  background: rgba(66, 39, 25, 0.94);

  border: 1px solid #805b3c;
}

.mason-image {
  display: block;

  width: 150px;
  height: auto;

  margin: 0;
}


/* =========================================================
   FORUM TITLE
========================================================= */

.forum-title {
  position: relative;

  margin: 8px 0;

  padding: 9px 12px;

  background: rgba(39, 23, 15, 0.97);

  border: 1px solid #805b3c;

  text-align: center;
}

.forum-title::before {
  content: "";

  display: block;

  height: 1px;

  margin-bottom: 8px;

  background: #8c6343;
}

.forum-title h1 {
  margin: 3px 0 6px;

  color: #e2b887;

  font-size: 19px;

  line-height: 1.3;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6);
}

.forum-title p {
  margin: 3px 0;

  color: #bca794;

  font-size: 12px;
}

.forum-title a {
  color: #d6a875;
}


/* =========================================================
   POST FORM
========================================================= */

.post-form {
  margin: 8px 0;

  padding: 9px;

  background: rgba(52, 31, 19, 0.97);

  border: 1px solid #725039;
}

.post-form h2 {
  margin: 0 0 8px;

  color: #dfb581;

  font-size: 13px;
}

.post-form input,
.post-form textarea {
  display: block;

  box-sizing: border-box;

  width: 100%;

  margin: 5px 0;

  padding: 6px 8px;

  background: #21130d;

  border: 1px solid #60432e;

  border-radius: 0;

  color: #eee1d2;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 13px;

  outline: none;
}

.post-form input:focus,
.post-form textarea:focus {
  background: #28180f;

  border-color: #ad8055;
}

.post-form input::placeholder,
.post-form textarea::placeholder {
  color: #806c5a;
}

.post-form textarea {
  min-height: 90px;

  resize: vertical;
}

.image-label,
.media-label {
  display: block;

  margin: 7px 0;

  color: #bca794;

  font-size: 11px;
}


/* =========================================================
   BUTTONS
========================================================= */

button {
  padding: 3px 6px;

  background: #60402a;

  border: 1px solid #795438;

  border-radius: 0;

  color: #dfc6a5;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  font-weight: normal;

  cursor: pointer;

  box-shadow: none;
}

button:hover {
  background: #704a2f;

  border-color: #9a704c;

  color: #f0d5b0;

  box-shadow: none;
}

button:active {
  background: #4f331f;
}

.post-form button {
  margin: 3px 3px 3px 0;

  padding: 4px 7px;
}


/* =========================================================
   POST LIST
========================================================= */

#posts {
  width: 100%;
}


/* =========================================================
   POST
========================================================= */

.forum-post {
  position: relative;

  margin: 6px 0;

  padding: 0;

  background: rgba(52, 31, 19, 0.97);

  border: 1px solid #725039;

  border-radius: 0;

  overflow: hidden;
}

.forum-post:hover {
  border-color: #977052;
}


/* =========================================================
   POST HEADER
========================================================= */

.post-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  min-height: 25px;

  box-sizing: border-box;

  padding: 4px 7px;

  background: rgba(31, 18, 12, 0.95);

  border-bottom: 1px solid #493124;

  color: #a89583;

  font-size: 11px;
}

.post-header strong {
  color: #d8aa77;
}

.post-date {
  margin-left: 7px;

  color: #796653;

  font-size: 10px;
}

.post-actions {
  display: flex;

  gap: 3px;

  align-items: center;
}


/* =========================================================
   POST TITLE
========================================================= */

.forum-post h2 {
  margin: 8px 10px 3px;

  color: #dfb581;

  font-size: 13px;

  line-height: 1.35;
}


/* =========================================================
   POST CONTENT
========================================================= */

.post-content {
  padding: 0 10px 9px;

  color: #d8cdc2;

  font-size: 13px;

  line-height: 1.45;

  overflow-wrap: break-word;
}

.post-content p {
  margin: 5px 0;

  white-space: pre-wrap;
}


/* =========================================================
   GREENTEXT
========================================================= */

.greentext {
  color: #789922 !important;
}

.greentext-line {
  display: block;

  color: #789922 !important;

  white-space: pre-wrap;
}


/* =========================================================
   POST GREENTEXT
========================================================= */

.post-content .greentext,
.post-content .greentext-line {
  color: #789922 !important;
}


/* =========================================================
   REPLY GREENTEXT
========================================================= */

.reply-content .greentext,
.reply-content .greentext-line {
  color: #789922 !important;
}


/* =========================================================
   POST IMAGE
========================================================= */

.post-image {
  display: block;

  width: auto;

  max-width: 300px;

  max-height: 300px;

  margin: 7px 0;

  border: 1px solid #725039;

  border-radius: 0;

  cursor: pointer;

  object-fit: contain;
}

.post-image:hover {
  border-color: #a77a50;
}


/* =========================================================
   POST MEDIA
========================================================= */

.post-media {
  display: block;

  max-width: 100%;

  margin: 7px 0;
}

.post-video {
  display: block;

  width: auto;

  max-width: 100%;

  max-height: 500px;

  border: 1px solid #725039;

  background: #000;
}

.post-audio {
  display: block;

  width: 100%;

  max-width: 500px;

  margin: 7px 0;
}

.media-type-label {
  display: inline-block;

  margin: 3px 0;

  color: #796653;

  font-size: 9px;
}


/* =========================================================
   REPLY BUTTON
========================================================= */

.reply-button {
  padding: 2px 5px;

  background: transparent;

  border: 0;

  color: #b88c60;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  cursor: pointer;
}

.reply-button:hover {
  background: transparent;

  color: #e0b27e;

  text-decoration: underline;

  box-shadow: none;
}


/* =========================================================
   DELETE BUTTON
========================================================= */

.delete-button {
  padding: 1px 4px;

  background: transparent;

  border: 0;

  color: #806c5a;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  cursor: pointer;
}

.delete-button:hover {
  background: transparent;

  color: #c07060;

  text-decoration: underline;

  box-shadow: none;
}


/* =========================================================
   REPLY BOX
========================================================= */

.reply-box {
  margin: 0 8px 7px;

  padding: 6px;

  background: rgba(31, 18, 12, 0.8);

  border: 1px solid #493124;
}

.reply-box input,
.reply-box textarea {
  display: block;

  box-sizing: border-box;

  width: 100%;

  margin: 4px 0;

  padding: 6px 7px;

  background: #21130d;

  border: 1px solid #60432e;

  border-radius: 0;

  color: #eee1d2;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;

  outline: none;
}

.reply-box input:focus,
.reply-box textarea:focus {
  border-color: #a77a50;
}

.reply-box textarea {
  min-height: 55px;

  resize: vertical;
}

.reply-box button {
  margin-top: 3px;

  padding: 3px 6px;
}


/* =========================================================
   REPLIES
========================================================= */

.replies {
  margin: 0 8px 8px;

  padding-left: 8px;

  border-left: 2px solid #493124;
}

.forum-reply {
  margin: 4px 0;

  padding: 6px 8px;

  background: rgba(43, 25, 16, 0.9);

  border: 1px solid #60432e;

  border-radius: 0;
}

.reply-header {
  margin-bottom: 3px;

  color: #bca794;

  font-size: 10px;
}

.reply-header strong {
  color: #cfa06e;
}

.reply-content {
  color: #d0c3b7;

  font-size: 12px;

  line-height: 1.4;

  overflow-wrap: break-word;
}

.reply-content p {
  margin: 3px 0;

  white-space: pre-wrap;
}


/* =========================================================
   EMPTY / STATUS BOX
========================================================= */

.empty-post {
  padding: 12px;

  background: rgba(52, 31, 19, 0.97);

  border: 1px solid #725039;

  text-align: center;

  color: #a89583;

  font-size: 12px;
}


/* =========================================================
   PINNED THREAD
========================================================= */

.forum-post.pinned {
  border-color: #b89055;
}

.pinned-label {
  display: inline-block;

  margin-right: 6px;

  padding: 1px 4px;

  background: #60402a;

  border: 1px solid #a77a50;

  color: #dfc6a5;

  font-size: 9px;

  font-weight: bold;
}

.pin-button {
  padding: 2px 5px;

  background: transparent;

  border: 0;

  color: #b88c60;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  cursor: pointer;
}

.pin-button:hover {
  background: transparent;

  color: #e0b27e;

  text-decoration: underline;
}

.pinned-section {
  margin: 8px 0;
}

.pinned-section-title {
  margin: 0 0 5px;

  padding: 5px 7px;

  background: rgba(39, 23, 15, 0.97);

  border: 1px solid #805b3c;

  color: #dfb581;

  font-size: 11px;

  font-weight: bold;
}


/* =========================================================
   OLD ELEMENT SUPPORT
========================================================= */

.title {
  background: #3b2115;
}

.border1 {
  position: relative;

  padding: 12px;

  background: rgba(52, 31, 19, 0.95);

  border: 1px solid #795438;
}

.border2 {
  position: relative;

  padding: 5px;
}

.post {
  width: 400px;

  float: left;

  margin: 6px;

  box-sizing: border-box;

  background: rgba(52, 31, 19, 0.95);

  border: 1px solid #725039;

  border-radius: 0;
}

#container {
  background: rgba(52, 31, 19, 0.95);

  float: left;

  width: 100%;
}

#sidebar {
  float: right;

  width: 300px;

  margin: 6px;
}

#credit {
  position: fixed;

  right: 8px;

  bottom: 8px;

  color: #a89583;
}

hr {
  border: 0;

  border-top: 1px solid #725039;

  margin: 12px 0;
}

blockquote {
  margin: 5px 0;

  padding: 3px 10px;

  border-left: 3px solid #a87549;

  color: #bca794;
}


/* =========================================================
   BOARD SELECTOR
========================================================= */

.board-list {
  display: flex;

  flex-direction: column;

  gap: 5px;

  margin: 8px 0;
}

.board-card {
  display: block;

  box-sizing: border-box;

  margin: 0;

  padding: 8px 10px;

  background: rgba(52, 31, 19, 0.96);

  border: 1px solid #725039;

  border-radius: 0;

  color: #eee1d2;

  text-decoration: none;
}

.board-card:hover {
  background: rgba(63, 38, 23, 0.98);

  border-color: #a77a50;

  color: #eee1d2;

  text-decoration: none;

  box-shadow: none;
}

.board-name {
  display: block;

  margin-bottom: 3px;

  color: #dfb581;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 14px;

  font-weight: bold;

  line-height: 1.3;
}

.board-description {
  display: block;

  color: #bca794;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;
}

.small-title {
  margin-top: 12px;

  padding: 8px;
}


/* =========================================================
   TAB8 BOARD SELECTOR
========================================================= */

body:has(#tab8-theme) .board-card {
  background: rgba(238, 238, 238, 0.96);

  border-color: #aaa;

  color: #222;
}

body:has(#tab8-theme) .board-card:hover {
  background: rgba(225, 225, 225, 0.98);

  border-color: #888;

  color: #222;
}

body:has(#tab8-theme) .board-name {
  color: #222;
}

body:has(#tab8-theme) .board-description {
  color: #555;
}


/* =========================================================
   TAB8 GREENTEXT
========================================================= */

body:has(#tab8-theme) .greentext,
body:has(#tab8-theme) .greentext-line {
  color: #789922 !important;
}


/* =========================================================
   RULES PAGE
========================================================= */

.rules-box {
  margin: 8px 0;

  padding: 10px;

  background: rgba(52, 31, 19, 0.97);

  border: 1px solid #725039;
}

.rules-box h2 {
  margin: 0 0 8px;

  color: #dfb581;

  font-size: 14px;
}

.rules-box ol {
  margin: 8px 0;

  padding-left: 25px;
}

.rules-box li {
  margin: 6px 0;

  color: #d8cdc2;

  font-size: 13px;

  line-height: 1.45;
}

body:has(#tab8-theme) .rules-box {
  background: rgba(238, 238, 238, 0.96);

  border-color: #aaa;
}

body:has(#tab8-theme) .rules-box h2 {
  color: #222;
}

body:has(#tab8-theme) .rules-box li {
  color: #333;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

  body {
    padding-top: 29px;
  }

  #page {
    width: calc(100% - 10px);

    max-width: none;

    padding-top: 6px;
  }

  .top-nav {
    padding: 5px 6px;
  }

  .top-nav a {
    margin-right: 9px;

    font-size: 11px;
  }

  .forum-title {
    padding: 8px 9px;
  }

  .forum-title h1 {
    font-size: 17px;
  }

  .header-image,
  .mason-image {
    width: 125px;
  }

  .post-form {
    padding: 7px;
  }

  .forum-post {
    margin: 5px 0;
  }

  .forum-post h2 {
    font-size: 12px;
  }

  .post-content {
    font-size: 12px;
  }

  .post-image {
    max-width: 250px;

    max-height: 250px;
  }

  .board-card {
    padding: 7px 8px;
  }

  .board-name {
    font-size: 13px;
  }

  .rules-box {
    padding: 8px;
  }

  .rules-box li {
    font-size: 12px;
  }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}