/* ═══════════════════════════════════════════════════════════════
   REMO BUILDERS — RESPONSIVE HEADER & FOOTER
   File: assets/css/responsive-header-footer.css
═══════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════
   ≤ 1199px — Large tablet: compress nav links
════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .nav-list > li > a,
    .nav-list > li > .dropdown-toggle {
        font-size: 0.83rem;
        padding: 0 10px;
    }
    .megamenu {
        width: clamp(480px, 65vw, 600px);
    }
}


/* ════════════════════════════════════════════════════
   ≤ 991px — Tablet landscape: topbar wraps
════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .topbar-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .topbar-left,
    .topbar-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 5px 12px;
    }
    .topbar-left span,
    .topbar-right a {
        font-size: 0.77rem;
    }
    .logo-image { max-height: 42px; }
}


/* ════════════════════════════════════════════════════
   ≤ 768px — Mobile — Clean white drawer (monday.com style)
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Overlay — darkens the page, stays behind navbar + drawer ── */
    .remo-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 998;   /* below navbar (999) and nav-panel (1001) */
    }
    .remo-nav-overlay.visible { display: block; }

    body.nav-open { overflow: hidden; }

    /* ── Hamburger: dark on white navbar ── */
    .nav-toggle {
        width: 42px;
        height: 42px;
        border: 1.5px solid #ddd;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.7rem;
        color: #222;
        background: transparent;
        cursor: pointer;
        transition: border-color 0.2s, color 0.2s;
    }
    .nav-toggle:hover { border-color: #cc0000; color: #cc0000; }
    .nav-toggle.open  { border-color: #cc0000; color: #cc0000; }

    /* ── Nav panel: slides down from below the navbar bar ── */
    .nav-panel {
        position: fixed !important;
        top: var(--navbar-height, 78px) !important;  /* starts just below the navbar bar */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100dvh - var(--navbar-height, 78px)) !important;
        max-height: none !important;
        background: #fff !important;
        z-index: 1001 !important;   /* above overlay (998), below nothing */
        overflow-y: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity   0.28s ease;
    }
    .navbar.open .nav-panel {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Nav list ── */
    .nav-panel .nav-list {
        display: flex !important;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 8px 0 48px;   /* no top padding needed — panel starts below navbar */
    }

    .nav-panel .nav-list > li {
        border-bottom: 1px solid #f0f0f0;
    }

    /* Top-level links */
    .nav-panel .nav-list > li > a,
    .nav-panel .nav-list > li > .dropdown-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 24px !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
        background: transparent !important;
        border: none !important;
        text-align: left;
        cursor: pointer;
        transition: color 0.18s;
        text-decoration: none;
        box-sizing: border-box;
    }
    .nav-panel .nav-list > li > a:hover,
    .nav-panel .nav-list > li > .dropdown-toggle:hover {
        color: #cc0000 !important;
    }
    .nav-panel .nav-list > li > a.nav-active {
        color: #cc0000 !important;
        font-weight: 700 !important;
    }

    /* Chevron */
    .nav-panel .dropdown-toggle ion-icon {
        color: #aaa;
        font-size: 1rem;
        flex-shrink: 0;
        transition: transform 0.25s ease, color 0.2s;
    }
    .has-dropdown.open > .dropdown-toggle ion-icon,
    .has-megamenu.open  > .dropdown-toggle ion-icon {
        transform: rotate(180deg);
        color: #cc0000;
    }

    /* ── Dropdown accordion ── */
    /* display is controlled via JS inline style — no CSS display rules here */
    .nav-panel .dropdown-menu {
        flex-direction: column;
        background: #fafafa !important;
        border: none !important;
        box-shadow: none !important;
        padding: 4px 0 10px !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        border-top: 1px solid #efefef !important;
    }

    .nav-panel .dropdown-menu a {
        display: block;
        padding: 13px 40px !important;
        font-size: 0.93rem !important;
        color: #333 !important;
        background: transparent !important;
        border: none !important;
        transition: color 0.18s, background 0.18s;
        text-decoration: none;
    }
    .nav-panel .dropdown-menu a:hover,
    .nav-panel .dropdown-menu a.dropdown-active {
        color: #cc0000 !important;
        background: rgba(204, 0, 0, 0.04) !important;
    }

    /* ── Megamenu mobile: category list only ── */
    /* display is controlled via JS inline style */
    .nav-panel .megamenu {
        flex-direction: column !important;
        background: #fafafa !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        padding: 4px 0 10px !important;
        position: static !important;
        border-top: 1px solid #efefef !important;
        grid-template-columns: none !important;
    }

    /* Hide the right panel on mobile */
    .nav-panel .megamenu-right { display: none !important; }

    .nav-panel .megamenu-left {
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .nav-panel .megamenu-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #aaa;
        padding: 10px 40px 4px;
        margin: 0;
        display: block;
    }
    .nav-panel .megamenu-divider { display: none; }

    .nav-panel .megamenu-cat-item {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 13px 40px !important;
        font-size: 0.93rem !important;
        color: #333 !important;
        background: transparent !important;
        border: none !important;
        text-decoration: none;
        transition: color 0.18s, background 0.18s;
    }
    .nav-panel .megamenu-cat-item:hover,
    .nav-panel .megamenu-cat-item.active {
        color: #cc0000 !important;
        background: rgba(204, 0, 0, 0.04) !important;
    }
    .nav-panel .megamenu-cat-item strong { color: inherit !important; font-weight: 500; }
    .nav-panel .megamenu-cat-item small  { display: none; }
    .nav-panel .megamenu-cat-icon ion-icon { font-size: 1rem; color: #aaa; }
    .nav-panel .megamenu-cat-item.active .megamenu-cat-icon ion-icon,
    .nav-panel .megamenu-cat-item:hover  .megamenu-cat-icon ion-icon { color: #cc0000; }
    .nav-panel .megamenu-cat-dot { display: none; }


    /* ── Ensure navbar bar always sits above overlay and drawer ── */
    .navbar {
        position: relative;
        z-index: 999 !important;
    }

    /* ════ FOOTER ════ */
    .footer-grid { text-align: center; justify-items: center; }
    .footer-brand {
        display: flex; flex-direction: column; align-items: center;
        padding-bottom: 0; width: 100%;
    }
    .footer-brand .brand-footer { margin-bottom: 12px; }
    .footer-brand p { margin: 0 auto; max-width: 300px; text-align: center; }
    .footer-right { width: 100%; justify-items: center; }
    .footer-col { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
    .footer-nav { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .footer-contact-list { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
    .footer-contact-item { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto; }
    .footer-admin-btn { align-self: center; }
    .footer-bottom { flex-direction: column !important; align-items: center !important; gap: 10px !important; text-align: center; }
    .footer-socials { justify-content: center; }
}


/* ════════════════════════════════════════════════════
   ≤ 480px — Large phone
════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .logo-image { max-height: 34px; }
    .footer-brand p { font-size: 0.82rem; }
    .footer-nav a, .footer-contact-item { font-size: 0.82rem; }
}


/* ════════════════════════════════════════════════════
   ≤ 360px — Small phone
════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .logo-image { max-height: 30px; }
    .nav-list a, .dropdown-toggle { font-size: 0.88rem; }
}



/* ════════════════════════════════════════════════════
   FIX: Override style.css conflicts for mobile nav
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* 1. Ensure nav-panel uses the drawer approach, not the old max-height:0 approach */
    .nav-panel {
        position: fixed !important;
        top: var(--navbar-height, 78px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        overflow-y: auto !important;
        display: block !important;      /* NOT grid — the old style.css sets display:grid */
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity   0.28s ease;
        background: #fff !important;
        z-index: 1001 !important;
    }

    .navbar.open .nav-panel {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        max-height: none !important;    /* override the 1200px cap from style.css */
    }

    /* 2. Fix dropdown-menu: JS sets display:flex, style.css sets display:grid — normalize */
    .nav-panel .dropdown-menu {
        display: none !important;       /* hidden by default; JS overrides with inline style */
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid #efefef !important;
        border-radius: 0 !important;
        background: #fafafa !important;
        padding: 4px 0 10px !important;
        max-height: none !important;
        overflow-y: visible !important;
        flex-direction: column !important;
    }

    /* 3. Fix megamenu: same display conflict */
    .nav-panel .megamenu {
        display: none !important;       /* JS controls show/hide */
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        border-top: 1px solid #efefef !important;
        border-radius: 0 !important;
        background: #fafafa !important;
        padding: 4px 0 10px !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        max-height: none !important;
    }

    /* 4. When JS sets display:flex via inline style, make sure it actually shows */
    .has-dropdown.open .dropdown-menu,
    .has-megamenu.open .megamenu {
        display: flex !important;
        flex-direction: column !important;
 
    }
}
@media (max-width: 768px) {
    /* Let JS control display via inline style — no CSS overrides */
    .nav-panel .dropdown-menu[style*="display"] {
        display: flex !important;
        flex-direction: column !important;
    }

    .nav-panel .megamenu[style*="display"] {
        display: flex !important;
        flex-direction: column !important;
    }
}