@import "variables.css";
@import "base.css";
@import "guofeng.css";
@import "layout.css";
@import "components.css";
@import "themes.css";

/* Mobile tweaks */
@media (max-width: 599px) {
    #header {
        padding-top: 64px;
        padding-bottom: 24px;
    }

    .scroll-header {
        padding: 0 36px;
    }

    .scroll-header::before,
    .scroll-header::after {
        width: 22px;
        height: 22px;
    }

    .category-button {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
        font-size: 13px;
        padding: 8px 10px;
    }

    .search-container {
        max-width: calc(100% - 24px);
        padding: 4px 4px 4px 14px;
        gap: 8px;
    }

    .search-icon svg {
        width: 16px;
        height: 16px;
    }

    #search-input {
        padding: 10px 0;
        font-size: 13px;
    }

    .search-button {
        padding: 9px 16px;
        font-size: 13px;
    }

    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    #menu-button {
        font-size: 13px;
        padding: 8px 12px;
    }
}

@media (min-width: 600px) {
    #header {
        padding-top: 80px;
    }

    .category-button {
        padding: 10px 18px;
    }
}