/*
 * SJCA Mobile — responsive layer for the sjca WordPress theme.
 * Everything below only applies on narrow screens; desktop is untouched.
 */

@media (max-width: 980px) {

    /* ---- Fluid structure: kill the fixed 940px widths ---- */
    #wrapper,
    #access,
    #main,
    #colophon,
    #branding {
        width: auto !important;
        max-width: 100%;
    }

    #wrapper {
        padding: 0 10px;
        overflow: hidden;
    }

    #container {
        width: auto !important;
        float: none !important;
        margin: 0 !important;
    }

    #content {
        width: auto !important;
        margin: 0 !important;
    }

    #column1,
    #column2 {
        float: none !important;
        width: auto !important;
    }

    /* ---- Header ---- */
    #site-title {
        width: auto;
        float: none;
        font-size: 24px;
        line-height: 30px;
    }

    #site-description {
        float: none;
        clear: both;
        width: auto;
    }

    #branding img,
    #header img {
        max-width: 100%;
        height: auto;
    }

    /* ---- Nav: accordion (top level only, tap + to expand) ---- */
    #access {
        width: auto;
        float: none;
    }

    #access .menu-header,
    #access div.menu {
        margin-left: 0;
        width: auto;
    }

    #access .menu-header li,
    #access div.menu li {
        position: relative;
        float: none;
        display: block;
        border-right: none;
        border-bottom: 1px solid #454545;
    }

    #access li.has-submenu > a {
        padding-right: 46px; /* room for the + toggle */
    }

    /* Sub-menus stay hidden until tapped (also kills desktop hover-open) */
    #access ul li:hover > ul {
        display: none;
    }

    #access ul ul,
    #access ul ul ul {
        display: none;
        position: static;
        width: auto;
        float: none;
        top: auto;
        left: auto;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }

    #access ul li.submenu-open > ul {
        display: block;
    }

    #access ul ul li {
        min-width: 0;
    }

    #access ul ul a {
        width: auto;
        padding-left: 24px;
    }

    #access ul ul ul a {
        padding-left: 40px;
    }

    /* The + / − tap target */
    .sjca-submenu-toggle {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        color: #aaa;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        z-index: 2;
    }

    #access li.submenu-open > .sjca-submenu-toggle {
        color: #fff;
    }

    /* Cross logo sits above the stacked menu instead of overlapping it */
    #access .crossimg {
        position: static;
        display: block;
        margin: 8px auto;
    }

    /* ---- Content media ---- */
    #content img {
        max-width: 100% !important;
        height: auto;
    }

    #content .attachment img {
        max-width: 100% !important;
    }

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

    iframe,
    embed,
    object,
    video {
        max-width: 100%;
    }

    /* YouTube embeds keep a proper 16:9 frame on narrow screens */
    #content iframe[src*="youtube.com"],
    #content iframe[src*="youtu.be"],
    #content iframe[src*="youtube-nocookie.com"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* ---- Homepage slider / ticker: fluid, no fixed pixel widths ---- */
    .widgets,
    .infiniteCarousel {
        width: auto !important;
        max-width: 100%;
    }

    .infiniteCarousel .wrapper {
        width: auto !important;
        margin: 0 !important;
        position: static !important;
    }

    .infiniteCarousel .wrapper ul {
        width: auto !important;
        position: static !important;
    }

    .widgets .ticker {
        width: auto !important;
        padding-left: 0;
        background: none;
    }

    /* ---- Footer widgets: stack ---- */
    #footer-widget-area .widget-area {
        float: none;
        width: auto;
    }

    #site-info,
    #site-generator {
        float: none;
        width: auto;
        text-align: left;
    }

    /* ---- Comment avatars keep their gutter on small screens ---- */
    .commentlist li.comment {
        padding-left: 48px;
    }
}