/**
 * @file solas-ui-integration.css
 * Used for:
 * Adjusting SUI to match hard to change Drupal markup and adjustments to SUI components
 * when used in specific contexts which are not supported by SUI.
 */

@media (min-width: 851px) {
  html {
    font-size: 16px;
  }
}

/**
 *  General
 */

/* WYSIWYG Fields .bc-body-text used by icon-insertion.js */
.bc-body-text {
  display: inline;
}

.bc-show-hide .bc-body-text,
.has-padding.bc-body-text {
  display: block;
}

.bc-body-text > *:last-child {
  margin-bottom: 20px;
}

.bc-show-hide .bc-body-text {
  margin-bottom: 20px;
}

.bc-show-hide .bc-body-text > *:last-child,
.has-padding.bc-body-text > *:last-child {
  margin-bottom: 0;
}

.bc-body-text a {
  /* RTL icons when link has popup icon. */
  display: inline-block;
}


.bc-full-width-img {
  margin: 0;
}

.bc-media-detail-caption p {
  margin:  0;
  display: inline;
}

table.sticky-header {
  display: none;
}

ul li.collapsed {
  list-style-image: none;
}

.col-xs-12.bc-nav-subnav-attached {
  float: none;
}

/* Pulls the whole sidebar up a pixel to cover the contact border if the nav isn't there. */
.bc-col-sidebar {
  margin-top: -1px;
}

@media (max-width: 850px) {
  .bc-col-sidebar {
    margin-top: 0;
  }
}

@media (min-width: 569px) {
  /* Form panel has already R-L padding so we end up with double padding */
  .bc-col-sidebar .bg-theme.has-padding .bc-form-panel {
    padding-right: 0;
    padding-left:  0;
  }
  .bc-col-sidebar .bg-theme.has-padding > .field-content > .bc-form-panel {
    padding-top: 7px;
  }
}

.bc-col-sidebar .sbar-revs.bg-theme.has-padding {
  padding-bottom: .1px;
}

.bc-col-sidebar .bc-link-panel-image,
.bc-col-sidebar .bc-link-panel-text {
  margin-bottom: 20px;
}

 /* Display the promos 50% on wider mobile and tablets. */
 /* @todo: An idea for UX to think about: */
@media (min-width: 600px) and (max-width: 849px) {
  .bc-col-sidebar .sbar-revs {
    margin-top:    30px;
    padding-top:   30px;
    padding-left:  10px;
    padding-right: 10px;
  }
  .bc-col-sidebar .sbar-revs .field-content:nth-child(odd) {
    clear:both;
  }

  .bc-col-sidebar .sbar-revs .field-content {
    float: left;
    width: 50%;
    padding: 0 10px;
  }
}

/**
 * Forms
 */
.main-container  form {
  padding-top: 1em;
}
/* Side bar jump menu to override above */
.bc-form-panel form {
  padding: 0;
}

form a {
  font-weight: 600;
}

.bc-navbar-search .form-type-textfield {
  display: inline;
}

.form-item-search-api-views-fulltext.form-group {
  display: inline;
}

/* Langauge specific search form tweaks. */
@media (min-width: 851px) {
  .i18n-fr .bc-navbar-search .input-group .form-control {
    width: 100px;
  }
  .i18n-fr .bc-navbar-search .input-group .form-control:focus {
    width: 230px
  }
}

/*.form-actions {
  text-align: center;
}*/

label.has-error {
  margin: 2px 0 5px;
  color:  #a94442;
}

.grippie {
  display: none;
}

.has-error label a {
  color: #933533;
}

.webform-container-inline .form-control {
  width:     auto;
  display:   inline-block;
  min-width: 15%;
}

fieldset .panel-heading {
  text-transform: none;
}

.webform-grid {
  margin-top: 10px;
}

.webform-grid-option.checkbox,
.webform-grid-option.radio {
  position:      relative;
  display:       table-cell;
  margin-top:    0;
  margin-bottom: 0;
}

.views-exposed-form label {
  font-weight: 300;
}


/* Search Page. */
.page-search .page-header {
  margin-bottom: 10px;
}

.page-search .page-header h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}

.view-elastic-search #edit-search-api-views-fulltext {
  font-size: 18px;
  height: 52px;
  padding: 9px 20px;
}

.view-elastic-search .views-exposed-form label {
  display: none;
}

