/* ==========================================================
   NMSU CANVAS CATALOG CENTERED HEADER NAVIGATION

   Navigation background:
   Aggie Crimson #8C0B42

   Navigation buttons:
   Desert Sand #D7C9C4
   ========================================================== */

:root {
  --nmsu-nav-crimson: #8c0b42;
  --nmsu-nav-crimson-dark: #65072f;

  --nmsu-nav-button-background: #d7c9c4;
  --nmsu-nav-button-text: #8c0b42;

  --nmsu-nav-button-hover-background: #ffffff;
  --nmsu-nav-button-hover-text: #8c0b42;

  --nmsu-nav-button-active-background: #ffffff;
  --nmsu-nav-button-active-text: #8c0b42;

  --nmsu-nav-white: #ffffff;
  --nmsu-nav-text: #333333;
  --nmsu-nav-border: #b6a5ad;
  --nmsu-nav-focus: #009db8;
  --nmsu-nav-shadow: rgba(0, 0, 0, 0.2);

  /*
   * JavaScript automatically updates this based on the
   * bottom edge of the Catalog header.
   */
  --nmsu-mobile-menu-top: 70px;
}

/* ==========================================================
   SHARED BOX SIZING
   ========================================================== */

.nmsu-catalog-header-shell,
.nmsu-catalog-header-shell *,
#nmsu-catalog-custom-navigation,
#nmsu-catalog-custom-navigation * {
  box-sizing: border-box;
}

/* ==========================================================
   COMPLETE CATALOG HEADER

   The navigation is centered relative to this full header,
   not the smaller right-side Login/Account container.
   ========================================================== */

.nmsu-catalog-header-shell {
  position: relative !important;
  overflow: visible !important;
}

/* ==========================================================
   CENTERED NAVIGATION WRAPPER
   ========================================================== */

.nmsu-catalog-header-shell
  #nmsu-catalog-custom-navigation {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;
  right: auto !important;

  z-index: 5000 !important;

  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;

  align-items: center;
  justify-content: center;

  width: auto;
  max-width: calc(100% - 360px);
  height: auto;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none;

  transform: translate(-50%, -50%) !important;
}

/* ==========================================================
   EXISTING LOGIN / ACCOUNT WRAPPER
   ========================================================== */

.nmsu-catalog-account-action {
  position: relative !important;
  z-index: 6000 !important;

  display: flex !important;
  flex: 0 0 auto !important;
  flex-flow: row nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  white-space: nowrap !important;
}

/* ==========================================================
   LOGIN / ACCOUNT BUTTON
   ========================================================== */

.nmsu-catalog-account-control {
  display: inline-flex !important;
  flex: 0 0 auto !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 9px 16px !important;

  border: 2px solid
    var(--nmsu-nav-button-background) !important;

  border-radius: 5px !important;

  color:
    var(--nmsu-nav-button-text) !important;

  background:
    var(--nmsu-nav-button-background) !important;

  font-family: inherit !important;
  font-size: 0.925rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease !important;
}

.nmsu-catalog-account-control:hover {
  color:
    var(--nmsu-nav-button-hover-text) !important;

  background:
    var(--nmsu-nav-button-hover-background) !important;

  border-color:
    var(--nmsu-nav-button-hover-background) !important;

  text-decoration: none !important;

  transform: translateY(-1px);
}

.nmsu-catalog-account-control:focus-visible {
  outline:
    3px solid var(--nmsu-nav-focus) !important;

  outline-offset: 3px !important;
}

.nmsu-catalog-account-control svg {
  color: currentColor !important;
  fill: currentColor;
}

/* ==========================================================
   DESKTOP NAVIGATION
   ========================================================== */

.nmsu-inline-nav__desktop {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;

  align-items: center;
  justify-content: center;

  gap: 8px;

  width: auto;
  max-width: 100%;

  margin: 0;
  padding: 0;
}

/* ==========================================================
   DESKTOP NAVIGATION BUTTONS
   ========================================================== */

