/* =======================================================
   JOURNAL: MEDICAL NURSE (МЕДИЦИНСКАЯ СЕСТРА)
   - Стиль: Red & White (Строгий красный)
   - База: Molmed Journal Template
   ======================================================= */

/* 1. ШРИФТЫ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
body, h1, h2, h3, h4, h5, h6, p, a, li, div, span, input, button {
    font-family: "Inter", sans-serif !important;
}

/* =======================================================
   2. СТРУКТУРА (Без изменений)
   ======================================================= */
.pkp_structure_content { max-width: 1160px !important; margin: 0 auto; display: flex; flex-wrap: wrap; }
.pkp_structure_main { width: 860px !important; padding-right: 20px; }
.pkp_structure_sidebar { width: 300px !important; padding: 0 10px; display: flex; flex-direction: column; align-items: center; }

@media (min-width: 992px) {
    .pkp_structure_sidebar { padding-top: 30px; }
}
@media (max-width: 991px) {
    .pkp_structure_main, .pkp_structure_sidebar { width: 100% !important; padding: 0 10px; }
    .pkp_structure_sidebar { order: 2; margin-top: 20px; }
}

/* =======================================================
   3. КНОПКИ САЙДБАРА (RED STYLE)
   - Основной цвет: Красный (#c21e26)
   - Тень: Темно-бордовый (#8a151b)
   ======================================================= */
html body #sub-btn-glow, 
html body .sidebar-button, 
html body .custom-sidebar-btn,
html body .pkp_structure_sidebar .pkp_block .content > div[style*="background-color"] {
    /* ЦВЕТА КНОПКИ */
    background-color: #c21e26 !important; /* Красный с обложки */
    background: #c21e26 !important;
    border: 1px solid #c21e26 !important;
    border-bottom: 3px solid #8a151b !important; /* Темная тень */
    
    /* ФОРМА */
    border-radius: 10px !important;
    width: 240px !important;
    margin: 0 auto 15px auto !important;
    padding: 8px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    
    /* АНИМАЦИЯ */
    position: relative !important;
    overflow: hidden !important;
    display: block;
    text-align: center;
}

/* ТЕКСТ В КНОПКАХ (БЕЛЫЙ) */
/* На красном фоне лучше всего смотрится белый текст */
html body #sub-btn-glow a, 
html body .sidebar-button a, 
html body .custom-sidebar-btn a, 
html body .pkp_structure_sidebar .pkp_block .content > div[style*="background-color"] a {
    color: #ffffff !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    position: relative;
    z-index: 5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Легкая тень для читаемости */
}