.view-elastic-search .views-exposed-form .views-exposed-widget {
  float: none;
  padding: 0;
}

.view-elastic-search .views-exposed-form .views-exposed-widget .form-submit {
  margin: 25px 0 30px 0;
}

.view-elastic-search .views-exposed-form .views-submit-button {
  text-align: center;
}


/**
 * Light mode
 * Hides stuff from pages that host apps such as OLC.
 */

/* Hide header elements. */
.bc-light header .bc-navbar-support,
.bc-light header .mega-menu,
.bc-light header .btn-group,
.bc-light header .bc-navbar-support,
.bc-light .bc-nav-subnav-attached,
.bc-light .breadcrumb,
.bc-light .page-header,
.bc-light .main-container .block-title {
  display: none !important;
}

/* Hide header double shade effect. */
.bc-light .bc-navbar-default.bc-navbar-has-support-area {
  border: none !important;
}

/* Hide everything in RHS region. */
.bc-light .bc-col-sidebar * {
  display: none !important;
}

/* Hide footer elements from OLC pages. */
.bc-light .bc-footer .row,
.bc-light .bc-footer hr.bc-footer-main-hr-md {
  display: none !important;
}

/**
 * Microsite subnav
 */

/* Hide the nested items within the microsite navs. */
.bc-microsite-nav.navbar-nav ul {
  display: none;
}

/* Page header */
.page-header {
  margin-top: 20px;
}

.page-header h1 {
  padding: 0;
}

/**
 * Secondary navs.
 */

/* Hide the subnav sidebar on top level landing pages as per UX */
.bc-col-sidebar .bc-nav-subnav.is-top-level-landing {
  display: none !important;
}
/* Hide the subnav controls when within the sidebar on mobile and desktop... */
.bc-col-sidebar .bc-btn-secondary-nav-group {
  display: none !important;
}
@media (max-width: 850px) {
  /* ...and the subnav when within the sidebar on mobile... */
  .bc-col-sidebar .bc-btn-secondary-nav-group,
  .bc-col-sidebar .bc-nav-subnav:not(.bc-subnav-microsite) {
    display: none !important;
  }
  /* ...unless it's the microsite subnav... Got it? ;-) */
  .bc-col-sidebar .bc-nav-subnav.bc-microsite-nav {
    display: block !important;
  }

  /**
   * Mobile secondary nav behaviour.
   * These changes have the effect of only showing children of the selected item
   * on mobile as opposed to siblings AND children. Ideally we would only render
   * the children but because we need to display both on desktop we have to use
   * a combination of the active classes and the knowledge of if we are on a landing
   * to hide and show items so it appears that only the childen are rendered on mobile.
   * SUI ensures that bc-context-nav .bc-nav-subnav list items all look the same.
   */

  /* Hide all the top level list items and the active link by default. */
  .bc-context-nav .bc-nav-subnav > ul > li,
  .bc-context-nav .bc-nav-subnav > ul > li > a.active {
    display: none;
  }
  /* Un-hide the active list item. */
  .bc-context-nav .bc-nav-subnav > ul > li.active {
    display: block;
  }
  /* On landing pages the top level links are the ones we want to render. */
  .bc-context-nav .bc-nav-subnav.is-top-level-landing .nav li {
    display: block;
  }
}

/**
 * Views
 */

.bc-col-sidebar .view-partners h2 {
  font-size: 1.11em;
  margin-bottom: 10px;
}
.bc-col-sidebar .view-partners img,
.bc-col-sidebar .view-event-sidebar img {
  margin: 0 0 20px;
}

.view-landing-page-al {
  margin: 0 0 30px;
}

.view-press-office-listing {
  margin-bottom: 20px;
}

/* Hiding the glossary attachment on desk top */
@media (min-width: 851px) {
  .bc-show-hides .attachment-after {
    display: none;
  }
}

/**
 * Filters
 */

.bc-filter-list {
  padding-top:    2.5px;
  padding-bottom: 2.5px;
}

/**
 * Blog Listing
 */

@media (max-width: 850px) {

  .blog-listing .bc-banner {
    margin-bottom: 30px;
  }

  .node-type-blog .bc-list-item-standard {
    margin-bottom:  10px;
    padding-bottom: 10px;
  }
}

