/*
Theme Name: Ганак.by
Author: dontdonkmedonks
Author URI: https://vk.com/dontdonkmedonks
Version: 1.0.0
*/

/* Отключаем принудительный темный режим для Mi Браузера и Chrome */
:root {
    color-scheme: light;
    supported-color-schemes: light;
}

/* Персональное правило для инверсии в браузерах на базе Chromium (включая Mi) */
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: light !important;
    }
}

:root{
    --orange:#e96b1d;
    --dark:#2b1d17;
    --text:#555;
    --bg:#FEF7F0;
    --white:#fff;
    --shadow:0 5px 20px rgba(0,0,0,.08);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: Arial, sans-serif;
    color:var(--dark);
    background:#fff;
    line-height:1.5;
	font-family: 'Roboto', sans-serif;
font-weight: 400;
}

img{
    max-width:100%;
    display:block;
}
h1,h2,h3,h4{font-family: 'Oswald', sans-serif;}

a {
    color: #444;
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.form-message {
    min-height: 20px;
    margin: 10px 0;
    font-size: 14px;
    text-align: center;
}

.form-message.error {
    color: #d32f2f;
}

.form-message.success {
    color: #2e7d32;
}
.post-content a,
article a {
    color: var(--orange);
    border-bottom: 1px solid rgba(239, 123, 48, 0.3);
    padding-bottom: 1px;
}

.post-content a:hover,
article a:hover {
    border-bottom-color: var(--orange);
}

footer a, 
.footer-bottom a {
    color: #777;
    border: none;
}

footer a:hover,
.footer-bottom a:hover {
    color: var(--orange);
    text-decoration: underline;
}

.container{
    width:min(1440px, 98%);
    margin:auto;
	padding:0 60px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    background:var(--orange);
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-weight:700;
    transition:.3s;
}
.btn::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  margin-left: 15px;
  font-size: 14px;
  transition: transform 0.2s ease; 
}
.btn:hover{
    opacity:.8;
}

.section-title{
    text-align:center;
    font-size:46px;
    margin-bottom:50px;
    font-family: 'Oswald', sans-serif;
font-weight: 600;
}

.section-title::after{
    content:"";
    display:block;
    width:120px;
    height:6px;
    margin:15px auto 0;
    background: radial-gradient(ellipse at center, var(--orange) 0%, transparent 80%);
}

/* HEADER */

.header{
    background:#fff;
}

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:120px;
}

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    height:80px;
    width:auto;
    display:block;
}


.nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav ul li a {
    text-decoration: none;
    color: #444;
    font-weight: 500;
    display: inline-block;
}

.nav ul li a:hover,
.nav ul li.current-menu-item a {
    text-decoration: underline;
    text-underline-offset: 8px; 
    text-decoration-thickness: 3px;
    color: var(--orange);
}

/* Базовое состояние для десктопа: скрываем кнопку */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #333; /* Поменяйте на цвет вашего бренда, если нужно */
    cursor: pointer;
    z-index: 1000;
}
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        position: relative;
        z-index: 10001 !important; /* Кнопка всегда сверху */
    }

    /* Модернизированный блок навигации */
    .nav {
        display: block !important; /* Принудительно показываем, если десктоп его скрывал */
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Исходное положение */
        width: 280px !important;
        height: 100vh !important;
        background-color: #ffffff !important; /* Белый фон меню */
        box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important;
        padding: 80px 20px 20px 20px !important;
        transition: right 0.4s ease-in-out !important;
        z-index: 10000 !important; /* Самый высокий приоритет на странице */
    }

    /* Класс открытия */
    .nav.is-open {
        right: 0 !important; /* Меню выезжает */
    }

    /* Стилизация списка меню */
    .menu-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .menu-header li {
        width: 100% !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid #f0f0f0; /* Легкое разделение пунктов */
        padding-bottom: 10px;
    }

    .menu-header li a {
        font-size: 18px !important;
        font-family: 'Oswald', sans-serif !important; /* Используем ваш шрифт */
        color: #333333 !important;
        text-transform: uppercase;
        display: block !important;
        width: 100%;
    }
}

.phone{
    text-align:right;
	font-family: 'Oswald', sans-serif;
}

.phone strong{
    display:block;
    font-size:24px;
}

.phone{
    display:flex;
    align-items:center;
    gap:15px;
}

.phone-icon{
    width:50px;
    height:50px;
    background:#e96b1d;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:23px;
    flex-shrink:0;
}

.phone-info {
    display: flex;
    flex-direction: column;
}

