/* ======================== Page setup: Black background / navigation ========================== */
html, article, .mainContentContainer {
  background-color: #000 !important;
  color: #fff !important; 
}

/* Header background */
.headerContainer,
.headerContent,
.secondMenuBar {
  background-color: #000;
}

/* Faculty title text white */
.home-link {
  color: #fff;
}

/* Primary nav */
/* Hover/focus for mega menu items (exclude home link) */
.menuItem,
.menuItem .megaLink {
  transition: none !important;
}

/* Normal state */
.primaryNav .megaMenu > .menuItem > a:not(.home) {
  color: #fff !important;
  background-color: #000 !important;
}

/* Hover + focus state */
.primaryNav .megaMenu > .menuItem > a:hover:not(.home),
.primaryNav .megaMenu > .menuItem > a:focus:not(.home) {
  background-color: #f0f0f0 !important;
  color: #000 !important;
}

/* Hover/focus for home link */
.primaryNav .home:hover,
.primaryNav .home:focus {
  color: #fff !important;
  background-color: #000 !important;
}

.primaryNav .megaMenu > .menuItem > a {
  display: block;
  height: 100%;
}

/* Mobile menu / search icons */
.menu-search-icons a,
.menu-search-icons button,
.mobile-menu-icon span {
  color: #fff;
}

/* === Hide breadcrumb nav === */
#breadcrumb-share-container {
  display: none !important;
}

/* Smooth scroll behaviour */
html {
  scroll-behavior: smooth;
}

/* Sticky nav */
.sticky-nav.wide a:visited {
  color: #000;
}

.sticky-nav.wide a:hover {
  color: #6b2c91;
} 

/* ================================== Links =================================== */

.mainContentContainer a, .mainContentContainer a:visited {
  color: #fff;
  font-weight: 600;
  text-decoration-
}


.mainContentContainer a:hover, .mainContentContainer a:focus, .mainContentContainer a:active {
  color: #c1bfff;
  font-weight: 600;
}




/* ============================== Header styling ================================== */
.sticky-nav-wrapper h2, .grid-cell:only-child .copy h2:first-child {
  color: #e5e4db;
  font-size: 3.7rem;
  font-weight: 700;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.sticky-nav-wrapper p, .sticky-nav-wrapper span {
  font-weight: 100;
  color: #e5e4db;
  font-weight: 100;
}

/* Ensure parent container centres content properly */
.sticky-nav-wrapper .copy.first-heading-h2 {
  display: flex;
  justify-content: center;
  width: 100%;
  color: #e5e4db;
}

/* Remove max width of h2 */ 
#d\.en\.1066038 .copy h2, #d\.en\.1067794 .copy h2, #d\.en\.1065965 .copy h2 {
  max-width: none;
}

/* Align centre for sub-heading div */
#d\.en\.1066038 .sub-heading, #d\.en\.1067794 .sub-heading {
  display: flex;
  justify-content: center;
}

#d\.en\.1066038 p, #d\.en\.1066038 span, #d\.en\.1067794 p {
  text-align: center;

}


/* ================================= News carousel =====================================*/
.carousel {
  margin :20px 0;
  background: #e5e4db;
}

.carousel-wrapper {
  background: #e5e4db;
}

.carousel-prev, .carousel-next {
background-color: #e5e4dbe6;
}

/* ============================== Styling T4 card assets ================================== */
/* ------- Remove flex-grid margin ------ */
.flex-grid {
margin: 0;
}

/* ----- Text padding ----- */
.grid-cell .copy {
  padding: 3rem;
}

/* ------- Removing shadow ------- */
.grid-cell .card:not(.no-shadow)
{
  box-shadow: none;
}

/* ------- Why Manchester promo box ------- */
#d\.en\.1065747 p {
  color: #fff;
}

#d\.en\.1065747 h3 {
 display: none;
}

#d\.en\.1065747 {
  background: linear-gradient(0deg, #3c1053bd 0%, #000 100%);
  padding: 0rem 8rem;
}

/* ------- Quote promo box ------- */
#d\.en\.1065748 p, #d\.en\.1065961 p {
  color: #fff;
}