.blog-listing .breadcrumb,
.blog-listing .page-header {
  display: none;
}

/**
 * Blog CT
 */

@media (min-width: 597px) {
   .node-type-blog h1 {
    font-size: 2.5em;
   }
}

.node-type-blog .view-promo-blog-text-block a.block {
  font-weight: 600;
  padding-top: 15px;
}

@media (max-width: 568px) {
  .node-type-blog .col-xs-12.col-md-8 .view-promo-blog-text-block {
    margin-left: -20px;
    margin-right: -20px;
  }
}

.node-type-blog .col-xs-12.col-md-8 .view-promo-blog-text-block {
  padding: 20px;
  background: #ebeff0;
  margin-bottom: 30px;
}

.node-type-blog .col-xs-12.col-md-8 .view-promo-blog-text-block a.block {
  padding: 12.5px 20px;
  background: #fff;
  font-size: 1.1em;
}

/**
 * Event CT
 */

.node-type-event .bc-svg-dl {
  font-weight: 600;
}

/**
 * Teaching Centre CT
 */

.node-type-teaching-centre .bc-svg-dl {
  font-weight: 600;
}

/**
 * Teaching Centre Listing
 */

.node-type-contact .bc-list-item-standard address,
.view-teaching-centre-listing address {
  margin: 0;
}

.node-type-contact .bc-list-item-standard address span,
.view-teaching-centre-listing address span,
.node-type-teaching-centre address span {
  margin-bottom: 5px;
}

/**
 * Campaign CT
 */

.node-type-campaign {
  background-color: #edeff0;
}

.node-type-campaign .main-container {
  margin-bottom:    20px;
  padding:          0 20px;
  background-color: #fff;
}

.full-width-figure {
  margin-right: -20px;
  margin-left:  -20px;
}

.node-type-campaign .navbar-with-border {
  margin-bottom: 1px;
}

@media (min-width: 851px) {
  .node-type-campaign .navbar-with-border {
    margin-bottom: 10px;
  }
}

.node-type-campaign .panel {
  margin-top: 0;
}

.node-type-campaign h2.bc-h2-style.has-no-border {
  margin-top: 0;
}

.node-type-campaign .panel button {
  margin-top: 10px;
}

.node-type-campaign .bc-svg-dl-lg {
  font-size:     1.25em;
  margin-bottom: 0;
}

/*  Must be here because p is added by editor. */
.navbar-banner p {
  color:  #fff;
  margin: 0;
}

/* Solas 5634 - @todo: speak to UX&D as we don't officially support this dark bg in SUI. */
.node-type-campaign .bc-dark,
.node-type-campaign .container.bc-dark {
  background-color: #333;
}

.node-type-campaign .bc-dark table {
  background-color: #000;
}

.node-type-campaign .container.bc-dark .panel-highlight .panel-body {
  background-color: #3D3D3D;
}

.node-type-campaign .container.bc-dark h4 {
  background-color: #505050;
}

.node-type-campaign .container.bc-dark a {
  color: #99ccff;
}

.node-type-campaign .container.bc-dark .bc-svg-dl>dt .bc-svg {
  color: #ccc;
}

.node-type-campaign .container.bc-dark,
.node-type-campaign .container.bc-dark .panel-highlight .panel-body a,
.node-type-campaign .container.bc-dark h1,
.node-type-campaign .container.bc-dark h2,
.node-type-campaign .container.bc-dark h3,
.node-type-campaign .container.bc-dark h4 {
  color: #fff;
}

/* Campaign page GDPR show hide field */
.node-type-campaign .bc-show-hide {
  border: 10px solid #fff;
}

/**
 * Global Header Logos
 */

.navbar-logos {
  margin-top: -13px;
}

.navbar-logos li {
  float:           left;
  margin:          0;
  padding:         0;
  list-style-type: none;
}

.navbar-logos li:nth-child(n+2) {
  margin-left: 20px;
}

[dir="rtl"] .navbar-logos li {
  float: right;
}

[dir="rtl"] .navbar-logos li:nth-child(n+2) {
  margin-left:  0;
  margin-right: 20px;
}

/*  Global header logos override height */
@media (min-width: 851px) {
  .bc-brand-secondary-logo {
    max-height: 32px;
  }
}

/*  Global header logos override borders from the second logo on */
.navbar-logos li:nth-child(n+2) img {
  border-style: none;
  border-width: 0;
  margin:       0;
  padding:      0;
}

