@charset "utf-8";
/* mountainhandbook-responsive.css — Add AFTER mountainhandbook.min.css on every page */

/* Banner link only as wide as the image */
.mainBanner { display: block; }
.mainLogo { display: inline-block; line-height: 0; }

/* Safe globals */
#jb_container img, #jb_container * { max-width: none !important; }
img             { max-width: 100%; height: auto; }
.mainBanner img { display: block; max-width: 100%; height: auto; }
.container      { max-width: 100%; box-sizing: border-box; }

/* LISTS — left alignment for heading and table, applies to all screen sizes */
.listsPage .tableFind { margin-left: 10px; }

/* Trip Report box: always flow below the table at ALL screen sizes */
.listsPage .tableFind { display: flex; flex-direction: column; }
.listsPage .divListsFindP,
.listsPage .divListsFindC {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    margin: 12px 0 8px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hide desktop-style submenus on touch devices at ALL orientations (including landscape) */
@media (hover: none) and (pointer: coarse) {
    .navBar-sub { display: none !important; }
}

/* Active/inactive navBar2 tab styling */
.listsPage .navBar2 ul li > a { background-color: #D98210 !important; }
.listsPage .navBar2 ul li > a.navBar2-active { background-color: #C56A07 !important; }

/* ============================================================
   DESKTOP (> 768px) — hide mobile-only elements
   ============================================================ */
@media (min-width: 769px) and (not ((hover: none) and (pointer: coarse))) {
    .homePage .homeStuff { top: 158px; }
    .navBar-hamburger  { display: none !important; }
    .navBar-overlay    { display: none !important; }
    .navBar-arrow      { display: none !important; }
    .navBar-sub        { display: none !important; }
    .selectListMobile  { display: none !important; }
    .locOrganizeMobile { display: none !important; }

    .listsPage #id_COLists_form,
    .listsPage #id_CanyonLists_form {
        position: static !important; top: auto !important; left: auto !important;
        width: fit-content !important; display: block !important;
        clear: none !important; margin: 30px 10px 8px 10px !important;
    }
    .listsPage #id_COLists_form[style*="display:none"],
    .listsPage #id_COLists_form[style*="display: none"],
    .listsPage #id_CanyonLists_form[style*="display:none"],
    .listsPage #id_CanyonLists_form[style*="display: none"] {
        display: none !important; margin: 0 !important; padding: 0 !important;
    }
    .listsPage .divTable, .listsPage #divTable {
        position: static !important; top: auto !important; left: auto !important;
    }
    .mh-select-list { display: block; margin-bottom: 8px; }
    .mh-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    .mh-organize-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
    .mh-button-row { margin-top: 20px; }
    .mh-form-group > b { display: block; margin-bottom: 2px; }
}

