/**
 * @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,
.fieldset-legend.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);
}
.account-menu {
  display: flex;
  align-items: center;
  gap: var(--msu-gap, 1.5rem);
}

/**
 * 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;
}

/**
 * Site Menu.
 */
/**
 * Walk Mississippi temporary menu
 * Should be replaced with a Group Site Menu.
 */
.walk-mississippi-menu {

}
.walk-mississippi-menu > ul {
  /* background-color: var(--msu-bg-white); */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: var(--msu-gap-0);
}
@media only screen and (min-width: 768px) {
  .walk-mississippi-menu > ul {
    flex-direction: row;
    overflow-x: auto;
    justify-content: center;
  }
}
.walk-mississippi-menu a {
  display: block;
  padding: var(--msu-space-md);
  text-decoration: none;
  color: var(--msu-black);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.walk-mississippi-menu a:hover,
.walk-mississippi-menu a:active,
.walk-mississippi-menu a:focus {
  color: var(--msu-maroon);
  border-bottom: 3px solid var(--msu-maroon);
}
.walk-mississippi-menu a.is-active {
  background-color: var(--msu-maroon);
  color: var(--msu-white);
  border-bottom: 3px solid var(--msu-maroon);
}

/**
 * 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;
}
.swiper-button-prev,
.swiper-button-next {
  opacity: 0.25;
}
.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:active,
.swiper-button-next:active,
.swiper-button-prev:focus,
.swiper-button-next:focus {
  opacity: 1;
}
.carousel-link {
  display: block;
  text-decoration: none;
  color: var(--msu-white);
}
.carousel-link h2 {
  font-size: var(--msu-text-4xl);
  margin: 0;
  line-height: 1.1;
}
.node--view-mode-carousel-item {
  display: grid;
  --a: .6;
  background: rgb(var(--msu-black-rgb) / var(--a));
  grid-template-columns: var(--msu-grid);
  gap: var(--msu-gap);
  height: min(60vh, 400px);
}
.carousel-background {
  grid-column: full-width;
  grid-row: 1 / -1;
  z-index: -1;
}
.carousel-background .media {
  margin-block: var(--msu-space-0);
}
.carousel-background img {
  width: 100%;
  height: min(60vh, 400px);
  object-fit: cover;
  object-position: top;
}
.carousel-info {
  grid-column: content;
  place-self: end center;
  grid-row: 1;
  z-index: 1;
  padding: var(--msu-space-lg);
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .node--view-mode-carousel-item {
    height: min(60vh, 500px);
  }
  .carousel-background img {
    height: min(60vh, 500px);
  }
  .carousel-info {
    padding: var(--msu-space-4xl);
  }
}

/**
 * Nodes.
 */
/* .node--unpublished {
  background-color: #fff4f4;
} */

/**
 * 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:not(:empty)::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;
} */
@media only screen and (min-width: 1200px) {
  .latest-news--feed li.featured:first-of-type {
    grid-column: auto / span 8;
    grid-row: auto / span 2;
  }
  /* .latest-news--feed li.featured:first-of-type h3 {
    font-size: 1.5rem;
  } */
}

.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;
}
.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: auto 1fr;
  gap: 10px var(--msu-gap);
  align-items: start;
  align-content: start;
}
.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
 */
.menu--secondary-menu {
  font-weight: 600;
  margin-block: var(--msu-space-3xl);
  columns: 2;
  column-gap: 2rem;
  list-style: none;
  padding: 0;
}
.menu--secondary-menu li {
  break-inside: avoid;
  margin-bottom: var(--msu-space-xs);
}

@media only screen and (min-width: 768px) {
  .menu--secondary-menu {
    columns: 3;
  }
}

@media only screen and (min-width: 1200px) {
  .menu--secondary-menu {
    columns: 1;
    margin-block: var(--msu-space-0);
  }
}

/**
 * Footer Links
 */
.menu--footer-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .menu--footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }
}

.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;
}

/**
 * Media
 */
.media {
  margin-block: var(--msu-space-xl);
}
/* Remove if inside a figure, since the figure already has vertical margin */
figure .media {
  margin-block: var(--msu-space-0);
}

/* .media.align-left,
figure.align-left, */
.align-left {
  float: left;
  margin-right: var(--msu-space-xl);
  margin-bottom: var(--msu-space-xl);
}
/* .media.align-right,
figure.align-right, */
.align-right {
  float: right;
  margin-left: var(--msu-space-xl);
  margin-bottom: var(--msu-space-xl);
}
.align-center img,
.align-center video,
.align-center audio {
  margin-inline: auto;
}

/**
 * Tables.
 */
.table {
  border-collapse: separate;
  border-spacing: var(--msu-table-border-spacing, 0);
  inline-size: 100%;
  text-align: start;
}
.table :is(th, td) {
  padding: var(--msu-table-td-padding, var(--msu-space-xs));
}
.table th {
  background: var(--msu-gray-100);
  border-block-end: 1px solid var(--msu-gray-300);
  color: var(--msu-gray-700);
  font-weight: 600;
  text-align: start;
}
.table td {
  border-block-end: 1px solid var(--msu-gray-300);
  /* white-space: nowrap; */
}

/* Webform */
/*
 * Webform Confirmation Page.
 * Since it can't be controlled by Layout Builder, we need to manually constrain
 * the width and center it.
 */
.webform-confirmation {
  max-width: 1320px;
  margin: 0 auto;
  padding-block: var(--msu-space-3xl);
}