/* Global header logos adjusting slogan for mobile and tablet */
@media (min-width: 320px) and (max-width: 849px) {
  .navbar-brand.bc-brand-has-secondary-logo-and-slogan {
    min-width: 300px;
  }
}

/**
 * Macbeth homepage CT
 */

.node-type-homepage-macbeth .bc-navbar-default {
  margin-bottom: 20px;
}

.node-type-homepage-macbeth .bc-home-body {
  margin-top: 40px;
}

.node-type-homepage-macbeth #bc-content {
  text-align:    center;
  font-size:     28px;
  margin-bottom: 50px;
}

@media (max-width: 850px) {
  .node-type-homepage-macbeth .bc-home-body {
    margin-top: 30px;
  }

  .node-type-homepage-macbeth #bc-content {
    font-size:     24px;
    margin-bottom: 30px;
  }
}

/**
 * Homepages - Generic changes
 */

.front .bc-navbar-default {
  margin-bottom: 0;
}

.front .panel {
  margin-top: 0;
  margin-bottom: 20px;
}

.front .panel p {
  font-family: inherit;
  margin-bottom: 15px;
  font-size: inherit;
}

@media (max-width: 597px) {
  .front .panel-body {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.bc-hp-blog-feed h2.bc-heading-bg {
  margin:         7px 0;
  padding:        0;
  border:         none;
  font-size:      0.95em;
  font-weight:    600;
  font-family:    inherit;
  line-height:    1.3em;
  text-transform: uppercase;
}

h3.bc-hp-blog-feed-title {
  border:         none;
  margin-top:     0;
  margin-bottom:  15px;
  font-size:      1.1em;
  text-transform: none;
  line-height:    1.3em;
}

h3.bc-hp-blog-feed-title a {
  font-weight: 300;
}

/* Override homepage hero single item promo.
 * @Todo: Look at this again as a single item promo styles are to be reviewed
 * by design in general and this should be an option available via SUI but
 * at this point in time we don't know what that is.
 * RTL support will be part of that as this is used on English only countries for now.
 */
.front .bc-carousel-single-item {
  position: relative;
  margin-top: 2px;
}

.front .bc-carousel-single-item .bc-item .bc-item-media img {
  float: none;
  width: 100%;
  margin: 0;
}

.front .bc-carousel-single-item .bc-item .bc-item-caption {
  background: none;
  position:   absolute;
  top:        50%;
  padding:    0;
  margin:     -2.5em 0 0 40px;
  font-size:  35px;
}

.front .bc-carousel-single-item .bc-item-caption h2 {
  display:     block;
  border:      none;
  color:       #000;
  max-width:   380px;
  margin:      0;
  padding:     0;
  font-size:   35px;
  line-height: 1.2em;
  font-weight: 600;
}

.front .bc-carousel-single-item .bc-item-caption p {
  display: none;
}

.front .bc-carousel-single-item .bc-item .bc-cta {
  padding:    0;
  text-align: left;
  position:   absolute;
  top:        50%;
  margin:     4em 0 0 40px;
}

@media (max-width: 597px) {
  .front .bc-carousel-single-item .bc-item .bc-item-caption,
  .front .bc-carousel-single-item .bc-item .bc-cta {
    position: static;
    width:    100%;
  }

  .front .bc-carousel-single-item .bc-item .bc-item-caption {
    margin: 0;
  }

  .front .bc-carousel-single-item .bc-item-caption h2 {
    max-width:  100%;
    font-size:  24px;
    margin:     30px 0;
    text-align: center;
  }

  .front .bc-carousel-single-item .bc-item .bc-cta {
    margin:     0;
    text-align: center;
  }

}

@media (max-width: 849px) {
  .front .bc-carousel-single-item .bc-item .bc-item-media {
    margin-left:  -20px;
    margin-right: -20px
  }
}

@media (min-width: 597px) and (max-width: 849px) {
  .front .bc-carousel-single-item .bc-item-caption h2 {
    font-size: 30px;
  }
}

/* Carousels with: Generic media field types that have copyright text in them */
.bc-carousel .bc-media-detail,
.bc-carousel .oembed-video {
  margin: 0;
}

.bc-carousel .oembed-content iframe {
  left: 0;
  right: 0;
}