/* ===========================================
   ALS International - Custom CSS Fixes
   Version: 3.0
   Last updated: 2026-03-24
   =========================================== */

/* ===== 1. GLOBAL HEADER FIX (ROOT CAUSE) ===== */
/* Override Divi's default .header-content max-width: 700px
   which constrains all fullwidth header text to a narrow column */
.et_pb_fullwidth_header .header-content,
.et_pb_fullwidth_header .header-content-center {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
}

/* Ensure the container itself doesn't over-constrain */
.et_pb_fullwidth_header_container {
    max-width: 1280px !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Desktop header text sizing */
.et_pb_fullwidth_header .header-content h1,
.et_pb_fullwidth_header .header-content-center h1 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    white-space: normal !important;
}


/* ===== 2. FIX LINE BETWEEN NAV AND HERO ===== */
/* The fullwidth section wrapping the hero has a white background that
   creates a visible edge against the dark hero overlay.
   Fix: make fullwidth sections use dark bg + overlap slightly. */
.et_pb_fullwidth_section {
    background-color: #1a2744 !important;
}

#et-main-area > .et_pb_fullwidth_section:first-child {
    margin-top: -1px !important;
    padding-top: 1px !important;
}


/* ===== 3. HOMEPAGE - Service Card Images Equal Height ===== */
.et_pb_section_2 .et_pb_image_wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.et_pb_section_2 .et_pb_image_wrap img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* ===== 4. MOBILE NAVIGATION MENU SCROLL FIX ===== */
@media (max-width: 980px) {
    .et_mobile_menu,
    #mobile_menu {
        max-height: 80vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}


/* ===== 5. TABLET ADJUSTMENTS ===== */
@media (max-width: 980px) {
    .et_pb_fullwidth_header .header-content,
    .et_pb_fullwidth_header .header-content-center {
        max-width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .et_pb_fullwidth_header_container {
        width: 95% !important;
        padding: 20px !important;
    }

    .et_pb_section_2 .et_pb_image_wrap img {
        height: 200px !important;
    }
}


/* ===== 6. MOBILE ADJUSTMENTS ===== */
@media (max-width: 767px) {

    /* --- Header text --- */
    .et_pb_fullwidth_header .header-content,
    .et_pb_fullwidth_header .header-content-center {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .et_pb_fullwidth_header_container {
        width: 100% !important;
        padding: 15px !important;
    }

    .et_pb_fullwidth_header .header-content h1,
    .et_pb_fullwidth_header .header-content-center h1,
    .et_pb_fullwidth_header_container h1,
    .et_pb_fullwidth_header h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        padding: 0 !important;
    }

    .et_pb_fullwidth_header .header-content h2,
    .et_pb_fullwidth_header .header-content-center h2,
    .et_pb_fullwidth_header_container h2,
    .et_pb_fullwidth_header h2 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead {
        font-size: 15px !important;
        line-height: 1.4 !important;
        padding: 0 !important;
    }

    .et_pb_fullwidth_header .header-content p,
    .et_pb_fullwidth_header .header-content-center p,
    .et_pb_fullwidth_header_container p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }

    .et_pb_fullwidth_header {
        min-height: auto !important;
        padding: 50px 0 !important;
    }

    /* --- Homepage text spacing below hero --- */
    .et_pb_section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .et_pb_fullwidth_section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .et_pb_text {
        margin-bottom: 15px !important;
    }

    .et_pb_section .et_pb_text h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .et_pb_section .et_pb_text h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .et_pb_section .et_pb_text h1,
    .et_pb_section .et_pb_text h2 {
        word-break: normal;
        overflow-wrap: break-word;
    }

    .et_pb_section_2 .et_pb_image_wrap img {
        height: 250px !important;
    }
}


/* ===== 7. PLUTO 2 - Default Header Override ===== */
/* Pluto 2 uses the default Divi header instead of theme builder.
   Override its nav styling to match the rest of the site. */
.single-post #main-header {
    background-color: #2c3e50 !important;
}

.single-post #main-header .container {
    max-width: 1280px !important;
    width: 90% !important;
}

.single-post #et-top-navigation nav > ul > li > a {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
}

.single-post #logo {
    max-height: 80px !important;
}

.single-post .et_header_style_centered #main-header {
    padding-top: 15px !important;
}

.single-post #top-menu .menu-item:last-child a {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

.single-post #top-menu .menu-item:last-child a:hover {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
}