/*
 * Homepage Homepage styles.
 * Scope all selectors under .homepage-content so changes cannot affect existing templates.
 */

/* Homepage wraps its sections in .homepage-content, so mirror common.css's direct #main section layout. */
@media all and (min-width: 750px) {
    #main > .homepage-content > [class^="prj-"] {
        position: relative;
        margin: 0 auto;
    }

    #main > .homepage-content > [class^="prj-"]:not(.prj-coverSec) {
        max-width: 1600px;
    }
}

/* The Japanese Homepage hero uses the English animation class but requires a smaller type scale. */
@media all and (min-width: 750px) {
    .homepage-content.homepage-content--ja .prj-covr_mv_catch_en span {
        font-size: 70.4px;
        font-size: 4.4rem;
    }
}

@media all and (max-width: 749px) {
    .homepage-content.homepage-content--ja .prj-covr_mv_catch_en span {
        font-size: 38.4px;
        font-size: 10.24vw;
    }
}

/* Sustainability currently renders one language column in Homepage Homepage. */
@media all and (min-width: 750px) {
    .homepage-content .prj-sustainSec_info > * {
        width: 840px;
    }

    .homepage-content .prj-sustainSec {
        min-height: 820px;
    }

    .homepage-content .prj-sustainSec_info > :nth-of-type(2) {
        margin-left: 0;
    }
}

@media all and (max-width: 749px) {
    .homepage-content .prj-sustainSec_info {
        flex-direction: column;
        gap: 10.66666vw;
    }

    .homepage-content .prj-sustainSec_links {
        order: initial;
    }
}

/* Vision currently renders one language column in Homepage Homepage. */
@media all and (min-width: 750px) {
    .homepage-content .prj-visi_desc > * {
        width: 960px;
    }
}

@media all and (max-width: 749px) {
    .homepage-content .prj-visi_desc {
        flex-direction: column;
    }

    .homepage-content .prj-visi_desc > :nth-of-type(1) {
        margin-top: 0;
    }
}

/* About currently renders one language column in Homepage Homepage. */
@media all and (min-width: 750px) {
    .homepage-content .prj-abou_desc > * {
        width: 960px;
        margin: 0 auto;
    }
}

@media all and (max-width: 749px) {
    .homepage-content .prj-abou_desc {
        flex-direction: column;
    }

    .homepage-content .prj-abou_desc > :nth-of-type(1) {
        margin-top: 0;
    }
}

/* Business currently renders one language column in Homepage Homepage. */
@media all and (min-width: 750px) {
    .homepage-content .prj-busi_desc > * {
        width: 800px;
    }
}

@media all and (max-width: 749px) {
    .homepage-content .prj-busi_desc {
        flex-direction: column;
    }

    .homepage-content .prj-busi_desc > :nth-of-type(1) {
        margin-top: 0;
    }
}

@media all and (min-width: 750px) {
    .homepage-content .prj-busi_desc_en .prj-cmn_desc_txt + .prj-cmn_desc_heading,
    .homepage-content .prj-busi_desc_en .prj-busi_desc_image + .prj-cmn_desc_heading {
        margin-top: 3.125em;
    }

    .homepage-content .prj-busi_desc_image {
        margin-top: 3.125em;
    }
}

@media all and (max-width: 749px) {
    .homepage-content .prj-busi_desc_en .prj-cmn_desc_txt + .prj-cmn_desc_heading,
    .homepage-content .prj-busi_desc_en .prj-busi_desc_image + .prj-cmn_desc_heading {
        margin-top: 10vw;
    }

    .homepage-content .prj-busi_desc_image {
        margin-top: 10vw;
    }
}

.homepage-content .prj-busi_desc_en em {
    font-style: italic;
}

/* Dynamic project popups render one WPML-selected details table in Homepage Homepage. */
@media all and (min-width: 750px) {
    .homepage-content .NZEpopup_details table {
        width: 100%;
    }
}

/* Company currently renders one language profile in Homepage Homepage. */
@media all and (min-width: 750px) {
    .homepage-content .prj-comp_info_en {
        width: 800px;
    }
}

@media all and (max-width: 749px) {
    .homepage-content .prj-comp_info {
        flex-direction: column;
    }

    .homepage-content .prj-comp_info_en {
        margin-top: 0;
    }
}

/* Homepage Homepage is not body.home, so restore the hero's white menu icon. */
body.homepage .prj-h_menuOpenCloseBtn:not(.-black) .prj-h_menuOpenCloseBtn_ico::before,
body.homepage .prj-h_menuOpenCloseBtn:not(.-black) .prj-h_menuOpenCloseBtn_ico::after {
    background: #fff;
}

/* The Japanese-only Sustainability links retain the original blue marker. */
.homepage-content .prj-sustainSec_link {
    border-left-color: #81d4f8;
}