/* 
############################################################
#  FORMATTING FOR THE ddk.Header IN index.py
############################################################
*/

/* General header formatting */
.sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header{
  background-color: var(--sia-heading-color);
  color: var(--sia-table-header-text);
  font-family: var(--sia-font-family);
  font-size: var(--app-title-font-size);
  margin: var(--app-title-margin);
  height: var(--app-header-height)!important;
  display: flex;
  align-items: stretch;
  justify-content: flex-start !important;
  column-gap: 12px;
}

/* Keep title and pages menu adjacent on the left side of the header */
.sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .app-header-title{
  flex: 0 0 auto;
  margin-right: 0;
  white-space: nowrap;
}

.sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .pages-menu{
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* Page navigation menu button formatting */
.sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .pages-menu button.page-nav-button{
  font-size: var(--app-navigation-menu-button-font-size);
  font-family: var(--sia-font-family);
  background-color: var(--sia-heading-color);
  color: var(--sia-table-header-text);
  border:none;
  height: var(--app-header-height) !important;
  padding-left:var(--sia-space-3);
  padding-right:var(--sia-space-3);
}

.sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .pages-menu button.page-nav-button.selected{
  border-bottom:var(--app-navigation-menu-button-font-selected-border)
  
}

.sia-dash-app .assessment-collapsible{
  height: 100%;
  display: flex;
  align-items: stretch;
}

.sia-dash-app .assessment-collapsible #menu-items-container{
  height: 100%;
}

.sia-dash-app .assessment-collapsible.selected{
  border-bottom: var(--app-navigation-menu-button-font-selected-border) !important;
}


.sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .pages-menu button.page-nav-button:hover{
  color:var(--app-navigation-menu-button-font-hover-color);
}



.sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .pages-menu a:hover{
  color:var(--app-navigation-menu-button-font-hover-color);
}

.sia-dash-app div.caret.selected{
  color:var(--app-navigation-menu-button-font-hover-color) !important;
}

/* Keep Assessment caret color in sync with Assessment text (avoid default blue). */
.sia-dash-app .assessment-collapsible #menu-items-container > li.menu--sub > li > a > div .caret,
.sia-dash-app .assessment-collapsible #menu-items-container > li.menu--sub > li > a > div .caret *{
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  color: #ee3124!important;
}

.sia-dash-app #assessment-collapsible-menu:hover > li > li > a > div{
  display:none!important;
}



.sia-dash-app #menu-items-container > li.menu--sub > li > a > div{
     color:white !important;
}


.sia-dash-app #menu-items-container:hover > li.menu--sub > li > a > div{
     color:white !important;
}

/* On narrow screens keep menu visible and reclaim space by hiding the title */
@media (max-width: 800px){
  .sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .app-header-title{
    display: none !important;
  }

  .sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .pages-menu{
    display: flex !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 800px){
  .sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .app-header-title{
    /* display: none !important; */
    font-size: 20px !important;
  }

  .sia-dash-app.ai-readiness-assessment-tool header.layout-header.app-header .pages-menu{
    display: flex !important;
    margin-left: 0 !important;
  }
}


@media (max-width: 450px){
  .sia-dash-app .assessment-collapsible{
    font-size:15px!important;
    padding:1px 5px !important;
  }
  .sia-dash-app .page-nav-button{
    font-size:15px!important;
    padding:1px 5px !important;
  }
  .sia-dash-app .app-header{
    padding-right:2px !important;
  }

}

@media (min-width: 450px){
  .sia-dash-app .assessment-collapsible{
    font-size:21px!important;
    padding:1px 5px !important;
  }

}