/*
Theme Name: Relyo
Theme URI:
Author: CozyThemes
Author URI: https://cozythemes.com/
Description: Relyo is a modern Full Site Editing (FSE) WordPress theme crafted for construction companies, contractors, builders, and engineering firms who want to present their work with strength, clarity, and professionalism. Built entirely with Gutenberg blocks, Relyo gives you complete control over layouts, templates, and global styles—without writing a single line of code. The theme features a bold yet clean, performance-focused design that highlights projects, services, expertise, and client trust while maintaining a professional construction aesthetic. With customizable patterns, responsive layouts, and seamless block-based editing, Relyo makes it easy to create impactful construction websites, company profiles, and project showcases. Fully compatible with WordPress’s latest FSE capabilities, Relyo ensures flexibility, scalability, and a future-ready foundation—perfect for construction businesses that value reliability, performance, and strong visual presentation.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, e-commerce, full-site-editing, block-patterns, full-width-template, rtl-language-support, threaded-comments, translation-ready, block-styles, wide-blocks
Version: 1.0.4
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: relyo
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
.entry-content.wp-block-post-content a,
.wp-block-comment-content a,
p a {
  text-decoration: underline;
}
/* WooCommerce Product Archive */
.relyo-product-image-overlay {
  & span.wp-block-cover__background {
    visibility: hidden;
  }
  & div.wp-block-cover__inner-container {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s ease-in-out;
  }
}
.relyo-product-image-overlay:hover {
  & span.wp-block-cover__background {
    visibility: visible;
  }
  & div.wp-block-cover__inner-container {
    opacity: 1;
    transform: translateY(0px);
    transition: all 0.3s ease-in-out;
  }
}
/* ***** NEWSLETTER ***** */
.wp-block-contact-form-7-contact-form-selector {
  & form.wpcf7-form {
    & p {
      position: relative;
      & .wpcf7-form-control-wrap {
        display: inline-flex;
        width: 100%;
      }
      & .wpcf7-form-control-wrap:nth-of-type(even) {
        margin: 12px 0px;
      }
      & .wpcf7-form-control {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--wp--preset--color--border-color);
      }
    }
  }
}
/* ***** Variant: Form 1 ***** */
.wp-block-contact-form-7-contact-form-selector.relyo-contact-form-1 {
  & form.wpcf7-form {
    & p {
      & .wpcf7-form-control {
        border-radius: 8px;
        padding: 18px 28px;
        font-size: inherit;
      }
      & .wpcf7-form-control.wpcf7-submit {
        margin-top: 24px;
        background-color: var(--wp--preset--color--primary);
        color: currentColor;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        &:hover {
          background-color: var(--wp--preset--color--secondary);
        }
      }
    }
  }
}
/* ***** Variant: Form 2 ***** */
.wp-block-contact-form-7-contact-form-selector.relyo-contact-form-2 {
  & form.wpcf7-form {
    & p {
      & .wpcf7-form-control {
        border-radius: 8px;
        padding: 18px 28px;
        font-size: inherit;
      }
      & .wpcf7-form-control.wpcf7-submit {
        margin-top: 24px;
        background-color: var(--wp--preset--color--secondary);
        color: currentColor;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        &:hover {
          background-color: var(--wp--preset--color--primary);
        }
      }
    }
  }
}
/* Принудительный стиль для кнопки формы */
.ff-btn-submit {
    border: 1px solid #fff !important;
    border-radius: 32px !important;
    padding: 16px 60px !important;
    width: 260px !important;
    height: 51px !important;
    box-shadow: 0 4px 12px 0 rgba(140, 60, 152, 0.5) !important;
    background: linear-gradient(147deg, #fa983d 0%, #dc5581 49.77%, #a639c9 100%) !important;
    
    /* Дополнительные правки для центровки текста */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Эффект при наведении, чтобы кнопка ожила */
.ff-btn-submit:hover {
    opacity: 0.9 !important;
    box-shadow: 0 6px 15px 0 rgba(140, 60, 152, 0.7) !important;
    transform: translateY(-1px);
}
/* ОБЩИЕ СТИЛИ (для всех кнопок: размер, шрифт, отступы) */
.wp-block-button__link {
    border-radius: 50px !important; /* Делаем полностью круглые края */
    padding: 8px 35px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 18px !important;
}

/* СТИЛЬ 1: ЯРКАЯ (Градиентная) */
.is-primary-button .wp-block-button__link {
    background: linear-gradient(135deg, rgb(250, 152, 61) 0%, rgb(220, 85, 129) 49%, rgb(166, 57, 201) 100%) !important;
    border: 2px solid #fff !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(166, 57, 201, 0.2) !important;
}

.is-primary-button .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(166, 57, 201, 0.4) !important;
}

/* СТИЛЬ 2: КОНТУРНАЯ (Белая) */
.is-outline-button .wp-block-button__link {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: #333333 !important; /* Или белый #ffffff, если фон темный */
	box-shadow: 0 10px 20px rgba(140, 140, 140, 0.2) !important;
}

.is-contact {
	box-shadow: 0 10px 20px rgba(140, 140, 140, 0.2) !important;
}

.is-outline-button .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

/* Находим все группы карточек и готовим их к анимации */
.wp-block-group-cards-section .wp-block-group {
    /* Начальное состояние: невидимы и сдвинуты вниз */
    opacity: 0;
    transform: translateY(30px) scale(0.95); /* Сдвигаем вниз и чуть уменьшаем */
    
    /* Описываем плавный переход (анимацию) */
    transition: 
        opacity 0.7s ease-out, /* Длительность 0.7 секунды, плавное появление */
        transform 0.7s ease-out;
    
    will-change: opacity, transform; /* Оптимизация для браузера */
}

/* Конечное состояние: добавляем этот класс через JS при прокрутке */
.wp-block-group-cards-section .wp-block-group.is-visible {
    /* Конечное состояние: видимы и в нормальном положении */
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Опционально: Добавим небольшую задержку для каждой следующей карточки */
.wp-block-group-cards-section .wp-block-group:nth-child(1) { transition-delay: 0.1s; }
.wp-block-group-cards-section .wp-block-group:nth-child(2) { transition-delay: 0.2s; }
.wp-block-group-cards-section .wp-block-group:nth-child(3) { transition-delay: 0.3s; }
.wp-block-group-cards-section .wp-block-group:nth-child(4) { transition-delay: 0.4s; }

/* Фиксируем ширину каждой карточки на мобильных устройствах */
@media (max-width: 781px) {
    /* Находим колонки внутри нашего контейнера */
    .academy-teachers-container .wp-block-column {
        /* Принудительно задаем ширину, перебивая !important стандартные стили WP */
        flex-basis: 280px !important;
        width: 280px !important;
        max-width: 280px !important;
        
        /* Дополнительно: чтобы карточка была по центру экрана */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* Скругляем края для картинок в блоке Subjects */
.wp-block-bicb-carousel .bicbCarousel .swiper-slide .carouselItem img {
    border-radius: 20px !important; /* Настройте радиус под стиль других блоков */
    overflow: hidden !important;
}

/* Если у фигурных скобок или контейнера есть фон/тени, скругляем и их */
.wp-block-bicb-carousel .bicbCarousel .swiper-slide .carouselItem .image {
    border-radius: 20px !important;
    overflow: hidden !important;
}
/* Кастомизация сообщения об успехе Fluent Forms */
.fluentform .ff-message-success {
    background-color: #ffffff !important; /* Белый фон как у карточек */
    border: none !important; /* Убираем стандартную рамку */
    border-radius: 12px !important; /* Скругление 12px */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* Мягкая тень */
    padding: 20px 25px 20px 60px !important; /* Отступ слева под иконку */
    position: relative !important;
    color: #333333 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Добавление музыкальной иконки через псевдоэлемент */
.fluentform .ff-message-success::before {
    content: '\266B'; /* Символ ноты (Musical Double Quarter Note) */
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    background: linear-gradient(135deg, rgb(250, 152, 61), rgb(220, 85, 129)); /* Ваш фирменный градиент */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
#sb_instagram {
    width: 100%;
    margin: 0 auto;
    padding: 12px;
	border-radius: 12px !important;
}