/* UKRI Digital Research Skills Catalyst Styling */

/* Overall page style */
.navbar {
  padding: 0;
  margin: 0;
}

.navbar-brand img {
  max-height: 80px;
  width: 250px;
}

h1 {
  font-size: 2em;
  color: #2E2D62;
  text-align: center;
}

h2 {
  border-bottom: none;
  padding: 0;
  margin: 1em 0;
}

/***********************************
Move the burger menu to the right
***********************************/

/* .navbar-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
} */

/* .navbar-brand-container {
  order: 0; 
  margin-right: auto;
  border: 1px solid pink;
} */

/* .navbar-toggler {
  order: 9999;
  margin-left: auto;
  border: 1px solid green;
} */

/***********************************
The main block headers
***********************************/

#quarto-document-content {
  /* Removes the extra margin above the full-width header */
  margin-top: 0;
}

header#title-block-header {
  display: block;
  background-color: #2E2D62;
  /* border-radius: 8px; */
  /* Set L & R margins to -1.5em to make this full-width as ordered.*/
  margin: 0 -1.5em 1em -1.5em;
  padding: 4em;
}

header#title-block-header h1 {
  font-size: 2em;
  /* color: #F5F3EF; */
  color: white;
  text-align: center;
}

header#title-block-header p.subtitle {
  font-size: 1.25em;
  color: #F5F3EF;
  text-align: center;
}

/***********************************
The Main index page search box
***********************************/

/* This is the entire navy search box */
.primary-search {
  background: #2E2D62;
  padding: 2em 2em 0em 2em;
  margin: 0 -1.5em 0 -1.5em;
}

/* 1. Set the Flex Container */
.primary-search div.cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 15px;
}

.primary-search div.cell div.cell-output-display:nth-child(1 of .cell-output-display) {
  width: 95%;
}

.primary-search div.cell div.cell-output-display:nth-child(1 of .cell-output-display) div div form {
  flex-grow: 1;
  width: 100%;
}

.primary-search div.cell div.cell-output-display:not(:nth-child(1 of .cell-output-display)) {
  flex-shrink: 1;
  width: 8em;
}

.primary-search div.cell div.cell-output-display:not(:nth-child(1 of .cell-output-display)) div {
  width: 100%;
}

/* Format the search box */
.primary-search input[type="text"] {
  border: 1px solid #29A69D;
  border-radius: 6px;
  padding: 6px;
  box-shadow: none;
  margin: 5px;
}

.primary-search input[type="text"]::placeholder {
  color: color-mix(in srgb, #2E2D62, white 75%);
  opacity: 1;
}

.primary-search button {
  width: 8em;
  border: 1px solid #29A69D;
  background: #FFFFFF;
  color: #2E2D62;
  border-radius: 6px;
  padding: 6px;
  box-shadow: none;
  margin: 5px;
}

.primary-search button:hover {
  background: #FFFFFF;
  color: #29A69D;
}

/***********************************
Search filters
***********************************/
div.search-filters {
  /* border: 1px solid green; */
  background: #2E2D62;
  margin: 0 -1.5em 0 -1.5em;
  padding: 0 2em 2em 2em;
}

a#toggle-filters {
  display: block;
  margin: auto;
  text-align: center;
  width: 8em;
  border: 1px solid #29A69D;
  background: #FFFFFF;
  color: #2E2D62;
  border-radius: 6px;
  padding: 6px;
  box-shadow: none;
  text-decoration: none;
  line-height: normal;
}

div#search-filters {
  color: #F5F3EF;
}

div#search-filters form {
  width: 100%;
}

div#search-filters select {
  border: 1px solid #29A69D;
  color: #2E2D62;
  border-radius: 6px;
  padding: 6px;
  box-shadow: none;
  margin: 5px;
}

div#search-filters button {
  width: 8em;
  border: 1px solid #29A69D;
  background: #FFFFFF;
  color: #9088A4;
  border-radius: 6px;
  padding: 2px 6px;
  box-shadow: none;
  margin: 5px;
  margin-left: auto;
}

