/*  UK site (.org), based on Default SUI theme
 *  @file uk.css
 */

/* News alert - highlight */
#highlight .alert.bc-alert-news {
  margin: 0;
  background-color: #23075b;
  font-size: 24px;
  color: #fff;
  padding: 19px 17px 19px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#highlight .alert.bc-alert-news p {
  max-width: 85%;
  order: 0;
}

#highlight .alert.bc-alert-news .close {
  right: 0;
  top: 0;
  margin-left: 20px;
  order: 1;
}

#highlight .alert.bc-alert-news svg {
  width: 34px;
  height: 34px;
}

@media (min-width: 850px) {
  #highlight .alert.bc-alert-news {
    font-size: 26px;
    padding: 30px;
  }

  #highlight .alert.bc-alert-news svg {
    width: 38px;
    height: 38px;
  }
}

/* ********************************************** */
/* Footer Country Listing Selector */
#bc-footer-country-listing .bc-stripe {
  background-color: #23085a;
  padding: 1.5em 0;
  cursor: pointer;
  border-bottom: 1px solid rgb(255 255 255 / 50%);
}

#bc-footer-country-listing header {
  color: #fff;
}

/* Hide this initially and show on click with JS, relates to footer-listing.js */
#bc-footer-country-listing .details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.4s ease-out, opacity 0.2s linear;
  -moz-transition: max-height 0.4s ease-out, opacity 0.2s linear;
  transition: max-height 0.4s ease-out, opacity 0.2s ease-in;
}

/* don't change it will interfere with the js */
#bc-footer-country-listing .details.show {
  opacity: 1;
  max-height: 3775px;
  display: block;
}

/* don't change it will interfere with the js */
#bc-footer-country-listing .details ul {
  list-style: none;
  float: left;
  margin: 20px 0;
}

/* Column classes added dynamically by the JS */
#bc-footer-country-listing .details ul.bc-col-1 {
  width: 100%;
}

#bc-footer-country-listing .details ul.bc-col-2 {
  width: 50%;
}

#bc-footer-country-listing .details ul.bc-col-3 {
  width: 33.3333333%;
}

#bc-footer-country-listing .details ul.bc-col-4 {
  width: 25%;
}

#bc-footer-country-listing .details ul.bc-col-5 {
  width: 20%;
}

#bc-footer-country-listing .details ul.bc-col-6 {
  width: 16.6666667%;
}

/* don't change it will interfere with the js */
#bc-footer-country-listing .details ul li {
  font-size: 16px;
  padding: 0 10px;
}

/* Footer Country Listing Block */
#bc-footer-country-listing span.bc-svg-circle {
  margin-right: 1em;
  padding: 0.55em;
  width: 2.8em;
  height: 2.8em;
  display: block;
  float: left;
}

#bc-footer-country-listing .bc-svg {
  font-size: 1.5em;
}

/* Hide minus icon and active plus icon */
#bc-footer-country-listing .bc-svg.bc-svg-minus,
#bc-footer-country-listing header.active .bc-svg.bc-svg-plus {
  display: none;
}

/* Show minus icon on active state */
#bc-footer-country-listing header.active .bc-svg.bc-svg-minus {
  display: inline-block;
}

#bc-footer-country-listing .bc-svg.bc-svg-plus,
#bc-footer-country-listing .bc-svg.bc-svg-minus {
  margin-left: 0.5em;
  margin-top: 11px;
  color: #00cbfe;
}

#bc-footer-country-listing h2 {
  display: block;
  margin: 12px 0 0;
  font-size: 1.111em;
  float: left;
}

@media (max-width: 265px) {
  /* on extremely small displays hide these */
  #bc-footer-country-listing .bc-svg-plus,
  #bc-footer-country-listing .bc-svg-minus,
  #bc-footer-country-listing h2 {
    display: none;
  }
}

/* Header text becomes a problem on very small screens */
@media (max-width: 417px) {
  #bc-footer-country-listing span.bc-svg-circle {
    float: left;
    margin-top: 0.5em;
  }

  #bc-footer-country-listing .bc-svg-plus,
  #bc-footer-country-listing .bc-svg-minus {
    float: right;
    margin: 0.8em 1em 0 0;
  }

  #bc-footer-country-listing h2 {
    max-width: 46%;
  }
}

@media (min-width: 850px) {
  #bc-footer-country-listing h2 {
    font-size: 1.444em;
    margin-top: 8px;
  }

  #bc-footer-country-listing span.bc-svg-circle {
    -webkit-transition: border-color 0.6s ease;
    -moz-transition: border-color 0.6s ease;
    -ms-transition: border-color 0.6s ease;
    -o-transition: border-color 0.6s ease;
    transition: border-color 0.6s ease;
    border-color: #fff;
  }

  #bc-footer-country-listing .bc-svg.bc-svg-plus {
    -webkit-transition: color 0.6s ease;
    -moz-transition: color 0.6s ease;
    -ms-transition: color 0.6s ease;
    -o-transition: color 0.6s ease;
    transition: color 0.6s ease;
    color: #fff;
  }

  /* Hover focus state of WORLD icons */
  /* Footer lists */
  #bc-footer-country-listing header:focus span.bc-svg-circle,
  #bc-footer-country-listing header:hover span.bc-svg-circle,
  #bc-footer-country-listing header.active span.bc-svg-circle {
    border-color: #00cbfe;
  }

  /* Hover focus state of PLUS icons */
  /* Footer lists */
  #bc-footer-country-listing header:focus .bc-svg-plus,
  #bc-footer-country-listing header:hover .bc-svg-plus,
  #bc-footer-country-listing header.active .bc-svg-minus {
    color: #00cbfe;
  }
}

/* END Footer Country Listing Header Block */

/* ********************************************** */
/* Footer Nav updates solas-6911 to achieve 4 col footer nav */
@media (min-width: 850px) {
  .bc-footer-nav > li {
    width: 25%;
  }
}

/* Footer social media menu overrides */
ul.bc-social-media li {
  display: inline-block;
  width: auto;
  margin-bottom: 2em; /* If they go on two lines */
}

ul.bc-social-media li a {
  font: 0/0 a;
  color: transparent;
  width: 0;
  overflow: hidden;
}