/**
 * EMN advanced search — facet sidebar, results and entry link.
 * On-brand with the emn theme: Lato, dark-blue #003262, light-blue #00b5df,
 * light-grey panels #f1f1f1, square corners, #bbb dividers.
 */

/* ==========================================================================
   Facet sidebar (region-sidebar-first on the advanced-search page)
   ========================================================================== */
.region-sidebar-first {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Each facet / summary block = a light-grey panel, like .sidebar__blocks. */
.region-sidebar-first .block-facets,
.region-sidebar-first .block-facets-summary {
  background: #f1f1f1;
  padding: 18px 20px;
  margin-bottom: 16px;
}

/* Group heading (block label). */
.region-sidebar-first .block-facets > h2,
.region-sidebar-first .block-facets > .block-title,
.region-sidebar-first .block-facets-summary > h2,
.region-sidebar-first .block-facets-summary > .block-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #00b5df;
  color: #003262;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Checkbox list. */
.region-sidebar-first .facets-widget-checkbox ul.facets-widget,
.region-sidebar-first ul.facets-widget,
.region-sidebar-first .facets-widget-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.region-sidebar-first .facet-item {
  display: flex;
  align-items: baseline;
  margin: 0 0 7px;
  padding: 0;
  font-size: 14px;
  line-height: 1.35;
}

.region-sidebar-first .facet-item:last-child {
  margin-bottom: 0;
}

.region-sidebar-first .facet-item input.facets-checkbox {
  margin: 0 8px 0 0;
  flex: 0 0 auto;
  position: static;
  cursor: pointer;
}

.region-sidebar-first .facet-item > a,
.region-sidebar-first .facet-item > label,
.region-sidebar-first .facet-item label > a {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.region-sidebar-first .facet-item label {
  display: flex;
  align-items: baseline;
  width: 100%;
  margin: 0;
  font-weight: 400;
}

.region-sidebar-first .facet-item a:hover,
.region-sidebar-first .facet-item:hover > a,
.region-sidebar-first .facet-item:hover label {
  color: #00b5df;
}

.region-sidebar-first .facet-item__value {
  flex: 1 1 auto;
}

.region-sidebar-first .facet-item__count {
  flex: 0 0 auto;
  margin-left: 8px;
  color: #8c8c8c;
  font-size: 12px;
}

/* Active facet. */
.region-sidebar-first .facet-item.is-active > a,
.region-sidebar-first .facet-item a.is-active,
.region-sidebar-first .facet-item input.facets-checkbox:checked + label {
  color: #003262;
  font-weight: 700;
}

/* "Show more / less" links inside a facet. */
.region-sidebar-first .facets-soft-limit-link {
  display: inline-block;
  margin-top: 8px;
  color: #00b5df;
  font-size: 13px;
  text-decoration: underline;
}

/* ==========================================================================
   Active filters summary + "clear all"
   ========================================================================== */
.region-sidebar-first .block-facets-summary {
  background: #e8f8fc;
}

.region-sidebar-first .facet-summary-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.region-sidebar-first .facet-summary-item--facet a {
  display: inline-block;
  background: #003262;
  color: #fff;
  padding: 3px 26px 3px 10px;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
  position: relative;
}

.region-sidebar-first .facet-summary-item--facet a::after {
  content: "\00d7";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
}

.region-sidebar-first .facet-summary-item--facet a:hover {
  background: #00b5df;
}

.region-sidebar-first .facet-summary-item--clear a {
  display: inline-block;
  margin-top: 4px;
  color: #00b5df;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}

.region-sidebar-first .facet-summary-item--clear a:hover {
  color: #003262;
}

/* ==========================================================================
   Results column (view advanced_search, css_class "listing")
   ========================================================================== */
.view-advanced-search .view-content .views-row {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #bbb;
}

.view-advanced-search .view-content .views-row:last-child {
  border-bottom: 0;
}

/* Keyword box on the advanced page — match the brand search box. */
.view-advanced-search .views-exposed-form {
  background: #f1f1f1;
  padding: 18px 20px;
  margin-bottom: 25px;
}

.view-advanced-search .views-exposed-form .form-item {
  margin: 0;
}

.view-advanced-search .views-exposed-form label {
  color: #003262;
  font-weight: 700;
}

.view-advanced-search .views-exposed-form .form-text {
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 0;
  box-shadow: none;
  max-width: 420px;
  height: auto;
  padding: 10px 12px;
}

.view-advanced-search .views-exposed-form .form-submit {
  background: #003262;
  border: 1px solid #003262;
  border-radius: 0;
  color: #fff;
  padding: 10px 20px;
  transition: background .15s ease, border-color .15s ease;
}

.view-advanced-search .views-exposed-form .form-submit:hover,
.view-advanced-search .views-exposed-form .form-submit:focus {
  background: #00b5df;
  border-color: #00b5df;
}

/* The theme paints button glyphicons navy — invisible on the navy button and
   still navy on hover. Keep the magnifier white in both states. */
.view-advanced-search .views-exposed-form .form-submit .glyphicon {
  color: #fff;
}

/* Result card images fill their column, like the listing pages. */
.view-advanced-search .book-lg,
.view-advanced-search .img-box {
  display: block;
}

.view-advanced-search .book-lg img,
.view-advanced-search .img-box img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   "Use the advanced search" link under the main search box
   ========================================================================== */
/* The header search field is position:absolute, so the in-flow link would sit
   ON TOP of it. On the homepage we hide the (irrelevant) exposed sort selects,
   reserve the box height, and drop the link just BELOW the field. Scoped to the
   front page (the only place the link renders) so the search box on every other
   page keeps its normal height. */
.path-frontpage #block-emn-exposedformsearchpage-1 .form-item-sort-by,
.path-frontpage #block-emn-exposedformsearchpage-1 .form-item-sort-order {
  display: none;
}

@media (min-width: 768px) {
  .path-frontpage #block-emn-exposedformsearchpage-1 .form-inline {
    position: relative;
    min-height: 86px;
  }

  .path-frontpage #block-emn-exposedformsearchpage-1 .emn-advanced-search-link {
    position: absolute;
    top: 56px;
    right: 0;
    width: auto;
    margin: 0;
    padding: 0;
  }
}

