/*
Theme Name: Bifrost Child
Theme URI: https://neuronthemes.com/bifrost
Description: This is a child theme of Bifrost
Author: NeuronThemes
Author URI: https://neuronthemes.com
Template: bifrost
Version: 2.0.0
*/

/*==============================
=   Blog Filter Bar (tags/search)
==============================*/

.o-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 25px;
  margin: 20px 0 10px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.o-filter-bar__tags {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 300px;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-filter-bar__tags li {
  margin: 0;
}

.o-filter-bar__tags a {
  font-size: 14px;
}
.o-filter-bar__tags a:hover,
.o-filter-bar__tags a:focus {
  box-shadow: none;
  text-decoration: underline;
}


.o-filter-bar__search {
  flex: 0 1 220px;
  margin: 0 0 0 auto;
}

.o-filter-bar__search input[type="search"] {
  width: 100%;
  margin: 0;
  padding: 6px 12px;
  border-radius: 0 !important;
  -webkit-appearance: none;
}

/*==============================
=   Listing title (tag/search)
==============================*/

/* Match the Elementor heading on /blog/ (kit primary colour + font). The kit
   sets "h2 { color: ... }" on the body class, so the selector must be as specific. */
.elementor-kit-7 h2.o-listing-title,
h2.o-listing-title {
  color: var(--e-global-color-primary, #BF8970);
  font-family: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight, 600);
}

/*==============================
=   Listing title (tag/search)
==============================*/

/* Match the Elementor heading on /blog/ (kit primary colour + font). The kit
   sets "h2 { color: ... }" via the body class, so this must be as specific. */
.elementor-kit-7 h2.o-listing-title,
h2.o-listing-title {
  color: var(--e-global-color-primary, #BF8970);
  font-family: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight, 600);
}

/* Tags directly under the title on single posts */
.p-blog-single__tagcloud--top {
  margin: 0 0 20px;
}

/* Post title on single posts: same colour/font as the /blog/ heading
   (the Elementor kit otherwise colours every h2 beige). */
.elementor-kit-7 .p-blog-single h2.o-blog-post__title {
  color: var(--e-global-color-primary, #BF8970);
  font-family: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight, 600);
}

/* Ajax "Show More" is active: no numbered pagination on tag/search pages */
.bifrost-ajax-pagination .o-pagination {
  display: none;
}

/*==============================
=   "Show More" button
==============================*/

/* Same look as the Elementor buttons on /kontakt/ (kit: accent fill, white
   text, 5px radius; hover/focus: white fill, accent text, dotted border).
   Covers the theme button (tag/search) and the Elementor Posts widget (/blog/).
   The parent theme (.a-button) and the Elementor page CSS use !important, so
   the :not(#id) suffix raises specificity above all of them. */
.elementor-kit-7 .load-more-posts:not(#bifrost-btn) {
  display: inline-block;
  width: auto;
  padding: 12px 24px;
  font-family: var(--e-global-typography-accent-font-family, "Roboto"), sans-serif;
  font-size: 17.5px;
  font-weight: var(--e-global-typography-accent-font-weight, 500);
  line-height: 1;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  color: #fff !important;
  background-color: var(--e-global-color-accent, #BF8970) !important;
  border: 1px solid var(--e-global-color-accent, #BF8970) !important;
  border-radius: 5px !important;
  box-shadow: none;
  cursor: pointer;
  transition: all 0.3s;
}

.elementor-kit-7 .load-more-posts:not(#bifrost-btn):hover,
.elementor-kit-7 .load-more-posts:not(#bifrost-btn):focus {
  color: var(--e-global-color-accent, #BF8970) !important;
  background-color: #fff !important;
  border-style: dotted !important;
  box-shadow: none;
  outline: none;
}

/* While loading / disabled */
.elementor-kit-7 .load-more-posts:not(#bifrost-btn).a-button--loading,
.elementor-kit-7 .load-more-posts:not(#bifrost-btn):disabled {
  opacity: 0.7;
  cursor: default;
  color: var(--e-global-color-accent, #BF8970) !important;
  background-color: #fff !important;
  border: 1px dotted var(--e-global-color-accent, #BF8970) !important;
}

/* Mobile: centre the filter bar (tags and search) */
@media (max-width: 767px) {
  .o-filter-bar {
    justify-content: center;
    text-align: center;
  }

  .o-filter-bar__tags {
    flex: 1 1 100%;
    justify-content: center;
  }

  .o-filter-bar__search {
    flex: 0 1 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}