/* Research 2021 Additional CSS 
research2021-additional.css
T4 Media ID: 542758
Last edited: 008/02/2023 v1
*/


/*  */
.wysywig img {
    padding: 20px;
}


/* Increase padding of content inside accordions */
.card-body p {
    margin-bottom: 20px;
}


/* Blockquote, at widest browser width, increase the space availale for text */
@media (min-width: 1600px) { 
    .wysywig blockquote {
        padding: 80px 120px;
    }
     
    .wysywig blockquote:before {
        left: 25px;
    }   
}


/*  Increase the margin around each accordion*/
.accordion {
    margin: 20px 0px 20px 0px;
}



/* Publications Section: Give in-page anchors more space above each link */
.wysywig .H2:before {	
	content: '';
	display: block;
	position: relative;
	width: 0;
	height: 180px;
	Xmargin-top: -180px;
}


/* Reduce the font size here */

@media (min-width: 992px) {
		.component-title {
			font-size: 42px;
		}
	}




/* A NEW Button for Newsletter in the header */

/* Reset and flex container for navigation buttons */
.nav-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-buttons li {
  list-style-type: none;
  padding: 0 5px;
  box-sizing: border-box;
}

/* Base button styling shared by both buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  height: 40px;
  box-sizing: border-box;
}

/* Research support button styling */
.button--navy {
  background-color: #003366;
  color: #fff;
}

/* Newsletter button styling with updated background gradient */
.button--newsletter {
  background: linear-gradient(135deg, #3e7de5, #337ad7);
  color: #fff;
  padding: 10px 20px;
  height: 40px;
}

.button--newsletter:hover {
  color: silver;
  text-decoration: none;
}

/* Button icon container with perspective for 3D effect */
.button--newsletter .button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  min-width: 24px;
  perspective: 800px;
}

/* Envelope icon styling (Bootstrap-style) */
.envelope-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: #fff;
  transform-style: preserve-3d;
}

/* Envelope flap styling – this part will be animated */
.envelope-flap {
  transform-origin: center bottom;
  transition: transform 0.6s ease-in-out;
}

/* Keyframe animation for a dynamic “opening” effect */
@keyframes envelopeOpen {
  0% {
    transform: rotateX(0);
  }
  40% {
    transform: rotateX(-25deg);
  }
  60% {
    transform: rotateX(-20deg);
  }
  100% {
    transform: rotateX(-20deg);
  }
}

/* Apply the envelope open animation on hover */
.button--newsletter:hover .envelope-flap {
  animation: envelopeOpen 0.6s forwards;
}

/* Envelope base remains static */
.envelope-base {
  /* No transformation needed */
}

/* Arrange the two-line text with left alignment (desktop view) */
.button--newsletter .button-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  line-height: 1;
  font-size: 12px;
}

/* Vertical pipe divider styling */
li.divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 18px;
  color: #ccc;
  height: 40px;
  box-sizing: border-box;
}

/* Responsive adjustments for screens 1200px wide or below */
@media (max-width: 1200px) {
  /* Stack the list items vertically */
  .nav-buttons {
    flex-direction: column !important;
    align-items: stretch;
  }
  
  /* Each list item takes full width with vertical spacing */
  .nav-buttons li {
    width: 100% !important;
    margin: 5px 0;
    padding: 0 !important;
  }
  
  /* Hide the divider */
  .nav-buttons li.divider {
    display: none !important;
  }
  
  /* Ensure buttons fill the available width and center their content */
  .nav-buttons li a.button {
    width: 100% !important;
    justify-content: center;
    box-sizing: border-box;
  }
  
  /* Change newsletter button text layout to a single centered line */
  .button--newsletter .button-text {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  /* Add a small left margin to the second text span for extra space */
  .button--newsletter .button-text .text-line:nth-child(2) {
    margin-left: 6px;
  }
}

/* Further responsive adjustments for very small devices */
@media (max-width: 480px) {
  .button {
    padding: 6px 12px;
    font-size: 0.8rem;
    height: 32px;
  }
  .button--newsletter .button-text {
    font-size: 10px;
  }
  li.divider {
    font-size: 14px;
    height: 32px;
  }
}