.phone-info a {
    color: #444;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease; 
    display: inline-block; 
}

.phone-info span {
    font-size: 16px;
    color: #777;
    padding-top: 6px;
    font-weight: 600;
    transition: opacity 0.3s ease; 
}

.phone-info a:hover {
    color: var(--orange);
    transform: translateY(-2px);
}

.phone-info:hover span {
    opacity: 0.7;
}

/* HERO */

.hero{
    background:url("images/roof-clean.png") center/cover;
    padding:100px 60px 90px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:50px;
    align-items:center;
}

.hero h1{
    font-size:68px;
    line-height:1.2;
    margin-bottom:25px;
font-family: 'Oswald', sans-serif;
font-weight: 600;
  position: relative;
  display: inline-block; 
  padding-bottom: 15px;
}

.hero h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 110px;
  height: 5px;
background: linear-gradient(to right, var(--orange) 0%, var(--orange) 30%, transparent 100%);}
.hero-subtitle{
    font-size:26px;
    margin-bottom:25px;
    color:#555;
	font-weight:600;
}

.hero-list{
  list-style: none;
  padding: 0;
  margin: 40px 0 60px;
}

.hero-list li{
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}

.hero-list li::before{
 content: "\f058";
 font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--orange);
  font-size: 20px;
  background-color: #fff;
  border-radius: 50%;
  line-height: 1;
}

