/*
Theme Name:     Foxiz child
Template:      	foxiz
Theme URI:      https://foxiz.themeruby.com
Author:         Theme-Ruby
Author URI:     https://themeforest.net/user/theme-ruby/portfolio/
Description:    Make your modifications to Foxiz in this child theme.
Version:        1.0
Tags:           custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments, translation-ready
License:        Themeforest Licence
License URI:    https://themeforest.net/licenses/standard
*/

/* Your CSS code goes here
-------------------------------------- */

/*
Theme Name: Foxiz Child
Template: foxiz
*/

/* Main image styles */
.featured-lightbox-trigger img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 15px 30px rgba(0, 0, 0, 0.2); /* Ensure the initial shadow is applied */
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-lightbox-trigger img:hover {
    transform: translateY(-5px);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.25); /* Enhance the shadow on hover */
}

/* Image styles for article images */
.wp-block-image.size-large img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 5px;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-image.size-large img:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.1);
}

/* Общие стили для контейнера FAQ */
.schema-faq-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Стили для вопросов */
.schema-faq-question {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
  padding: 15px 20px;
  color: #333;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schema-faq-question:hover {
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.schema-faq-question::after {
  content: '+';
  font-size: 18px;
  margin-left: 10px;
  transition: transform 0.3s ease, content 0.3s ease;
}

.schema-faq-question.active::after {
  content: '-';
  transform: rotate(180deg);
}

/* Стили для ответов */
.schema-faq-answer {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  color: #555;
  display: none;
  padding: 15px 20px;
  border-left: 4px solid #FF6E5A;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease;
}

.schema-faq-answer.visible {
  display: block;
}

/* Анимация для появления ответов */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .schema-faq-container {
    padding: 15px;
    margin: 10px 0;
  }
  .schema-faq-question {
    font-size: 16px;
    padding: 10px 15px;
  }
  .schema-faq-answer {
    font-size: 14px;
    padding: 10px 15px;
  }
  .taxonomy-description {
    padding-left: 20px;
  }
}

/* Стили для скрытия части текста */
.taxonomy-description {
    max-height: 300px; /* Увеличиваем видимую часть текста */
    overflow: hidden;
    transition: max-height 0.5s ease; /* Плавный переход */
    position: relative;
    cursor: pointer; /* Добавляем указатель курсора */
    padding-left: 30px; /* Оставляем место для стрелки */
}

.taxonomy-description::before {
    content: ''; /* Убираем старую стрелку */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg); /* Изначально стрелка вниз */
    border: solid #ff1800;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
    transition: transform 0.5s ease; /* Анимация поворота */
}

.taxonomy-description.expanded::before {
    transform: translateY(-50%) rotate(180deg); /* Стрелка вверх при раскрытии */
}

.taxonomy-description.expanded {
    max-height: 2000px; /* Значение, заведомо большее возможной высоты контента */
}