#d\.en\.1065748 h3, #d\.en\.1065961 h3 {
 display: none;
}

#d\.en\.1065961 .copy {
  text-align: center;      
  max-width: 800px;           
  margin: 0 auto;           
}

#d\.en\.1065961 .copy > div:first-of-type {
  max-width: 75rem;
}


/* ==================================== Two Intro boxes ==========================================*/
#d\.en\.1065965 .flex-grid > .grid-cell {
  padding: 4rem;
  margin: 1.5rem;
}

/* LEFT cell */
#d\.en\.1065965 .grid-cell:first-child {
  background: linear-gradient(14deg, rgb(209 226 96 / 0%), #e5e4db3b, rgb(209 226 96 / 0%));
}

/* RIGHT cell */
#d\.en\.1065965 .grid-cell:last-child {
  background: linear-gradient(14deg, rgb(209 226 96 / 0%), #e5e4db3b, rgb(209 226 96 / 0%));
}


#d\.en\.1065965 p {
  color: #fff !important;
}

/* H2 padding */
#d\.en\.1065965 .copy h2 {
  padding-bottom: 8rem;
  padding-top: 2rem;
}


/* ============================== People list accordion ================================== */
.grid-cell .copy-accordion .copy {
  max-width: 100%;
 }

.accordion-item-content li,
.accordion-item-content li a {
  color: #fff;
}

.accordion {
  padding: 0!important;
  margin: 0!important;
}

.card.copy-accordion .padding {
  padding: 0 40px !important;
}

@media (min-width: 600px) {
    .landing .accordion-item-content {
        max-width: 100%;
    }
}

.accordion-item-button {
  background: linear-gradient(35deg, #e5e4db 0%, #f1efec 60%, #e5e4db 100%);
  font-size: 2rem;
}

.accordion-item-button span {
  color: #000;
}

#d\.en\.1065985 .copy {
  padding: 0!important;
}


/* =========================== Study filter list =========================== */
#d\.en\.1066110 img {
  display: none;
}

#d\.en\.1066110 p, #d\.en\.1066110 h3 {
  color: #fff;
}

#d\.en\.1066110 h3 {
  font-weight: 600;
}

#d\.en\.1066110 a {
  color: #fff;
}


#d\.en\.1066110 p.morePurple::before {
  content: "→  ";
  font-size: 2rem;
  color: #c1bfff;
}


#d\.en\.1066110 p.morePurple {
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: 5px;
  font-weight: 600;
  transition: 
    transform 0.2s ease,
    text-decoration-thickness 0.2s ease,
    text-decoration-color 0.2s ease;
}


#d\.en\.1066110 a:hover p.morePurple,
#d\.en\.1066110 a:focus p.morePurple {
  transform: translateX(6px);
  text-decoration-thickness: 3px;
  text-decoration-color: #c1bfff;
}


.grid-list-filter {
  background: #000;
}

#filter-1066109-label {
  color: #e5e4db;
  padding-bottom: 3rem;
  font-size: 3.7rem !important;
  font-weight: 700 !important;
}

.fieldsetInnerContainer p, .fieldsetInnerContainer label { 
  color: #fff;
}

.grid-list-filter .formRowContainer [type=radio]:checked+label, .grid-list-filter .formRowContainer [type=radio]:focus+label, .grid-list-filter .formRowContainer.filter-buttons label:hover {
  border: 1px solid #e5e4db;
  border-radius: 0;
  background: linear-gradient(35deg, #e5e4db 0%, #f1efec 60%, #e5e4db 100%);
  color: #000;
  outline: 0;
}

.grid-list-filter .formRowContainer.filter-buttons label {
  border: 1px solid #e5e4db;
  border-radius: 0;
  background: #000;
  color: #e5e4db;
}

.landing .grid-list-filter {
  border-top: 0;
  border-bottom: 1px solid #e5e4db;
}

/* removes default purple arrow */
.morePurple {
  background: none!important;
}


/* ============================== Pull-out box (Let's have a conversation) ===============================*/
html body.landing div#pullout-1065978.pulloutbox.pulloutbox__grey.fullwidth {
  background: #000 !important;
  border-left: 5px solid #c1bfff !important;
}

