/* ==== ACMS Global Header / Footer ==== */
/* -- Nav bar (Section B) -- */
#acms-nav .et_pb_menu_inner_container { justify-content: center; }
#acms-nav .et_pb_menu ul li a { text-decoration: none; }
#acms-nav .et-menu > li.current-menu-item > a { color: #ffffff !important; font-weight: 700 !important; }
#acms-nav .et_pb_menu__search-button, #acms-nav .et-search-field { color: #63511d; }
#acms-nav .mobile_menu_bar::before { color: #63511d !important; }
/* -- Dock (Section C) -- hidden above the fold, slides in past 150px scroll */
#acms-dock {
position: fixed;
top: 0; left: 0; width: 100%;
z-index: 9000;
transform: translateY(-100%);
transition: transform .3s ease;
box-shadow: 0 3px 12px rgba(21,89,122,.20);
}
#acms-dock.acms-is-visible { transform: translateY(0); }
#acms-dock-logo-col { width: 60px !important; flex: none !important; }
#acms-dock-menu-col .et_pb_menu_inner_container { justify-content: flex-end; }
#acms-dock .et-menu > li.current-menu-item > a { color: #ffffff !important; font-weight: 700 !important; }
@media (prefers-reduced-motion: reduce) {
#acms-dock { transition: none; }
}
/* -- Mega panel (shared rules, applies to both #acms-mega and #acms-mega-dock) -- */
#acms-mega, #acms-mega-dock {
display: none;
position: absolute;
left: 0; right: 0;
width: 100%;
background: #ffffff;
border-bottom: 4px solid #f7cc45;
box-shadow: 0 12px 26px rgba(21,89,122,.14);
z-index: 8000;
}
#acms-mega.acms-is-open, #acms-mega-dock.acms-is-open { display: block; }
#acms-mega .acms-mega-inner, #acms-mega-dock .acms-mega-inner {
max-width: 1440px; margin: 0 auto; padding: 38px 60px 42px;
display: flex; gap: 0; align-items: flex-start;
}
#acms-mega .acms-mega-label, #acms-mega-dock .acms-mega-label { width: 250px; flex: none; }
#acms-mega .acms-mega-label .acms-eyebrow, #acms-mega-dock .acms-mega-label .acms-eyebrow { display: block; font: 800 13px/1 var(--acms-font); letter-spacing: .14em; text-transform: uppercase; color: var(--acms-navy); margin-bottom: 10px; }
#acms-mega .acms-mega-label p, #acms-mega-dock .acms-mega-label p { font: 700 22px/1.3 var(--acms-font); color: var(--acms-navy); margin: 0; }
#acms-mega .acms-mega-grid, #acms-mega-dock .acms-mega-grid { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
#acms-mega .acms-mega-link, #acms-mega-dock .acms-mega-link {
text-decoration: none; padding: 0 24px; border-left: 1px solid #e6eaee;
display: flex; flex-direction: column; gap: 8px;
}
#acms-mega .acms-mega-title, #acms-mega-dock .acms-mega-title { font: 700 17px/1.3 var(--acms-font); color: var(--acms-navy); }
#acms-mega .acms-mega-desc, #acms-mega-dock .acms-mega-desc { font: 400 14px/1.6 var(--acms-font); color: #5d6d76; }
@media (max-width: 1200px) {
#acms-mega .acms-mega-grid, #acms-mega-dock .acms-mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
#acms-mega, #acms-mega-dock { display: none !important; }
}
/* -- Mobile: right-hand slide-in drawer --
Keyed off Divi's OWN `.mobile_nav.opened` state rather than a parallel class, so we never
fight its toggle. Scrim is a real element (a pseudo-element can't be a click target and,
living on , it out-stacked the drawer and blocked the drawer's own links). */
@media (max-width: 980px) {
#acms-nav .et_mobile_menu {
position: fixed;
top: 0; right: 0; bottom: 0; left: auto;
width: 328px;
max-width: 88vw;
height: 100vh;
padding: 64px 0 24px;
margin: 0;
background: #15597a;
border-top: 0;
box-shadow: -8px 0 26px rgba(0,0,0,.25);
transform: translateX(100%);
transition: transform .3s ease;
overflow-y: auto;
z-index: 100000;
}
#acms-nav .mobile_nav.opened .et_mobile_menu { transform: translateX(0); }
/* Real scrim element, sits just below the drawer in the same stacking context. */
.acms-drawer-scrim {
position: fixed;
inset: 0;
background: rgba(21,89,122,.45);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
z-index: 99998;
border: 0;
padding: 0;
cursor: pointer;
}
.acms-drawer-scrim.acms-is-visible { opacity: 1; visibility: visible; }
/* Close X, top-right inside the drawer. */
.acms-drawer-close {
position: absolute;
top: 14px; right: 16px;
width: 44px; height: 44px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.acms-drawer-close::before,
.acms-drawer-close::after {
content: '';
position: absolute;
width: 22px;
height: 2px;
background: #ffffff;
}
.acms-drawer-close::before { transform: rotate(45deg); }
.acms-drawer-close::after { transform: rotate(-45deg); }
.acms-drawer-close:focus-visible { outline: 2px solid #f7cc45; outline-offset: 2px; }
#acms-nav .et_mobile_menu li a {
color: #ffffff; font-size: 17px; font-weight: 600;
padding: 14px 24px;
border-bottom: 1px solid rgba(255,255,255,.16);
}
#acms-nav .et_mobile_menu li.current-menu-item > a { font-weight: 700; }
body.acms-drawer-open { overflow: hidden; }
#acms-dock { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#acms-nav .et_mobile_menu, .acms-drawer-scrim { transition: none; }
}
/* ==== Footer ==== */
.acms-footer-list, .acms-footer-list * { margin: 0; padding: 0; list-style: none; }
#acms-nav h4, .acms-footer h4,
#acms-footer-col-links h4, #acms-footer-col-contact h4, #acms-footer-col-follow h4 {
display: inline-block;
border-bottom: 2px solid var(--acms-cream);
padding-bottom: 6px;
color: var(--acms-cream);
font: 700 22px/1.3 var(--acms-font);
margin: 0 0 20px;
}
.acms-footer-list li { margin-bottom: 12px; }
.acms-footer-list a { color: #ffffff; font: 400 16px/1.5 var(--acms-font); text-decoration: none; }
.acms-footer-list a::before { content: '\2022'; color: var(--acms-yellow); margin-right: 12px; }
.acms-footer-list a:hover { color: var(--acms-yellow); }
.acms-footer-contact { display: flex; flex-direction: column; gap: 16px; }
.acms-footer-contact-row { display: flex; gap: 14px; align-items: flex-start; }
.acms-footer-contact-row a { color: #ffffff; font: 400 16px/1.5 var(--acms-font); text-decoration: none; max-width: 290px; }
.acms-footer-contact-row a:hover { color: var(--acms-yellow); }
#acms-footer-social .et_pb_social_media_follow_network a { background: transparent !important; width: 46px; height: 46px; }
#acms-footer-social .et_pb_social_media_follow_network a { border: 2px solid #ffffff !important; border-radius: 5px !important; }
#acms-footer-social .et_pb_social_media_follow_network a:hover { border-color: var(--acms-yellow) !important; }
#acms-footer-social .et_pb_social_media_follow_network a:hover { background: var(--acms-yellow) !important; }
#acms-footer-social .et_pb_social_media_follow_network a:hover svg,
#acms-footer-social .et_pb_social_media_follow_network a:hover .et_pb_extra_font_icon { fill: var(--acms-navy) !important; color: var(--acms-navy) !important; }
#acms-footer-row2 p { font: 700 14px/1.9 var(--acms-font); text-transform: uppercase; letter-spacing: .03em; color: #ffffff; text-align: center; margin: 0; }
@media (max-width: 980px) {
#acms-footer-row1 { flex-direction: column; }
#acms-footer-col-logo, #acms-footer-col-links, #acms-footer-col-contact, #acms-footer-col-follow { width: 100% !important; text-align: left; }
#acms-footer-col-logo { text-align: center; }
}
/* ==== Utility: full-bleed closing image (used per content page in later phases) ==== */
.acms-closing-image img { width: 100%; height: auto; display: block; }
/* Menu module defaults to a white background — force transparent so the yellow section shows through */
#acms-nav .et_pb_menu, #acms-dock .et_pb_menu {
background-color: transparent !important;
}
/* ---- Logo sizing ----
Divi's sizing attribute lands on the module WRAPPER, not the ![]()
, so the image renders at its
natural size and overflows. Size and centre the img itself. */
#acms-logo-img .et_pb_image_wrap { display: block; }
#acms-logo-img img {
height: 110px;
width: auto;
max-width: 100%;
margin: 0 auto;
display: block;
}
#acms-dock-logo-img img {
height: 34px;
width: auto;
max-width: 100%;
display: block;
}
/* Footer lockup is a tall narrow 100x291 image — never upscale it (width:100% would blow it up to 582px tall). */
#acms-footer-logo-img img {
max-width: 200px;
width: auto;
height: auto;
display: block;
}
/* Dock: logo column sized to its content so the menu column takes the rest */
#acms-dock-logo-col { width: auto !important; margin-right: 24px !important; }
#acms-dock-menu-col { width: auto !important; flex: 1 1 auto; margin-right: 0 !important; }
#acms-dock-row { display: flex; align-items: center; }
/* Footer: 4 equal columns, no wrap */
#acms-footer-row1 { display: flex; flex-wrap: nowrap; gap: 40px; align-items: flex-start; }
#acms-footer-row1 > .et_pb_column { width: 25% !important; margin-right: 0 !important; float: none !important; }
@media (max-width: 980px) {
#acms-footer-row1 { flex-wrap: wrap; gap: 32px; }
#acms-footer-row1 > .et_pb_column { width: 100% !important; }
#acms-logo-img img { height: 72px; }
}
/* ---- Vertical centring ----
Divi leaves the row flush to the top of a min-height section, and ships an asymmetric
margin-top:8px on menu + padding-bottom:8px on the link, so menu text sits low. */
#acms-nav, #acms-dock { display: flex; align-items: center; }
#acms-nav > .et_pb_row, #acms-dock > .et_pb_row { width: 100%; }
#acms-nav .et-menu > li, #acms-dock .et-menu > li {
margin-top: 0;
margin-bottom: 0;
display: flex;
align-items: center;
}
#acms-nav .et-menu > li > a, #acms-dock .et-menu > li > a {
padding-top: 0;
padding-bottom: 0;
line-height: 1.2;
display: flex;
align-items: center;
}
/* Search icon sits on the same optical baseline as the links */
#acms-nav .et_pb_menu__search-button,
#acms-nav .et_pb_menu__icon,
#acms-dock .et_pb_menu__icon { display: flex; align-items: center; }
#acms-nav .et_pb_menu__wrap, #acms-dock .et_pb_menu__wrap { align-items: center; }
/* ---- Social icon glyph centring ----
Divi's glyph ::before is a fixed 32x32 block pinned top-left, sized for its default 32px
button. Our buttons are 46px, so centre the glyph inside the link box. */
#acms-footer-social .et_pb_social_media_follow_network a.icon {
display: flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box; /* keep the button 46px overall, not 46 + 2px borders = 50 */
}
#acms-footer-social .et_pb_social_media_follow_network a.icon::before {
position: static;
margin: 0;
}
/* Divi ships `top: 2px` on the hamburger glyph, throwing it 2px low in the flex-centred bar. */
#acms-nav .mobile_menu_bar { display: flex; align-items: center; }
/* .mobile_nav is block-level, so the flex hamburger overflowed it by ~1px — centre it there too. */
#acms-nav .et_mobile_nav_menu .mobile_nav { display: flex; align-items: center; justify-content: flex-end; }
#acms-nav .mobile_menu_bar::before { top: 0; }
/* Divi's own `.et_pb_menu__wrap .mobile_menu_bar { transform: translateY(3%) }` nudges the
hamburger ~1px low once the bar is flex-centred. Cancel it. */
#acms-nav .et_pb_menu__wrap .mobile_menu_bar { transform: none; }