/*
Theme Name: Hoper GeneratePress Child
Description: Hoper news portal presentation on GeneratePress.
Author: Hoper
Template: generatepress
Version: 0.7.1
*/

:root {
    --hoper-red: #ed1c24;
    --hoper-text: #252525;
    --hoper-muted: #777;
    --hoper-line: #dedede;
}

body {
    color: var(--hoper-text);
    font-family: "Golos Text", sans-serif;
    font-size: 16px;
}
h1, h2, h3, h4, h5, h6,
.main-navigation a,
.hoper-section-title,
.hoper-toplist__title,
.hoper-news-list a,
.site-title {
    font-family: "Manrope", sans-serif;
}
a:hover { color: var(--hoper-red); }
.site-grid { max-width: 1160px; margin: 0 auto; padding: 0 3rem; }
.site-header { margin: 2.5rem 0 3.5rem; }
.site-header { border-bottom: 1px solid var(--hoper-line); }
.inside-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; }
.site-branding { display: block; text-decoration: none; }
.site-branding img { display: block; width: 300px; height: 50px; object-fit: cover; }
.main-navigation { display: flex; gap: 2rem; }
.main-navigation a { color: var(--hoper-red); font-size: 14px; text-decoration: none; text-transform: uppercase; }
.hoper-top-links { border-top: 1px solid var(--hoper-line); padding: 1rem 0; }
.hoper-top-links__label { color: var(--hoper-red); text-transform: uppercase; font-size: 1.2rem; }
.hoper-top-links a { display: inline-block; margin-left: 1.5rem; font-weight: 700; text-decoration: none; }
.hoper-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; width: 100%; }
.hoper-home-top { margin-bottom: 4rem; }
.hoper-main-top { display: flex; align-items: flex-start; gap: 4rem; width: 100%; }
.hoper-topnews { flex: 0 0 360px; }
.hoper-topnews > a { display: block; height: 230px; overflow: hidden; margin-bottom: 12px; }
.hoper-topnews img { width: 100%; height: 230px; object-fit: cover; }
.hoper-topnews h1 { margin: .5rem 0; font-size: 28px; line-height: 1.15; }
.hoper-topnews h1 a { color: var(--hoper-text); text-decoration: none; }
.hoper-topnews p { color: #555; }
.hoper-toplist { flex: 1 1 auto; min-width: 0; }
.hoper-toplist__tab { display: inline-block; margin-bottom: 1.5rem; padding: .3rem 1.3rem; background: #e5e5e5; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.hoper-toplist ul { list-style: none; margin: 0; padding: 0; }
.hoper-toplist li { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.hoper-toplist__image { flex: 0 0 12rem; height: 7.6rem; overflow: hidden; }
.hoper-toplist__image img { width: 100%; height: 100%; object-fit: cover; }
.hoper-toplist__title { display: block; color: var(--hoper-text); font-size: 18px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.hoper-more { color: var(--hoper-red); font-size: 1.2rem; text-decoration: none; }
.hoper-date { color: var(--hoper-muted); font-size: 1.2rem; }
.hoper-news-list a { text-decoration: none; }
.hoper-section-title { border-bottom: 2px solid var(--hoper-red); padding-bottom: .6rem; font-size: 1.8rem; text-transform: uppercase; }
.hoper-news-list { list-style: none; margin: 0; padding: 0; }
.hoper-news-list li { display: flex; gap: 1rem; border-bottom: 1px solid var(--hoper-line); padding: 1.4rem 0; }
.hoper-news-list__image { flex: 0 0 120px; height: 76px; overflow: hidden; }
.hoper-news-list__image img { width: 100%; height: 100%; object-fit: cover; }
.hoper-news-list__body { min-width: 0; }
.hoper-news-list a { color: var(--hoper-text); font-size: 18px; font-weight: 700; line-height: 1.3; }
.hoper-news-list__featured { display: block; padding: 1.4rem 0; }
.hoper-news-list__featured-image { display: block; width: 100%; }
.hoper-news-list__featured-image img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.hoper-news-list__featured-title { margin-top: .8rem; }
.hoper-news-list__featured-title a { font-size: 24px; line-height: 1.2; }
.hoper-news-list a:hover,
.hoper-topnews h1 a:hover,
.hoper-toplist__title:hover { color: var(--hoper-red); }
.hoper-sidebar-box { border-top: 2px solid var(--hoper-red); margin-bottom: 3rem; padding-top: 1rem; }
.hoper-sidebar-box h2 { font-size: 1.6rem; text-transform: uppercase; }
.hoper-entry-title { margin-top: 0; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.15; }
.hoper-entry-content { font-family: "Golos Text", sans-serif; font-size: 18px; line-height: 1.6; }
.hoper-entry-content blockquote { border-left: 3px solid var(--hoper-red); padding-left: 1.5rem; }
.hoper-comments { border-top: 2px solid var(--hoper-red); margin-top: 4rem; padding-top: 2rem; }
.site-footer { margin-top: 70px; border-top: 2px solid var(--hoper-red); padding: 12px 0 30px; }
.footer__topics ul { list-style: none; margin: 0; padding: 0 0 30px; border-bottom: 1px solid var(--hoper-line); }
.footer__topics li { display: inline-block; position: relative; margin: 0 20px 0 0; line-height: 2.4; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footer__topics li:before { content: ""; position: absolute; top: 11px; left: -11px; width: 3px; height: 3px; border-radius: 50%; background: gainsboro; }
.footer__topics li:first-child:before { display: none; }
.footer__topics a, .footer__copy a { color: var(--hoper-red); text-decoration: none; }
.footer__topics a { color: #000; }
.sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 23px; }
.spons-item img { display: block; max-height: 64px; width: auto; }
.footer__bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 50px; font-size: 14px; line-height: 1.4; }
.footer__copy i { font-style: normal; color: var(--hoper-red); }
.footer__stats { display: flex; gap: 15px; align-items: center; }
.footer__stats-item img { display: block; }
.footer__counter-script { display: none; }

@media (max-width: 800px) {
    .inside-header, .hoper-layout { display: block; }
    .main-navigation { flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
    .site-grid { padding: 0 1.5rem; }
    .hoper-main-top { display: block; }
    .hoper-topnews { width: auto; }
    .hoper-toplist { margin-top: 2rem; }
    .hoper-sidebar { margin-top: 3rem; }
    .site-branding img { width: 240px; height: 40px; }
    .sponsors { display: none; }
    .footer__bottom { display: block; }
    .footer__stats { margin-top: 10px; }
}