/*
 Theme Name:   Hello Elementor Child
 Description:  Custom child theme for Slow Food project
 Author:       Your Name
 Template:     hello-elementor
 Version:      1.0.0
*/
* {
	box-sizing: border-box;
}

/* Это уберет скролл, не обрезая выпадающее меню */
html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

/* Принудительно вправляем меню, если оно шире экрана */
.elementor-nav-menu--dropdown {
    max-width: 100vw !important;
    left: 0 !important;
}

/* Делаем хедер липким */
#masthead {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important; /* Чтобы хедер был поверх всех элементов */
    transition: all 0.3s ease;
}

.sub-menu {
    background-color: #F7ECEA !important;
}

.elementor-element-1ebc04c {
    /*display: flex;*/
    width: 100% !important;
}

.hfe-nav-menu {
	margin-left: 0 !important;
	width: 100%;
}

/* Находим последний элемент (вашу кнопку) и толкаем его вправо */
.hfe-nav-menu li:last-child {
    margin-left: auto !important;
}

#page { /* Или другой ID вашего главного оберточного контейнера */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

#main,
#content {
    flex: 1;
    background-color: #F7ECEA;
}

/* Находим селектор вашего футера */
footer {
    margin-top: auto;
}

/* Добавляем отступ для остального контента, чтобы он не заезжал под хедер */
body {
    padding-top: 100px; /* Укажите здесь примерную высоту вашего хедера */
}

@media (max-width: 1100px){
	body {
		padding-top: 80px; /* Укажите здесь примерную высоту вашего хедера */
	}
}

.jelly-overlay-image {
    position: relative;
    display: inline-block; /* Чтобы подложка не была шире самой картинки */
    line-height: 0; /* Убирает лишний отступ снизу у картинок */
}

/* Создаем само наложение */
.jelly-overlay-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Градиент снизу вверх: 70% черного превращаются в прозрачный к середине */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, #F7ECEAaa);
    pointer-events: none; /* Чтобы картинку можно было сохранить или кликнуть */
    border-radius: inherit; /* Чтобы градиент повторял скругления углов картинки, если они есть */
}

.jelly-headline-img {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.jelly-headline-img::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Градиент снизу вверх: 70% черного превращаются в прозрачный к середине */
    background: linear-gradient(to bottom, transparent 0%, #B0768Aaa);
    pointer-events: none; /* Чтобы картинку можно было сохранить или кликнуть */
    border-radius: inherit; /* Чтобы градиент повторял скругления углов картинки, если они есть */
}

/* 1. Стили для полей ввода (Имя, Телефон, Email) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #d1d1d1;
    border-radius: 8px; /* Скругление углов */
    background-color: #ffffff;
    font-size: 14px;
    color: #1a1a1a;
}

@media (max-width: 768px){
	.wpcf7-form input[type="text"],
	.wpcf7-form input[type="tel"],
	.wpcf7-form input[type="email"],
	.wpcf7-form textarea {
			font-size: 12px;
	}
}

/* 2. Стиль при нажатии на поле (Focus) */
.wpcf7-form input:focus {
    border-color: #FFD700; /* Цвет рамки при клике (например, желтый) */
    outline: none;
}

/* 3. Стили для кнопки "Надіслати" */
.wpcf7-form input[type="submit"] {
    width: 100%; /* На всю ширину */
    background-color: #B0768A; /* Черный фон */
    color: #ffffff; /* Белый текст */
    padding: 15px;
    border: none;
    border-radius: 30px; /* Сильное скругление как на макете */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

@media (max-width: 768px){
	.wpcf7-form input[type="submit"]{
			font-size: 12px;
	}
}

/* Эффект при наведении на кнопку */
.wpcf7-form input[type="submit"]:hover {
    background-color: #A855F788;
}

a {
	text-decoration: none !important;
	/*color: #fff !important;*/
}

.custom-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    background: #0f111a; /* Глубокий темный фон секции */
    padding: 20px;
}

.blog-card {
    background: #1a1d26; /* Цвет карточки */
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
}

.blog-card:hover { transform: translateY(-5px); }

.blog-thumb img { width: 100%; height: 220px; object-fit: cover; }

.blog-content { padding: 25px; position: relative; }

.blog-badge {
    position: absolute; top: -190px; right: 20px;
    background: #a855f7; color: #fff;
    padding: 4px 12px; border-radius: 4px;
    font-size: 11px; text-transform: uppercase; font-weight: bold;
}

.blog-title a { color: #fff; text-decoration: none; font-size: 1.2rem; line-height: 1.4; }
.blog-excerpt { color: #9ca3af; margin: 15px 0; font-size: 0.9rem; }
.blog-meta { color: #6b7280; font-size: 0.8rem; margin-bottom: 20px; }
.blog-read-more {
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	background: #a855f7;
	border-radius: 30px;
}

/* Стили пагинации */
.blog-pagination { text-align: center; margin-top: 40px; }
.blog-pagination a, .blog-pagination span {
    display: inline-block; padding: 10px 15px; margin: 0 5px;
    background: #1a1d26; color: #fff; border-radius: 5px; text-decoration: none;
}
.blog-pagination .current { background: #a855f7; }

#footer-left {
  max-width: 33% !important;
}

[id^="wpcf7"] p {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: start;
  
  & span {
    width: 65%;
    margin-bottom: 0;
  }
  
  & input {
    margin-bottom: 0 !important;
  }
  
  input[type="submit"] {
    width: calc(30% - 10px);
  }
}

#wpcf7-f205-p7-o1 p,
#wpcf7-f694-p427-o1 p {
    /* Отменяем flex-сетку и возвращаем стандартный блочный вид */
    display: block;
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch;
  
    /* Сбрасываем стили для вложенных span (обертки полей) */
    & span {
      width: auto;
      margin-bottom: 1em; /* Стандартный отступ для CF7, если нужно */
    }
  
    /* Возвращаем отступы инпутам */
    & input {
      margin-bottom: inherit !important;
    }
}

.elementor-heading-title a,
.elementor-heading-title a:hover {
	color: #8A5A49 !important;
}

@media(max-width: 768px){
	.hfe-nav-menu > .menu-item:last-of-type {
		display: none !important;
	}
	
	.wpcf7-submit {
		width: fit-content !important;
	}
}

.elementor-widget-shortcode {
	padding: 0 !important;
}

.menu-item a {
	font-family: Inter !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.wpcf7-response-output {
	padding: 0 !important;
	margin-top: -20px !important;
	border: none !important;
	color: #8A5A49 !important;
}

/* @media (min-width: 768px) {
	.wpcf7-not-valid-tip {
		margin-top: -20px !important;
	}
} */

.wpcf7-not-valid-tip {
	margin-bottom: 0 !important;
}