@charset "utf-8";

/* View */

.blog__illustration {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  object-position: center;
}

.blog__previous-and-next {
  display: flex;
  flex-direction: row;
}

.blog__previous-and-next > * {
  max-width: 42%;
}

.blog__previous-and-next .call-to-action {
  line-height: var(--line-height-default);
}

.blog__previous-and-next > .next {
  margin-left: auto;
}

/* Form */

.form__blog-post {
  padding: 0;
}

.form__blog-post input,
.form__blog-post textarea {
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.form__blog-post textarea {
  margin-top: 0;
}

#blog-post__more-options {
  text-align: right;
}

#blog-post__publication-date input {
  width: 2.5em;
  text-align: center;
  background-color: var(--color-grey-xxxxxlight);
}

#blog-post__publication-date input:hover {
  background-color: var(--color-highlight-halo);
}

#blog-post__publication-date input[id$="--year"] {
  width: 3.7em;
}

#blog-post__publication-date input[id$="--day"] {
  margin-right: 1em;
}

.form__blog-post #blog-post__permalink {
  color: var(--color-link);
  text-decoration: underline;
}

.form__blog-post #blog-post__category,
.form__blog-post #blog-post__category--wrapper {
  width: unset;
}

.form__blog-post #blog-post__illustration {
  color: var(--color-text-xlight);
}

.form__blog-post #blog-post__description {
  min-height: calc(var(--input-height-default) * 2);
  margin-bottom: var(--gutter-thin); /* To override .content-like */
  resize: none;
}

.form__blog-post #blog-post__title {
  font-weight: bold;
  font-size: 1.7em;
  height: auto;
}

.form__blog-post #blog-post__submit {
  width: auto;
  align-self: flex-end;
}

/* List */

#form__blog-search {
  width: 100%;
  margin-right: auto;
  padding: 0;
}

#form__blog-search #blog-search__query {
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

#form__blog-search #blog-search__categories {
  margin-top: var(--gutter-thin);
}

#blog .blog__toolbar {
  margin-bottom: var(--gutter-thin);
}

#blog .visible-for-editors-only {
  opacity: 0.3;
}

#blog-post .visible-for-editors-only {
  background-color: var(--color-highlight-halo);
  border-radius: var(--border-radius-default);
  padding: var(--gutter-thin) var(--gutter-medium);
}

#blog__blog-posts-list .blog-posts-list__preview-link {
  white-space: nowrap;
}

@media all and (min-width: 470px) {
  #blog .blog__toolbar {
    flex-wrap: nowrap;
  }
}