/* honestly I forget what this first hing does but hopefully it does something */


@media (min-width: 768px) {
    html body.ccm-page div.page-template-right-sidebar2 main .container {
        width: 85vw !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body.ccm-page div.page-template-right-sidebar2 main .container .row {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body.ccm-page div.page-template-right-sidebar2 main .container .row .col-sm-9 {
        width: 80% !important; /* Main: ~52.5vw */
    }
    html body.ccm-page div.page-template-right-sidebar2 main .container .row .col-sm-3 {
        width: 20% !important; /* Sidebar: ~17.5vw */
    }
    /* For col-sm-8/col-sm-4 if applicable */
    html body.ccm-page div.page-template-right-sidebar2 main .container .row .col-sm-8 {
        width: 90% !important; /* Main: ~56vw */
    }
    html body.ccm-page div.page-template-right-sidebar2 main .container .row .col-sm-4 {
        width: 10% !important; /* Sidebar: ~14vw */
    }
}



/*make right sidebar stack beneath content at 1275 instead of 768 */



/* Diagnostic override to force stacking at 1275px */
@media (max-width: 1275px) {
    div.ccm-page main.right-sidebar2 .container .row .col-sm-8.col-content,
    div.ccm-page main.right-sidebar2 .container .row .col-sm-4.col-sidebar {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    div.ccm-page main.right-sidebar2 .container .row .col-sm-4.col-sidebar {
        margin-top: 40px !important; /* Spacing for clarity */
    }
    div.ccm-page main.right-sidebar2 .container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}






/*Search bar block customiztation code */


/* Diagnostic: Apply a visible border to confirm rules are loaded */
div.ccm-page main.right-sidebar2 .col-sm-4.col-sidebar .ccm-search-block-form .ccm-search-block-text {
    min-width: 200px !important; /* Ensure minimum width */
    max-width: 300px !important; /* Cap to prevent oversized bar */
    width: 90% !important; /* Maintain responsiveness */
    box-sizing: border-box !important;
}

/* Adjust submit button to prevent overlap */
div.ccm-page main.right-sidebar2 .col-sm-4.col-sidebar .ccm-search-block-form .ccm-search-block-submit {
    margin-top: 0px !important;
    width: auto !important;
}

/* Ensure form container accommodates the input */
div.ccm-page main.right-sidebar2 .col-sm-4.col-sidebar .ccm-search-block-form {
    min-width: 220px !important; /* Room for input + button */
    display: block !important;
}

/* Fix search bar width when sidebar stacks */
@media (max-width: 1275px) {
    div.ccm-page main.right-sidebar2 .col-sm-4.col-sidebar .ccm-search-block-form .ccm-search-block-text {
        width: 50% !important; /* Fixed percentage width */
        min-width: 200px !important; /* Ensure minimum usability */
        max-width: 300px !important; /* Cap to prevent oversized bar */
        border: 2px solid green !important; /* Diagnostic: Confirm stacked */
    }
    div.ccm-page main.right-sidebar2 .col-sm-4.col-sidebar .ccm-search-block-form {
        width: 100% !important; /* Form takes full column width */
        min-width: 0 !important; /* Remove min-width constraint */
        text-align: left !important; /* Align input/button to left */
    }
}






/* Main content search bar */
div.ccm-page main.right-sidebar2 .col-sm-8.col-content .ccm-search-block-form .ccm-search-block-text {
    width: 100% !important; /* Maintain responsiveness */
    min-width: 200px !important; /* Ensure minimum usability */
    max-width: 300px !important; /* Cap to prevent oversized bar */
    box-sizing: border-box !important;
}

/* Main content submit button */
div.ccm-page main.right-sidebar2 .col-sm-8.col-content .ccm-search-block-form .ccm-search-block-submit {
    margin-top: 0px !important;
    width: auto !important;
}

/* Main content form container */
div.ccm-page main.right-sidebar2 .col-sm-8.col-content .ccm-search-block-form {
    width: 100% !important; /* Form takes full column width */
    min-width: 220px !important; /* Room for input + button */
    display: block !important;
    text-align: left !important; /* Align input/button to left */
}

/* Adjust main content search bar when stacked */
@media (max-width: 1275px) {
    div.ccm-page main.right-sidebar2 .col-sm-8.col-content .ccm-search-block-form .ccm-search-block-text {
        width: 50% !important; /* Match sidebar behavior */
        min-width: 200px !important;
        max-width: 300px !important;
    }
    div.ccm-page main.right-sidebar2 .col-sm-8.col-content .ccm-search-block-form {
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }
}