/**
 * @file
 * Separates one search result from the next.
 *
 * The Views preview inside the admin UI shows results with space around
 * them, because the admin theme styles the preview area. The real page
 * gets none of that: the rows are bare `.views-row` divs, one after
 * another, and four thousand adverts read as one wall of text.
 *
 * Presentational and deliberately small. The front-end theme is still an
 * open decision - Gin, an admin theme, is the site default today and
 * Olivero is installed - so this is not the place to design the result
 * card. It gives each result the air it needs to be read as a separate
 * job, in a way a real theme can override or this file can be deleted.
 *
 * Scoped to this view so nothing else on the site inherits it.
 */

.view-job-board-search .views-row {
  padding-block: 1.25rem;
  /* Translucent rather than a fixed grey, so it stays a hairline against
     whatever background a future theme puts behind it. */
  border-block-end: 1px solid rgba(142, 148, 158, 0.35);
}

.view-job-board-search .views-row:first-child {
  padding-block-start: 0;
}

/* No rule under the last result: the pager is the boundary there, and a
   line above it reads as a row that failed to load. */
.view-job-board-search .views-row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

/* The fields within a result are block elements with inline labels, so
   without this they close up and the separation above just moves the
   wall rather than breaking it. */
.view-job-board-search .views-row .views-field + .views-field {
  margin-block-start: 0.15rem;
}

/* The title carries the link to the vacancy and is what somebody scans
   down the page for. */
.view-job-board-search .views-row .views-field-title {
  margin-block-end: 0.35rem;
}

/* The Job Category facet lists every category, which in a single column
   runs far below the fold. Four newspaper-style columns keep it to a few
   rows. A stopgap until the front-end theme lays the facets out properly;
   keyed on the facet id rather than a theme class so it survives a theme
   change until then. Fewer columns as the screen narrows. */
[data-drupal-facet-id="job_board_category"] {
  column-count: 4;
  column-gap: 2rem;
}

[data-drupal-facet-id="job_board_category"] > li {
  break-inside: avoid;
}

@media (max-width: 60rem) {
  [data-drupal-facet-id="job_board_category"] {
    column-count: 2;
  }
}

@media (max-width: 30rem) {
  [data-drupal-facet-id="job_board_category"] {
    column-count: 1;
  }
}

/* A facet's checkbox and its label on one line, the label wrapping beside
   the box. The theme does this only for .form-item, and facet items are
   li.facet-item; without it the theme's display: grid checkbox takes a
   line of its own and every label drops below its box. */
[data-drupal-facet-id] .facet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

[data-drupal-facet-id] .facet-item input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

[data-drupal-facet-id] .facet-item label {
  margin: 0;
}

/* The suggestion lists of the keyword and location fields, kept as jQuery
   UI draws them. For editors, gin_toolbar adds Claro's jQuery UI theme to
   the page with the dialog library; its .ui-widget and .ui-autocomplete
   rules take the list's background away (Claro's colour variables exist
   only on admin pages) and pad every item to twice the height, so the
   form showed through the list. ul and .ui-front outrank Claro's plain
   class selectors. */
ul.ui-autocomplete.ui-front {
  border: 1px solid #ddd;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: #333;
}

/* A block, not jQuery UI's inline a: Search API Autocomplete puts a block
   div inside it, and with Twig debug on, the comments and line breaks
   around that div became empty lines above and below every suggestion. */
ul.ui-autocomplete.ui-front .ui-menu-item-wrapper {
  display: block;
  padding: 3px 1em 3px 0.4em;
}

/* Its suggestion div pads itself. */
ul.ui-autocomplete.ui-front.search-api-autocomplete-search .ui-menu-item-wrapper {
  padding: 0;
}

ul.ui-autocomplete.ui-front .ui-menu-item-wrapper.ui-state-active {
  margin: -1px;
  border: 1px solid #003eff;
  background: #007fff;
  color: #fff;
}

/* The location quick links below the results (the search view's footer):
   25 counties read better in columns than as one long list. */
.job-board-find-job__locations {
  columns: 2;
  column-gap: 2rem;
}

@media (min-width: 40em) {
  .job-board-find-job__locations {
    columns: 4;
  }
}

.job-board-find-job__locations li {
  break-inside: avoid;
}

