/* ===== Base View Shell ===== */
.view {
  width: 100%;
  max-width: 800px;   /* shrink on small screens, cap at 800px */
  min-height: 620px;  /* let it grow if content taller */
  margin: 0 auto;
  background: #fff;
  border: 0;
  overflow-x: hidden;
}

.panel-header {
  background: var(--color-nonact, #153b8e);
  color: #fff;
  padding: 14px 0;
  font-size: 16px;
  text-align: center;
}

/* ===== Text Utilities ===== */
.header-centered,
.header-left {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 4px 0;
}
.header-centered { text-align: center; }
.header-left     { text-align: left; }

.about-centered,
.about-left {
  font-weight: 500;
  font-size: 1.3rem;
  margin: 8px 0;
}
.header-centered { text-align: center; }
.header-left     { text-align: left; }

.text-centered,
.text-left {
  font-weight: 400;
  font-size: 1rem;
  margin: 12px 0;
}
.text-centered { text-align: center; }
.text-left     { text-align: left; }

/* Fixed-width, responsive image */
.img-centered {
  width: 600px;       /* fixed target width */
  max-width: 100%;    /* shrink gracefully on small screens */
  margin: 16px auto;  /* center horizontally */
  display: block;
  height: auto;       /* preserve aspect ratio */
}
/* example: <img src="/images/sample.jpg" alt="Sample" class="img-centered"> */

/* ===== Articles (News + FAQ) ===== */
.article-view { margin: 12px auto; }

.article-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 14px;
}
.article-list .item {
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
}
.article-list .item:hover { background: rgba(0,0,0,.03); }
.article-list .item.active {
  border-color: var(--color-nonact, #153b8e);
  background: rgba(21,59,142,.06);
  font-weight: 600;
}

/* Scrollable reading area inside .view (fits your 800px cap) */
.article-content {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 14px;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto; /* safety: only shows if something is truly wide */
}

/* Normalize literal HTML inside loaded articles */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  margin: 12px 0 8px;
  line-height: 1.25;
}
.article-content p { margin: 10px 0; line-height: 1.6; }
.article-content hr { border: 0; border-top: 1px solid #ddd; margin: 12px 0; }
.article-content img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
.article-content table { width: 100%; border-collapse: collapse; overflow-x: auto; display: block; }
.article-content th,
.article-content td { border: 1px solid #ddd; padding: 6px; }

/* Lists (for better readability in translated content) */
.article-content ul,
.article-content ol { margin: 12px 0 12px 20px; }
.article-content li { margin: 6px 0; }

/* Tame common inline widths from source */
.article-content [style*="width:750px"] { width: 100% !important; }

/* --- News/FAQ polish --- */

/* 1) Compact the list and color the buttons */
.article-list { 
  gap: 6px;                 /* tighter vertical spacing */
  margin: 6px 0 10px;       /* close gap under header */
}
.article-list .item {
  padding: 6px 10px;        /* a bit shorter */
  background: #bbc5d263;    /* your color (semi-transparent) */
  border: 1px solid #cfd6e2;
}
.article-list .item:hover { background: #bbc5d280; } /* slightly stronger on hover */
.article-list .item.active {
  border-color: var(--color-nonact,#153b8e);
  box-shadow: 0 0 0 1px var(--color-nonact,#153b8e) inset;
}

/* 2) Keep the reader inside the .view box and let it scroll */
.view.article-view { padding: 8px 10px 12px; } /* small internal breathing room */
.view.article-view .article-content {
  /* 620px view min-height minus ~header+gaps (≈ 150–180px) */
  max-height: calc(620px - 180px);
  /* already has overflow-y:auto; overflow-x:auto from earlier */
}



/* --- News/FAQ list polish v2 --- */

/* Make items feel less cramped but still compact */
.article-list .item {
  padding: 6px 10px;
  min-height: 34px;           /* <- keeps a consistent button height */
  display: flex;               /* vertically center text */
  align-items: center;
  background: #bbc5d263;       /* your coordinated tint */
  border: 1px solid #cfd6e2;
  border-radius: 6px;
  position: relative;          /* for the accent bar */
}

/* subtle left “divider” bar */
.article-list .item::before {
  content: "";
  width: 4px;
  height: 100%;
  background: #c8d0de;         /* light by default */
  border-radius: 4px 0 0 4px;
  position: absolute;
  left: 0;
  top: 0;
}

/* hover + active look */
.article-list .item:hover { background: #bbc5d280; }
.article-list .item.active {
  border-color: var(--color-nonact,#153b8e);
  box-shadow: 0 0 0 1px var(--color-nonact,#153b8e) inset;
}
.article-list .item.active::before {
  background: var(--color-nonact,#153b8e); /* stronger accent when active */
}

/* Keep the reader inside the view and scroll internally */
.view.article-view { padding: 8px 10px 12px; }
.view.article-view .article-content {
  max-height: calc(620px - 180px); /* adjust ±10–20px if needed for your header spacing */
}

/* Article subheadings */
.article-view h5 {
  font-size: 1.1rem;     /* bump size (~17–18px) */
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #333;           /* darker for emphasis */
}

.article-view h6 {
  font-size: 1.0rem;     /* bump size (~17–18px) */
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #333;           /* darker for emphasis */
}