/**
 * phpMyFAQ 4.0 default theme
 *
 * This Source Code Form is subject to the terms of the Mozilla Public License,
 * v. 2.0. If a copy of the MPL was not distributed with this file, You can
 * obtain one at https://mozilla.org/MPL/2.0/.
 *
 * @package   phpMyFAQ
 * @author    Thorsten Rinne <thorsten@phpmyfaq.de>
 * @copyright 2024 phpMyFAQ Team
 * @license   https://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0
 * @link      https://www.phpmyfaq.de
 * @since     2024-09-01
 */

:root,
[data-bs-theme='light'] {
  --bs-light: #fff;
  --bs-dark: #060508;
  --bs-primary: #34495e;
  --bs-primary-rgb: 52, 73, 94;
  --bs-secondary: #1d646a;
  --bs-info: #40b0ae;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #f01704;
  --bs-pmf-nav: #2f3035;
  --bs-pmf-footer: #142f48;
  --bs-pmf-background: #9eb6c9;
  --bs-link-color: #34495e;
  --bs-link-color-rgb: 52, 73, 94;
  --bs-link-hover-color: #f39533;
  --bs-link-hover-color-rgb: 243, 149, 51;
  --bs-heading-color: #4b4b4c;
  --bs-body-color: #717f86;
  --bs-body-color-rgb: 113, 127, 134;
  --bs-btn-hover-bg: #183653;
  --bs-info-bg-subtle: #7497b9;
  --bs-info-border-subtle: #7497b9;
  --bs-font-sans-serif: Roboto, system-ui,-apple-system,"Segoe UI","Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}

[data-bs-theme='dark'] {
  --bs-light: #fff;
  --bs-dark: #060508;
  --bs-primary: #34495e;
  --bs-secondary: #1d646a;
  --bs-info: #40b0ae;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #f01704;
  --bs-pmf-nav: #2f3035;
  --bs-pmf-footer: #142f48;
  --bs-pmf-background: #9eb6c9;
  --bs-link-color: #34495e;
  --bs-link-color-rgb: 52, 73, 94;
  --bs-link-hover-color: #f39533;
  --bs-link-hover-color-rgb: 243, 149, 51;
  --bs-heading-color: #4b4b4c;
  --bs-body-color: #717f86;
  --bs-body-color-rgb: 113, 127, 134;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #183653;
  --bs-btn-hover-border-color: #183653;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #183653;
  --bs-btn-active-border-color: #183653;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}

.search-advanced {
  box-shadow: none;
}

.search-advanced input,
.search-advanced select {
  width: 100%;
  max-width: 600px;
  font-size: 18px;
  border-radius: 5px;
  text-indent: 0;
  border: 0;
  padding: 0 30px;
  margin: 20px 0 0 0;
  height: 50px;
  -webkit-appearance: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.search-advanced input:hover,
.search-advanced input:focus,
.search-advanced select:hover,
.search-advanced select:focus {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
  border: 0;
}

.feature-card {
  border: 0;
  width: 100%;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.feature-card img {
  width: 120px;
  margin-bottom: 10px;
}

.feature-card p {
  margin: 0;
  font-weight: 500;
}

.search-main {
  padding: 50px 0 100px 0;
}

.categories-accordion .accordion-item {
  border: 0;
  margin-bottom: 10px;
}

.categories-accordion .accordion-button {
  color: var(--bs-link-color);
  background-color: #efefef;
  box-shadow: none;
  border-radius: var(--bs-accordion-border-radius);
}

.categories-accordion .list-group-item {
  border: 0 1px 1px 1px solid rgba(0, 0, 0, 0.125);
}
.pmf-faq-body {
  width: 100%;
  background-color: #f8f8f8;
  padding: 40px;

  pre {
    padding: 20px !important;
    margin: 40px 0;
    border-left: 4px solid #F59833;
    strong {
      color: #F59833;
      font-size: 1.5em;
    }
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.2;
    margin: 40px 0 20px 0;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  ol {
    counter-reset: item;
    list-style: none;
    padding-left: 0;

    li {
      position: relative;
      counter-increment: item;
      margin-bottom: 20px;
      padding-left: 50px;

      &::before {
        content: counter(item);
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        color: white;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background-color: #F59833;
      }
    }
  }
  ul {
    padding-left: 40px;
    li::marker {
      color: #F59833;
    }
  }
}

.tag {
  padding-left: 0;
}

.tag a {
  text-decoration: none;
  color: #FFF;
  padding: 5px 15px;
  margin-right: 5px;
  font-weight: 500;
}

.tag a:hover,
.tag a:focus {
    color: #FFF;
}

.faq-voting .pmf-stars .pmf-voting-star {
  border: 1px solid var(--bs-btn-border-color);
  font-size: 1.2rem;
  padding: 0.7rem;
  margin: 0 1rem;
}

.faq-voting .pmf-voting-star.selected {
  color: var(--bs-primary);
}

.faq-voting .pmf-voting-star.selected:hover,
.faq-voting .pmf-voting-star.selected:active,
.faq-voting .pmf-voting-star.selected:active:focus {
  color: #fff;
}

.faq-voting .alert {
  margin-top: 1rem;
}

.pmf-category-overview {
  width: 800px;
  text-align: left;
}

@media (max-width: 1024px) {
  .pmf-category-overview {
    width: 600px;
  }
}

@media (max-width: 650px) {
  .pmf-category-overview {
    width: 310px;
  }
}