/* KWA 2026-09-08: CLS fix - reserve space for lazy-loaded / unsized images.
   Rusty-approved Lighthouse work. Reversible: delete this file + its enqueue in functions/enqueues.php.
   These images previously had no width/height and were NitroPack-lazy-loaded,
   so no box was reserved and layout jumped (CLS). aspect-ratio + defined width
   reserves the box before the image paints. Display sizes match existing header.php inline CSS. */

/* Header logo (Phone-Number.svg, natural ratio 300x92) */
.header-logo{height:auto;aspect-ratio:300/92;}

/* LawPay badge (228x86). Keep existing height-driven sizing; reserve ratio so no jump. */
.lawpay-btn img,.lawpay-mobile-bar img{aspect-ratio:228/86;}

/* Practice-area SVG icons in WPBakery vc_single_image blocks.
   SVGs shipped with no width/height attrs -> zero intrinsic size until parsed.
   Give them a defined display width + intrinsic ratio so the box is reserved. */
.crimanal-img .vc_single_image-img,
.wpb_single_image .vc_single_image-img[src$=".svg"]{
  height:auto;
}
/* Reserve ratio per icon (viewBox-derived) so lazy load does not shift layout */
.wpb_single_image img[src*="Criminal.svg"]{aspect-ratio:203/225;}
.wpb_single_image img[src*="Civil.svg"]{aspect-ratio:192/185;}
.wpb_single_image img[src*="Personal.svg"]{aspect-ratio:192/185;}
.wpb_single_image img[src*="Malpractice.svg"]{aspect-ratio:192/185;}
.wpb_single_image img[src*="Estate.svg"]{aspect-ratio:192/185;}
.wpb_single_image img[src*="Probate.svg"]{aspect-ratio:192/185;}
.wpb_single_image img[src*="Business.svg"]{aspect-ratio:192/185;}

/* Generic safety net: any WPBakery single image that lacks explicit dimensions
   keeps its natural aspect ratio computed by the browser instead of collapsing. */
.wpb_single_image .vc_single_image-img{max-width:100%;}

/* KWA 2026-09-08 part 2: reserve space for JS-initialized header elements to cut CLS.
   These are additive min-heights only (do NOT hide interactive elements), safe + reversible.
   Measured settled heights at tablet/mobile header: lawpay bar 61px, DL trigger ~45px. */
.lawpay-mobile-bar{min-height:61px;}
.dl-menuwrapper{min-height:45px;}
@media (max-width:400px){.lawpay-mobile-bar{min-height:54px;}}

/* DLMenu FOUC: the .dl-menu <ul> renders in-flow (tall) before DLMenu JS/CSS positions it
   absolutely, then collapses -> large layout shift. Take it out of flow immediately so the
   collapse cannot push page content. This matches DLMenu's own initialized state
   (position:absolute) and does not change menu behavior once JS runs. */
.dl-menuwrapper .dl-menu{position:absolute;}

/* KWA 2026-09-08 part 3 (cls2 pass): eliminate the remaining desktop+mobile shifts.
   Measured with the LayoutShift API on cold loads (desktop CLS spiked to ~0.77,
   mobile ~0.94). Two additive, reversible fixes. Backup: css/kwa-cls.css.bak-kwa-cls2-20260908. */

/* (1) MOBILE root cause: DLMenu FOUC.
   The theme ships `.no-js .dl-menuwrapper .dl-menu{position:relative}` (specificity 0,3,0),
   which OUT-SPECIFIES the part-2 rule `.dl-menuwrapper .dl-menu{position:absolute}` (0,2,0).
   Result: on the first paint (html still has the `no-js` class before Modernizr swaps it),
   the full mobile menu <ul> renders IN FLOW at ~870px tall, inflating the header to ~1028px,
   then collapses to ~136px when JS runs -> ~892px layout shift.
   Fix: match/beat that specificity so the menu is out of flow from frame 1, in every JS state.
   This only changes the pre-JS paint; DLMenu's initialized state is already position:absolute. */
html.no-js .dl-menuwrapper .dl-menu,
html.js   .dl-menuwrapper .dl-menu{position:absolute;}

/* (2) DESKTOP: the .innerwrpcontent hero card uses margin-top:-50px to tuck up under the
   absolute header. Reinforce that exact geometry here (in the same enqueued file) so the
   box is reserved identically and a late-applied bundle cannot re-pull it. Values copied
   verbatim from the theme's own inline critical CSS (no visual change). */
.innerwrpcontent{margin-top:-50px;padding-top:50px;}
@media (max-width:767.98px){
  .innerwrpcontent{margin-top:0;padding-top:20px;}
}

/* KWA 2026-09-08 part 4 (cls2 pass): contain residual desktop reflow.
   Optimized-page desktop CLS sat ~0.12-0.14; dominant residual is the Max Mega Menu bar
   and hero row settling in the first paint frames (webfont/JS init). Reserve their measured
   settled heights so the early frames do not collapse then expand. Additive + reversible. */

/* Max Mega Menu bar: settles at 76px on desktop. Reserve it so MMM init cannot shift it. */
@media (min-width:992px){
  .mega-menu-wrap,
  #mega-menu-wrap-primary{min-height:76px;}
}

/* KWA 2026-09-08 part 5 (font-preload pass): desktop hero web-font reflow.
   The remaining desktop CLS (~0.115, measured via LayoutShift API) was the fallback->webfont
   SWAP re-wrapping the multi-line Montserrat-700 hero body copy (+1 line = ~52px), which
   pushed content below down ~53px. Handled in PHP (functions/enqueues.php), NOT here:
   (1) header.php Google Fonts link switched display=swap -> display=optional
       => the browser never swaps mid-view, so no reflow (zero CLS from fonts).
   (2) kwa_hero_font_preload() preloads the exact latin-400 Bitter + Montserrat woff2 used
       above the fold => the brand fonts arrive inside optional's block window on normal
       loads, so they still render (no persistent fallback, no flash).
   No CSS rule needed; this note documents the pass. Fully reversible (see enqueues.php). */

/* KWA 2026-09-08 part 6 (font-preload pass, NitroPack-surviving override):
   NitroPack inlines its own <style id="nitro-fonts"> with @font-face for Bitter + Montserrat
   forced to font-display:swap, which re-introduces the hero swap reflow on the OPTIMIZED page
   (header.php display=optional is stripped by NitroPack). This enqueued file is merged into
   NitroPack's bundle AFTER nitro-fonts, so re-declaring the SAME faces here with
   font-display:optional makes the last-declared face win => no swap => no reflow, while the
   preloaded latin woff2 means the brand font still renders (no flash). URLs + unicode-ranges
   copied verbatim from NitroPack's own nitro-fonts output (no new downloads).
   Reversible: delete this block. */
@font-face{font-family:'Bitter';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLXOXXpzveS5B3Nd.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLzOXXpzveS5B3Nd.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLfOXXpzveS5B3Nd.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLbOXXpzveS5B3Nd.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOXXpzveS5Bw.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXp-p7K4KLjztg.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw9aXp-p7K4KLjztg.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw2aXp-p7K4KLjztg.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXp-p7K4KLjztg.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:optional;src:url('https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXp-p7K4KLg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}