/* ==========================================================================
   responsive.css — mobile / tablet layer for every layout.
   Loaded LAST in <head> (after Bootstrap and the page stylesheets) so it can
   override earlier rules without !important wherever possible.

   Breakpoints (same as Bootstrap 5):
     xl  >= 1200px  desktop: original design, left untouched
     lg  <  1200px  admin sidebar becomes an off-canvas drawer
     md  <   992px  user top-nav links collapse behind the toggle
     sm  <   768px  layout columns stack, fixed widths are capped
     xs  <   576px  tighter spacing

   Opt-outs:
     .keep-cols on a .row   keeps its columns side by side on phones
   ========================================================================== */

/* ---------- global safety net ---------- */
body {
    overflow-x: hidden;
}

.rsp-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Zero-specificity media defaults: any class rule in a page stylesheet wins. */
:where(.main_, .containers) :where(img, video, canvas, iframe, embed, object) {
    max-width: 100%;
}

:where(.main_, .containers) :where(img:not([height])) {
    height: auto;
}

/* ==========================================================================
   ADMIN SHELL (layouts/dashboard.hbs): navbar + sidebar
   ========================================================================== */
.sidebar-backdrop {
    display: none;
}

@media (max-width: 1199.98px) {

    /* The body carried 16rem of left padding for the fixed sidebar. */
    body.bd-pd,
    body.body-pd.bd-pd {
        padding: 2rem 0 0 0;
    }

    /* Sidebar becomes a slide-in drawer under the fixed navbar. */
    body .l-navbar_ {
        display: block;
        width: 270px !important;
        max-width: 85vw;
        padding-top: 4.5rem !important;
        transform: translateX(-105%);
        transition: transform .3s ease;
        z-index: 1029;
        box-shadow: none;
    }

    body.sidebar-open .l-navbar_ {
        transform: translateX(0);
        box-shadow: 6px 0 24px rgba(6, 26, 42, .18);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6, 26, 42, .45);
        z-index: 1028;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    /* Hamburger: visible, first in the bar, comfortable tap target. */
    .side_btn {
        display: block !important;
        font-size: 28px;
        padding: .35rem;
        cursor: pointer;
    }

    .nav-toggle-wrap {
        order: -1;
        margin-right: .5rem;
        display: flex;
        align-items: center;
    }

    .navbar__ .container-fluid.main2_navbar {
        flex-wrap: nowrap;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar__ .navbar-brand {
        margin-right: 0;
    }

    .navbar__ .nav_ul.ms-auto {
        gap: 16px;
        margin-bottom: 0;
        align-items: center;
        padding-top: 0;
    }

    /* Account dropdowns: keep them on screen. */
    .navbar__ .dropdown_ {
        position: fixed;
        top: 64px;
        right: .75rem;
        left: auto;
        max-width: calc(100vw - 1.5rem);
        z-index: 1050;
    }

    /* Content column */
    .main_ {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    /* Absolutely centred title/search collides with the icons. */
    .navbar__:not(.user_nav_) .center_txt {
        display: none !important;
    }
}

/* ==========================================================================
   USER SHELL (layouts/user_dashboard.hbs)
   ========================================================================== */
@media (max-width: 1199.98px) {
    .side1,
    .side2 {
        display: none;
    }

    .user_body {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }

    .user_nav_ .nav_ul.ms-auto {
        gap: 14px;
    }
}

@media (max-width: 991.98px) {

    /* Primary links move into a panel opened by the caret toggle. */
    .user_nav_ .user_navbar_toggle_ {
        display: block;
    }

    .user_nav_ .user_navbar_toggle_ i {
        font-size: 22px;
        cursor: pointer;
        padding: .25rem;
    }

    .user_nav_ .user_activities_section {
        display: block !important;
        position: fixed;
        top: 64px;
        left: .75rem;
        right: .75rem;
        height: auto !important;
        padding: 0 !important;
        z-index: 1040;
    }

    .user_nav_ .user_activities_section .user_navbar_ {
        position: static;
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .12);
        box-shadow: 0 6px 15px rgba(6, 26, 42, .12);
        border-radius: 12px;
        padding: .5rem;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .user_nav_ .user_activities_section .user_navbar_.nav_hidden {
        display: none;
    }

    .user_nav_ .user_navbar_ li {
        margin: 0;
        padding: .7rem 1rem;
    }

    .user_nav_ .user_navbar_ li p {
        margin: 0;
    }

    .user_nav_ .user_navbar_ li a {
        display: block;
    }

    /* Event / Donate sub-menus open inline inside the panel. */
    .user_nav_ .user_navbar_ .event_drop_down {
        position: static;
        margin: 0 .5rem .5rem !important;
        padding: .5rem 1rem;
        box-shadow: none;
        border: 1px solid rgba(6, 26, 42, .1);
    }

    .user_nav_ .user_navbar_ .event_drop_down.hidden {
        display: none;
    }

    .user_nav_ .user_navbar_ .event_dropdown_create,
    .user_nav_ .user_navbar_ .event_dropdown_view {
        padding: .5rem .75rem;
    }

    .user_nav_ .dropdown_ {
        position: fixed;
        top: 64px;
        right: .75rem;
        z-index: 1050;
    }
}

@media (max-width: 575.98px) {
    .user_body {
        margin-left: .75rem;
        margin-right: .75rem;
    }

    .user_nav_ .main2_navbar {
        padding-left: .75rem;
        padding-right: .75rem;
        flex-wrap: nowrap;
    }

    .user_nav_ .nav_ul.ms-auto {
        gap: 10px;
    }

    .user_nav_ .logo_img {
        max-width: 96px;
    }
}

/* ==========================================================================
   FORM / AUTH LAYOUT (layouts/form.hbs)
   ========================================================================== */
@media (max-width: 767.98px) {
    .containers.container-form {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .containers.container-form>.row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   CONTENT (all pages inside .main_ / .containers), tablet and below
   ========================================================================== */
@media (max-width: 1199.98px) {

    /* Hard-coded pixel widths (624px cards, 550px inputs, …) shrink to fit. */
    :where(.main_, .containers) :where(div, section, article, form, fieldset, input, select, textarea, button, a, p, h1, h2, h3, h4, h5, h6, ul, ol, label, span, nav) {
        max-width: 100%;
    }

    :where(.main_, .containers) :where(.card, .modal-content) {
        max-width: 100%;
    }

    .select2-container {
        max-width: 100%;
    }

    /* Long e-mails, references, URLs. */
    :where(.main_, .containers) :where(p, h1, h2, h3, h4, h5, h6, td, li, a, span) {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767.98px) {

    /*
     * Layout columns stack. Small "label + icon" splits (col-1/2/10/11/12)
     * and halves (col-6) stay side by side. Specificity 0,1,0 + loaded after
     * Bootstrap, so Bootstrap's .col-N loses but page rules such as
     * ".tabs .col-4 { width: 50% }" still win.
     */
    :where(.main_, .containers) :where(.row:not(.keep-cols))> :is(.col-3, .col-4, .col-5, .col-7, .col-8, .col-9) {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Equal-width .col siblings wrap instead of squeezing to ~60px each. */
    :where(.main_, .containers) :where(.row:not(.keep-cols))>.col {
        flex: 1 0 9rem;
    }

    /* Bootstrap modals use the full width. */
    .modal-dialog {
        margin: .75rem;
    }

    /* DataTables controls stack. */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
        margin-bottom: .5rem;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0;
        width: 100%;
    }

    /* Breadcrumb line */
    .page-header {
        padding-left: 0;
    }
}

/* ==========================================================================
   PAGE: user dashboard (views/user/dashboard.hbs)
   Below 992px the three columns stack: profile, sidebar cards, then feed.
   ========================================================================== */
@media (max-width: 991.98px) {
    .container.user_dashboard_ {
        padding-left: 0;
        padding-right: 0;
    }

    .container.user_dashboard_>.row {
        display: flex;
        flex-wrap: wrap;
    }

    .container.user_dashboard_>.row>.left_user_dash,
    .container.user_dashboard_>.row>.center_user_dash,
    .container.user_dashboard_>.row>.right_user_dash {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        align-items: stretch;
        right: 0;
    }

    .container.user_dashboard_>.row>.left_user_dash { order: 1; }
    .container.user_dashboard_>.row>.center_user_dash { order: 2; margin-top: 0 !important; }
    .container.user_dashboard_>.row>.right_user_dash { order: 3; }

    .card.bio_card,
    .card.upcoming_event_card,
    .card.intrest_card,
    .card.volunteering_card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .card.intrest_card,
    .card.volunteering_card,
    .card.upcoming_event_card {
        height: auto;
        min-height: 220px;
        margin-bottom: 1.5rem;
    }

    /* The decorative banner scales with width; keep it short on tablets. */
    .card.bio_card .user_dashboad_bio {
        height: 120px;
        object-fit: cover;
    }

    .unavailable {
        width: 100%;
        top: 0;
        padding: 3rem 0;
    }

    /* Polling unit + 4 counters: 2-up grid instead of one squeezed row. */
    .row.vital_info_container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-left: 0;
        margin-right: 0;
    }

    .row.vital_info_container>.user_vital_info {
        width: auto;
        max-width: none;
        margin: 0;
        padding: .75rem .5rem;
    }

    .row.vital_info_container>.pollin_unit-tab {
        grid-column: 1 / -1;
    }

    .campaign_selector_card .text-end {
        text-align: left !important;
        margin-top: .75rem;
    }
}

/* ==========================================================================
   PAGE: calendars (admin/view_event, user/schedule) — day cells were a fixed
   58px / 25px-padded, which overflows a 7-column grid on phones.
   ========================================================================== */
@media (max-width: 767.98px) {

    .calendar-days div,
    .alternative div {
        width: auto;
        min-width: 0;
        padding: 4px 0;
        height: 40px;
    }

    .calendar-days,
    .alternative {
        gap: 2px;
        font-size: 13px;
    }

    .calendar-body {
        padding: 6px 0;
    }
}

/* PAGE: user/donate-vas — three fixed 250px tiles. */
@media (max-width: 991.98px) {
    .donate-vas-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vas-container {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .donate-vas-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .vas-container {
        height: 180px;
        margin-top: .5rem;
    }
}

/* ==========================================================================
   LANDING (views/site/home.hbs + partials/navbar2.hbs, also site/marketing)

   Desktop: the Volunteer/Donor/Voter buttons are absolutely positioned over
   a 100vh slide, pushed down by an inline margin-top of 28% (of the width).
   On phones the headline wraps to 5-6 lines, so that overlay always lands on
   the text. Below 768px the hero becomes a normal top-to-bottom flow instead:
   slide text first, then the buttons, on one dark background.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* --- navbar (header is absolute over the hero) --- */
    header {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .landingNavbar {
        align-items: center;
        padding-top: 16px;
        padding-bottom: 14px;
        gap: .75rem;
    }

    .landingNavbar .Navbar__Link-brand img {
        height: 34px;
        width: auto;
    }

    .landingNavbar__Items--right {
        flex-wrap: nowrap;
        align-items: center;
        gap: 1rem;
    }

    .landingNavbar__Link {
        padding-right: 0;
        white-space: nowrap;
    }

    .landingNavbar__Link a {
        padding-left: 0;
        font-size: 13px;
        letter-spacing: .02em;
    }

    .landingNavbar__Link a i {
        display: none;
    }

    /* --- hero: stack instead of overlay (home only) --- */
    .landingcontainer {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        background: #0f1112;
    }

    .landingcontainer .landingslides {
        order: 1;
    }

    .landingcontainer .slider1,
    .landingcontainer .slider2,
    .landingcontainer .slider3 {
        height: auto;
        /* Photo fills the screen down to the buttons (~11rem block below). */
        min-height: calc(100vh - 11rem);
        min-height: calc(100svh - 11rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 112px 1.25rem 1.5rem;
        background-position: center;
    }

    .landingcontainer .landinghome1 {
        order: 2;
        position: static;
        padding: .5rem 1.25rem 2.5rem;
        overflow: visible;
    }

    /* --- headline + copy (home slides and the marketing hero) --- */
    .slider1 h1,
    .slider2 h1,
    .slider3 h1 {
        padding-top: 0;
        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.15;
    }

    .slider1 p,
    .slider2 p,
    .slider3 p {
        font-size: 16px;
        line-height: 1.55;
        padding-top: .75rem;
        padding-bottom: 0;
    }

    /* Hard <br>s were placed for a wide desktop line. */
    .slider1 p br,
    .slider2 p br,
    .slider3 p br {
        display: none;
    }

    .slider2 h1.text-padding {
        padding-top: 0;
    }

    /* --- the three call-to-action buttons --- */
    .landingbuttons {
        margin-top: 0 !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .landingbuttons>a,
    .landingbuttons>.landingpopup {
        display: block;
        margin: 0 !important;
        min-width: 0;
    }

    /* marketing.css adds margin-left 3.2% / margin-top 5% to these on mobile,
       which knocked the grid out of line. */
    .landingbuttons .landingbutton1,
    .landingbuttons .landingbutton2 {
        display: block;
        width: 100%;
        margin: 0;
        padding: 12px 10px;
        white-space: nowrap;
    }

    /* Volunteer + Donor share a row; Voter spans the full width below. */
    .landingbuttons>a:last-of-type {
        grid-column: 1 / -1;
    }

    /* Donor pop-up was a 300px box hanging off the Donor button (right-hand
       column), so even while hidden it widened the page and made phones zoom
       out. Anchor it to the whole button group instead. */
    .landingbuttons {
        position: relative;
    }

    .landingbuttons>.landingpopup {
        position: static;
    }

    .landingpopup .landingpopuptext {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0;
        bottom: calc(100% + 10px);
    }

    .modalb,
    .regmodal-content {
        max-width: calc(100vw - 2rem);
    }
}

@media (max-width: 359.98px) {
    .landingNavbar__Items--right {
        gap: .6rem;
    }

    .landingNavbar__Link a {
        font-size: 12px;
    }
}

/* PAGE: site/404 */
@media (max-width: 767.98px) {
    .c {
        padding: 2rem 1rem;
        margin: 4rem auto;
    }

    .c ._404 {
        font-size: 120px;
    }
}

@media (max-width: 575.98px) {
    .main_ {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    :where(.main_) .card-body {
        padding: 1rem;
    }

    :where(.main_) .btn-group {
        flex-wrap: wrap;
    }
}