/* PEL classes living here temporarily
-----------------------------------------------------------
*/

.field__bp_header {
	text-align: center;
}

.paragraph--width--full {
  @include full-width();
}

/* Components
-----------------------------------------------------------
*/

.card-link-wrapper {
  text-decoration: none;
}

/* Navigation
-----------------------------------------------------------
*/

.navbar {
  --bs-navbar-color: #000 !important;
  --bs-navbar-brand-color: #000 !important;
  &-brand {
    &:not(:has(img)) {
      @include media-breakpoint-down(lg) {
        font-size: 2.5rem;
      }
      @media (max-width: 755px) {
        white-space: break-spaces;
        max-width: 6ch;
        font-size: 1.5rem !important;
      }
      @media (max-width: 385px) {
        display: none;
      }
    }
  }
  .h1:has(.navbar-brand) {
    margin-bottom: 0 !important;
    font-weight: 600;
  }
}

.dropdown-menu {
  padding-block: 0;
  --bs-dropdown-box-shadow: none;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-font-size: 1.25rem;
  border-top: 1px solid #000;
}

.navbar-nav {
  justify-content: space-between;
  width: 100%;
  .nav-link,
  .dropdown-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-link-color: #000;
  }
  .nav-link {
    --bs-nav-link-font-size: 1.25rem;
  }
}

.navigation-region {
  align-items: center;
  @include media-breakpoint-up(lg) {
    width: 100%;
    align-items: start;
  }
  @include media-breakpoint-down(sm) {
    .btn-lg {
      --bs-btn-border-radius: var(--bs-border-radius);  
      --bs-btn-padding-x: 0.75rem;
      --bs-btn-padding-y: 0.375rem;
      --bs-btn-font-family: ;
      --bs-btn-font-size: 1rem;
      --bs-btn-font-weight: 400;
      --bs-btn-line-height: 1.8;
    }
  }
}

.navbar-toggler {
  background-image: none;
  border: 0;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(#{to-rgb($primary)}, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nav tabs
-----------------------------------------------------------
*/

.nav-tabs {
  margin-top: 1rem;
}

/* Footer
-----------------------------------------------------------
*/

footer {
  .menu--footer {
    @include media-breakpoint-down(lg) {
      align-items: center;
    }
  }
}

/* Elements
-----------------------------------------------------------
*/

.modal {
  --bs-modal-border-radius: 1em;
  --bs-modal-width: 650px;
  &-content {
    --bs-modal-border-radius: 2.5rem !important;
    overflow: hidden;
  }
  &-header {
    position: absolute;
    border-bottom: 0;
    filter: invert(1);
    z-index: 99;
    right: 0;
  } 
  &-body {
    padding:0;
    max-height: 90vh;
    overflow-y: scroll;
  }
  &-footer {
    display: none;
  }
  .field-media-image {
    width: 100%;
  }
  .card {
    --bs-card-border-width: 0;
  }
}

// buttons

.btn-lg {
  --bs-btn-border-radius: 60px;
}

.region-header h1 {
  margin-block: 2rem;
}

// Targets non nested paragraphs and gives them some space
// todo: get paragraph fields showing up in a standard way
article > div > .field__field_body_paragraph,
article > div > .field__field_paragraphs {
  &:not(:first-child) {
    margin-block: 3rem;
    @include media-breakpoint-down(lg) {
      margin-block: 1.5rem;
    }
  }

  //let hero paragraphs kiss the footer
  &:last-of-type:has(.bs-hero) {
    margin-bottom: 0;
  }

}

.paragraph > .paragraph__column {
  padding-inline: 0;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown > .dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}


// Typography
ul +, ol +, p + {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 2rem;
  }
}

.card-link { 
  display: block; 
  text-decoration: none;
}

blockquote {
  font-size: 1.85rem;
  margin-block: .5rem;
  margin-left: 2rem;
  padding-left: 1rem;
  border-left: .5rem solid #dedede;
}

cite {
    font-size: 2rem;
    text-align: right;
    display: block;
}

p:has(sub) {
  margin-bottom: 0;
  line-height: 1.5;
}


/* Media and related
-----------------------------------------------------------
*/

// Modify Drupal core's system module align.module.css Alignment classes for block level elements (images, videos, blockquotes, etc.)

.align-left {
  margin-right: 1rem;
  @include media-breakpoint-up(lg) {
    margin-right: 1.5rem;
  }
}
.align-right {
  margin-left: 1rem;
  @include media-breakpoint-up(lg) {
    margin-left: 1.5rem;
  }
}

// On small screens, center left or right aligned elements. 
@include media-breakpoint-down(md) {
  .align-right,
  .align-left {
    &:not(.small) {
      display: block;
      margin-right: auto;
      margin-left: auto;
      float: none;
      width: fit-content;
    }
  }
}

// Include our extras for nice centering.
.align-center {
  float: none;
  width: fit-content;
}

// Stop inline styles and images from breaking out of layout
img,
.image_resized {
  --double-gutter: calc(var(--bs-gutter-x, 1rem) * 2);
  max-width: calc(100vw - var(--double-gutter));
}

.field__field_text:has(.media.align-left) {
  ul {
    overflow: auto;
  }
}

/* Specific page related
-----------------------------------------------------------
*/

// Science Hub
.nid-66 {
  .field__field_body_paragraph:has(.paragraph--type--drutopia-collection) {
    margin-top: 0 !important;
    &::before {
      content: "";
      border-top: 1px #000 solid;
      padding-bottom: 3rem;
      @include full-width();
      display: block;
    }
  }
}

// Payment form, standalone unlike first page of Give form which we embed.
.give-donation-donate-add-form {
  padding-bottom: 3rem;
}