/* ===== FF OD mobile menu parity ========================================= Rebuilt from measurements taken against the Open Design at 390px. Every value here was READ off the OD, not designed. Defects this fixes on /v2: drawer background transparent -> rgb(255,255,255) link colour rgb(204,51,102) -> rgb(37,37,37) (pink default) row dividers none -> 1px solid rgb(226,226,226) Products/Services 15px -> 17px/600 + flex space-between Call us button no border -> 1px solid rgb(0,0,0) Get A Quote no fill -> rgb(251,133,0) drawer top border none -> 1px solid rgb(226,226,226) Scope: html body header .only-mobile (0,1,3) - beats the Elementor kit's body-level link colour without !important on the structural properties. ======================================================================== */ @media (max-width: 880px) { /* burger toggle: OD's inline style says #D4D4D4 but its "brand black header" rule overrides the computed border to rgb(84,89,95) - matched here. Source: header [data-od-id="mobile-menu-toggle"]{border-color:#54595F!important} !important is required because the value sits in the button's INLINE style, which no stylesheet selector can outrank. OD uses !important for the same reason. Padding 1px 6px is also measured off the OD. */ html body header [data-od-id="mobile-menu-toggle"]{ border-color:rgb(84,89,95) !important; padding:1px 6px !important;} html body header .only-mobile{ background:rgb(255,255,255); border-top:1px solid rgb(226,226,226); padding:14px 24px 22px;} /* nav rows --------------------------------------------------------------- NOTE on specificity: the OD chrome sheet already ships @media(max-width:880px){.sw-services-trigger{font-size:17px;...}} but it is injected into while this sheet is enqueued, so on equal specificity the LATER one used to win and Products/Services stayed 15px. Adding the class to the selector raises specificity so order stops mattering. */ html body header .only-mobile nav > a, html body header .only-mobile nav > button, html body header .only-mobile nav > button.sw-services-trigger{ color:rgb(37,37,37); font-family:Inter,system-ui,sans-serif; font-size:17px; font-weight:600; padding:13px 0; border-bottom:1px solid rgb(226,226,226); border-radius:0; background:transparent; text-decoration:none; width:100%; /* OD measured: computed line-height 27.54px at font-size 17px = 1.62. 1.65 gave 28.05px, which added 0.5px per row and accumulated into a 2.1px drawer-height drift by the last row. */ line-height:1.62;} /* Products / Services carry a chevron, so they are flex rows. font-size needs !important here: the OD chrome sheet ships `@media(max-width:880px){.sw-services-trigger{font-size:17px}}` AND an unscoped `.sw-services-trigger{font-size:15px}`; the chrome sheet is injected into after this enqueued sheet, so on font-size alone the 15px rule was winning on source order. Every other property here lands normally - only this one declaration needs the override. */ html body header .only-mobile nav > button, html body header .only-mobile nav > button.sw-services-trigger{ display:flex; align-items:center; justify-content:space-between; text-align:left; font-size:17px !important; /* same source-order problem as font-size: the chrome sheet's unscoped .sw-services-trigger rule re-declares these, so pin them here too. OD measured: padding 13px 0, border-bottom 1px solid rgb(226,226,226). */ padding:13px 0 !important; border-bottom:1px solid rgb(226,226,226) !important; border-left:0;border-right:0;border-top:0; cursor:pointer; appearance:none; -webkit-appearance:none;} html body header .only-mobile nav > a{display:block;} html body header .only-mobile nav > a .sc-interp, html body header .only-mobile nav > button .sc-interp{color:inherit;} html body header .only-mobile nav > a:hover, html body header .only-mobile nav > button:hover{color:rgb(218,115,0);} /* the two CTAs at the bottom of the drawer ------------------------------- NOTE: unlike the desktop header, these mobile CTAs carry NO class at all (measured: className === ""). They are the two children of the div that follows the