/*
Theme Name: Sturdy for Common Things (Mobile)
Template: Sturdyforcommonthings
Description: Mobile-responsive child theme
*/

/* Hide mobile-only toggle on desktop */
#nav-toggle { display: none; }

/* Global: responsive images */
img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 980px) {

    /* ---- Outer wrapper ---- */
    #wrap {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* ---- Header: intrinsic ratio on the link itself ---- */
    #header {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #header h1#title {
        margin: 0;
        padding: 0;
        line-height: 0;
    }
    #header #title a {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 25% !important; /* 240/960 = 25% */
        background-size: 100% 100% !important;
        background-position: left top !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    /* ---- Navbar ---- */
    #navbar {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    /* Hamburger button */
    #nav-toggle {
        display: block;
        width: 100%;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        text-align: left;
        padding: 7px 12px;
        cursor: pointer;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    /* Hide menu by default; show when toggled */
    #navbar .menu {
        display: none;
        text-align: left;
    }
    #navbar .menu.open {
        display: block;
    }

    /* Stack nav items vertically */
    #navbar .menu li {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }
    #navbar .menu a {
        display: block !important;
        height: auto !important;
        line-height: 2.2 !important;
        padding: 4px 12px !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        margin: 0 !important;
    }

    /* Show sub-menus inline (static, not absolute) */
    #navbar .menu ul {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        display: block !important;
    }
    #navbar .menu li li { padding-left: 15px; }
    #navbar .menu li li li { padding-left: 30px; }

    /* ---- Main container ---- */
    #container {
        width: 100% !important;
    }
    #content.left,
    #content.wide,
    #content.home {
        width: 100% !important;
        float: none !important;
    }

    /* ---- Sidebar stacks below content ---- */
    #sidebar {
        width: 100% !important;
        float: none !important;
        margin: 15px 0 !important;
        display: block !important;
        box-sizing: border-box;
    }
    #sidebar .widget {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    /* ---- Homepage feature boxes: single column ---- */
    #homepage {
        width: 100% !important;
    }
    .homebox {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    .homeboxinfo {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ---- Slider: shrink gracefully ---- */
    #homeslider {
        width: 100% !important;
        height: auto !important;
    }
    #homeslider .slideinfo {
        width: 90% !important;
        height: auto !important;
        margin: 10px auto 0 !important;
        position: relative !important;
    }
    #homeslider .slideinfo h1 {
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        margin: 0 0 8px 0 !important;
        font-size: 20px !important;
    }
    #homeslider .slideinfo p {
        width: 100% !important;
        height: auto !important;
    }
    div.anythingSlider,
    div.anythingSlider .anythingWindow {
        width: 100% !important;
        height: auto !important;
        min-height: 200px;
    }
    div.anythingSlider li iframe,
    div.anythingSlider li embed,
    div.anythingSlider li .feature_video,
    div.anythingSlider li .feature_img,
    div.anythingSlider li .feature_img img {
        width: 100% !important;
        height: auto !important;
    }

    /* ---- Footer ---- */
    #footer {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        box-sizing: border-box;
    }
    .footerleft,
    .footerright {
        float: none !important;
        display: block !important;
        margin: 5px 0 !important;
    }

    /* ---- Archive columns ---- */
    .archive_column {
        width: 100% !important;
        padding-right: 0 !important;
        float: none !important;
    }

    /* ---- Comment form fields ---- */
    #author, #email, #url {
        width: 100% !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* ---- Share / date positioning ---- */
    .addtoany_share_save_container {
        float: none !important;
        margin: 10px 0 !important;
    }
    .date {
        margin-bottom: 0 !important;
    }
}

/* ---- Additional mobile refinements ---- */
@media screen and (max-width: 980px) {

    /* Images inside post content: stop floating, go full width */
    .postarea img,
    .postarea img.alignright,
    .postarea img.alignleft,
    .postarea img.alignnone,
    .postarea .alignright,
    .postarea .alignleft,
    img.alignright,
    img.alignleft {
        float: none !important;
        display: block !important;
        margin: 10px auto !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* wp-caption (image with caption) */
    .wp-caption {
        max-width: 100% !important;
        width: auto !important;
    }
    .wp-caption img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Postmeta row: don't float, stack cleanly */
    .postmeta p {
        float: none !important;
        margin: 5px 0 !important;
    }

    /* Blockquote: reduce side margins on small screens */
    blockquote {
        margin: 10px 5px !important;
        font-size: 16px !important;
    }

    /* Pagination links */
    #prevLink, #nextLink {
        width: 48% !important;
    }

    /* Sidebar: constrain all images inside it */
    #sidebar img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Subscribe box inside sidebar */
    .subscribe {
        width: 100% !important;
        box-sizing: border-box;
    }
    #subbox {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* floralindex decoration: don't let it push content sideways */
    #floralindex {
        float: none !important;
        display: block !important;
        text-align: center !important;
        margin: 10px auto !important;
    }
}

@media screen and (max-width: 980px) {

    /* Fix the large negative margin on .date that collapses spacing */
    .date {
        margin-bottom: 10px !important;
        position: static !important;
    }

    /* Postmeta bar: reset the right-margin offset used for desktop layout */
    .postmeta {
        margin: 10px 0 !important;
        overflow: hidden;
    }

    /* Post block: a bit more vertical breathing room between posts */
    .postblock {
        padding-bottom: 20px !important;
        margin-bottom: 15px !important;
    }

    /* Feature images in archive/post lists: full width, no overflow */
    .feature_img img,
    .archive .feature_img img,
    .search .feature_img img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Share buttons: clear below post content */
    .addtoany_share_save_container {
        clear: both !important;
        float: none !important;
        margin: 15px 0 5px !important;
    }

    /* Pagination prev/next: full width on very small screens */
    #pagination {
        margin-top: 20px !important;
    }
    #prevLink, #nextLink {
        width: 120px !important;
    }
}

/* ---- Category listing preview images ---- */
.category-preview {
    margin: 8px 0 14px;
    overflow: hidden;
    border-radius: 2px;
}
.category-thumb {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    transition: opacity 0.2s ease;
}
.category-thumb:hover {
    opacity: 0.85;
}

/* Ensure sub-menus are never hidden by display:none on desktop —
   parent CSS uses top:-9999px / top:30px to show/hide on :hover */
#navbar .menu ul,
#navbar ul.menu ul {
    display: block;
}