div#search-filters button:hover {
  background: #FFFFFF;
  color: #29A69D;
}

/***********************************
The Main index page search results
***********************************/

.primary-search-results {
  border: 1px solid #DDD9E2;
  /* border-radius: 8px; */
  font-size: 0.75em;
  margin: 1em 0 0 0;
  padding: 1em;
}

.observablehq {
  display: block !important;
  grid-template-columns: none !important;
}

/* The Course data block */
div.course-data {
  width: 100%;
  border: 1px solid #DDD9E2;
  background: #F5F3EF;
  border-radius: 0;
  padding: 1em 1em 0 1em;
  margin: 1em auto;
  font-size: 0.8rem;
}

div.course-data h3, div.course-data a {
  color: #2E2D62;
  font-size: 1rem;
  margin-top: 0;
  font-weight: bold;
}

div.course-data div.course-data-extras {
  display: none;
  width: 100%;
  font-size: 0.75rem;
}

div.course-data .toggle-state {
  display: none;
}

div.course-data .toggle-button {
  width: 100%;
  color: #9088A4;
  text-align: right;
  font-size: 0.75em;
}

div.course-data .toggle-state:checked ~ .toggle-button::after {
content: "collapse details";
}
div.course-data .toggle-button::after {
  content: "expand details";
}

div.course-data .toggle-state:checked ~ .course-data-extras {
  display: block;
}

/***********************************
Extra featured course decoration
***********************************/

div.featured {
  border-left: 5px solid #29A69D;
  position: relative;
}

.featured::after {
  content: "featured"; 
  position: absolute;
  top: 5px;
  right: 10px;
  color: #29A69D;
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
}

/***********************************
Specific course data tables
***********************************/

.course-data-extras table {
  width: 100%;
  background: #F5F3EF !important;
}

.course-data-extras table tr th, td {
  border-bottom: 1px solid #DDD9E2;
}

.course-data-extras table tr:last-child th, .course-data-extras table tr:last-child td {
  border-bottom: none;
}
.course-data-extras table tr th {
  width: 10em;
}

/***********************************
Specific extra information "chips"
***********************************/

div.course-data-extras p {
  width: fit-content;
  padding: 0 5px;
  border-radius: 1em;
  margin: 0.25em 0;
}

div.course-data-extras td {
  /* border: 1px dotted red; */
  padding: 0.25em 0;
  margin: 0;
}

td.pre-reqs p {
  border: 1px solid #FA6862;
  background: color-mix(in srgb, #FA6862, white 75%);
}

td.teaches p {
  /* width: fit-content; */
  border: 1px solid #29A69D;
  background: color-mix(in srgb, #29A69D, white 75%);
}

td.credit p a {
  font-size: 1em;
}

/***********************************
"Empty selection" formatting
***********************************/

div.course-data-empty {
  width: 100%;
  border: none;
  padding:1em;
  margin:1em 0;
}

div.course-data-empty p {
  text-align: center;
  color: #0A2441;
}

/***********************************
News div formatting
***********************************/

div.news {
  position: relative;
  margin: 1em auto;
  background: #F5F3EF;
  border: 1px solid #DDD9E2;
  border-radius: 8px;
  padding: 0 1em;
}

div.news::after {
  content: "news"; 
  position: absolute;
  top: 5px;
  right: 10px;
  color: #29A69D;
  font-size: 1em;
  line-height: 1;
}

div.training {
  position: relative;
  margin: 1em auto;
  background: #F5F3EF;
  border: 1px solid #DDD9E2;
  border-radius: 8px;
  padding: 0 1em;
}

div.training::after {
  content: "training"; 
  position: absolute;
  top: 5px;
  right: 10px;
  color: #29A69D;
  font-size: 1em;
  line-height: 1;
}

div.news h2, div.training h2 {
  font-size: 1.25em;
  color: #2E2D62;
}