/* etimes (etimes.mn): theme-specific touches for the newsplus components */

/* Headings that used to be <div>s keep the theme's size and spacing */
h1.title, h1.category-page-title, h1.search-page-title, h1.np-page-title { line-height: 1.3; }
article .info h1.title { margin: 0; }
.main-slide .textArea h1.title { margin-bottom: 0; }
h1.category-page-title { margin-top: 0; }
h1.search-page-title { margin-top: 10px; }

/* Header: three icon buttons (search, theme, menu) */
header .top .button-side { width: 120px; }
header .top .menu-side { width: calc(100% - 415px); }
header .top .button-side .np-theme-toggle { display: inline-flex; align-items: center; justify-content: center;
  height: 100%; color: #fff; background: transparent; border: 0; vertical-align: top; }

/* "HOT" bar: latest featured story on the left, weather and rates on the right */
header .bottom .content { display: inline-flex; align-items: center; gap: 12px; height: 100%; vertical-align: top; }
header .bottom .content .topic-side { flex: 1 1 auto; min-width: 0; padding-top: 0; height: auto; }
header .bottom .content .np-wr { flex: 0 0 auto; font-size: 12px; color: #474747; white-space: nowrap; }

/* Search box is a real <form> now */
.search-side .search input[type=search] { -webkit-appearance: none; appearance: none; }

/* Banners */
.banner2 .np-banners, .np-slot-top .np-banners, .np-slot-bottom .np-banners { margin: 0 0 15px; }
.np-slot-bottom .np-banners { margin: 15px 0 0; }
.np-banners.np-inlist { margin: 0 0 15px; }
.np-banner img { width: 100%; height: auto; display: block; }

/* Footer: newsletter, credit and copyright on the dark footer */
.np-footer-newsletter, .np-footer-newsletter .np-newsletter__title { color: #fff; }
.np-footer-newsletter .np-newsletter__text { color: #fff; opacity: 1; }
footer .bottom .right a, footer .bottom .right .np-credit a { color: #fff; }
footer .bottom .left { width: auto; }
footer .bottom .right { width: auto; }
@media (max-width: 767px) {
  footer .bottom .left, footer .bottom .right { float: none; text-align: left; padding-bottom: 6px; }
}

/* Article page */
article .info .np-share, article .info .np-rating { margin: 15px 0; }
.np-meta-right { text-align: right; }
@media (max-width: 767px) { .np-meta-right { text-align: left; } }
.comments-area[hidden] { display: none; }

/* Reader login: account picture + platform badge in comment lists, panel inside the comment form */
.comments-area .comment-author .np-comment-pic { width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  margin-right: 8px; vertical-align: middle; border: 1px solid #2e7c84; }
.comments-area .comment-author .np-comment-badge, .np-comment-badge { text-transform: none; }
.comment-form .np-login, .comment-form .np-reader { margin-top: 15px; }
.np-embed iframe { max-width: 100%; }

/* Dark mode: parts of the theme that are already dark keep their own colours */
html[data-theme=dark] header .top,
html[data-theme=dark] footer,
html[data-theme=dark] .main-slide .textArea { filter: invert(1) hue-rotate(180deg); }
html[data-theme=dark] header .top img,
html[data-theme=dark] footer img { filter: none; }

/* ===== Design pass 2026-10 ===== */
/* Brand: teal darkened to #2e7c84 (white text 4.85:1), orange labels to #c2410c (5.18:1) - replaced in style.css / bootstrap.min.css */
:root { --np-accent: #2e7c84; --np-read-font: 'Roboto', Arial, sans-serif; }

/* G1: article body - theme justifies and indents .desc itself */
article .info .desc.np-article-body { text-align: left; text-indent: 0; }

/* G3 + ET3: no forced capitals on titles (small labels keep theirs) */
article .info .title, .category-page-title, .search-page-title,
.comments-area .comment-holder .comment-wrap .comment-body .comment-author { text-transform: none; }
article .info h1.title { font-size: 24px; font-weight: 700; line-height: 1.3; }
@media (max-width: 767px) { article .info h1.title { font-size: 21px; } }

/* G4: the home featured title is an h2 now (the page h1 is the visually hidden site name) */
.main-slide .textArea h2.title { margin: 15px 0 0; line-height: 1.3; }

/* G2: grey meta text >= 4.5:1 on white / light-blue cards */
.post-meta li, .new-visited-commented .content .tabBody .article .text .meta,
.bread .bread-item span, .category-page-title span,
.comments-area .comment-holder .comment-wrap .comment-body .comment-author .ip { color: #5c6b77; }

/* ET2: phones see the featured story and the latest list (theme hid .main-slide below 768px) */
@media (max-width: 767.98px) {
  .main-slide { display: block; }
  #main-body #news { margin-bottom: 20px; }
  .article-list .article { height: auto; min-height: 110px; display: flex; }
  .article-list .image { flex: 0 0 34%; width: 34%; height: auto; min-height: 110px; position: relative; }
  .article-list .image a { position: absolute; inset: 0; }
  .article-list .image img { width: 100%; height: 100%; object-fit: cover; }
  .article-list .text { flex: 1 1 auto; width: auto; height: auto; }
  .article-list .text .title { height: auto; -webkit-line-clamp: 3; max-height: none; }
  .article-list .text .text_small { display: none; }
}

/* G6: tap targets on phones */
@media (max-width: 991.98px) {
  header .top .button-side { width: 140px; padding-left: 0; }
  header .top .button-side button, header .top .button-side .np-theme-toggle { min-width: 44px; }
}
.toggle-menu .menu .menu-item a { display: inline-flex; align-items: center; min-height: var(--np-tap); }
.new-visited-commented .header .tab-btn button { min-height: var(--np-tap); }
@media (max-width: 767px) {
  footer .footer-menu ul li { padding-top: 0; }
  footer .footer-menu ul li a { display: inline-flex; align-items: center; min-height: var(--np-tap); }
  footer .bottom .right a { display: inline-block; padding: 12px 4px; }
  .pagination > li > a, .pagination > li > span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* G11: radius tokens and buttons */
.main-slide, .article-list .article { border-radius: var(--np-r-sm); }
.btn { border-radius: var(--np-r-sm); }
.btn-primary { background-color: var(--np-accent); border-color: var(--np-accent); color: #fff; }
/* Newsletter button on the teal footer: the accent equals the footer colour, so use the orange label colour */
.np-footer-newsletter .np-newsletter button { background: #c2410c; color: #fff; }