/* Fonts */
@import "fonts";

/* Load Bootstrap v5 and customizations */
@import "bs-load";

/*SVG ICON SYSTEM*/
@import "svg-icons";

/* Navbar toggler icon override */
@import "nav-burger";

/* Navbar & Main layout styling */
@import "layout-top-navbar-main";

/* main */
html,
body {
  color: $gray-100;
  background-color: $spaceblue-800;
  height: 100%;
}

/* links */
a {
  @extend .text-decoration-none;
  &:hover {
    @extend .text-decoration-underline;
    color: $primary;
  }
}


/* general additional text style */
.font-family-handbrush {
  font-family: $font-family-handbrush;
}
.text-gray-100 {
  color: $gray-100;
}
.text-gray-200 {
  color: $gray-200;
}
.text-gray-300 {
  color: $gray-300;
}
.text-gray-400 {
  color: $gray-400;
}
.text-gray-500 {
  color: $gray-500;
}
.text-gray-600 {
  color: $gray-600;
}
.text-gray-700 {
  color: $gray-700;
}
.fs-larger {
  font-size: larger;
}
.fs-smaller {
  font-size: smaller;
}

/* general additional spacing style */
.mb-two-rem {
  margin-bottom: 2rem !important;
}

/* general additional border style */
.border-bottom {
  &.border-dashed {
    border-bottom-style: dashed !important;
  }
  &.border-gray-300 {
    border-bottom-color: $gray-300 !important;
  }
  &.border-gray-400 {
    border-bottom-color: $gray-400 !important;
  }
  &.border-gray-500 {
    border-bottom-color: $gray-500 !important;
  }
  &.border-gray-600 {
    border-bottom-color: $gray-600 !important;
  }
  &.border-gray-700 {
    border-bottom-color: $gray-700 !important;
  }
  &.border-gray-750 {
    border-bottom-color: $gray-750 !important;
  }
  &.border-gray-800 {
    border-bottom-color: $gray-800 !important;
  }
}

/* post styling */
article.post.sticky {
  @extend .card;
  background-color: shade-color($gray-800, 50%);
  border-bottom: inherit !important;
  margin-bottom: inherit !important;
  padding-bottom: inherit !important;
  &.mb-two-rem {
    margin-bottom: 2rem !important;
  }
  header.post-header {
    @extend .card-body;
    @extend .pb-0;
  }
  div.post-body {
    @extend .card-body;
    @extend .pt-0;
    &:last-child {
      padding-bottom: 0 !important;
      margin-bottom: .25rem !important;
    }
  }
}
.post-header {
  .post-title, .post-title a {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
  }
}

.more-link-outer {
  @extend .text-end;
  @extend .mb-0;
  .more-link {
    @extend .text-decoration-none;
    @extend .font-family-handbrush;
  }
}

// a {
//   color: rgba($white, 0.75);
//   // border-bottom: $gray-600 2px solid;
//   // text-decoration: none;
//   text-decoration-color: $gray-600;
//   &.navbar-brand,
//   &.nav-link {
//     border-bottom: none;
//   }
//   &:visited {
//     color: $info;
//     .post-title & {
//       color: $gray-100;
//     }
//   }
//   &:hover {
//     color: $primary;
//     // text-decoration: none;
//     // border-bottom: $secondary 3px solid;
//     text-decoration-color: $secondary;
//     &.navbar-brand {
//       border-bottom: none;
//     }
//   }
// }
// .wp-block-separator {
//   border-top: none !important;
//   border-bottom: none !important;
// }

// /* more */
// .border-gray-900 {
//   border-color: $gray-900 !important;
// }
// .border-10 {
//   border-width: 10px !important;
// }
// .border-20 {
//   border-width: 20px !important;
// }
// .font-handbrush {
//   font-family: $font-family-handbrush;
// }
// .fw-500 {
//   font-weight: 500;
// }
// .fw-600 {
//   font-weight: 600;
// }


/* blockquote handling */
blockquote,
blockquote.wp-block-quote {
  background-color: tint-color($spaceblue-800, 5%) !important;
  @extend .border-start;
  @extend .border-5;
  border-left-color: tint-color($spaceblue-800, 15%) !important;
  @extend .ms-0;
  @extend .my-4;
  @extend .px-3;
  @extend .py-2;
  quotes: "\201C" "\201D" "\201C" "\201D";
  position: relative;
  p {
    @extend .blockquote;
    &:last-of-type {
      @extend .my-0;
      @extend .py-0;
    }
  }
  &.is-style-large {
    p {
      font-size: 1.7em;
    }
  }
  cite {
    @extend .blockquote-footer;
    @extend .text-gray-300;
    @extend .my-0;
    @extend .py-0;
    font-size: 0.85em;
    font-style: normal;
  }
  &:last-child {
    @extend .py-1;
  }
}
figure.wp-block-pullquote {
  // @extend .my-3;
  // @extend .py-3;
  margin: 2em !important;
  @extend .p-5;
  &:not(.is-style-solid-color) {
    background-color: tint-color($spaceblue-800, 5%) !important;
    @extend .border-top;
    @extend .border-bottom;
    @extend .border-5;
    border-top-color: tint-color($spaceblue-800, 15%) !important;
    border-bottom-color: tint-color($spaceblue-800, 15%) !important;
    & blockquote {
      background-color: none !important;
      border: none !important;
    }
  }
  & blockquote {
    @extend .m-0;
    @extend .p-0;
    background-color: inherit !important;
    border: inherit !important;
  }
}

