/*
 * Paint stability.
 *
 * Divi delivers module design CSS and animation behavior late (deferred
 * stylesheets, footer scripts), so elements briefly render unstyled, hidden,
 * or in the wrong place. Each block below pins one of those elements to its
 * final state in render-blocking CSS: entrance/scroll/waypoint pre-hides,
 * the icon font, header geometry, and scroll-revealed rows.
 */

/*
 * Entrance animations are disabled: Divi holds animated elements at opacity 0
 * until its animation script initializes, which on throttled devices means
 * content paints with holes (or flashes and vanishes) and the LCP element
 * waits on the whole script chain. Delete this block to restore the fades.
 */
.et_animated {
    opacity: 1 !important;
    animation: none !important;
}

/* Same idea for scroll/motion effects: their script pre-hides elements
   (et-pb-before-scroll-animation) while it computes positions, which blanks
   already-painted content. The effects still run; the pre-hide does not. */
.et-pb-before-scroll-animation.et-pb-before-scroll-animation {
    opacity: 1;
    visibility: visible;
}

/* Third variant of the same mechanism: waypoint-triggered animations add
   et-waypoint (opacity 0 in Divi core CSS) to painted modules until the
   scroll trigger fires. Counters excluded, matching Divi's own selector. */
.et-waypoint:not(.et_pb_counters) {
    opacity: 1 !important;
}

/*
 * Icon glyphs are ETmodules codepoints mapped to ASCII letters; while the
 * font loads they render as those raw letters ("a" hamburger, "U" search).
 * font-display: block shows blank space instead until the font arrives
 * (which is preloaded, so the window is short).
 */
@font-face {
    font-family: 'ETmodules';
    src: url('../../Divi/core/admin/fonts/modules/all/modules.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.et-l--header .et_pb_icon .et-pb-icon {
    display: inline-block;
    /* Absolute size, not em: the module's 24px font-size arrives with the
       deferred page CSS, and until then Divi's 96px default applies — an
       em-based box balloons right along with it. If the header icon size
       ever changes in the builder, update it here too. */
    font-size: 24px !important;
    width: 24px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
}

/*
 * The header section is an absolute overlay (its positioning normally arrives
 * with Divi's deferred page CSS). Until those styles apply it sits in-flow and
 * pushes the page content down ~270px, then yanks it back up — a large layout
 * shift on every page. Declaring the final positioning here, in render-blocking
 * CSS, keeps the header out of flow from the very first layout.
 * param-header-bar / param-header-menu-row are CSS Classes set on the Theme
 * Builder header layout's section and row.
 */
.et-l--header .param-header-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 100;
    /* The bar's black also normally arrives with the deferred CSS — without
       this it flashes white until those styles land */
    background: #000;
}

/* The menu row settles at 57px (menu-link padding + text size); pinning it
   keeps whatever reflows inside the bar from moving the bar itself.
   No overflow:hidden — the dropdown submenus hang below the row. */
@media (min-width: 981px) {
    .et-l--header .param-header-menu-row,
    .et-l--header .param-header-menu-row .et_pb_menu,
    .et-l--header .param-header-menu-row .et_pb_menu_inner_container {
        height: 57px !important;
    }
}

/*
 * The menu's layout CSS arrives with the deferred page styles; until it
 * lands the nav paints as an unstyled vertical list and the dropdown
 * submenus paint expanded. These declare the settled state (flex row,
 * submenus hidden/absolute, mobile nav hidden on desktop) at low
 * specificity so Divi's own rules — including the hover reveal — override
 * by document order once they load.
 */
.et-l--header .param-header-menu-row ul.et-menu {
    display: flex;
    flex-wrap: wrap;
}
.et-l--header .param-header-menu-row ul.et-menu > li,
.et-l--header .param-header-menu-row ul.et-menu > li > a {
    display: flex;
}
/* Selector mirrors Divi's own base hide rule exactly, so its hover
   reveal (.nav li:hover>ul, higher specificity) wins once loaded */
