/* ============================================================================
 * iCARE SGE Mega Menu — built to the Figma "Icare Medical & Wellness Revamps"
 * spec. Scoped to .asla-mm. Desktop mega panel (>=992px) + mobile drawer
 * accordion (<992px, the #side-menu metisMenu).
 *
 * Design tokens (from Figma):
 *   Primary   #58A3A6  (item hover/active text)
 *   Secondary #F4A49A  (book CTA; active side-tab = rgba(244,164,154,.5))
 *   Nav bar   #63B4B7
 *   Panel gap #E7E7E7   Card label  Proxima Nova 20/20
 *   Top nav   Gotham Book 16/24 white (inactive opacity .8)
 *   Heading   Mulish SemiBold 18/26, +0.72px, uppercase
 *   Items     Gotham Book 18/26  #838383 -> hover #58A3A6
 * ==========================================================================*/

/* Panel hidden until hover/focus (default-active states are server-rendered). */
.asla-mm .asla-mega__panel {
  display: none;
}

/* Hide the desktop mega-nav by default so its items don't leak on mobile;
 * re-enabled inside the >=992px block below. */
.asla-mm .asla-mega-nav {
  display: none;
}

/* Responsive wrappers from the auto-replace short-circuit. */
.asla-mm .sge-mm-desktop {
  display: none;
}

.asla-mm .sge-mm-mobile {
  display: block;
}

/* ============================================================================
 * DESKTOP (>=992px)
 * ==========================================================================*/
