/* =============================================
   CLS (Cumulative Layout Shift) Fix
   Sets exact positions BEFORE Divi JS runs
   ============================================= */

/* -------------------------------------------
   1. TOP HEADER BAR - exact height
   ------------------------------------------- */
#top-header {
    min-height: 39px;
    box-sizing: border-box;
}

/* -------------------------------------------
   2. MAIN HEADER - exact height + position
   Divi JS sets inline: top: 39px
   We set it in CSS BEFORE JS runs
   ------------------------------------------- */
#main-header {
    min-height: 112px;
    box-sizing: border-box;
}

.et_secondary_nav_enabled #main-header {
    top: 39px !important;
}

/* -------------------------------------------
   3. LOGO - bigger size, prevent shrinking
   Natural: 84x470, was displayed at 42x235
   Increasing to ~70px height for better visibility
   ------------------------------------------- */
.logo_container {
    min-height: 70px;
}

#logo {
    height: auto !important;
    max-height: 84px !important;
    width: auto !important;
    max-width: 470px !important;
}

/* -------------------------------------------
   4. PAGE CONTAINER - exact padding for fixed header
   Must match: top-header(39) + main-header height
   ------------------------------------------- */
.et_fixed_nav.et_secondary_nav_enabled #page-container {
    padding-top: 151px !important;
}

.et_fixed_nav:not(.et_secondary_nav_enabled) #page-container {
    padding-top: 112px !important;
}

/* -------------------------------------------
   5. NAVIGATION - pre-set Divi JS values
   Divi JS sets: padding-right: ~265px
   ------------------------------------------- */
.et_header_style_left #et-top-navigation {
    min-height: 112px;
    box-sizing: border-box;
}

/* -------------------------------------------
   6. HOMEPAGE SLIDER
   ------------------------------------------- */
.et_pb_slider {
    min-height: 408px;
    box-sizing: border-box;
}

.et_pb_fullwidth_section .et_pb_slider {
    min-height: 408px;
}

.et_pb_slider .et_pb_slide {
    min-height: 408px;
    box-sizing: border-box;
}

.et_pb_slider .et_pb_slide:first-child {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* -------------------------------------------
   7. INNER PAGE BANNER
   ------------------------------------------- */
.et_pb_fullwidth_header {
    min-height: 300px;
    box-sizing: border-box;
}

/* -------------------------------------------
   8. PREVENT FOUC + block Divi transitions on load
   ------------------------------------------- */
#top-header,
#main-header,
.logo_container,
#et-top-navigation,
.et_pb_slider {
    visibility: visible !important;
}

#top-menu,
#top-menu-nav {
    visibility: visible !important;
    opacity: 1 !important;
}

.mobile_menu_bar {
    min-height: 36px;
    box-sizing: border-box;
}

/* Block header height transition on initial load */
#main-header,
#main-header .container {
    transition: none !important;
}

/* Re-enable transitions only for scroll-triggered fixed header */
.et-fixed-header#main-header,
.et-fixed-header#main-header .container {
    transition: all 0.4s ease-in-out !important;
}

/* =============================================
   DESKTOP (min-width: 981px)
   ============================================= */
@media only screen and (min-width: 981px) {

    #top-header {
        min-height: 39px;
    }

    #main-header {
        min-height: 112px;
    }

    .et_secondary_nav_enabled #main-header {
        top: 39px !important;
    }

    .et_fixed_nav.et_secondary_nav_enabled #page-container {
        padding-top: 151px !important;
    }

    .et_fixed_nav:not(.et_secondary_nav_enabled) #page-container {
        padding-top: 112px !important;
    }

    .et_header_style_left #et-top-navigation {
        min-height: 112px;
    }

    #logo {
        height: auto !important;
        max-height: 84px !important;
        width: auto !important;
        max-width: 470px !important;
    }

    .logo_container {
        min-height: 84px;
    }

    .et_pb_slider,
    .et_pb_fullwidth_section .et_pb_slider,
    .et_pb_slider .et_pb_slide {
        min-height: 500px;
    }

    .et_pb_fullwidth_header {
        min-height: 350px;
    }

    .et-fixed-header#main-header {
        min-height: 80px;
    }
}

