/* InTBIR sub-theme overrides. Vendor theme styles load first. */

/* Contact form: put the CAPTCHA above the submit button.
   The captcha module appends its element after the form's own elements, which
   left "Send message" sitting above the maths question - so people would reach
   the button before seeing what they had to answer. Flex ordering moves the
   actions last without depending on the module's placement logic. */
.intbir-contact-form .webform-submission-form {
  display: flex;
  flex-direction: column;
}
.intbir-contact-form .webform-submission-form > .form-actions {
  order: 10;
}

/* Working-group cards on the members page.
   The legacy rule floats each card at 45% with 10px margins, which leaves the
   pair inset from the heading and stopping short of the right edge. A grid
   fills the column exactly and keeps each row's cards the same height. */
.block-views-blockwg-listing-block-1 .view-content-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.block-views-blockwg-listing-block-1 .view-content-wrap > .item,
.block-views-blockwg-listing-block-1 .views-field,
.block-views-blockwg-listing-block-1 .field-content {
  display: block;
  height: 100%;
}
.wg-view-wrapper {
  float: none;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 20px 22px;
  background: var(--intbir-surface, #fff);
  border: 1px solid var(--intbir-border, #e3dfdc);
  display: flex;
  flex-direction: column;
}
.wg-view-wrapper h5 { font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.wg-view-wrapper .wg-chairs { font-size: 16px; font-weight: 400; color: var(--intbir-meta, #615c58); }
.wg-view-wrapper .wg-view-button {
  float: none;
  margin-top: auto;
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
.wg-view-wrapper .wg-view-button a { font-weight: 600; }
.wg-view-wrapper .wg-view-button a:after { content: " \2192"; }
@media (max-width: 767px) {
  .block-views-blockwg-listing-block-1 .view-content-wrap { grid-template-columns: 1fr; }
}

/* Member list: one line per person, organisation after the name when known. */
.intbir-member-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 22em;
  column-gap: 40px;
}
.intbir-member-list li.intbir-member {
  break-inside: avoid;
  padding: 7px 0;
  border-bottom: 1px solid var(--intbir-hairline, #efebe8);
  font-size: 17px;
  line-height: 1.45;
}
.intbir-member-list .views-field { display: inline; }
.intbir-member__name { font-weight: 600; color: var(--intbir-ink, #1f1f1f); }
.intbir-member__org { color: var(--intbir-meta, #615c58); }

/* Inline field labels ("Journal: eBioMedicine"). The vendor theme never styled
   Drupal's inline label mode, so labels set to inline still sat on their own
   line above the value. */
.field--label-inline { display: flex; flex-wrap: wrap; gap: 0 .45em; align-items: baseline; margin: 0 0 6px; }
.field--label-inline > .field__label { font-weight: 600; }
.field--label-inline > .field__label::after { content: ":"; }
.field--label-inline > .field__item,
.field--label-inline > .field__items { display: inline; }

/* A study without a logo shows its name in the logo's place. */
.intbir-study-name { font-size: 22px; font-weight: 600; margin: 0 0 12px; color: var(--intbir-ink, #1f1f1f); }

/* The standard page title, used on listings that print no heading of their
   own. Matches the underlined page-builder headings on other pages. */
.block-page-title-block h1,
#block-intbir-page-title h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 28px;
  padding-bottom: 14px;
  position: relative;
}
#block-intbir-page-title h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--intbir-crimson, #a00000);
}

/* Replacements for inline styles in page text, which the HTML filter strips.
   .intbir-download: the export links on the Data management page.
   .intbir-boxed: a bordered note, e.g. the poster size on "Submit a poster". */
.intbir-download {
  background: var(--intbir-surface-tint, #f1efed);
  border: 1px solid var(--intbir-border, #e3dfdc);
  padding: 10px 14px;
  max-width: 400px;
  text-align: center;
  font-size: 18px;
  margin: 20px;
}
.intbir-boxed {
  border: 1px solid var(--intbir-ink, #1f1f1f);
  padding: 7px;
  text-align: center;
}

/* Contact page: administrative contacts side by side, stacked on phones. */
.intbir-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.intbir-contact-card {
  padding: 16px 18px;
  border: 1px solid var(--intbir-border, #e3dfdc);
  border-top: 3px solid var(--intbir-crimson, #a00000);
  background: var(--intbir-surface, #fff);
}
.intbir-contact-card p {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.5;
  margin: 0 0 8px;
  max-width: none;
}
.intbir-contact-card p:last-child { margin-bottom: 0; }
.intbir-contact-card__name { font-weight: 600; font-size: 18px !important; color: var(--intbir-ink, #1f1f1f); }
.intbir-contact-card__role { color: var(--intbir-meta, #615c58); }

/* On full-width page-builder layouts (the contact page) the content region
   has no container, so the page title would sit against the window edge.
   Give it the same width and gutter as the site's container. */
.container-full #block-intbir-page-title {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Resource rows on Tools, Protocols/SOPs/DDs and Living Systematic Reviews:
   logo on the left, description on the right, stacked on phones. Plain body
   HTML, so editors can change them in the text editor. */
.intbir-resource {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 16px 40px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--intbir-hairline, #efebe8);
}
.intbir-resource:last-child { border-bottom: 0; }
.intbir-resource__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90px;
}
.intbir-resource__text p:last-child,
.intbir-resource__text ul:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .intbir-resource { grid-template-columns: 1fr; }
}

/* Homepage icon boxes: on hover the circle fills crimson. The skin colours
   the icon crimson with a more specific selector than the vendor theme's
   hover rule, so the icon vanished into the fill; turn it white again. */
.widget.gsc-icon-box.icon-border:not(.icon-background):hover .highlight-icon .icon-container .icon {
  color: #fff;
}