/*
Theme Name: Impel Moving Theme (Automated)
Theme URI: https://siriocreation.com/
Author: Sirio Creation (Converted by AI)
Author URI: https://siriocreation.com/
Description: A fully automated WordPress theme for Impel Moving. On activation, it automatically creates and sets up the static front page and the main navigation menu. It is fully responsive, customizable, and ready for Advanced Custom Fields (ACF).
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-logo, custom-menu, featured-images, theme-options, front-page-template, full-width-template, accessibility-ready
Text Domain: impel-moving
*/
/* --- Hero Slider Styles --- */

/* ==========================================================================
   Services Section Styles
   ========================================================================== */

/* General Section Styles (you might already have these) */
.section {
    padding: 80px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Section Header */
.services-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.services-section .section-header .subheading {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #7949FF; /* Accent color from image */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.services-section .section-header h2 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.services-section .section-header p {
    font-size: 18px;
    color: #666;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Services Grid Layout */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Service Card Styling */
.service-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px 20px 20px;
    text-align: center;
    border: 1px solid #e8e8e8;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.service-card-icon {
    max-width: 80px; /* Adjust size as needed */
    height: auto;
    margin: 0 auto 25px auto;
    display: block;
}

.service-card-content h3 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    color: #222;
}

.service-card-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
    /* Optional: to make all cards the same height */
    min-height: 75px; 
}

.service-card-link {
    color: #7949FF; /* Accent color */
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: color 0.3s ease;
}

.service-card-link::after {
    content: '→';
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.service-card-link:hover {
    color: #5b2cde; /* Darker shade on hover */
}

.service-card-link:hover::after {
    transform: translateX(5px);
}


/* --- Responsive Styles --- */

/* For Tablets */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-section .section-header h2 {
        font-size: 34px;
    }
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .services-section .section-header {
        margin-bottom: 40px;
    }
    .services-section .section-header h2 {
        font-size: 30px;
    }
    .services-section .section-header p {
        font-size: 16px;
    }
    .service-card-content p {
        min-height: auto; /* Disable min-height on mobile */
    }
}

.poly-image-wrapper {
    /* --- Настройте размер и положение контейнера под ваш дизайн --- */
    max-width: 150px; /* Пример ширины */
    margin: 0 auto; /* Центрирование для демонстрации */
    position: relative;
    /* aspect-ratio помогает сохранить пропорции шестиугольника при изменении ширины */
    aspect-ratio: 4 / 3.46; /* Соотношение сторон для правильного шестиугольника */
}

.hexagon-image {
    /* --- Основная магия здесь --- */

    /* 1. Определяем форму шестиугольника (с плоским верхом и низом) */
    /* Координаты: (x y) для каждой из 6 вершин */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    
    /* 2. Создаем "бордюр" с помощью drop-shadow */
    /* Синтаксис: filter: drop-shadow(смещение-x смещение-y размытие цвет); */
    /* Мы создаем 4 тени без размытия, смещенные в разные стороны, чтобы имитировать рамку */
    filter: drop-shadow(10px 0 0 white)        /* Тень справа */
            drop-shadow(-10px 0 0 white)       /* Тень слева */
            drop-shadow(0 10px 0 white)        /* Тень снизу */
            drop-shadow(0 -10px 0 white);      /* Тень сверху */
            /* Измените "10px" для толщины рамки и "white" для цвета */

    /* --- Вспомогательные стили для изображения --- */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Гарантирует, что изображение заполнит фигуру без искажений */
}

article .post-thumbnail{
    display: none;
}

.wp-block-separator{
    margin: 5rem 0; 
}

article h1, article h2, article h3, article h4{
    font-weight: 500;
    color:#1a1a1a
}

article ul li{
    list-style: none;
}

.wp-block-columns{
    margin: 1.5rem 0
}

/* ==========================================================================
   Стили для новой формы "Get a Quote"
   ========================================================================== */

/* Общий контейнер формы */
.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Секции-карточки */
.form-section {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 30px;
    border-radius: 12px;
}

.form-section h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 15px;
}

/* Сетки для полей */
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-grid-2-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* Общие стили для полей */
.form-field { margin-bottom: 15px; }
.form-field label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 8px;
}
.form-field .required { color: #e53e3e; }

/* Стили для текстовых полей, select, date */
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox) {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 16px;
    background-color: #f7fafc;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(0, 82, 255, 0.2);
}

textarea.wpcf7-form-control { min-height: 120px; }

/* Стили для radio и checkbox */
.wpcf7-list-item { margin: 0 15px 10px 0 !important; display: inline-flex; align-items: center; }
.wpcf7-list-item-label { font-weight: 400; }
input[type="radio"], input[type="checkbox"] { margin-right: 8px; }

/* Примечания */
.field-note { font-size: 13px; color: #718096; margin: -15px 0 15px 0; }
.field-note-small { font-size: 12px; color: #718096; margin-top: -5px; }

/* Кнопка отправки */
.form-submit-area { text-align: center; }
.wpcf7-submit {
    background-color: var(--accent-orange);
    color: var(--white);
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.wpcf7-submit:hover {
    background-color: #e66e00;
    transform: translateY(-2px);
}

/* Адаптивность */
@media (max-width: 768px) {
    .form-grid-3, .form-grid-2, .form-grid-2-alt {
        grid-template-columns: 1fr;
    }
    .form-section { padding: 20px; }
}