/**
 * Bootstrap 5 compatibility for the legacy Bizreview design.
 *
 * These rules preserve the established layout while replacing the retired
 * Bootstrap 3 framework with Bootstrap 5.3.x.
 */

/* Bootstrap 3 used a 1170px desktop container for this design. */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* The Bootstrap 5 base theme adds generic region spacing and grid behavior. */
.region-branding,
.region-navigation {
  padding-block: 0;
}

/* The search form is a zero-padding paragraph on the homepage. On results
 * pages it is placed in Drupal's fullwidth region, which is rendered as a
 * section and otherwise inherits the theme's 80px/60px section padding.
 * Keep the search band flush with the navigation and results on both pages. */
.path-impacts-search .region-fullwidth {
  padding: 0;
}

/* Recreate Bootstrap 3's clearfix boundary around the branding row. */
.branding-row {
  display: flow-root;
}

#main-navigation ul.menu {
  padding-left: 0;
}

/* The legacy base theme rendered this title without a block wrapper. */
.page-node-type-full-width #block-bizreview-page-title {
  display: none;
}

/* Match the compact horizontal exposed-form layout used by the homepage. */
#block-exposedformimpacts-searchpage-1 .form-group,
#block-exposedformimpacts-searchpage-1 .form-actions {
  margin-bottom: 7px !important;
}

#block-exposedformimpacts-searchpage-1 .form-actions {
  float: left;
  width: auto;
}

/* Chosen copies the native select's form-select class onto its container.
 * Suppress Bootstrap 5's native chevron there so only Chosen's arrow remains.
 */
#block-exposedformimpacts-searchpage-1 .chosen-container.form-select {
  background-image: none;
}

/* The impacts results template relied on Bootstrap 3's floated columns and on
 * columns being positioning contexts. Keep the map beside the cards and keep
 * each organization logo inside its own card under Bootstrap 5.
 */
.path-impacts-search .impacts-search-layout {
  align-items: flex-start;
}

.path-impacts-search #impacts-search-results .summary-text {
  position: relative;
}

/* The production view configuration uses this single logo wrapper while the
 * restored backup uses the page-right/search-org-logo pair. Support both. */
@media (min-width: 701px) {
  .path-impacts-search #impacts-search-results .gt-search-org-logo-mobile {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 150px;
    margin: 0;
    transform: translateY(-50%);
  }
}

.path-impacts-search #impacts-search-results-map {
  align-self: flex-start;
}

/* Result cards are legacy floated rows. Clear them before rendering the
 * Bootstrap 5 flex pager so it stays below the last card instead of squeezing
 * into the zero-width space beside a float and overflowing across the map. */
.path-impacts-search .impacts-search-pager {
  display: block;
  clear: both;
  width: 100%;
}

.path-impacts-search .impacts-search-pager .pagination {
  flex-wrap: wrap;
  margin: 20px 0 25px;
  padding-left: 0;
  list-style: none;
}

.path-impacts-search .impacts-search-pager .pagination > li {
  list-style: none;
}

/* Footer blocks were floated columns in Bootstrap 3. Their region is not a
 * Bootstrap row, so give it an explicit flex layout and keep its menu vertical.
 */
.region-postscript-first {
  display: flex;
  flex-wrap: wrap;
  /* Bootstrap 3 floated each footer column at its natural height. Without
   * this, Bootstrap 5 stretches every item to the tallest column and moves
   * the lower divider 25px below production. */
  align-items: flex-start;
  /* Bootstrap 5 renders this region as a section. Prevent the theme's generic
   * desktop section padding from pushing the social row 80px into the footer. */
  padding: 0;
}

.region-postscript-first > .block-social-icon-footer {
  flex: 0 0 100%;
  width: 100%;
}

/* Listing/detail pages add a full-width plant image between the social row and
 * footer columns. Bootstrap 3 floats let it break out of the container; make
 * that ordering and viewport-width breakout explicit under Bootstrap 5. */
.page-node-type-listing .region-postscript-first {
  position: relative;
}

.page-node-type-listing .region-postscript-first > .block-social-icon-footer {
  position: absolute;
  top: -140px;
  left: 0;
  height: 56px;
  margin: 0;
}

