/*
  Fulltext / Article page – Modern redesign (override-friendly)
  -----------------------------------------------------------
  Put this file AFTER your existing stylesheet(s) to override them.
  No HTML/PHP changes required.
*/

/* ===== 0) Theme tokens ===== */
:root{
  --ft-bg: #f6f8fc;
  --ft-surface: #ffffff;
  --ft-surface-2: #fbfcff;
  --ft-text: #101828;
  --ft-muted: #475467;
  --ft-muted-2: #667085;
  --ft-line: rgba(16,24,40,.10);
  --ft-line-2: rgba(16,24,40,.14);
  --ft-brand: #0b73b6;
  --ft-brand-2: #0a86c7;
  --ft-success: #12b76a;
  --ft-warning: #f79009;
  --ft-danger: #f04438;
  --ft-radius: 16px;
  --ft-radius-sm: 12px;
  --ft-shadow: 0 16px 40px rgba(16,24,40,.10);
  --ft-shadow-sm: 0 10px 24px rgba(16,24,40,.08);
  --ft-shadow-xs: 0 6px 16px rgba(16,24,40,.08);
  --ft-ring: 0 0 0 3px rgba(11,115,182,.18);

  --ft-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
             "Apple Color Emoji","Segoe UI Emoji";
  --ft-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
}

/* ===== 1) Base reset (safe) ===== */
html, body{ height:100%; }
body{
  font-family: var(--ft-font) !important;
  color: var(--ft-text) !important;
  background: var(--ft-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--ft-brand) !important; text-decoration: none; }
a:hover{ color: var(--ft-brand-2) !important; text-decoration: underline; }
a:focus{ outline: none; box-shadow: var(--ft-ring); border-radius: 10px; }

img{ max-width:100%; height:auto; }
hr{ border:0; border-top: 1px solid var(--ft-line); margin: 18px 0; }

/* Make container feel premium (works with Bootstrap .container too) */
.container{
  max-width: 1180px !important;
}

/* ===== 2) Modern card surfaces ===== */
/* Common wrappers used in your pages */
.content-wrapper,
.page-wrapper,
.main-wrapper{
  background: transparent !important;
}

/* If your fulltext body area is inside a .comments/.masonry-wrapper, keep it clean */
.comments,
.masonry-wrapper{
  background: transparent !important;
}

/* Generic "paper" look for main article */
.article-container,
.article-box,
.media-body.description,
.entry-box,
.panel,
.card,
.single-post,
.post-content,
.citation,
.article,
.paper{
  border-radius: var(--ft-radius) !important;
}

/* ===== 3) Article header typography ===== */
/* Common title selectors seen on fulltext templates */
.article-title,
.citation_title,
.post-title,
.single-post .title,
.entry_title h1,
.entry_title h2,
.entry_title h3,
.entry_title h4{
  color: var(--ft-text) !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px;
}

.citation_title{ font-size: 30px !important; line-height: 1.18 !important; margin: 0 0 10px 0 !important; }

/* If your template uses H1 for title */
.single-post h1,
article h1{
  font-size: 32px !important;
  line-height: 1.18 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 900 !important;
}

/* Section headings */
article h2, .post-content h2{
  font-size: 22px !important;
  margin: 22px 0 10px 0 !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px;
}
article h3, .post-content h3{
  font-size: 18px !important;
  margin: 18px 0 8px 0 !important;
  font-weight: 900 !important;
}

/* Body text */
article, .post-content, .entry_content, .citation_content, .paper-content{
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--ft-text) !important;
}

/* ===== 4) Author line + metadata chips ===== */
.citation_author,
.article-authors,
.author-list,
.authors{
  font-weight: 800 !important;
  color: var(--ft-text) !important;
}

/* Affiliation / secondary meta */
.citation_affiliation,
.article-affiliation,
.affiliation,
.meta,
.article-meta{
  color: var(--ft-muted) !important;
  font-size: 14px !important;
}