.emn-advanced-search-link {
  text-align: right;
}

.emn-advanced-search-link a {
  color: #003262;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.emn-advanced-search-link a::before {
  content: "\e003";
  font-family: "Glyphicons Halflings";
  margin-right: 5px;
  color: #00b5df;
  font-size: 11px;
}

.emn-advanced-search-link a:hover,
.emn-advanced-search-link a:focus {
  color: #00b5df;
  text-decoration: underline;
}

/* ==========================================================================
   Responsive — sidebar stacks above results on tablet/mobile (Bootstrap),
   tighten spacing there.
   ========================================================================== */
@media (max-width: 767px) {
  .region-sidebar-first .block-facets,
  .region-sidebar-first .block-facets-summary {
    padding: 14px 16px;
    margin-bottom: 12px;
  }

  /* The keyword box wraps above the Search button on narrow screens —
     breathing room between the two. */
  .view-advanced-search .views-exposed-form .form-submit {
    margin-top: 12px;
  }

  /* On mobile the whole header search form collapses behind the magnifier
     icon (form-inline width 0, everything absolute), so the in-flow link ends
     up hidden behind the icon. Hang it just below the icon, right-aligned,
     and reserve the strip in the header so it doesn't overlap the logo. */
  .path-frontpage .user-region {
    padding-bottom: 36px;
  }

  .path-frontpage #block-emn-exposedformsearchpage-1 .emn-advanced-search-link {
    position: absolute;
    top: 54px;
    right: 0;
    text-align: right;
  }
}

/* ==========================================================================
   Result count summary — no bullet, presented as a small header
   ========================================================================== */
.region-sidebar-first .block-facets-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.region-sidebar-first .block-facets-summary ul li {
  list-style: none;
}

.region-sidebar-first .source-summary-count {
  display: block;
  margin-bottom: 8px;
  color: #003262;
  font-weight: 700;
  font-size: 14px;
}

/* ==========================================================================
   "Content not translated to Dutch" informative banner (NL pages only) —
   redirects users to the advanced search in EN/FR (cahier des charges).
   ========================================================================== */
.emn-nl-notice {
  background: #fff3cd;
  border-bottom: 2px solid #ffca64;
  color: #5c4600;
  font-size: 14px;
  line-height: 1.4;
}

.emn-nl-notice__inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 10px 15px;
}

.emn-nl-notice .glyphicon {
  margin-right: 6px;
  color: #b8860b;
}

.emn-nl-notice a {
  color: #003262;
  font-weight: 700;
  text-decoration: underline;
}

.emn-nl-notice a:hover,
.emn-nl-notice a:focus {
  color: #00b5df;
}

/* Agenda <-> archive cross-link (view header on /agenda and /agenda/archive). */
.emn-agenda-archive-link-wrapper {
  text-align: right;
  margin: 0 0 15px;
}

.emn-agenda-archive-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #003262;
  border-radius: 3px;
  color: #003262;
  font-weight: 700;
  text-decoration: none;
}

.emn-agenda-archive-link:hover,
.emn-agenda-archive-link:focus {
  background: #003262;
  color: #fff;
  text-decoration: none;
}