/*
 * Selector shims: the original CSS targets D7 menu classes (li.first,
 * li.active-trail) that Drupal 11 renders as :first-child and
 * li.menu-item--active-trail.
 */

#block-menu-block-2 ul li:first-child {
    margin-left: 0;
}

#block-menu-block-2 ul li.menu-item--active-trail {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #9a9867;
}

#block-menu-block-2 ul li.menu-item--active-trail a {
    color: #9a9867;
}

#sidebar-second div.block-menu-block li.menu-item--active-trail a {
    color: #9a9867;
}

/*
 * The footer menu (#block-menu-block-3) is only the source for the mobile
 * meanMenu hamburger. meanMenu is built for a nav that shows on desktop, so on
 * desktop it sets an inline display:block on the source, which overrides the
 * plain hide rule in custom.css and dumps the whole menu tree at the bottom of
 * every page. Keep the source hidden at all widths — the mobile menu lives in a
 * separate cloned .mean-nav, so hiding the source does not affect it.
 */
div#block-menu-block-3 {
    display: none !important;
}

/*
 * Two-column layout. D7 core added a `sidebar-second` body class when that
 * region had content, which the base stylesheet uses to narrow #content so the
 * sidebar (facets on /projects, calendar/news elsewhere) fits beside it. D11
 * sets body classes in preprocess_html, before region content is known, so that
 * class never appears and the full-width content pushes the sidebar below the
 * results. page.html.twig now flags #main with has-sidebar-* whenever the region
 * actually renders; mirror the D7 #content widths here, desktop-only (the mobile
 * @media max-width:900px rules already stack everything full width).
 */
@media only screen and (min-width: 901px) {
  #main.has-sidebar-second #content,
  #main.has-sidebar-first #content {
    width: 620px;
  }
}

/*
 * Project search RESULT card (node--project--search-result.html.twig).
 *
 * That template emits SINGLE-class field wrappers
 * (.views-field-field-project-image, .views-field-field-project-organization)
 * plus .project-leftside / .project-contact-info. The ported D7 rules keyed on
 * COMPOUND `.views-field.views-field-...` selectors, so the blue image box, the
 * card padding and the right-column alignment were all lost — the side text
 * (organization + contact) collapsed to the top and straddled the two-tone
 * background. Re-create the D7 two-column card against the real D11 markup.
 * Desktop-only: the @media max-width:900px rules in responsive.css stack the
 * card full width on mobile, and non-media rules here would override them.
 */
@media only screen and (min-width: 901px) {
  .view-project-search .views-row {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    margin: 30px 0;
    padding: 30px 30px 30px 40px;
    background: linear-gradient(to right, #f1efe2 60%, #d7d5c9 60%);
  }

  /* left column: title / grant-number box / description / year + amount */
  .view-project-search .project-leftside {
    float: left;
    width: 55%;
    margin: 0;
    z-index: 1;
  }

  /* right column stack (source order: image box, organization, contact) */
  .view-project-search .views-field-field-project-image,
  .view-project-search .views-field-field-project-organization,
  .view-project-search .project-contact-info {
    float: right;
    clear: right;
    width: 38%;
    margin-left: 0;
    box-sizing: border-box;
  }

  /* the blue image placeholder box */
  .view-project-search .views-field-field-project-image {
    height: 140px;
    margin-bottom: 15px;
    background: #546e7b;
    overflow: hidden;
  }
  .view-project-search .views-field-field-project-organization {
    padding-top: 0;
  }
}

/* blue box: fill with the uploaded image when present; hide on mobile (D7 did) */
.view-project-search .views-field-field-project-image img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}
@media only screen and (max-width: 900px) {
  .view-project-search .views-field-field-project-image {
    display: none;
  }
  /* responsive.css resets .project-contact-info to margin-left:0 for mobile,
     but the organization's reset there used a compound .views-field selector
     that the single-class D11 markup never matches — so undo its 355px offset
     here too, otherwise it wraps into a narrow strip on the right. */
  .view-project-search .views-field-field-project-organization {
    margin-left: 0;
  }
}

/*
 * Search bar (exposed filter) in #featured on /projects. Drupal 11 suffixes the
 * element ids with "--2" (edit-submit-project-search--2,
 * edit-search-api-views-fulltext--2), so the D7 rules keyed on the exact ids in
 * custom.css no longer match and the submit fell back to the plain core .button.
 * Match by id prefix + form-submit class, restore the olive button with white
 * text, and lay the field + button out inline like the original.
 */
.page-projects #featured .views-exposed-form .form-item,
.page-projects #featured .views-exposed-form .form-actions {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}
.page-projects #featured input[id^="edit-search-api-views-fulltext"] {
  height: 29px;
  box-sizing: border-box;
}
.page-projects #featured input[id^="edit-submit-project-search"],
.page-projects #featured .views-exposed-form .form-submit {
  height: 29px;
  margin: 0 0 0 15px;
  padding: 0 18px;
  border: 0;
  background: #999967;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.page-projects #featured input[id^="edit-submit-project-search"]:hover,
.page-projects #featured .views-exposed-form .form-submit:hover {
  background: #9a9867;
}

/*
 * Teaser-card row centering on the interior "main pages" (About / Recreation /
 * Conservation, body class `not-front`). custom.css floats each of the four
 * .field-item cards left at 230px, so the 920px row hugged the left edge of the
 * full-width content column and read as off-center. The front page is exempt —
 * it uses the absolute-positioned mosaic in callouts.css (scoped to `.front`).
 * Desktop only; the @media max-width:900px rules stack the cards on mobile.
 */
@media only screen and (min-width: 901px) {
  body.not-front .field.field-name-field-teaser-image.field-type-field-collection > .field-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  body.not-front .field.field-name-field-teaser-image.field-type-field-collection > .field-items > .field-item {
    float: none;
  }
}