/*
Theme Name: Ivanna Nétchaï
Author: Vadim
Description: Custom Dark Luxury theme for Ivanna.
Version: 1.0
Text Domain: ivanna-theme
*/
:root {
            --bg-dark: #0A0A0B;
            --bg-surface: #121214;
            --bg-card: #18181C;
            --text-light: #F4F4F6;
            --text-muted: #9E9EA8;
            --accent-gold: #D4AF37;
            --accent-gold-hover: #F0C952;
            --border-gold: rgba(212, 175, 55, 0.22);
            --font-editorial: 'Bodoni Moda', Georgia, serif;
            --font-sans: 'Montserrat', sans-serif;
        }

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

        body { 
            background-color: var(--bg-dark); 
            color: var(--text-light); 
            font-family: var(--font-sans); 
            line-height: 1.7; 
            overflow-x: hidden; 
            scroll-behavior: smooth; 
        }

        section, footer {
            scroll-margin-top: 85px;
        }

        /* Навигация */
        header.navbar { 
            position: fixed; 
            top: 0; 
            width: 100%; 
            padding: 22px 6%; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            z-index: 1000; 
            
            /* Разделяем градиент и цвет, чтобы браузер не путался */
            background-color: transparent;
            background-image: linear-gradient(to bottom, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0) 100%);
            
            /* Анимируем только нужные параметры, убираем transition: all */
            transition: background-color 0.4s ease, padding 0.4s ease;
            
            /* Включаем аппаратное ускорение (убирает белые мерцания на iOS/Android) */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            will-change: background-color, padding;
        }
        
        header.navbar.scrolled { 
            padding: 16px 6%; 
            background-color: rgba(10, 10, 11, 0.97); 
            background-image: none; /* Отключаем градиент при скролле */
            
            /* Кроссбраузерный блюр */
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px); 
            border-bottom: 1px solid var(--border-gold); 
        }

        .logo { 
            font-family: var(--font-editorial); 
            font-size: 24px; 
            letter-spacing: 2.5px; 
            color: var(--text-light); 
            text-decoration: none; 
            text-transform: uppercase; 
            transition: color 0.3s;
        }
        .logo:hover { color: var(--accent-gold); }

        .nav-links { display: flex; gap: 32px; list-style: none; }
        .nav-links li a { 
            color: var(--text-light); 
            text-decoration: none; 
            font-size: 11px; 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            font-weight: 500;
            transition: color 0.3s; 
        }
        .nav-links li a:hover { color: var(--accent-gold); }

        .lang-switch { font-size: 12px; letter-spacing: 2px; font-weight: 500; }
        .lang-btn {
            background: none; border: none;
            color: var(--text-muted);
            cursor: pointer;
            margin: 0 4px;
            font-size: 12px;
            letter-spacing: 1.5px;
            transition: color 0.3s;
        }
        .lang-btn.active, .lang-btn:hover { 
            color: var(--accent-gold); 
            font-weight: 600; 
        }

        /* Кнопки */
        .btn { 
            display: inline-block; 
            padding: 14px 34px; 
            border: 1px solid var(--accent-gold); 
            color: var(--accent-gold); 
            text-decoration: none; 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            font-size: 11px; 
            font-weight: 600; 
            transition: all 0.3s ease; 
            cursor: pointer;
            background: transparent;
        }
        .btn:hover { 
            background: var(--accent-gold); 
            color: #000; 
        }

        .btn-white {
            border-color: rgba(255,255,255,0.4);
            color: #fff;
        }
        .btn-white:hover {
            border-color: #fff;
            background: #fff;
            color: #000;
        }

        /* Заголовки */
        .section-tag {
            font-size: 11px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--accent-gold);
            margin-bottom: 12px;
            font-weight: 600;
            display: block;
        }

        .section-heading { 
            font-family: var(--font-editorial); 
            font-size: 2.8rem; 
            color: var(--text-light); 
            margin-bottom: 24px; 
            font-weight: 400; 
            line-height: 1.2;
        }

        /* ГЛАВНЫЙ ЭКРАН (HERO) */
        .hero { 
            min-height: 100vh; 
            position: relative;
            display: flex; 
            align-items: center; 
            padding: 120px 6% 60px;
            background: #0A0A0B;
            overflow: hidden;
        }

        .hero-bg-wrapper {
            position: absolute;
            top: 0; right: 0;
            width: 65%; /* Делаем портрет чуть крупнее */
            height: 100%;
            z-index: 1;
        }

        .hero-bg-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right top;
            /* Существенно поднимаем яркость и сочность лица/глаз */
            filter: brightness(1.32) contrast(1.08) saturate(1.05);
        }

        .hero-gradient-overlay {
            position: absolute;
            inset: 0;
            /* Сдвигаем черную тень левее, чтобы свет полностью падал на лицо и шляпу */
            background: linear-gradient(to right, #0A0A0B 10%, rgba(10,10,11,0.65) 24%, rgba(10,10,11,0) 46%),
                        linear-gradient(to top, #0A0A0B 0%, transparent 12%);
            z-index: 2;
        }
        .hero-content {
            position: relative;
            z-index: 3;
            max-width: 680px;
        }

        .hero-content h1 { 
            font-family: var(--font-editorial); 
            font-size: 4.8rem; 
            font-weight: 400; 
            letter-spacing: 1px;
            line-height: 1.05;
            margin-bottom: 20px; 
            color: #fff;
        }

        .hero-lead { 
            font-size: 15px; 
            font-weight: 300; 
            color: #d1d1d8; 
            line-height: 1.85; 
            margin-bottom: 35px; 
        }

        /* СЕКЦИЯ ПРОГРАММ */
        .programs-section {
            padding: 100px 6%;
            background: var(--bg-surface);
            border-top: 1px solid var(--border-gold);
        }

        .programs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 40px;
        }

        .program-card {
            background: var(--bg-card);
            border: 1px solid var(--border-gold);
            border-radius: 2px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        .program-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-gold);
        }

      .program-card-img {
    width: 100%;
    /* Задаем вертикальную благородную высоту для десктопа */
    height: 680px; 
    object-fit: cover;
    /* Фиксируем привязку строго по верхнему краю */
    object-position: center top; 
    display: block;
}

        .program-card-body {
            padding: 35px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
        }

        .program-card-body h3 {
            font-family: var(--font-editorial);
            font-size: 1.8rem;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

        .program-card-body p {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.8;
            font-weight: 300;
        }

        /* СЕКЦИЯ КОМАНДЫ (NOYAU ARTISTIQUE) */
        .ensemble-section {
            padding: 110px 6%;
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 60px;
            align-items: center;
            border-top: 1px solid var(--border-gold);
        }

        .artists-roster {
            list-style: none;
            margin-top: 25px;
        }

        .artist-entry {
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .artist-entry:last-child { border-bottom: none; }

        .artist-name {
            font-family: var(--font-editorial);
            font-size: 1.35rem;
            color: #fff;
            margin-bottom: 4px;
        }

        .artist-role {
            font-size: 13px;
            color: var(--accent-gold);
            letter-spacing: 0.5px;
            font-weight: 400;
        }

        .ensemble-frame {
            position: relative;
            border: 1px solid var(--border-gold);
            padding: 12px;
            background: #111;
        }

        .ensemble-frame img {
            width: 100%;
            height: 520px;
            object-fit: cover;
            display: block;
        }

        /* СЕКЦИЯ БРОНИРОВАНИЯ (BOOKING FORM) */
        .booking-section {
            padding: 100px 6%;
            background: var(--bg-surface);
            border-top: 1px solid var(--border-gold);
        }

        .booking-wrapper {
            max-width: 880px;
            margin: 0 auto;
            background: var(--bg-card);
            border: 1px solid var(--border-gold);
            padding: 50px 60px;
            border-radius: 4px;
            box-shadow: 0 25px 60px rgba(0,0,0,0.6);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 25px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 25px;
        }

        .form-group label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--accent-gold);
        }

        .form-input {
            background: #101012;
            border: 1px solid rgba(255,255,255,0.12);
            color: #fff;
            padding: 14px 16px;
            font-family: var(--font-sans);
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        .form-input:focus { border-color: var(--accent-gold); }

        /* Чекбоксы */
        .checkbox-group {
            margin-bottom: 30px;
        }

        .checkbox-legend {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--accent-gold);
            margin-bottom: 14px;
            display: block;
        }

        .checkbox-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: #d1d1d8;
            cursor: pointer;
        }

        .checkbox-item input[type="checkbox"] {
            accent-color: var(--accent-gold);
            width: 16px; height: 16px;
            cursor: pointer;
        }

        /* Мессенджеры */
        .direct-chat-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 25px;
            margin-top: 35px;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }

        .chat-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s;
        }
        .chat-btn:hover { color: var(--accent-gold); }

        /* Подвал */
        footer.site-footer {
            background-color: #060607;
            border-top: 1px solid var(--border-gold);
            padding: 70px 6% 35px;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--text-muted);
            letter-spacing: 1px;
        }

        /* Адаптивность */
        @media (max-width: 1024px) {
            
            /* 1. Экран 1: Вытягиваем секцию и сдвигаем текст сильно вниз */
        .hero {
            min-height: auto; 
            /* Увеличили верхний отступ с 220px до 360px. Текст уедет вниз на пиджак */
            padding: 360px 6% 40px; 
        }

        .hero-bg-wrapper { 
            width: 100%; 
            opacity: 0.95; 
        }

        .hero-bg-wrapper img {
            /* Было 22%. Ставим 0% (или 5%) — это сдвинет картинку вправо и отцентрирует лицо */
            object-position: 19% 10%; 
            filter: brightness(1.25) contrast(1.08);
        }

        .hero-gradient-overlay { 
            /* Опускаем темную часть градиента ниже, чтобы лицо вообще не затемнялось */
            background: linear-gradient(to bottom, 
                rgba(10, 10, 11, 0) 0%, 
                rgba(10, 10, 11, 0) 35%,    /* Верхние 35% экрана полностью чистые для лица */
                rgba(10, 10, 11, 0.8) 55%,  /* Начинаем затемнять только на уровне груди */
                #0A0A0B 85%                 /* Плотный черный фон для текста */
            ); 
        }

            .hero-content { text-align: center; margin: 0 auto; }

            .hero-content h1 { font-size: 3.4rem; }
            
            /* 2. Экраны 2 и 3: Сокращаем отступы между блоками на мобильных */
            .programs-section, 
            .ensemble-section, 
            .booking-section {
                padding: 60px 6%; /* Было 100-110px, сделали компактно 60px */
            }

            /* Перестроение сетки в одну колонку */
            .programs-grid { grid-template-columns: 1fr; margin-top: 25px; }
            .ensemble-section { grid-template-columns: 1fr; gap: 40px; } /* Уменьшили gap */
            .ensemble-frame { order: -1; }
            .form-row, .checkbox-grid { grid-template-columns: 1fr; }
            
            /* Уменьшаем огромные внутренние отступы в форме бронирования */
            .booking-wrapper { padding: 35px 20px; }
            
            .program-card-img {
                height: 500px; 
            }
        } 

 @media (max-width: 768px) {
            .nav-links { display: none; }
            
            /* 1. Уменьшаем боковые поля шапки */
            header.navbar { padding: 16px 15px; }
            header.navbar.scrolled { padding: 12px 15px; }
            
            .logo { 
                font-size: 17px; 
                letter-spacing: 1.5px; 
                white-space: nowrap; 
            }
            
            .lang-switch {
                font-size: 11px;
                letter-spacing: 1px;
                white-space: nowrap; 
            }
            
            .lang-btn { margin: 0 2px; } 

            /* 2. РАСШИРЯЕМ КОНТЕНТ: меняем боковые поля с 6% на 15px для всех секций */
            .hero { 
                padding: 360px 15px 40px; 
            }
            
            .programs-section, 
            .ensemble-section, 
            .booking-section {
                padding: 50px 15px; 
            }

            .hero-content h1 { font-size: 2.8rem; }
            
            .hero-content .btn, .hero-content .btn-white {
                width: 100%;
                text-align: center;
                margin-bottom: 10px;
            }
            
            .footer-bottom { flex-direction: column; gap: 15px; text-align: center; padding: 0 15px; }
        }
