/*
Theme Name: Strategic Framework Child Theme
Theme URI: https://strategiccommunication.wisc.edu
Description: Theme for UW Strategic Framework website
Template: uw-theme-gutenberg
Version: 0.1
Author: UW Strategic Communication
Author URI: https://strategiccommunication.wisc.edu */

html {
  scroll-behavior: smooth;
}

p {
  &.top-bar {
    border-top: 2px solid var(--wp--preset--color--primary);
    display: inline;
    padding-top: 4px !important;
  }
}

.wp-block-columns {
  &.swap-order-mobile {
    /* Swap column order at WordPress "medium" breakpoint */
    @media (max-width: 781px) {
      > .wp-block-column {
        &:first-of-type {
          order: 2;
        }
      }
    }
  }
}

.wp-block-group {
  &.pull-right {
    @media (min-width: 781px) {
      left: 10vw;
      padding: 2rem;
      background-color: var(--wp--custom--color--white, #fff);
      z-index: 1;
      box-shadow: var(--wp--preset--shadow--button-shadow);
      border-radius: 0.5rem;
    }
  }
}

.fade-in-up {
  opacity: 0;
  transform: translateY(4rem);

  &.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s;
  }
}

.toggle-drop-menu {
  .menu {
    justify-content: flex-end;
  }
}

.main-menu-wrapper {
  display: flex;
  justify-content: space-between;

  > .toggle-drop-menu {
    flex-grow: 1;
  }
}

.mobile-crest-wrapper {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;

  .mobile-crest-link {
    border-bottom: none;

    &:hover {
      border-bottom: none;
    }
  }

  .site-title {
    color: var(--wp--custom--color--primary);
    border-bottom: none;
    font-size: 20px;

    &:hover {
      border-bottom: none;
      color: var(--wp--preset--color--primary-dark, #9b0000);
    }
  }

  svg {
    height: 50px;
    width: 32px;
  }
}

/* Offset the fixed nav a little */
.is-position-sticky {
  top: 40px !important;
}

#menu-search-wrapper {
  &.fixed-menu {
    position: fixed;
    top: 0;
    background-color: white;
    width: 100%;
    z-index: 100;
    box-shadow: 0px 2px 15px 6px rgba(0, 0, 0, 0.2);

    .mobile-crest-wrapper {
      display: flex;
    }

    .main-menu-wrapper {
      align-items: center;

      .menu {
        > li {
          > a {
            margin: 0;
            padding: 0.125rem;
          }
        }
      }
    }
  }
}

.back-to-top {
  display: flex;
  position: fixed;
  z-index: 10;
  bottom: 1rem;
  right: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  border: transparent none 0px;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  transition:
    opacity 0.25s,
    background-color 0.25s ease-in;
  opacity: 0;

  &.reveal {
    opacity: 1;
  }

  svg {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;

    path {
      fill: white;
    }
  }

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

  @media (min-width: 40rem) {
    bottom: 2rem;
    right: 2rem;
  }
}

/* Mobile breakpoint defined in the parent theme */
@media screen and (max-width: 74rem) {
  .mobile-crest-wrapper {
    display: none;
  }

  /* Mobile padding adjustments for homepage*/
  .wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained.remove-top-and-bottom-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained.remove-bottom-padding {
    padding-bottom: 0 !important;
  }
}