/**
 * Overrides for the new-styling design bundle.
 *
 * These selectors win by specificity (higher than the bare class rules in
 * new-styling/css/main.css), so load order does not matter. Eventually fold
 * each rule back into the dev's SCSS source and remove from this file.
 */

/* main.js toggles body.nav_open to show the mobile menu and its dimming
   overlay. The compiled main.css currently leaves .menu_overlay as
   position: fixed / display: block / pointer-events: auto on EVERY page —
   so even when the menu is closed it sits over the top of the viewport
   and swallows clicks (most visibly: Layout Builder drag handles, but
   also any front-end UI in the top ~444px). Hide it unless the menu is
   actually open. */
body:not(.nav_open) .menu_overlay {
  display: none;
}

/* Drupal core search at /search/node renders its own keyword input + Search
   button + an <h2>Search results</h2> heading inside {{ page.content }}.
   page--search.html.twig wraps that with the design's own .main_search
   header + standalone <input> + .results_heading, so the Drupal-rendered
   chrome would appear duplicate. Hide just the chrome — the results list
   and pager that follow are still rendered. */
.path-search .results > form.search-form,
.path-search .results > h2 {
  display: none;
}

/* Bootstrap's reboot.css applies margin-top:0 / margin-bottom:1rem to
   ol, ul, dl and padding-left:2rem to ol, ul globally. That bleeds into
   the new-styling design's lists (nav, breadcrumb, card grids, etc.)
   which assume reset list defaults. Neutralise the reboot defaults so
   the design's own list rules win. */
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 0;
}

ol,
ul {
  padding-left: 0;
}

/* The unepccc_content-page_1 exposed form is placed by two blocks: the
   header search overlay (popup_block: 1, wrapped in .search_overlay) and
   the inline results-filter bar on /search (popup_block: 0). Both render
   the SAME form — title + keyword input + .search_results_filter dropdowns
   — so on /search the "Filter by / Sort by" dropdown row shows twice.
   Per the design (new-styling/news.html) the header overlay is keyword +
   featured/recent only; the dropdowns belong to the inline filter bar.
   Hide the dropdown row inside the overlay so it isn't duplicated there;
   the inline bar (no .search_overlay ancestor) keeps its dropdowns. */
.search_overlay .search_results_filter {
  display: none;
}

/* Staff directory (person_list view → .our_staff_accordion): the department
   panels must stack one per row. Force the accordion container to block flow
   and each .accordion_item to full width so nothing (a stray grid/flex on the
   container, or the Bootstrap .accordion wrapper) lays them out multiple-up.
   The people grid INSIDE each open panel (.our_staff_grid) keeps its own
   responsive 4/3/2/1-column layout. */
.our_staff_accordion .accordion {
  display: block;
}
.our_staff_accordion .accordion_item {
  display: block;
  width: 100%;
  max-width: none;
  float: none;
}

/* Publication "Download report" button opens the report_download webform in
   Drupal's core AJAX dialog (dialogClass: webform-download-dialog — set by the
   file_access_via_webform formatter). That dialog is jQuery-UI markup, not a
   Bootstrap .modal, so restyle it to match the new-styling modal pattern (see
   new-styling/scss/_modal.scss): dark backdrop, white square-cornered panel,
   32px padding, large light title, 24px square close icon. The button itself is
   given .primary_cta.double_size in base_theme_preprocess_field(). */
.ui-widget-overlay.ui-front {
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
}
.ui-dialog.webform-download-dialog {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.ui-dialog.webform-download-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 32px 32px 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.ui-dialog.webform-download-dialog .ui-dialog-title {
  margin: 0;
  float: none;
  font-size: 2em;
  font-weight: normal;
  white-space: normal;
}
.ui-dialog.webform-download-dialog .ui-dialog-titlebar-close {
  position: static;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("../new-styling/images/close.svg") no-repeat center center;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}
.ui-dialog.webform-download-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog.webform-download-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none;
}
.ui-dialog.webform-download-dialog .ui-dialog-content {
  padding: 24px 32px 32px;
}