.nav li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
}
/* Opened via jQuery slideToggle (inline style), which beats this rule */
.et-l--header .et_mobile_menu {
    display: none;
}
@media (min-width: 981px) {
    .et-l--header .et_mobile_nav_menu {
        display: none;
    }
}

/*
 * The hero logo <img> is sized only by its row/column geometry (row capped
 * at 1080px, column at 888px), which arrives with Divi's deferred page CSS —
 * until then the full-width source paints at container width and snaps down
 * when the geometry lands (a 0.27 layout shift; an occasionally giant logo
 * in filmstrips). min(888px, 74vw) is what that geometry resolves to at
 * every viewport width, and the img's width/height attributes reserve the
 * height from it. param-hero-logo is a CSS Class on the hero image module —
 * if the hero row or column widths change in the builder, update this too.
 */
.param-hero-logo img {
    max-width: min(888px, 74vw);
    height: auto;
}

/*
 * The lead-blurb icons' width caps (builder Image Width: 20vw, max 165px)
 * arrive in the same late style block. Until then the lazy icons lay out at
 * container width and snap down when the caps land, shifting the whole row
 * (a 0.28 desktop layout shift). Mirroring the caps here reserves each
 * icon's box from the first layout — the img width/height attributes supply
 * the aspect ratio. param-lead-blurbs is a CSS Class on the row; if the
 * icons' Image Width changes in the builder, update this too.
 */
.param-lead-blurbs .et_pb_main_blurb_image .et_pb_image_wrap,
.param-lead-blurbs .et_pb_main_blurb_image img {
    max-width: min(165px, 20vw);
    /* The height attribute is a presentational height:<n>px; without an
       early height:auto the capped-width icon keeps its full attr height
       until Divi's late CSS lands — the box must derive height from the
       width/height attributes' aspect ratio instead. */
    height: auto;
}

/*
 * The hero text row is disabled on phone/tablet via the builder's Disable On,
 * but Divi emits that display:none in a style block deep in the document —
 * on slow connections the row paints first, then vanishes and yanks the row
 * below it upward (a 0.6+ layout shift on mobile). Declaring the hide here,
 * render-blocking, keeps the row from ever painting on those breakpoints.
 * param-hero-text-row is a CSS Class on the row; 980px matches Disable On's
 * phone + tablet range.
 */
@media (max-width: 980px) {
    .param-hero-text-row {
        display: none !important;
    }
}

/*
 * The cards row's phone margin-top (30px, set in the builder) arrives in
 * the late style block; until it lands the row sits 30px higher and then
 * nudges down. Declaring it here pins the row from first layout. The other
 * param-scroll-reveal row is disabled on phone, so the margin is inert on it.
 */
@media (max-width: 767px) {
    .param-hero-video .param-scroll-reveal {
        margin-top: 30px;
    }
}

/*
 * Rows whose scroll effect is designed to start invisible (fade offset 0%)
 * carry the param-scroll-reveal class, set as a CSS Class in the builder.
 * The pre-hide is unconditional, at specificity (0,2,1): high enough to beat
 * the et-pb-before-scroll-animation neutralization above (0,2,0), which
 * otherwise re-reveals the rows the moment Divi tags them; equal to the
 * engine's injected step rules (body[data-scroll-step="N"] …), which then
 * win by document order (they're appended to <head> after this file), so the
 * engine controls opacity from the moment its rules exist. It must NOT key
 * on the data-scroll-step body attribute: the engine stamps that a beat
 * before it injects the rules, and anything released by the stamp paints
 * visible in the gap. If the engine never initializes the rows stay hidden —
 * accepted tradeoff, matching the intent of the free-form builder hack this
 * replaces. Desktop-only: the fades are disabled at the tablet/phone
 * breakpoints, where the rows show immediately.
 */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
    body .param-scroll-reveal.param-scroll-reveal {
        opacity: 0;
    }
}