.pulloutbox__grey h2, .pulloutbox__grey p {
  text-align: left !important;
  color: #e5e4db !important;

}

.pulloutbox__grey h2 {
  font-weight: 700;
  font-size: 3.7rem;
}


.pulloutbox__grey a {
  color: #fff;
}


/* ======================= Bullet points styling ========================== */
/* Remove default t4 bullet styling */
#facilities-nav ul,
#facilities-nav li {
  list-style: none !important;
  margin: 0;
  padding: 0;
} 

#facilities-nav ul li::before {
  content: none !important;
  display: none !important;
}

/* remove purple bullet img */
#facilities-nav li {
  background: none !important;
}

/* ======================= Quote card and copy asset ========================== */
.grid-cell {
  padding-left: 0;
}

/* ======================= Facilities accordion ========================== */
/* Remove padding from header */
#d\.en\.1067794 .copy {
   padding: 0;
}


/* Subheading text white */
#d\.en\.1067794 p {
   color: white;
}


/* Navigation panel */

#facilities-nav {
  background: #000;
}

.facility-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.facility-tab.active {
  background: rgba(255,255,255,0.2)!important;
}

.facility-tab .number {
  margin-right: 0.5rem;
}

/* Plus icon */

.facility-tab .icon {
  font-size: 3rem;
  font-weight: 100;
  transition: transform 0.3s ease;
}

/* rotate on hover */
.facility-tab:hover .icon {
  transform: rotate(45deg);
}

/* rotate when active */
.facility-tab.active .icon {
  transform: rotate(45deg);
}


/* Facility description box */
#facilities-content {
  background: #fff;
  padding: 3rem 1.5rem;
}

.facility-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Remove default list styling */
.facilities-list,
.facilities-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.facilities-list li::marker {
  display: none;
}

.facilities-list li::before {
  display: none !important;
  content: none !important;
}

/* =========================
   ACCORDION ROW
========================= */

.facility-item {
  border-bottom: 1px solid #fff;
}

.facility-tab span {
  padding: 0 2rem;
}

.facility-tab:hover {
  background: rgba(255,255,255,0.18);
}

.facility-item.active .facility-tab {
  background: rgba(255,255,255,0.18);
}

/* =========================
   PLUS ICON
========================= */

.facility-icon {
  font-size: 4rem;
  font-weight: 100;
  transition: transform 0.35s ease;
}

/* rotate when hover or open */
.facility-tab:hover .facility-icon,
.facility-item.active .facility-icon {
  transform: rotate(45deg);
}

/* =========================
   ACCORDION PANEL
========================= */

.facility-panel {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
  background: #fff;
}

/* open state */
.facility-item.active .facility-panel {
  max-height: 1000px;
}

/* =========================
   PANEL LAYOUT
========================= */

.facility-inner {
  display: flex;
  align-items: stretch;
  background: #000;
  gap: 3rem;
  padding: 3rem 2rem;

}

/* left image */

.facility-image {
  flex: 1;
}

.facility-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* right content box */

.facility-text {
  flex: 1;
  background: linear-gradient(35deg, #e5e4db 0%, #f1efec 60%, #e5e4db 100%);
  padding: 4rem;
  position: relative;

}

/* text */
.facility-text h3 {
  margin-top: 0;
  color: #000;
  font-size: 2.5rem;
  font-weight: 600;

}

.facility-text p {
  color: #000;
  font-size: 1.5rem;
}

/* =========================
   ARROW CTA
========================= */

.facility-cta {

  position: absolute;

  right: 2.5rem;
  bottom: 2.5rem;

  display: inline-flex;
  align-items: center;

  text-decoration: none;

}

/* arrow line */
.facility-cta::before {

  content: "";

  width: 60px;
  height: 2px;

  background: #000;

  transition: all 0.3s ease;

}

/* arrow head */
.facility-cta::after {

  content: "";

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;

  border-left: 10px solid #000;

  margin-left: -1px;

  transition: transform 0.3s ease;

}

/* hover animation */

.facility-cta:hover::before {
  width: 80px;
}

.facility-cta:hover::after {
  transform: translateX(6px);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .facility-text {
    padding: 4rem;
  }

  .facility-inner {
    flex-direction: column;
  }
}

/* ======================= Hero banner ========================== */
/* Banner container */
#banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

/* Banner image */
#banner img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay */
.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 11%;
  padding-right: 11%;
  padding-top: clamp(4rem, 8vw, 8rem);   /* desktop top spacing */
  box-sizing: border-box;
}

