:root {
    --rich27-header-height: 0px; /* Default value */
}

body {
    padding-top: var(--rich27-header-height);
}

.rich27-header{
    z-index:4;
}

.rich27-modal,
.rich27-search,
[class*="rich-menu-item-"] {
    display: none ;
}


.rich27-glass{
    --rich27-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--rich27-backdrop-blur);
    backdrop-filter: var(--rich27-backdrop-blur);
}


.rich27-header.is-position-sticky {
   position: fixed !important;
   width:100% !important;
   transition: transform 0.4s ease; 
}

/* Remove when height issue with .is-position-fixed has been fixed in core */
/* Ensure the modal takes up the entire viewport */
.rich27-header .wp-block-navigation__responsive-container.is-menu-open{
    position: fixed !important;  /* Fix the modal to the viewport */
    top: 0 !important;  /* Start at the top */
    left: 0 !important;  /* Start from the left */
    width: 100vw !important;  /* Full width of the viewport */
    max-width: 100% !important;
    height: 100vh !important;  /* Full height of the viewport */
    z-index: 9999;  /* Ensure it appears over other elements */
    overflow: auto !important;  /* Enable scrolling */
    padding: 0 !important;  
    margin:0 !important;
}


.has-modal-open .rich27-header .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 30px;  /* Keep it near the top */
    right: 30px;  /* Align to the right */
    z-index: 10000;  /* Ensure it’s on top */
    width: 30px !important;
    height: 30px !important;
}


button.wp-block-navigation__responsive-container-close svg{
    width: 130% !important;
    height: 130% !important;
}

/*.rich27-header a:hover, .current-menu-item a */
.rich27-header a:hover,
.rich27-header .current-menu-item a {
    color: var(--wp--preset--color--header-nav-1) !important;
    text-decoration:none !important;
}

.rich27-header .current-menu-item .wp-block-navigation__submenu-container a {
    color: inherit !important; 
}

[class*="rich-menu-item-"]:not(.rich-menu [class*="rich-menu-item-"]) a:hover,
[class*="rich-menu-item-"]:not(.rich-menu [class*="rich-menu-item-"]) .current-menu-item {
    color: var(--wp--preset--color--header-nav-2) !important;
}


.rich27-header .wp-block-navigation__submenu-container{border-radius:3px; padding:10px }
.rich27-header .wp-block-navigation__submenu-container.has-background {border:none; border-radius:3px; padding:10px }
.rich27-header .wp-block-navigation__submenu-container .wp-block-navigation-item{padding:2px;}
.rich27-header .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {color: var(--wp--preset--color--header-nav-2) !important;}
.rich27-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.rich27-header .wp-block-navigation__submenu-container .current-menu-item {background:var(--wp--preset--color--header-nav-3); border-radius:3px;}


/* Keep distance between menu and submenu */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
    padding-top: 10px;
    padding-bottom:10px;
}


.rich27-header :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
    padding: 4px 8px;
}

@media screen and (max-width: 1024px) {
    
    /* change breakpoint from 600px to 1024, keep until adjustable in core */

	.rich27-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.rich27-header .wp-block-navigation__responsive-container-content {
		display: none;
        padding-bottom:80px;
	}

	.rich27-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display:none;
	}

	.rich27-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
		align-items:stretch !important;
	}

	.rich27-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		padding-top:0 !important;
	}

	.rich27-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child {
		border-bottom: none;
	}

	.rich27-header .wp-block-navigation__responsive-container.is-menu-open {
		padding-bottom:0 !important;
	}

    .rich27-header-pill .wp-block-column:nth-child(1),
    .rich27-header-pill .wp-block-column:nth-child(3),
    .rich27-header-minimal .wp-block-column:nth-child(1),
    .rich27-header-minimal .wp-block-column:nth-child(3){
        flex-basis: 30% !important;
    }
    
    .rich27-header-pill .wp-block-column:nth-child(2),
    .rich27-header-minimal .wp-block-column:nth-child(2) {
        flex: 1 1 10%; /* Flexible: grow, shrink, with a base size of 10% */
        min-width: 177px; /* Ensure the column doesn’t shrink below the logo’s width */
        min-width: 150px;
    }
}

/* .rich27-modal */

.has-modal-open .rich27-header {padding:0px !important;}
.has-modal-open .rich27-header div.alignwide {max-width:100vw !important; }


/* Ensure the modal container takes full width without causing overflow */

.has-modal-open .rich27-modal {
    display: block !important;
    width: 100%;
    max-width: 100%;
    height:100vh !important;
    padding: 0;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling */
}


/* Fix alignment for inner blocks (columns, stack blocks) */
.rich27-modal .wp-block-column,
.rich27-modal .wp-block-columns,
.rich27-modal .wp-block-stack {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Prevent flex containers from causing horizontal overflow */
.has-modal-open .rich27-modal .is-layout-flex {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
}

/* Ensure the close button fits properly without causing overflow */
.rich27-header .wp-block-navigation__responsive-close {
    width: 100%;
    display: block;
    text-align: center;
}

/* Rich Menu */

/* Rich menu Button */
/* Hide the img */
.rich-menu-button .wp-block-button__link img {
    display: none;
}

/* Set up the link with fallback */
.rich-menu-button .wp-block-button__link {
    position: relative;
    width: unset !important;
}

/* Apply the dynamic width to the pseudo-element */
.rich-menu-button .wp-block-button__link::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin-right: 0.15em;
    line-height: 1;
    transform: translateY(-0.1em);
    -webkit-mask: url("../images/icon-three-dots.svg") no-repeat center;
            mask: url("../images/icon-three-dots.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
    background-color: currentColor;
    transition: transform 0.3s ease;
}

.rich-menu-button-s .wp-block-button__link::before {
    width: 20px;
    height: 20px;
}

.rich-menu-button-l .wp-block-button__link::before {
    width: 40px;
    height: 40px;
}

.rich-menu-button-xl .wp-block-button__link::before {
    width: 60px;
    height: 60px;
}

/* Rotate when active */
.rich-menu-button .wp-block-button.current-menu-item .wp-block-button__link::before {
    transform: translateY(-0.1em) rotate(90deg);
}








/* overwriting submenu */
[class*="rich-menu-item-"] .wp-block-navigation__submenu-container {
    display: none !important;
  }
  
  /* Show submenus when the modal is active */
.wp-block-navigation__responsive-container.is-menu-open [class*="rich-menu-item-"] .wp-block-navigation__submenu-container {
    display: block !important;
}


/* Always have the overlay pseudo-element, but hidden by default */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background:hsla(0 0% 4% 0.4); /* semi-transparent overlay */
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  /* When the overlay should be active, fade it in */
  body.rich-menu-active::before {
    opacity: 1;
  }
  
  /* Ensure the header and rich-menu elements appear above the overlay */
  header,
  .rich-menu,
  .wp-block-group[class*="rich-menu-item-"],
  .wp-block-button[class*="rich-menu-item-"] {
    position: relative;
    z-index:3;
  }