/* ── Mobile menu fix (news detail page only) ─────────────────────────────── */ /* * Problem A: commons.css hides the mobile nav via `right: -80%` on a * `position:fixed` element. Fixed elements are clipped by overflow on * , not . On desktop the browser propagates body overflow to * the scrollbar, so it works. In Chrome mobile-emulation mode it does NOT, * leaving the panel reachable via horizontal swipe and "breaking" the layout. * * Fix: anchor the panel at right:0 and use transform:translateX(100%) to * push it off-screen instead. transform never causes document overflow. * * Problem B: commons.css adds `position:absolute` to body when the mobile * menu is open (body.is-menu). position:absolute on body collapses its * height to the viewport and causes visible layout jumps on mobile. * * Fix: override to position:relative so the body stays in normal flow while * overflow:hidden (also from commons.css) still prevents background scroll. */ @media screen and (max-width: 1089px) { .single-post.page_news .mainmenu .navbar-collapse { right: 0; transform: translateX(100%); } body.single-post.page_news.is-menu .mainmenu .navbar-collapse.show { transform: translateX(0); } body.single-post.page_news.is-menu { position: relative; } } /* ── News detail page layout ─────────────────────────────────────────────── */ .news-detail-block { padding: 40px 0; background-color: #fff; } .news-detail-block .container { max-width: 900px; margin: 0 auto; } .news-article { background-color: #fff; } .article-header { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #e0e0e0; } .article-meta { display: flex; gap: 15px; margin-bottom: 15px; font-size: 0.9rem; } .article-meta .category { display: inline-block; padding: 5px 12px; background-color: #f0f0f0; border-radius: 20px; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; } .article-meta .date { color: #666; font-size: 0.9rem; } .article-title { font-size: 2rem; font-weight: 700; line-height: 1.3; margin: 15px 0 0 0; color: #333; } .featured-image { margin: 30px 0; border-radius: 8px; overflow: hidden; } .featured-image img { width: 100%; height: auto; display: block; } .article-body { font-size: 1.05rem; line-height: 1.8; color: #444; margin: 30px 0; } .article-body p { margin-bottom: 20px; } .article-body h2 { font-size: 1.5rem; font-weight: 700; margin-top: 30px; margin-bottom: 15px; color: #333; } .article-body h3 { font-size: 1.25rem; font-weight: 600; margin-top: 25px; margin-bottom: 12px; color: #555; } .article-body ul, .article-body ol { margin: 20px 0; margin-left: 30px; } .article-body li { margin-bottom: 10px; } .article-body a:hover { text-decoration: underline; color: #0052a3; } .article-footer { margin-top: 40px; padding-top: 30px; border-top: 1px solid #e0e0e0; } .article-footer .btn { display: inline-block; padding: 10px 20px; transition: all 0.3s ease; } .article-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 50px; padding-top: 30px; border-top: 1px solid #e0e0e0; } .article-navigation .prev-post, .article-navigation .next-post { padding: 20px; background-color: #f9f9f9; border-radius: 8px; } .article-navigation a { display: block; color: #333; text-decoration: none; font-weight: 500; transition: color 0.3s ease; font-size: 0.95rem; } .article-navigation a:hover { color: #0066cc; } .page_news .news-detail-block .article-navigation a:hover { color: #080808 !important; text-decoration: underline !important; } /* ── Category badge ──────────────────────────────────────────────────────── */ .news-detail-block .category { background-color: #000; color: #fff; display: inline-block; font-size: 10px; font-weight: bold; letter-spacing: 1px; margin-right: 15px; padding: 2px 12px; } @media (min-width: 1090px) { .news-detail-block .category { font-size: 12px; padding: 6px 15px; } } /* ── Banner title (mobile: long titles overflow fixed min-height) ─────────── */ @media screen and (max-width: 1089px) { .single-post.page_news .banner-block { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 25px 20px; } .single-post.page_news .banner-block .title { position: relative; top: auto; left: auto; transform: none; font-size: 18px; line-height: 1.4; text-align: center; width: 90%; word-break: break-word; } } @media screen and (max-width: 480px) { .single-post.page_news .banner-block { min-height: 90px; padding: 20px 15px; } .single-post.page_news .banner-block .title { font-size: 15px; } } /* ── Article layout — tablet ─────────────────────────────────────────────── */ @media screen and (max-width: 1089px) { .news-detail-block { padding: 30px 0; } .news-detail-block .container { padding-left: 20px; padding-right: 20px; } .article-header { margin-bottom: 25px; padding-bottom: 20px; } .article-meta { gap: 8px; flex-wrap: wrap; font-size: 0.8rem; } .article-title { font-size: 1.4rem; margin: 10px 0 0; } .featured-image { margin: 20px 0; border-radius: 4px; } .article-body { font-size: 0.9rem; line-height: 1.75; margin: 20px 0; } .article-body h2 { font-size: 1.2rem; margin-top: 22px; margin-bottom: 12px; } .article-body h3 { font-size: 1rem; margin-top: 18px; margin-bottom: 10px; } .article-body ul, .article-body ol { margin-left: 20px; } .article-footer { margin-top: 25px; padding-top: 20px; } .article-navigation { gap: 15px; margin-top: 30px; padding-top: 20px; } .article-navigation .prev-post, .article-navigation .next-post { padding: 12px; } .article-navigation a { font-size: 0.85rem; } } /* ── Article layout — mobile ─────────────────────────────────────────────── */ @media screen and (max-width: 768px) { .news-detail-block { padding: 20px 0; } .article-title { font-size: 1.5rem; } .article-body { font-size: 1rem; } .article-body h2 { font-size: 1.3rem; } .article-navigation { grid-template-columns: 1fr; } } /* ── Article layout — small phones ──────────────────────────────────────── */ @media screen and (max-width: 480px) { .news-detail-block { padding: 15px 0; } .news-detail-block .container { padding-left: 15px; padding-right: 15px; } .article-title { font-size: 1.15rem; } .article-meta .category { font-size: 0.7rem; padding: 3px 8px; } .article-meta .date { font-size: 0.78rem; } .article-body { font-size: 0.85rem; line-height: 1.7; } .article-body h2 { font-size: 1.05rem; } .article-body h3 { font-size: 0.9rem; } .article-body ul, .article-body ol { margin-left: 16px; } .article-navigation { grid-template-columns: 1fr; } .article-navigation .prev-post, .article-navigation .next-post { padding: 10px; } } /* ── Responsive images ───────────────────────────────────────────────────── */ .single-post.page_news .article-body img, .single-post.page_news .featured-image img { max-width: 100%; height: auto; display: block; } /* WordPress [caption] shortcode sets an inline width — override it */ .single-post.page_news .article-body .wp-caption { max-width: 100% !important; height: auto; } .single-post.page_news .article-body .wp-caption img { max-width: 100%; height: auto; } .single-post.page_news .article-body .alignright { float: right; margin: 0 0 20px 20px; } .single-post.page_news .article-body .alignleft { float: left; margin: 0 20px 20px 0; } /* Clear floats so floated images don't bleed outside article-body */ .single-post.page_news .article-body::after { content: ''; display: block; clear: both; } .single-post.page_news .article-body .aligncenter { display: block; margin-left: auto; margin-right: auto; } @media screen and (max-width: 768px) { .single-post.page_news .article-body .alignright, .single-post.page_news .article-body .alignleft { float: none; margin: 15px auto; display: block; width: 100% !important; max-width: 100%; } .single-post.page_news .article-body .wp-caption-text { font-size: 0.75rem; word-break: break-word; } }