/*!
 * Search page styles for Cloudflare static worker pages.
 * Extends main.css with search-specific layout, form, and result styles.
 */

/* === Search page layout === */

body.search .site-main {
  padding-top: 25px;
  padding-bottom: 20px;
}

body.search .site-main,
.articles--search-results,
.section--search-results {
  max-width: min(100%, 680px);
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 767px) {
  body.search .site-main {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* === Search form wrapper === */

.search-form-wrap {
  max-width: min(100%, 680px);
  margin: 0 auto 30px auto;
}

/* === Search form (shared) === */

.main-search-form__container {
  background-color: transparent;
  color: var(--color-theme-foreground-secondary);
  fill: var(--color-theme-foreground-secondary);
  border-radius: 0;
  border: none;
  display: flex;
}

.main-search-form__input {
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  background-color: transparent;
  color: var(--color-theme-foreground);
  border: 0;
  outline: none;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin: 0;
  min-width: 0;
  vertical-align: middle;
  white-space: normal;
  width: 100%;
  z-index: 10;
}

/* === Search form (default skin) === */

.main-search-form--skin-default {
  border-radius: 0;
  border: var(--border-style-theme-search-minimal);
}

.main-search-form--skin-default:focus-within {
  border: var(--border-style-theme-search-minimal-focus);
}

.main-search-form--skin-default .main-search-form__container {
  flex-direction: row-reverse;
}

.is-search-submit {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-theme-foreground-secondary);
  fill: var(--color-theme-foreground-secondary);
  padding: 0 8px;
  width: auto;
}

.is-search-icon svg {
  width: 22px;
  height: auto;
  display: block;
}

/* === Search form (minimal skin) === */

.main-search-form--skin-minimal {
  border: var(--border-style-theme-search-minimal);
}

.main-search-form--skin-minimal:focus-within {
  border: var(--border-style-theme-search-minimal-focus);
}

.main-search-form--skin-minimal .main-search-form__icon {
  display: flex;
  align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
}

.main-search-form--skin-minimal .main-search-form__icon svg {
  width: 22px;
  height: auto;
  display: block;
}

/* === Search results heading === */

.section--search-results .subheadline-wrapper {
  border: none;
  margin: 0 0 40px 0;
  padding: 0;
}

@media (max-width: 767px) {
  .section--search-results .subheadline-wrapper {
    margin: 0 0 42px 0;
  }
}

.section--search-results .subheadline-wrapper,
.section--search-results .subheadline-wrapper h2 {
  color: var(--color-theme-foreground-tertiary);
  font-family: var(--font-family-roboto);
  font-size: 16px;
  font-weight: 400;
}

/* === Organic result items === */

.articles--search-results .post {
  margin: 0 0 32px 0;
}

.articles--search-results .post-teaser-text {
  padding: 0;
}

.articles--search-results .post-title {
  margin: 0 0 6px 0;
}

.articles--search-results .post-title-link,
.articles--search-results .post-title-link:link,
.articles--search-results .post-title-link:visited,
.articles--search-results .post-title-link:active {
  color: var(--color-theme-list-title);
  font-family: var(--font-family-roboto);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}

.articles--search-results .post-teaser-meta {
  color: var(--color-theme-list-date);
  font-family: var(--font-family-default);
  font-size: 12px;
  font-weight: 400;
  margin: 0 0 13px 0;
}

.articles--search-results .post-teaser-excerpt {
  color: var(--color-theme-list-excerpt);
  font-family: var(--font-family-default);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 10px 0;
}

.articles--search-results .post-teaser-read-more-wrapper {
  margin: 0;
  padding: 0;
  text-align: left;
}

.articles--search-results .post-teaser-read-more,
.articles--search-results .post-teaser-read-more:link,
.articles--search-results .post-teaser-read-more:visited,
.articles--search-results .post-teaser-read-more:active {
  color: var(--color-theme-list-readmore);
  font-family: var(--font-family-default);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}

.articles--search-results .post-teaser-read-more::after {
  content: "»";
  display: inline-block;
  width: 12px;
  height: 12px;
  color: var(--color-theme-list-readmore);
}

/* === RSoC ad containers === */

body.search #main_search_result {
  margin: 0 0 66px 0;
  min-height: 180px;
}

body.search #main_related {
  margin: 66px 0 0 0;
  min-height: 60px;
}

@media (max-width: 767px) {
  body.search #main_search_result {
    margin: 74px 0 166px 0;
    min-height: 220px;
  }

  body.search #main_related {
    margin: 40px 0 0 0;
  }
}