/* =====================================================================
   responsive.css  — consolidated mobile pass (loaded last)
   Covers: overflow guards, nav drawer polish, floating clock FAB,
   contact/complaint, home grids, inner-page tables/forms.
   Desktop (>1024px) is intentionally left untouched.
   ===================================================================== */

/* ─── 0. Overflow guards ─────────────────────────────────────────────── */
*,
*::before,
*::after { min-width: 0; }

.container,
section,
[class$="-grid"],
[class$="-wrapper"] { max-width: 100%; }

/* keep long unbroken strings (URLs, Bangla headings) from forcing width */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th { overflow-wrap: anywhere; }

/* generic horizontal-scroll wrapper for wide blocks (tables etc.) */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@keyframes navSubIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── 1. Reveal animation — never hide content if JS/observer misses ── */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   2. NAVBAR / BURGER DRAWER  (≤1200px)
   Below 1200px the horizontal ribbon can't hold this many Bangla items,
   so everything under a real desktop goes to the burger drawer.
   Base drawer rules live in navbar-blue-fix.css; this block layers the
   backdrop, icon swap, accordion dropdowns and scroll-lock.
   ===================================================================== */

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 12, 28, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 998;
}

/* burger button: reset + two glyphs, swap on open */
.menu-toggle { line-height: 1; }
.menu-toggle .icon-close { display: none; }
.menu-toggle.active .icon-open { display: none; }
.menu-toggle.active .icon-close { display: inline-block; }

/* submenu caret toggles: hidden on desktop, shown inside the drawer query */
.dropdown-toggle,
.submenu-toggle { display: none; }

@media (max-width: 1200px) {

    .nav-backdrop.active { opacity: 1; visibility: visible; }

    body.nav-open { overflow: hidden; }

    /* drawer slides in from the right (same side as the burger) */
    .nav-menu {
        top: 72px;
        right: 0;
        left: auto;
        width: min(88vw, 340px);
        max-width: none;
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px);
        transform: translateX(105%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overscroll-behavior: contain;
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
        z-index: 999;
    }
    .nav-menu.active { left: auto; right: 0; transform: translateX(0); }

    /* kill the height:100% column-breaking bug from blue-fix */
    .nav-item {
        height: auto;
        display: block;
        width: 100%;
    }

    .nav-link {
        font-size: 1rem;
        padding: 13px 12px;
        border-radius: 10px;
    }

    /* rows that carry a submenu keep the link tappable; caret is its own button.
       The link + button sit on one line via absolute-positioning the button. */
    .nav-item,
    .dropdown-item-wrap.has-sub { position: relative; }

    .dropdown-toggle,
    .submenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.08);
        border: none;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        transition: transform 0.2s ease, background 0.2s ease;
        z-index: 1;
    }
    .submenu-toggle { top: 3px; }
    .dropdown-toggle:active,
    .submenu-toggle:active { background: rgba(255, 255, 255, 0.18); }
    .dropdown-toggle[aria-expanded="true"] { transform: rotate(180deg); }
    .submenu-toggle[aria-expanded="true"] { transform: rotate(90deg); }

    /* keep link text clear of the caret button */
    .nav-item > .nav-link,
    .dropdown-item-wrap.has-sub > .dropdown-item { padding-right: 48px; }

    /* the inline caret <i> that ships in the markup — hide, we use the button */
    .nav-link > i.fa-chevron-down { display: none; }

    /* accordion dropdowns — tap to expand, no :hover reveal on touch.
       Snap open/closed (no height animation → no layout thrash).
       Selectors are deliberately over-specific to beat the desktop sheet's
       `.header-nav-container .nav-item > .dropdown-menu { visibility:hidden }`. */
    .header-nav-container .nav-item > .dropdown-menu,
    .header-nav-container .dropdown-menu,
    .dropdown-menu {
        display: none;
        max-height: none;
        overflow: visible;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .header-nav-container .nav-item > .dropdown-menu.open,
    .header-nav-container .dropdown-menu.open,
    .dropdown-menu.open {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        animation: navSubIn 0.2s ease both;
    }
    /* neutralise the desktop hover-reveal on touch */
    .header-nav-container .nav-item:hover > .dropdown-menu:not(.open),
    .nav-item:hover .dropdown-menu:not(.open) { display: none; }

    .header-nav-container .dropdown-item-wrap.has-sub > .dropdown-submenu,
    .header-nav-container .dropdown-submenu,
    .dropdown-submenu {
        position: static;
        display: none;
        max-height: none;
        overflow: visible;
    }
    .header-nav-container .dropdown-item-wrap.has-sub > .dropdown-submenu.open,
    .header-nav-container .dropdown-submenu.open,
    .dropdown-submenu.open {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        animation: navSubIn 0.2s ease both;
    }
    .header-nav-container .dropdown-item-wrap.has-sub:hover > .dropdown-submenu:not(.open),
    .dropdown-item-wrap.has-sub:hover .dropdown-submenu:not(.open) { display: none; }

    .dropdown-item { font-size: 0.95rem; padding: 12px 14px; }

    .nav-cta { margin-top: 14px; }

    /* brand text must not collide with the burger */
    .ribbon-nav { gap: 10px; }
    .logo-area { min-width: 0; flex: 1; }
    .brand-name {
        font-size: 0.95rem;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .menu-toggle { flex-shrink: 0; }
}

@media (max-width: 400px) {
    .brand-name { font-size: 0.82rem; }
    .logo-area img { width: 38px; height: 38px; }
}

/* in-page anchor targets shouldn't hide under the sticky header */
:target,
[id] { scroll-margin-top: 90px; }

/* =====================================================================
   3. FLOATING CLOCK / "PRAYER TIME" WIDGET
   Desktop: unchanged pill. ≤768: collapsible circular FAB.
   ===================================================================== */

.clock-fab-toggle { display: none; }

@media (max-width: 768px) {

    /* collapsed state — a 52px circle */
    .floating-clock-plugin {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: 16px;
        padding: 0;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
        overflow: visible;
    }
    .floating-clock-plugin .clock-body { display: none; }
    .floating-clock-plugin .close-clock-btn { display: none; }

    .clock-fab-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: none;
        border: none;
        color: var(--primary);
        font-size: 1.35rem;
        cursor: pointer;
    }

    /* expanded state — card opens above the FAB */
    .floating-clock-plugin.expanded {
        width: min(78vw, 300px);
        height: auto;
        border-radius: var(--radius-lg);
        padding: 16px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .floating-clock-plugin.expanded .clock-fab-toggle { display: none; }
    .floating-clock-plugin.expanded .clock-body { display: block; }
    .floating-clock-plugin.expanded .close-clock-btn {
        display: flex;
        position: absolute;
        top: -10px;
        right: -10px;
    }

    .floating-clock-plugin.expanded #timeLine {
        font-size: 1rem;
        margin-bottom: 4px;
    }
    .floating-clock-plugin.expanded #dateLine {
        font-size: 0.72rem;
        line-height: 1.5;
    }

    /* WhatsApp FAB sits above the clock circle, no overlap */
    #whatsappFloat {
        bottom: calc(16px + 52px + 12px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }
    #whatsappFloat i { font-size: 24px !important; }
}