.hero-actions{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}
/* Адаптивные стили для первого экрана (Hero) */
@media screen and (max-width: 768px) {
    
    /* 1. Исправляем отступы секции и добавляем темную подложку для читаемости */
    .hero {
        /* Уменьшаем боковые отступы до 20px, чтобы текст не прилипал к краям */
        padding: 60px 20px 60px !important; 
        
        /* Накладываем полупрозрачный белый или темный слой поверх картинки, чтобы текст читался */
        background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), 
                    url("images/roof-clean.png") center/cover !important;
    }

    /* 2. Переводим сетку в один столбец */
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* 3. Уменьшаем гигантский шрифт заголовка */
    .hero h1 {
        font-size: 32px !important; /* Текст станет аккуратным на мобильном */
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    /* 4. Корректируем подзаголовок и списки */
    .hero-subtitle {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    .hero-list {
        margin: 25px 0 35px !important;
    }

    .hero-list li {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* 5. Выравниваем кнопки действия */
    .hero-actions {
        flex-direction: column !important; /* Кнопки встанут одна под другой */
        gap: 15px !important;
        width: 100%;
    }

    .hero-actions .btn, 
    .hero-actions .phone-btn,
    .hero-actions .phone-block {
        width: 100% !important; /* Кнопки растянутся на всю ширину экрана */
        text-align: center !important;
        justify-content: center !important;
    }
}


/* SERVICES */ 
.services { 
  padding: 60px 0; 
  background: var(--bg); 
} 

.cards { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 25px; 
} 

.card { 
  position: relative; 
  background: #ffffff; 
  border-radius: 12px; 
  overflow: visible; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
  /* Плавное изменение свойств при наведении */
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
} 

/* Современный интерактивный эффект при наведении на карточку */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.card img { 
  width: 100%; 
  height: auto; 
  display: block; 
  border-top-left-radius: 12px; 
  border-top-right-radius: 12px; 
} 

.card-content { 
  padding: 25px; 
} 

.card h3 { 
  font-size: 28px; 
  margin-bottom: 15px; 
  font-family: 'Oswald', sans-serif; 
} 

.card h3 a {
  text-decoration: none;
  color: inherit;
  border-bottom:none;
}
.card h3 a:hover {
  text-decoration: none;
  border-bottom:none;
}
.card h3 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.card p { 
  color: var(--text); 
} 

.card-icon { 
  position: absolute; 
  top: -10px; 
  left: 6px; 
  z-index: 10; /* Иконка остается поверх кликабельной зоны */
  width: 100px; 
  height: 100px; 
  background-color: var(--orange); 
  border: 3px solid #fff; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  opacity: 0.9; 
} 

.card-icon i { 
  color: #fff; 
  font-size: 48px; 
}


/* ADVANTAGES */

.advantages {
    padding: 40px 0 90px;
	background:var(--bg);
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.adv {
    text-align: center;
    position: relative;
    padding: 0 10px;
}

.adv:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: #e0e0e0;
}


.adv-icon {
    font-size: 64px; 
    color: var(--orange);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}


.adv h4 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
    margin: 0 0 12px 0;
    min-height: 40px;
}


.adv p {
    font-size: 13px;
    line-height: 1.4;
    color: #555555;
    margin: 0;
}

.adv-line {
    width: 40px;
    height: 2px;
    background-color: #777;
    margin: 0 auto 12px;
}


@media (max-width: 992px) {
    .advantages-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }
    .adv:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

.workflow {
    padding: 20px 0 0;
	background-color:#FEFDFB;
}


.workflow-line {
    width: 35px;
    height: 3px;
    background-color: var(--orange, #ff5722);
    margin: 10px 0 20px 0;
}

.work-side .section-title {
    text-align: left;
    margin-bottom: 35px;
    position: relative;
    display: inline-block; 
}

.work-side .section-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 6px;
    background: radial-gradient(ellipse at center, var(--orange) 0%, transparent 80%);
    margin-top: 5px;
    margin-left: 10px;
}


/* Флекс-контейнер для шагов */
.steps {
    display: flex;
    align-items: flex-start; /* Строго по верхней линии шапок */
    justify-content: space-between;
}

/* Карточка шага */
.step {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* Шапка шага: создаем жесткий каркас одинаковой высоты */
.step-header {
    position: relative;
    height: 75px; /* Фиксированная высота для всех шапок */
    margin-bottom: 15px;
    display: flex;
    align-items: flex-end; /* Все иконки и цифры прижимаются строго к одной нижней линии */
}

/* Огромная фоновая цифра */
.step-number {
    position: absolute;
    left: 0;
    bottom: -15px; /* Жесткая привязка к нижней точке шапки */
    color: rgba(255, 87, 34, 0.1);
    font-size: 96px;
    font-weight: 800;
    line-height: 0.8; /* Убираем невидимые отступы шрифта */
    z-index: 1;
    margin: 0;
    padding: 0;
}

/* Круглая иконка */
.step-icon {
    position: relative;
    z-index: 2;
    width: 50px;
    height: 50px;
    border: 2px solid var(--orange, #ff5722);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange, #ff5722);
    font-size: 22px;
    background-color: #fff;
    
    /* Сдвигаем иконку вправо относительно цифры */
    margin-left: 30px; 
    margin-bottom: -15px; /* Приподнимаем над нижней линией, как на макете */
}

/* Стрелочки между шагами */
.step-arrow {
    color: #cccccc;
    font-size: 14px;
    padding: 0 5px;
    
    /* Центрируем стрелочку строго по центру круглых иконок */
    align-self: flex-start;
    margin-top: 40px; 
}

/* Текстовые блоки */
.step h4 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
    margin: 0 0 8px 0;
    min-height: 34px; /* Резервируем место под 2 строки, чтобы тексты не двигали блоки */
}

.step p {
    font-size: 11px;
    line-height: 1.4;
    color: #777777;
    margin: 0;
}

.work-side .section-title {text-align: left;}

@media screen and (max-width: 768px) {

    .work-side {
        display: none;
    }
	}
.map-side .section-title {
    text-align: left;
    text-decoration: none !important;
	font-size:24px;
}
.map-side .section-title::after {
    display: none; 
}
.workflow-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 30px;
    align-items: flex-start;
}

/* Контейнер для картинки карты */
.map-image-wrapper {
    margin-top: -60px;
    position: relative;
    z-index: 5;
    margin-bottom: -75px;
	margin-left: -80px;
}

.map-img {
    width: 110%;
    max-width: none;
    height: auto;
    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.12));
}


/* СЕКЦИЯ CTA (БАННЕР) */
.cta {
    padding: 0 0 20px;
	background-color:#FEFDFB;
}

.cta-box {
    border: 4px solid #ffffff; 
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    border-radius: 24px;
    padding: 40px 60px 40px 60px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.06);
}


.cta-content h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    color: #222222;
    margin: 0 0 15px 0;
}

.cta-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* Контейнер для кнопок справа */
.cta-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 280px; /* Фиксированная ширина кнопочной панели */
    justify-self: end; /* Прижимает блок к правому краю */
}

.btn-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--orange, #ff5722);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding: 15px 25px;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.btn-submit::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 12px;
}
.btn-submit:hover{
    opacity:.8;
}
.phone-block {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px;
    color: #222222;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: border-color 0.2s;
}

