/**
 * @file
 * Component styles for the MSU Extension theme.
 */
/* msu-alert::part(base) {
 color: var(--alert-color, red);
} */

/* Required Drupal fields and Webform fields get an asterisk. */
.form-item__label.form-required::after,
.fieldset__label.form-required::after {
  display: inline-block;
  margin-inline: 0.15em;
  content: "*";
  color: #c61f1f;
  font-size: 0.875rem;
}
label.form-required::after {
  margin-inline: 0.15em;
  content: "*";
  vertical-align: text-top;
  color: #c61f1f;
  background: none;
  line-height: 1;
}

/* Object Fit */
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-fill {
  object-fit: fill;
}
.object-none {
  object-fit: none;
}
.object-scale-down {
  object-fit: scale-down;
}

/**
 * Header
 */
#block-msuext-account-menu msu-avatar {
  padding: 2px;
  border: 2px solid var(--msu-white);
}

/**
 * Primary Menu.
 *
 * This should be rolled up into a 'primary menu' web component.
 */
msu-header *[slot="primary-menu"] ul.menu {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  align-items: center;
  /* gap: 1.5rem; */
  list-style: none;
  padding: 0;
  margin: 0;
}
msu-header *[slot="primary-menu"] ul.menu li a {
  color: var(--msu-white, #fff);
  padding: var(--msu-space-md);
  text-decoration: none;
  display: block;
  font-weight: 500;
}
msu-header *[slot="primary-menu"] ul.menu li a:hover,
msu-header *[slot="primary-menu"] ul.menu li a:active,
msu-header *[slot="primary-menu"] ul.menu li a:focus {
  background-color: var(--msu-white, #fff);
  color: var(--msu-maroon, #5d1725);
}

/**
 * Submenus.
 *
 * Hide them for now.
 */
msu-header *[slot="primary-menu"] ul.menu ul {
  display: none;
}

/**
 * User Menu.
 *
  * This should be rolled up into a 'user menu' web component.
 */
msu-header *[slot="user-menu"] ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
msu-header *[slot="user-menu"] ul.menu li a {
  color: var(--msu-white, #fff);
}

/**
 * Breadcrumbs.
 *
 * Should be rolled up into a 'msu-breadcrumbs' web component.
 */
.region--breadcrumbs {
  padding: var(--msu-space-lg) var(--msu-space-0);
  box-shadow: 0 0.25rem 3rem rgba(0, 0, 0, 0.09);
}
.breadcrumbs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.5rem;
}
.breadcrumb-item.active {
  font-weight: bold;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  margin-right: 0.25rem;
  font-weight: normal;
}

/**
 * Sidebar
 */
/* .sidebar h2 {
  font-size: var(--msu-text-xl);
  margin: 0;
}
.sidebar h3 {
  font-size: var(--msu-text-lg);
  margin: 0;
} */

/**
 * Content Alignment within Grid
 */
#block-msuext-group-operations {
  grid-column: content;
}
article.node,
article.group--full,
.layout-builder,
.container--view--page,
.user--profile {
  grid-column: full-width;
}

/* For all content where Layout Builder is disabled, align with the content area as a fallback. */
.layout-builder--disabled .site-main {
  display: grid;
  grid-template-columns: var(--msu-grid);
  gap: var(--msu-gap);
}
.layout-builder--disabled article.node {
  grid-column: content;
}
.view--page {
  grid-column: content;
}

/**
 * People
 */
.people-cards .list-unstyled {
  list-style: none;
  display: flex;
  gap: var(--msu-gap);
  justify-content: center;
}
.people-cards .list-unstyled li {
  content: "\200B";
  flex: 0 1 200px;

}
.person-info {
  display: grid;
  gap: var(--msu-space-lg);
  /* justify-content: start; */
}
.person-info .field__label {
  font: var(--msu-heading4);
  margin-bottom: 0;
}

/* Authors Byline */
.author-byline {
  color: var(--msu-gray-600);
  display: flex;
  gap: var(--msu-space-xs);
  align-items: center;
  justify-content: center;
}
.author-byline .authors-list {
  list-style: none;
  display: flex;
  gap: var(--msu-space-md);
  align-items: center;
  margin: var(--msu-space-0);
  padding: var(--msu-space-0);
}
.author-byline .authors-list li {
  content: "\200B";
  display: flex;
  align-items: center;
  gap: var(--msu-space-xs);
}

/**
 * Tabs
 */
.tabs-wrapper {

}
.tabs {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
}

.nav-link {
  display: block;
  padding: var(--msu-space-md) var(--msu-space-sm);
}

/**
 * Carousels (should be moved to a component!
 */
.swiper-container {
  margin: 0;
  --swiper-navigation-color: var(--msu-white);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  pointer-events: auto;
}
.carousel-link {
  display: block;
  text-decoration: none;
  color: var(--msu-white);
  /* background-color: var(--msu-black); */
}
.carousel-link h2 {
  font-size: var(--msu-text-4xl);
  margin: 0;
}
.node--view-mode-carousel-item {
  display: grid;
  /* grid-template-columns: 1fr;
  grid-template-rows: 1fr auto; */
  /* grid-template-areas: "hero"; */
  --a: .6;
  background: rgb(var(--msu-black-rgb) / var(--a));
  /* background: var(--msu-black); */
  grid-template-columns: var(--msu-grid);
  gap: var(--msu-gap);
  height: 60vh;
  max-height: 600px;
}
.carousel-background {
  /* grid-column: 1 / -1;
  grid-row: 1 / -1; */
  /* grid-area: hero; */
  grid-column: full-width;
  grid-row: 1 / -1;
  z-index: -1;
}
.carousel-background img {
  width: 100%;
  height: min(60vh, 600px);
  object-fit: cover;
  object-position: top;
}
.carousel-info {
  /* grid-column: 1 / -1;
  grid-row: 2 / -1; */
  /* grid-area: hero; */
  grid-column: content;
  place-self: end center;
  grid-row: 1;
  z-index: 1;
  padding: var(--msu-space-4xl);
  width: 100%;
}

/**
 * Publications
 */
.publications-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.publications-list.publications-featured {
  display: grid;
  gap: var(--msu-space-md);
  grid-template-columns: repeat(3, 1fr);
}
.publication-number {
  font-size: 0.9rem;
  margin-block: 0 0.5rem;
}
.publication-title {
  margin-top: 0;
}

/**
 * Events
 */
/* Upcoming Events */
.upcoming-events--frontpage {
  background-color: rgb(218 199 157 / 16%);
  color: var(--msu-text-primary);
}
.upcoming-events--frontpage a {
  color: inherit;
}
.upcoming-events--frontpage h2 {
  font: var(--msu-heading1);
  color: #665D49;
  /* font-weight: 600; */
}
.upcoming-events--frontpage ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/**
 * News
 */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-title {
  margin-block: 0;
}
.news-date {
  font-size: 0.9rem;
  margin-block: 0 0.5rem;
}
.news-attachments {
  display: grid;
  gap: var(--msu-gap);
  list-style: none;
  padding: 0;
  grid-template-columns: repeat(4, 1fr);
}

.article--header {
  padding-block: var(--msu-space-3xl) var(--msu-space-xl);
}
.article--meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--msu-space-md) var(--msu-space-0);
}
.article--type,
.article--group,
.article--heading {
  display: flex;
  flex: 1 0 100%;
  justify-content: center;
}
.article--meta h1 {
  margin-block: var(--msu-space-0);
  text-align: center;
}
.article--byline {
  flex: 1 0 100%;
}
.article--published,
.article--updated {
  color: var(--msu-gray-700);
  padding: var(--msu-space-2xs) var(--msu-space-md);
}
.article--published p,
.article--updated p {
  line-height: var(--msu-line-height-xs);
  margin-block: var(--msu-space-0);
}
.article--published + .article--updated {
  border-left: 1px solid var(--msu-gray-300);
}
.article--meta .featured-image img {
  border-radius: var(--msu-border-radius-xs);
  overflow: hidden;
}

