/* erdenetnews.mn: theme-specific touches for the newsplus components */

/* Header: search box in the menu bar, theme toggle next to the menu button */
header .top .np-header-search { display: inline-block; float: right; position: relative; height: 25px; margin: 0; }
header .top .np-header-search input { width: 150px; height: 22px; margin-top: 1px; padding: 0 26px 0 8px; border: 0; border-radius: 2px;
    font-size: 12px; color: #222; background: #fff; }
header .top .np-header-search button { position: absolute; right: 2px; top: 1px; height: 22px; width: 24px; border: 0; background: transparent; color: #003366; }
header .top .menu-side { width: calc(100% - 170px); }
header .middle .info-side .button-side { display: inline-flex; align-items: center; gap: 4px; }
header .middle .np-header-toggle { color: #fff; border-color: rgba(255, 255, 255, .35); }
.slide-menu .np-slide-search { display: flex; padding: 0 10px; }
.slide-menu .np-slide-search input { flex: 1; min-width: 0; height: 30px; border: 0; padding: 0 8px; color: #222; border-radius: 2px 0 0 2px; }
.slide-menu .np-slide-search button { height: 30px; border: 0; background: #c20017; color: #fff; padding: 0 10px; border-radius: 0 2px 2px 0; }
header .top-menu .right .social .insta { background-color: #c13584; }
header .top-menu .right .social .linked { background-color: #0a66c2; }

/* Footer: newsletter and credit on the dark blue footer */
footer .np-footer-newsletter { margin-top: 10px; }
footer .np-footer-newsletter, footer .np-footer-newsletter .np-newsletter__title { color: #fff; }
footer .np-footer-newsletter .np-newsletter__text { color: #c1d7ec; opacity: 1; }
footer .bottom a, footer .bottom .np-credit a { color: #a7c6e5; }
footer .bottom a:hover, footer .bottom .np-credit a:hover { color: #fff; }

/* Banners keep the old position spacing */
.np-banners.position1 { margin: 0 -5px 20px; }
.np-banners.position2 { margin: 15px -5px 0; }
.np-banners.position3, .np-banners.position7 { margin: 0 0 20px; }
.np-banners.position4, .np-banners.position6 { margin: 15px 0 0; }
.np-banners.position8, .np-banners.position9 { margin: 15px 0; }
.np-banners.position1 .np-banner img, .np-banners.position2 .np-banner img,
.np-banners.position7 .np-banner img, .np-banners.position8 .np-banner img,
.np-banners.position9 .np-banner img,
.np-banners.position3 .np-banner img, .np-banners.position4 .np-banner img,
.np-banners.position6 .np-banner img { width: 100%; border-radius: 0; }
.np-poll { margin-top: 15px; }

/* Detail pages */
article .info h1.title { margin: 0; line-height: 1.3; }
h1.category-page-title { margin-top: 0; }
article .np-share { margin: 15px 0; }
.comments-area[hidden] { display: none !important; }
/* Signed-in readers: no guest avatar column, so the comment form takes the full width */
.comment-form .np-comment-authed .form { width: 100%; }
.np-embed iframe, .np-embed video { max-width: 100%; }
.np-podcast-player { display: flex; gap: 15px; align-items: center; background: #003366; padding: 15px; }
.np-podcast-cover img { width: 200px; max-width: 40vw; }
.np-podcast-audio { flex: 1; min-width: 0; color: #fff; }
.np-podcast-audio a { color: #c1d7ec; }
@media (max-width: 499.98px) { .np-podcast-player { flex-direction: column; } .np-podcast-cover img { width: 100%; max-width: none; } }

/* Dark mode: parts of the theme that are already dark keep their own colours */
html[data-theme=dark] header,
html[data-theme=dark] footer,
html[data-theme=dark] .slide-menu,
html[data-theme=dark] .poll .header,
html[data-theme=dark] .np-podcast-player,
html[data-theme=dark] .main-slide .textArea,
html[data-theme=dark] .second-slide .per-slide .textArea .category,
html[data-theme=dark] .second-slide .per-slide .textArea .title,
html[data-theme=dark] .article-list .header,
html[data-theme=dark] .article-box .header,
html[data-theme=dark] .new-visited-commented .header,
html[data-theme=dark] article .image .article-badge .category,
html[data-theme=dark] .comment-form .comment-warning { filter: invert(1) hue-rotate(180deg); }
html[data-theme=dark] header img,
html[data-theme=dark] footer img,
html[data-theme=dark] .slide-menu img,
html[data-theme=dark] .np-podcast-player img,
html[data-theme=dark] .np-podcast-player audio { filter: none; }
/* The page-wide filter makes position:fixed act like absolute: keep the off-canvas menu
   from widening the page (show_menu() moves it to the current scroll position). */
html[data-theme=dark] { overflow-x: hidden; }

/* Phones: keep the theme toggle and the menu button inside the header */
@media (max-width: 767.98px) {
    header .middle .info-side .weather { padding-right: 8px; }
    header .middle .np-header-toggle { width: 30px; height: 30px; }
}
@media (max-width: 599.98px) {
    header .middle .info-side .today { display: none; }
}
@media (max-width: 479.98px) {
    header .middle .info-side .valute { display: none; }
}

/* ===== Design pass (2026-10) ===== */
:root { --np-accent: #c20017; --np-read-font: 'Roboto', Arial, sans-serif; }

/* ER2 / G3: Roboto for text and list titles, Roboto Condensed 700 only for the big headlines;
   no forced capitals on titles, menus and page titles (small section labels stay uppercase). */
body, a, p, span, button, input, textarea, select,
header .top-menu .right .per a, header .top .menu-side .menu-item a, .slide-menu .menu-header,
.slide-menu .res-nav a, .poll .body .question, .poll .body button,
article .info .desc, article .info .desc p { font-family: 'Roboto', Arial, sans-serif; }
.fa { font-family: FontAwesome !important; }
.article-list .text .title, .article-box .text .title,
.new-visited-commented .content .tabBody .article .text a .title,
.second-slide .per-slide .textArea .title, .videoPostBox .text .title,
.container.main .title { font-family: 'Roboto', Arial, sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; }
.article-list .text .text_small, .article-box .text .text_small { font-weight: 400; }
.main-slide .textArea .title, article .info h1.title, .container.main h1.title, .category-page-title {
    font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; font-weight: 700; text-transform: none; }
.category-page-title { font-size: 24px; }
header .top .menu-side .menu-item, .slide-menu .res-nav li a { text-transform: none; }
header .top .menu-side .menu-item a { font-weight: 500; font-size: 15px; }
.comments-area .comment-holder .comment-wrap .comment-body .comment-author,
.comment-form .primary-heading, .search-page-title { text-transform: none; }

/* G2: readable greys */
.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: #6b6b6b; }
.article-list .article a, .article-box .article a, .new-visited-commented .content .tabBody .article .text a { color: #333; }

/* G9: darker backing under white text on photos */
.main-slide .textArea { background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.6)); }
.second-slide .per-slide .textArea .title { background: rgba(0,0,0,.72); }

/* G11: radii */
.main-slide, .second-slide .per-slide .overflower, .article-list .article, .article-box .article { border-radius: var(--np-r-sm); }
.main-slide { overflow: hidden; }
.comment-form .btn.red, .comment-form .form button { border-radius: var(--np-r-sm); }

/* ER1: nothing in an article may be wider than the phone screen */
article, article .info, .np-article-body { max-width: 100%; min-width: 0; }
.np-article-body img { max-width: 100% !important; height: auto !important; }
.np-article-body { overflow-wrap: anywhere; word-break: break-word; }

/* ER3 + ER4: rotating banners keep one stable box (all slides share the same grid cell and
   only visibility changes), so the column never shows an empty, still-painting slot or jumps.
   Square side banners are capped in height. */
.np-banners[data-rotate] { display: grid; }
.np-banners[data-rotate] > .np-banner { grid-area: 1 / 1; display: flex; align-items: flex-start; justify-content: center; }
.np-banners[data-rotate] > .np-banner.is-hidden { display: flex; visibility: hidden; }
.np-banners.position3 .np-banner img, .np-banners.position4 .np-banner img,
.np-banners.position6 .np-banner img { width: auto; max-width: 100%; max-height: 300px; object-fit: contain; }
@media (max-width: 767.98px) {
    .np-banners.position3 .np-banner img, .np-banners.position4 .np-banner img,
    .np-banners.position6 .np-banner img, .np-banners.position9 .np-banner img { max-height: 200px; }
    .np-banners.position3, .np-banners.position4 { margin-left: auto; margin-right: auto; }
}

/* G13: slim bar in the brand navy (the logo is white) */
.np-sticky { background: #003366; }
.np-sticky__nav a { color: #fff !important; font-family: 'Roboto', Arial, sans-serif; }
.np-sticky__nav a:hover { color: #c1d7ec !important; }
.np-sticky .np-theme-toggle { color: #fff; border-color: rgba(255,255,255,.35); }
html[data-theme=dark] .np-sticky { filter: invert(1) hue-rotate(180deg); }
html[data-theme=dark] .np-sticky img { filter: none; }

/* G6: comfortable tap targets on phones */
@media (max-width: 767.98px) {
    .new-visited-commented .header .tab-btn button { min-height: 44px; }
    .slide-menu .res-nav li a { display: block; min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
    footer .footer-menu ul li { padding-top: 0; }
    footer .footer-menu ul li a { display: inline-block; min-height: 40px; line-height: 40px; }
    footer .bottom a { display: inline-block; min-height: 32px; line-height: 32px; }
    .pagination > li > a, .pagination > li > span { min-width: 44px; min-height: 44px; line-height: 30px; }
    .bread .bread-item a { display: inline-block; min-height: 32px; line-height: 32px; }
    .slide-menu .social a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; margin: 0 2px; }
    article .image .article-badge .category a { display: inline-block; min-height: 32px; line-height: 32px; }
    .post-meta li a { display: inline-block; min-height: 32px; line-height: 32px; }
}
/* Image links fill their image (the inline <a> was a 17px-tall strip) */
.article-list .image > a, .article-box .image > a { display: block; height: 100%; }
header .middle .logo > a, .slide-menu .logo-row > a { display: inline-block; }