.phone-block:hover {
    border-color: var(--orange, #ff5722);
}

.phone-block::before {
    content: "\f095";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    width: 28px;
    height: 28px;
    border: 1px solid var(--orange, #ff5722);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange, #ff5722);
    font-size: 12px;
    margin-right: 15px;
    transform: rotate(15deg);
}

/* АДАПТИВНОСТЬ */
@media (max-width: 1200px) {
    .workflow-grid {
        grid-template-columns: 1fr; /* Перестраиваем в одну колонку на маленьких экранах */
    }
    .map-side .section-title, .map-image-wrapper {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .steps {
        flex-direction: column; /* Шаги идут сверху вниз на телефонах */
        align-items: flex-start;
        gap: 25px;
    }
    .step-arrow {
        display: none; /* Прячем горизонтальные стрелочки на мобильных */
    }
    .cta-box {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    .cta-actions {
        width: 100%;
    }
}


.search-results, article {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #444;
    line-height: 1.7;
}

.card {
    padding: 0;
}
article h1 {
    font-size: 36px;
    font-weight: 700;
    color: #222;
    margin-bottom: 30px;
    position: relative;
}


article h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--orange);
    margin-top: 12px;
    border-radius: 2px;
}


.post-content p {
    margin-bottom: 20px;
    font-size: 16px;
}

.post-content strong {
    color: #222;
}


.post-content ol, 
.post-content ul {
    margin: 20px 0 25px 0;
    padding-left: 20px;
}

.post-content li {
    font-size: 16px;
    margin-bottom: 10px;
    list-style-position: outside;
}

.post-content ol > li > strong {
    font-size: 20px;
    display: inline-block;
    margin-top: 15px;
    color: #222;
}

/* Ссылки внутри текста */
.post-content a {
    color: var(--orange);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.post-content a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* 3. Хлебные крошки (Breadcrumbs) */
.breadcrumbs {
    max-width: 1400px;
    margin: 30px auto 10px auto;
    padding: 0 20px;
    font-size: 14px;
    color: #777;
}

.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.breadcrumb-list li {
    display: inline;
    margin: 0;
}

.breadcrumb-list a {
    color: #777;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-list a:hover {
    color: var(--orange);
}

/* Последний (активный) элемент крошек */
.breadcrumb-list li:last-child span {
    color: #444;
    font-weight: 500;
}

/* 4. Кнопка редактирования для админа */
.edit-link {
    max-width: 900px;
    margin: 20px auto 50px auto;
    padding: 0 20px;
}

.post-edit-link {
    display: inline-block;
    background-color: #f5f5f5;
    color: #666;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.post-edit-link:hover {
    background-color: #e5e5e5;
    color: #222;
}

/* Общий контейнер для архива */
.archive-posts {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    /* Автоматическая сетка: карточки переносятся сами, если не влезают */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

/* Заголовок категории на странице архива */
h1.archive-title, 
body.archive h1{
    max-width: 1200px;
    margin: 0 auto 10px auto;
    padding: 0 20px;
    font-size: 36px;
    font-weight: 700;
    color: #222;
}
body.archive p {
    max-width: 1200px;
	margin: 0 auto 10px auto;
}
/* Оранжевая полоса под заголовком архива */
h1.archive-title::after,
body.archive h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--orange);
    margin-top: 12px;
    border-radius: 2px;
}

/* Карточка отдельной услуги в архиве */
.archive-posts article.type-post {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin: 0;
}

.archive-posts article.type-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Заголовок внутри карточки */
.archive-posts article.type-post h2 {
    font-size: 22px;
    margin: 0 0 15px 0;
    font-weight: 700;
}

/* Ссылка в заголовке */
.archive-posts article.type-post h2 a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease;
	border-bottom: none;
}

.archive-posts article.type-post h2 a:hover {
    color: var(--orange);
	border-bottom: none;
}

/* Краткое описание услуги (отрывок текста) */
.archive-posts .post-excerpt {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Растягивает блок, чтобы кнопка всегда была внизу */
}

/* Ссылка "Подробнее" (если планируете выводить ее в цикле) */
.archive-posts article.type-post .more-link,
.archive-posts article.type-post::after {
    /* Если хотите добавить ссылку-стрелочку, стили применятся к ней */
    color: var(--orange);
    font-weight: 600;
    text-decoration: none;
}
//* Контейнер для всех карточек */
.archive-posts {
    display: flex;
    flex-wrap: wrap; /* Разрешает перенос карт на новую строку, если они не влезают */
    gap: 30px;       /* Расстояние между карточками */
    justify-content: flex-start; /* Выравнивание по левому краю */
    margin-bottom: 40px;
}

/* Стили для одной карточки (как на вашем скриншоте) */
.archive-posts .post-card {
    flex: 1 1 calc(33.333% - 20px); /* 3 карточки в ряд с учетом gap */
    min-width: 280px;  /* Минимальная ширина, чтобы на мобильных они не сжимались */
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Легкая тень */
    display: flex;
    flex-direction: column; /* Элементы внутри карточки идут сверху вниз */
    overflow: hidden;
}

/* Стили для адаптивности (планшеты: 2 карточки в ряд) */
@media (max-width: 992px) {
    .archive-posts .post-card {
        flex: 1 1 calc(50% - 15px);
    }
}

/* Стили для мобильных (1 карточка в ряд) */
@media (max-width: 768px) {
    .archive-posts .post-card {
        flex: 1 1 100%;
    }
}

/* Оформление картинки внутри карточки */
.post-thumbnail img {
    width: 100%;
    height: 220px;     /* Фиксированная высота для симметрии */
    object-fit: cover; /* Картинка заполняет блок без искажения пропорций */
    display: block;
}

/* Внутренние отступы для текста */
.post-content {
    padding: 25px;
}

article.type-post {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
    line-height: 1.75;
}

/* Главный заголовок статьи */
article.type-post h1 {
    font-size: 38px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Внутренний текстовый контент */
article.type-post .post-content {
    font-size: 17px;
    margin-top: 30px;
}

/* Оформление изображений внутри текста статьи */
article.type-post .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 25px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.post-meta {
    max-width: 1400px;
    margin: 0 auto 30px auto;
    padding: 0 20px;
}

.post-meta p {
    font-size: 14px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}


.post-meta p::before {
    font-size: 13px;
}

.post-navigation {
    max-width: 1400px;
    margin: 40px auto;
    padding: 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.post-navigation a {
    color: #222;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.post-navigation a:hover {
    color: var(--orange);
}

/* 4. Секция комментариев */
.comments-section {
    max-width: 1400px;
    margin: 50px auto;
    padding: 0 20px;
}

.comments-area {
    background: #fdfdfd;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 30px;
}
/* ==========================================================================
   Стили для страницы "Карта сайта" (Sitemap)
   ========================================================================== */

/* Основной контейнер карты сайта */
.sitemap {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #444;
    line-height: 1.7;
}

/* Главный заголовок страницы */
.sitemap h1 {
    font-size: 36px;
    font-weight: 700;
    color: #222;
    margin-bottom: 35px;
    position: relative;
}

/* Оранжевая декоративная линия под главным заголовком */
.sitemap h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--orange);
    margin-top: 12px;
    border-radius: 2px;
}

/* Подзаголовки разделов (Записи, Страницы) */
.sitemap h2 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin: 30px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee; /* Тонкая разделительная линия */
}