/* Make meta rows look like chips if present */
.article-meta span,
.article-meta a,
.citation_meta span,
.citation_meta a{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ft-line);
  background: rgba(11,115,182,.06);
  color: var(--ft-text) !important;
  font-weight: 800;
  font-size: 12.5px;
  margin: 4px 6px 0 0;
}

/* ===== 5) Main article "card" container ===== */
/* Your template often uses .entry-box inside list items */
.masonry-item{
  background: var(--ft-surface) !important;
  border: 1px solid var(--ft-line) !important;
  box-shadow: var(--ft-shadow-sm) !important;
  padding: 16px 16px !important;
  margin: 0 0 16px 0 !important;
}

/* Remove old avatar look and make it optional */
.masonry-item .avatar{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  object-fit: cover;
  border: 1px solid var(--ft-line);
  background: var(--ft-surface-2);
}

/* Improve title block spacing */
.entry_title{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Badge / dimensions alignment */
.__dimensions_badge_embed__{
  transform: translateY(1px);
}

/* ===== 6) Buttons (Bootstrap overrides-safe) ===== */
.btn,
.article-btn,
.jb-btn{
  border-radius: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .1px;
  padding: 10px 14px !important;
  border: 1px solid var(--ft-line-2) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  box-shadow: var(--ft-shadow-xs) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover,
.article-btn:hover,
.jb-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(11,115,182,.35) !important;
  box-shadow: var(--ft-shadow) !important;
}

.btn.btn-danger{
  background: rgba(240,68,56,.10) !important;
  border-color: rgba(240,68,56,.25) !important;
  color: #b42318 !important;
}

.btn.btn-default,
.btn-default{
  background: rgba(11,115,182,.06) !important;
  border-color: rgba(11,115,182,.20) !important;
}

.btn.btn-success{
  background: rgba(18,183,106,.12) !important;
  border-color: rgba(18,183,106,.22) !important;
  color: #027a48 !important;
}

/* "Link button" titles */
.btn-link{
  font-weight: 900 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  color: var(--ft-text) !important;
  text-decoration: none !important;
}
.btn-link:hover{ color: var(--ft-brand) !important; text-decoration: underline !important; }

.cursorHand{ cursor:pointer; }

/* ===== 7) Topic tags / subjects ===== */
.home-item-subjects{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start !important;
}

.home-item-subject{
  display: inline-flex !important;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  border: 1px solid rgba(11,115,182,.22);
  background: rgba(11,115,182,.10);
  box-shadow: 0 8px 16px rgba(11,115,182,.10);
}

.home-item-subject a{
  color: #063a59 !important;
  font-weight: 900;
  font-size: 12.5px;
  text-decoration: none !important;
}
.home-item-subject:hover{ border-color: rgba(11,115,182,.40); }

/* ===== 8) "Abstract / FullText" meta row ===== */
.comments-meta{
  list-style: none !important;
  padding: 10px 0 0 0 !important;
  margin: 12px 0 0 0 !important;
  border-top: 1px dashed var(--ft-line);
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.comments-meta li{ margin: 0 !important; }

.comments-meta a.url{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ft-line);
  background: var(--ft-surface);
  font-weight: 900;
  color: var(--ft-text) !important;
  text-decoration: none !important;
  box-shadow: var(--ft-shadow-xs);
}
.comments-meta a.url:hover{ border-color: rgba(11,115,182,.35); box-shadow: var(--ft-shadow-sm); }

/* Little counter chips inside meta */
.comments-meta .btn.btn-default.btn-sm,
.comments-meta .btn.btn-default{
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* ===== 9) Dropdown menus (indexing links) ===== */
.dropdown .dropdown-toggle{
  font-weight: 900 !important;
  color: var(--ft-brand) !important;
  text-decoration: none !important;
}
.dropdown .dropdown-toggle:hover{ text-decoration: underline !important; }

/* Make sure dropdown is visible (many pages fail because of overflow/z-index) */
.masonry-item,
.entry-box,
.media-body.description{
  overflow: visible !important;
}

.dropdown-menu,
.jbres-issue-dropmenu{
  border-radius: 14px !important;
  border: 1px solid var(--ft-line) !important;
  box-shadow: var(--ft-shadow) !important;
  padding: 10px !important;
  min-width: 260px;
  max-width: 420px;
  max-height: 360px;
  overflow: auto;
  z-index: 9999 !important;
  background: var(--ft-surface) !important;
}

.dropdown-menu a.url{
  display: block !important;
  padding: 0 !important;
  margin: 8px 0 !important;
}

.dropdown-menu a.url label{
  width: 100% !important;
  text-align: left !important;
  border-radius: 12px !important;
  border: 1px solid var(--ft-line) !important;
  background: rgba(11,115,182,.06) !important;
  font-weight: 900 !important;
  padding: 10px 12px !important;
  cursor: pointer;
}
.dropdown-menu a.url label:hover{
  border-color: rgba(11,115,182,.35) !important;
  background: rgba(11,115,182,.10) !important;
}

/* ===== 10) Tables, figures, code blocks ===== */
table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--ft-line) !important;
  border-radius: 14px !important;
  background: var(--ft-surface);
  box-shadow: var(--ft-shadow-xs);
}