h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: rgb(229, 228, 219);
    line-height: 2;
    padding: 0px;
}

/* banner text box */
.subtitle {
  font-size: 1.5rem;
  padding: 0 0 3rem;
}

.banner-text {
  width: 100%;
  padding: 3rem 10%;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* CTA */
.banner-cta {
  margin-top: 2rem;
  font-size: 1.5rem;
}

/* .cta-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  border: 1px solid #fff;
  border-radius: 25px;
  text-decoration: none !important;
  color: #fff !important;
  background: transparent;
  font-weight: 600;
} */


/* Promo banner (Postgraduate research) */
#promo {
  position: relative;
  text-align: left;
  width: 100%;
  overflow: hidden;
  margin: 0 auto 6% auto;
}

#promo img {
  width: 100%;
  height: auto;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

#promo h2 {
  margin-left: 0;
  font-size: 3.7rem;
  font-weight: 700;
  text-align: left;
}

#promo .promo-overlay a::before {
  content: "→ ";
  font-size: 2rem;
  color: #c1bfff;
}


#promo .promo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem;
  z-index: 2;
}

.promo-overlay a, .promo-overlay a:visited {
  color: #fff;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: 5px;
  font-weight: 600;
  transition: 
    transform 0.2s ease,
    text-decoration-thickness 0.2s ease,
    text-decoration-color 0.2s ease;
}

.promo-overlay a:hover,
.promo-overlay a:focus {
  transform: translateX(6px);
  text-decoration-thickness: 3px;
  text-decoration-color: #c1bfff;
}

#d\.en\.1066164 {
  background: radial-gradient(circle, #e6ff994f, rgb(111 100 133 / 45%), rgb(209 226 96 / 0%));
}


#d\.en\.1066164 p, 
#d\.en\.1066164 h2, 
#d\.en\.1066164 a {
  color: white;
  margin-left: 0;
  text-align: left;
}


#d\.en\.1066164 a::before, .cta-button::before {
  content: "→  ";
  font-size: 2rem;
  color: #c1bfff;
}


#d\.en\.1066164 a, .cta-button {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: 5px;
  font-weight: 600;
  transition: 
    transform 0.2s ease,
    text-decoration-thickness 0.2s ease,
    text-decoration-color 0.2s ease;
}

#d\.en\.1066164 a:hover,
#d\.en\.1066164 a:focus, 
.cta-button:hover,
.cta-button:focus {
  transform: translateX(6px);
  text-decoration-thickness: 3px;
  text-decoration-color: #c1bfff;
}

/* Black transparent overlay 
#promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); 
  z-index: 1;
} */

/* Container for text + button */
#promo .promo-overlay,
#promo .banner-cta {
  position: absolute;
  left: 50%;
  transform: translateX(-56%);
  z-index: 2;
  width: 90%;
  max-width: 800px;
}

/* Vertically centre text block */
#promo .promo-overlay {
  top: 10%;
}


/* White heading + paragraph */
#promo h3,
#promo p {
  color: #fff;
}

#promo h3 {
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 600;
}

#promo p {
  margin-bottom: 1.5rem;
}


/* Mobile */
@media (max-width: 768px) {
  #banner img {
    height: 500px;
    object-position: 1% center;
  }

 .banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 13%;
  padding-right: 13%;
  padding-top: clamp(4rem, 8vw, 8rem);
  box-sizing: border-box;
}

  .banner-text {
    padding: 2.5rem 1.5rem;
  }

  .number {
    font-size: 2.4rem;
  }

  #promo img {
    min-height: 460px;
  }

  #promo .promo-overlay {
    padding: 1.5rem;
  } 
}


/* ======================= Research strengths expanding cards ========================== */
#d\.en\.1066038 .copy {
  padding: 0!important;
}

