/* =========================================================
   BS5 Mega Menu — Frontend styles
   ========================================================= */

/* ---- Full-width dropdown panel ---- */

/*
  .navbar is position:relative by default in Bootstrap 5.
  .dropdown-mega.position-static removes the li's local stacking context
  so the absolute panel spans the full navbar width.
*/
.navbar .dropdown-mega.position-static > .megamenu-panel {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    z-index: 1030;
    border-top: 3px solid var(--bs-primary, #0d6efd);
    border-radius: 0 0 .375rem .375rem;
    max-height: 80vh;
    overflow-y: auto;
}

/* Hidden by default; show on .show */
.navbar .dropdown-mega > .megamenu-panel {
    display: none;
}

.navbar .dropdown-mega.show > .megamenu-panel,
.navbar .dropdown-mega > .megamenu-panel.show {
    display: block;
}

/* ---- Column layout ---- */
.megamenu-col {
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}

.megamenu-col:last-child {
    border-right: none;
}

/* ---- Block: links ---- */
.megamenu-block-heading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .5rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.megamenu-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .25rem;
    font-size: .875rem;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    border-radius: .25rem;
    transition: background-color .15s, color .15s;
}

.megamenu-link:hover,
.megamenu-link:focus {
    color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-light, #f8f9fa);
}

.megamenu-link-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ---- Block: tiles ---- */
.megamenu-tile {
    text-align: center;
}

.megamenu-tile-link {
    position:relative;
    display: block;
    border-radius: .375rem;
    transition: background-color .15s, color .15s;
    overflow:hidden;
    border-radius: .375rem;
}


.megamenu-tile-img-wrap {
    width: 100%;
    height:160px;
    z-index:1;
    border-radius: .375rem;
    
}

.megamenu-tile-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}
.megamenu-tile-label-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top:0;
    padding: .25rem;
    display:flex;
    justify-content: center;
    align-items: center;
    background:rgba(var(--bs-primary-rgb), .4);
    z-index:2;
}
.megamenu-tile-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform:uppercase;
    color:var(--bs-light, #f8f9fa);
}

.megamenu-tile-subitems {
    padding: 0 .25rem;
}

.megamenu-tile-sublink {
    display: block;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    padding: .1rem 0;
    transition: color .15s;
}

.megamenu-tile-sublink:hover,
.megamenu-tile-sublink:focus {
    color: var(--bs-primary, #0d6efd);
}

/* ---- Block: banner ---- */
.megamenu-banner {
    border-radius: .375rem;
    overflow: hidden;
}

.megamenu-banner-img {
    display: block;
    object-fit: cover;
    max-height: 200px;
    border-radius: .375rem;
}

.megamenu-banner-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
    color: #fff;
    border-radius: 0 0 .375rem .375rem;
}

.megamenu-banner-body {
    background: var(--bs-light, #f8f9fa);
    border-radius: .375rem;
}

.megamenu-banner-title {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.megamenu-banner-subtitle {
    font-size: .8125rem;
    opacity: .85;
    margin-top: .125rem;
}

/* ---- Side menu layout ---- */
.megamenu-sidemenu-nav {
    width: 220px;
    flex-shrink: 0;
    background: var(--bs-light, #f8f9fa);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    padding: .5rem 0;
}

.megamenu-tab-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .6rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: .875rem;
    color: var(--bs-body-color, #212529);
    cursor: pointer;
    gap: .5rem;
    border-radius: 0;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

.megamenu-tab-btn:hover,
.megamenu-tab-btn:focus {
    background-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-primary, #0d6efd);
}

.megamenu-tab-btn.active {
    background-color: #fff;
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
    border-right: 2px solid var(--bs-primary, #0d6efd);
}

.megamenu-tab-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.megamenu-tab-arrow {
    margin-left: auto;
    font-size: 1rem;
    opacity: .5;
}

.megamenu-sidemenu-content {
    min-height: 280px;
}

/* =========================================================
   Mobile offcanvas
   ========================================================= */

#mgmOffcanvas {
    max-width: 320px;
    width: 85vw;
}

/* The offcanvas body needs overflow:hidden to clip sliding sub-panels */
#mgmOffcanvas .offcanvas-body {
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* ---- Top-level items ---- */
.mgm-mobile-item {
    position: static;
}

.mgm-mobile-link,
.mgm-mobile-toggle,
.mgm-mobile-tab-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .75rem 1rem;
    font-size: .9375rem;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    text-align: left;
    cursor: pointer;
    gap: .5rem;
    transition: background-color .15s;
}

.mgm-mobile-link:hover,
.mgm-mobile-link:focus,
.mgm-mobile-toggle:hover,
.mgm-mobile-toggle:focus,
.mgm-mobile-tab-btn:hover,
.mgm-mobile-tab-btn:focus {
    background-color: var(--bs-light, #f8f9fa);
    color: var(--bs-primary, #0d6efd);
}

.mgm-mobile-chevron {
    margin-left: auto;
    font-size: 1.1rem;
    opacity: .5;
    flex-shrink: 0;
}

/* ---- Sub-panel slide ---- */
.mgm-mobile-subpanel {
    position: absolute;
    inset: 0;
    background: var(--bs-body-bg, #fff);
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    z-index: 1;
}

.mgm-mobile-subpanel.active {
    transform: translateX(0);
}

/* Third-level sub-panels (sidemenu tabs) */
.mgm-mobile-sidemenu-item .mgm-mobile-subpanel {
    z-index: 2;
}

/* Sub-panel header (back button + title) */
.mgm-mobile-subpanel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--bs-light, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    position: sticky;
    top: 0;
    z-index: 1;
}

.mgm-mobile-back {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .5rem;
    font-size: .8125rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-primary, #0d6efd);
    border-radius: .25rem;
    transition: background-color .15s;
    flex-shrink: 0;
}

.mgm-mobile-back:hover,
.mgm-mobile-back:focus {
    background-color: var(--bs-border-color, #dee2e6);
}

.mgm-mobile-subpanel-title {
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Mobile link icons ---- */
.mgm-mobile-link-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.mgm-mobile-tile-img {
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: .2rem;
    flex-shrink: 0;
}

/* Sub-link indent */
.mgm-mobile-sublink {
    padding-left: 2.25rem;
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Group heading */
.mgm-mobile-group-heading {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color, #6c757d);
    padding: .75rem 1rem .25rem;
    margin: 0;
}

/* =========================================================
   Prevent Bootstrap's default collapse on mobile when
   megamenu offcanvas is active (hide the collapse nav).
   Only applies below the lg breakpoint.
   ========================================================= */
@media (max-width: 991.98px) {
    /* Show offcanvas trigger instead of collapse */
    #navbarNavDropdown {
        display: none !important;
    }
}