/* The job board's own menu (menu--job-board-navigation.html.twig): bold
   links on white, to the right, as on the legacy jobs site. Here rather
   than in the theme's job-board.scss until its gulp build can be run; this
   library is on every board page, with the search form in the hero. */
.job-board-nav {
  border-bottom: 1px solid #f4f6f6;
  background: #fff;
}

.job-board-nav__menu {
  display: flex;
  justify-content: flex-end;
  gap: 0 2.5rem;
  /* The header's width ($global-width), so the last link lines up with
     the main menu's. */
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.job-board-nav__menu::-webkit-scrollbar {
  display: none;
}

/* Narrow screens: from the left, so the first links are the ones seen,
   with the rest a swipe away. */
@media (max-width: 39.99875em) {
  .job-board-nav__menu {
    justify-content: flex-start;
    gap: 0 1.5rem;
  }
}

.job-board-nav__item {
  margin: 0;
}

.job-board-nav .job-board-nav__link {
  display: block;
  padding: 1rem 0 0.875rem;
  border-bottom: 2px solid transparent;
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

.job-board-nav .job-board-nav__link:hover,
.job-board-nav .job-board-nav__link:focus,
.job-board-nav .is-active > .job-board-nav__link {
  border-bottom-color: #12819f;
  color: #004051;
}

/* The information pages under /jobs (page--job-board.html.twig with
   job_board_title and job_board_aside), as on the legacy jobs site: the
   title, the page, and the featured jobs in a column to the right. */
.job-board-page-title {
  margin: 0 0 1.25rem;
  color: #004051;
}

.job-board-aside {
  margin-bottom: 2.5rem;
}

.job-board-featured-aside .job-board-featured__title {
  margin: 0 0 1.25rem;
  color: #004051;
  font-size: 1.625rem;
  font-weight: 400;
}

/* The rows come in the /jobs band's four-up grid
   (views-view-unformatted--job-board-featured.html.twig); in the column
   they are one above another, full width. */
.job-board-featured-aside .job-board-featured__list {
  margin: 0;
}

.job-board-featured-aside .job-board-featured__list > .job-board-featured__item.cell {
  width: 100%;
  margin: 0 0 1.25rem;
}

/* A hub page's links to the pages below it (Apprentice & Graduates, Work
   Experience): bordered boxes, two to a row, each one link as a whole.
   The markup is in the page body - divs, which the editor keeps. */
.job-board-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.875rem;
  margin: 2.5rem 0;
}

@media (min-width: 40em) {
  .job-board-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.job-board-tile {
  position: relative;
  padding: 1.25rem 1.25rem 2.5rem;
  border: 1px solid #ccc;
  background: #fff;
  transition: box-shadow 0.2s ease-out;
}

.job-board-tile:hover,
.job-board-tile:focus-within {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.11);
}

.job-board-tile h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

.job-board-tile h2 a {
  color: #004051;
  border-bottom: 0;
  text-decoration: none;
}

.job-board-tile h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.job-board-tile h2 a:hover,
.job-board-tile h2 a:focus {
  color: #12819f;
}

.job-board-tile p {
  margin: 0;
  color: #647778;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* The column beside the Work Experience pages (job_board_aside()): an
   editable block, "Facilitated by" with the partners' logos in a row and
   links to the other Work Experience pages. */
.job-board-aside-block h2 {
  margin: 0 0 1.25rem;
  color: #004051;
  font-size: 1.625rem;
  font-weight: 400;
}

.job-board-aside-block h2 a {
  color: inherit;
  border-bottom: 0;
  text-decoration: none;
}

.job-board-aside-block h2 a:hover,
.job-board-aside-block h2 a:focus {
  color: #12819f;
}

.job-board-aside-block .job-board-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
}

.job-board-aside-block .job-board-partners > * {
  flex: 0 0 auto;
  margin: 0;
}

.job-board-aside-block .job-board-partners img {
  display: block;
  width: auto;
  max-height: 4.875rem;
}

.job-board-aside-block ul {
  margin: 0 0 1.25rem;
  list-style: none;
}

.job-board-aside-block li {
  margin-bottom: 0.5rem;
}

/* The search form's Search button, rounded like the site's other call to
   action buttons (Contact us, Apply). The theme's job-board.scss squares
   it off; this outranks that rule until the theme can be rebuilt. */
.job-board-search form .form-actions .button.form-submit:not([data-drupal-selector^="edit-reset"]) {
  border-radius: 3.125rem;
}