/* other wp styling */
.wp-block-image.alignfull img, .wp-block-image.alignwide img, .wp-block-image img {
  height: auto;
}
.btn-primary {
  color: $spaceblue-800;
}
.has-drop-cap:not(:focus)::first-letter {
  font-size: 5em;
  margin: 0.05em 0.05em 0 0;
}
.wp-block-button {
  .wp-block-button__link {
    @extend .btn;
    @extend .text-decoration-none;
    @extend .mb-1;
  }
  &:not(.is-style-outline) .wp-block-button__link {
    @extend .btn-primary;
  }
  &.is-style-outline .wp-block-button__link {
    @extend .btn-outline-primary;
  }
  &.alignleft {
    @extend .text-start;
  }
  &.aligncenter {
    @extend .text-center;
  }
  &.alignright {
    @extend .text-end;
  }
}
table {
  @extend .table;
  @extend .table-dark;
}
.wp-block-table {
  table {
    @extend .table;
    @extend .table-dark;
  }
  &.is-style-stripes {
    table {
      @extend .table-striped;
    }
  }
}
.post-page-numbers {
  @extend .page-item;
  &.current {
    @extend .active;
    & .page-link {
      background-color: shade-color($primary, 25%) !important;
      border-color: shade-color($primary, 25%) !important;
      color: $gray-100;
      &:hover {
        background-color: shade-color($primary, 25%) !important;
        border-color: shade-color($primary, 25%) !important;
        color: $gray-100;
      }
    }
  }
  &:hover {
    @extend .text-decoration-none;
  }
  & .page-link {
    border: 1px solid shade-color($primary, 25%);
    background-color: inherit !important;
    &:hover {
      border: 1px solid #51A39F;
      background-color: #51A39F !important;
      color: $spaceblue-800;
    }
  }
}

// &:not(.is-style-outline) {
    //   @extend .btn-primary;
    // }
    // &.is-style-outline {
    //   @extend .btn-outline-primary;
    // }

// /* blog */
// .post-title a {
//   color: $gray-100;
//   text-decoration: none;
//   border-bottom: none;
//   &:hover {
//     color: $primary;
//     // border-bottom: $secondary 3px solid;
//     text-decoration: underline;
//     text-decoration-color: $secondary;
//   }
// }
// .post-lede,
// .post-body {
//   h2, h3, h4, h5, h6 {
//     color: $gray-200;
//     margin-top: 2rem;
//   }
// }
// .post li {
//   line-height: 1.75rem;
// }
// .more-link {
//   @extend .fs-6;
// }

// /* widget styling */
// #footer-widgets {
//   background-color: $gray-750;
//   border-radius: .5em;
//   .widgettitle {
//     @extend .fs-4;
//   }
//   .wp-block-group {
//     @extend .px-3;
//     @extend .py-3;
//     max-width: 25rem;
//   }
//   ul {
//     padding-inline-start: 2rem;
//   }
//   .wp-block-loginout {
//     display: list-item;
//     margin-left: 2rem;
//     list-style-type: disc;
//   }
// }
// .wp-block-tag-cloud {
//   @extend .mb-0;
// }

/* search form */
.form-control {
  color: $gray-100 !important;
  background-color: $spaceblue-900 !important;
  border-color: $spaceblue-600;
}
.form-control:focus {
  border-color: $input-focus-border-color;
}
.form-control::-ms-clear,
input.form-control::-ms-clear,
.form-control::-ms-reveal,
input.form-control::-ms-reveal { display: none; }
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    $gray-750    !important;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    $gray-750    !important;
  opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    $gray-750    !important;
  opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:    $gray-750    !important;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color:    $gray-750    !important;
}
.form-control::placeholder { /* Most modern browsers support this now. */
  color:    $gray-750    !important;
}


label {
  @extend .form-label;
}
input,
.wp-block-search .wp-block-search__input,
form input {
  @extend .form-control;
  &:focus {
    border-color: $input-focus-border-color;
  }
  &::-ms-clear
  &::-ms-reveal { display: none; }
  &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    $gray-750    !important;
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    $gray-750    !important;
    opacity:  1;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    $gray-750    !important;
    opacity:  1;
  }
  &:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    $gray-750    !important;
  }
  &::-ms-input-placeholder { /* Microsoft Edge */
    color:    $gray-750    !important;
  }
  &::placeholder { /* Most modern browsers support this now. */
    color:    $gray-750    !important;
  }
}
button,
.wp-block-search .wp-block-search__button,
form button {
  @extend .btn;
  @extend .btn-primary;
}
select {
  @extend .form-select;
}
.btn-primary, button, .wp-block-search .wp-block-search__button, form button, .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  box-shadow: inherit;
}