.article--body {

}

/* End mark */
.article--body p:last-child::after {
  content: '';
  background: url('../images/typography/msstate-endmark.svg') center center no-repeat;
  display: inline-block;
  width: 24px;
  height: 16px;
  margin-inline-start: var(--msu-space-2xs);
  vertical-align: sub;
}

/* Latest News */
.latest-news--frontpage h2 {
  font: var(--msu-heading1);
  /* font-weight: 600; */
}
.latest-news--feed {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--msu-gap);
}
/* .latest-news--feed li {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border-radius: var(--msu-border-radius-xs);
  overflow: hidden;
} */
.latest-news--feed li > a {
  display: grid;
  grid-area: 1 / 1 / -1 / -1;
  text-decoration: none;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.latest-news--feed .featured {
  grid-column: span 2;
  grid-row: span 2;
}
.news-background {
  background-color: var(--msu-black);
  z-index: 0;
  /* grid-area: 1 / 1 / 4 / 4; */
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  margin: 0;
}
.news-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-background::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, rgba(93, 23, 37, 0) 0%, #5d1725 100%);
}
.news-info {
  z-index: 1;
  /* grid-area: 3 / 1 / 4 / 4; */
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  color: var(--msu-white);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--msu-space-2xs);
  padding: var(--msu-space-lg);
}
.featured .news-info {
  padding: var(--msu-space-3xl);
}
.news-info > * {
  margin: 0;
  line-height: var(--msu-line-height-sm);
}
.news-info h3 {
  font-size: 1.1rem;
}
.featured h3 {
  font-size: 1.5rem;
}
.news-info a {
  text-decoration: none;
  color: inherit;
}

