/* ─── Only active below Khairah's desktop breakpoint ─── */
@media (max-width: 991px) {
	
	 /* ─── Hamburger button color change ─── */
  .mobail-menu button.navbar-toggler.open-btn {
    background-color: #ec4899 !important;
    border-color: #ec4899 !important;
  }

  /* ─── The three bars (icon lines) color ─── */
  .mobail-menu button.navbar-toggler.open-btn .icon-bar {
    background-color: #ffffff !important;
  }


	/* Hide the theme's built-in submenu indicator arrow */
  .nav.navbar-nav .menu-item-has-children > a > .fa-angle-right,
  .nav.navbar-nav .menu-item-has-children > a > .fa-chevron-right,
  .nav.navbar-nav .menu-item-has-children > a > .arrow,
  .nav.navbar-nav .menu-item-has-children > a > span.submenu-indicator,
  .nav.navbar-nav .menu-item-has-children > a::after {
    display: none !important;
  }

  /* Make the parent <li> a flex row so link and button sit side-by-side */
  .nav.navbar-nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Parent link takes all available space except the toggle width */
  .nav.navbar-nav .menu-item-has-children > a {
    flex: 1 1 auto;
  }

  /* Sub-menu spans full width below the flex row */
  .nav.navbar-nav .menu-item-has-children > .sub-menu {
    flex: 0 0 100%;
    width: 100%;
  }

  /* ─── Toggle button ─── */
  .unfold-submenu-toggle {
    /* Reset browser button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;

    /* Size — tap-friendly */
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    /* Visual: a subtle rounded pill that blends with the menu */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s ease;
    color: inherit;        /* inherits the theme's link colour */
    opacity: 0.75;
  }

  .unfold-submenu-toggle:hover,
  .unfold-submenu-toggle:focus {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
    outline: none;
  }

  /* ─── Chevron drawn with pure CSS (no icon font dependency) ─── */
  .unfold-chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);          /* points down → closed */
    transition: transform 0.25s ease;
    margin-top: -3px;                  /* optical centre */
  }

  /* When open, chevron rotates to point up */
  .unfold-submenu-toggle.is-open .unfold-chevron {
    transform: rotate(-135deg);
    margin-top: 3px;
  }

  /* ─── Sub-menu styling ─── */
  .nav.navbar-nav .menu-item-has-children .sub-menu {
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .nav.navbar-nav .menu-item-has-children .sub-menu li a {
    font-size: 0.9em;
    opacity: 0.85;
    padding-top: 6px;
    padding-bottom: 6px;
    display: block;
  }

  .nav.navbar-nav .menu-item-has-children .sub-menu li a:hover {
    opacity: 1;
  }
}

/* ─── Hide toggle entirely on desktop ─── */
@media (min-width: 992px) {
  .unfold-submenu-toggle {
    display: none !important;
  }
}