/**
 * @file
 * Component styles for the MSU Extension theme.
 */

/* @layer component { */

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

  /**
  * Utility Navigation. Contains Global Links and Site Links.
  */
  [slot="utility-nav"] > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    height: 100%;
  }
  [slot="utility-nav"] > ul > li {
    display: flex;
  }
  [slot="utility-nav"] > ul > li > a {
    display: flex;
    align-items: center;
    padding: var(--msu-space-xs) var(--msu-space-md);
    text-decoration: none;
    background-color: var(--utility-nav-bgcolor, var(--msu-maroon-800));
    color: var(--utility-nav-color, var(--msu-white));
    font-size: var(--msu-text-xs);
    text-align: center;
  }
  [slot="utility-nav"] > ul > li > a:is(:hover, :active, :focus-visible) {
    background-color: var(--utility-nav-bgcolor-hover, var(--msu-white));
    color: var(--utility-nav-color-hover, var(--msu-black));
  }

  /**
  * Global Links.
  */


  /**
  * Site Links.
  */


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

  /**
  * Primary Menu.
  *
  * Mobile-first: default styles are for mobile + tablet, desktop overrides are in
  * @media (min-width: 992px).
  *
  * Light-DOM styles for the slotted menu tree inside msu-main-menu.
  */

  /* ── Base (mobile) ─────────────────────────────────────────────────────── */

  msu-main-menu nav > ul.menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  msu-main-menu nav > ul.menu > li {
    position: relative;
  }

  msu-main-menu nav > ul.menu > li > a {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: var(--msu-space-sm) var(--msu-space-md);
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  msu-main-menu nav > ul.menu > li:hover > :is(a, .toggle-link),
  msu-main-menu nav > ul.menu > li:focus-within > :is(a, .toggle-link),
  msu-main-menu nav > ul.menu > li > a:focus {
    background-color: var(--msu-white, #fff);
    color: var(--msu-maroon, #5d1725);
  }

  msu-main-menu nav > ul.menu > li.menu-item--open > :is(a, .toggle-link) {
    background-color: #5d1725;
    color: var(--msu-white, #fff);
  }

  msu-main-menu nav > ul.menu > li > a.active,
  msu-main-menu nav > ul.menu > li.active > :is(a, .toggle-link) {
    background-color: #222;
    color: #fff;
  }

  msu-main-menu nav > ul.menu > li:hover > a.active,
  msu-main-menu nav > ul.menu > li.active:hover > :is(a, .toggle-link),
  msu-main-menu nav > ul.menu > li:focus-within > a.active,
  msu-main-menu nav > ul.menu > li.active:focus-within > :is(a, .toggle-link),
  msu-main-menu nav > ul.menu > li.active > a:focus {
    background-color: var(--msu-white, #fff);
    color: var(--msu-maroon, #5d1725);
  }

  msu-main-menu nav > ul.menu > li.menu-item--open > a.active,
  msu-main-menu nav > ul.menu > li.active.menu-item--open > :is(a, .toggle-link) {
    background-color: #5d1725;
    color: var(--msu-white, #fff);
  }

  msu-main-menu nav > ul.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  msu-main-menu nav > ul.menu ul a {
    display: block;
    padding: var(--msu-space-xs) var(--msu-space-sm);
    text-decoration: none;
    line-height: 1.2;
  }

  msu-main-menu nav > ul.menu ul a:hover,
  msu-main-menu nav > ul.menu ul a:active,
  msu-main-menu nav > ul.menu ul a:focus,
  msu-main-menu nav > ul.menu ul a.is-active {
    text-decoration: underline;
  }

  /* Toggle button — mobile: flex sibling of the link, stretches to match height. */
  .toggle-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--msu-space-sm) var(--msu-space-md);
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  msu-main-menu nav > ul.menu > li.menu-item--dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  msu-main-menu nav > ul.menu > li.menu-item--dropdown > a {
    flex: 1;
  }

  msu-main-menu nav > ul.menu > li.menu-item--dropdown > ul,
  msu-main-menu nav > ul.menu > li.menu-item--dropdown > .menu-dropdown {
    flex: 0 0 100%;
  }

  .toggle-link .dropdown-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    stroke: currentColor;
    transition: transform 0.15s ease;
    will-change: transform;
  }

  .menu-item--dropdown.menu-item--open .dropdown-icon {
    transform: rotate(-180deg);
  }

  /* Submenus — mobile: collapse in-place with max-height. */
  msu-main-menu nav > ul.menu > li > ul,
  msu-main-menu nav > ul.menu > .menu-item--expanded > .menu-dropdown {
    background-color: var(--msu-white);
    max-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.15s ease, visibility 0s linear 0.15s, padding 0s linear 0.15s;
  }

  msu-main-menu nav > ul.menu > li.menu-item--open > ul,
  msu-main-menu nav > ul.menu > .menu-item--expanded.menu-item--open > .menu-dropdown {
    max-height: 100svh;
    padding: var(--msu-space-md);
    visibility: visible;
    transition: max-height 0.15s ease, visibility 0s linear, padding 0s linear;
  }

  msu-main-menu nav > ul.menu > li > .menu_link_content > section > .container {
    grid-column: full-width;
  }

  /* ── Reduced motion ────────────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    msu-main-menu nav > ul.menu > li > a,
    .toggle-link,
    .toggle-link .dropdown-icon,
    msu-main-menu nav > ul.menu > li > ul,
    msu-main-menu nav > ul.menu > .menu-item--expanded > .menu-dropdown,
    msu-main-menu nav > ul.menu > li.menu-item--open > ul,
    msu-main-menu nav > ul.menu > .menu-item--expanded.menu-item--open > .menu-dropdown {
      transition: none;
    }
  }

  /* ── Desktop (min-width: 992px) ────────────────────────────────────────── */

  @media only screen and (min-width: 992px) {
    msu-main-menu nav > ul.menu {
      flex-direction: row;
    }

    msu-main-menu nav > ul.menu > li {
      flex: 0 1 auto;
    }

    /* Hover/open state — desktop only. */
    msu-main-menu nav > ul.menu > li:hover,
    msu-main-menu nav > ul.menu > li:active,
    msu-main-menu nav > ul.menu > li:focus,
    msu-main-menu nav > ul.menu > li:focus-within,
    msu-main-menu nav > ul.menu > li.menu-item--open {
      background-color: var(--msu-white, #fff);
      color: var(--msu-maroon, #5d1725);
      position: relative;
      z-index: 51;
    }

    msu-main-menu nav > ul.menu > li > a {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
      padding: var(--msu-space-md);
    }

    msu-main-menu nav > ul.menu > li.menu-item--dropdown > a {
      padding-inline-end: var(--msu-space-xl);
    }

    /* Toggle button — desktop: small icon-only button, absolutely positioned. */
    .toggle-link {
      width: auto;
      padding: 0;
      background: transparent;
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      z-index: 52;
      transition: none;
    }


    /* Reset mobile toggle-link state colours — button is transparent on desktop. */
    msu-main-menu nav > ul.menu > li:is(:hover, :focus-within, .menu-item--open, .active, .active:hover, .active:focus-within, .active.menu-item--open) > .toggle-link {
      background-color: transparent;
      color: inherit;
    }

    /* Submenus — desktop: fixed-position dropdown, shown via opacity/visibility. */

    msu-main-menu nav > ul.menu > li > ul,
    msu-main-menu nav > ul.menu > .menu-item--expanded > .menu-dropdown {
      position: fixed; /* fixed, not absolute, for the full-width mega menu */
      max-height: none; /* reset mobile collapse */
      overflow: hidden; /* crop to border-radius */
      opacity: 0;
      visibility: hidden;
      max-width: 15rem; /* overridden for mega menu below */
      box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.15);
      z-index: 50;
      padding: var(--msu-space-md);
    }

    /* Submenu visibility is controlled entirely by JS via menu-item--open. */
    msu-main-menu nav > ul.menu > li.menu-item--open > ul,
    msu-main-menu nav > ul.menu > .menu-item--expanded.menu-item--open > .menu-dropdown {
      top: 100%;
      max-height: none;
      opacity: 1;
      visibility: visible;
      min-width: 15rem;
    }

    /* Fix grid layout. */
    msu-main-menu nav > ul.menu > li:hover > :is(a, .toggle-link),
    msu-main-menu nav > ul.menu > li.menu-item--open > :is(a, .toggle-link),
    msu-main-menu nav > ul.menu > li.active.menu-item--open > :is(a, .toggle-link) {
      background-color: var(--msu-white, #fff);
      color: var(--msu-maroon, #5d1725);
    }

    msu-main-menu nav > ul.menu > li:hover > a,
    msu-main-menu nav > ul.menu > li.menu-item--open > a,
    msu-main-menu nav > ul.menu > li.active.menu-item--open > a {
      position: relative;
      z-index: 51;
    }

    msu-main-menu nav > ul.menu > li:hover > .menu_link_content > section > .container,
    msu-main-menu nav > ul.menu > li.menu-item--open > .menu_link_content > section > .container {
      grid-column: full-width;
    }

    msu-main-menu nav > ul.menu > li:hover.menu-item--full-width > .menu_link_content,
    msu-main-menu nav > ul.menu > li.menu-item--open.menu-item--full-width > .menu_link_content {
      left: 0;
      right: 0;
      max-width: none;
    }

    .menu-item--has-children > a {
      color: var(--msu-black);
      text-transform: uppercase;
      font-size: var(--msu-text-xs);
      font-weight: 600;
    }

  }

  /**
  * Submenus.
  *
  * Hide them for now.
  */
  /* msu-main-menu nav > ul.menu ul {
    display: none;
  } */

  @media only screen and (min-width: 1200px) {
    msu-main-menu nav > ul.menu > li:hover.menu-item--full-width > .menu_link_content > section > .container,
    msu-main-menu nav > ul.menu > li.menu-item--open.menu-item--full-width > .menu_link_content > section > .container {
      grid-column: content;
    }
  }

  /**
  * Account Menu.
  *
    * This should be rolled up into a 'account menu' web component.
  */
  msu-header *[slot="account-menu"] ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  msu-header *[slot="account-menu"] ul.menu li a {
    --msu-link-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;
  }

  /**
   * Topics.
   */
  .topics-a-z > ul {
    list-style: none;
    margin-block: 0;
    padding: 0;
  }
  .topics-a-z > ul > li {
    margin-bottom: var(--msu-gap);
    display: inline-block;
    background: var(--msu-gray-100);
    padding: 2rem;
    border: 1px solid var(--msu-gray-300);
    width: 100%;
  }
  .topics-a-z > ul > li:last-child {
    margin-bottom: 0;
  }
  .topics-a-z > ul > li > a {
    font-size: 1.5rem;
    font-weight: 600;
  }

  /**
  * 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);
    width: 100%;
  }
  .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;
  }
  .event-sessions {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .event-dates {
    list-style: none;
    margin: 0 0 16px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /**
  * 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 {
    /* --msu-text-decoration-color: #777; */
    text-underline-offset: var(--msu-text-underline-offset);
  }

  .site-footer a:is(:hover, :active, :focus) {
    text-decoration-color: var(--msu-white);
    text-decoration-style: solid;
  }

  /* .menu--secondary-menu a {
    text-decoration: none;
  } */

  .menu--secondary-menu a:is(:hover, :active, :focus) {
    text-decoration: underline;
  }

  /**
  * Secondary Menu
  */
  .menu--secondary-menu {
    font-weight: 600;
    margin-block: 0;
    columns: 2;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
  }
  .menu--secondary-menu li {
    break-inside: avoid;
    margin-bottom: var(--msu-space-xs);
    max-width: 196px; /* we want this to never be wider than 424px, same as msu-contact-info */
  }

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

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

  /**
  * Footer Links
  */
  .menu--footer-links {
    columns: 2;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
  }

  /* .menu--footer-links a {
    color: #cccccc;
  }

  .menu--footer-links a:is(:hover, :active, :focus) {
    color: var(--msu-white);
  } */

  .menu--footer-links li {
    break-inside: avoid;
    margin-bottom: var(--msu-space-xs);
    max-width: 196px; /* we want this to never be wider than 424px, same as msu-contact-info */
  }

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

  @media only screen and (min-width: 1200px) {
    .menu--footer-links {
      columns: unset;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
    }
    .menu--footer-links li {
      max-width: unset;
    }
  }

  .copyright-legal {
    display: flex;
    flex-direction: column;
    justify-content: start;
    text-align: center;
    row-gap: 1rem;
    /* max-width: 600px;
    margin-inline: auto; */
  }
  .copyright-legal p {
    margin-block: 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;
    align-items: center;
    list-style: none;
    padding: 0;
    margin-block: 1rem;
  }
  .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;
  }

  /**
  * Text Alignment.
  */
  .text-align-left,
  .text-left {
    text-align: left;
  }
  .text-align-right,
  .text-right {
    text-align: right;
  }
  .text-align-center,
  .text-center {
    text-align: center;
  }
  .text-align-justify,
  .text-justify {
    text-align: justify;
  }

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

  @media only screen and (min-width: 992px) {
    /* .media.align-left,
    figure.align-left, */
    .align-left {
      float: left;
      margin-top: var(--msu-space-0);
      margin-right: var(--msu-space-lg);
      margin-bottom: var(--msu-space-lg);
    }
    /* .media.align-right,
    figure.align-right, */
    .align-right {
      float: right;
      margin-top: var(--msu-space-0);
      margin-left: var(--msu-space-lg);
      margin-bottom: var(--msu-space-lg);
    }
    .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);
  }

/* } */