/* ==========================================================================
   Brand Overrides
   --------------------------------------------------------------------------
   Local stylesheet for Warwick Medical School brand components and overrides.

   Sections:
   - Global variables & layout
   - Navigation & masthead
   - Hero
   - News
   - Spotlight
   - Footer
   - Course search
   - Buttons
   - Utilities
   ========================================================================== */

:root {
      /* Sets the masthead colour from the colour system */
      /* You can in turn use --w-sys-colors-masthead for other elements that you want to match,
         so it's only defined in one place */
      --w-sys-colors-masthead: var(--w-ref-colors-paleblue-500);

      /* Customise tiles per row at various breakpoints. */
      --sb-news-tiles-per-row-lg: 3;
      --sb-news-tiles-per-row-md: 3;
      --sb-news-tiles-per-row-sm: 1;

      /* Set to 1 to move controls to top */
      --video-controls-row: 3;
  }




  hr.spacer {
      margin: 20px 0;
      border: 0;
  }

  .infographics blockquote.infographic,
  .open-days .embed-responsive,
  .spotlight .embed-responsive {
      margin-left: -20px;
      margin-right: -20px;
  }

  /* Homepage banner layout */

  .hero .overlayContainer {
      position: relative;
  }

  .hero .overlayContent {
      height: 100%;
      width: 100%;
      z-index: 1;
      position: absolute;
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto 1fr auto auto auto;
      padding: 20px;
      gap: 3px;
    background: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
  }

  @media screen and (min-width:768px) {
      .hero .overlayContent {
          gap: 20px;
      }
  }

  /* Homepage banner text */
  .hero .overlayContent .hero-overlay-text {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;

  justify-content: center;
  color: white!important;
  width: 75%;
  z-index: 2;
  }

  .hero .overlayContent h2 {
      display: flex;
      flex-direction: column;

      text-transform: uppercase;
      width: 100%;
      font-weight: 600;
      color: white!important;
    font-size: 6rem;
  }
   .hero .overlayContent p {
     font-weight: 500;
	   color: white!important;
   }

  .hero .top-text {
      font-size: 6rem;
  }

  .hero .bottom-text {
      font-size: 11rem;
      padding: 10px 0px 20px;
  }

  .hero .bottom-text .suffix {
      font-size: 0.5em;
      vertical-align: super;
  }

  /* Homepage banner image/video */

  .hero .containerBackground {
      width: 100%;
       position: absolute;

  }

  .hero .overlayContainer img,
  .hero .overlayContainer video {
      width: 100%;
      height: 550px!important;

    object-fit: cover;

      /* Remove inscrutable gap */
      margin-bottom: -7px;
      /* max-height: 100vh; */
  }

  .hero .overlayContainer .btn {
      padding: 10px;
  }

  .hero .overlayContainer .btn i {
      margin-right: 0;
      width:1em;
  }

  .hero a[data-purpose=transcript-download] {
      grid-row: var(--video-controls-row);
      grid-column: -3;
  }

  #vidbutton i {
      margin: 0 10px 0 0;
  }

  #vidbutton { /* Play/Pause */
      grid-row: var(--video-controls-row);
      grid-column: 1;
      justify-content: start;
  }

  #captionsbutton { /* CC */
      grid-row: var(--video-controls-row);
      grid-column: -2;
  }

  #audiobutton { /* Mute/unmute */
      grid-row: var(--video-controls-row);
      grid-column: -1;
  }

  @media (min-width: 768px) {
      /* Video control buttons */
      .hero .overlayContainer .btn {
          padding: 14px 18px;
      }
      #vidbutton { /* Play/Pause */
          min-width: 7.4em;
      }
  }

  /* Audio end */

  /** Tablets **/
  @media only screen and (max-width : 992px) {

      .hero .bottom-text {
          font-size: 5.5rem;
          padding: 10px 0px 20px;
      }

  }

  /** Mobile **/
  @media only screen and (max-width : 468px) {

      .hero .top-text {
          font-size: 3rem;
      }

      .hero .bottom-text {
          font-size: 3.5rem;
          padding: 10px 0px 20px;
      }

  }

  /* News feed as single item */

  .hero .panel {
      border: 0;
      margin-bottom: 0px;
  }

  .hero .panel-body {
      padding: 0px;
      margin: 0px -20px;
  }

  .hero .news-tiles .news-tile {
      padding-right: 0px;
      padding-bottom: 0px;
      max-width: 100%;
      flex: auto;
  }

  .hero .news-tiles {
      margin-right: 0px;
  }

  /* Hiding stuff */

  .hero .news-tile-title.feed-item-title,
  .hero .news-tile-event-details,
  .id7-page-title,

  h1,
  .hero .news-tile-image-and-date,
  .hero .news-tile-title {
      display: none !important;
  }

  /* Multifeed START */

  .hero .newsItemDiv {
      padding: 0;
      margin: 0px -20px;
  }

  .hero .multi-feed {
      margin-bottom: -1px;
  }

  .hero .contentBox {
      border: none;
  }

  .feed-item-title,
  .news-tile-date,
  .news-tile-time,
  .newsItemDivider {
      display: none;
  }

  /*Content Feeds Styling START */

  .panel p {
      font-size: 1em;
      color: #0C0C0C;
     
  }

  .news-tiles {
      --sb-news-tiles-imageHeight: auto;
  }
  @media (min-width: 992px) {
      .news-tiles {
          --sb-news-tiles-imageHeight: 175px;
      }
  }

  .newsItems h3 {
      font-size: 1.2em
  }

  .news-tile-tags {
      display: none !important;
  }

  .news-tile-abstract img {
      display: none !important;
  }

  .news-tiles .news-tile .news-tile-image-and-date {
      position: relative;
      /* Ensures images are relatively positioned */
      overflow: hidden;
      margin: -15px -15px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .news-tiles .news-tile .news-tile-image-and-date .news-tile-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
  }

  .news-tile .panel {
background-color: var(--w-sys-colors-primary-500);
    border:none!important;
  }
	  
	 .wms-intro .news-tile .panel {
background-color: var(--w-sys-colors-primary-300);
    border:none!important;
  }

  .horizontal-scroller .horizontal-scroller-items-wrapper .horizontal-scroller-items {
      will-change: left;
  }

  .container-component.bottom-align {
      margin-top: auto;
  }

  .news-tile-title-and-abstract {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
	  height:100%;
  }

  .news-tiles .news-tile .news-tile-abstract {
      /* */
      overflow: visible;
  }

  .panel-body {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
  }

  .panel.panel-default {
      display: flex;
  }




  /* Fonts */

  .news-tile h2.news-tile-title {
      font-weight: 700;
     font-size:3.5rem;
      line-height: 120%;
  }

  /* Spotlight */

  .spotlight .news-tile-title::before {
      font-weight: bold;
      font-size: 0.5em;
      display: block;
  }

  .spotlight.research .news-tile-title::before {
      content: "Community";
  }

  .spotlight.news .news-tile-title::before {
      content: "News";
  }

  /* Spotlight tile */

  .horizontal-scroller .horizontal-scroller-controls button {
      font-size: 3.5rem;
      width: 40px;
  }

  @media (min-width: 768px) {
      .spotlight .news-tiles .news-tile .news-tile-image-and-date .news-tile-image {
          height: 100% !important;
          min-height: 500px;
      }

     .spotlight.wms-spotlight2 .news-tiles .news-tile .news-tile-image-and-date .news-tile-image {

          max-height: 500px!important;
      }

      .spotlight .news-tile-title-and-abstract {
          margin: 0px 100px 0px 25px;
      }

      .spotlight.featured .news-tile-title-and-abstract {
          margin: 0px 100px 0px 0px;
      }

    .spotlight-reverse.spotlight .news-tile-title-and-abstract {
       margin: 0px 0px 0px 100px!important;
    }

      .spotlight.featured .panel-body {
          padding: 30px 0px 0px;
      }

  }

  .spotlight .horizontal-scroller {
      margin: 0 -20px
  }

  .news-tiles .news-tile .news-tile-image-and-date a {
      width: 100%;
  }

  .panel {
      background-color: revert;
  }

  .spotlight .panel-body {
      display: flex;
      flex-direction: row-reverse;
      padding: 15px 15px 0;
  }

  .spotlight.spotlight-reverse .panel-body {
    flex-direction: row!important;
  }

  .spotlight .panel {
      border: none;
      margin-bottom: 0;
  }

  .spotlight .news-tiles .news-tile {
      padding-bottom: 0px;
  }

  .spotlight .news-tiles .news-tile .news-tile-image-and-date {
      margin: 0;
      height: auto;
      min-width: 50%;
  }

  .spotlight .news-tile-content {
      display: flex;
      align-items: flex-start;
  }

  .spotlight .news-tile-image-and-date {
      margin-right: 20px;
  }

  .spotlight .news-tiles .news-tile {
      flex-basis: 100%;
      max-width: 100%;
  }

  @media (max-width: 991px) {
      .spotlight .panel-body {
          display: flex;
          flex-direction: column;
      }

      .spotlight .news-tiles .news-tile .news-tile-image-and-date {
          width: auto;
      }

      .spotlight .news-tile-title-and-abstract {
          margin-left: 0;
          margin-top: 25px;
      }

      .container-component.container-component.boxstyle_.boxBlack {
          padding: 20px;
      }
  }

  /* Footer */

  .id7-page-footer .id7-app-footer {
      background: #000000;
      box-shadow: 0 0 0 100vmax #000000;
      clip-path: inset(0 -100vmax);
  }

  .id7-page-footer.id7-footer-coloured .id7-site-footer {
      background: #000000;
      color: #ffffff !important;
      box-shadow: 0 0 0 100vmax #000000;
      clip-path: inset(0 -50vmax -2px);
  }

  .id7-page-footer.id7-footer-coloured .id7-site-footer a,
  .id7-page-footer.id7-footer-coloured .id7-site-footer a:link,
  .id7-page-footer.id7-footer-coloured .id7-site-footer a:visited,
  .id7-page-footer.id7-footer-coloured .id7-site-footer h3 {
      color: white;
  }

  .social-media-icons i.fa-square {
      color: #ffffff;
  }

  .fa-inverse {
      color: #000000;
  }

  /* end footer */

  hr.invisible {
      margin: 30px;
      display: inline-block;
  }

  .hoverup .buttons-component {
      margin: 0px;
  }

  .hoverup .layout-row.layout-row--nowrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .hoverup p {
      margin-bottom: 0;
  }

  .hoverup {
      transition: all 0.3s ease;
      box-shadow: 0 -0px 0 0 #000;
      z-index: 1;
      position: relative;
      padding: 10px;
      margin-bottom: 0px;
  }

  .blackBoxContainer:hover .hoverup,
  .blackBoxContainer:focus-within .hoverup {
      box-shadow: 0 -15px 0 0 #000;
  }

  .blackBoxContainer:hover {
      cursor: pointer;
  }

  @media (max-width: 767px) {
      .layout-col:has(.blackBoxContainer) {
          margin-bottom: var(--w-ref-gridGutterWidth);
      }
      .blackBoxContainer .p50t {
          padding-top: 0;
      }
  }

  /* Course search styles */

  /* Rather than set a lot of explicit sizes, we set a few Flex constraints and let it wrap when required */
  .course-search .input-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-items: stretch;
  }

  .input-icon-wrapper {
      position: relative;
      flex-grow: 2;
      min-width: 48%;
  }

  .input-icon-wrapper i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #000000;
      pointer-events: none;
      font-size: 16px;
      z-index: 4;
  }

  #homepage-course-search::placeholder {
      color: #212529 !important;
  }

  #homepage-course-search {
      border: 2px solid black;
      background-color: var(--w-sys-colors-primary-300);
      padding-left: 36px;
  }

  #study-level {
      width: auto;
      border: 2px solid black;
      background-color: var(--w-sys-colors-primary-300);
      flex-grow: 1;
  }

  #search-courses i {
  	margin-left: 0.5em;
  }

  /* Mobile course search */
  @media (max-width: 767px) {
      .input-icon-wrapper {
          width: 100% !important;
          margin-right: 0px !important;
          position: relative;
      }
  }

  /* Button styles */

  .btn-branded {
      color: white;
      background-color: #000000;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      border-radius: 0px;
      align-items: center;
      box-shadow: 0 0 0 0px #000;
      transition: box-shadow 0.3s cubic-bezier(0.57, 0.19, 0.26, 1.15);
  }

  a.btn-branded {
      text-decoration: none;
  }

  .btn-branded:hover {
      background-color: #000;
      box-shadow: 0 0 0 5px #000;
  }

  .btn-branded i {
      font-size: 24px;
      margin-left: auto;
  }

  .btn-branded-white {
      color: white !important;
      /* padding: 10px 25px; */
      /* min-width: 110px; */
  }
	  
	    .btn-branded-yellow {
      color: var(--wms-yellow-100)!important;
     
  }
	  
	  .btn-branded-yellow i {
		  color: var(--wms-yellow-100)!important;
	  }
	  
	      .btn-branded-blue {
      color: var(--wms-blue-100)!important;
     
  }
	  
	    .btn-branded-blue i {
		  color: var(--wms-blue-100)!important;
	  }
	      .btn-branded-lavender {
      color: var(--wms-lavender-100)!important;
     
  }
	  
	    .btn-branded-lavender i {
		  color: var(--wms-lavender-100)!important;
	  }
	      .btn-branded-coral {
      color: var(--wms-coral-100)!important;
     
  }
	  
	    .btn-branded-coral i {
		  color: var(--wms-coral-100)!important;
	  }
	  
	  
	      .btn-branded-green {
      color: var(--wms-green-100)!important;
     
  }

	    .btn-branded-green i {
		  color: var(--wms-green-100)!important;
	  }
  .btn-branded-white i {
      /* margin-right: 10px; */
      px; */
      px; */
      px; */
      px; */
      px; */
      font-size: 16px;
  }

  .btn {
      border: none;
  }

  .news-tile-abstract .btn {
      margin-top: var(--w-ref-gridGutterWidth);
      margin-bottom: var(--w-ref-gridGutterWidth);
  }

  .news-tile-abstract .btn i {
      margin-left: 15px;
  }

  /* Specificity duplication spell to counteract the news CSS being declared after this */
  .news-tiles .news-tile.news-tile .news-tile-abstract {
      overflow: visible;
  }

  /* Other */

  .course-search {
      padding-bottom: 40px;
      margin-bottom: -22px !important;
  }

  .p50t {
      padding-top: 80px;
  }

  .header h2 {
      font-size: 7rem;
      font-weight: 700;
      line-height: 100%;
  }

  @media (max-width: 767px) {
    .header h2 {
        font-size: 6rem;
    }
  }

  .crest {
      margin-top: -30px;
  }

  .more-links-trigger .btn:focus {
      background-color: black !important;
  }

  @media (max-width: 767px) {
      .reverserow .layout-row {
          display: flex;
          flex-direction: column-reverse;
      }
  }

  .header.reverserow {
      padding-bottom: clamp(40px, calc(30vw - 20vh), 130px);
  }

  @media (min-width: 768px) {
      .header.crest-right {
          display: flex;
      }
      .header.crest-right::before {
          order: 1;
          margin-top: calc(var(--w-ref-gridGutterWidth) * -1);
      }
  }

  .hero {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100vw - 50px);
      padding-right: 64px;
  }

  @media (max-width: 767px) {
      .hero {
          padding-right: 24px;
      }
  }



  .use-more-links-popover {
      background-color: black;
      color: #a499f4 !important;

      font-weight: bold;
      padding: 8px;
      border-radius: 0px;
      font-size: 1.05em;
  }

  .layout-col .container-component.boxstyle_ {
      display: flex;
      flex-direction: column;
  }

  .layout-col .container-component.boxstyle_ .bottom-align {
      margin-top: auto;
  }

  .boxBlack {
      background-color: black;
      --w-sys-colors-page: black;
      --w-sys-colors-page-contrast: white;
  }

  .boxBlack p,
  .boxBlack h2,
  .boxBlack a {
      color: white !important;
      text-decoration: none;
  }

  /* The black box is contained by the link */
  a:has(.boxBlack) {
      text-decoration: none;
  }

  .boxBlack h2 {
      font-size: 4em;
      font-weight: bold;
  }

  .roundBtn {
      margin-bottom: 0;
  }

  .roundBtn i.icon-end {
      margin: 0px;
  }

  .roundBtn a.btn.btn-default {
      border-radius: 50%;
      background-color: transparent;
      height: 40px;
      width: 40px;
      border: 2px var(--w-sys-colors-page-contrast) solid;
      transition: transform 0.3s cubic-bezier(0.65, 0.23, 0.1, 1.69);
      color: var(--w-sys-colors-page-contrast) !important;
  }

  .roundBtn a.btn.btn-default:hover {
      transform: scale(1.2);
  }

  .line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      border-bottom: 1px solid #000000;
      /* Your border line */
      z-index: 1;
  }

  .white-bg {
      background: #fff;
      box-shadow: 0 0 0 100vmax #fff;
      clip-path: inset(0 -100vmax);

  }

  .popover-inner {
      padding: 20px;
  }

  .back-to-top-link {
      display: none;
  }

  @media (max-width: 691px) {
      .back-to-top-link {
          display: inline-block;
      }
  }

  .course-search h2 {
      color: #212529;
      font-weight: 600;
  }

  .search-inputs {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
  }

  .search-input label {
      color: white;
  }

  /* Sixtieth */

  .sixtieth h2 {
      font-size: 13rem;
      font-weight: 600;
      margin-bottom: 0;
      line-height: 1;
  }

  .sixtieth {
      font-size: 1.8rem;

      & a {
          font-weight: bold;
          text-decoration-thickness: 2px;
          text-decoration-color: black;
          &, &:link, &:visited {
              color: black;;
          }
          &:hover {
              text-decoration-color: var(--w-sys-colors-primary-700);
          }
      }
  }

  .sixtieth .layout-col {
      justify-content: center;
  }
  @media screen and (max-width: 767px) {
      .sixtieth .layout-row {
          /* Image first */
          display: flex;
          flex-direction: column-reverse;
      }
      .sixtieth h2 {
          font-size: 10rem;
      }
  }
  /* END Sixtieth */

  /* Box links (black row of links) */
  @media (min-width: 768px) and (max-width: 991px) {
      /* 2x2 layout */
      .box-links .layout-row {
          row-gap: var(--w-ref-gridGutterWidth);
      }
      .box-links .layout-col--3 {
          width: 50%;
      }
  /* END Box links */

  /* Responsive styles for screens less than 1200px wide */
  @media screen and (max-width: 1200px) {
      #warning-message {
          width: 100% !important;
      }
  }

  /* Reset some utility UI */
  dialog h2 {
      font-size: 2.5rem;
  }

  .news-container .news-tile .news-tile-abstract a {
  background-color: transparent !important;
  color: black !important;
  }