/* ЭФФЕКТ ВОЛНЫ (БЛИК) */
html body #sub-btn-glow::before, 
html body .sidebar-button::before, 
html body .custom-sidebar-btn::before, 
html body .pkp_structure_sidebar .pkp_block .content > div[style*="background-color"]::before {
    content: "";
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(-45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.7s ease-in-out;
    z-index: 1; pointer-events: none;
}
html body #sub-btn-glow:hover::before, 
html body .sidebar-button:hover::before, 
html body .custom-sidebar-btn:hover::before, 
html body .pkp_structure_sidebar .pkp_block .content > div[style*="background-color"]:hover::before {
    left: 100%;
}

/* ЭФФЕКТ НАЖАТИЯ (Светлеет) */
html body #sub-btn-glow:hover, 
html body .pkp_structure_sidebar .pkp_block .content > div[style*="background-color"]:hover {
    background: #d9343c !important; /* Чуть светлее при наведении */
    transform: translateY(-2px);
}

/* =======================================================
   4. ЗАГОЛОВКИ САЙДБАРА (RED GRADIENT)
   ======================================================= */
.pkp_structure_sidebar .pkp_block .title {
    /* Градиент от красного к темно-красному */
    background: linear-gradient(180deg, #c21e26 0%, #750d12 100%) !important;
    color: #ffffff !important;
    border-radius: 10px;
    text-align: center;
    padding: 5px 0 !important;
    font-weight: bold;
    text-transform: uppercase;
}

/* Разделители меню (Светло-серые или бледно-красные) */
.pkp_structure_sidebar ul li {
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 10px;
}

/* ССЫЛКИ САЙДБАРА (ЧЕРНЫЕ) */
.pkp_structure_sidebar ul li a,
.pkp_structure_sidebar .pkp_block .content a { 
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
.pkp_structure_sidebar ul li a:hover,
.pkp_structure_sidebar .pkp_block .content a:hover { 
    color: #c21e26 !important; /* При наведении краснеют (как бренд) */
    background: transparent !important;
}

/* =======================================================
   5. ОСТАЛЬНОЕ
   ======================================================= */
.journal-top-banner img, .custom-journal-wrapper img { width: 100%; height: auto; }

/* PDF Header (Красный градиент) */
.header_view { 
    background: linear-gradient(180deg, #c21e26 0%, #750d12 100%) !important; 
    border-bottom: none; 
}
/* Кнопка скачивания PDF (Белая для контраста) */
.header_view .download { 
    background: #ffffff !important; 
    color: #c21e26 !important; 
    border-radius: 4px;
    font-weight: bold;
}
.header_view .download:hover {
    background: #f0f0f0 !important;
}

/* Мобильная адаптация кнопок */
@media (max-width: 991px) {
    html body #sub-btn-glow, 
    html body .pkp_structure_sidebar .pkp_block .content > div[style*="background-color"] { 
        width: 100% !important; 
    }
}

/* =======================================================
   АККОРДЕОН (Остается без изменений, он нейтральный)
   ======================================================= */
.vrach-accordion-lite { max-width: 100%; margin: 30px 0; font-family: "Inter", sans-serif; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.vrach-accordion-lite details { border-bottom: 1px solid #f0f0f0; background: transparent; transition: all 0.3s ease; }
.vrach-accordion-lite details:last-child { border-bottom: none; }
.vrach-accordion-lite summary { padding: 18px 10px 18px 35px; font-weight: 600; font-size: 15px; color: #555c66; cursor: pointer; list-style: none; position: relative; transition: color 0.2s ease; }
.vrach-accordion-lite summary::-webkit-details-marker { display: none; }
.vrach-accordion-lite summary::before { content: ''; position: absolute; left: 15px; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #b0b0b0; transform: translateY(-50%); transition: all 0.2s ease; }
.vrach-accordion-lite summary:hover { color: #333; }
.vrach-accordion-lite summary:hover::before { border-left-color: #888; transform: translateY(-50%) scale(1.1); }
.vrach-accordion-lite details[open] summary { color: #000; font-weight: 700; }
.vrach-accordion-lite details[open] summary::before { transform: translateY(-50%) rotate(90deg); border-left-color: #c21e26; } /* Стрелка тоже красная */
.vrach-accordion-lite .content { padding: 5px 10px 25px 35px; font-size: 15px; line-height: 1.6; color: #000000; font-weight: 400; opacity: 0; transform: translateY(-10px); animation: fadeInUp 0.35s forwards 0.1s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ЯЗЫКОВЫЕ КНОПКИ */
.hard-lang-switch { z-index: 100000 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 2px !important; }
.hard-lang-switch a { display: flex !important; align-items: center; justify-content: center; background-color: #ffffff !important; color: #333333 !important; text-decoration: none !important; font-family: 'Roboto', sans-serif !important; font-weight: bold !important; font-size: 11px !important; height: 24px !important; padding: 0 8px !important; border-radius: 3px !important; border: 1px solid #dcdcdc !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; margin: 0 !important; transition: all 0.2s ease !important; }
.hard-lang-switch a:hover, .hard-lang-switch a.active-locale { color: #c21e26 !important; border-color: #c21e26 !important; background-color: #fff !important; }
@media (max-width: 991px) { .hard-lang-switch { position: fixed !important; top: 60px !important; right: 15px !important; left: auto !important; background: transparent !important; padding: 5px 0 !important; } }
@media (min-width: 992px) { .hard-lang-switch { position: absolute !important; top: 28px !important; right: 220px !important; } }

/* =======================================================
   5. ШАПКА С ЛОГОТИПОМ (ТЕКСТ СКРЫТ)
   ======================================================= */

/* 1. Настройка контейнера */
.pkp_structure_head { 
    height: auto !important; 
    min-height: 0 !important; 
    overflow: visible !important; /* Разрешаем логотипу вылезать за рамки */
    z-index: 10 !important; 
}

/* 2. Красная полоса */
.pkp_site_name_wrapper {
    height: 59.91px !important;
    min-height: 59.91px !important; 
    max-height: 59.91px !important;
    padding: 0 !important; margin: 0 !important;

    /* Цвет фона */
    background-color: #c21e26 !important; 
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    position: relative !important; 
    overflow: visible !important;
    display: flex !important; 
    align-items: center !important; 
}

/* 3. СКРЫВАЕМ ТЕКСТОВОЕ НАЗВАНИЕ САЙТА */
/* Этот код убирает надпись "Медицинская сестра" под логотипом */
.pkp_site_name_wrapper .pkp_site_name,
.pkp_site_name_wrapper h1,
.pkp_site_name_wrapper a {
    display: none !important; /* Полностью убрать текст */
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 4. НАКЛАДНОЙ ЛОГОТИП */
.pkp_site_name_wrapper::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;

    /* --- ССЫЛКА НА ВАШ ЛОГОТИП --- */
    background-image: url('https://vrach.digital-medic.ru/public/site/images/logos.png') !important;

    /* --- РАЗМЕРЫ ЛОГОТИПА --- */
    width: 150px !important;
    height: 82px !important;

    /* --- ПОЗИЦИЯ --- */
    top: -35px !important;   /* Поднимаем вверх над шапкой */
    left: 30px !important;    /* Отступ слева */

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 500 !important;
    pointer-events: none; 
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ --- */
@media (max-width: 991px) {
    .pkp_site_name_wrapper::after {
        width: 150px !important;
        height: 50px !important;
        top: 5px !important;
        left: 10px !important;
        background-position: left center !important;
    }
    .pkp_site_name_wrapper {
        min-height: 60px !important;
    }
}