/* Списки ссылок */
.sitemap ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Расстояние между строками */
}

/* Стилизация элементов списка */
.sitemap ul li {
    position: relative;
    padding-left: 20px; /* Место для кастомного маркера */
    font-size: 16px;
}

/* Красивый оранжевый маркер в виде стрелочки перед каждой ссылкой */
.sitemap ul li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-55%);
    color: var(--orange);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* Ссылки карты сайта */
.sitemap a {
    color: #444;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Наведение на ссылку */
.sitemap a:hover {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Нижний блок с XML картой */
.sitemap-xml-link {
    margin-top: 40px;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-left: 4px solid var(--orange); /* Оранжевый акцент слева */
    border-radius: 0 8px 8px 0;
}

.sitemap-xml-link p {
    margin: 0;
    font-size: 15px;
}

.sitemap-xml-link a {
    color: #222;
    font-weight: 500;
}

.sitemap-xml-link a:hover {
    color: var(--orange);
}

/* FOOTER */

ul.menu-footer {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px; 
}


ul.menu-footer li.menu-item {
    position: relative;
    padding-left: 18px;
}

ul.menu-footer li.menu-item::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-55%);
    color: var(--orange); 
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

ul.menu-footer li.menu-item a {
    color: #444; 
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}


ul.menu-footer li.menu-item a:hover {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer {
    background-color:#FEFDFB;
    padding: 60px 0 20px 0;
}

.footer-grid {
    display: grid;
   
    grid-template-columns: 1.2fr 1.3fr 1fr;
    gap: 0; 
    align-items: flex-start;
}

.footer-col {
    padding: 0 40px;
    box-sizing: border-box;
}


.footer-col.logo-col {
    padding-left: 0;
}


.footer-col:not(:last-child) {
    border-right: 2px solid #dbdbdb; 
}

.footer-bottom {
    margin-top: 50px;
    border-top: 2px solid #dbdbdb;
    padding-top: 20px;
}

.footer-logo-img {
    width: 100%;
    max-width: 380px;
    height: auto;
    display: block;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.3fr 1fr;
    gap: 0;
    align-items: flex-start; 
}

.requisites-col h4 {
    margin-top: 0; 
    margin-bottom: 25px;
}


.footer h4 {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 25px 0;
}

.footer-contacts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contacts-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333333;
}

.footer-contacts-list a {
    color: #333333;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-contacts-list a:hover {
    color: var(--orange, #ff5722);
}

/* Круглые иконки в контактах */
.contact-icon {
    width: 28px;
    height: 28px;
    border: 1px solid var(--orange, #ff5722); /* Оранжевая обводка кружка */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--orange, #ff5722); /* Оранжевый цвет самой иконки */
    font-size: 12px;
    flex-shrink: 0; /* Чтобы кружок не сжимался при длинном тексте */
}

/* Наклон телефонной трубки для динамики */
.contact-icon .fa-phone-alt {
    transform: rotate(15deg);
}

/* Реквизиты */
.requisites-col p {
    font-size: 14px;
    color: #333333;
    margin: 0;
}


.copyright {
    text-align: center;
    font-size: 13px;
    color: #888888;
}
/* Блокировка прокрутки сайта при открытом модальном окне */
body.modal-open {
    overflow: hidden;
}

/* Оверлей (затемнение фона) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный */
    backdrop-filter: blur(4px); /* Легкое размытие заднего плана */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Изначально скрыто */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Состояние, когда модальное окно активно */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Модальное окно */
.modal-window {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    box-sizing: border-box;
    
    /* Эффект вылета окна */
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-window {
    transform: translateY(0);
}

/* Кнопка закрытия (крестик) */
.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--orange, #ff5722);
}

/* Заголовки текста */
.modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 10px 0;
    text-align: center;
}

.modal-subtitle {
    font-size: 13px;
    color: #666666;
    line-height: 1.4;
    text-align: center;
    margin: 0 0 25px 0;
}

/* Элементы формы */
.form-group {
    margin-bottom: 15px;
}

.modal-form input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    font-size: 14px;
    color: #111;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.modal-form input:focus {
    outline: none;
    border-color: var(--orange, #ff5722);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

/* Главная кнопка отправки */
.modal-submit-btn {
    width: 100%;
    padding: 15px;
    background-color: var(--orange, #ff5722);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 10px;
}

.modal-submit-btn:hover {
    background-color: #e64a19; /* Чуть темнее при наведении */
}

.modal-submit-btn:active {
    transform: scale(0.98);
}

body.modal-open {
    overflow: hidden !important;
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Перестраиваем в один столбец на планшетах и мобильных */
        gap: 35px;
        text-align: center;
    }
    .footer-col {
        padding: 0;
    }
    .footer-col:not(:last-child) {
        border-right: none; /* Убираем вертикальные линии на мобильных */
        border-bottom: 1px solid #e5e5e5; /* Заменяем их на аккуратные нижние границы */
        padding-bottom: 25px;
    }
    .footer-logo-img {
        margin: 0 auto; /* Центрируем логотип */
    }
    .footer-contacts-list li {
        justify-content: center; /* Центрируем элементы контактов */
    }
}

/* TABLET */

@media (max-width: 992px){

.hero-grid,
.map-grid,
.cta-box{
    grid-template-columns:1fr;
}

.hero h1{
    font-size:48px;
}

.cards{
    grid-template-columns:repeat(2,1fr);
}

.advantages-grid{
    grid-template-columns:repeat(3,1fr);
}

.steps{
    grid-template-columns:repeat(2,1fr);
}

.nav{
    display:none;
}
}

/* MOBILE */

@media (max-width:768px){

.section-title{
    font-size:32px;
}

.hero{
    padding:60px 0;
}

.hero h1{
    font-size:36px;
}

.hero-subtitle{
    font-size:20px;
}

.cards{
    grid-template-columns:1fr;
}

.advantages-grid{
    grid-template-columns:repeat(2,1fr);
}

.steps{
    grid-template-columns:1fr;
}

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.phone{
    display:none;
}
}

@media (max-width:480px){

.hero h1{
    font-size:30px;
}

.advantages-grid{
    grid-template-columns:1fr;
}

.btn,
.phone-btn{
    width:100%;
}
}