.primary-menu__wrapper--mobile {
width: 100%;
} .site-header--mobile {
width: 100%;
background-color: var(--wp--preset--color--midnight);
position: relative;
z-index: 10;
} .primary-menu--mobile {
display: flex;
flex-direction: column;
margin: 0;
padding: 0 16px 8px 16px;
background-color: var(--wp--preset--color--midnight);
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 5;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-size: 14px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: all 0.2s ease-in-out;
} .primary-menu--mobile.active {
max-height: 3000px;
opacity: 1;
} .primary-menu--mobile li {
padding: 5px;
height: auto;
align-content: center;
}
.primary-menu--mobile .menu-item a {
color: #fff;
text-decoration: none;
} .primary-menu--mobile .sub-menu {
display: flex;
flex-direction: column;
padding-left: 0;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
} .primary-menu--mobile .sub-menu--active {
opacity: 1;
max-height: 1500px;
padding-top: 5px;
} .header__menu-toggle {
display: flex;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
} .header__menu-toggle .menu-bar {
width: 24px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
} .header__menu-toggle.is-active .menu-bar:nth-child(1) {
transform: rotate(45deg) translate(5px, 4px);
}
.header__menu-toggle.is-active .menu-bar:nth-child(2) {
opacity: 0;
}
.header__menu-toggle.is-active .menu-bar:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
} .menu-item-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.menu-item-row a {
color: #fff;
text-decoration: none;
flex: 1;
}
.submenu-toggle {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
color: #fff;
}
.submenu-toggle svg {
width: 12px;
height: 12px;
}
.caret-icon {
transition: transform 0.3s ease;
}
.submenu-toggle.is-open .caret-icon {
transform: rotate(180deg);
} .submenu-expanded {
text-decoration: underline !important;
text-underline-offset: 4px;
}
ul.primary-menu--desktop,
ul.primary-menu--mobile,
ul.sub-menu {
list-style: none;
} .site-header--desktop {
display: none;
}
.header__logo-container--desktop {
align-items: center;
grid-row: 1;
grid-column: 1 / 4;
background-size: 100%;
padding: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
.header__logo {
justify-self: center;
}
.header__logo-container-right a {
text-decoration: none;
}
.header__logo-container-right button:hover svg path,
.header__logo-container-right a:hover svg path {
fill: var(--wp--preset--color--primary-white);
}
.header__logo-container-right button:hover p,
.header__logo-container-right a:hover p {
color: var(--wp--preset--color--primary-white) !important;
}
.primary-menu__wrapper {
display: flex;
justify-content: right;
align-items: center;
position: relative;
width: 100%;
flex-wrap: wrap;
}
.primary-menu--desktop {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 24px;
padding-inline-start: 0;
position: relative;
margin: 0 auto;
} .primary-menu--desktop li {
font-size: 18px;
position: relative;
}
.primary-menu--desktop li a {
color: var(--wp--preset--color--tan-40);
text-decoration: none;
}
.primary-menu--desktop .menu-link-icon {
margin-left: 4px;
} .header__logo-container--desktop .wp-block-social-links {
gap: 16px;
}
.header__logo-container--desktop .wp-block-social-link:hover {
background-color: var(--wp--preset--color--primary-ggr-tan) !important;
transform: none;
}
.header__logo-container--desktop .wp-block-social-link-anchor {
padding: 5px;
}
.header__logo-container--desktop .wp-block-social-links svg {
width: 22px;
height: 22px;
} .primary-menu--desktop .sub-menu {
list-style-type: none;
background: var(--wp--preset--color--midnight);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
display: none;
left: 0;
min-width: 200px;
padding-inline-start: 0px;
position: absolute;
top: 100%;
z-index: 999;
padding-top: 12px;
width: 250px;
}
.primary-menu--desktop .sub-menu li {
padding: 6px 10px;
}
.primary-menu--desktop li:hover>.sub-menu {
display: block;
} .primary-menu--desktop .sub-menu .sub-menu {
top: 0;
left: 100%;
padding-top: 0;
}
.primary-menu--desktop .menu-link {
display: flex;
justify-content: space-between;
align-items: center;
gap: 4px;
text-decoration: none;
}
.primary-menu--desktop .sub-menu .menu-link-text {
font-size: 14px;
}
.primary-menu--desktop .menu-caret {
flex-shrink: 0;
width: 10px;
height: 6px;
}
.primary-menu--desktop .menu-link:hover .menu-link-text {
text-decoration: underline;
text-underline-offset: 4px;
color: var(--wp--preset--color--primary-ggr-tan);
} .header__search-toggle,
.header__search-toggle--mobile {
background-color: transparent;
border: none;
display: flex;
padding: 0;
cursor: pointer;
} @media screen and (min-width: 1024px) {
.site-header--mobile {
display: none !important;
}
.site-header--desktop {
display: block !important;
}
.header__search-toggle svg,
.search-overlay__close-button svg {
width: 20px;
}
} @media all and (min-width: 1324px) { .primary-menu--desktop {
flex: 1;
} .primary-menu__wrapper .wp-block-social-links {
margin-top: 0px;
}
} .sitewide-banner {
padding: 8px 16px;
}
.sitewide-banner.banner--red {
background-color: var(--wp--preset--color--primary-ggr-red);
color: var(--wp--preset--color--primary-white);
}
.sitewide-banner.banner--blue {
background-color: var(--wp--preset--color--primary-ggr-blue);
color: var(--wp--preset--color--primary-white);
}
.sitewide-banner.banner--tan {
background-color: var(--wp--preset--color--primary-ggr-tan);
color: var(--wp--preset--color--midnight);
}
.sitewide-banner.banner--gray {
background-color: var(--wp--preset--color--dark-night-80);
color: var(--wp--preset--color--primary-white);
}
.sitewide-banner .swiper-slide__inner {
padding-right: 24px;
padding-left: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.sitewide-banner .slide-text {
font-weight: 700;
font-size: 16px;
line-height: 1.6;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 16px;
color: var(--wp--preset--color--primary-white);
}
.sitewide-banner.banner--tan .swiper-button-next:after,
.sitewide-banner.banner--tan .swiper-button-prev:after {
color: var(--wp--preset--color--midnight);
}
.sitewide-banner .swiper-button-prev,
.sitewide-banner .swiper-button-next {
width: 24px;
}
.sitewide-banner .swiper-button-prev {
left: 0;
}
.sitewide-banner .swiper-button-next {
right: 0;
}
@media screen and (min-width: 620px) {
.sitewide-banner {
padding: 8px 24px;
}
.sitewide-banner .swiper-slide__inner {
gap: 24px;
flex-direction: row;
}
}