table thead th{
  background: rgba(11,115,182,.08) !important;
  border-bottom: 1px solid var(--ft-line) !important;
  font-weight: 900;
  color: var(--ft-text);
  padding: 12px 12px;
}

table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(16,24,40,.06);
  color: var(--ft-text);
}

table tr:last-child td{ border-bottom: 0; }

figure,
.article-figure{
  margin: 18px 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--ft-line);
  background: var(--ft-surface);
  box-shadow: var(--ft-shadow-xs);
}
figcaption{ color: var(--ft-muted); font-size: 13px; margin-top: 10px; }

pre, code{
  font-family: var(--ft-mono);
}
pre{
  background: #0b1220;
  color: #e6eefb;
  padding: 14px;
  border-radius: 14px;
  overflow: auto;
  box-shadow: var(--ft-shadow-xs);
}
code{
  background: rgba(11,115,182,.08);
  padding: 2px 6px;
  border-radius: 8px;
}

blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(11,115,182,.45);
  background: rgba(11,115,182,.06);
  border-radius: 14px;
  color: var(--ft-text);
}

/* ===== 11) Reference list ===== */
.references,
.reference-list,
.citation_references,
#references{
  border-radius: 16px;
  border: 1px solid var(--ft-line);
  background: var(--ft-surface);
  padding: 16px;
  box-shadow: var(--ft-shadow-xs);
}
.references ol,
.reference-list ol{
  padding-left: 18px;
}
.references li,
.reference-list li{
  margin: 10px 0;
  color: var(--ft-text);
}

/* ===== 12) Sidebars / menus (keep them clean) ===== */
#sidebar,
.left-menu,
.rightmenu,
.widget,
.sidebar{
  border-radius: 16px;
  border: 1px solid var(--ft-line);
  background: var(--ft-surface);
  box-shadow: var(--ft-shadow-xs);
}

/* ===== 13) Back-to-top ===== */
.sf-back-to-top,
.back-to-top{
  border-radius: 999px !important;
  background: rgba(11,115,182,.95) !important;
  color: #fff !important;
  box-shadow: var(--ft-shadow) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

/* ===== 14) Footer polish (non-breaking) ===== */
footer,
.footer{
  background: #0b1220 !important;
  color: rgba(255,255,255,.85) !important;
}
footer a, .footer a{ color: rgba(255,255,255,.90) !important; }
footer a:hover, .footer a:hover{ color: #ffffff !important; text-decoration: underline; }

/* ===== 15) Mobile refinements ===== */
@media (max-width: 768px){
  .citation_title{ font-size: 24px !important; }
  .btn-link{ font-size: 18px !important; }
  .masonry-item{ padding: 14px !important; }
  .comments-meta{ gap: 8px; }
  .dropdown-menu{ max-width: calc(100vw - 24px); }
}

/* ===== 16) Optional: reading progress bar (only if you add #ftProgressBar to HTML) =====
#ftProgressBar{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--ft-brand);
  z-index: 100000;
}
*/