/* =====================================================================
   4. CONTACT + COMPLAINT
   ===================================================================== */
@media (max-width: 768px) {
    .cf-grid { grid-template-columns: 1fr !important; gap: 28px; }
    .contact-list { grid-template-columns: 1fr !important; }
    .follow-pane h4,
    .contact-card-item strong,
    .contact-card-item p { overflow-wrap: anywhere; }
    .social-links { flex-wrap: wrap; }

    .cs-section { padding: 36px 0; }
    .cs-branches { gap: 10px; }
    /* 16px inputs — stop iOS zoom-on-focus */
    .cs-field input,
    .cs-field select,
    .cs-field textarea { font-size: 16px; }
}

/* =====================================================================
   5. HOME GRIDS / SECTIONS
   ===================================================================== */
@media (max-width: 768px) {
    .section-header { margin-bottom: 2.25rem; }

    .institutes-grid,
    .courses-grid,
    .news-grid,
    .success-grid,
    .category-grid { grid-template-columns: 1fr !important; }

    .counter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .counter-item { flex: initial; max-width: none; padding: var(--space-md); }
    .counter-number { font-size: 1.75rem; }

    .news-notice-wrapper { grid-template-columns: 1fr; gap: 28px; }
    .notice-details h5 {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* boxed sections — tighten inner padding, keep them centred */
    #programs, #team, #gallery {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 560px) {
    .counter-grid { grid-template-columns: 1fr; }
    .partner-logo { width: 130px; padding: 0 16px; }
    .footer-links.two-col { column-count: 1; }
    .gallery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .hero-content h1,
    .section-title { font-size: 1.4rem; }
    .container { width: 94%; }
}

/* =====================================================================
   6. INNER PAGES
   ===================================================================== */

/* dynamically-injected heirs table + legacy calendar table +
   any table dropped into rich admin-authored content */
#heirsTable,
#calendar,
.article-body table,
.modal-ab-rich table,
.news-body table,
.detail-page .content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* stop iOS input zoom site-wide on real form controls */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea { font-size: 16px; }

    .breadcrumb { flex-wrap: wrap; }
    .breadcrumb-item.text-truncate { max-width: 60vw !important; }

    /* detail pages: sidebar drops under the article */
    .detail-page .row > [class*="col-lg-"],
    .detail-page .row > [class*="col-md-"] { width: 100%; }
}

@media (max-width: 560px) {
    #calendar th,
    #calendar td { padding: 4px !important; font-size: 12px; }
}