/* ==========================================================
   NMSU CANVAS CATALOG
   Centered navigation + attached mobile menu
   Microlearning hero + Login/Account styling
   Cart remains in the original Canvas Catalog style.
   ========================================================== */

:root {
  --nmsu-crimson: #8c0b42;
  --nmsu-crimson-dark: #65072f;
  --nmsu-sand: #d7c9c4;
  --nmsu-focus: #009db8;
}

html,
body {
  overflow-x: hidden !important;
}

#nmsu-catalog-custom-navigation,
#nmsu-catalog-custom-navigation *,
#nmsu-microlearning-banner,
#nmsu-microlearning-banner * {
  box-sizing: border-box !important;
}

/* ==========================================================
   HEADER NAVIGATION
   ========================================================== */

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

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

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

  z-index: 5000 !important;

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

  width: auto !important;
  max-width: calc(100% - 420px) !important;

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

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

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

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

  z-index: 6000 !important;

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

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

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

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

/* ==========================================================
   NAVIGATION AND LOGIN / ACCOUNT BUTTONS
   ========================================================== */

.nmsu-catalog-account-control,
.nmsu-inline-nav__link,
.nmsu-inline-nav__mobile-button {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !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-sand) !important;
  border-radius: 5px !important;

  color: var(--nmsu-crimson) !important;
  background: var(--nmsu-sand) !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;

  box-shadow: none !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,
.nmsu-inline-nav__link:hover,
.nmsu-inline-nav__mobile-button:hover {
  color: var(--nmsu-crimson) !important;
  background: #ffffff !important;
  border-color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-1px) !important;
}

.nmsu-catalog-account-control:focus-visible,
.nmsu-inline-nav__link:focus-visible,
.nmsu-inline-nav__mobile-button:focus-visible,
.nmsu-inline-nav__mobile-link:focus-visible {
  outline: 3px solid var(--nmsu-focus) !important;
  outline-offset: 3px !important;
}

/* Match the Login or Account icon to the button text */
.nmsu-catalog-account-control svg,
.nmsu-catalog-account-control i {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.nmsu-catalog-account-control svg {
  width: 20px !important;
  height: 20px !important;
}

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

.nmsu-inline-nav__desktop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

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

.nmsu-inline-nav__link {
  position: relative !important;
}

.nmsu-inline-nav__link.is-active {
  color: var(--nmsu-crimson) !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

.nmsu-inline-nav__link.is-active::after {
  position: absolute !important;

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

  height: 3px !important;

  border-radius: 3px !important;
  background: var(--nmsu-crimson) !important;

  content: "" !important;
}

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

.nmsu-inline-nav__mobile {
  position: relative !important;

  display: none !important;

  width: auto !important;

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

  overflow: visible !important;
}

/* Menu button */
.nmsu-inline-nav__mobile-button {
  position: relative !important;

  z-index: 100002 !important;

  gap: 8px !important;

  padding: 8px 14px !important;

  list-style: none !important;
}

/* Connect the open button to the dropdown */
.nmsu-inline-nav__mobile[open]
  .nmsu-inline-nav__mobile-button {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;

  background: #ffffff !important;
  border-color: #ffffff !important;
}

.nmsu-inline-nav__mobile-button::-webkit-details-marker {
  display: none !important;
}

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

/* Dropdown arrow */
.nmsu-inline-nav__mobile-button-icon {
  display: block !important;

  width: 8px !important;
  height: 8px !important;

  margin-top: -4px !important;

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

  transform: rotate(45deg) !important;

  transition:
    transform 150ms ease,
    margin-top 150ms ease !important;
}

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

  transform: rotate(225deg) !important;
}

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

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

/* Attached dropdown panel */
.nmsu-inline-nav__mobile-panel {
  position: absolute !important;

  top: calc(100% - 2px) !important;
  right: auto !important;
  left: 50% !important;

  z-index: 100001 !important;

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

  width: min(310px, calc(100vw - 24px)) !important;
  min-width: 260px !important;
  max-width: calc(100vw - 24px) !important;

  max-height: calc(100vh - 110px) !important;

  margin: 0 !important;
  padding: 10px !important;

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

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

  border: 2px solid var(--nmsu-sand) !important;
  border-radius: 6px !important;

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, 0.25) !important;

  transform: translateX(-50%) !important;
}

/* Visual connector between button and dropdown */
.nmsu-inline-nav__mobile-panel::before {
  position: absolute !important;

  top: -8px !important;
  left: 50% !important;

  width: 82px !important;
  height: 10px !important;

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

  border-right: 2px solid var(--nmsu-sand) !important;
  border-left: 2px solid var(--nmsu-sand) !important;

  transform: translateX(-50%) !important;

  content: "" !important;
}

/* Mobile menu links */
.nmsu-inline-nav__mobile-link {
  position: relative !important;
  z-index: 1 !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  min-height: 46px !important;

  padding: 11px 14px !important;

  border: 2px solid var(--nmsu-sand) !important;
  border-radius: 4px !important;

  color: var(--nmsu-crimson) !important;
  background: var(--nmsu-sand) !important;

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

  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
}

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

.nmsu-inline-nav__mobile-link:hover,
.nmsu-inline-nav__mobile-link.is-active {
  color: var(--nmsu-crimson) !important;
  background: #ffffff !important;
  border-color: #ffffff !important;

  text-decoration: none !important;
}

.nmsu-inline-nav__mobile-link.is-active {
  box-shadow:
    inset 4px 0 0
    var(--nmsu-crimson) !important;
}

/* ==========================================================
   MICROLEARNING HERO BANNER
   ========================================================== */

