/* Звужуємо основний контент сайту */
.site-content, .entry-content, .container, .main-container {
    max-width: 1100px !important; /* Ідеальна ширина для читання */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Щоб картинки не вилазили за краї */
img {
    max-width: 100% !important;
    height: auto !important;
}
/* Приборкуємо стандартні кнопки WordPress */
.wp-block-button__link {
    display: inline-block !important; /* Дозволяє кнопці бути за розміром тексту */
    width: auto !important;           /* Скасовує розтягування на всю ширину */
    min-width: 250px;                 /* Але робить її достатньо великою та солідною */
    padding: 15px 40px !important;    /* Робимо її "пухкою" та помітною */
    text-align: center;
    margin: 10px auto !important;     /* Додаємо відступи */
}

/* Центруємо блок з кнопкою, якщо він розлігся */
.wp-block-button {
    display: flex;
    justify-content: center;          /* Ставимо кнопку рівно по центру сторінки */
}
/* Контейнер форми Jetpack */
.contact-form {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    max-width: 500px;
}

/* Поля вводу (ім'я, пошта тощо) */
.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'],
.contact-form textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    background-color: #ffffff !important;
}

/* Фокус на полях (коли натискаєш) */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #ff9900 !important; /* Твій колір бренду */
    outline: none !important;
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.3) !important;
}

/* Кнопка відправки */
.contact-form button.pushbutton-wide,
.contact-form input[type='submit'] {
    background-color: #ff9900 !important;
    color: white !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    border: none !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    width: 100% !important;
}

.contact-form button.pushbutton-wide:hover,
.contact-form input[type='submit']:hover {
    background-color: #e68a00 !important;
    transform: translateY(-2px) !important;
}
/* Повертаємо одну стандартну стрілку та виправляємо обрізання */
.contact-form select {
    appearance: select !important; /* Повертаємо стандартний вигляд */
    -webkit-appearance: select !important;
    
    height: 45px !important; /* Фіксована висота, щоб текст вліз */
    padding: 5px 10px !important;
    line-height: normal !important;
    font-size: 16px !important;
    background-color: #ffffff !important;
    
    /* Видаляємо нашу попередню іконку, щоб не було двійників */
    background-image: none !important; 
}
/* Налаштування для мобільних, щоб картинка не була занадто вузькою */
@media (max-width: 600px) {
    .wp-block-cover {
        min-height: 350px !important; /* Робимо банер достатньо високим для фото */
    }

/* 1. Прибираємо сіру зону (кишку) */
.wp-block-cover {
    min-height: 0 !important; /* Вбиваємо порожнечу */
    height: auto !important;
    aspect-ratio: auto !important; /* Скасовуємо всі 4:3, що ми бачили на скрині */
    padding: 60px 20px !important; /* Робимо висоту за рахунок повітря навколо тексту */
}

    /* Змушуємо картинку фону заповнити весь простір без дірок */
    .wp-block-cover img, 
    .wp-block-cover-image img {
        height: 100% !important;
        object-fit: cover !important;
        min-height: 100% !important;
    }

    /* Додатково прибираємо зайву висоту, яка може створювати порожнечу */
    .wp-block-cover {
        min-height: 300px !important; 
    }
}
	/* Робимо банер на мобільних достатньо високим для фото */
@media (max-width: 600px) {
    .wp-block-cover {
        min-height: 500px !important; /* Даємо місце для обличчя */
    }