/* ===========================================================
   Liberty's Flame - Read Article Page
   =========================================================== */

/* --- iframe / video / image display --- */
iframe {
  border: 0;
  background: #000;
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

iframe[src*="youtube.com"],
iframe[src*="rumble.com"],
iframe[src*="bitchute.com"] {
  display: inline-block !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

iframe[src*="youtube.com/shorts"],
iframe.yt-shorts {
  display: inline-block !important;
  aspect-ratio: 9 / 16;
  max-width: 360px;
}

iframe[src*="bitchute.com"] {
  aspect-ratio: 4 / 3;
}

.image-wrapper {
  display: inline-block !important;
  margin: 10px 0;
  border: 2px solid #aaaacc;
  background: #fff;
  overflow: hidden;
  width: auto !important;
  max-width: 100%;
  vertical-align: top;
}

.image-wrapper img {
  display: inline-block !important;
  width: attr(width px) !important;
  height: auto !important;
  max-width: none !important;
  vertical-align: top;
}

@supports not (width: attr(width px)) {
  .image-wrapper img { width: initial !important; }
}

.image-resize-handle, .video-resize-handle,
.image-delete-handle, .video-delete-handle,
.image-overlay, .video-overlay {
  display: none !important;
}

/* --- Main layout --- */
body.read-article-page .content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding-left: var(--page-indent);
  padding-right: var(--page-indent);
  box-sizing: border-box;
  margin: 0;
}

/* --- Article frame --- */
body.read-article-page main.article-frame {
  background-color: #f8f8ff;
  border: 1px solid #aaaacc;
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 1.5rem 2rem;
  margin-left: 0;
  margin-right: 14px;
  margin-bottom: 2rem;
  flex: 1;
  box-sizing: border-box;
}

/* --- Article block accent --- */
.article-block {
  border-left: 4px solid #333399;
  padding-left: 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  overflow-y: visible;
}

/* Constrain media inside article */
.article-frame iframe,
.article-frame img,
.article-frame .video-wrapper,
.article-frame .image-wrapper {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  box-sizing: border-box;
}

/* --- Article actions --- */
.article-actions {
  margin: 0.5rem 0 1rem 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95em;
}

/* --- Comment section --- */
.comment-section {
  border-top: 2px solid #333399;
  margin-top: 1rem;
  padding-top: 0.5rem;
}

.comment-card {
  background: #ffffff;
  border: 1px solid #ccccdd;
  border-left: 4px solid #333399;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.comment-card:hover {
  background-color: #f0f0ff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.comment {
  margin: 0.3em 0 0.6em 0;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  background-color: transparent;
}

.comment p {
  margin-block-start: 0.3em !important;
  margin-block-end: 0.3em !important;
}

.comment-body {
  margin: 0.3em 0;
  font-size: 1.05em;
  line-height: 1.35;
}

.comment-meta {
  font-size: 1em;
  color: #555555;
  margin-top: 2px;
  font-family: Arial, Helvetica, sans-serif;
}

.comment-action {
  font-weight: bold;
  color: var(--link-color);
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
}

.comment-action:hover {
  text-decoration: underline;
}

.article-comments hr {
  border: none;
  border-bottom: 1px solid #aaaacc;
  margin: 0.3em 0;
}

/* --- Comment paging spacer --- */
.comment-spacer {
  text-align: center;
  font-style: italic;
  color: #555577;
  background-color: #eeeef8;
  border: 1px dashed #aaaacc;
  border-radius: 4px;
  padding: 0.6em 0.8em;
  margin: 0.5em 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95em;
}

.comment-spacer a {
  font-weight: bold;
  color: var(--link-color);
  text-decoration: none;
}

.comment-spacer a:hover {
  text-decoration: underline;
}

/* --- Sidebar --- */
body.read-article-page aside.title-bar {
  width: 185px;
  min-width: 185px;
  background-color: var(--titlebox-bg);
  border: 1px solid #b0b0c8;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
  align-self: flex-start;
  height: auto !important;
  max-height: none !important;
}

.title-bar-header {
  border-bottom: 2px solid var(--link-color);
  margin-bottom: 0.6em;
  padding-bottom: 0.3em;
}

.title-bar-header h3 {
  font-size: 0.9em;
  color: #000000;
  margin: 0;
}

.title-bar ul { list-style: none; padding-left: 0; margin: 0; }
.title-bar li { margin: 8px 0; line-height: 1.3; font-size: 0.85em; }

.title-bar a {
  text-decoration: none;
  color: var(--link-color);
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85em;
}

.title-bar a:hover { text-decoration: underline; }
.title-bar a:visited { color: var(--link-visited); }

/* --- Responsive --- */
@media (max-width: 900px) {
  body.read-article-page .content-wrapper { flex-direction: column; }
  body.read-article-page main.article-frame,
  body.read-article-page aside.title-bar { width: auto; margin: 10px 0; }
}