.page-node-type-listing #block-views-block-apply-for-non-profit-assistance-block-1 {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  max-width: none;
  height: 333px;
  min-height: 333px;
  margin: -55px calc(50% - 50vw) 20px;
  padding: 50px;
  box-sizing: border-box;
}

.page-node-type-listing #block-views-block-apply-for-non-profit-assistance-block-1 .gt-non-profit-assistance-container {
  display: none;
}

.page-node-type-listing #block-views-block-apply-for-non-profit-assistance-block-1 .list-social-icons {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.region-postscript-first .menu.nav,
.region-postscript-first ul.nav {
  display: block;
}

.region-postscript-first .menu.nav > li,
.region-postscript-first ul.nav > li {
  display: block;
  width: 100%;
  float: none;
}

/* Bootstrap 5's clearfix keeps the final paragraph margin inside these basic
 * blocks; Bootstrap 3 collapsed it outside. Remove only the true final body
 * paragraph so each footer column retains its production height. */
.region-postscript-first .block-content-basic .block-inner > p:last-child,
.region-postscript-first .block-content-basic .block-inner > .field:last-child p:last-child {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  /* The legacy 200px category widget truncates the longest active label once
   * Chosen's icon, padding, and arrow are accounted for. */
  #block-exposedformimpacts-searchpage-1 .form-type-select {
    width: 225px;
  }

  /* Match the Bootstrap 3 header grid and its menu-list indent. This places
   * the first navigation item directly beneath the right side of the logo. */
  .site-branding > .branding-row {
    margin-right: -12px;
    margin-left: -12px;
  }

  #main-nav,
  #main-nav > .row {
    --bs-gutter-x: 30px;
  }

  #block-headermenugothere > ul.menu {
    padding-left: 21px;
  }

  /* Restore Bootstrap 3's 30px row gutter (15px on each side). Bootstrap 5's
   * default gutter is 24px in this theme, which shifts footer content. */
  .postscript-first > .container {
    --bs-gutter-x: 30px;
  }

  .region-postscript-first > .col-md-3 {
    flex: 0 0 25%;
    width: 25%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .region-postscript-first > .block-social-icon-footer {
    padding-right: 15px;
    padding-left: 15px;
  }

  .region-postscript-first #block-footerexternal .nav-link {
    padding: 10px 15px;
  }
}

/* The production Bootstrap 3 grid leaves a one-pixel-tall empty column below
 * the footer border. Preserve it so the divider and page height match. */
.postscript-second .postscript_second {
  min-height: 1px;
}

/* On the homepage Bootstrap 5 retains the final paragraph margin inside the
 * assistance panel and the main-content block adds its standard 20px block
 * margin. Together they produce two light bands above the dark footer. Match
 * the production Bootstrap 3 transition and button metrics. */
.path-frontpage #block-bizreview-content {
  margin-bottom: 0;
}

.path-frontpage .paragraph--type--custom-html.gt-home-wide > .container {
  --bs-gutter-x: 30px;
}

.path-frontpage .paragraph--type--custom-html.gt-home-wide .field--name-field-paragraph-content > p:last-child {
  margin-bottom: 0;
}

.path-frontpage .paragraph--type--custom-html.gt-home-wide .btn-lg {
  font-size: 18px;
  line-height: 1.33333333;
}

@media (max-width: 991.98px) {
  .region-postscript-first > .col-md-3 {
    flex: 0 0 100%;
    width: 100%;
  }
}

/* Bootstrap 3 columns established the positioning context used by the cards. */
.view-categories .views-row {
  position: relative;
}

/* This content block is on the light impacts-search background, so it must not
 * inherit the white heading color used by dark block-content sections. */
#block-communityimpact1sentance h2 {
  color: #000;
}

@media (min-width: 992px) {
  .view-categories .view-content {
    flex-wrap: nowrap;
  }

  .view-categories .views-row {
    flex: 0 0 calc(25% - 20px);
    width: calc(25% - 20px);
  }
}

/* Bootstrap 5 renamed several common Bootstrap 3 utility classes. */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.btn-default {
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #e6e6e6;
  --bs-btn-hover-border-color: #adadad;
}

/* Replace the two legacy Glyphicon usages with the theme's Font Awesome font. */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

.glyphicon-phone-alt::before {
  content: "\f095";
}

.glyphicon-globe::before {
  content: "\f0ac";
}