

/* Размеры заголовков */
.nav-heading-content h1,
.wp-block-my-plugin-nav-heading h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.nav-heading-content h2,
.wp-block-my-plugin-nav-heading h2 {
    font-size: 2rem;
    margin-bottom: 0.875rem;
}

.nav-heading-content h3,
.wp-block-my-plugin-nav-heading h3 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.nav-heading-content h4,
.wp-block-my-plugin-nav-heading h4 {
    font-size: 1.5rem;
    margin-bottom: 0.625rem;
}

.nav-heading-content h5,
.wp-block-my-plugin-nav-heading h5 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.nav-heading-content h6,
.wp-block-my-plugin-nav-heading h6 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

/* Выравнивание */
.wp-block-my-plugin-nav-heading.has-text-align-left {
    text-align: left;
}

.wp-block-my-plugin-nav-heading.has-text-align-center {
    text-align: center;
}

.wp-block-my-plugin-nav-heading.has-text-align-right {
    text-align: right;
}

/* Стили для редактора */
.wp-block-my-plugin-nav-heading .nav-heading-content {
    min-height: 1.2em;
    outline: none;
    border: none;
    background: transparent;
    width: 100%;
}

.wp-block-my-plugin-nav-heading .nav-heading-content:focus {
    outline: none;
}

/* Стили для якорных ссылок */
.nav-heading-content[id] {
    position: relative;
}

/* Адаптивность */
@media (max-width: 768px) {
    .nav-heading-content h1,
    .wp-block-my-plugin-nav-heading h1 {
        font-size: 2rem;
    }
    
    .nav-heading-content h2,
    .wp-block-my-plugin-nav-heading h2 {
        font-size: 1.75rem;
    }
    
    .nav-heading-content h3,
    .wp-block-my-plugin-nav-heading h3 {
        font-size: 1.5rem;
    }
    
    .nav-heading-content h4,
    .wp-block-my-plugin-nav-heading h4 {
        font-size: 1.25rem;
    }
    
    .nav-heading-content h5,
    .wp-block-my-plugin-nav-heading h5 {
        font-size: 1.125rem;
    }
    
    .nav-heading-content h6,
    .wp-block-my-plugin-nav-heading h6 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .nav-heading-content h1,
    .wp-block-my-plugin-nav-heading h1 {
        font-size: 1.75rem;
    }
    
    .nav-heading-content h2,
    .wp-block-my-plugin-nav-heading h2 {
        font-size: 1.5rem;
    }
    
    .nav-heading-content h3,
    .wp-block-my-plugin-nav-heading h3 {
        font-size: 1.25rem;
    }
    
    .nav-heading-content h4,
    .wp-block-my-plugin-nav-heading h4 {
        font-size: 1.125rem;
    }
    
    .nav-heading-content h5,
    .wp-block-my-plugin-nav-heading h5 {
        font-size: 1rem;
    }
    
    .nav-heading-content h6,
    .wp-block-my-plugin-nav-heading h6 {
        font-size: 0.875rem;
    }
}

/* Стили для панели настроек */
.components-panel__body .components-base-control {
    margin-bottom: 16px;
}

.components-panel__body .components-base-control:last-child {
    margin-bottom: 0;
}

.components-panel__body input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.components-panel__body input[type="text"]:focus {
    outline: none;
}

/* Стили для селекта */
.components-select-control__input {
    width: 100%;
}

/* Дополнительные стили для навигации */
.nav-heading-content {
    transition: color 0.2s ease;
}

.nav-heading-content:hover {

}

/* Стили для различных тем */
.wp-block-my-plugin-nav-heading.theme-dark .nav-heading-content {
    color: #ffffff;
}

.wp-block-my-plugin-nav-heading.theme-light .nav-heading-content {
    color: #1F1F1F;
}

/* Стили для печати */
@media print {
    .wp-block-my-plugin-nav-heading::before {
        display: none;
    }
    
    .nav-heading-content[id]:hover::after {
        display: none;
    }
}

/* Стили для accessibility */
.nav-heading-content:focus-visible {
    outline-offset: 2px;
}

/* Стили для RTL */
[dir="rtl"] .wp-block-my-plugin-nav-heading::before {
    left: auto;
    right: -20px;
}

[dir="rtl"] .nav-heading-content[id]:hover::after {
    right: auto;
    left: -30px;
}
