/* Firecat mobile compatibility */

@media (max-width: 940px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .art-sheet,
    div.art-header {
        width: 100% !important;
        max-width: 900px !important;
    }

    #art-page-background-simple-gradient,
    #art-page-background-gradient,
    #art-page-background-glare {
        min-width: 0 !important;
    }

    .art-header-jpeg {
        width: 100% !important;
        background-size: cover !important;
    }

    .art-logo {
        left: 6% !important;
        width: 88% !important;
    }

    .art-content-layout,
    .art-content-layout-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    .art-content-layout .art-layout-cell {
        box-sizing: border-box;
    }

    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    pre, code {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 700px) {
    .art-header {
        height: 220px !important;
    }

    .art-header-jpeg {
        height: 220px !important;
        background-position: center top !important;
    }

    .art-logo {
        top: 70px !important;
    }

    .art-logo-name,
    h1.art-logo-name,
    h1.art-logo-name a {
        font-size: clamp(24px, 7vw, 40px) !important;
        overflow-wrap: anywhere;
    }

    .art-logo-text {
        font-size: clamp(14px, 4vw, 19px) !important;
    }

    .art-content-layout-row {
        display: flex !important;
        flex-direction: column !important;
    }

    .art-content-layout .art-content,
    .art-content-layout .art-sidebar1,
    .art-content-layout .art-sidebar2 {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .art-content-layout .art-layout-cell {
        margin-bottom: 0 !important;
        padding-bottom: 12px !important;
    }

    .art-nav,
    .art-menu {
        height: auto !important;
        min-height: 0 !important;
    }

    .art-menu {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .art-menu > li {
        float: none !important;
    }

    .art-menu > li > a {
        max-width: 100%;
    }

    .art-post,
    .art-post-body,
    .art-postcontent {
        max-width: 100%;
        box-sizing: border-box;
    }

    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}