.nmsu-inline-nav__link {
  position: relative;

  display: inline-flex;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  min-height: 40px;

  padding: 9px 16px;

  border: 2px solid
    var(--nmsu-nav-button-background);

  border-radius: 5px;

  color: var(--nmsu-nav-button-text);
  background:
    var(--nmsu-nav-button-background);

  font-family: inherit;
  font-size: 0.925rem;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.nmsu-inline-nav__link:hover {
  color:
    var(--nmsu-nav-button-hover-text);

  background:
    var(--nmsu-nav-button-hover-background);

  border-color:
    var(--nmsu-nav-button-hover-background);

  text-decoration: none;

  transform: translateY(-1px);
}

.nmsu-inline-nav__link.is-active {
  color:
    var(--nmsu-nav-button-active-text);

  background:
    var(--nmsu-nav-button-active-background);

  border-color:
    var(--nmsu-nav-button-active-background);
}

/*
 * Additional active-page indicator.
 */
.nmsu-inline-nav__link.is-active::after {
  position: absolute;

  right: 14px;
  bottom: 3px;
  left: 14px;

  height: 3px;

  border-radius: 3px;

  background: var(--nmsu-nav-crimson);

  content: "";
}

.nmsu-inline-nav__link:focus-visible {
  z-index: 2;

  outline: 3px solid var(--nmsu-nav-focus);
  outline-offset: 3px;
}

/* ==========================================================
   MOBILE NAVIGATION WRAPPER
   ========================================================== */

.nmsu-inline-nav__mobile {
  position: relative;

  display: none;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;
}

/* ==========================================================
   MOBILE MENU BUTTON
   ========================================================== */

.nmsu-inline-nav__mobile-button {
  display: inline-flex;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  gap: 8px;

  width: auto;
  min-width: auto;
  min-height: 40px;

  padding: 8px 14px;

  border: 2px solid
    var(--nmsu-nav-button-background);

  border-radius: 5px;

  color: var(--nmsu-nav-button-text);
  background:
    var(--nmsu-nav-button-background);

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;

  white-space: nowrap;

  cursor: pointer;
  list-style: none;

  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

/*
 * Remove the browser's default details arrow.
 */
.nmsu-inline-nav__mobile-button::-webkit-details-marker {
  display: none;
}

.nmsu-inline-nav__mobile-button::marker {
  content: "";
}

.nmsu-inline-nav__mobile-button:hover {
  color:
    var(--nmsu-nav-button-hover-text);

  background:
    var(--nmsu-nav-button-hover-background);

  border-color:
    var(--nmsu-nav-button-hover-background);

  transform: translateY(-1px);
}

.nmsu-inline-nav__mobile-button:focus-visible {
  outline: 3px solid var(--nmsu-nav-focus);
  outline-offset: 3px;
}

/* ==========================================================
   MOBILE MENU ARROW
   ========================================================== */

.nmsu-inline-nav__mobile-button-icon {
  display: block;

  width: 8px;
  height: 8px;

  margin-top: -4px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);

  transition: transform 150ms ease;
}

.nmsu-inline-nav__mobile[open]
  .nmsu-inline-nav__mobile-button-icon {
  margin-top: 4px;

  transform: rotate(225deg);
}

/* ==========================================================
   MOBILE DROPDOWN

   Hidden while the details element is closed.
   ========================================================== */

.nmsu-inline-nav__mobile:not([open])
  .nmsu-inline-nav__mobile-panel {
  display: none !important;
}

.nmsu-inline-nav__mobile[open]
  .nmsu-inline-nav__mobile-panel {
  display: flex !important;
}

/* ==========================================================
   MOBILE DROPDOWN PANEL
   ========================================================== */

.nmsu-inline-nav__mobile-panel {
  position: fixed !important;

  top:
    var(--nmsu-mobile-menu-top) !important;

  right: 0 !important;
  left: 0 !important;

  z-index: 100000 !important;

  flex-direction: column !important;
  align-items: stretch !important;

  width: 100vw !important;
  max-width: none !important;

  max-height:
    calc(
      100vh -
      var(--nmsu-mobile-menu-top)
    ) !important;

  margin: 0 !important;
  padding: 12px 16px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  background:
    var(--nmsu-nav-crimson) !important;

  border-top:
    1px solid
    var(--nmsu-nav-crimson-dark) !important;

  border-right: 0 !important;

  border-bottom:
    1px solid
    var(--nmsu-nav-crimson-dark) !important;

  border-left: 0 !important;
  border-radius: 0 !important;

  box-shadow:
    0 8px 20px
    var(--nmsu-nav-shadow) !important;

  transform: none !important;
}

/* ==========================================================
   MOBILE DROPDOWN LINKS
   ========================================================== */

.nmsu-inline-nav__mobile-link {
  display: flex;

  align-items: center;

  width: 100%;
  min-height: 48px;

  padding: 12px 16px;

  border: 2px solid
    var(--nmsu-nav-button-background);

  border-radius: 4px;

  color: var(--nmsu-nav-button-text);
  background:
    var(--nmsu-nav-button-background);

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;

  text-align: left;
  text-decoration: none;
  white-space: normal;

  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.nmsu-inline-nav__mobile-link
  + .nmsu-inline-nav__mobile-link {
  margin-top: 6px;
}

.nmsu-inline-nav__mobile-link:hover {
  color:
    var(--nmsu-nav-button-hover-text);

  background:
    var(--nmsu-nav-button-hover-background);

  border-color:
    var(--nmsu-nav-button-hover-background);

  text-decoration: none;
}

.nmsu-inline-nav__mobile-link.is-active {
  color:
    var(--nmsu-nav-button-active-text);

  background:
    var(--nmsu-nav-button-active-background);

  border-color:
    var(--nmsu-nav-button-active-background);

  box-shadow:
    inset 4px 0 0
    var(--nmsu-nav-crimson);
}

.nmsu-inline-nav__mobile-link:focus-visible {
  outline: 3px solid var(--nmsu-nav-focus);
  outline-offset: -3px;
}

/* ==========================================================
   TABLET AND MOBILE

   The Menu button remains centered in the header.
   The opened dropdown fills the viewport width.
   ========================================================== */

@media screen and (max-width: 1050px) {
  .nmsu-inline-nav__desktop {
    display: none !important;
  }

  .nmsu-inline-nav__mobile {
    display: block !important;
  }

  .nmsu-catalog-header-shell
    #nmsu-catalog-custom-navigation {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;

    width: auto !important;
    max-width: none !important;

    transform:
      translate(-50%, -50%) !important;
  }

  .nmsu-inline-nav__mobile-button {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
  }
}

/* ==========================================================
   SMALL MOBILE SCREENS
   ========================================================== */

@media screen and (max-width: 480px) {
  .nmsu-inline-nav__mobile-button {
    min-width: 42px !important;

    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .nmsu-inline-nav__mobile-button-text {
    font-size: 0.85rem;
  }

  .nmsu-inline-nav__mobile-panel {
    padding:
      10px 12px !important;
  }

  .nmsu-catalog-account-control {
    padding-right: 11px !important;
    padding-left: 11px !important;
  }
}

/* ==========================================================
   PRINT
   ========================================================== */

@media print {
  #nmsu-catalog-custom-navigation {
    display: none !important;
  }
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .nmsu-inline-nav__link,
  .nmsu-inline-nav__mobile-button,
  .nmsu-inline-nav__mobile-button-icon,
  .nmsu-inline-nav__mobile-link,
  .nmsu-catalog-account-control {
    transition: none !important;
  }
}

/* =========================================================
   NMSU MICROLEARNING FULL-WIDTH BANNER
   ========================================================= */

/*
Removes the width, height, padding, and overflow restrictions
from the Canvas Catalog custom banner region.
*/
.feature-region:has(#nmsu-microlearning-hero),
.feature-region:has(#nmsu-microlearning-hero) > div,
.feature-region:has(#nmsu-microlearning-hero) .container,
.feature-region:has(#nmsu-microlearning-hero) .container-fluid,
.feature-region:has(#nmsu-microlearning-hero) .row,
.feature-region:has(#nmsu-microlearning-hero) [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Remove spacing around the entire banner region */
.feature-region:has(#nmsu-microlearning-hero) {
  position: relative !important;
  display: block !important;
  background: transparent !important;
}

/* Break the banner out of Catalog's centered content column */
#nmsu-microlearning-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: auto;
  margin: 0 0 0 -50vw;
  padding: 0;
  overflow: visible;
  line-height: 0;
}

/* Make the link fill the entire banner */
#nmsu-microlearning-hero > a {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Display the entire image without cropping */
#nmsu-microlearning-hero img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  object-fit: contain !important;
  object-position: center center;
}

/* Prevent an unnecessary horizontal scrollbar */
html,
body {
  overflow-x: hidden;
}