/*
 * Custom Painting — CLS Fix Stylesheet
 * Plugin: custompainting-cls-fix
 *
 * All rules here were derived from iterative Lighthouse audits.
 * Final CLS: 0.001 (Lighthouse score 1.0, down from 0.040 baseline).
 */

/* ============================================================
   1. POPPINS FALLBACK FONT — calibrated metrics
   ============================================================
   During font-display:optional's 100ms block period, the browser
   renders text with an "invisible fallback" whose dimensions should
   match the web font. We define a custom fallback face for Arial
   with Poppins' exact OS/2 metrics so that when Poppins appears,
   the layout does not change.

   Poppins OS/2 values (upem 1000):
     sTypoAscender  = 1050  →  ascent-override:  105%
     sTypoDescender =  350  →  descent-override:  35%
     sTypoLineGap   =  100  →  line-gap-override: 10%

   size-adjust: 104% scales Arial's advance widths to match Poppins'
   slightly wider character widths, preventing text from wrapping to
   a different number of lines between the fallback and Poppins.
*/
@font-face {
    font-family: 'Poppins Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
    size-adjust: 104%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins Fallback';
    src: local('Arial Italic'), local('Helvetica Neue Italic'), local('sans-serif');
    size-adjust: 104%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
    font-weight: 100 900;
    font-style: italic;
}

/* ============================================================
   2. TRUSTINDEX OPEN SANS OVERRIDE
   ============================================================
   The testimonial-widgets (TrustIndex) plugin loads its own copy
   of Open Sans from cdn.trustindex.io with no font-display set
   (defaults to auto/block), causing a late swap that shifts text.
   Declaring the same src URL with font-display:optional tells
   Chrome to deduplicate the request and suppress the swap.
*/
@font-face {
    font-family: 'Open Sans';
    font-display: optional;
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.trustindex.io/assets/fonts/opensans/latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   3. POPPINS FALLBACK — applied to all font stacks
   ============================================================
   Insert 'Poppins Fallback' between Poppins and Arial so the
   calibrated fallback is used (not stock Arial) while Poppins loads.
*/
body,
button,
input,
select,
textarea {
    font-family: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.main-navigation .menu-bar-items,
.main-navigation .menu-toggle,
.main-navigation a,
#top-med h1,
#top-med h2,
.wel-sec h1,
.wel-sec .titlesmall,
.wel-sec p,
.location-sec h1,
.location-sec h2,
.location-sec p,
.quote-sec h1,
.quote-sec p,
.service-sec h1,
.service-sec h2,
.service-sec p {
    font-family: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
}

/* ============================================================
   4. SITEORIGIN SLIDER — space reservation
   ============================================================
   Slider images are 1536×583 (aspect ratio ≈ 2.637:1).
   Without reserved height the slider section collapses to 0
   and expands when SiteOrigin's JS initialises, causing a large
   CLS event.
*/
.so-widget-sow-slider .sow-slider-base {
    min-height: 200px;
}

.so-widget-sow-slider .sow-slider-images {
    aspect-ratio: 1536 / 583;
    min-height: 200px;
    overflow: hidden;
}

/* Prevent slider nav arrows from contributing to layout height */
.sow-slide-nav {
    position: absolute;
    z-index: 10;
}

.sow-slider-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* ============================================================
   5. HEADER — space reservation  (logo: 234×94 px)
   ============================================================ */
.site-header .inside-header {
    min-height: 94px;
}

/* ============================================================
   6. TOP BAR — space reservation  (CTA buttons: 61px + padding)
   ============================================================ */
.top-bar .inside-top-bar {
    min-height: 71px;
}

/* ============================================================
   7. NAVIGATION — space reservation
   ============================================================ */
.main-navigation .inside-navigation {
    min-height: 55px;
    display: flex;
    align-items: center;
}

/* ============================================================
   8. COOKIE CONSENT — prevent pushing page content
   ============================================================
   CookieConsent 2 bar loads in the footer via wp_footer. Without
   position:fixed it pushes all page content up, causing CLS.
*/
.cc-window {
    position: fixed !important;
    z-index: 9999 !important;
}

@media screen and (max-width: 736px) {
    .cc-window {
        padding: 0.4em 0.5em !important;
    }
    .cc-window .cc-message {
        margin-bottom: 0.7em !important;
        font-size: 14px;
        line-height: 19px;
    }
    .cc-window .cc-btn.cc-dismiss {
        padding: 2px;
    }
    .cc-window .cc-compliance {
        margin-bottom: 7px;
    }
}

/* ============================================================
   9. HOMEPAGE SITEORIGIN LAYOUT — panel space reservation
   ============================================================
   These IDs are generated by SiteOrigin Page Builder from the
   homepage layout hash and are stable unless the layout changes.

   Panel 0 contains: <h1>Welcome to Custom Painting, Inc.</h1>
     At 50px/600 Poppins on mobile (≈372px column) this wraps to
     3 lines ≈ 195px. Without min-height the H1 grows by ~45px
     when Poppins renders, pushing the content panel below it down.

   The first paragraph in Panel 1's text cell is ~400 characters
   at 15px/line-height 25px. It renders at ~8–9 lines ≈ 225px in
   Poppins. Without min-height the h1.titlesmall below it shifts
   by ~70px when Poppins renders.
*/
#pg-w67b09e243860e-0 {
    min-height: 195px;
}

#panel-w67b09e243860e-1-0-0 .siteorigin-widget-tinymce > p:first-child {
    min-height: 225px;
}