.wp-block-navigation__responsive-container-close {
right: var(--wp--preset--spacing--xs);
top: var(--wp--preset--spacing--default);
}
.wp-block-site-logo.header__logo {
align-self: center;
} .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
bottom: -100vh;
left: 0;
overflow-y: scroll;
padding: 0;
position: absolute;
right: 0;
top: calc(3.5rem + var(--wp-admin--admin-bar--position-offset, 0px)); & .wp-block-navigation__container {
padding: var(--wp--preset--spacing--medium) 0;
position: static;
width: 100%;
& .has-child .wp-block-navigation__submenu-container {
display: none;
& > .wp-block-navigation-item > .wp-block-navigation-item__content {
padding: var(--wp--preset--spacing--xs);
}
} & .wp-block-navigation-item {
align-items: center;
flex-flow: row wrap;
gap: 0;
justify-content: space-between;
line-height: 1;
position: relative;
top: 0;
width: 100%; & .wp-block-navigation-submenu__toggle {
font-size: var(--wp--preset--font-size--body-default);
line-height: var(--wp--preset--font-size--body-default);
padding: var(--wp--preset--spacing--xs);
width: calc( 100% - 1rem - var(--wp--preset--spacing--mini) - var(--wp--preset--spacing--xs) );
&[aria-expanded="true"] + .wp-block-navigation__submenu-icon + .wp-block-navigation__submenu-container {
display: flex;
padding: var(--wp--preset--spacing--xs) 0;
}
} & .wp-block-navigation__submenu-icon {
display: block;
height: var(--wp--preset--font-size--body-default);
left: calc( -1 * var(--wp--preset--spacing--xs) );
margin-left: 0; padding: var(--wp--preset--spacing--mini) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--mini) var(--wp--preset--spacing--mini);
position: relative;
top: -.25rem;
width: var(--wp--preset--font-size--body-default);
& > svg {
margin-top: 0; transform: rotate(-90deg);
}
} &:has(>[aria-expanded="true"]) {
background-color: var(--wp--preset--color--light-gray) !important;
position: absolute !important;
top: 0 !important;
z-index: 2;
& > .wp-block-navigation-submenu__toggle {
font-weight: 700;
order: 2;
padding-left: var(--wp--preset--spacing--ml) !important;
width: 100%;
&::after {
content: "Back";
display: inline;
}
& > .wp-block-navigation-item__label {
display: none;
}
& + .wp-block-navigation__submenu-icon {
background-color: var(--wp--preset--color--light-gray);
left: 0;
order: 1;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--mini) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs);
position: absolute;
top: 0;
& svg {
transform: rotate(90deg);
stroke: var(--wp--preset--color--dark-orange);
}
}
}
& > .wp-block-navigation-submenu {
background-color: white !important;
bottom: calc( -100vh + 3.5rem + var(--wp--preset--spacing--xs) + 40px + var(--wp--preset--spacing--xs) );
left: 0;
order: 3;
position: absolute;
right: 0;
top: 37px;
}
& .wp-block-navigation-item:has(>[aria-expanded="true"]) {
top: calc( 1px - var(--wp--preset--font-size--body-default) - var(--wp--preset--spacing--medium) ) !important;
}
} & .wp-block-navigation__submenu-container {
flex-basis: 100%;
padding-left: 0;
padding-right: 0;
}
}
}
}
.wp-block-navigation__container .wp-block-buttons {
background-color: var(--wp--preset--color--white);
gap: var(--wp--preset--spacing--xs);
margin-top: auto;
padding: 0 var(--wp--preset--spacing--xs);
}
.wp-block-navigation__container .is-style-secondary-icon-button.wp-block-button .wp-block-button__link {
background-color: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--blue);
border-radius: .75rem;
color: var(--wp--preset--color--blue);
font-size: var(--wp--preset--font-size--body-s);
justify-content: center;
line-height: 1.25rem;
padding: var(--wp--preset--spacing--xxs);
&:active {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
& svg path {
fill: var(--wp--preset--color--white);
}
}
&:focus {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
& svg path {
fill: var(--wp--preset--color--white);
}
}
&:hover {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
& svg path {
fill: var(--wp--preset--color--white);
}
}
}
.wp-block-navigation__container .is-style-secondary-icon-button.wp-block-button .wp-block-button__link svg {
box-sizing: border-box;
padding: 2px;
}
.wp-block-navigation__container .is-style-secondary-icon-button.wp-block-button .wp-block-button__link svg path {
fill: var(--wp--preset--color--blue);
} #search__toggle-wrapper,
#search__wrapper {
display: none;
} .wp-block-navigation__responsive-container-content {
row-gap: 0;
& .wp-block-search {
background-color: var(--wp--preset--color--light-gray);
padding: var(--wp--preset--spacing--default) var(--wp--preset--spacing--xs);
width: 100%;
& .wp-block-search__inside-wrapper {
background-color: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--dark-gray);
border-radius: .5rem;
padding: 0;
padding-left: var(--wp--preset--spacing--xs);
& .wp-block-search__input {
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--montserrat);
font-size: var(--wp--preset--font-size--body-default);
font-weight: 400;
line-height: 1;
padding: var(--wp--preset--spacing--xs) 0;
&::placeholder {
color: var(--wp--preset--color--dark-gray);
font-family: var(--wp--preset--font-family--montserrat);
font-weight: 400;
}
}
& .wp-block-search__button {
background-color: transparent;
border: none;
margin: 0;
padding: var(--wp--preset--spacing--xs);
& .search-icon {
fill: var(--wp--preset--color--dark-orange);
}
}
}
}
}
@media all and ( min-width: 37.5rem ) { .header__navigation,
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
.wp-block-navigation__responsive-dialog {
position: static;
} .wp-block-site-logo.header__logo {
width: 8.125rem;
} .header__navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
flex-flow: row nowrap;
gap: 0;
padding: 0;
position: static;
& .wp-block-navigation-item {
position: static;
& .wp-block-navigation-submenu__toggle {
padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--default);
padding-left: 10px;
padding-right: 22px;
& + .wp-block-navigation__submenu-icon {
height: var(--wp--preset--spacing--xs);
left: -19px;
margin-left: 0;
position: relative;
top: -0.125rem;
width: var(--wp--preset--spacing--xs);
}
&[aria-expanded="true"] {
background-color: var(--wp--preset--color--gray);
& + .wp-block-navigation__submenu-icon > svg {
stroke: var(--wp--preset--color--dark-orange);
}
& ~ .wp-block-navigation__submenu-container {
align-items: start;
border-top: .25rem solid var(--wp--preset--color--gray);
box-shadow: var(--wp--preset--shadow--medium);
flex-flow: row wrap;
gap: var(--wp--preset--spacing--default);
justify-content: start;
left: 0;
overflow-y: scroll;
padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--ml);
right: 0;
& .wp-block-navigation-item {
width: 100%;
}
}
}
}
}
} .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
& > .wp-block-navigation-item {
align-items: start;
display: flex;
flex-flow: row wrap;
gap: var(--wp--preset--spacing--xxs);
justify-content: stretch;
& > .wp-block-navigation__submenu-container {
display: flex;
flex-flow: column nowrap;
gap: var(--wp--preset--spacing--xxs);
height: 0;
opacity: 1;
position: static;
visibility: visible;
width: 100%;
&::before {
display: none;
}
& .wp-block-navigation-link {
width: 100%;
& .wp-block-navigation-item__content {
padding: 0;
&:active {
color: var(--wp--preset--color--dark-orange);
}
&:focus {
color: var(--wp--preset--color--dark-orange);
}
&:hover {
color: var(--wp--preset--color--dark-orange);
}
}
}
}
& .wp-block-navigation-submenu__toggle {
cursor: default;
font-weight: 700;
line-height: var(--wp--preset--spacing--medium);
padding: 0;
width: calc( 100% - var(--wp--preset--spacing--xxs) - var(--wp--preset--spacing--xs) );
& + .wp-block-navigation__submenu-icon {
left: 0;
margin: 0;
& svg {
transform: rotate(-90deg);
}
}
&[aria-expanded="true"] {
background-color: var(--wp--preset--color--white);
& + .wp-block-navigation__submenu-icon svg {
transform: rotate(0deg);
}
& ~ .wp-block-navigation__submenu-container {
border: none;
box-shadow: none;
flex-flow: row wrap;
height: auto;
padding: 0;
width: 100%;
& .wp-block-navigation-item {
width: calc( 50% - var(--wp--preset--spacing--xs) );
}
}
}
}
}
}
.wp-block-navigation__container .wp-block-buttons {
flex-flow: row wrap;
padding: 0;
width: 100%;
& > .wp-block-button {
max-width: 235px;
}
} .wp-block-navigation__responsive-container-content {
& .wp-block-search {
display: none !important;
}
} #search__toggle-wrapper {
align-items: center;
display: flex !important;
height: 100%;
justify-content: center;
&:has(.search--open) {
background-color: var(--wp--preset--color--gray);
}
}
#search__toggle {
& a {
background-color: transparent !important;
height: 100%;
}
}
#search__toggle.search--open svg path {
fill: var(--wp--preset--color--dark-orange) !important;
}
#search__wrapper {
&.search--open {
border-top: .25rem solid var(--wp--preset--color--gray);
display: block !important;
left: 0;
margin: 0;
padding: var(--wp--preset--spacing--ml);
position: absolute;
right: 0;
top: 100%;
}
& > .wp-block-group {
margin: 0 auto;
width: 100%;
max-width: 57.5rem;
}
& #search__container {
margin-block-start: 0;
position: relative;
width: 100%;
max-width: 50rem;
& .wp-block-search {
margin-block-start: 0;
}
}
& #search__input-icon {
left: 1rem;
position: absolute;
top: calc( var(--wp--preset--font-size--body-default) * .75 + .25rem );
}
& .wp-block-search__input {
background-color: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--dark-gray);
border-radius: .5rem;
flex: 0 1 29.875rem;
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--montserrat);
font-size: var(--wp--preset--font-size--body-default);
font-weight: 400;
line-height: 1;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--default);
padding-left: 3rem;
}
& .wp-block-search__button {
align-items: baseline;
background-color: var(--wp--preset--color--dark-orange);
border-radius: 1rem;
color: var(--wp--preset--color--white);
display: flex;
flex: 0 1 17.125rem;
font-size: var(--wp--preset--font-size--body-default);
font-weight: 700;
gap: var(--wp--preset--spacing--default);
justify-content: center;
letter-spacing: .0625rem;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--default);
text-transform: uppercase;
&::after {
content: "\203a";
display: block;
font-size: calc( var(--wp--preset--font-size--body-default) * 1.6 );
font-weight: 400;
line-height: var(--wp--preset--font-size--body-default);
position: relative;
top: .09375rem;
}
}
}
#search__close {
color: var(--wp--preset--color--light-link-blue);
display: block;
min-width: 6.25rem;
&:active { color: var(--wp--preset--color--light-link-blue); }
&:focus { color: var(--wp--preset--color--light-link-blue); }
&:hover { color: var(--wp--preset--color--light-link-blue); }
&:visited { color: var(--wp--preset--color--light-link-blue); }
}
.wp-block-group:has(.header__navigation) {
column-gap: 0;
}
}
@media all and ( min-width: 48.875rem ) {
.wp-block-site-logo.header__logo {
width: initial;
}
}
@media all and ( min-width: 60rem ) { .header__navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
& .wp-block-navigation-item {
& .wp-block-navigation-submenu__toggle {
&[aria-expanded="true"] {
& ~ .wp-block-navigation__submenu-container {
flex-flow: row wrap;
& .wp-block-navigation-item {
width: calc( 50% - 1rem );
}
}
}
}
}
} .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
& > .wp-block-navigation-item {
& .wp-block-navigation-submenu__toggle {
&[aria-expanded="true"] {
& ~ .wp-block-navigation__submenu-container {
& .wp-block-navigation-item {
width: 100%;
}
}
}
}
}
}
}
@media all and ( min-width: 81.5rem ) { .header__navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
& .wp-block-navigation-item {
& .wp-block-navigation-submenu__toggle {
&[aria-expanded="true"] {
& ~ .wp-block-navigation__submenu-container {
flex-flow: column wrap;
padding-left: calc( calc( 100% - var(--wp--style--global--wide-size) ) / 2 );
padding-right: calc( calc( 100% - var(--wp--style--global--wide-size) ) / 2 );
& .wp-block-navigation-item {
width: calc( 25% - 1rem );
}
}
}
}
&:nth-of-type(1) {
& .wp-block-navigation-submenu__toggle {
&[aria-expanded="true"] {
& ~ .wp-block-navigation__submenu-container {
max-height: 30rem;
}
}
}
}
&:nth-of-type(2) {
& .wp-block-navigation-submenu__toggle {
&[aria-expanded="true"] {
& ~ .wp-block-navigation__submenu-container {
max-height: 21.25rem;
}
}
}
}
&:nth-of-type(3) {
& .wp-block-navigation-submenu__toggle {
&[aria-expanded="true"] {
& ~ .wp-block-navigation__submenu-container {
max-height: 10rem;
}
}
}
}
}
} .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
& > .wp-block-navigation-item {
align-items: start;
display: flex;
flex-flow: column nowrap;
gap: var(--wp--preset--spacing--xxs);
justify-content: stretch;
& .wp-block-navigation-submenu__toggle {
cursor: default;
font-weight: 700;
line-height: var(--wp--preset--spacing--medium);
padding: 0;
width: 100%; &[aria-expanded="true"] {
background-color: var(--wp--preset--color--white);
& ~ .wp-block-navigation__submenu-container {
border: none;
box-shadow: none;
padding: 0;
}
}
}
& .wp-block-navigation__submenu-icon {
display: none;
}
& .wp-block-navigation__submenu-container {
display: flex;
flex-flow: column nowrap;
gap: var(--wp--preset--spacing--xxs);
height: auto;
opacity: 1;
position: static;
visibility: visible;
width: 100%;
&::before {
display: none;
}
& .wp-block-navigation-link {
width: 100%;
& .wp-block-navigation-item__content {
padding: 0;
&:active {
color: var(--wp--preset--color--dark-orange);
}
&:focus {
color: var(--wp--preset--color--dark-orange);
}
&:hover {
color: var(--wp--preset--color--dark-orange);
}
}
}
}
}
}
.wp-block-navigation__container .wp-block-buttons {
justify-content: start !important;
padding: 0;
width: calc( 25% - 1rem );
}
}