/* ============================================================
   MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px), ((hover: none) and (pointer: coarse)) {

    body { overflow-x: hidden; }
    .navBar { width: 100%; height: 0; overflow: hidden; position: static; }

    .navBar-hamburger {
        display: block !important;
        width: min(70vw, 280px) !important;
        box-sizing: border-box !important;
        background-color: #D98210 !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        border-radius: 0 0 4px 4px !important;
        font-size: 17px !important;
        font-family: Verdana, Geneva, sans-serif !important;
        font-weight: normal !important;
        padding: 7px 12px !important;
        cursor: pointer !important;
        text-align: left !important;
        margin: 4px 0 0 0 !important;
    }
    .navBar-hamburger-icon {
        display: inline-block !important;
        transition: transform 0.25s ease !important;
        transform-origin: center center !important;
    }
    .navBar-hamburger.mbn-open .navBar-hamburger-icon {
        transform: rotate(90deg) !important;
    }

    /* ------ Overlay */
    .navBar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1050;
    }
    .navBar-overlay.mbn-show { display: block; }

    /* ------ THE SIDEBAR */
    #navBar-ul {
        position: fixed !important;
        top: 0;
        left: -75vw !important;
        width: 70vw !important;
        height: auto;
        max-height: 100vh;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1100 !important;
        background-color: #752611 !important;
        border-right: 3px solid #000 !important;
        transition: left 0.25s ease !important;
        display: flex !important;
        flex-direction: column !important;
        float: none !important;
        list-style: none !important;
        padding: 10px 0 0 0 !important;
        margin: 0 !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
    }

    #navBar-ul.navBar-open {
        left: 0 !important;
    }

    #navBar-ul > li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0,0,0,0.25) !important;
    }

    #navBar-ul > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        font-size: 15px !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        border-right: none !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        background-color: #D98210 !important;
        color: #000 !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    #navBar-ul > li > a:hover {
        background-color: #f09d28 !important;
    }

    .homePage    #navBar-ul .home,
    .listsPage   #navBar-ul .lists,
    .funPage     #navBar-ul .fun,
    .toolboxPage #navBar-ul .toolbox,
    .weatherPage #navBar-ul .weather,
    .searchPage  #navBar-ul .search,
    .showersPage #navBar-ul .showers,
    .aboutPage   #navBar-ul .about,
    #phpbb       #navBar-ul .gforums {
        background-color: #C56A07 !important;
    }

    #navBar-ul > li > a img {
        vertical-align: middle !important;
        margin: 0 6px 0 0 !important;
    }

    .navBar-arrow {
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: 0px !important;
        padding-left: 8px !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }

    .navBar-sub .navBar-arrow {
        margin-right: 20px !important;
    }

    .navBar-sub {
        display: none !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background-color: #5a1c0a !important;
        border-top: 1px solid rgba(0,0,0,0.3) !important;
    }

    #navBar-ul > li.sub-open > .navBar-sub {
        display: block !important;
    }

    .navBar-sub > li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0,0,0,0.15) !important;
    }

    .navBar-sub > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 5px 14px 5px 28px !important;
        font-size: 13px !important;
        font-family: Verdana, Geneva, sans-serif !important;
        background-color: #5a1c0a !important;
        color: #ebd3b1 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        line-height: 1.3 !important;
        border-right: none !important;
        border-radius: 0 !important;
        height: auto !important;
        white-space: normal !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .navBar-sub > li > a:hover {
        background-color: #8a2a10 !important;
        color: #fff !important;
    }

    .navBar-sub > li.horizBar > a {
        border-bottom: 3px double #D98210 !important;
    }

    .navBar-sub .navBar-sub {
        display: none !important;
        background-color: #3d1008 !important;
        border-top: 1px solid rgba(0,0,0,0.2) !important;
    }
    .navBar-sub li.sub-open > .navBar-sub {
        display: block !important;
    }
    .navBar-sub .navBar-sub > li > a {
        padding-left: 42px !important;
        background-color: #3d1008 !important;
        font-size: 12px !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .navBar-sub .navBar-sub > li > a:hover {
        background-color: #6b1a0e !important;
    }
    .navBar-sub-input {
        padding: 8px 14px 8px 28px !important;
        background-color: #5a1c0a !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .navBar-sub-input .input_text {
        flex: 1 !important;
        font-size: 12px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }
    .navBar-sub-input .input_submit {
        font-size: 12px !important;
        padding: 4px 8px !important;
        cursor: pointer !important;
    }

    .listsPage .navBar2, .toolboxPage .navBar2,
    .weatherPage .navBar2, .funPage .navBar2 {
        width: 100% !important; margin-top: 2px !important; margin-bottom: 22px !important; position: static !important;
    }
    .listsPage .navBar2 ul, .funPage .navBar2 ul,
    .toolboxPage .navBar2 ul, .weatherPage .navBar2 ul {
        display: inline-flex !important; width: auto !important;
        background: #C56A07 !important; border: none !important;
        padding: 0 !important; margin: 0 !important;
    }
    .listsPage .navBar2 ul li, .funPage .navBar2 ul li,
    .toolboxPage .navBar2 ul li, .weatherPage .navBar2 ul li { flex: 0 0 auto !important; }
    .listsPage .navBar2 ul li:last-child > a,
    .funPage .navBar2 ul li:last-child > a,
    .toolboxPage .navBar2 ul li:last-child > a,
    .weatherPage .navBar2 ul li:last-child > a {
        border-right: none !important; border-right-width: 0 !important;
    }

    .mainBanner img { width: 100% !important; height: auto !important; }

    /* HOME */
    .homePage .homeStuff {
        position: static !important; left: auto !important; top: auto !important;
        display: block !important; width: 100% !important;
        box-sizing: border-box !important; padding: 0 !important;
    }
    .homePage .galleryQuoteJoke { display: block !important; }
    .homePage .galleryQuoteJoke > div { display: block !important; width: 100% !important; }
    .homePage #jb_container { width: 350px !important; margin: 0 0 0 10px !important; }
    .homePage #jb_container > div { height: 350px !important; }
    .homePage #note { margin: 4px 0 0 10px !important; }

    .homePage .quoteJoke { width: 100% !important; padding-left: 0 !important; margin-top: 16px !important; box-sizing: border-box !important; }
    .homePage .posts, .homePage .quote, .homePage .joke { width: 100% !important; box-sizing: border-box !important; margin-right: 0 !important; }
    .homePage .postsBody a { white-space: normal !important; overflow: visible !important; }
    .homePage .social-icons, .homePage .copyright { width: 100% !important; }

    /* SEARCH */
    .searchPage form {
        position: static !important; left: auto !important; top: auto !important;
        float: none !important; width: fit-content !important;
        margin: 8px 10px !important; box-sizing: border-box !important;
    }
    .searchPage .searchDiv_class {
        position: static !important; left: auto !important; top: auto !important; margin: 8px 10px !important;
    }
    .searchPage .searchSP_class, .searchPage .searchA_class, .searchPage .searchT_class {
        width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important;
    }

    /* LISTS */
    .listsPage form {
        position: static !important; left: auto !important; top: auto !important;
        width: fit-content !important; margin: 12px 10px 8px 10px !important; box-sizing: border-box !important;
    }
    .listsPage form[style*="display:none"], .listsPage form[style*="display: none"] {
        display: none !important; margin: 0 !important; padding: 0 !important;
        width: 0 !important; height: 0 !important; overflow: hidden !important;
    }
    .mh-form-group { display: block !important; margin-top: 10px !important; }
    .mh-select-list { display: block !important; margin-bottom: 8px !important; }
    .mh-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; }
    .mh-row label { white-space: nowrap !important; }
    .mh-organize-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 4px !important; flex-wrap: wrap !important; }
    .mh-button-row { margin-top: 20px !important; }
    .mh-form-group > b { display: block !important; margin-bottom: 4px !important; }
    .mh-form-group > b:last-of-type { margin-top: 10px !important; }
    .listsPage .divTable {
        position: static !important; left: auto !important; top: auto !important;
        width: 100% !important; overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; margin: 8px 0 !important;
        box-sizing: border-box !important;
    }
    .listsPage table { min-width: 560px !important; }
    .listsPage h2, .listsPage h3, .listsPage h4, .listsPage p { padding-left: 0 !important; }
    .listsPage .divListsFindP, .listsPage .divListsFindC {
        margin: 8px 0 !important;
    }
    .listsPage .listsFindP_class, .listsPage .listsFindC_class { width: 100% !important; box-sizing: border-box !important; }

    /* FUN */
    .funPage iframe {
        position: static !important; left: auto !important; top: auto !important;
        width: calc(100% - 20px) !important; height: 70vh !important;
        margin: 8px 10px !important; display: block !important; box-sizing: border-box !important;
    }

    /* WEATHER */
    .weatherPage iframe {
        position: static !important; left: auto !important; top: auto !important;
        width: calc(100% - 20px) !important; height: 70vh !important;
        margin: 8px 10px !important; display: block !important; box-sizing: border-box !important;
    }

    /* TOOLBOX / PROGRESS MAP */
    #mapCO {
        position: static !important; left: auto !important; top: auto !important;
        width: calc(100% - 20px) !important; height: 70vw !important; margin: 8px 10px !important;
    }

    /* ABOUT */
    .aboutPage .aboutStuff, .showersPage .aboutStuff {
        position: static !important; left: auto !important; top: auto !important;
        width: calc(100% - 20px) !important; margin: 8px 10px !important;
        box-sizing: border-box !important;
    }
    .aboutPage .newsBody, .showersPage .newsBody {
        width: 100% !important; max-width: 100% !important;
        box-sizing: border-box !important;
    }

}