/* stylelint-disable no-descending-specificity */ :root { /* stylelint-disable length-zero-no-unit */ --admin-bar-height: 0px; /* stylelint-disable function-url-quotes */ --arrow-icon: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.25 15C0.916667 15 0.625 14.875 0.375 14.625C0.125 14.375 0 14.0833 0 13.75V1.25C0 0.916667 0.125 0.625 0.375 0.375C0.625 0.125 0.916667 0 1.25 0H7.0625V1.25H1.25V13.75H13.75V7.9375H15V13.75C15 14.0833 14.875 14.375 14.625 14.625C14.375 14.875 14.0833 15 13.75 15H1.25ZM5.45833 10.4375L4.58333 9.54167L12.875 1.25H8.3125V0H15V6.6875H13.75V2.14583L5.45833 10.4375Z' fill='%231C2244'/%3E%3C/svg%3E"); --primary-link-icon: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 8.25417L0 1.25417L1.25417 0L7 5.74583L12.7458 0L14 1.25417L7 8.25417Z' fill='%23C04A89'/%3E%3C/svg%3E"); --search-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' fill='%231C2244'/%3E%3C/svg%3E"); --hamburger-menu-icon: url("data:image/svg+xml,%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20V16.6667H30V20H0ZM0 11.6667V8.33333H30V11.6667H0ZM0 3.33333V0H30V3.33333H0Z' fill='%231C2244'/%3E%3C/svg%3E"); --close-icon-svg: url("data:image/svg+xml,%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20V16.6667H21.6667V20H0ZM27.6667 18.3333L19.3333 10L27.6667 1.66667L30 4L24 10L30 16L27.6667 18.3333ZM0 11.6667V8.33333H16.6667V11.6667H0ZM0 3.33333V0H21.6667V3.33333H0Z' fill='%231C2244'/%3E%3C/svg%3E"); } /* WordPress admin bar pushes content down via margin-top on . These variables let us subtract that offset from viewport-height calculations. */ .admin-bar { --admin-bar-height: 32px; } @media screen and (max-width: 782px) { .admin-bar { --admin-bar-height: 46px; } } body.no-scroll { overflow: hidden; height: 100vh; } .header-max { position: relative; } .header__wrapper { max-width: var(--wp--style--global--wide-size); margin: 0 auto; } .navigation { display: flex; flex-direction: column; width: 100%; } .navigation__external-wrapper { padding: var(--wp--preset--spacing--xxxsmall) 0; background: var(--wp--preset--color--brand-light-1); top: 0; width: 100%; left: 0; } .navigation__external { display: flex; justify-content: flex-end; max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 0 var(--wp--preset--spacing--medium); } .navigation__external ul { display: flex; column-gap: var(--wp--preset--spacing--medium); row-gap: var(--wp--preset--spacing--xxsmall); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .navigation__external a { font-size: var(--wp--preset--font-size--default); line-height: 24px; font-weight: 600; text-decoration: underline; color: var(--wp--preset--color--brand); display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--xxxsmall); } .navigation__external a::after { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--arrow-icon) no-repeat center/contain; } /* --- Desktop Header Top Row (Logo, Search, Buttons) --- */ .wrapper-logo-nav-user { display: flex; justify-content: space-between; align-items: center; } .navigation__search .wp-block-search__inside-wrapper { border: 2px solid var(--wp--preset--color--brand); border-radius: 50px; padding: 2px 10px; display: flex; align-items: center; background: #fff; min-width: 300px; } .navigation__search .wp-block-search__label { display: none; } .navigation__search .wp-block-search__input { border: none; outline: none; padding: var(--wp--preset--spacing--xxsmall); flex-grow: 1; font-size: var(--wp--preset--font-size--default); } .navigation__search .wp-block-search__button { border: none; cursor: pointer; text-indent: -9999px; overflow: hidden; width: 18px; height: 32px; background: var(--search-icon) no-repeat center/contain; margin-right: var(--wp--preset--spacing--xsmall); } .navigation__user-actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--small); } .navigation__user-actions > a { text-decoration: none; padding: var(--wp--preset--spacing--xxsmall) var(--wp--preset--spacing--medium); border-radius: 50px; font-weight: 600; font-size: var(--wp--preset--font-size--default); line-height: 24px; color: var(--wp--preset--color--white); } .navigation__primary .menu-has-children, .navigation__primary > ul > li > a { text-decoration: none; color: var(--wp--preset--color--brand); font-weight: 600; font-size: var(--wp--preset--font-size--default); line-height: 24px; display: flex; align-items: center; gap: var(--wp--preset--spacing--xxsmall); cursor: pointer; background: none; border: none; border-bottom: 4px solid transparent; /* Acts as a height placeholder */ transition: border-color 0.3s ease; } .navigation__primary ul ul li a { color: var(--wp--preset--color--brand); text-decoration: underline; } .navigation__primary .menu-has-children:hover, .navigation__primary > ul > li > a:hover { border-bottom-color: var(--wp--preset--color--brand); } /* --- Navigation Primary --- */ .navigation__primary { margin-top: var(--wp--preset--spacing--small); } .navigation__primary > ul { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--small); list-style: none; padding: 0; align-items: center; } .navigation__primary .menu-has-children::after { content: ""; display: inline-block; width: 14px; height: 9px; background: var(--primary-link-icon) no-repeat center/contain; transition: transform 0.3s ease; flex-shrink: 0; } .navigation__primary .menu-has-children.is-active { border-bottom: 4px solid var(--wp--preset--color--brand); } .navigation__primary .menu-has-children.is-active::after { transform: rotate(180deg); } /* --- Sub-Menus --- */ .navigation__primary ul ul { position: absolute; background-color: var(--wp--preset--color--brand-light-1); padding: 0; min-width: 250px; list-style: none; display: none; z-index: 100; box-sizing: border-box; } .navigation__primary ul ul li { font-size: var(--wp--preset--font-size--default); break-inside: avoid; margin-bottom: var(--wp--preset--spacing--xsmall); } .navigation__primary ul ul.is-visible { display: block; column-count: 2; column-gap: var(--wp--preset--spacing--large); row-gap: var(--wp--preset--spacing--xsmall); align-items: stretch; margin-top: var(--wp--preset--spacing--small); padding: 1.5rem; overflow: hidden; width: 100%; max-width: 700px; } /* Flex layout when the menu contains a highlight item */ .navigation__primary ul ul.is-visible:has(.menu-item-highlighted) { display: flex; align-items: stretch; max-width: 900px; width: 100%; padding: 0; } /* Regular items column wrapper */ .navigation__primary ul ul.is-visible .submenu-items-col { flex: 1; list-style: none; padding: 1.5rem; } .navigation__primary ul ul.is-visible .submenu-items-col > ul { display: block; position: static; background: none; min-width: 0; z-index: auto; column-count: 2; column-gap: var(--wp--preset--spacing--large); list-style: none; padding: 0; margin: 0; } .navigation__primary ul ul li a::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: var(--wp--preset--spacing--xxsmall); border-top: 2px solid var(--wp--preset--color--brand-secondary); border-right: 2px solid var(--wp--preset--color--brand-secondary); transform: rotate(45deg); } /* --- Highlighted Column (Edge-to-Edge) --- */ .navigation__primary ul ul li.menu-item-highlighted { background-color: var(--wp--preset--color--brand-light-2); padding: var(--wp--preset--spacing--large); display: flex; flex-direction: column; justify-content: center; flex: 0 0 200px; margin: 0; } .emphasis-content { display: flex; flex-direction: column; height: 100%; } .emphasis-title { font-size: var(--wp--preset--font-size--medium-paragraph); color: var(--wp--preset--color--brand); margin-bottom: var(--wp--preset--spacing--xxsmall); } .emphasis-desc { font-size: var(--wp--preset--font-size--small-default); color: var(--wp--preset--color--copy-black); line-height: 1.5; margin-bottom: var(--wp--preset--spacing--xxsmall); } .emphasis-button.wp-block-button a.wp-block-button__link { text-decoration: none !important; display: block; text-align: center; } .emphasis-button.wp-block-button a.wp-block-button__link::after { content: unset !important; display: none !important; } /* --- Desktop Header --- */ @media screen and (min-width: 921px) { /* Reset Desktop Grid */ .navigation { display: grid; grid-template-areas: "logo search" "nav nav"; grid-template-columns: auto 1fr; align-items: center; row-gap: var(--wp--preset--spacing--small); } .wrapper-logo-nav-user { grid-area: logo; } .wrapper-logo-nav-user > .logo .site-logo { width: 196px; height: 53px; object-fit: contain; } .navigation__search-container { grid-area: search; display: flex; justify-content: flex-end; align-items: center; gap: 20px; } .navigation__drawer { grid-area: nav; display: block; grid-template-rows: none; overflow: visible; background: transparent; } /* Hide the mobile-only version of buttons inside the drawer on desktop */ .navigation__drawer .navigation__user-actions { display: none; } .navigation__search-container .navigation__user-actions { display: flex; opacity: 1; transform: none; padding: 0; } /* Desktop Nav Horizontal Layout */ .navigation__primary { position: relative; /* Anchor for sub-menus */ } .navigation__primary > ul { flex-direction: row; gap: var(--wp--preset--spacing--medium); } .navigation__primary ul ul { position: absolute; z-index: 999; } .navigation__primary > ul > li { width: auto; border-bottom: none; } .menu-toggle { display: none; } .navigation__primary ul ul li.menu-item-highlighted { background-color: var(--wp--preset--color--brand-light-2); padding: var(--wp--preset--spacing--large); display: flex; flex-direction: column; justify-content: center; flex: 0 0 200px; } /* Style the internal wrapper */ .emphasis-content { display: flex; flex-direction: column; height: 100%; text-align: left; } /* Override standard sub-menu link styles for the emphasis title */ .emphasis-title { font-size: var(--wp--preset--font-size--medium-paragraph); color: var(--wp--preset--color--brand); font-weight: 700; margin-bottom: var(--wp--preset--spacing--xxsmall); text-decoration: none; display: block; } .emphasis-desc { font-size: var(--wp--preset--font-size--small-default); color: var(--wp--preset--color--copy-black); line-height: 1.5; margin-bottom: var(--wp--preset--spacing--medium); } /* The Navy Pill Button inside the emphasis box */ .emphasis-button { margin-top: auto; } } /* --- Mobile Logic (Consolidated & Verified) --- */ @media screen and (max-width: 920px) { .header-max { padding-bottom: var(--wp--preset--spacing--medium); } .header__wrapper { padding: 0; } .navigation { display: flex; flex-direction: column; } .header-max.has-open-nav { height: calc(100svh - var(--admin-bar-height)); } .header-max.has-open-nav .header__wrapper, .header-max.has-open-nav .navigation { height: 100%; } /* Drawer fills whatever height remains after the logo row and search bar. */ .header-max.has-open-nav .navigation__drawer.is-open { flex: 1; min-height: 0; } /* External Links */ .navigation__external { order: 0; padding: var(--wp--preset--spacing--xxsmall) var(--wp--preset--spacing--small); justify-content: flex-end; } /* Logo and Hamburger Row */ .wrapper-logo-nav-user { order: 1; display: flex; justify-content: space-between; align-items: center; padding: var(--wp--preset--spacing--small) 0; flex-wrap: nowrap; } .wrapper-logo-nav-user > .logo .site-logo { width: 193px; height: 48px; } .menu-toggle { display: block; width: 30px; height: 20px; background: var(--hamburger-menu-icon) no-repeat center/contain; border: none; cursor: pointer; font-size: 0; } .menu-toggle.is-open { background-image: var(--close-icon-svg); } /* Search Bar - Full width, always visible below logo */ .navigation__search-container { order: 2; padding: 0; display: block; } .navigation__search .wp-block-search__inside-wrapper { min-width: 100%; box-sizing: border-box; } /* Setup the Drawer for Animation */ .navigation__drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease-in-out; overflow: hidden; order: 3; background: var(--wp--preset--color--white); width: 100%; border-top: 0 solid transparent; } .navigation__primary { margin-top: 0; overflow: visible; } /* Smooth Fade for Content */ .navigation__primary, .navigation__user-actions { opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; } .navigation__primary .menu-has-children.is-active { flex-direction: row-reverse; justify-content: flex-end; border-bottom: 0; margin-bottom: 0; } .navigation__primary .menu-has-children::after { transform: rotate(-90deg); } .navigation__primary .menu-has-children.is-active::after { transform: rotate(90deg); } /* Auth buttons at the bottom of the drawer */ .navigation__user-actions { display: flex; padding: var(--wp--preset--spacing--medium); gap: var(--wp--preset--spacing--small); justify-content: center; flex-direction: row; } /* Hide the desktop-only version of buttons */ .navigation__search-container .navigation__user-actions { display: none; } /* Opening State */ .navigation__drawer.is-open { grid-template-rows: 1fr; border-top: 1px solid var(--wp--preset--color--brand-light-1); } /* Internal Wrapper */ .navigation__drawer > div { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; max-height: 100%; padding-bottom: var(--wp--preset--spacing--large); } .navigation__drawer.is-open .navigation__primary, .navigation__drawer.is-open .navigation__user-actions { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } /* Ensure drawer reveals children */ .navigation__drawer.is-open .navigation__user-actions { display: flex; opacity: 1; transform: translateY(0); padding: var(--wp--preset--spacing--medium); justify-content: center; gap: var(--wp--preset--spacing--small); } .navigation__primary > ul { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0; } .navigation__primary > ul > li { width: 100%; } .navigation__primary .menu-has-children, .navigation__primary > ul > li > a { padding: var(--wp--preset--spacing--small) 0; width: 100%; justify-content: start; font-size: 20px; text-align: left; } /* Adjust the sub-menu for mobile viewports */ .navigation__primary ul ul.is-visible { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--small); position: static; width: 100%; box-sizing: border-box; background: none; margin-top: 0; padding: 0; } .navigation__primary ul ul.is-visible .submenu-items-col { padding: 0; } .navigation__primary ul ul.is-visible .submenu-items-col > ul { column-count: 1; } .navigation__primary ul ul li.menu-item-highlighted { flex: none; width: 100%; box-sizing: border-box; background: none; padding: var(--wp--preset--spacing--medium) 0 0 0; margin-top: var(--wp--preset--spacing--small); } .navigation__primary ul ul li a { font-size: 20px; padding: var(--wp--preset--spacing--xxsmall) 0; } .navigation__primary .menu-has-children:hover, .navigation__primary > ul > li > a:hover { border-bottom-color: transparent; } .drawer-open .navigation__primary ul li .menu-has-children:not(.is-active) { display: none; } .menu-item-highlighted { border-top: 1px solid var(--wp--preset--color--neutral-2); } .emphasis-desc { margin-bottom: var(--wp--preset--spacing--medium) !important; } } /*-- Arbitrary breakpoint so that buttons can be stacked --*/ @media screen and (max-width: 440px) { .navigation__user-actions { flex-direction: column; align-items: stretch; padding-left: 0 !important; padding-right: 0 !important; } .navigation__user-actions .wp-block-button a { justify-content: center; width: 100%; box-sizing: border-box; display: flex; } }