/* =============================================
   TABLET (max-width: 980px)
   ============================================= */
@media only screen and (max-width: 980px) {

    #top-header {
        min-height: 39px;
    }

    #main-header {
        min-height: 112px;
    }

    .et_secondary_nav_enabled #main-header {
        top: 39px !important;
    }

    .et_fixed_nav.et_secondary_nav_enabled #page-container {
        padding-top: 151px !important;
    }

    .et_fixed_nav:not(.et_secondary_nav_enabled) #page-container {
        padding-top: 112px !important;
    }

    .logo_container {
        min-height: 60px;
    }

    #logo {
        height: auto !important;
        max-height: 65px !important;
        width: auto !important;
        max-width: 360px !important;
    }

    .et_pb_slider,
    .et_pb_fullwidth_section .et_pb_slider,
    .et_pb_slider .et_pb_slide {
        min-height: 400px;
    }

    .et_pb_fullwidth_header {
        min-height: 280px;
    }

    .et_header_style_left #et-top-navigation {
        min-height: auto;
    }
}

/* =============================================
   PHONE (max-width: 767px)
   ============================================= */
@media only screen and (max-width: 767px) {

    #top-header {
        min-height: 39px;
    }

    #main-header {
        min-height: 112px;
    }

    .et_secondary_nav_enabled #main-header {
        top: 39px !important;
    }

    .et_fixed_nav.et_secondary_nav_enabled #page-container {
        padding-top: 151px !important;
    }

    .et_fixed_nav:not(.et_secondary_nav_enabled) #page-container {
        padding-top: 112px !important;
    }

    .logo_container {
        min-height: 45px;
        overflow: hidden;
    }

    #logo {
        height: auto !important;
        max-height: 50px !important;
        width: auto !important;
        max-width: 280px !important;
    }

    .et_pb_slider,
    .et_pb_fullwidth_section .et_pb_slider,
    .et_pb_slider .et_pb_slide {
        min-height: 350px;
    }

    .et_pb_fullwidth_header {
        min-height: 220px;
    }
}

/* =============================================
   SMALL PHONE (max-width: 479px)
   ============================================= */
@media only screen and (max-width: 479px) {

    .logo_container {
        min-height: 40px;
    }

    #logo {
        max-height: 45px !important;
        max-width: 220px !important;
    }

    .et_pb_slider,
    .et_pb_fullwidth_section .et_pb_slider,
    .et_pb_slider .et_pb_slide {
        min-height: 300px;
    }

    .et_pb_fullwidth_header {
        min-height: 180px;
    }
}

/* =============================================
   BLURBS (circles) - match buttons order on mobile
   RTL site: desktop shows right-to-left,
   but mobile stacks in DOM order (reversed).
   column-reverse fixes this.
   ============================================= */
@media only screen and (max-width: 980px) {

    .et_pb_row_5,
    .et_pb_row_6 {
        display: flex !important;
        flex-direction: column-reverse !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .et_pb_row_5 + .et_pb_row_6,
    .et_pb_row_6 {
        margin-top: 5px !important;
    }

    .et_pb_row_5 .et_pb_column,
    .et_pb_row_6 .et_pb_column {
        margin-bottom: 0 !important;
        padding: 15px 0 !important;
    }

    .et_pb_row_5 .et_pb_blurb,
    .et_pb_row_6 .et_pb_blurb {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .et_pb_row_5 .et_pb_blurb .et_pb_main_blurb_image,
    .et_pb_row_6 .et_pb_blurb .et_pb_main_blurb_image {
        max-width: 160px !important;
        margin: 0 auto 8px !important;
    }

    .et_pb_row_5 .et_pb_blurb .et_pb_main_blurb_image img,
    .et_pb_row_6 .et_pb_blurb .et_pb_main_blurb_image img {
        max-width: 160px !important;
        height: auto !important;
    }

    .et_pb_row_5 .et_pb_blurb h4,
    .et_pb_row_6 .et_pb_blurb h4 {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        font-size: 18px !important;
    }

    .et_pb_row_5 .et_pb_blurb .et_pb_blurb_content,
    .et_pb_row_6 .et_pb_blurb .et_pb_blurb_content {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}