/* Стилизация уведомлений Contact Form 7 в Dark Luxury */
.wpcf7 form.sent .wpcf7-response-output {
    border: 1px solid var(--accent-gold) !important;
    background: rgba(200, 169, 126, 0.1) !important;
    color: var(--accent-gold) !important;
    padding: 14px 20px !important;
    margin: 25px 0 0 0 !important;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border: 1px solid #d9534f !important;
    background: rgba(217, 83, 79, 0.1) !important;
    color: #ff8582 !important;
    padding: 14px 20px !important;
    margin: 25px 0 0 0 !important;
    text-align: center;
    font-size: 13px;
}

.wpcf7-not-valid-tip {
    color: #ff8582 !important;
    font-size: 11px !important;
    margin-top: 5px;
    display: block;
}

.wpcf7-spinner {
    display: block;
    margin: 10px auto 0 !important;
}

/* Выравнивание чекбоксов CF7 в 2 колонки как в оригинале */
.booking-section .checkbox-group .wpcf7-checkbox {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

@media (max-width: 768px) {
    .booking-section .checkbox-group .wpcf7-checkbox {
        grid-template-columns: 1fr;
    }
}

.booking-section .wpcf7-list-item {
    margin: 0 !important;
}

.booking-section .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 13px;
    margin: 0;
}

.booking-section .wpcf7-list-item input[type="checkbox"] {
    accent-color: var(--accent-gold);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Кнопка отправки на всю ширину формы */
.booking-section input[type="submit"].btn-booking-full {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;
    display: block !important;
    cursor: pointer;
}
/* Растягивание оберток Contact Form 7 и текстовых полей */
.booking-section .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.booking-section textarea.form-input,
.booking-section .wpcf7-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    resize: vertical;
}

.booking-section .form-group {
    width: 100%;
}