/**
 * REdesign.build Customizations - Main (global, optional)
 *
 * Keep this file small. Prefer feature-specific files in assets/css/features/.
 */

/* @FIXME: Hacks */

/* Show the hamburger menu on project pages */
.single-project .menu-toggle .lines span {
    background: rgb(10, 10, 10);
}

@media (max-width:980px) {
    /* Tighten up the sections */
    .single-project .et_pb_section {
        padding: 0;
    }

    /* Make room for menu bar */
    .single-project .et_pb_section.et_pb_section_1 {
        padding-top: 60px;
    }

    /* Full width featured image */
    .et_pb_post.project .et_pb_section_1 .et_pb_row_0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Project completion spacing */
    .single-project .et_pb_section_2 .et_pb_column_2 {
        padding-top: 2em;
    }

    .single-project .et_pb_section_3 .et_pb_row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Divi Filterable Portfolio: 2 columns on phones */
@media (max-width: 767px) {
    .re-two-col-mobile .et_pb_portfolio_items {
        display: flex;
        flex-wrap: wrap;
        gap: 16px; /* adjust spacing */
    }

    .re-two-col-mobile .et_pb_portfolio_item.et_pb_grid_item {
        float: none !important;
        width: calc(50% - 8px) !important; /* 2 columns (accounts for gap) */
        margin: 0 !important;
        clear: none !important;
    }

    .re-two-col-mobile .et_pb_portfolio_item .et_portfolio_image,
    .re-two-col-mobile .et_pb_portfolio_item img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* 4 column to 2 column on mobile */
@media (max-width: 767px) {

  /* Controlled outer spacing for the row */
  .et_pb_row.re-two-col-mobile {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 0;
    padding-bottom: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* space BETWEEN columns */
  }

  /* Two columns */
  .et_pb_row.re-two-col-mobile > .et_pb_column {
    width: calc(50% - 8px) !important; /* half the gap */
    margin: 0 !important;
    box-sizing: border-box;
  }
}

/* research autocomplete highlight color */
.has-redesignbuild-customizations .autocomplete-suggestion b {
    color: var(--re-search-color);
}

@media only screen and (min-width: 958px) {
    .re-search-form {
        width: 90%;
        margin-left: 0;
    }
}

.has-redesignbuild-customizations #re-search-results-imgs {
    text-align: center;
}