/* ==========================================================================
   Compact mobile header: logo + search + burger. Categories, chains, about,
   theme and X live in the burger drawer. Loaded last (after refresh.css).
   ========================================================================== */

.header-icon-btn.mobile-search-toggle,
.header-icon-btn.mobile-menu-toggle,
.w3-drawer {
    display: none;
}

@media (max-width: 768px) {
    .main-header .header-content {
        gap: 8px;
        padding: 0 12px !important;
    }
    .main-header .header-content::after {
        display: none;
    }

    /* Hide everything except the logo and the two icon buttons */
    .main-header .header-divider,
    .main-header .header-nav-btn.category-toggle,
    .main-header .header-nav-btn.chains-toggle,
    .main-header .header-actions .theme-toggle-btn,
    .main-header .header-actions .about-link-text,
    .main-header .header-actions .twitter-header-btn {
        display: none !important;
    }

    .main-header .logo {
        flex: 1 1 auto;
        min-width: 0;
    }
    .main-header .header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

    .main-header .header-icon-btn.mobile-search-toggle,
    .main-header .header-icon-btn.mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.14) !important;
        color: #fff !important;
        cursor: pointer;
        order: 0 !important;
    }
    .main-header .header-icon-btn:hover,
    .main-header .header-icon-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.26) !important;
    }
    .main-header .header-icon-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    /* Search bar slides in under the header */
    .main-header .header-search-container {
        display: none !important;
    }
    .main-header.search-open .header-search-container {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-width: none;
        width: auto;
        margin: 0;
        padding: 10px 12px;
        background: var(--primary-color, #2450f1);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
        z-index: 1001;
    }
    .main-header.search-open .header-search-input {
        width: 100% !important;
        height: 42px;
        font-size: 16px !important; /* prevents iOS zoom */
        padding: 8px 14px 8px 38px !important;
    }
    .main-header.search-open .header-search-icon {
        left: 26px;
    }

    /* Drawer */
    .w3-drawer {
        display: block;
    }
    .w3-drawer[hidden] {
        display: none;
    }
    .w3-drawer__panel {
        padding: 8px 12px 14px !important;
    }
    .w3-drawer__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .w3-drawer__list li + li {
        border-top: 1px solid rgba(15, 23, 42, 0.07);
    }
    .w3-drawer__row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 0 6px;
        background: none;
        border: 0;
        color: var(--text-primary, #0f172a);
        font: 600 15px/1.2 var(--font-heading, inherit);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .w3-drawer__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(36, 80, 241, 0.08);
        color: var(--primary-color, #2450f1);
        flex-shrink: 0;
    }
    .w3-drawer__label {
        flex: 1;
    }
    .w3-drawer__chev {
        transform: rotate(-90deg);
        opacity: 0.5;
    }
    .w3-drawer__row:focus-visible {
        outline: 2px solid var(--primary-color, #2450f1);
        outline-offset: -2px;
        border-radius: 10px;
    }

    body.theme-dark .w3-drawer__list li + li {
        border-top-color: rgba(255, 255, 255, 0.07);
    }
    body.theme-dark .w3-drawer__row {
        color: var(--text-primary, #f1f5f9);
    }
    body.theme-dark .w3-drawer__icon {
        background: rgba(96, 130, 255, 0.14);
    }
}

/* ==========================================================================
   Front page news tags: one scrollable row instead of a wrapping wall
   ========================================================================== */
.news-feed-tabs {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.news-feed-tabs::-webkit-scrollbar {
    display: none;
}
.news-feed-tabs .news-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
}
.news-feed-tabs.is-scrolled-end {
    mask-image: none;
    -webkit-mask-image: none;
}