.elementor-39831 .elementor-element.elementor-element-657b937{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:99;}.elementor-39831 .elementor-element.elementor-element-a69d3cd{--display:flex;--justify-content:center;--padding-top:8px;--padding-bottom:8px;--padding-left:0px;--padding-right:0px;--z-index:99;}.elementor-39831 .elementor-element.elementor-element-a69d3cd:not(.elementor-motion-effects-element-type-background), .elementor-39831 .elementor-element.elementor-element-a69d3cd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-39831 .elementor-element.elementor-element-d3f8315{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-39831 .elementor-element.elementor-element-e3ad7d2{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-39831 .elementor-element.elementor-element-2be1b25{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-39831 .elementor-element.elementor-element-b1a3e2a{--grid-template-columns:repeat(0, auto);--icon-size:17px;--grid-column-gap:10px;--grid-row-gap:0px;}.elementor-39831 .elementor-element.elementor-element-b1a3e2a .elementor-widget-container{text-align:left;}.elementor-39831 .elementor-element.elementor-element-b1a3e2a > .elementor-widget-container{margin:0px 30px 0px 0px;}.elementor-39831 .elementor-element.elementor-element-b1a3e2a .elementor-social-icon{background-color:#02010100;--icon-padding:0px;border-style:none;}.elementor-39831 .elementor-element.elementor-element-b1a3e2a .elementor-social-icon i{color:var( --e-global-color-c8a90f9 );}.elementor-39831 .elementor-element.elementor-element-b1a3e2a .elementor-social-icon svg{fill:var( --e-global-color-c8a90f9 );}.elementor-39831 .elementor-element.elementor-element-44e1839 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-39831 .elementor-element.elementor-element-44e1839 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:0.8rem;font-weight:500;text-transform:none;line-height:0.8rem;color:var( --e-global-color-primary );}.elementor-39831 .elementor-element.elementor-element-9a23811 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-39831 .elementor-element.elementor-element-9a23811 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:0.8rem;font-weight:500;text-transform:none;line-height:0.8rem;color:var( --e-global-color-primary );}.elementor-39831 .elementor-element.elementor-element-8b964f5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:10px;--z-index:9;}.elementor-39831 .elementor-element.elementor-element-bb62c69 > .elementor-widget-container{margin:0px 0px -8px 0px;}.elementor-39831 .elementor-element.elementor-element-bb62c69{z-index:9;}.elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button{background-color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-weight:500;fill:var( --e-global-color-e29f488 );color:var( --e-global-color-e29f488 );border-style:solid;border-width:1px 1px 1px 1px;border-color:#000000;padding:10px 16px 10px 16px;}.elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button:hover, .elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button:focus{background-color:var( --e-global-color-e29f488 );color:var( --e-global-color-text );border-color:var( --e-global-color-text );}.elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button .elementor-button-content-wrapper{gap:5px;}.elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button:hover svg, .elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button:focus svg{fill:var( --e-global-color-text );}.elementor-39831 .elementor-element.elementor-element-1987bb8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-39831 .elementor-element.elementor-element-1987bb8:not(.elementor-motion-effects-element-type-background), .elementor-39831 .elementor-element.elementor-element-1987bb8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-39831 .elementor-element.elementor-element-3fdb6ad{--divider-border-style:solid;--divider-color:#EAECF0;--divider-border-width:2px;}.elementor-39831 .elementor-element.elementor-element-3fdb6ad .elementor-divider-separator{width:100%;}.elementor-39831 .elementor-element.elementor-element-3fdb6ad .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-39831 .elementor-element.elementor-element-ab7259b{--display:flex;--justify-content:center;border-style:none;--border-style:none;--padding-top:8px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-39831 .elementor-element.elementor-element-ab7259b:not(.elementor-motion-effects-element-type-background), .elementor-39831 .elementor-element.elementor-element-ab7259b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-39831 .elementor-element.elementor-element-78c56f0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-39831 .elementor-element.elementor-element-4a7558a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39831 .elementor-element.elementor-element-8674aea{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-39831 .elementor-element.elementor-element-5674159{z-index:5;text-align:start;}.elementor-39831 .elementor-element.elementor-element-5674159 img{width:104px;}.elementor-39831 .elementor-element.elementor-element-631ba66{z-index:5;text-align:start;}.elementor-39831 .elementor-element.elementor-element-631ba66 img{width:140px;}.elementor-39831 .elementor-element.elementor-element-e5925ab{--display:flex;}.elementor-39831 .elementor-element.elementor-element-a03e1a1 .elementor-icon-wrapper{text-align:center;}.elementor-39831 .elementor-element.elementor-element-a03e1a1.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-081529a );}.elementor-39831 .elementor-element.elementor-element-a03e1a1.elementor-view-framed .elementor-icon, .elementor-39831 .elementor-element.elementor-element-a03e1a1.elementor-view-default .elementor-icon{color:var( --e-global-color-081529a );border-color:var( --e-global-color-081529a );}.elementor-39831 .elementor-element.elementor-element-a03e1a1.elementor-view-framed .elementor-icon, .elementor-39831 .elementor-element.elementor-element-a03e1a1.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-081529a );}.elementor-39831 .elementor-element.elementor-element-a03e1a1 .elementor-icon{font-size:16px;}.elementor-39831 .elementor-element.elementor-element-a03e1a1 .elementor-icon svg{height:16px;}.elementor-39831 .elementor-element.elementor-element-3349df5 .elementor-search-form{text-align:center;}.elementor-39831 .elementor-element.elementor-element-3349df5 .elementor-search-form__toggle{--e-search-form-toggle-size:30px;--e-search-form-toggle-color:var( --e-global-color-2ceb545 );--e-search-form-toggle-background-color:var( --e-global-color-e29f488 );--e-search-form-toggle-icon-size:calc(45em / 100);--e-search-form-toggle-border-width:0px;}.elementor-39831 .elementor-element.elementor-element-3349df5 input[type="search"].elementor-search-form__input{font-family:"Montserrat", Sans-serif;font-size:0.8rem;font-weight:400;line-height:2.4rem;}.elementor-39831 .elementor-element.elementor-element-3349df5 .elementor-search-form__input, .elementor-39831 .elementor-element.elementor-element-3349df5 .elementor-search-form__icon, .elementor-39831 .elementor-element.elementor-element-3349df5 .elementor-lightbox .dialog-lightbox-close-button, .elementor-39831 .elementor-element.elementor-element-3349df5 .elementor-lightbox .dialog-lightbox-close-button:hover, .elementor-39831 .elementor-element.elementor-element-3349df5.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{color:var( --e-global-color-2ceb545 );fill:var( --e-global-color-2ceb545 );}.elementor-39831 .elementor-element.elementor-element-3349df5:not(.elementor-search-form--skin-full_screen) .elementor-search-form__container{border-width:1px 1px 1px 1px;border-radius:14px;}.elementor-39831 .elementor-element.elementor-element-3349df5.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{border-width:1px 1px 1px 1px;border-radius:14px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6{z-index:9;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle{margin-left:auto;background-color:var( --e-global-color-primary );border-radius:5px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-menu-item{color:#344054;fill:#344054;padding-left:0px;padding-right:0px;padding-top:3px;padding-bottom:3px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-menu-item:hover, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-menu-item.pp-menu-item-active, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-menu-item.highlighted, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-menu-item:focus{color:var( --e-global-color-5b513bc );fill:var( --e-global-color-5b513bc );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp--pointer-framed) .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp--pointer-framed) .pp-menu-item:after{background-color:var( --e-global-color-d898704 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed .pp-menu-item:after{border-color:var( --e-global-color-d898704 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-brackets .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-brackets .pp-menu-item:after{color:var( --e-global-color-d898704 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-menu-item.pp-menu-item-active, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .menu-item.current-menu-ancestor .pp-menu-item{color:var( --e-global-color-5b513bc );fill:var( --e-global-color-5b513bc );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp--pointer-framed) .pp-menu-item.pp-menu-item-active:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp--pointer-framed) .pp-menu-item.pp-menu-item-active:after, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp--pointer-framed) .menu-item.current-menu-ancestor .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp--pointer-framed) .menu-item.current-menu-ancestor .pp-menu-item:after{background-color:var( --e-global-color-5b513bc );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed .pp-menu-item.pp-menu-item-active:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed .pp-menu-item.pp-menu-item-active:after, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed .menu-item.current-menu-ancestor .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed .menu-item.current-menu-ancestor .pp-menu-item:after{border-color:var( --e-global-color-5b513bc );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-brackets .pp-menu-item.pp-menu-item-active:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-brackets .pp-menu-item.pp-menu-item-active:after, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-brackets .menu-item.current-menu-ancestor .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-brackets .menu-item.current-menu-ancestor .pp-menu-item:after{color:var( --e-global-color-5b513bc );}body:not(.rtl) .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--layout-horizontal .pp-advanced-menu > li:not(:last-child){margin-right:20px;}body.rtl .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--layout-horizontal .pp-advanced-menu > li:not(:last-child){margin-left:20px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp-advanced-menu--layout-horizontal) .pp-advanced-menu > li:not(:last-child){margin-bottom:20px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed .pp-menu-item:before{border-width:1px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed.e--animation-draw .pp-menu-item:before{border-width:0 0 1px 1px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed.e--animation-draw .pp-menu-item:after{border-width:1px 1px 0 0;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed.e--animation-corners .pp-menu-item:before{border-width:1px 0 0 1px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-framed.e--animation-corners .pp-menu-item:after{border-width:0 1px 1px 0;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-underline .pp-menu-item:after, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-overline .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-double-line .pp-menu-item:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp--pointer-double-line .pp-menu-item:after{height:1px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-advanced-menu--dropdown a, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--type-default .pp-advanced-menu--dropdown.pp-menu-default a, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle{color:var( --e-global-color-e29f488 );fill:var( --e-global-color-e29f488 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-advanced-menu--dropdown, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--type-default .pp-advanced-menu--dropdown{background-color:var( --e-global-color-primary );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-advanced-menu--dropdown a:hover, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--type-default .pp-advanced-menu--dropdown.pp-menu-default a:hover, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle:hover{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-advanced-menu--dropdown a:hover, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp-advanced-menu--layout-expanded) .pp-advanced-menu--dropdown a.highlighted, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--type-default .pp-advanced-menu--dropdown.pp-menu-default a:hover, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--type-default .pp-advanced-menu--dropdown.pp-menu-default a.highlighted{background-color:var( --e-global-color-189da01 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-advanced-menu--dropdown a.pp-menu-item-active, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--type-default .pp-advanced-menu--dropdown.pp-menu-default a.pp-menu-item-active{color:var( --e-global-color-text );fill:var( --e-global-color-text );background-color:var( --e-global-color-189da01 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main .pp-advanced-menu--dropdown{min-width:200px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-hamburger .pp-hamburger-box .pp-hamburger-inner, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-hamburger .pp-hamburger-box .pp-hamburger-inner:before, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-hamburger .pp-hamburger-box .pp-hamburger-inner:after{background-color:var( --e-global-color-e29f488 );height:4px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-icon, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-menu-toggle-label{color:var( --e-global-color-e29f488 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-icon svg{fill:var( --e-global-color-e29f488 );}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu .pp-menu-item, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu-main-wrapper.pp-advanced-menu--type-full-screen .pp-advanced-menu--dropdown .pp-menu-item, .pp-advanced-menu--dropdown.pp-advanced-menu__container.pp-menu-b82e9f6 .pp-menu-item{font-family:"Rubik", Sans-serif;font-size:0.75rem;font-weight:500;text-transform:uppercase;line-height:0.75rem;letter-spacing:2px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--dropdown .pp-menu-item, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--dropdown .pp-sub-item, .pp-advanced-menu--dropdown.pp-advanced-menu__container.pp-menu-b82e9f6 .sub-menu .pp-menu-item, .pp-advanced-menu--dropdown.pp-advanced-menu__container.pp-menu-b82e9f6 .sub-menu .pp-sub-item{font-family:"Inter", Sans-serif;font-size:0.9rem;font-weight:400;line-height:1.1rem;}.elementor-39831 .elementor-element.elementor-element-14432e5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-39831 .elementor-element.elementor-element-1486cf1 > .elementor-widget-container{margin:5px 0px 0px 0px;}.elementor-39831 .elementor-element.elementor-element-1486cf1 .elementor-icon-wrapper{text-align:center;}.elementor-39831 .elementor-element.elementor-element-1486cf1.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-081529a );}.elementor-39831 .elementor-element.elementor-element-1486cf1.elementor-view-framed .elementor-icon, .elementor-39831 .elementor-element.elementor-element-1486cf1.elementor-view-default .elementor-icon{color:var( --e-global-color-081529a );border-color:var( --e-global-color-081529a );}.elementor-39831 .elementor-element.elementor-element-1486cf1.elementor-view-framed .elementor-icon, .elementor-39831 .elementor-element.elementor-element-1486cf1.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-081529a );}.elementor-39831 .elementor-element.elementor-element-1486cf1 .elementor-icon{font-size:16px;}.elementor-39831 .elementor-element.elementor-element-1486cf1 .elementor-icon svg{height:16px;}.elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-search-form{text-align:center;}.elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-search-form__toggle{--e-search-form-toggle-size:30px;--e-search-form-toggle-color:var( --e-global-color-text );--e-search-form-toggle-background-color:var( --e-global-color-e29f488 );--e-search-form-toggle-icon-size:calc(45em / 100);--e-search-form-toggle-border-width:0px;}.elementor-39831 .elementor-element.elementor-element-36b9c14.elementor-search-form--skin-full_screen .elementor-search-form__container{background-color:#0C6881C4;}.elementor-39831 .elementor-element.elementor-element-36b9c14 input[type="search"].elementor-search-form__input{font-family:"Inter", Sans-serif;font-size:1.2rem;font-weight:600;text-transform:uppercase;line-height:3rem;letter-spacing:1px;}.elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-search-form__input, .elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-search-form__icon, .elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-lightbox .dialog-lightbox-close-button, .elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-lightbox .dialog-lightbox-close-button:hover, .elementor-39831 .elementor-element.elementor-element-36b9c14.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{color:var( --e-global-color-e29f488 );fill:var( --e-global-color-e29f488 );}.elementor-39831 .elementor-element.elementor-element-36b9c14:not(.elementor-search-form--skin-full_screen) .elementor-search-form--focus .elementor-search-form__input, .elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-search-form--focus .elementor-search-form__icon, .elementor-39831 .elementor-element.elementor-element-36b9c14 .elementor-lightbox .dialog-lightbox-close-button:hover, .elementor-39831 .elementor-element.elementor-element-36b9c14.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input:focus{color:var( --e-global-color-e29f488 );fill:var( --e-global-color-e29f488 );}.elementor-39831 .elementor-element.elementor-element-36b9c14:not(.elementor-search-form--skin-full_screen) .elementor-search-form__container{border-width:2px 2px 2px 2px;border-radius:14px;}.elementor-39831 .elementor-element.elementor-element-36b9c14.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{border-width:2px 2px 2px 2px;border-radius:14px;}@media(max-width:1024px){.elementor-39831 .elementor-element.elementor-element-a69d3cd{--padding-top:5px;--padding-bottom:5px;--padding-left:0px;--padding-right:0px;}.elementor-39831 .elementor-element.elementor-element-8b964f5{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-39831 .elementor-element.elementor-element-8674aea{--justify-content:space-between;}.elementor-39831 .elementor-element.elementor-element-e5925ab{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}body:not(.rtl) .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--layout-horizontal .pp-advanced-menu > li:not(:last-child){margin-right:26px;}body.rtl .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--layout-horizontal .pp-advanced-menu > li:not(:last-child){margin-left:26px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main:not(.pp-advanced-menu--layout-horizontal) .pp-advanced-menu > li:not(:last-child){margin-bottom:26px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--main > .pp-advanced-menu > li > .pp-advanced-menu--dropdown, .elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-advanced-menu--type-default .pp-advanced-menu__container.pp-advanced-menu--dropdown{margin-top:21px !important;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-hamburger .pp-hamburger-box{font-size:29px;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle{padding:7px 7px 7px 7px;}}@media(max-width:767px){.elementor-39831 .elementor-element.elementor-element-d3f8315{--flex-wrap:nowrap;}.elementor-39831 .elementor-element.elementor-element-e3ad7d2{--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-39831 .elementor-element.elementor-element-2be1b25{--min-height:65px;--justify-content:space-between;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-39831 .elementor-element.elementor-element-b1a3e2a{width:var( --container-widget-width, 104px );max-width:104px;--container-widget-width:104px;--container-widget-flex-grow:0;--icon-size:15px;--grid-row-gap:6px;}.elementor-39831 .elementor-element.elementor-element-b1a3e2a.elementor-element{--align-self:flex-start;}.elementor-39831 .elementor-element.elementor-element-44e1839 .elementor-heading-title{font-size:0.9rem;line-height:1.3rem;}.elementor-39831 .elementor-element.elementor-element-9a23811 .elementor-heading-title{font-size:0.9rem;line-height:1.3rem;}.elementor-39831 .elementor-element.elementor-element-a30ee2e > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-39831 .elementor-element.elementor-element-a30ee2e .elementor-button{padding:5px 8px 5px 8px;}.elementor-39831 .elementor-element.elementor-element-78c56f0{--flex-wrap:nowrap;}.elementor-39831 .elementor-element.elementor-element-4a7558a{--width:100%;}.elementor-39831 .elementor-element.elementor-element-8674aea{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--flex-wrap:nowrap;}.elementor-39831 .elementor-element.elementor-element-5674159 img{width:110px;}.elementor-39831 .elementor-element.elementor-element-631ba66 img{width:110px;}.elementor-39831 .elementor-element.elementor-element-e5925ab{--width:200px;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-39831 .elementor-element.elementor-element-3349df5{width:var( --container-widget-width, 31px );max-width:31px;--container-widget-width:31px;--container-widget-flex-grow:0;}.elementor-39831 .elementor-element.elementor-element-b82e9f6 .pp-menu-toggle .pp-hamburger .pp-hamburger-box{font-size:29px;}.elementor-39831 .elementor-element.elementor-element-36b9c14{width:var( --container-widget-width, 109px );max-width:109px;--container-widget-width:109px;--container-widget-flex-grow:0;}}@media(min-width:768px){.elementor-39831 .elementor-element.elementor-element-2be1b25{--width:50%;}.elementor-39831 .elementor-element.elementor-element-8674aea{--width:88%;}.elementor-39831 .elementor-element.elementor-element-e5925ab{--width:100%;}.elementor-39831 .elementor-element.elementor-element-14432e5{--width:12%;}}@media(max-width:1024px) and (min-width:768px){.elementor-39831 .elementor-element.elementor-element-2be1b25{--width:75%;}.elementor-39831 .elementor-element.elementor-element-8674aea{--width:100%;}.elementor-39831 .elementor-element.elementor-element-14432e5{--width:0%;}}/* Start custom CSS for container, class: .elementor-element-8b964f5 */.trp-language-switcher { padding: 2px !important; } .trp-language-item { padding: 0px; } .trp-language-item-name { font-family: 'Inter' !important; }/* End custom CSS */ /* Start custom CSS *//* ================================================================ MBF PROPOSED SUB-PAGE HEADER + MEGA MENU - LAB PAGE ONLY Rewritten clean 2026-09-01. Every rule is prefixed body.page-id-39713 so it cannot reach any other page. Colour spec is theme "two" (colour-coded) from the design preview: bright palette on the 4px column edges, which carry no text, and the DEEPENED values on anything that does. ================================================================ */ /* ---------- 1. THE HEADER SITS ON THE PHOTOGRAPH ---------- */ body.page-id-39713 #mbf-header{ position:absolute; top:0; left:0; right:0; z-index:30; background:transparent!important; padding-top:14px} /* The WordPress admin bar is fixed at the top of the window, so a header pinned to top:0 slides underneath it. Signed out this never showed. */ body.admin-bar.page-id-39713 #mbf-header{top:32px} @media screen and (max-width:782px){ body.admin-bar.page-id-39713 #mbf-header{top:46px}} body.page-id-39713 #mbf-header .elementor-divider, body.page-id-39713 #mbf-header .elementor-divider-separator{display:none!important} /* ---------- 2. WHITE ON THE PICTURE ---------- */ body.page-id-39713 #mbf-header a:not(.elementor-button), body.page-id-39713 #mbf-header .elementor-heading-title{color:#fff!important} body.page-id-39713 #mbf-header .elementor-icon{color:#fff!important;fill:#fff!important} body.page-id-39713 #mbf-header .elementor-social-icon i, body.page-id-39713 #mbf-header .elementor-social-icon svg{color:#fff;fill:#fff} /* Logo: the genuine white mark, lifted into the utility row so it reads as sitting at the top of the window. The lift is paired with the header's own padding-top above, so it rises relative to the nav without being clipped. */ body.page-id-39713 #mbf-header .elementor-element-5674159{display:block!important} body.page-id-39713 #mbf-header .elementor-element-5674159 img{ width:104px;height:auto;margin-top:-18px} /* ---------- 3. TOP-LEVEL NAV ---------- */ body.page-id-39713 .mbf-mega{--n-menu-heading-wrap:nowrap} body.page-id-39713 .mbf-mega .e-n-menu-title{white-space:nowrap} body.page-id-39713 .mbf-mega .e-n-menu-title-text{color:#fff!important} body.page-id-39713 .mbf-mega .e-n-menu-title:hover .e-n-menu-title-text{opacity:.78} body.page-id-39713 .mbf-mega .e-n-menu-title:focus-visible{ outline:2px solid #fff;outline-offset:4px;border-radius:3px} body.page-id-39713 #mbf-header .elementor-element-4a7558a, body.page-id-39713 #mbf-header .elementor-element-8674aea{ flex-wrap:nowrap!important;align-items:center!important} body.page-id-39713 #mbf-header .elementor-element-e5925ab{ flex-wrap:nowrap!important;align-items:center!important;margin-left:auto} /* ---------- 4. THE MEGA PANEL, per the design preview ---------- Full-bleed white with a 6px purple stripe down the left edge, a soft drop shadow, square corners, content wrapped to the page column. */ body.page-id-39713 #mbf-header .mega-panel{ background:linear-gradient(90deg,#934A9C 0 6px,#fff 6px)!important; box-shadow:0 18px 40px rgba(16,40,50,.16)!important; border-radius:0!important; padding:30px 24px 34px!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:flex-start!important; gap:44px!important} /* Fixed column widths, not equal shares. Two columns stretched across the full bar leaves a lake of white and reads as unfinished - the design preview carries the same note. */ body.page-id-39713 #mbf-header .mega-panel .mega-col{ flex:0 1 244px!important; width:auto!important; max-width:none!important; min-width:0; padding-left:16px; border-left:4px solid transparent} body.page-id-39713 #mbf-header .mega-panel .mega-col:nth-child(1){border-left-color:#934A9C} body.page-id-39713 #mbf-header .mega-panel .mega-col:nth-child(2){border-left-color:#A6CE3A} body.page-id-39713 #mbf-header .mega-panel .mega-col:nth-child(3){border-left-color:#F79C1E} /* Headings take the DEEPENED values. The bright palette measured 1.82:1 and 2.16:1 on white and failed badly; deepened they read 4.90 and 5.22. */ body.page-id-39713 #mbf-header .mega-panel .mega-col-head .elementor-heading-title{ font-family:Midiet,Rubik,system-ui,sans-serif; font-size:1.15rem;line-height:1.4rem;font-weight:700; text-transform:none;letter-spacing:normal;margin:0 0 6px} body.page-id-39713 #mbf-header .mega-panel .mega-col:nth-child(1) .mega-col-head .elementor-heading-title{color:#7A3B82!important} body.page-id-39713 #mbf-header .mega-panel .mega-col:nth-child(2) .mega-col-head .elementor-heading-title{color:#586F15!important} body.page-id-39713 #mbf-header .mega-panel .mega-col:nth-child(3) .mega-col-head .elementor-heading-title{color:#A05C00!important} /* The plain-English line under Programs. */ body.page-id-39713 #mbf-header .mega-panel .mega-intro, body.page-id-39713 #mbf-header .mega-panel .mega-intro-wrap *{ font-size:.82rem!important;line-height:1.45!important;color:#545454!important; margin:0 0 14px!important;max-width:34ch} /* Links are rounded pills on hover, pulled left so the text still aligns to the column edge at rest. */ body.page-id-39713 #mbf-header .mega-panel .mega-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} body.page-id-39713 #mbf-header .mega-panel .mega-list li{margin:0} body.page-id-39713 #mbf-header .mega-panel .mega-list a{ display:block;padding:7px 10px;margin-left:-10px;border-radius:8px; font-size:.95rem;line-height:1.3rem;font-weight:500; color:#101828!important;text-decoration:none; text-transform:none;letter-spacing:normal;border:0} body.page-id-39713 #mbf-header .mega-panel .mega-list a:hover{ background:#E2F1F5;color:#00819F!important} body.page-id-39713 #mbf-header .mega-panel .mega-list a:focus-visible{ outline:2px solid #00819F;outline-offset:2px;background:#E2F1F5;color:#00819F!important} /* ---------- 5. THE TITLE BAND ---------- */ body.page-id-39713 .page-header-band{position:relative;overflow:hidden} /* Measured scrim: dark across the left where the type sits, clearing to the right so the photograph still reads bright. Black only. */ body.page-id-39713 .page-header-band::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.64) 42%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.30) 100%)} body.page-id-39713 .page-header-band > *{position:relative;z-index:2} body.page-id-39713 .page-header-band h1, body.page-id-39713 .page-header-band h2, body.page-id-39713 .page-header-band .change-color, body.page-id-39713 .page-header-band .change-color *{color:#fff!important} body.page-id-39713 .page-header-band h1{max-width:20ch} body.page-id-39713 .page-header-band .right-text{max-width:52ch} body.page-id-39713 .page-content-container{padding-top:48px} /* ---------- 6. TABLET AND PHONE ---------- Floating the header over the photograph is a DESKTOP idea. Below 1025px the header is tall and stacked, so out of the flow it lands on the page title. Under that width it returns to the flow on a dark teal fill, which keeps the white mark and white type readable without the photograph behind them. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header{ position:static!important;background:#0F3E47!important; padding-top:6px;padding-bottom:10px} body.admin-bar.page-id-39713 #mbf-header{top:auto} body.page-id-39713 #mbf-header .elementor-element-5674159 img{ margin-top:0!important;width:92px!important} body.page-id-39713 .page-header-band{padding-top:48px!important} /* The drawer. Elementor stacks the items; this gives them real tap targets, a rule between them, and a panel that reads as nested rather than loose. */ body.page-id-39713 .mbf-mega .e-n-menu-wrapper{ background:#0F3E47;width:100%;padding:4px 0 10px} body.page-id-39713 .mbf-mega .e-n-menu-heading{flex-direction:column!important;width:100%} body.page-id-39713 .mbf-mega .e-n-menu-title{ width:100%;min-height:52px;padding:0 18px; border-bottom:1px solid rgba(255,255,255,.18); justify-content:space-between} body.page-id-39713 .mbf-mega .e-n-menu-title button{min-width:44px;min-height:44px} body.page-id-39713 #mbf-header .mega-panel{ flex-direction:column!important; background:#fff!important;border-left:6px solid #934A9C!important; box-shadow:none!important;padding:18px 18px 22px!important;gap:22px!important} body.page-id-39713 #mbf-header .mega-panel .mega-col{ flex:0 0 auto!important;width:100%!important;padding-left:12px} body.page-id-39713 #mbf-header .mega-panel .mega-list a{ padding:11px 10px;font-size:1rem} } @media (max-width:767px){ body.page-id-39713 .page-header-band{padding-top:36px!important;padding-bottom:24px!important} body.page-id-39713 .page-header-band h1{max-width:none;font-size:2rem;line-height:2.3rem} } /* ---------- 7. MOBILE STACKING AND DRAWER FILL ---------- Two real bugs found on the phone: 1. Section 6 set the header to position:static, which makes its z-index inert - so the page title band painted OVER the open drawer. It needs to stay in the flow but keep a layer, which is position:relative. 2. Elementor's drawer wrapper is transparent, so the photograph and the title band showed straight through the menu behind the panel. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header{position:relative!important;z-index:100!important} body.page-id-39713 .mbf-mega .e-n-menu-wrapper, body.page-id-39713 .mbf-mega .e-n-menu-heading{background:#0F3E47!important} body.page-id-39713 .mbf-mega .e-n-menu-content{background:#0F3E47!important} /* The top row is a stack on a phone, not a single line. The nowrap rules in section 3 are a desktop concern and were pushing Donate onto the logo. */ body.page-id-39713 #mbf-header .elementor-element-4a7558a, body.page-id-39713 #mbf-header .elementor-element-8674aea, body.page-id-39713 #mbf-header .elementor-element-e5925ab{ flex-wrap:wrap!important;row-gap:6px} body.page-id-39713 #mbf-header .elementor-element-e5925ab{margin-left:0} } /* Elementor gives each drawer row a WHITE background of its own on mobile, and our label text is white for the photograph - so the six menu items were white on white and simply invisible. The row takes the drawer fill instead. */ @media (max-width:1024px){ body.page-id-39713 .mbf-mega .e-n-menu-title{background:#0F3E47!important} body.page-id-39713 .mbf-mega .e-n-menu-title:hover, body.page-id-39713 .mbf-mega .e-n-menu-title:focus-within{background:#0C6881!important} } /* ---------- 8. THE NEGATIVE MARGIN ---------- The masthead's inner row carries margin-top:-25px in the live template. On desktop that is deliberate: it lifts the logo into the utility row. On a phone the two rows are already stacked, so the same -25px drags the logo up underneath the Donate button. Only the phone needs it neutralised. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .elementor-element-8674aea{margin-top:0!important} /* Drawer rows read left to right, and sit flush against each other. */ body.page-id-39713 .mbf-mega .e-n-menu-heading{gap:0!important;row-gap:0!important} body.page-id-39713 .mbf-mega .e-n-menu-title{justify-content:flex-start!important} } /* The drawer opens flush against the masthead, and the logo's lower strapline overflows its own row - so the first menu item clipped it. Give the masthead row room to finish before the drawer starts. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .elementor-element-ab7259b{padding-bottom:22px} } /* ================================================================ 9. CORRECTIONS FROM ERIC'S REVIEW, 2026-09-01 Measured against his mockup screen grab, not eyeballed. ================================================================ */ /* --- Logo: sub-pages knock the mark FULLY out to white. The homepage keeps the colour version; only the interior header drops it out. The asset already has a transparent background, so the filter is safe here - it was the OTHER logo file, which has an opaque background, that turned into a white slab. */ body.page-id-39713 #mbf-header .elementor-element-5674159 img{ filter:brightness(0) invert(1)} /* --- Page title. Stays an H1, which matters; the house `title` class does the sizing. Specced in rem, not the 35.2px the inspector reports. */ body.page-id-39713 .page-header-band h1.title, body.page-id-39713 .page-header-band .title h1, body.page-id-39713 .page-header-band .title .elementor-heading-title{ font-size:2.2rem;line-height:2.6rem;max-width:24ch} /* --- Nav sits LEFT, immediately after the logo, and shares the logo's baseline rather than floating in the middle of the row. */ body.page-id-39713 #mbf-header .elementor-element-8674aea{ align-items:flex-end!important;gap:40px!important} body.page-id-39713 #mbf-header .elementor-element-e5925ab{ margin-left:0!important;align-items:flex-end!important} body.page-id-39713 .mbf-mega .e-n-menu-heading{ justify-content:flex-start!important;align-items:flex-end!important;gap:30px!important} /* --- The search control is a white glyph on the photograph, not a black glyph in a white box. */ body.page-id-39713 #mbf-header .elementor-search-form__container, body.page-id-39713 #mbf-header .elementor-search-form__toggle, body.page-id-39713 #mbf-header .elementor-search-form input{ background:transparent!important;border:0!important;box-shadow:none!important} body.page-id-39713 #mbf-header .elementor-search-form__toggle, body.page-id-39713 #mbf-header .elementor-search-form__icon, body.page-id-39713 #mbf-header .elementor-search-form__submit{ color:#fff!important;fill:#fff!important;background:transparent!important} body.page-id-39713 #mbf-header .elementor-search-form__toggle i, body.page-id-39713 #mbf-header .elementor-search-form__toggle svg{color:#fff!important;fill:#fff!important} /* --- JOIN / RENEW. Deliberately protected in the client meeting: renewing must never get harder, so it sits outside the menu and does not move. */ body.page-id-39713 #mbf-header .join-btn .elementor-button{ background:#934A9C!important;color:#fff!important;border:0!important; font-family:Rubik,Inter,system-ui,sans-serif; font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:.72em 1.15em;border-radius:999px;white-space:nowrap;line-height:1} body.page-id-39713 #mbf-header .join-btn .elementor-button:hover{filter:brightness(1.08)} body.page-id-39713 #mbf-header .elementor-element-14432e5{ align-items:center!important;gap:16px!important} /* --- The line under each column heading. "Programs" is the Fair's own word, and a first-time visitor should not have to guess what it buys them. */ body.page-id-39713 #mbf-header .mega-panel .mega-blurb, body.page-id-39713 #mbf-header .mega-panel .mega-blurb-wrap *{ margin:0 0 14px!important;font-size:.82rem!important;line-height:1.45!important; color:#545454!important;max-width:34ch;font-weight:400!important} body.page-id-39713 #mbf-header .mega-panel .mega-col-head .elementor-heading-title{ margin:0 0 6px!important} /* --- The promo card. It fills the white space on the right, and it is where the secondary palette does real work rather than tint a label. */ body.page-id-39713 #mbf-header .mega-panel .mega-promo{ flex:0 0 260px!important;background:#F4F1F8;border-radius:14px;overflow:hidden; padding:0!important;border-left:0!important;align-self:flex-start} body.page-id-39713 #mbf-header .mega-promo .mega-promo-pic{margin:0} body.page-id-39713 #mbf-header .mega-promo .mega-promo-pic img{ display:block;width:100%;height:150px;object-fit:cover} body.page-id-39713 #mbf-header .mega-promo .mega-promo-text{padding:16px 18px 18px} body.page-id-39713 #mbf-header .mega-promo .mega-promo-body b{ display:block;font-family:Midiet,Rubik,system-ui,sans-serif; font-size:1.1rem;line-height:1.35rem;font-weight:700;color:#101828;margin-bottom:6px} body.page-id-39713 #mbf-header .mega-promo .mega-promo-body span{ display:block;font-size:.82rem;line-height:1.5;color:#344054;font-weight:400;margin-bottom:10px} body.page-id-39713 #mbf-header .mega-promo .mega-promo-body a{ display:block;font-size:.8rem;font-weight:600;color:#934A9C!important;padding:0;margin:0} body.page-id-39713 #mbf-header .mega-promo .mega-promo-body a:hover{background:none;text-decoration:underline} /* The promo sits beside the columns, so the panel spreads rather than bunching the three lists against the left edge. */ body.page-id-39713 #mbf-header .mega-panel{justify-content:flex-start!important} @media (max-width:1024px){ body.page-id-39713 #mbf-header .elementor-element-5674159 img{filter:brightness(0) invert(1)} body.page-id-39713 #mbf-header .mega-panel .mega-promo{ flex:0 0 auto!important;width:100%!important;margin-top:6px} body.page-id-39713 #mbf-header .elementor-element-8674aea{align-items:center!important} } /* ---------- 10. FITTING THE ROW, 2026-09-01 ---------- Six items at 1.5px tracking plus a 30px gap measured 1002px against 928px of room, so the last two wrapped onto a second line and landed on the page title. Tracking and gap both come down; the sum now fits with room to spare. The wrap variable has to be set ON the heading - Elementor re-declares it there, so defining it on an ancestor loses. */ body.page-id-39713 .mbf-mega .e-n-menu-heading{ --n-menu-heading-wrap:nowrap; flex-wrap:nowrap!important; gap:22px!important;column-gap:22px!important} /* The search glyph was WHITE ON A WHITE BACKGROUND - the icon element carries its own white fill from the theme, which reads as an empty white box on the photograph. Clearing the icon's own background is what fixes it; colouring the form around it does nothing. */ body.page-id-39713 #mbf-header .elementor-search-form__toggle i, body.page-id-39713 #mbf-header .elementor-search-form__toggle svg{ background:transparent!important;background-color:transparent!important; color:#fff!important;fill:#fff!important} /* ---------- 11. ERIC'S SECOND PASS, 2026-09-01 ---------- ITEM PADDING. Elementor ships each menu item with 16px left/right and 8px top/bottom of its own. That padding was doing two bad things: it inflated every item so the row ran out of space, and the 8px underneath stopped the labels tucking down onto the logo's baseline. House approach instead: zero the padding and let ITEM SPACING alone set the rhythm between items. */ body.page-id-39713 .mbf-mega .e-n-menu-title{padding:0!important} body.page-id-39713 .mbf-mega .e-n-menu-title-text{padding:0!important;margin:0!important} body.page-id-39713 .mbf-mega .e-n-menu-heading{gap:40px!important;column-gap:40px!important} /* TITLE WIDTH. It was capped at 24ch and broke to two lines constantly. Half the column gives it room to sit on one line in most cases. WATCH: the cap existed for a contrast reason - left to run the full width the title box reaches into the bright half of the photograph and measured 1.7:1. 50% keeps it inside the dark end of the scrim, but re-measure if the picture or the gradient changes. */ body.page-id-39713 .page-header-band h1.title, body.page-id-39713 .page-header-band .title .elementor-heading-title{ max-width:50%!important} /* BREATHING ROOM between the header row and the page title. */ body.page-id-39713 .page-header-band{padding-top:134px!important} @media (max-width:1024px){ body.page-id-39713 .page-header-band{padding-top:58px!important} body.page-id-39713 .page-header-band h1.title, body.page-id-39713 .page-header-band .title .elementor-heading-title{max-width:none!important} } /* TITLE WIDTH, corrected. `max-width:50%` was 50% of the title COLUMN, not of the page, so it only came out at 488px. Half the 1220 page column is 610px = 38.125rem, which is what "at least fifty percent of the overall width" means. Kept as a rem value, and capped rather than percentage-of-parent so it does not drift when the column changes. The old 24ch cap existed for a measured contrast reason: run full width, the title box reaches the bright half of the photograph and white type fell to 1.7:1. 610px ends around 49% across, where the scrim is still ~.60, so this is inside the safe zone. Re-measure before going wider. */ body.page-id-39713 .page-header-band h1.title, body.page-id-39713 .page-header-band .title .elementor-heading-title, body.page-id-39713 .page-header-band h1.elementor-heading-title{ max-width:min(100%,38.125rem)!important} /* ---------- 12. MOBILE SCRIM — MEASURED FAILURE, 2026-09-01 ---------- The desktop scrim runs HORIZONTALLY (100deg): dark on the left where the title sits, clearing to .22 by 76% across so the photograph stays bright on the right. On a 375px screen the title spans the FULL width, so it runs straight into that clear end. Measured worst case: 1.91:1 against the 3.0 WCAG needs for large text. A real failure, not a judgement call. Under 768px the scrim goes near-uniform instead. Maths from the design preview: over a near-white photograph you need alpha >= .42 for 3:1 and >= .54 for 4.5:1, so .62 -> .50 clears both with room. */ @media (max-width:767px){ body.page-id-39713 .page-header-band::after{ background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.56) 55%,rgba(0,0,0,.50) 100%)!important} } /* SPACING WAS BEING APPLIED TWICE, found by tools/space.js. Elementor implements its item-spacing control as a margin-right on each item. Our CSS `gap` was stacking on top of that, so the real distance between items was 80px, not 40, and the row required 990px against 919px available. It only looked right because `flex-wrap:nowrap` was holding it on one line while it overflowed. Let the widget's own item spacing do the work, as intended. */ body.page-id-39713 .mbf-mega .e-n-menu-heading{gap:0!important;column-gap:0!important} /* ---------- 13. SECOND REVIEW ROUND, 2026-09-01 ---------- THE HOVER GAP. The panel needs ~30px of air under the menu item, but the pointer has to be able to cross that air without the panel closing under it. Answer: the gap belongs to the PANEL'S OWN BOX, not to the space above it. The dropdown wrapper keeps touching the menu item and stays transparent for its first 30px; the white card starts below that. The mouse never leaves the element, so the panel never closes, and visually there is a 30px gap. */ body.page-id-39713 .mbf-mega .e-n-menu-content{background:transparent!important} body.page-id-39713 #mbf-header .mega-panel{margin-top:30px!important} /* CORRECTION: the 30px started as padding on the dropdown WRAPPER, which is present whether the menu is open or not - so it parked 30px of dead space under the nav permanently. Putting it on the PANEL instead means it only exists while the panel does, and because the wrapper is a flex container the panel's margin still counts toward the wrapper's height. The wrapper therefore reaches from the menu item down to the card, the pointer never leaves it on the way down, and the menu does not close under you. */ /* Each colour bar should stop at its own last item, not stretch to match the tallest column. Support the Fair has fewer entries, so its bar is shorter. */ body.page-id-39713 #mbf-header .mega-panel{align-items:flex-start!important} body.page-id-39713 #mbf-header .mega-panel .mega-col{align-self:flex-start!important} /* The hover pill was running right up to the next column's bar. Give each column room on its right so the pill finishes well clear of it. */ body.page-id-39713 #mbf-header .mega-panel .mega-col{padding-right:28px} /* Promo card to the mockup's width. */ body.page-id-39713 #mbf-header .mega-panel .mega-promo{ flex:0 0 316px!important;padding-right:0!important} /* With a 316px promo card on the right there is no lake of white left to guard against, so the three lists share what remains rather than sitting at a fixed 244px. At 244 minus the new right padding, "Sponsorship Opportunities" was wrapping to two lines. */ body.page-id-39713 #mbf-header .mega-panel .mega-col{flex:1 1 0!important} body.page-id-39713 #mbf-header .mega-panel .mega-promo{flex:0 0 316px!important} /* ---------- 14. THIRD REVIEW ROUND, 2026-09-01 ---------- The header sits hard against the top of the window. The 14px was added earlier only to stop the logo's negative lift clipping; the lift is smaller now, so the padding is not carrying anything and the mockup has the header tight to the top. */ body.page-id-39713 #mbf-header{padding-top:0!important} /* The heart, the search and Join / Renew belong on the same baseline as the main menu, not floated in the middle of the row. */ body.page-id-39713 #mbf-header .elementor-element-14432e5{ align-items:flex-end!important;align-self:flex-end!important} body.page-id-39713 #mbf-header .elementor-element-14432e5 > *{align-self:flex-end!important} /* OPTICAL, not mathematical. The heart / search / Join group is a TALLER box than the menu labels, so aligning their bottom edges is technically correct and still reads as sitting low. Eric tested -5px and that is what lands it where the eye expects. Do not "fix" this back to a clean 0. */ body.page-id-39713 #mbf-header .elementor-element-14432e5{margin-bottom:-5px!important} /* ---------- 15. UTILITY ROW FILLS, 2026-09-01 ---------- Both of these sit ON the photograph, so a flat opaque fill reads as a slab stuck on top of it. They take the identity teal and white at 90%, which lets just enough of the picture through to look like part of the header rather than something pasted over it. Donate was rendering solid black. */ body.page-id-39713 #mbf-header .elementor-element-a30ee2e .elementor-button{ background-color:rgba(12,104,129,.9)!important; border-color:rgba(12,104,129,.9)!important;color:#fff!important} body.page-id-39713 #mbf-header .elementor-element-a30ee2e .elementor-button:hover{ background-color:rgba(12,104,129,1)!important} /* The language switcher's own control, whatever markup TranslatePress gives it. */ body.page-id-39713 #mbf-header .elementor-element-8b964f5, body.page-id-39713 #mbf-header .elementor-element-8b964f5 .trp-language-switcher, body.page-id-39713 #mbf-header .elementor-element-8b964f5 .trp-ls-shortcode-current-language, body.page-id-39713 #mbf-header .elementor-element-8b964f5 .trp-ls-shortcode-language, body.page-id-39713 #mbf-header .elementor-element-8b964f5 select{ background-color:rgba(255,255,255,.9)!important} /* ================================================================ 16. MOBILE, REBUILT TO THE MOCKUP — 2026-09-01 Supersedes the earlier mobile rules. Appended last so it wins on source order rather than fighting the ones above with specificity. ================================================================ */ @media (max-width:1024px){ /* The header is the standard brand teal, not the darker shade. */ body.page-id-39713 #mbf-header{ position:relative!important;z-index:100!important; background:#0C6881!important;padding:0 0 10px!important} body.admin-bar.page-id-39713 #mbf-header{top:auto} /* --- Utility row: one line. The social icons come out on mobile, which is what frees the room for Login, the language switcher and Donate. --- */ body.page-id-39713 #mbf-header .elementor-element-b1a3e2a{display:none!important} body.page-id-39713 #mbf-header .elementor-element-2be1b25, body.page-id-39713 #mbf-header .elementor-element-e3ad7d2, body.page-id-39713 #mbf-header .elementor-element-a69d3cd, body.page-id-39713 #mbf-header .elementor-element-d3f8315{ flex-wrap:nowrap!important;align-items:center!important; row-gap:0!important;column-gap:10px!important} body.page-id-39713 #mbf-header .elementor-element-2be1b25{justify-content:flex-end!important} /* The language control is oversized by default and pushes Donate onto its own line. Tighten it and it sits alongside. */ body.page-id-39713 #mbf-header .elementor-element-8b964f5{flex:0 0 auto!important} body.page-id-39713 #mbf-header .trp-language-switcher, body.page-id-39713 #mbf-header .trp-ls-shortcode-current-language{ padding:4px 8px!important;font-size:13px!important;line-height:1.2!important; min-height:0!important;height:auto!important;border-radius:6px} body.page-id-39713 #mbf-header .trp-ls-shortcode-current-language{width:auto!important} body.page-id-39713 #mbf-header .elementor-element-a30ee2e .elementor-button{ padding:6px 12px!important;font-size:13px!important;line-height:1.2!important} /* --- Masthead row: logo | heart search Join | hamburger, all on one line. `display:contents` dissolves the intermediate wrapper so the logo, the tools group and the menu toggle all become siblings of one flex row and can be ORDERED. Without it the toggle is locked inside the logo's wrapper and cannot be moved to the far right. --- */ body.page-id-39713 #mbf-header .elementor-element-8674aea{display:contents!important} body.page-id-39713 #mbf-header .elementor-element-4a7558a{ display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important; align-items:center!important;justify-content:space-between!important; column-gap:10px!important} body.page-id-39713 #mbf-header .elementor-element-5674159{order:1;flex:0 0 auto} body.page-id-39713 #mbf-header .elementor-element-14432e5{ order:2;flex:0 0 auto;margin-bottom:0!important;margin-left:auto!important; align-items:center!important;column-gap:14px!important} body.page-id-39713 #mbf-header .elementor-element-e5925ab{ order:3;flex:0 0 auto;margin-left:0!important;align-items:center!important} /* The desktop copies of the heart and search live in the menu's own wrapper. On mobile the visible pair is the other one, so hide these or they double. */ body.page-id-39713 #mbf-header .elementor-element-a03e1a1, body.page-id-39713 #mbf-header .elementor-element-3349df5{display:none!important} /* Logo roughly twice the size it was. */ body.page-id-39713 #mbf-header .elementor-element-5674159 img{ width:150px!important;margin-top:0!important} /* Hamburger: white and bigger. */ body.page-id-39713 .mbf-mega .e-n-menu-toggle, body.page-id-39713 .mbf-mega .e-n-menu-toggle i, body.page-id-39713 .mbf-mega .e-n-menu-toggle svg{ color:#fff!important;fill:#fff!important;font-size:30px!important} body.page-id-39713 .mbf-mega .e-n-menu-toggle svg{width:30px!important;height:30px!important} /* --- The drawer is WHITE with dark type, not a dark slab. --- */ body.page-id-39713 .mbf-mega .e-n-menu-wrapper, body.page-id-39713 .mbf-mega .e-n-menu-heading, body.page-id-39713 .mbf-mega .e-n-menu-content{background:#fff!important} body.page-id-39713 .mbf-mega .e-n-menu-title{ background:#fff!important;width:100%;min-height:54px;padding:0 20px!important; border-bottom:1px solid #E4EAEC;justify-content:space-between!important; align-items:center!important} body.page-id-39713 .mbf-mega .e-n-menu-title:hover, body.page-id-39713 .mbf-mega .e-n-menu-title:focus-within{background:#F4F7F8!important} body.page-id-39713 .mbf-mega .e-n-menu-title button{ min-width:44px;min-height:44px;color:#101828!important} body.page-id-39713 .mbf-mega .e-n-menu-title button i, body.page-id-39713 .mbf-mega .e-n-menu-title button svg{color:#101828!important;fill:#101828!important} /* --- The open sub-panel is ONE stacked column, not three squeezed side by side, and each section keeps its colour bar. --- */ body.page-id-39713 #mbf-header .mega-panel{ flex-direction:column!important;flex-wrap:nowrap!important; background:#fff!important;border-left:0!important;box-shadow:none!important; margin-top:0!important;padding:6px 20px 18px!important; gap:0!important;row-gap:0!important} body.page-id-39713 #mbf-header .mega-panel .mega-col{ flex:0 0 auto!important;width:100%!important;max-width:none!important; padding:14px 0 14px 14px!important;border-left:4px solid transparent} /* Section labels read as small caps on a phone, per the mockup. */ body.page-id-39713 #mbf-header .mega-panel .mega-col-head .elementor-heading-title{ font-family:Rubik,Inter,system-ui,sans-serif!important; font-size:.72rem!important;line-height:1.1rem!important;font-weight:700!important; text-transform:uppercase!important;letter-spacing:.12em!important;margin:0 0 10px!important} /* The explanatory line is desktop furniture; the phone list is tighter without it. */ body.page-id-39713 #mbf-header .mega-panel .mega-blurb-wrap{display:none!important} body.page-id-39713 #mbf-header .mega-panel .mega-list a{ padding:11px 10px!important;margin-left:-10px;font-size:1rem!important} /* The promo card is a desktop device; it doubles the drawer's length on a phone. */ body.page-id-39713 #mbf-header .mega-panel .mega-promo{display:none!important} } /* ---------- 17. MOBILE MASTHEAD, CORRECTED ---------- I had the two icon pairs the wrong way round. There are TWO heart+search pairs in this header: 1486cf1/36b9c14 (the desktop pair, which the theme already hides on mobile) and a03e1a1/3349df5 (the mobile pair, living in the same wrapper as the menu toggle). I hid the mobile pair and left the hidden desktop pair alone, so both disappeared. Dissolving BOTH wrappers with display:contents makes the logo, heart, search, Join and toggle all siblings of one row, which is the only way to get them into the mockup's order: logo | heart search Join | hamburger. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .elementor-element-a03e1a1, body.page-id-39713 #mbf-header .elementor-element-3349df5{display:block!important} body.page-id-39713 #mbf-header .elementor-element-e5925ab{display:contents!important} body.page-id-39713 #mbf-header .elementor-element-5674159{order:1;flex:0 0 auto} body.page-id-39713 #mbf-header .elementor-element-a03e1a1{order:2;flex:0 0 auto;margin-left:auto} body.page-id-39713 #mbf-header .elementor-element-3349df5{order:3;flex:0 0 auto} body.page-id-39713 #mbf-header .elementor-element-14432e5{ order:4;flex:0 0 auto!important;width:auto!important;margin-left:0!important} body.page-id-39713 #mbf-header .mbf-mega{order:5;flex:0 0 auto} /* It is a tight row on a 375px screen, so the pieces are trimmed to fit. */ body.page-id-39713 #mbf-header .elementor-element-5674159 img{width:128px!important} body.page-id-39713 #mbf-header .join-btn .elementor-button{ padding:.6em .8em!important;font-size:.6rem!important} body.page-id-39713 #mbf-header .elementor-element-4a7558a{column-gap:8px!important} body.page-id-39713 #mbf-header .elementor-element-a03e1a1 .elementor-icon, body.page-id-39713 #mbf-header .elementor-element-3349df5 .elementor-search-form__toggle{ color:#fff!important;fill:#fff!important;font-size:20px!important} } /* Measured with tools/space.js at 375px: logo 128 + heart 20 + search 31 + hamburger 30 + Join 93 + four 8px gaps = 335 against exactly 335 available. No headroom at all, so sub-pixel rounding tipped Join onto a second line. Trim the logo and the gaps to buy real slack. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .elementor-element-5674159 img{width:104px!important} body.page-id-39713 #mbf-header .elementor-element-4a7558a{column-gap:6px!important} body.page-id-39713 #mbf-header .join-btn .elementor-button{ padding:.55em .7em!important;font-size:.56rem!important;letter-spacing:.06em!important} } /* It was never wrapping. The DESKTOP rule that bottom-aligns the heart/search/ Join group (and its -5px optical nudge) had no media query, so on a phone it dropped Join to the foot of a row made tall by the logo. It only looked like a second line. Centre it on mobile and drop the nudge, which is a desktop correction for a desktop problem. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .elementor-element-14432e5{ align-self:center!important;align-items:center!important;margin-bottom:0!important} body.page-id-39713 #mbf-header .elementor-element-14432e5 > *{align-self:center!important} } /* ---------- 18. DRAWER POSITION: LEAVE IT ALONE ---------- Four attempts at moving this made it worse each time, so the record matters. Elementor positions the drawer against the toggle and computes its `left` in JAVASCRIPT (a negative offset that pulls it back to the viewport edge). Overriding position, left, right or width breaks that computation and the drawer lands off the right of the screen. Re-anchoring it to the header makes it inherit the header's PADDED box, so it opens inset and clips the first item. Moving the toggle to the foot of the row leaves the JS offset stale. And it did not need solving: the drawer opening over the lower half of the logo is what Eric's own mockup does. Elementor's default is correct here. DO NOT "fix" this again without a screenshot showing a real problem. */ /* ================================================================ 19. PANELS NOW HAVE A ROW + A FOOT STRIP — 2026-09-01 The panel used to BE the row of columns. It is now a column holding .mega-row (the columns) and .mega-foot (the strip), so the layout rules move down one level. ================================================================ */ body.page-id-39713 #mbf-header .mega-panel{ flex-direction:column!important;flex-wrap:nowrap!important; align-items:stretch!important;padding:0!important;gap:0!important; background:linear-gradient(90deg,#934A9C 0 6px,#fff 6px)!important; box-shadow:0 18px 40px rgba(16,40,50,.16)!important;border-radius:0!important} body.page-id-39713 #mbf-header .mega-row{ display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important; align-items:flex-start!important;justify-content:flex-start!important; gap:44px!important;padding:30px 24px 34px!important} @media (max-width:1024px){ body.page-id-39713 #mbf-header .mega-row{ flex-direction:column!important;padding:6px 20px 10px!important;gap:0!important} } /* On a phone the panel's own 6px purple spine sits right beside the section bars and reads as a stray line. The section bars already carry the colour. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .mega-panel{background:#fff!important} } /* ================================================================ 20. MOBILE HEADER TIDY — 2026-09-01 ================================================================ */ @media (max-width:1024px){ /* Lift the logo into the top area rather than pushing the whole menu down. That also buys the drawer room to clear it. */ body.page-id-39713 #mbf-header .elementor-element-5674159 img{ margin-top:-36px!important} /* The controls were all different sizes and sitting at different heights. One size, one baseline, one row. The toggle becomes the X when the drawer is open, so it has to match too. */ body.page-id-39713 #mbf-header .elementor-element-a03e1a1, body.page-id-39713 #mbf-header .elementor-element-3349df5, body.page-id-39713 #mbf-header .elementor-element-14432e5, body.page-id-39713 #mbf-header .mbf-mega{ align-self:center!important;display:flex!important;align-items:center!important} body.page-id-39713 #mbf-header .elementor-element-a03e1a1 .elementor-icon, body.page-id-39713 #mbf-header .elementor-element-a03e1a1 .elementor-icon svg, body.page-id-39713 #mbf-header .elementor-element-3349df5 .elementor-search-form__toggle, body.page-id-39713 #mbf-header .elementor-element-3349df5 .elementor-search-form__toggle i, body.page-id-39713 #mbf-header .mbf-mega .e-n-menu-toggle, body.page-id-39713 #mbf-header .mbf-mega .e-n-menu-toggle i, body.page-id-39713 #mbf-header .mbf-mega .e-n-menu-toggle svg{ font-size:22px!important;width:22px!important;height:22px!important; line-height:22px!important;display:flex!important; align-items:center!important;justify-content:center!important; color:#fff!important;fill:#fff!important} /* The toggle needs a real tap target around that 22px glyph. */ body.page-id-39713 #mbf-header .mbf-mega .e-n-menu-toggle{ width:44px!important;height:44px!important;padding:0!important} body.page-id-39713 #mbf-header .elementor-element-a03e1a1 a, body.page-id-39713 #mbf-header .elementor-element-3349df5 .elementor-search-form__toggle{ min-width:34px;min-height:34px;display:flex!important; align-items:center!important;justify-content:center!important} body.page-id-39713 #mbf-header .join-btn .elementor-button{ display:inline-flex!important;align-items:center!important;line-height:1!important} } /* Raising the logo into the top area is the point, but on a phone the language control is a wide white box sitting where the logo now arrives, and white type behind a white box disappears. Shrink the control and lift the utility row clear rather than giving the lift back. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .trp-language-switcher, body.page-id-39713 #mbf-header .trp-ls-shortcode-current-language{ padding:3px 6px!important;font-size:12px!important;border-radius:5px} body.page-id-39713 #mbf-header .elementor-element-a69d3cd{ padding-top:2px!important;padding-bottom:0!important} body.page-id-39713 #mbf-header .elementor-element-2be1b25{ align-items:flex-start!important;padding-bottom:0!important} } /* ================================================================ 21. FROM A REAL PHONE — 2026-09-01 Measured on the device, not a resized desktop window. ================================================================ */ @media (max-width:1024px){ /* The language control is the biggest thing in the top row and the flag is doing no work. Drop the flag, tighten the rest. */ body.page-id-39713 #mbf-header .trp-flag-image, body.page-id-39713 #mbf-header .trp-language-switcher img{display:none!important} body.page-id-39713 #mbf-header .trp-language-switcher, body.page-id-39713 #mbf-header .trp-ls-shortcode-current-language{ padding:3px 8px 3px 6px!important;font-size:12px!important;line-height:16px!important; min-width:0!important;width:auto!important} body.page-id-39713 #mbf-header .trp-ls-shortcode-current-language a, body.page-id-39713 #mbf-header .trp-ls-shortcode-language a{padding:0!important} /* Join / Renew was sitting 12px high of the other three. Measured centres were heart 99, search 99, toggle 99, Join 87. */ body.page-id-39713 #mbf-header .join-btn{align-self:center!important;margin:0!important} body.page-id-39713 #mbf-header .join-btn .elementor-button{margin:0!important;vertical-align:middle} body.page-id-39713 #mbf-header .elementor-element-14432e5{align-items:center!important} /* THE DRAWER STARTS TOO HIGH, and that is also why the X reads white on white. Measured: drawer top 121, logo bottom 123 - it opened two pixels ABOVE the logo's bottom edge, so the white panel slid under the white X and clipped the strapline. Elementor's default is 30px below the toggle; 48px puts it about 15px clear of the logo, which is what Eric asked for. ONLY `top` is touched here. Elementor computes `left` in JavaScript and overriding it sends the drawer off the side of the screen. */ body.page-id-39713 #mbf-header .mbf-mega .e-n-menu-wrapper{top:48px!important} } /* Join / Renew sat 12px high because ITS container carries the same `margin-top:-25px` the template puts on the logo row. I neutralised that on the logo's wrapper earlier and missed this one. With align-items:center a negative top margin lifts the whole box by about half of it, which is exactly the 12px measured. */ @media (max-width:1024px){ body.page-id-39713 #mbf-header .elementor-element-14432e5{margin-top:0!important} /* 15px of daylight between the logo and the drawer, as asked. Measured: at top:48px the drawer opened 2px below the logo; 61px gives the 15px. */ body.page-id-39713 #mbf-header .mbf-mega .e-n-menu-wrapper{top:61px!important} } /* The bottom strip was BUILT at Eric's request on 2026-09-01 and REMOVED the same day at his request: "these mega menus are already dense enough, that also band is just too much." Both panels are long on a phone and the strip added another band under an already-tall list. The design preview still has it; this project deliberately does not. Do not re-add it. */ /* === TITLE BAND 2026-09-07 === */ body.page-id-39713 .page-header-band h1.title, body.page-id-39713 .page-header-band .title h1, body.page-id-39713 .page-header-band .title .elementor-heading-title, body.page-id-39713 .page-header-band h1.elementor-heading-title{ font-size:2.75rem!important;line-height:3.2rem!important} body.page-id-39713 .page-header-band{ min-height:18rem;justify-content:center} body.page-id-39713 .page-header-band .page-header, body.page-id-39713 .page-header-band .page-header > .e-con-inner, body.page-id-39713 .page-header-band .page-header-left{ justify-content:center} body.page-id-39713 .page-header-band .page-header-left > .elementor-widget:not(.title):has(> .elementor-widget-container:empty){ display:none} @media (max-width:767px){ body.page-id-39713 .page-header-band h1.title, body.page-id-39713 .page-header-band .title .elementor-heading-title, body.page-id-39713 .page-header-band h1.elementor-heading-title{ font-size:2rem!important;line-height:2.3rem!important} body.page-id-39713 .page-header-band{min-height:0} } /* === TITLE BAND CENTRING 2026-09-07b === */ body.page-id-39713 .page-header-band{ padding-top:7.1875rem!important;padding-bottom:0!important; min-height:18rem;justify-content:center} body.admin-bar.page-id-39713 .page-header-band{ padding-top:9.1875rem!important;min-height:20rem} @media screen and (max-width:782px){ body.admin-bar.page-id-39713 .page-header-band{padding-top:10rem!important} } @media (max-width:1024px){ body.page-id-39713 .page-header-band{ padding-top:2.25rem!important;padding-bottom:1.5rem!important;min-height:0} body.admin-bar.page-id-39713 .page-header-band{padding-top:2.25rem!important} } /* === TITLE BAND EMPTY CONTAINERS 2026-09-07c === */ body.page-id-39713 .page-header-band .page-header-left > .e-con:not(:has(.elementor-widget)), body.page-id-39713 .page-header-band .page-header-left > .e-con:not(:has(.e-con)):not(:has(*)){ display:none!important;margin:0!important} /* === HEADER LEFT + ACTIONS 2026-09-07d === */ body.page-id-39713 .page-header-band .page-header, body.page-id-39713 .page-header-band .page-header > .e-con-inner, body.page-id-39713 .page-header-band .page-header-left{ justify-content:flex-start!important} body.page-id-39713 .page-header-band .page-header-left{ width:100%!important;display:grid!important; grid-template-columns:32.75rem minmax(0,1fr); column-gap:2.5rem;row-gap:0.9rem;align-items:start;justify-items:start} body.page-id-39713 .page-header-band .page-header-left > *{grid-column:1} body.page-id-39713 .page-header-band .page-header-left > .title{ grid-column:1/-1;justify-self:stretch} body.page-id-39713 .page-header-band .page-header-left > .page-header-actions{ grid-column:2;grid-row:2;align-self:center;margin-top:0!important; display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important; gap:0.75rem;width:auto!important} body.page-id-39713 .page-header-band h1.title, body.page-id-39713 .page-header-band .title h1, body.page-id-39713 .page-header-band .title .elementor-heading-title, body.page-id-39713 .page-header-band h1.elementor-heading-title{ max-width:57.1875rem!important} @media (max-width:1024px){ body.page-id-39713 .page-header-band .page-header-left{ display:flex!important;flex-direction:column!important} body.page-id-39713 .page-header-band .page-header-left > .page-header-actions{ margin-top:1.25rem!important;flex-wrap:wrap!important} } /* === HEADER ACTIONS ROW FIX 2026-09-07e === */ body.page-id-39713 .page-header-band .page-header-left{ grid-template-rows:auto auto auto auto!important;row-gap:0!important} body.page-id-39713 .page-header-band .page-header-left > .title{ grid-column:1/-1!important;grid-row:1!important} body.page-id-39713 .page-header-band .page-header-left > .page-header-actions{ grid-column:2!important;grid-row:2/-1!important;align-self:center!important} body.page-id-39713 .page-header-band .page-header-left > .elementor-widget-text-editor{ margin-top:0.75rem!important} @media (max-width:1024px){ body.page-id-39713 .page-header-band .page-header-left > .page-header-actions{ grid-column:1!important;grid-row:auto!important} } /* === HEADER BAND HEIGHT 2026-09-07f === */ body.page-id-39713 .page-header-band{min-height:20rem} body.admin-bar.page-id-39713 .page-header-band{min-height:22rem} @media (max-width:1024px){ body.page-id-39713 .page-header-band, body.admin-bar.page-id-39713 .page-header-band{min-height:0} } /* === HEADER BUTTONS AS CARDS 2026-09-07g === */ body.page-id-39713 .page-header-band{min-height:18rem} body.admin-bar.page-id-39713 .page-header-band{min-height:20rem} body.page-id-39713 .page-header-actions .elementor-button{ background-color:rgba(10,26,32,.55)!important; border:1px solid rgba(255,255,255,.28)!important; border-radius:14px!important; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); color:#fff!important; padding:12px 18px!important; transition:background-color .18s,border-color .18s} body.page-id-39713 .page-header-actions .btn-solid-light .elementor-button{ border-color:rgba(255,255,255,.45)!important} body.page-id-39713 .page-header-actions .elementor-button:hover, body.page-id-39713 .page-header-actions .elementor-button:focus-visible{ background-color:rgba(10,26,32,.72)!important; border-color:rgba(255,255,255,.55)!important; color:#fff!important} body.page-id-39713 .page-header-actions .elementor-button-icon, body.page-id-39713 .page-header-actions .elementor-button-icon i, body.page-id-39713 .page-header-actions .elementor-button-icon svg{ color:#A6CE3A!important;fill:#A6CE3A!important} body.page-id-39713 .page-header-actions .elementor-button:hover .elementor-button-icon, body.page-id-39713 .page-header-actions .elementor-button:hover .elementor-button-icon i{ color:#B9DC57!important} /* === HEADER TIGHTEN + ARROW HUES 2026-09-07h === */ body.page-id-39713 .page-header-band{ padding-top:5.3125rem!important;min-height:16rem} body.admin-bar.page-id-39713 .page-header-band{ padding-top:7.3125rem!important;min-height:18rem} body.page-id-39713 .page-header-band .page-header-left > .elementor-widget-text-editor{ margin-top:0.375rem!important} body.page-id-39713 .page-header-actions .elementor-button, body.page-id-39713 .page-header-actions .btn-solid-light .elementor-button{ border-color:rgba(255,255,255,.28)!important} body.page-id-39713 .page-header-actions .elementor-button:hover, body.page-id-39713 .page-header-actions .elementor-button:focus-visible{ background-color:rgba(10,26,32,.80)!important; border-color:rgba(255,255,255,.72)!important} body.page-id-39713 .page-header-actions .elementor-button-icon{ transition:transform .18s ease,color .18s ease;will-change:transform} body.page-id-39713 .page-header-actions .elementor-button:hover .elementor-button-icon{ transform:translateX(4px)} body.page-id-39713 .page-header-actions .btn-solid-light .elementor-button-icon, body.page-id-39713 .page-header-actions .btn-solid-light .elementor-button-icon i, body.page-id-39713 .page-header-actions .btn-solid-light .elementor-button-icon svg{ color:#D7B3E0!important;fill:#D7B3E0!important} body.page-id-39713 .page-header-actions .btn-outline-light .elementor-button-icon, body.page-id-39713 .page-header-actions .btn-outline-light .elementor-button-icon i, body.page-id-39713 .page-header-actions .btn-outline-light .elementor-button-icon svg{ color:#E3BE93!important;fill:#E3BE93!important} body.page-id-39713 .page-header-actions .btn-solid-light .elementor-button:hover .elementor-button-icon, body.page-id-39713 .page-header-actions .btn-solid-light .elementor-button:hover .elementor-button-icon i{ color:#E6CFEC!important} body.page-id-39713 .page-header-actions .btn-outline-light .elementor-button:hover .elementor-button-icon, body.page-id-39713 .page-header-actions .btn-outline-light .elementor-button:hover .elementor-button-icon i{ color:#F0D6B4!important} @media (prefers-reduced-motion:reduce){ body.page-id-39713 .page-header-actions .elementor-button-icon{transition:color .18s ease} body.page-id-39713 .page-header-actions .elementor-button:hover .elementor-button-icon{transform:none} } /* === HEADER LIFT, MEASURED 2026-09-07i === */ body.page-id-39713 .page-header-band{ padding-top:7rem!important;min-height:16.5rem} body.admin-bar.page-id-39713 .page-header-band{ padding-top:9rem!important;min-height:18.5rem} @media (max-width:1024px){ body.page-id-39713 .page-header-band, body.admin-bar.page-id-39713 .page-header-band{ padding-top:2.25rem!important;min-height:0} } /* === DESCRIPTION INNER MARGIN 2026-09-07j === */ body.page-id-39713 .page-header-band .page-header-left > .elementor-widget-text-editor > .elementor-widget-container{ margin-top:0!important} /* === HEADER FINAL TIGHTEN 2026-09-07k === */ body.page-id-39713 .page-header-band .page-header-left > .elementor-widget-text-editor p:last-child{margin-bottom:0!important} body.page-id-39713 .page-header-band{min-height:14.5rem} body.admin-bar.page-id-39713 .page-header-band{min-height:16.5rem} @media (max-width:1024px){ body.page-id-39713 .page-header-band, body.admin-bar.page-id-39713 .page-header-band{min-height:0} } /* === BAND PADDING SHIFT 2026-09-07l === */ body.page-id-39713 .page-header-band{ padding-top:5.75rem!important;padding-bottom:1.25rem!important} body.admin-bar.page-id-39713 .page-header-band{ padding-top:7.75rem!important;padding-bottom:1.25rem!important} @media (max-width:1024px){ body.page-id-39713 .page-header-band, body.admin-bar.page-id-39713 .page-header-band{ padding-top:2.25rem!important;padding-bottom:1.5rem!important} } /* ================================================================ ACCESSIBILITY PASS - 2026-09-07 MBF-A11Y START ---------------------------------------------------------------- Audited live against WCAG 2.2 AA with real keyboard and pointer input, and with per-pixel contrast measured against the actual photograph under the actual scrim - not eyeballed. TESTED AND CORRECT. DO NOT "FIX" THESE: - Enter and Space open a panel, Tab moves into the panel links, Escape closes it AND returns focus to the trigger button. - The pointer CAN cross the 30px gap into the panel without it closing (1.4.13 Hoverable PASSES) and Escape dismisses a hover-opened panel without moving the pointer (Dismissible PASSES). The `margin-top:30px` on .mega-panel is what makes the wrapper span the gap - leave it alone. - aria-expanded / aria-controls / aria-labelledby are correct, and the accessible name swaps "Open X" <-> "Close X" because the inactive caret span is display:none. - Mobile: 44x44 toggle, Escape closes the drawer and returns focus to it. Landmark, skip-link and ARIA fixes are NOT here - they are DOM changes and live in WPCode snippet 39780. ================================================================ */ /* ---------- A11Y-1. TARGET SIZE (WCAG 2.2 SC 2.5.8, 24x24) ---------- Measured at 1440px: the dropdown caret is 12x18, and it is the ONLY control that opens a panel for a keyboard, switch or touch user. The top-level labels are 18px tall. Both sit inside each other's 24px spacing circle, so the SC 2.5.8 spacing exception does not rescue either of them. (Passing already, on the spacing exception, and therefore NOT touched: the six social icons at 17x17 on 27px centres, the logo link, and Login - nothing else comes within 24px of them.) Every rule below grows the HIT AREA ONLY, through a pseudo-element, so no layout moves: Eric's zero-padding / item-spacing rhythm and the hand-tuned 111px baseline alignment are untouched. Check any change here with getBoundingClientRect, never by eye. */ body.page-id-39713 #mbf-header .e-n-menu-dropdown-icon{position:relative} body.page-id-39713 #mbf-header .e-n-menu-dropdown-icon::after{ content:"";position:absolute;top:50%;left:50%; width:26px;height:26px;transform:translate(-50%,-50%)} body.page-id-39713 #mbf-header .e-n-menu-title-container{position:relative} body.page-id-39713 #mbf-header .e-n-menu-title-container::before{ content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px} /* ---------- A11Y-2. FOCUS VISIBILITY OVER A PHOTOGRAPH ---------- The header shipped the browser default ring (outline:auto 1px), which is not reliably visible on a busy picture. White ring plus a dark halo reads on the photograph; inside the white mega panel the same ring is inverted so it reads there too. :focus-visible, so a mouse click never draws it. */ body.page-id-39713 #mbf-header a:focus-visible, body.page-id-39713 #mbf-header button:focus-visible, body.page-id-39713 #mbf-header [role="button"]:focus-visible{ outline:3px solid #fff!important; outline-offset:2px!important; box-shadow:0 0 0 6px rgba(0,0,0,.72)!important; border-radius:2px} body.page-id-39713 #mbf-header .mega-panel a:focus-visible{ outline:3px solid #00819F!important; outline-offset:2px!important; box-shadow:0 0 0 6px rgba(255,255,255,.95)!important} /* ---------- A11Y-3. CONTRAST OVER THE PHOTOGRAPH - MEASURED ---------- Method: draw the real background photo into a canvas at the rendered size, compute the ACTUAL 100deg scrim alpha per pixel from the gradient geometry (do NOT hardcode the stops or you measure the old value), composite over black, measure WCAG contrast against white. Worst pixel under each label, 2026-09-07, 1440px, signed out. The labels are 12px / weight 500, so the bar is 4.5:1, not 3:1. The Fair 9.89 PASS Programs & Events 7.23 PASS 2026 Authors 6.37 PASS Stream Now 3.97 FAIL Become a Member 2.51 FAIL About Us 2.11 FAIL Login 2.07 FAIL Cause: the band scrim runs HORIZONTALLY (100deg) and deliberately clears to .22 by 76% across so the photograph reads bright on the right - and the right is exactly where the last three menu items and the whole utility row sit. The homepage lab fails the same way on its brightest slide (About Us 2.27, Login 2.22). Fix: a second scrim covering only the two header rows and fading out below them. The photograph keeps its bright right-hand side everywhere the header is not. IT MUST LIVE ON THE PICTURE LAYER, NOT ON THE HEADER. The first attempt put it on `#mbf-header::after`, and Eric caught it the same day: `#mbf-header` is `z-index:30` while the title band's own children are `z-index:2`, so EVERYTHING inside the header - a `z-index:-1` pseudo-element included - paints ON TOP of the page title. On this template the H1 starts at y=96 and the header row runs to y=118, so the top half of "Miami Book Fair 2026" was being veiled to grey. AND THE FIX IS NOT TO RAISE THE TITLE. Lifting the title above z-index 30 puts it above the whole header stacking context, so it would show through an OPEN MEGA PANEL - the panel drops to y=496 and the title sits at y=96-208, directly behind it. Put the scrim UNDER the text instead: on the sub-page template it rides the title band's own `::before` at z-index 1, below `.page-header-band > *` at 2; on the homepage template it rides the hero scrim layer's `::after`, also below the hero content at 2. One rule serves both, because each page has only one of those elements. RE-MEASURE after any change to the photograph, the gradient, the header height, or these stops. */ body.page-id-39713 .page-header-band::before, body.page-id-39713 .home-hero-scrim::after{ content:"";position:absolute;left:0;right:0;top:0; height:180px; background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.40) 60%, rgba(0,0,0,0) 100%); pointer-events:none; z-index:1} /* Signed in, the admin bar pushes the HEADER 32px down the picture but not the picture itself, so the scrim has to follow the header. */ body.page-id-39713.admin-bar .page-header-band::before, body.page-id-39713.admin-bar .home-hero-scrim::after{top:32px} /* Under 1025px the header leaves the overlay and sits on a solid #0F3E47 fill, so there is no photograph to fight and this scrim would only muddy the teal. */ @media (max-width:1024px){ body.page-id-39713 .page-header-band::before, body.page-id-39713 .home-hero-scrim::after{display:none} } /* ================================================================ MBF-A11Y END ================================================================ *//* End custom CSS */