@media (min-width: 992px) {

  .asla-mm .sge-mm-desktop {
    display: block;
  }

  .asla-mm .sge-mm-mobile {
    display: none;
  }

  /* Hamburger only belongs to the mobile drawer. */
  .asla-mm .navbar-expand-toggle {
    display: none;
  }

  /* Vertical anchor for the absolute, full-bleed panel. */
  .asla-mm .primary-nav {
    position: relative;
  }

  /* Let our flex nav lay out inside .SiteMenu, centered in its band so it
   * doesn't collide with the logo (matches the Figma header spacing). */
  .asla-mm .primary-nav .SiteMenu {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- Top-level nav row ---- */
  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav {
    display: flex;
    align-items: center;
    gap: 35px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Gotham", Arial, sans-serif;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item {
    display: inline-flex;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 23px 0;
    font-family: "Gotham", Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s ease;
  }

  /* The mega item (Services) reads at full strength like the design. */
  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega.has-mega>a {
    opacity: 1;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item>a:hover,
  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item>a:focus {
    opacity: 1;
    color: #fff;
  }

  /* Caret (7.5 x 4.5 in the design) — small white chevron. */
  .asla-mm .asla-mega__caret {
    width: 8px;
    height: 5px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23000' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23000' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
  }

  /* ---- Simple dropdown (top item w/ children but no has-mega) ---- */
  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item--has-dropdown {
    position: relative;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item--has-dropdown>ul.asla-mega-nav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item--has-dropdown:hover>ul.asla-mega-nav__dropdown,
  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav>li.asla-mega-nav__item--has-dropdown:focus-within>ul.asla-mega-nav__dropdown {
    display: block;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav__dropdown>li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav__dropdown>li>a {
    display: block;
    padding: 10px 24px;
    font-family: "Gotham", Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #404040;
    text-decoration: none;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega-nav__dropdown>li>a:hover {
    background: #f7f7f7;
    color: #58A3A6;
  }

  /* ---- Mega panel (full-bleed below the nav) ---- */
  .asla-mm .asla-mega:hover .asla-mega__panel,
  .asla-mm .asla-mega:focus-within .asla-mega__panel,
  .asla-mm .asla-mega__panel.is-open {
    display: block;
  }

  .asla-mm .asla-mega__panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100vw;
    background: #e7e7e7;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    text-align: left;
    /* the theme centers .SiteMenu text; panel content is left-aligned */
  }

  .asla-mm .asla-mega__inner,
  .asla-mm .asla-mega__bodies {
    width: 100%;
    margin: 0;
  }

  /* 3-level: single always-active body = the [side-rail | content] flex row,
   * separated by the 3px #e7e7e7 gutter from the design. */
  .asla-mm .asla-mega__body {
    display: none;
  }

  .asla-mm .asla-mega__body.is-active {
    display: flex;
    align-items: stretch;
    gap: 3px;
    background: #e7e7e7;
  }

  /* ---- Side-tab rail (375px, white) ---- */
  .asla-mm .primary-nav .SiteMenu ul.asla-mega__sidetabs {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 0 0 375px;
    width: 375px;
    margin: 0;
    padding: 40px 40px 40px 50px;
    list-style: none;
    background: #fff;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega__sidetabs>li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega__sidetabs>li>a.asla-mega__sidetab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    font-family: "Gotham", Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    background: #fff;
    text-decoration: none;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega__sidetabs>li>a.asla-mega__sidetab.is-active {
    background: rgba(244, 164, 154, 0.5);
  }

  /* Label-only side-tabs (no children). */
  .asla-mm .primary-nav .SiteMenu ul.asla-mega__sidetabs>li>a.asla-mega__sidetab--label {
    pointer-events: none;
    color: #404040;
  }

  /* Chevron on the active side-tab (matches the open tab in the design). */
  .asla-mm .asla-mega__arrow {
    display: none;
  }

  .asla-mm .asla-mega__sidetab.is-active .asla-mega__arrow {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: currentColor;
    -webkit-mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  }

  /* ---- Content area (white) ---- */
  .asla-mm .asla-mega__content {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    padding: 40px 60px 60px 40px;
  }

  .asla-mm .asla-mega__group {
    display: none;
  }

  .asla-mm .asla-mega__group.is-active {
    display: block;
  }

  .asla-mm .asla-mega__heading {
    margin: 0 0 20px;
    padding: 0 0 12px;
    font-family: "Mulish", Arial, sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    text-align: left;
    color: #000;
    border-bottom: 1px solid #e0e0e0;
  }

  /* Text list — two equal columns, row-major (matches the Figma flex-wrap). */
  .asla-mm .primary-nav .SiteMenu ul.asla-mega__items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega__items>li {
    flex: 0 0 50%;
    max-width: 50%;
    margin: 0;
    padding: 0;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega__items>li>a {
    display: block;
    padding: 8px 16px;
    font-family: "Gotham", Arial, sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #838383;
    text-align: left;
    text-decoration: none;
  }

  .asla-mm .primary-nav .SiteMenu ul.asla-mega__items>li>a:hover,
  .asla-mm .primary-nav .SiteMenu ul.asla-mega__items>li>a:focus {
    color: #58A3A6;
  }

  /* ---- Condition image cards (prefixed to outrank the theme's .SiteMenu a rules) ---- */
  .asla-mm .primary-nav .SiteMenu .asla-mega__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }

  .asla-mm .primary-nav .SiteMenu a.asla-mega__card {
    position: relative;
    display: block;
    flex: 0 0 240px;
    width: 240px;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    background: #63B4B7;
    /* fallback when no image is set yet */
    text-decoration: none;
  }

  .asla-mm .primary-nav .SiteMenu .asla-mega__card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .asla-mm .primary-nav .SiteMenu .asla-mega__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .asla-mm .asla-mega__card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  }

  .asla-mm .asla-mega__card-label {
    font-family: "Proxima Nova", Arial, sans-serif;
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
  }

  .asla-mm .asla-mega__card-arrow {
    width: 20px;
    height: 16px;
    flex: 0 0 20px;
    background: #fff;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M4 12h15m-6-6l6 6-6 6'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M4 12h15m-6-6l6 6-6 6'/%3E%3C/svg%3E");
  }
}

/* ============================================================================
 * MOBILE PANEL (<992px) — #side-menu metisMenu accordion below the header.
 * Figma "M Menu 1" (Treatments expanded) + "M Menu 2" (Conditions expanded).
 * ==========================================================================*/
@media (max-width: 991.98px) {

  /* Figma: accordion opens directly below the sticky header, full width. */
  .asla-mm header.WFwrap {
    z-index: 100001;
  }

  .asla-mm .app-container .content-container .side-menu {
    position: fixed;
    top: var(--sge-mm-mobile-header-h, 89px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: calc(100vh - var(--sge-mm-mobile-header-h, 89px));
    max-height: calc(100vh - var(--sge-mm-mobile-header-h, 89px));
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;
    z-index: 100000;
    transform: none;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.25s ease;
  }

  .asla-mm .app-container.expanded .content-container .side-menu {
    right: 0;
    left: 0;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }

  /* Solid white behind the panel — no see-through hero bleed. */
  .asla-mm.body-toogle-menu::before {
    background: #fff;
  }

  .asla-mm .app-container .content-container .side-menu .side-menu-container,
  .asla-mm .app-container .content-container .side-menu nav.navbar-default {
    min-height: calc(100vh - var(--sge-mm-mobile-header-h, 89px));
    background-color: #fff;
  }

  /* Figma has no separate "MENU" drawer title row. */
  .asla-mm .app-container .content-container .side-menu .navbar-default .navbar-header {
    display: none;
  }

  .asla-mm .app-container .content-container .side-menu .navbar-default {
    background-color: #fff;
  }

  .asla-mm .app-container .content-container .side-menu .navbar-default .active {
    background: transparent;
  }

  /* Drawer panel chrome lives in screen.css; here we restyle the menu list. */
  .asla-mm #side-menu.metismenu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #eaeaea;
    /* 1px row gutters (Figma gap-px) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: "Gotham", Arial, sans-serif;
  }

  .asla-mm #side-menu.metismenu,
  .asla-mm #side-menu.metismenu ul {
    list-style: none;
  }

  /* All rows: reset the theme's legacy teal metismenu defaults. */
  .asla-mm #side-menu.metismenu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: transparent;
  }

  .asla-mm .app-container .content-container .side-menu .navbar-default ul.metismenu li a,
  .asla-mm #side-menu.metismenu li>a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    margin: 0;
    background: #fff;
    color: rgba(0, 0, 0, 0.8);
    opacity: 1;
    font-family: "Gotham", Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-transform: none;
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid #eaeaea;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
  }

  /* Top-level parents with children (Services) — full-strength label per Figma. */
  .asla-mm #side-menu.metismenu>li.menu-item-has-children>a {
    color: #000;
  }

  .asla-mm .app-container .content-container .side-menu .navbar-default ul.metismenu li a:hover,
  .asla-mm #side-menu.metismenu li>a:hover {
    background: #fff;
    color: rgba(0, 0, 0, 0.8);
    opacity: 1;
  }

  .asla-mm #side-menu.metismenu>li.menu-item-has-children>a:hover {
    color: #000;
  }

  /* Level 2 (Treatments / Conditions) — 35px left inset. */
  .asla-mm .app-container .content-container .side-menu .navbar-default ul.metismenu li ul li a,
  .asla-mm #side-menu.metismenu li>ul.sub-menu>li>a {
    padding: 12px 20px 12px 35px;
    background: #fff;
    color: rgba(0, 0, 0, 0.8);
    opacity: 1;
    border-bottom: 1px solid #eaeaea;
  }

  .asla-mm #side-menu.metismenu li>ul.sub-menu>li.menu-item-has-children>a:hover {
    color: rgba(0, 0, 0, 0.8);
  }

  /* Level 3 (treatment / condition leaves) — grey field with 1px dividers. */
  .asla-mm #side-menu.metismenu li>ul.sub-menu>li>ul.sub-menu {
    margin: 0;
    padding: 0;
    background: #d0d0d0;
  }

  .asla-mm #side-menu.metismenu li>ul.sub-menu>li>ul.sub-menu>li>a {
    padding: 12px 20px 12px 50px;
    background: #f0f0f0;
    color: #000;
    opacity: 1;
    border-bottom: 1px solid #d0d0d0;
  }

  /* Active / current leaf -> secondary pink (#F9D1CD). */
  .asla-mm #side-menu.metismenu li>ul.sub-menu>li>ul.sub-menu>li.current-menu-item>a,
  .asla-mm #side-menu.metismenu li>ul.sub-menu>li>ul.sub-menu>li>a:active,
  .asla-mm #side-menu.metismenu li>ul.sub-menu>li>ul.sub-menu>li>a.is-active {
    background: #f9d1cd;
    color: #000;
    opacity: 1;
  }

  /* Chevron on parent rows — 24×24 in Figma; down, flips up when expanded. */
  .asla-mm #side-menu.metismenu li.menu-item-has-children>a {
    justify-content: space-between;
  }

  .asla-mm #side-menu.metismenu li.menu-item-has-children>a::after,
  .asla-mm #side-menu.metismenu a.has-arrow::after {
    content: "";
    position: static;
    top: auto;
    right: auto;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin: 0;
    padding: 0;
    background: #9a9a9a;
    font-size: 0;
    line-height: 0;
    transform: none;
    transition: transform 0.2s ease;
    -webkit-mask: no-repeat center / 14px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath fill='%23000' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
    mask: no-repeat center / 14px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath fill='%23000' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
    border: 0;
  }

  .asla-mm #side-menu.metismenu li.menu-item-has-children.active>a::after,
  .asla-mm #side-menu.metismenu li.menu-item-has-children>a[aria-expanded="true"]::after,
  .asla-mm #side-menu.metismenu .active>.has-arrow::after {
    content: "";
    transform: rotate(180deg);
  }

  .asla-mm #side-menu.metismenu a.has-arrow:hover::after {
    color: transparent;
    background: #9a9a9a;
  }

  /* metisMenu collapse mechanics (keep the theme's behavior intact). */
  .asla-mm #side-menu.metismenu .sub-menu {
    margin: 0;
    padding: 0;
  }

  .asla-mm #side-menu.metismenu .collapse:not(.in) {
    display: none;
  }

  .asla-mm #side-menu.metismenu .collapse.in {
    display: block;
  }

  .asla-mm #side-menu.metismenu .collapsing {
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
  }
}