@charset "utf-8";
/* CSS Document */
.ams-nav {
  --amsNavWhite: var(--white, #ffffff);  /* Fallback to white */
  --amsNavBlack: var(--black, #000000);  /* Fallback to black */
  --amsNavBlueBackground: var(--main-brand-blue, #0057b8); /* Default Bootstrap blue */
  --amsNavOrangeText: var(--main-accessible-orange, #C15324);  /* Default Bootstrap orange */
  --amsNavGrayBorder: var(--gray-400, #ced4da); /* Bootstrap gray-400 */
  --amsNavGrayBackground: var(--gray-100, #f8f9fa); /* Bootstrap gray-100 */
  --amsNavLinkColor: #0d6efd;
  --amsNavLinkColorHover: #0a58ca;
}
.ams-nav a {
  margin-top: 0; /* HACK counteracts 2022_website.css `nav a {margin-top 10px}` */
}
.ams-nav ul {
  list-style: none;
  /* NOTE: it would be nice to add padding-left:0 here. However, high specificity means .ams-nav--main__list could then no longer set padding-left
  If we adopt CSS nesting, we could.
  */
}
/* skiplink */
.ams-nav__skiplink {
  --_backgroundColor: var(--white);
  position: absolute;
  width: auto;
  height: auto;
  background: var(--_backgroundColor);
  padding: 1em;
  --focusVisibleOutlineOffset: 0px; /* disable focus-outline offset */
  --focusVisibleOutlineAnimation: none; /* disable focus-outline animation */
}
:is(.ams-nav__skiplink):not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Responsive AMS Logo */
.ams-nav__logo {
  display: block;
  max-width: 350px;
  container-type: inline-size;
  flex-grow: 1;
}
.ams-nav__logo__inner {
  display: inline-block;
  width: 350px;
  height: 80px;
  overflow: hidden;
  @container (width < 350px) {
    width: 160px;
    height: 80px;
  }
}
@media (min-width: 768px) {
  .ams-nav__logo__inner {
    height: 92px;
    @container (width < 350px) {
      width: 160px;
      height: 80px;
    }
  }
}
/* 
* Quick Nav 
* 
* The smaller navigation element
*/
.ams-nav--quick::before, .ams-nav--quick::after {
  display: none; /* HACK bootstrap 3 (!) resets *:before/after to table-cell, messing up flexbox space-between layout */
}
.ams-nav--quick {
  margin-top: 1rem; /*NOTE: used to be on header/wrapper*/
  position: relative;
  z-index: 1;
  /* NOTE: must be higher than main nav z-index (if any) so that sign-in details show above main nav */
}
@media (min-width: 768px) {
  .ams-nav--quick {
    display: flex;
    justify-content: space-between;
  }
}
.ams-nav--quick__container {
  container-type: inline-size;
  width: 100%;
  max-width: 60ch;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .ams-nav--quick__container {
    margin-top: 0;
  }
}
.ams-nav--quick__list {
  padding-left: 0; /* BS/UA style reset */
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: center;
  @container (width < 60ch) {
    /* maybe only on large viewport? */
    grid-template-columns: repeat(3, max-content);
  }
  @container (width < 375px) {
    /* maybe only on large viewport? */
    grid-template-columns: repeat(2, max-content);
  }
}
@media (min-width: 768px) {
  .ams-nav--quick__list {
    justify-content: end;
  }
}
.ams-nav--quick__list li {
  padding: 0.5rem 1rem;
}
.ams-nav--quick__list__search {
  grid-column: 1 / -1;
  justify-self: end;
}
.ams-nav--quick__signin__summary {
  --_textColor: var(--amsNavLinkColor);
  color: var(--_textColor);
  display: block;
  /* to remove marker */
}
.ams-nav--quick__signin__summary:hover {
  --_textColor: var(--amsNavLinkColorHover);
  color: var(--_textColor);
}
.ams-nav--quick__signin__list {
  --_backgroundColor: var(--white);
  --_borderColor: var(--amsNavGrayBorder);
  position: absolute;
  background-color: var(--_backgroundColor);
  border: 1px solid var(--_borderColor);
  border-radius: 4px;
  padding: 1rem;
}
/* 
* Main Nav
* 
* The main navigation element
* */
.ams-nav--main {
  --_backgroundColor: var(--amsNavBlueBackground);
  --_textColor: var(--white);
  --_borderShade: var(--amsNavGrayBorder);
  background-color: var(--_backgroundColor);
  color: var(--_textColor);
  padding-block: 0.5rem;
  position: relative;
  border-bottom: 2px solid var(--_borderShade);
  box-shadow: 0 5px 5px var(--_borderShade);
}
/* Main nav: button to open/close (on small viewports) */
@media (min-width: 768px) {
  .ams-nav--main__button {
    display: none;
  }
}
.ams-nav--main__button::marker {
  content: "";
}
.ams-nav--main__button::-webkit-details-marker {
  display: none;
}
.ams-nav--main__button__marker {
  font-size: 1.1em;
  padding-inline: 0.5em;
}
/* NOTE: assumes exactly 2 children, both being font-awesome icons */
.ams-nav--main__button__marker > :last-child {
  opacity: 0;
  margin-left: -1em;
}
[open] .ams-nav--main__button__marker > :first-child {
  opacity: 0;
  transform: rotate(180deg) scale(0.5);
}
[open] .ams-nav--main__button__marker > :last-child {
  opacity: 1;
  transform: rotate(180deg) scale(1.25);
}
.ams-nav--main__button__marker > :first-child {
  transition: opacity 0.3s, transform 0.3s;
}
.ams-nav--main__button__marker > :last-child {
  transition: opacity 0.3s, transform 0.3s;
  transform: rotate(-180deg);
  opacity: 0;
}
/* Main nav: the list (blue) */
.ams-nav--main__list {
  padding-left: 0; /* reset UA style*/
  margin-block: 1rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .ams-nav--main__list {
    margin-block: 0.5rem;
    display: flex;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
    justify-content: end;
    max-width: fit-content;
    margin-inline: auto;
  }
}
.ams-nav--main__list__item {
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .ams-nav--main__list__item {
    margin-top: 0;
  }
}
/* Main nav: the "inner" parts (of a main-list list-item) */
/* button (summary) */
.ams-nav--main__level1__button {
  display: inline-block;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
[open] > .ams-nav--main__level1__button {
  --_borderColor: var(--white);
  border-bottom: 2px solid var(--_borderColor);
}
/* expanded (details) content wrapper */
.ams-nav--main__level1 {
  --_backgroundColor: var(--white);
  --_textColor: var(--amsNavBlack);
  background: var(--_backgroundColor);
  color: var(--_textColor);
  width: 100%;
  z-index: 2;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .ams-nav--main__level1 {
    --_borderShade: var(--amsNavGrayBorder);
    border: 2px solid var(--_borderShade);
    box-shadow: 0 2px 4px var(--_borderShade);
    left: 0;
    padding: 1rem; /* matches txm's demo */
    position: absolute;
    top: 100%;
  }
}
/* shared list style */
.ams-nav--main__level1 ul {
  padding-left: 0; /* BS/UA style reset */
}
/* list (in the expanded content wrapper) */
@media (min-width: 768px) {
  .ams-nav--main__level1__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-inline: auto;
    max-width: 1320px;
  }
}
@media (min-width: 768px) {
  .ams-nav--main__level1__list__title {
    grid-column: 1 / span 4;
  }
}
.ams-nav--main__level1__list__title__tagline {
  display: none;
  font-style: italic;
}
.ams-nav--main__level1__list__title__tagline::before {
  content: "– ";
}
@media (min-width: 768px) {
  .ams-nav--main__level1__list__title__tagline {
    display: inline;
  }
}
@media (min-width: 768px) {
  /* NOTE: only to set Open Math Notes to be in the first columen; could also be done as a tool/helper/trumps class */
  .ams-nav--main__level1__list__col1 {
    grid-column-start: 1;
  }
}
/* Main Nav: second-level links (to be renamed) */
.ams-nav--main__level1__link {
  --_textColor: var(--amsNavBlack);
  --_borderColor: var(--amsNavGrayBorder);
  border-top: 1px solid var(--_borderColor);
  color: var(--_textColor);
  display: inline-block;
  padding: 0.5rem;
  text-decoration: none;
  width: 100%;
}
.ams-nav--main__level1__link:hover {
  --_backgroundColor: var(--amsNavGrayBackground);
  background-color: var(--_backgroundColor);
  color: currentColor;
}
.ams-nav--main__level1__link--title {
  font-weight: bold;
  border-top: none;
  width: auto;
}
.ams-nav--main__level1__link--title[href] {
  --_textColor: var(--amsNavLinkColor);
  color: var(--_textColor);
  font-weight: bold;
}
.ams-nav--main__level1__link--title[href]:hover {
  --_textColor: var(--amsNavLinkColorHover);
  color: var(--_textColor);
}
.ams-nav--main__level1__link__membership {
  --_textColor: var(--amsNavOrangeText);
  color: var(--_textColor);
}
/* Helpers */
.ams-nav__animated-details--summary__marker:after {
  content: " ";
  display: inline-block; /* NOTE: removes default marker on all but Safari*/
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
  transition: 0.2s;
  vertical-align: super;
  vertical-align: baseline;
  margin-bottom: 0.2rem;
  margin-left: 0.5rem;
}
.ams-nav__animated-details[open] > .ams-nav__animated-details--summary__marker:after {
  transform: rotate(225deg);
}
.ams-nav__animated-details--summary__marker::-webkit-details-marker {
  display: none; /* NOTE: removes default marker in Safari*/
}