/* ==========================================================================
   Active menu state  -  header-style-15
   Sumandeep Hospital | Dalia Web & Soft Solution
   --------------------------------------------------------------------------
   The theme ships .active styling for header styles 9, 11 and 12 only -
   header-style-15 has none. These rules supply it, using the theme's own
   colour tokens so it stays in sync if the palette changes.

   1. Top level items (desktop)
   2. Dropdown children
   3. Mega menu children
   4. Mobile / slide-in menu
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Top level items (desktop)
   -------------------------------------------------------------------------- */
/* The underline hugs the text regardless of how tall the link box is, so it
   survives sticky-header height changes and font-size tweaks. */
.site-header.header-style-15 .site-navigation ul.navigation > li.active > a,
.site-header.header-style-15 .site-navigation ul.navigation > li > a.active {
    color: var(--pbmit-global-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    text-decoration-color: var(--pbmit-global-color);
}

/* Keep the hover colour from fighting the active colour */
.site-header.header-style-15 .site-navigation ul.navigation > li.active > a:hover {
    color: var(--pbmit-link-color-hover, #73b475);
}

/* --------------------------------------------------------------------------
   2. Dropdown children (About Us, Patients Corner, mobile Specialities)
   -------------------------------------------------------------------------- */
.main-menu .navigation > li > ul li > a.active {
    color: var(--pbmit-global-color);
    font-weight: 600;
}

.main-menu .navigation > li > ul li > a.active::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--pbmit-global-color);
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   3. Mega menu children
   Mirrors the existing :hover treatment, minus the translateX nudge so the
   current page does not look like it is permanently being hovered.
   -------------------------------------------------------------------------- */
.hospital-megamenu-column a.active {
    background: #f8fbff;
    color: #0077C8;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--pbmit-global-color);
}

/* .hospital-megamenu-column a.active img, */
.hospital-megamenu-column a.active i {
    background: #58B947;
    color: #fff;
}

.hospital-megamenu-column a.active:hover {
    transform: none;
}

/* --------------------------------------------------------------------------
   4. Mobile / slide-in menu  (panel takes over below 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {

    /* The underline reads badly in a stacked panel */
    .site-header.header-style-15 .site-navigation ul.navigation > li.active > a,
    .site-header.header-style-15 .site-navigation ul.navigation > li > a.active {
        text-decoration: none;
    }

    .site-header.header-style-15 .site-navigation ul.navigation > li.active > a,
    .site-header.header-style-15 .site-navigation ul.navigation > li > a.active,
    .main-menu .navigation > li > ul li > a.active {
        color: var(--pbmit-global-color);
        font-weight: 600;
    }

    .hospital-megamenu-column a.active {
        box-shadow: inset 3px 0 0 var(--pbmit-global-color);
    }
}