#nmsu-microlearning-banner {
  position: relative !important;
  inset: auto !important;

  z-index: 1 !important;

  display: block !important;
  float: none !important;
  clear: both !important;

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

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

  margin:
    0
    0
    24px
    calc(50% - 50vw) !important;

  padding: 0 !important;

  overflow: hidden !important;

  background: #202020 !important;

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

  box-shadow: none !important;

  isolation: isolate !important;
}

/* Taller banner reveals more of the image */
.nmsu-microlearning-banner__link {
  position: relative !important;

  display: block !important;

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

  height:
    clamp(
      300px,
      31vw,
      430px
    ) !important;

  min-height: 300px !important;
  max-height: 430px !important;

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

  overflow: hidden !important;

  color: #ffffff !important;
  background: #202020 !important;

  text-decoration: none !important;

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

.nmsu-microlearning-banner__image {
  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;

  display: block !important;

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

  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;

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

  object-fit: cover !important;
  object-position: center 25% !important;

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

  box-shadow: none !important;

  transform: none !important;
}

/* Dark image overlay */
.nmsu-microlearning-banner__link::after {
  position: absolute !important;
  inset: 0 !important;

  z-index: 2 !important;

  display: block !important;

  background:
    rgba(
      0,
      0,
      0,
      0.46
    ) !important;

  pointer-events: none !important;

  content: "" !important;
}

/* Centered hero wording */
.nmsu-microlearning-banner__content {
  position: absolute !important;

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

  z-index: 3 !important;

  width:
    min(
      760px,
      calc(100% - 48px)
    ) !important;

  max-width: 760px !important;

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

  color: #ffffff !important;

  text-align: center !important;

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

  pointer-events: none !important;
}

.nmsu-microlearning-banner__title {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: inherit !important;

  font-size:
    clamp(
      1.65rem,
      2.7vw,
      2.6rem
    ) !important;

  font-weight: 700 !important;
  line-height: 1.1 !important;

  letter-spacing: -0.015em !important;

  text-align: center !important;

  text-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.78) !important;
}

.nmsu-microlearning-banner__subtitle {
  width: 100% !important;
  max-width: 620px !important;

  margin: 10px auto 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: inherit !important;

  font-size:
    clamp(
      0.9rem,
      1.35vw,
      1.15rem
    ) !important;

  font-weight: 500 !important;
  line-height: 1.35 !important;

  text-align: center !important;

  text-shadow:
    0 2px 7px
    rgba(0, 0, 0, 0.78) !important;
}

.nmsu-microlearning-banner__link:focus-visible {
  outline:
    4px solid
    var(--nmsu-focus) !important;

  outline-offset: -4px !important;
}

/* Keep Catalog content beneath the banner */
#nmsu-microlearning-banner + * {
  position: relative !important;

  z-index: 1 !important;

  clear: both !important;
}

/* ==========================================================
   RESPONSIVE NAVIGATION
   ========================================================== */

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

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

  #nmsu-catalog-custom-navigation {
    width: auto !important;
    max-width: none !important;
  }
}

/* ==========================================================
   TABLET HERO
   ========================================================== */

@media screen and (max-width: 900px) {
  .nmsu-microlearning-banner__link {
    height:
      clamp(
        270px,
        42vw,
        380px
      ) !important;

    min-height: 270px !important;
    max-height: 380px !important;
  }

  .nmsu-microlearning-banner__image {
    object-position: center 25% !important;
  }

  .nmsu-microlearning-banner__content {
    width:
      calc(
        100% - 40px
      ) !important;
  }

  .nmsu-microlearning-banner__title {
    font-size:
      clamp(
        1.45rem,
        4vw,
        2.15rem
      ) !important;
  }

  .nmsu-microlearning-banner__subtitle {
    font-size:
      clamp(
        0.85rem,
        2vw,
        1rem
      ) !important;
  }
}

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

@media screen and (max-width: 600px) {
  #nmsu-microlearning-banner {
    margin-bottom: 18px !important;
  }

  .nmsu-microlearning-banner__link {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }

  .nmsu-microlearning-banner__image {
    object-position: 58% 25% !important;
  }

  .nmsu-microlearning-banner__link::after {
    background:
      rgba(
        0,
        0,
        0,
        0.54
      ) !important;
  }

  .nmsu-microlearning-banner__content {
    width:
      calc(
        100% - 32px
      ) !important;
  }

  .nmsu-microlearning-banner__title {
    font-size:
      clamp(
        1.2rem,
        5.5vw,
        1.7rem
      ) !important;

    line-height: 1.12 !important;
  }

  .nmsu-microlearning-banner__subtitle {
    margin-top: 7px !important;

    font-size:
      clamp(
        0.78rem,
        3.2vw,
        0.92rem
      ) !important;

    line-height: 1.3 !important;
  }

  .nmsu-catalog-account-control,
  .nmsu-inline-nav__mobile-button {
    min-height: 40px !important;

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

    font-size: 0.85rem !important;
  }
}

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

@media screen and (max-width: 480px) {
  .nmsu-inline-nav__mobile-panel {
    width:
      min(
        290px,
        calc(100vw - 20px)
      ) !important;

    min-width: 250px !important;

    padding: 9px !important;
  }

  .nmsu-inline-nav__mobile-link {
    min-height: 44px !important;

    padding: 10px 12px !important;

    font-size: 0.9rem !important;
  }
}

/* ==========================================================
   EXTRA-SMALL MOBILE
   ========================================================== */

@media screen and (max-width: 360px) {
  .nmsu-inline-nav__mobile-panel {
    width:
      calc(
        100vw - 14px
      ) !important;

    min-width: 0 !important;
  }

  .nmsu-inline-nav__mobile-button {
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  .nmsu-inline-nav__mobile-button-text {
    font-size: 0.8rem !important;
  }
}

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

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

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

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