/* champion.com.ua clone — small additions on top of the original CSS.
   The header, menu, hero, news lists, cards and the article keep the original
   classes; these rules only cover what the original does with JS (the burger
   menu, the search popup, the theme switch) and the columns that stay empty
   here because the ad blocks and the sidebars were dropped. */

/* The original article page is a 3-column grid (side / article / ads).
   Without the sidebars the article column stays in the middle. */
.section_news_wrapper { grid-template-columns: minmax(0, 800px); justify-content: center }
.post_news { grid-area: 1 / 1 / 2 / 2 }

/* The burger menu opens a JS popup; here it is a plain link to the home page,
   and the search field is always visible. */
.header_wrapper_l .top_menu_link { text-decoration: none }
.header_wrapper_s .search_form input[type="search"] {
    width: 100%;
    border: 1px solid var(--divider-color-medium);
    border-radius: 4px;
    padding: 6px 10px;
    font: inherit;
    background: var(--white-color);
}
.header_wrapper_s .search_form button {
    border: none;
    background: var(--main-color);
    color: var(--white-color);
    border-radius: 4px;
    padding: 7px 14px;
    font: inherit;
    cursor: pointer;
    margin-left: 6px;
}
.header_wrapper_s .search_form form { display: flex; align-items: center }

/* Cards inside the kit's simulated grid must not keep the original gutters. */
.nf-grid .article_story_grid { padding: 0 }
.nf-grid .article_story_grid .article_title a:after { right: 0; left: 0 }

/* The original hides the search behind a JS icon on small screens; here a
   compact search bar sits under the menu. */
.header_search_mobile { display: none }
@media screen and (max-width: 980px) {
    .header_search_mobile { display: block; padding: 10px 12px }
    .header_search_mobile form { display: flex; align-items: center; gap: 6px }
    .header_search_mobile input[type="search"] {
        flex: 1;
        border: 1px solid var(--divider-color-medium);
        border-radius: 4px;
        padding: 8px 10px;
        font: inherit;
        background: var(--white-color);
    }
    .header_search_mobile button {
        border: none;
        background: var(--main-color);
        color: var(--white-color);
        border-radius: 4px;
        padding: 9px 16px;
        font: inherit;
        cursor: pointer;
    }
}