/**
 * Extension Matters
 */
/* Current Issue */
.extension-matters--latest {
  list-style: none;
  padding: 0;
  margin: 0;
}
.extension-matters--front--articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  row-gap: calc(2 * var(--msu-gap));
}
.extension-matters--front--articles > li {
  display: grid;
  grid-template-columns: 1fr 7fr auto;
  gap: 10px var(--msu-gap);
}
.article--featured-image {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
}
.article--featured-image img {
  border-radius: var(--msu-border-radius-xs);
}
.article--title,
.article--summary {
  grid-column: 2;
  margin: 0;
}
.article--summary > p {
  margin: 0;
}
.article--edit {
  grid-column: 3;
  grid-row: 1 / 4;
}

/**
 * Testimonials
 */
.testimonials--frontpage {
  background-color: rgb(189 214 230 / 24%);
}

/**
 * Videos
 * I'm not sure if this will affect other media-oEmbeds that aren't videos.
 */
/* iframe:where(.media-oembed-content) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
} */

/**
 * Connect
 */
.site-connect {
  background-color: var(--msu-maroon);
  border-bottom: 4px solid #320c14;
  --text-color: var(--msu-white);
  padding-block: var(--msu-space-xl);
  color: var(--text-color);
}

/**
 * Footer
 */
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer a {
  color: var(--msu-white);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:active,
.site-footer a:focus {
  text-decoration: underline;
}

/**
 * Secondary Menu
 */
#block-msuext-secondary-menu ul.menu {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  margin-block: var(--msu-space-3xl);
}

@media only screen and (min-width: 1200px) {
  #block-msuext-secondary-menu ul.menu {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    margin-block: var(--msu-space-0);
  }
}

msu-footer *[slot="footer-links"] ul.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
@media only screen and (min-width: 768px) {
  msu-footer *[slot="footer-links"] ul.menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }
}
/* msu-footer *[slot="footer-links"] ul.menu li a {
  color: indigo;
} */

.copyright-legal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  row-gap: 1rem;
  max-width: 600px;
  margin-inline: auto;
}
.copyright-legal p {
  margin-top: 0;
}

@media only screen and (min-width: 1200px) {
  .copyright-legal {
    text-align: left;
  }
}

.msu-tagline {
  margin-bottom: 0;
}

/**
  * Temporary pagination styles until I get my msu-pager component working.
  */
.js-pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--msu-space-xs);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.js-pager__items li {
  flex: 0 1 auto;
}
.js-pager__items li a {
  display: block;
  padding: var(--msu-space-xs) var(--msu-space-md);
  text-decoration: none;
  color: var(--msu-maroon);
  background-color: var(--msu-white);
  border: 1px solid var(--msu-maroon);
  border-radius: var(--msu-border-radius-xs);
}
.js-pager__items li a:hover,
.js-pager__items li a:active,
.js-pager__items li a:focus {
  background-color: var(--msu-maroon);
  color: var(--msu-white);
}

/* Temporary styles for Views filters buttons */
.js-form-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--msu-space-xs);
  /* justify-content: center; */
  margin: var(--msu-space-md) 0;
}
.js-form-submit {
  display: inline-block;
  padding: var(--msu-space-xs) var(--msu-space-md);
  text-decoration: none;
  color: var(--msu-white);
  background-color: var(--msu-maroon);
  border: none;
  border-radius: var(--msu-border-radius-xs);
  cursor: pointer;
}