/* =========================
   EXPANDING CARDS PADDING
========================= */
@media (min-width: 1000px) {
.grid-expanding-cards .card-expander-content.reverse-row .copy {
  padding: 8rem;
}
}

/* =========================
   SECTION BACKGROUND
========================= */
#d\.en\.1065778 {
  position: relative;
  padding: 6rem 0;
  margin: 0 auto 0;
}


/* =========================
   MAKE COMPONENT TRANSPARENT
========================= */
#d\.en\.1065778 .grid-expanding-cards,
#d\.en\.1065778 .cards {
  background: transparent !important;
}

/* Remove default light theme grey */
#d\.en\.1065778 .variant-light .card .card-inner {
  background: transparent !important;
}


/* =========================
   COLLAPSED CARDS (DEFAULT)
========================= */

/* Titles white */
#d\.en\.1065778 .card .title {
  color: #fff !important;
}

/* Icons stay white */
#d\.en\.1065778 .card .icon,
#d\.en\.1065778 .card svg {
  color: #fff !important;
  fill: #fff !important;
}


/* =========================
 BLACK HOVER + ACTIVE
========================= */

#d\.en\.1065778 .card:hover .card-inner,
#d\.en\.1065778 .card.is-expanded .card-inner {
  background-color: rgba(0, 0, 0, 0.6) !important;
  transition: background-color 0.3s ease;
}


/* =========================
   EXPANDED PANEL
========================= */

/* White expanded area */
#d\.en\.1065778 .card.is-expanded .card-expander {
  background: #fff !important;
}

/* Expanded text black */
#d\.en\.1065778 .card-expander .copy,
#d\.en\.1065778 .card-expander .copy p,
#d\.en\.1065778 .card-expander .copy h3 {
  color: #000 !important;
}


/* =========================
   ARROW BEHAVIOUR
========================= */

/* Hide arrow by default */
#d\.en\.1065778 .expand {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show arrow on hover or expanded */
#d\.en\.1065778 .card:hover .expand,
#d\.en\.1065778 .card.is-expanded .expand {
  opacity: 1;
}

/* Keep arrow white */
#d\.en\.1065778 .expand svg {
  fill: #fff !important;
}


/* =========================
   MOBILE 
========================= */

@media (max-width: 768px) {

  #d\.en\.1065778 {
    padding: 4rem 0;
  }

  #d\.en\.1065778 .card.is-expanded .card-inner {
    background-color: rgba(102, 0, 153, 0.7) !important;
  }

}

/* =============================
   SECTION HEADER CSS HACK
============================= */

#d\.en\.1054957 > h2:nth-child(1),
#d\.en\.1065778 > h2:nth-child(1),
#d\.en\.1065950 > h2:nth-child(1),
#d\.en\.1065962 > h2:nth-child(1),
#d\.en\.1065979 > h2:nth-child(1),
#d\.en\.1065935 > h2:nth-child(1) { 
	display:none;
}

/* ==============================================
    CSS ACCESSIBILITY CONTRAST HACK 
============================================== 

#d\.en\.1055117 h2, .grid-expanding-cards > div.cards > div.card > button.card-inner > div.copy > p {
	text-shadow: -1px 0 2px #2f3437, 0 1px 2px #2f3437, 1px 0 2px #2f3437, 0 -1px 2px #2f3437;
} */

/* ===================================================
   FACILITY CTA MINIMUM TARGET AREA ACCESSIBILITY HACK 
=================================================== */

.facility-cta {
    padding: 30px 0 0 20px;
}

/* ===========================================
   FACILITY LINK ARROW SIZE ACCESSIBILITY HACK 
=========================================== */

.facility-cta::before {
    height: 20px;
}

.facility-cta::after {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
	border-left: 20px solid #000;
}

/* =========================================
   STICKY NAV COLOUR OVERRIDE 
========================================= */

.sticky-nav nav a {
	color: #000;
}

/* =========================================
      EXPANDING CARDS BACKGROUND IMAGE
========================================= */
#space-exp-cards-bg-image {
	background-image: url(https://webassets.manchester.ac.uk/faculty/fse/bespoke-shared-templates/fse-faculty/research/space/images/Expanding_cards_banner_1190x550.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}