/* Legal Page Enhanced Styles */

/* Legal Content Base Styles - Match Privacy Policy */
.legal-content {
    font-family: "Onest", "Helvetica Neue", Arial, sans-serif !important;
}

/* Policy-prose specific line height matching privacy policy */
.legal-content p,
.legal-content li {
    line-height: 1.6;
}

/* Enhanced Typography Hierarchy - Match Privacy Policy */
.legal-content h2 {
    @apply text-2xl font-semibold text-gray-900 mb-4 flex items-baseline;
    scroll-margin-top: 7rem;
    position: relative;
}

.legal-content h2::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0;
    bottom: 0;
    width: 4px;
    @apply bg-gradient-to-b from-rose-400 to-rose-600 rounded-full;
}

.legal-content h3 {
    @apply text-xl font-medium text-gray-800 mt-6 mb-3;
    scroll-margin-top: 7rem;
}

/* Remove custom paragraph and list styling - let prose-sm handle it */
.legal-content p {
    @apply text-gray-700;
}

.legal-content ul,
.legal-content ol {
    @apply text-gray-700;
}

.legal-content li {
    @apply text-gray-700;
}

/* Let prose-sm handle list styling */

/* Section Copy Link Buttons */
.copy-section-link {
    @apply ml-2 text-gray-300 hover:text-rose-600 transition-colors opacity-0 group-hover:opacity-100;
    cursor: pointer;
}

.copy-section-link:hover {
    transform: scale(1.1);
}

/* Highlighted Information Boxes */
.legal-content .important-notice {
    @apply bg-amber-50 border-l-4 border-amber-400 p-6 my-6 rounded-r-lg;
}

.legal-content .important-notice::before {
    content: '⚠️';
    @apply text-amber-600 text-lg mr-3;
}

.legal-content .info-box {
    @apply bg-blue-50 border border-blue-200 rounded-lg p-6 my-6;
}

.legal-content .info-box::before {
    content: 'ℹ️';
    @apply text-blue-600 text-lg mr-3;
}

.legal-content .contact-box {
    @apply bg-rose-50 border border-rose-200 rounded-lg p-6 my-6;
}

/* Enhanced Table Styles */
.legal-content table {
    @apply w-full border-collapse my-6 rounded-lg overflow-hidden shadow-sm;
}

.legal-content th {
    @apply bg-rose-50 text-left font-semibold p-4 border-b border-rose-200;
    color: #1f2937;
}

.legal-content td {
    @apply p-4 border-b border-gray-200;
}

.legal-content tbody tr:hover {
    @apply bg-gray-50;
}

/* Table of Contents Styles */
#toc-navigation {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.toc-link {
    position: relative;
    padding-left: 1rem;
    @apply block py-2 text-gray-600 hover:text-rose-600 transition-colors rounded-md hover:bg-rose-50;
}

.toc-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    @apply bg-gray-300 rounded-full transition-colors;
}

.toc-link:hover::before,
.toc-link.active::before {
    @apply bg-rose-500;
}

.toc-link.active {
    @apply text-rose-600 font-semibold bg-rose-50;
}

.toc-level-2 {
    @apply pl-6 text-sm;
}

.toc-level-2::before {
    width: 4px;
    height: 4px;
}

/* Mobile TOC Styles */
#mobile-toc-toggle svg {
    transition: transform 0.3s ease;
}

#mobile-toc-toggle.expanded svg:last-child {
    transform: rotate(180deg);
}

/* Reading Progress Bar */
#reading-progress {
    transition: width 0.1s ease-out;
}

/* Section Numbering Enhancement */
.section-number {
    @apply inline-flex items-center justify-center w-8 h-8 bg-rose-500 text-white rounded-full text-sm font-semibold mr-3;
}

/* Comments and Template Notes Styling */
.legal-content em:contains("КОМЕНТАР") {
    @apply bg-yellow-100 border-l-4 border-yellow-400 p-2 my-2 text-yellow-800 text-sm italic block;
}

/* Print Styles */
@media print {
    #toc-navigation,
    #mobile-toc-toggle,
    #mobile-toc,
    #reading-progress,
    .copy-section-link,
    .contact-section,
    .print-hidden {
        display: none !important;
    }
    
    .legal-content {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    .legal-content h2 {
        page-break-after: avoid;
        page-break-inside: avoid;
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    .legal-content h2::before {
        display: none;
    }
    
    .legal-content p,
    .legal-content li {
        page-break-inside: avoid;
        orphans: 3;
        widows: 3;
    }
    
    .legal-content ul li::before {
        background-color: #000;
    }
    
    .legal-content .important-notice,
    .legal-content .info-box {
        border: 1px solid #ccc;
        background: #f5f5f5;
        page-break-inside: avoid;
    }
}

/* Loading and Animation Styles */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

@keyframes slide-down {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
    }
}

.slide-down {
    animation: slide-down 0.3s ease-out;
    overflow: hidden;
}

/* Success Toast */
.success-toast {
    @apply fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50;
    animation: fade-in 0.3s ease-out;
}

/* Responsive Design Adjustments - Let prose-sm handle sizing */
@media (max-width: 768px) {
    .legal-content h2::before {
        left: -1rem;
        width: 3px;
    }
    
    #toc-navigation {
        max-height: 50vh;
    }
}

@media (max-width: 640px) {
    .legal-content h2 {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .copy-section-link {
        @apply mt-1 ml-0;
    }
}

/* Focus States for Accessibility */
.toc-link:focus,
button:focus,
a:focus {
    @apply outline-none ring-2 ring-rose-500 ring-opacity-50;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar for TOC */
#toc-navigation::-webkit-scrollbar {
    width: 4px;
}

#toc-navigation::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

#toc-navigation::-webkit-scrollbar-thumb {
    @apply bg-rose-300 rounded-full;
}

#toc-navigation::-webkit-scrollbar-thumb:hover {
    @apply bg-rose-400;
}