/* miniialtai.mn (News5 / UniCore theme): theme-specific touches for the newsplus components */

/* Header: the theme toggle sits in the black navbar next to the search icon */
.np-header-toggle { width: 32px; height: 32px; color: #fff; border-color: rgba(255, 255, 255, .25); }
.np-header-toggle svg { width: 16px; height: 16px; }

/* Footer (white in light mode, gray-900 in dark mode) */
.np-footer-newsletter { text-align: center; }
.np-footer-newsletter .np-newsletter__row { margin: 0 auto; }
.np-footer-newsletter .np-newsletter__text { opacity: .75; }
.uc-dark .np-footer-newsletter .np-newsletter__title,
.uc-dark .np-footer-newsletter .np-newsletter__text { color: inherit; }
.np-credit { font-size: 14px; opacity: .8; }

/* Article / video pages */
.single-post .np-share, .single-post .np-rating { margin: 0; }
.single-post .np-author-box { margin: 24px 0 0; }
.np-reactions img { display: block; }
.np-comment-list .np-comment-avatar { font-size: 16px; }

/* Banner slots: hide the empty slot (no banner assigned to the position yet) */
.np-ad-slot:not(:has(.np-banners)) { display: none !important; }
.np-ad-slot .np-banners { margin: 0 auto; }
.np-ad-slot .np-banner img { width: 100%; height: auto; display: block; }

/* Dark mode: this theme has its own dark styles (html.uc-dark). The sync script in base.html
   sets uc-dark whenever data-theme=dark, so the generic newsplus page inversion is switched off. */
html[data-theme=dark] { filter: none; background: transparent; }
html[data-theme=dark] img,
html[data-theme=dark] picture,
html[data-theme=dark] video,
html[data-theme=dark] iframe,
html[data-theme=dark] embed,
html[data-theme=dark] object,
html[data-theme=dark] svg image,
html[data-theme=dark] [style*="background-image"],
html[data-theme=dark] .np-keep-colors { filter: none; }
.uc-dark .np-newsletter input[type=email] { background: #1f2937; color: #fff; border-color: rgba(255, 255, 255, .2); }
.uc-dark .np-share__btn { border-color: rgba(255, 255, 255, .2); }

/* Phones: smaller logo so the theme toggle and search stay visible in the navbar */
@media (max-width: 575px) { .uc-header .uc-logo img { width: 140px; } .uc-header .uc-navbar-right .vr { display: none; } }

/* Reader login for comments: login panel, signed-in bar and platform badge in the theme's dark mode */
.uc-dark .np-login, .uc-dark .np-reader, .uc-dark .np-comment-badge {
  --np-text: #e5e7eb; --np-muted: #9ca3af; --np-border: rgba(255, 255, 255, .15); --np-soft: rgba(255, 255, 255, .05);
}
.uc-dark .np-login__btn--github { border-color: rgba(255, 255, 255, .25); }
.np-comment-list img.np-comment-avatar { object-fit: cover; }

/* ===== Design pass 2026-10 (this file now loads after the theme CSS and newsplus design.css) ===== */

/* MA2 / G10: one brand accent. The theme orange #ff6831 gives 2.89:1 with white; #d1461a gives 4.56:1. */
:root {
  --np-accent: #d1461a;
  --np-read-font: 'Roboto', Arial, sans-serif;
  --color-primary: #d1461a;
  --color-primary-500: #d1461a;
  --color-primary-600: #a8380f;
  --bs-primary: #d1461a;
  --bs-primary-500: #d1461a;
  --bs-primary-rgb: 209, 70, 26;
}
.btn-primary {
  --bs-btn-bg: #d1461a; --bs-btn-border-color: #d1461a;
  --bs-btn-hover-bg: #a8380f; --bs-btn-hover-border-color: #a8380f;
  --bs-btn-active-bg: #a8380f; --bs-btn-active-border-color: #a8380f;
  --bs-btn-disabled-bg: #d1461a; --bs-btn-disabled-border-color: #d1461a;
  --bs-btn-focus-shadow-rgb: 209, 70, 26;
}
.btn-outline-primary {
  --bs-btn-color: #d1461a; --bs-btn-border-color: #d1461a;
  --bs-btn-hover-bg: #d1461a; --bs-btn-hover-border-color: #d1461a;
  --bs-btn-active-bg: #d1461a; --bs-btn-active-border-color: #d1461a;
  --bs-btn-disabled-color: #d1461a; --bs-btn-disabled-border-color: #d1461a;
  --bs-btn-focus-shadow-rgb: 209, 70, 26;
}
.btn-alt-primary { color: #d1461a !important; }
.btn-alt-primary:focus, .btn-alt-primary:hover { background: #d1461a !important; color: #fff !important; }

/* G11: radius tokens on theme buttons and cards */
.btn { border-radius: var(--np-r-sm); }
.btn.rounded-circle { border-radius: 50%; }

/* MA1 / G9: slider caption at the bottom of the photo on a dark bottom-up gradient,
   headline 34px desktop / 24px phone, at most 3 lines */
.swiper-main .np-slide-caption {
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,0) 70%) !important;
}
.swiper-main .np-slide-title {
  font-size: 24px !important; line-height: 1.25 !important; font-weight: 700;
  max-width: min(92%, 860px) !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.swiper-main .np-slide-title a { color: #fff !important; }
@media (min-width: 768px) {
  .swiper-main .np-slide-title { font-size: 30px !important; }
  .swiper-main .np-slide-caption { padding-bottom: 48px !important; } /* clears the pagination dots */
}
@media (min-width: 1200px) { .swiper-main .np-slide-title { font-size: 34px !important; } }

/* MA3 / G1: article body, one size and one dark colour (no grey lead paragraph) */
.np-article-body, .np-article-body p, .np-article-body li { color: var(--np-read-color) !important; opacity: 1 !important; }
html.uc-dark .np-article-body, html.uc-dark .np-article-body p, html.uc-dark .np-article-body li { --np-read-color: #e5e7eb; }
html.uc-dark { --np-read-color: #e5e7eb; }
.np-article-body a { color: #b23a12; }
html.uc-dark .np-article-body a { color: #ff8a5c; }

/* G2: grey meta text ≥4.5:1 */
.post-meta, .post-date, .post-bottom, .breadcrumbs + * .post-meta { --bs-text-opacity: 1; }
.post-date, .post-bottom.text-opacity-60, .post-related .post-date { color: #5c6370 !important; opacity: 1 !important; }
html.uc-dark .post-date, html.uc-dark .post-bottom.text-opacity-60, html.uc-dark .post-related .post-date { color: #b8bcc2 !important; }
.post-navigation .fs-7.opacity-60 { opacity: 1 !important; color: #5c6370; }
html.uc-dark .post-navigation .fs-7.opacity-60 { color: #b8bcc2; }

/* G12 / G13 in the theme's own dark mode (the generic page inversion is off on this site) */
html.uc-dark {
  --np-surface: #111827; --np-text: #e5e7eb; --np-muted: #b8bcc2;
  --np-border: rgba(255, 255, 255, .15); --np-soft: rgba(255, 255, 255, .06);
}
html.uc-dark .np-related__date { color: #b8bcc2; }

/* G6: tap targets ≥44px on phones and tablets */
@media (max-width: 991px) {
  #uc-menu-panel .nav-y > li > a, #uc-menu-panel .uc-nav-sub a { display: flex; align-items: center; min-height: 44px; }
  .social-icons a, .footer-social a, .post-author .nav-x a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .footer-nav a, .footer-copyright a { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; }
  .np-header-toggle { width: 44px; height: 44px; }
  .uc-search-trigger { min-width: 44px; min-height: 44px; }
}
@media (max-width: 991px) {
  /* comment-count links and one-line headline links: larger hit area without moving the layout */
  .post-comments { padding: 13px 10px; margin: -13px -10px; }
  .post-title a, article.post :is(h3, h4, h5, h6) > a.text-none { padding-block: 3px; }
}

/* Accent on the theme's dark sections (black navbar, video block): lighter orange keeps ≥4.5:1 */
.uc-dark .dark\:text-primary, .uc-dark .text-primary, .uc-dark .hover\:text-primary:hover,
html.uc-dark .dark\:text-primary, html.uc-dark .text-primary { --bs-primary-rgb: 255, 122, 77; }

/* newsplus widgets use the theme font */
:root { --np-font: 'Roboto', Arial, sans-serif; }

.uc-dark .link, .uc-dark .link span { color: #ff7a4d; }
.uc-dark .link:hover { color: #fff; }

/* G2: newsplus share label on the grey page background */
.single-post .np-share__label, .np-share__label { color: #5c6370 !important; }
html.uc-dark .np-share__label { color: #b8bcc2 !important; }

/* Theme drop cap: sized to two lines of the larger body text and kept inside the first paragraph,
   so it no longer pushes the second paragraph in */
.np-article-body > p:first-child { display: flow-root; }
.np-article-body > p:first-child::first-letter { font-size: 3.6em; line-height: .85; margin: .08em 10px 0 0; }

/* Weather in the header (rotating places, click to switch) */
.np-hdr-wx { display: inline-flex; align-items: center; margin-right: 6px; }
.np-hdr-wx .np-wr { font-size: 14px; font-weight: 600; white-space: nowrap; gap: 0; }
.np-hdr-wx .np-wr__weather { display: inline-flex; align-items: center; min-height: 44px; }
.np-hdr-wx .np-wr__weather img { margin-right: 4px; }
.np-hdr-wx .np-wr { color: #e5e7eb; }
@media (max-width: 575px) {
  .np-hdr-wx { margin-right: 0; }
  .np-hdr-wx .np-wr { font-size: 12.5px; }
  .np-hdr-wx .np-wr__weather img { display: none; }
}
@media (max-width: 575px) {
  .uc-header .uc-navbar-right { gap: 2px !important; flex-wrap: nowrap; }
  .uc-header .uc-navbar-right > .vr { display: none; }
  .uc-header .uc-navbar-container > * { flex-wrap: nowrap; }
}
@media (max-width: 575px) {
  .uc-header .uc-navbar-left { flex-wrap: nowrap; min-width: 0; }
  .uc-header .uc-logo img { width: 150px !important; height: auto; }
}
@media (max-width: 359px) { .np-hdr-wx { display: none; } }
@media (max-width: 379px) { .uc-header .uc-logo img { width: 128px !important; } }