/* ==========================================================================
   0873_Psychiatry.org_AnnualMeetingTemplates
========================================================================== */

:root {
  --gutter: var(--fluid-24-32);
}

main.o-wrapper {
  &:has(.meeting-nav) {
    padding-top: 0;
  }
}

main {
  & a {
    &[aria-disabled='true'] {
      pointer-events: none;
      opacity: 0.32;
    }
  }

  & [id] {
    scroll-margin-block-start: var(--gutter);

    @media (width >= 1024px) {
      scroll-margin-block-start: 140px;
    }
  }

  & :focus {
    outline: none !important;
  }

  & :focus-visible {
    outline: 2px solid var(--color-focus) !important;
    transition: unset !important;
  }

  & .c-alert {
    font-size: 14px;
  }

  & button {
    &:enabled {
      cursor: pointer;
    }
    background-color: transparent;
  }

  & .col img {
    @media (width < 800px) {
      &.meeting-logo {
        max-width: 66.666%;
      }
    }
  }

  &:has(.skip-meeting-nav a:focus) {
    & .meeting-nav,
    & > .o-container,
    & .c-article--main {
      opacity: var(--stack-inactive-opacity);
      filter: blur(var(--stack-inactive-blur));
    }
  }
}

.skip-meeting-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  list-style: none;
  margin: unset;
  padding-inline: 1rem;
  width: 100%;
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: var(--step--1);
  opacity: 0;
  pointer-events: none;

  & a {
    text-align: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-xs);
    color: var(--clr-skip-meeting-nav-link);
    background-color: var(--clr-skip-meeting-nav-link-bg);

    &:hover {
      color: #fff;
    }

    &:focus {
      outline-offset: 2px;
    }
  }

  & [id] {
    display: none;
  }

  &:has(:focus) {
    opacity: 1;
    pointer-events: auto;
  }
}

/*--- Layout ---*/

.meeting-nav {
  padding-block: 0.75rem;
  margin-block-end: var(--s3);
  background-color: hsla(228, 29%, 97%, 0.8);

  & > .container {
    mask: linear-gradient(90deg, #000 90%, transparent 100%);
  }

  @media (width >= 1024px) {
    position: sticky;
    top: 0;
    z-index: 9;
    backdrop-filter: blur(2rem);
  }
}

main {
  &:has(#bento) {
    #skip-meeting-nav {
      display: flex;
    }
  }

  &:has(#speakers) {
    #skip-to-speakers {
      display: flex;
    }
  }

  &:has(#registration) {
    #skip-to-reg {
      display: flex;
    }
  }
}

.nav-reel > * + * {
  @media (width >= 1024px) {
    margin-inline-start: 0 !important;
  }
}

.nav-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;

  & > :first-child {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    padding: 0;
    font-size: var(--step--1);
    color: var(--clr-text);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: var(--transition);
    line-height: 1.5;

    @media (width >= 1024px) {
      padding: var(--fluid-4-8) var(--fluid-8-16);
      &:hover {
        text-decoration: none !important;
        border-color: var(--clr-reel-item-hover-border);
        background-color: var(--clr-reel-item-hover);

        & .icon svg {
          transform: scale(1.1);
        }

        & .icon-fill {
          fill: var(--color-icon-fill-hover);
        }
      }
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }
}

aside {
  all: unset;
}

.modal {
  display: none;
  box-sizing: border-box;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
}

.modal-dialog {
  --modal-margin: var(--s3);
  display: flex;
  align-items: center;
  margin: var(--modal-margin);
  max-width: 25rem;
  min-height: calc(100% - var(--modal-margin) * 2);

  @media (width >= 27rem) {
    margin-inline: auto;
  }
}

.modal-overlay {
  --color-focus: var(--color--primary--500);
  width: 100%;
  height: fit-content;
  padding: var(--padding-sm);
  border-radius: var(--border-radius);
  background: white;
  box-shadow: var(--box-shadow-2);
  opacity: 0;
  transform: scale(0.75) translateY(25%);
  transition: opacity 0.2s ease,
    transform 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);

  @media (prefers-reduced-motion: reduce) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  & * {
    margin: unset;
  }

  & .c-list {
    display: grid;
    width: 100%;
    margin-top: var(--s2);

    &::before,
    &::after {
      content: unset;
    }

    & li {
      opacity: 0;
      transform: translateY(1.5rem);
      animation: fadeInUp 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) forwards;

      @media (prefers-reduced-motion: reduce) {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

    & a {
      display: flex;
      text-decoration: none;
      font-size: var(--step-0);
      padding-block: 0.5rem;
      padding-inline: 1rem;
      border-radius: var(--border-radius);

      &:hover {
        background-color: var(--color--primary--50);
      }
    }
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: grid;
  place-items: center;
  align-self: center;
  text-align: center;
  gap: 1rem;
}

.modal-header .icon {
  opacity: 0;
  transform: scale(0.5) translateY(3.5rem);
  animation: iconEntrance 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) forwards;
  animation-delay: 0.25s; /* Small delay to start after the modal opens */

  @media (prefers-reduced-motion: reduce) {
    opacity: 1;
    /* filter: unset; */
    transform: unset;
    animation: none;
  }
}

@keyframes iconEntrance {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
  }
}

.modal-content {
  display: flex;
  flex-direction: column;
}

.modal .icon-fill {
  fill: var(--color-icon-fill-hover);
}

.close-modal {
  align-self: flex-end;
  background: none;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  cursor: pointer;

  & > * {
    &::before {
      display: block;
    }
  }
}

@keyframes flipOnce {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

.modal--ready .modal[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;

  & .modal-overlay {
    opacity: 1;
    transform: scale(1) translateY(0rem);
  }
}

.modal--active {
  & header,
  & .c-breadcrumb,
  & .c-standard-banner,
  & main,
  & aside + .o-wrapper,
  & footer {
    transition: opacity 0.2s ease, filter 0.2s ease;
    opacity: var(--stack-inactive-opacity);
    filter: blur(var(--stack-inactive-blur));
  }
}