/* Block Full Contextualization Mermaid Map */

.block-views-blockeplanete-maps-emp-block-triptych-map {
  margin-top: 20px;
}

#transaction-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
  margin-bottom: 10px;
}

#block-epb-generic-pathwaycategoryblock {
  svg {
    cursor: grab;
  }
}

#block-eplanete-master-plan-block-map {
  text-align: center;
}

#test-map {
  overflow: auto;
}

.epb-map-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.epb-map-type {
  font-style: italic;
  font-weight: bold;
}

.epb-map-image {
  width: auto;
  height: 32px;
  margin-right: 10px;
  max-width: 32px;
}



/* Block Content Management in the navbar-top */

.block-content-management-block .block {
  display: flex;
  align-items: center;
}

/* Base styles for the elements that can be toggled */
.block-node-to-group-relationship-manager-block,
.block-epb-group-relationship-pills,
.block-views-blockeplanete-master-plan-block-breadcrumb {
  opacity: 1;
  max-height: 10rem;
  /* Adjust based on your content size */
  transform: translateY(0);
  transform-origin: top center;
  overflow: visible;
  /* Combined transition for slide up/down effect */
  transition:
    opacity 0.4s ease,
    max-height 0.5s ease,
    transform 0.5s ease,
    margin 0.4s ease,
    padding 0.4s ease;
}

/* Styles when elements are hidden */
body.node-commands-hidden #section-node-commands,
body.node-commands-hidden .block-node-to-group-relationship-manager-block,
body.node-commands-hidden .block-epb-group-relationship-pills,
body.node-commands-hidden .block-views-blockeplanete-master-plan-block-breadcrumb {
  opacity: 0;
  max-height: 0;
  transform: translateY(-20px);
  /* Slide up effect */
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition:
    opacity 0.3s ease,
    max-height 0.4s ease,
    transform 0.4s ease,
    margin 0.3s ease,
    padding 0.3s ease;
}

body.node-commands-hidden main#content {
  gap: 0.5rem;
}

/* Block Group Pills(not yet moved to this module because there are no specific twig) */
.block-epb-group-relationship-pills>div {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.block-epb-group-relationship-pills span {
  /* margin: 0.5rem 0; */
  margin: 0px;
}

/* Iframe mode */
.field.field--name-field-txt-img.field--type-entity-reference-revisions.field--label-visually_hidden:has(iframe) *,
.field.field--name-field-txt-img.field--type-entity-reference-revisions.field--label-visually_hidden:has(iframe) {
  width: 100%;
  height: 100%;
}

iframe {
  min-width: 100%;
  min-height: 50vh;
}

body.iframe-mode header,
body.iframe-mode footer,
body.iframe-mode .featured-top,
body.iframe-mode .region-hero-slider,
body.iframe-mode .highlighted {
  display: none !important;
}

body.iframe-mode #main-wrapper {
  margin-top: 20px;
}

body.iframe-mode .main-content {
  margin-bottom: 0;
}

body.toolbar-tray-open.toolbar-vertical.toolbar-fixed.no-admin-menu {
  margin-inline-start: 0;
}

/* #sidebar_first:has(aside:empty) does not work, i don't know why */
/* #sidebar_first:not(:has(div)) {
  display: none;
}
 */

.block-pathway-category-block {
  margin: 0 !important;
  padding: 0 !important;
}

.block-pathway-category-block h2 i {
  padding-left: 5px;
}

.block-pathway-category-block li {
  display: flex;
}

.block-pathway-category-block li:hover {
  color: var(--primary);
}

.view-display-id-pathway_category_selector {
  margin: 0 1rem;
}

.pathway-category-collapsible-title-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.pathway-category-toggle {
  border: none;
  width: 100%;
}

.active-pathway {
  color: var(--primary);
  font-weight: bold;
}

.current-pathway {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--gray-900);
  font-size: 1rem;
  background-color: var(--bs-gray-200);
  border: 1px solid var(--bs-gray-500);
  padding: 5px;
  border-radius: 5px;
  width: 100%;
}

.current-pathway i {
  padding-left: 5px;
}