/* 
 * Osirion HTML Renderer Global Styles
 * Place this file in: wwwroot/css/osirion-html-renderer.css
 * Include via: <link rel="stylesheet" href="_content/Osirion.Blazor.Core/css/osirion-html-renderer.css" />
 */

/* ========== CSS VARIABLES ========== */
/* CSS Custom Properties for WCAG AAA compliant link colors */
:root {
    /* Light theme - WCAG AAA compliant (7:1+ contrast) */
    --osirion-link-primary: #0052cc; /* 8.2:1 on white */
    --osirion-link-primary-hover: #003d99; /* 11.1:1 on white */
    --osirion-link-bg: rgba(0, 82, 204, 0.08); /* Subtle background */
    --osirion-link-bg-hover: rgba(0, 82, 204, 0.12);
    /* Focus ring colors */
    --osirion-link-focus: rgba(0, 82, 204, 0.4);
    --osirion-link-focus-offset: #ffffff;
}

    /* Dark theme overrides - WCAG AAA compliant */
    :root[data-theme="dark"],
    [data-theme="dark"],
    .dark-theme,
    .theme-dark,
    .osirion-theme-dark,
    :root[data-bs-theme="dark"],
    [data-bs-theme="dark"] {
        /* Dark theme - WCAG AAA compliant (7:1+ contrast on dark backgrounds) */
        --osirion-link-primary: #66b3ff; /* 8.1:1 on #1a1a1a */
        --osirion-link-primary-hover: #99ccff; /* 11.2:1 on #1a1a1a */
        --osirion-link-bg: rgba(102, 179, 255, 0.08);
        --osirion-link-bg-hover: rgba(102, 179, 255, 0.12);
        --osirion-link-focus: rgba(102, 179, 255, 0.5);
        --osirion-link-focus-offset: var(--osirion-background-primary, #1a1a1a);
    }

/* ========== BASE TYPOGRAPHY ========== */
.osirion-html-renderer {
    /* Base typography settings */
    font-family: var(--osirion-font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: var(--osirion-font-size-base, 1rem);
    line-height: var(--osirion-line-height-relaxed, 1.625);
    color: var(--osirion-text-primary, #374151);
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* ========== HEADINGS ========== */
    .osirion-html-renderer h1,
    .osirion-html-renderer h2,
    .osirion-html-renderer h3,
    .osirion-html-renderer h4,
    .osirion-html-renderer h5,
    .osirion-html-renderer h6 {
        margin-top: var(--osirion-spacing-8, 2rem);
        margin-bottom: var(--osirion-spacing-4, 1rem);
        font-weight: var(--osirion-font-weight-semibold, 600);
        line-height: var(--osirion-line-height-tight, 1.25);
        color: var(--osirion-text-primary, #111827);
    }

    .osirion-html-renderer h1 {
        font-size: var(--osirion-font-size-4xl, 2.25rem);
        margin-top: 0;
    }

    .osirion-html-renderer h2 {
        font-size: var(--osirion-font-size-3xl, 1.875rem);
    }

    .osirion-html-renderer h3 {
        font-size: var(--osirion-font-size-2xl, 1.5rem);
    }

    .osirion-html-renderer h4 {
        font-size: var(--osirion-font-size-xl, 1.25rem);
    }

    .osirion-html-renderer h5 {
        font-size: var(--osirion-font-size-lg, 1.125rem);
    }

    .osirion-html-renderer h6 {
        font-size: var(--osirion-font-size-base, 1rem);
    }

        /* First heading has no top margin */
        .osirion-html-renderer h1:first-child,
        .osirion-html-renderer h2:first-child,
        .osirion-html-renderer h3:first-child,
        .osirion-html-renderer h4:first-child,
        .osirion-html-renderer h5:first-child,
        .osirion-html-renderer h6:first-child {
            margin-top: 0;
        }

    /* ========== PARAGRAPHS & TEXT ========== */
    .osirion-html-renderer p {
        margin-top: 0;
        margin-bottom: var(--osirion-spacing-4, 1rem);
    }

        .osirion-html-renderer p:last-child {
            margin-bottom: 0;
        }

        /* Lead paragraph */
        .osirion-html-renderer .lead,
        .osirion-html-renderer p.lead {
            font-size: var(--osirion-font-size-lg, 1.125rem);
            font-weight: var(--osirion-font-weight-normal, 400);
            line-height: var(--osirion-line-height-relaxed, 1.625);
            color: var(--osirion-text-secondary, #6b7280);
        }

    /* ========== LISTS ========== */
    .osirion-html-renderer ul,
    .osirion-html-renderer ol {
        margin-top: 0;
        margin-bottom: var(--osirion-spacing-4, 1rem);
        padding-left: var(--osirion-spacing-6, 1.5rem);
    }

        .osirion-html-renderer ul ul,
        .osirion-html-renderer ul ol,
        .osirion-html-renderer ol ul,
        .osirion-html-renderer ol ol {
            margin-bottom: 0;
        }

    .osirion-html-renderer li {
        margin-bottom: var(--osirion-spacing-2, 0.5rem);
    }

        .osirion-html-renderer li:last-child {
            margin-bottom: 0;
        }

    /* ========== BLOCKQUOTES ========== */
    .osirion-html-renderer blockquote {
        margin: var(--osirion-spacing-6, 1.5rem) 0;
        padding: var(--osirion-spacing-4, 1rem) var(--osirion-spacing-6, 1.5rem);
        border-left: 4px solid var(--osirion-action-primary, #2563eb);
        background-color: var(--osirion-background-secondary, #f9fafb);
        font-style: italic;
        color: var(--osirion-text-secondary, #6b7280);
    }

        .osirion-html-renderer blockquote p:last-child {
            margin-bottom: 0;
        }

    /* ========== HORIZONTAL RULES ========== */
    .osirion-html-renderer hr {
        height: 0;
        margin: var(--osirion-spacing-8, 2rem) 0;
        border: 0;
        border-top: 1px solid var(--osirion-border-color, #e5e7eb);
    }

    /* ========== EMPHASIS & STRONG ========== */
    .osirion-html-renderer em {
        font-style: italic;
    }

    .osirion-html-renderer strong {
        font-weight: var(--osirion-font-weight-semibold, 600);
        color: var(--osirion-text-primary, #111827);
    }

    /* ========== AUTOMATIC LINK STYLES ========== */
    .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)) {
        display: inline-block;
        position: relative;
        padding: 0.125rem 0.5rem;
        padding-right: 2rem; /* Space for icon */
        border-radius: var(--osirion-radius-sm, 0.125rem);
        text-decoration: none;
        transition: all 0.2s ease;
        /* Use calculated WCAG compliant colors */
        color: var(--osirion-link-primary);
        background-color: var(--osirion-link-bg);
        /* Ensure minimum contrast in all cases */
        font-weight: 500;
    }

        .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)):hover {
            color: var(--osirion-link-primary-hover);
            background-color: var(--osirion-link-bg-hover);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

    /* ========== CODE (INLINE) ========== */
    .osirion-html-renderer code:not([class*="language-"]) {
        display: inline-block;
        padding: 0.125em 0.5em;
        font-family: var(--osirion-font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
        background-color: var(--osirion-code-background, rgba(107, 114, 128, 0.1));
        color: var(--osirion-text-primary, #dc2626);
        border-radius: var(--osirion-radius-base);
        border: 1px solid var(--osirion-background-primary);
        font-family: var(--osirion-font-family-mono);
        font-size: 0.875em;
        font-weight: var(--osirion-font-weight-medium, 500);
    }

    /* ========== TABLES ========== */
    .osirion-html-renderer table {
        width: 100%;
        margin-bottom: var(--osirion-spacing-4, 1rem);
        border-collapse: collapse;
        font-size: var(--osirion-font-size-sm, 0.875rem);
    }

    .osirion-html-renderer th,
    .osirion-html-renderer td {
        padding: var(--osirion-spacing-3, 0.75rem);
        text-align: left;
        border-bottom: 1px solid var(--osirion-border-color, #e5e7eb);
    }

    .osirion-html-renderer th {
        font-weight: var(--osirion-font-weight-semibold, 600);
        color: var(--osirion-text-primary, #111827);
        background-color: var(--osirion-background-secondary, #f9fafb);
    }

    .osirion-html-renderer tbody tr:hover {
        background-color: var(--osirion-background-secondary, #f9fafb);
    }

    /* ========== IMAGES ========== */
    .osirion-html-renderer img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: var(--osirion-spacing-6, 1.5rem) auto;
        border-radius: var(--osirion-radius-lg, 0.5rem);
    }

    /* Inline images */
    .osirion-html-renderer p img,
    .osirion-html-renderer li img {
        display: inline-block;
        margin: 0 var(--osirion-spacing-1, 0.25rem);
        vertical-align: middle;
    }

    /* Figure and figcaption */
    .osirion-html-renderer figure {
        margin: var(--osirion-spacing-8, 2rem) 0;
        text-align: center;
    }

    .osirion-html-renderer figcaption {
        margin-top: var(--osirion-spacing-2, 0.5rem);
        font-size: var(--osirion-font-size-sm, 0.875rem);
        color: var(--osirion-text-tertiary, #9ca3af);
        font-style: italic;
    }

    /* ========== CODE BLOCKS & SYNTAX HIGHLIGHTING ========== */
    /* Code wrapper with header */
    .osirion-html-renderer .osirion-code-wrapper {
        position: relative;
        margin: var(--osirion-spacing-4, 1rem) 0;
        background-color: var(--osirion-syntax-background-color);
        border-radius: var(--osirion-radius-md, 0.375rem);
    }

    .osirion-html-renderer .osirion-code-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: var(--osirion-radius-md, 0.375rem) var(--osirion-radius-md, 0.375rem) 0 0;
        border: 1px solid #444;
        border-bottom: none;
        background-color: var(--osirion-syntax-background-color);
    }

    .osirion-html-renderer .osirion-language-label {
        color: var(--osirion-color-primary-600, #60a5fa);
        font-family: var(--osirion-font-family-mono, 'Consolas', 'Monaco', monospace);
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Copy button */
    .osirion-html-renderer .osirion-copy-button {
        padding: 0.25rem 0.75rem;
        border-radius: var(--osirion-radius-sm, 0.125rem);
        font-size: 0.8rem;
        transition: all var(--osirion-transition-duration-200, 0.2s) ease;
        background-color: rgba(255, 255, 255, 0.1);
        color: #f8f8f2;
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
    }

        .osirion-html-renderer .osirion-copy-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .osirion-html-renderer .osirion-copy-button.copied {
            background-color: #50fa7b;
            color: #1e1e1e;
            border-color: #50fa7b;
        }

    /* Prism overrides for wrapped code blocks */
    .osirion-html-renderer .osirion-code-wrapper pre[class*="language-"] {
        margin-top: 0;
        border-radius: 0 0 var(--osirion-radius-md, 0.375rem) var(--osirion-radius-md, 0.375rem);
        border: 1px solid #444;
        border-top: none;
        background-color: var(--osirion-syntax-background-color);
    }

    /* Line numbers and highlighting */
    .osirion-html-renderer .line-numbers-rows > span {
        cursor: pointer;
        transition: all var(--osirion-transition-duration-200, 0.2s) ease;
        user-select: none;
    }

        .osirion-html-renderer .line-numbers-rows > span:hover {
            background: rgba(139, 148, 158, 0.2);
            color: #f8f8f2;
        }

        /* Highlighted lines */
        .osirion-html-renderer .line-numbers-rows > span.osirion-line-highlighted {
            color: #50fa7b !important;
            font-weight: bold;
        }

    /* Line highlight overlay */
    .osirion-html-renderer .osirion-line-highlight-overlay {
        position: absolute;
        left: 3.8em;
        right: 0;
        background: linear-gradient(to right, rgba(80, 250, 123, 0.15) 0%, rgba(80, 250, 123, 0.1) 50%, rgba(80, 250, 123, 0.05) 80%, transparent 95%);
        border-left: 3px solid #50fa7b;
        pointer-events: none;
        z-index: 1;
        height: 1.5em;
    }

/* ========== ACCESSIBILITY ========== */
/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: high) {
    .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)) {
        /* Maximum contrast colors */
        color: #0000ff !important; /* Pure blue */
        background-color: transparent !important;
        border: 2px solid currentColor !important;
        text-decoration: underline !important;
        font-weight: bold !important;
    }

        .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)):hover {
            color: #ffffff !important;
            background-color: #0000ff !important;
            border-color: #0000ff !important;
        }

    .osirion-html-renderer.osirion-wcag-theme pre[class*="language-"] {
        background: #000000;
        border: 1px solid #ffffff;
    }

    .osirion-html-renderer.osirion-wcag-theme .token.comment {
        color: #aaaaaa;
    }
}

/* Reduced contrast preference */
@media (prefers-contrast: less) {
    .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)) {
        /* Still WCAG AA compliant but softer */
        color: #0066cc; /* 4.8:1 contrast - AA compliant */
        background-color: rgba(0, 102, 204, 0.05);
    }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
    .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)) {
        color: LinkText !important;
        background-color: transparent !important;
        border: 1px solid LinkText !important;
    }

        .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)):hover {
            color: HighlightText !important;
            background-color: Highlight !important;
            border-color: Highlight !important;
        }
}

/* ========== FOCUS STATES (WCAG 2.2 Compliant) ========== */
.osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)):focus-visible {
    outline: none;
    /* Double ring focus indicator */
    box-shadow: 0 0 0 2px var(--osirion-link-focus-offset), 0 0 0 4px var(--osirion-link-focus);
    /* Ensure focus is always visible */
    position: relative;
    z-index: 1;
}


/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .osirion-html-renderer * {
        transition: none !important;
        animation: none !important;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .osirion-html-renderer.osirion-wcag-theme code[class*="language-"],
    .osirion-html-renderer.osirion-wcag-theme pre[class*="language-"] {
        text-shadow: none;
    }

    .osirion-html-renderer .osirion-code-header {
        display: none;
    }
}

/* Reduce transparency on smaller screens for better readability */
@media (max-width: 768px) {
    .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)) {
        background-color: rgba(0, 82, 204, 0.12);
        padding: 0.25rem 0.75rem;
        padding-right: 2.5rem;
    }
}

/* Print styles - maximum contrast */
@media print {
    .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)) {
        color: #000000 !important;
        background-color: transparent !important;
        text-decoration: underline !important;
        border: 1px solid #000000 !important;
        font-weight: bold !important;
    }

        .osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i))::after {
            display: none !important;
        }
}

/* ========== ICON STYLING ========== */
.osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i))::after {
    content: '';
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    /* External link icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath d='M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z'/%3E%3Cpath d='M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath d='M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z'/%3E%3Cpath d='M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    /* Inherit color from parent with opacity */
    background-color: currentColor;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.osirion-html-renderer a:not(:has(img)):not(:has(svg)):not(:has(span)):not(:has(div)):not(:has(i)):hover::after {
    opacity: 1;
}