.documentation-page {
  // override of _proofing.scss for kb only
  #block-vagovclaro-content .paragraph {
    /* stylelint-disable */
    border: none;
    /* stylelint-enable */
    margin-bottom: 0;
    padding: 0;
  }

  .paragraph {
    &.paragraph--type--q-a,
    &.paragraph--type--collapsible-panel-item {
      /* stylelint-disable */
      border: none;
      /* stylelint-enable */
      margin-bottom: 0;
      padding: 0;

      .paragraph {
        /* stylelint-disable */
        border: none;
        /* stylelint-enable */
      }

      .paragraph--metadata {
        display: none;
      }

      details {
        border: 3px solid var(--va-gray-lightest);
        /* stylelint-disable */
        border-top: none;
        /* stylelint-enable */
        display: block;
        margin: -10px 0 0;
        position: relative;
        width: auto;

        .field__item {
          font-size: inherit;
          line-height: 1.5;
          margin-bottom: 0;

          &.field--name-field-title {
            background-color: transparent;
            padding: 0;
          }
        }

        /* stylelint-disable -- Need this naked [open] selector. */
        &[open] {
          summary::after {
            content: "-";
            float: right;
            font-size: 2.5em;
            font-weight: bold;
            margin-right: 10px;
            margin-top: 3px;
          }
        }
        /* stylelint-enable */

        .details-body {
          padding-left: 20px;
        }

        summary {
          background: var(--va-gray-lightest);
          cursor: pointer;
          font-family: var(--font-family-sans);
          font-weight: 600;
          list-style: none;
          padding: 10px 10px 10px 20px;
          text-decoration: none !important;

          h3 {
            display: inline-block;
            font-family: var(--font-family-sans);
            font-size: 1em;
            font-weight: 600;
            margin: 0;
            max-width: 95%;
            padding: 0;
            text-transform: none;
          }

          &::after {
            content: "+";
            float: right;
            font-size: 2em;
            font-weight: bold;
            margin-right: 10px;
            margin-top: 3px;
          }

          ::marker {
            display: none;
          }

          &::-webkit-details-marker {
            display: none;
          }
        }
      }
    }

    &.paragraph--type--q-a.paragraph--view-mode--default details summary h3 {
      max-width: 100%;
    }
  }

  // prevents some long KB page titles overlapping with the header form
  .page-title {
    max-width: 70%;
  }
}

.kb-search-block-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-s);
  margin-top: -2.5rem;
}

.header-search-form form {
  display: flex;

  .form-item {
    margin: 0;
  }

  .form-element {
    background: var(--va-blue-dark);
    border-color: var(--va-gray-darkest);
    color: var(--va-white);
    min-height: 32px;

    &::placeholder {
      color: var(--va-white);
    }
  }

  .form-actions {
    align-items: flex-end;
    margin: 0 0 0 var(--space-m);
  }

  .form-actions .button {
    margin: 0;
  }
}

.tags {
  display: flex;

  .taxonomy-term {
    margin-left: 2px;

    a {
      background: var(--va-gray-lightest);
      border-radius: 20px;
      display: inline-block;
      font-size: 14px !important;
      font-weight: 700;
      margin-right: var(--space-s) !important;
      padding: var(--space-xs) var(--space-m);
      text-decoration: none;
    }

    a:hover {
      background: var(--va-blue-lightest);
      text-decoration: none;
    }
  }
}

// KB landing and search results page overrides
#kb-landing-page__container {
  // Special override from .vagovclaro .layout-container
  margin: 0 auto !important;
  max-width: 100%;
  width: 900px;

  .field--name-field-links {
    padding-left: 10px;
  }

  &.search-results__wrapper {
    padding-bottom: 75px;

    .page-title {
      margin-top: 12px;
    }
  }
}

.search-results__header {
  padding-bottom: 36px;
}

.kb__search-result {
  .kb__search-result__title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }

  .kb__search-result__intro {
    font-size: 1.1rem;
    line-height: 1.1;
  }

  .kb__search-result__excerpt {
    display: block;
    padding: 1em;
  }
}

main {
  #block-knowledge-base-search-form {
    background: none;
    border: 0;
    box-shadow: none;
    margin: 30px 0 50px;
    padding: 0;

    label {
      font-family: var(--font-family-serif);
      font-size: 20px;
      margin-bottom: 20px;
    }

    .form-item--keyword {
      display: inline-block;
      width: 400px;

      input {
        background-image: url("/themes/custom/vagovclaro/images/icons/magnifying-glass-868686.svg");
        background-position-x: calc(100% - 10px);
        background-position-y: center;
        background-repeat: no-repeat;
        background-size: 22px;
        padding-right: 40px;
        width: 100%;
      }
    }

    .form-actions {
      display: inline-block;
      margin: 0 0 0 20px;
    }
  }
}

.page-content {
  #vagovclaro-knowledge-base__search-wrapper {
    background: #f0f0f0;
    margin: 40px -40px;
    padding: 25px 40px;

    label {
      font-family: var(--font-family-serif);
      font-size: 20px;
      margin-bottom: 20px;
    }

    .form-item--keyword {
      display: inline-block;
      width: 400px;

      input {
        background-image: url("/themes/custom/vagovclaro/images/icons/magnifying-glass-868686.svg");
        background-position-x: calc(100% - 10px);
        background-position-y: center;
        background-repeat: no-repeat;
        background-size: 22px;
        padding-right: 40px;
        width: 100%;
      }
    }

    .form-actions {
      display: inline-block;
      margin: 0 0 0 20px;

      input {
        background-color: var(--color-absolutezero-hover);
        color: var(--va-white);
        transition-duration: 0.3s;
        transition-property: background-color;
        transition-timing-function: ease-in-out;

        &:hover {
          background-color: var(--color-absolutezero-active);
        }
      }
    }
  }
}

.paragraph--view-mode--user-guides {
  // Some next level duct-taping via selectors
  #training ~ p {
    display: inline-block;

    .usa-button {
      background: var(--va-gray-lightest);
      color: var(--va-black);

      &:hover {
        background: var(--va-gray-med);
      }
    }

    &:first-of-type {
      display: block;
    }
  }
}
