/**
 * WP Djot - Frontend Styles
 *
 * @package WpDjot
 */

/* Container */
.djot-content {
    line-height: 1.6;
    color: inherit;
}

/* Sections */
.djot-content section {
    margin-bottom: 30px;
}

/* Headings */
.djot-content h1,
.djot-content h2,
.djot-content h3,
.djot-content h4,
.djot-content h5,
.djot-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.25;
}

.djot-content h1:first-child,
.djot-content h2:first-child,
.djot-content h3:first-child {
    margin-top: 0;
}

/* Paragraphs */
.djot-content p {
    margin: 0 0 1em;
}

/* Code - Inline */
.djot-content code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    background-color: rgba(175, 184, 193, 0.2);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

/* Code - Blocks */
.djot-content pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    line-height: 1.45;
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 1em;
    overflow-x: auto;
    margin: 1em 0;
}

.djot-content pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
}

/* Torchlight/Phiki Syntax Highlighting */
.djot-content pre code.torchlight {
    display: block;
    min-width: max-content;
    padding: 1rem 0;
    background: transparent;
}

/* All line divs (both .line and bare divs for highlighted lines) */
.djot-content pre code.torchlight .line,
.djot-content pre code.torchlight > div {
    display: block;
    padding: 0 1rem;
}

/* Torchlight line numbers */
.djot-content pre code.torchlight .line-number {
    display: inline-block;
    width: 2em;
    margin-right: 1rem;
    text-align: right;
    color: #6e7681;
    user-select: none;
}

/* Torchlight highlight lines - Torchlight removes 'line' class from highlighted lines */
.djot-content pre code.torchlight.has-highlight-lines > div:not(.line),
pre code.torchlight.has-highlight-lines > div:not(.line),
code.torchlight.has-highlight-lines > div:not(.line) {
    background: rgba(255, 255, 0, 0.15);
}

/* Also support explicit .line-highlight class if used */
.djot-content pre code.torchlight .line-highlight {
    background: rgba(255, 255, 0, 0.15);
}

/* Torchlight focus mode - dim unfocused lines */
.djot-content pre code.torchlight.has-focus-lines .line:not(.line-focus) {
    transition: filter 0.35s, opacity 0.35s;
    filter: blur(0.095rem);
    opacity: 0.65;
}

.djot-content pre code.torchlight.has-focus-lines:hover .line:not(.line-focus) {
    filter: blur(0);
    opacity: 1;
}

/* Torchlight diff annotations - Torchlight removes 'line' class from diff lines */
/* When only add lines present */
.djot-content pre code.torchlight.has-add-lines:not(.has-remove-lines):not(.has-highlight-lines) > div:not(.line) {
    background: rgba(46, 160, 67, 0.15);
}

/* When only remove lines present */
.djot-content pre code.torchlight.has-remove-lines:not(.has-add-lines):not(.has-highlight-lines) > div:not(.line) {
    background: rgba(248, 81, 73, 0.15);
}

/* When both add and remove are present, we style based on line number content */
/* This uses :has() to detect the +/- indicator in the line number */
.djot-content pre code.torchlight.has-add-lines.has-remove-lines > div:not(.line):has(.line-number) {
    /* Default to neutral for mixed diff blocks */
}

/* Detect add lines by green-colored line number */
.djot-content pre code.torchlight > div:not(.line):has(.line-number[style*="22863a"]),
pre code.torchlight > div:not(.line):has(.line-number[style*="22863a"]),
code.torchlight > div:not(.line):has(.line-number[style*="22863a"]) {
    background: rgba(46, 160, 67, 0.15);
}

/* Detect remove lines by red-colored line number */
.djot-content pre code.torchlight > div:not(.line):has(.line-number[style*="b31d28"]),
pre code.torchlight > div:not(.line):has(.line-number[style*="b31d28"]),
code.torchlight > div:not(.line):has(.line-number[style*="b31d28"]) {
    background: rgba(248, 81, 73, 0.15);
}

/* Also support explicit classes if used */
.djot-content pre code.torchlight .line-add {
    background: rgba(46, 160, 67, 0.15);
}

.djot-content pre code.torchlight .line-remove {
    background: rgba(248, 81, 73, 0.15);
}

.djot-content pre code.torchlight .diff-indicator {
    user-select: none;
}

.djot-content pre code.torchlight .diff-indicator-add {
    color: #3fb950;
}

.djot-content pre code.torchlight .diff-indicator-remove {
    color: #f85149;
}

/* Code Block Wrapper and Copy Button */
.djot-content .code-block-wrapper {
    position: relative;
}

.djot-content .code-block-wrapper .code-copy-btn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    padding: 0.4em;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #d0d7de;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #57606a;
    z-index: 10;
}

.djot-content .code-block-wrapper:hover .code-copy-btn {
    opacity: 1;
}

.djot-content .code-block-wrapper .code-copy-btn:hover {
    background: #fff;
    color: #24292f;
}

.djot-content .code-block-wrapper .code-copy-btn.copied {
    color: #2ea043;
}

/* Code Block Filename Header */
.djot-content pre[data-filename] {
    position: relative;
    padding-top: 2.5em;
}

.djot-content pre[data-filename]::before {
    content: attr(data-filename);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.4em 1em;
    background: #e6e8eb;
    border-bottom: 1px solid #d0d7de;
    border-radius: 6px 6px 0 0;
    font-size: 0.85em;
    color: #57606a;
}

/* Blockquotes - minimal reset, let theme handle visual styling */
.djot-content blockquote > :first-child {
    margin-top: 0;
}

.djot-content blockquote > :last-child {
    margin-bottom: 0;
}

/* Lists */
.djot-content ul,
.djot-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.djot-content li {
    margin: 0.25em 0;
}

.djot-content li > p {
    margin: 0;
}

/* Task Lists */
.djot-content ul.task-list,
.djot-content .task-list {
    list-style: none !important;
    padding-left: 0 !important;
}

.djot-content .task-list li,
.djot-content ul.task-list li,
article .djot-content .task-list li,
article .entry-content .djot-content .task-list li {
    list-style: none !important;
    position: relative;
    padding-left: 1.5em;
}

.djot-content .task-list li input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1a7f37;
    pointer-events: none;
}

.djot-content .task-list li input[type="checkbox"]:checked {
    accent-color: #1a7f37;
}

.djot-content .task-list li:has(input[type="checkbox"]:checked) {
    color: #57606a;
    text-decoration: line-through;
}

/* Definition Lists */
.djot-content dl {
    margin: 1em 0;
}

.djot-content dt {
    font-weight: 600;
    margin-top: 1em;
}

.djot-content dt:first-child {
    margin-top: 0;
}

.djot-content dd {
    margin-left: 2em;
    margin-bottom: 0.5em;
}

.djot-content dd p {
    margin: 0.5em 0;
}

.djot-content dd p:first-child {
    margin-top: 0;
}

/* Tables */
.djot-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.djot-content th {
    font-weight: 600;
}

/* Images */
.djot-content img {
    max-width: 100%;
    height: auto;
}

/* Figures and Captions */
.djot-content figure {
    margin: 1.5em 0;
    padding: 0;
}

.djot-content figure img {
    display: block;
    margin: 0 auto;
}

.djot-content figure blockquote {
    margin: 0;
}

.djot-content figcaption {
    margin-top: 0.75em;
    padding: 0 0.5em;
    font-size: 0.875em;
    text-align: center;
    font-style: italic;
}

/* Blockquote with attribution (figcaption after blockquote) */
.djot-content figure > blockquote + figcaption {
    text-align: right;
    font-style: normal;
    margin-top: 0.5em;
}

.djot-content figure > blockquote + figcaption::before {
    content: "— ";
}

/* Table captions */
.djot-content table caption {
    caption-side: bottom;
    padding: 0.75em 0.5em;
    font-size: 0.875em;
    text-align: center;
    font-style: italic;
}

/* Video/Media Embeds */
.wpdjot-embed {
    margin: 1.5em 0;
}

.wpdjot-embed iframe {
    max-width: 100%;
    border-radius: 4px;
}

figure.wpdjot-embed figcaption {
    margin-top: 0.75em;
    font-size: 0.875em;
    text-align: center;
    font-style: italic;
}

/* Table of Contents */
.wpdjot-toc {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 1.5em;
}

.wpdjot-toc summary {
    padding: 0.75em 1.5em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.wpdjot-toc summary::before {
    content: "▶";
    font-size: 0.7em;
    transition: transform 0.2s ease;
}

.wpdjot-toc[open] summary::before {
    transform: rotate(90deg);
}

.wpdjot-toc summary::-webkit-details-marker {
    display: none;
}

.wpdjot-toc > ul,
.wpdjot-toc > ol {
    margin: 0;
    padding: 0 1.5em 1em;
}

.wpdjot-toc ul,
.wpdjot-toc ol {
    margin: 0;
    padding-left: 1.5em;
}

.wpdjot-toc li {
    margin: 0.25em 0;
    line-height: 1.4;
}

.wpdjot-toc a {
    color: inherit;
    text-decoration: none;
}

.wpdjot-toc a:hover {
    text-decoration: underline;
    color: #0066cc;
}

/* Heading Permalinks */
.djot-content .permalink-wrapper {
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: 0.3em;
}

.djot-content section:hover > h1 .permalink-wrapper,
.djot-content section:hover > h2 .permalink-wrapper,
.djot-content section:hover > h3 .permalink-wrapper,
.djot-content section:hover > h4 .permalink-wrapper,
.djot-content section:hover > h5 .permalink-wrapper,
.djot-content section:hover > h6 .permalink-wrapper {
    opacity: 1;
}

.djot-content .wpdjot-permalink {
    color: #57606a;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}

.djot-content .wpdjot-permalink:hover {
    color: #0969da;
    text-decoration: none;
}

/* Footnotes */
.djot-content .footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    text-decoration: none;
}

.djot-content .footnotes {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #d0d7de;
    font-size: 0.875em;
}

.djot-content .footnotes ol {
    padding-left: 1.5em;
}

/* Math */
.djot-content .math {
    font-family: "Computer Modern", serif;
}

/* Div containers with classes */
.djot-content .note,
.djot-content .warning,
.djot-content .tip,
.djot-content .danger,
.djot-content .info {
    padding: 1em;
    border-radius: 6px;
    margin: 1em 0;
}

.djot-content .note {
    background-color: #ddf4ff;
    border-left: 4px solid #0969da;
}

.djot-content .warning {
    background-color: #fff8c5;
    border-left: 4px solid #bf8700;
}

.djot-content .tip {
    background-color: #dafbe1;
    border-left: 4px solid #1a7f37;
}

.djot-content .danger {
    background-color: #ffebe9;
    border-left: 4px solid #cf222e;
}

.djot-content .info {
    background-color: #f6f8fa;
    border-left: 4px solid #57606a;
}

/* Emphasis and Strong */
.djot-content em {
    font-style: italic;
}

.djot-content strong {
    font-weight: 600;
}

/* Highlighted / Mark - GitHub style yellow */
.djot-content mark {
    background-color: #fff8c5;
    color: inherit;
}

/* Superscript and Subscript */
.djot-content sup {
    font-size: 0.75em;
    vertical-align: super;
}

.djot-content sub {
    font-size: 0.75em;
    vertical-align: sub;
}

/* Abbreviations */
.djot-content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Keyboard Input */
.djot-content kbd {
    display: inline-block;
    padding: 0.2em 0.4em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85em;
    line-height: 1;
    color: #24292f;
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 #d0d7de;
}

/* Definitions */
.djot-content dfn {
    font-style: italic;
}

.djot-content dfn[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Comment Container */
.djot-comment-container {
    margin-bottom: 0;
}

/* Comment Tabs */
.djot-comment-tabs {
    display: flex;
    gap: 0;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 0;
}

.djot-tab {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #57606a !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.djot-tab:hover,
.djot-tab:focus {
    color: #24292f !important;
    background: rgba(0, 0, 0, 0.05) !important;
    outline: none;
    box-shadow: none !important;
}

.djot-tab.active {
    color: #24292f !important;
    background: transparent !important;
    border-bottom-color: #fd8c73 !important;
}

.djot-tab.active:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Comment Toolbar */
.djot-comment-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    margin-bottom: 0;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
}

.djot-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: #24292f;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.djot-toolbar-btn:hover,
.djot-comment-toolbar .djot-toolbar-btn:hover {
    color: #24292f;
    background: #f3f4f6;
    border-color: #1f2328;
}

.djot-toolbar-btn:active {
    background: #ebecf0;
}

.djot-toolbar-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 28px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: #57606a;
    text-decoration: none;
    border-radius: 4px;
}

.djot-toolbar-help:hover {
    color: #0969da;
    background: rgba(9, 105, 218, 0.1);
}

/* Make textarea connect with toolbar */
.djot-comment-container + #comment,
.djot-comment-container + textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

/* Preview Pane */
.djot-preview-pane {
    min-height: 150px;
    padding: 12px;
    background: #fff;
    border: 1px solid #d0d7de;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.djot-preview-empty,
.djot-preview-loading,
.djot-preview-error {
    color: #57606a;
    font-style: italic;
    margin: 0;
}

.djot-preview-error {
    color: #cf222e;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .djot-comment-tabs {
        background: #161b22;
        border-color: #30363d;
    }

    .djot-tab {
        color: #8b949e !important;
    }

    .djot-tab:hover,
    .djot-tab:focus {
        color: #c9d1d9 !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .djot-tab.active {
        color: #c9d1d9 !important;
        background: transparent !important;
    }

    .djot-tab.active:hover {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .djot-comment-toolbar {
        background: #161b22;
        border-color: #30363d;
    }

    .djot-preview-pane {
        background: #0d1117;
        border-color: #30363d;
    }

    .djot-preview-empty,
    .djot-preview-loading {
        color: #8b949e;
    }

    .djot-preview-error {
        color: #f85149;
    }

    .djot-toolbar-btn {
        color: #c9d1d9;
        background: #21262d;
        border-color: #30363d;
    }

    .djot-toolbar-btn:hover {
        background: #30363d;
        border-color: #8b949e;
    }

    .djot-toolbar-help {
        color: #8b949e;
    }

    .djot-content pre {
        background-color: #161b22;
    }

    .djot-content code {
        background-color: rgba(110, 118, 129, 0.4);
    }

    .djot-content .note {
        background-color: rgba(56, 139, 253, 0.15);
    }

    .djot-content .warning {
        background-color: rgba(187, 128, 9, 0.15);
    }

    .djot-content .tip {
        background-color: rgba(46, 160, 67, 0.15);
    }

    .djot-content .danger {
        background-color: rgba(248, 81, 73, 0.15);
    }

    .djot-content .info {
        background-color: rgba(139, 148, 158, 0.15);
    }

    .djot-content mark {
        background-color: rgba(187, 128, 9, 0.3);
        color: inherit;
    }

    .djot-content kbd {
        color: #c9d1d9;
        background-color: #21262d;
        border-color: #30363d;
        box-shadow: inset 0 -1px 0 #30363d;
    }

    .djot-content .task-list li input[type="checkbox"] {
        accent-color: #3fb950;
    }

    .djot-content .task-list li input[type="checkbox"]:checked {
        accent-color: #3fb950;
    }

    .djot-content .task-list li:has(input[type="checkbox"]:checked) {
        color: #8b949e;
    }

    .wpdjot-toc {
        background: #161b22;
        border-color: #30363d;
        color: #c9d1d9;
    }

    .wpdjot-toc a:hover {
        color: #58a6ff;
    }

    .djot-content .wpdjot-permalink {
        color: #8b949e;
    }

    .djot-content .wpdjot-permalink:hover {
        color: #58a6ff;
    }
}

/* ==========================================================================
   Code Groups (Tabbed Code Blocks)
   ========================================================================== */

.djot-content .code-group {
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    overflow: hidden;
}

.djot-content .code-group-radio {
    display: none;
}

.djot-content .code-group-label {
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #f6f8fa;
    border-bottom: 2px solid transparent;
    font-size: 0.875em;
    font-weight: 500;
    color: #57606a;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.djot-content .code-group-label:hover {
    color: #24292f;
    background: #f3f4f6;
}

.djot-content .code-group-radio:checked + .code-group-label {
    color: #24292f;
    border-bottom-color: #fd8c73;
    background: #fff;
}

.djot-content .code-group-panel {
    display: none;
    width: 100%;
    order: 1;
}

.djot-content .code-group-panel pre {
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid #d0d7de;
}

.djot-content .code-group-radio:nth-of-type(1):checked ~ .code-group-panel:nth-of-type(1),
.djot-content .code-group-radio:nth-of-type(2):checked ~ .code-group-panel:nth-of-type(2),
.djot-content .code-group-radio:nth-of-type(3):checked ~ .code-group-panel:nth-of-type(3),
.djot-content .code-group-radio:nth-of-type(4):checked ~ .code-group-panel:nth-of-type(4),
.djot-content .code-group-radio:nth-of-type(5):checked ~ .code-group-panel:nth-of-type(5) {
    display: block;
}

/* ==========================================================================
   Tabs (General Tabbed Content)
   ========================================================================== */

.djot-content .tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    overflow: hidden;
}

.djot-content .tabs-radio {
    display: none;
}

.djot-content .tabs-label {
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #f6f8fa;
    border-bottom: 2px solid transparent;
    font-size: 0.875em;
    font-weight: 500;
    color: #57606a;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.djot-content .tabs-label:hover {
    color: #24292f;
    background: #f3f4f6;
}

.djot-content .tabs-radio:checked + .tabs-label {
    color: #24292f;
    border-bottom-color: #fd8c73;
    background: #fff;
}

.djot-content .tabs-panel {
    display: none;
    width: 100%;
    order: 1;
    padding: 1rem 1.5rem;
    border-top: 1px solid #d0d7de;
    background: #fff;
}

.djot-content .tabs-panel > :first-child {
    margin-top: 0;
}

.djot-content .tabs-panel > :last-child {
    margin-bottom: 0;
}

.djot-content .tabs-radio:nth-of-type(1):checked ~ .tabs-panel:nth-of-type(1),
.djot-content .tabs-radio:nth-of-type(2):checked ~ .tabs-panel:nth-of-type(2),
.djot-content .tabs-radio:nth-of-type(3):checked ~ .tabs-panel:nth-of-type(3),
.djot-content .tabs-radio:nth-of-type(4):checked ~ .tabs-panel:nth-of-type(4),
.djot-content .tabs-radio:nth-of-type(5):checked ~ .tabs-panel:nth-of-type(5) {
    display: block;
}

/* Dark mode for code groups and tabs */
@media (prefers-color-scheme: dark) {
    .djot-content .code-group {
        border-color: #30363d;
    }

    .djot-content .code-group-label {
        background: #161b22;
        color: #8b949e;
    }

    .djot-content .code-group-label:hover {
        color: #c9d1d9;
        background: #21262d;
    }

    .djot-content .code-group-radio:checked + .code-group-label {
        color: #c9d1d9;
        background: #0d1117;
    }

    .djot-content .code-group-panel pre {
        border-top-color: #30363d;
    }

    .djot-content .tabs {
        border-color: #30363d;
    }

    .djot-content .tabs-label {
        background: #161b22;
        color: #8b949e;
    }

    .djot-content .tabs-label:hover {
        color: #c9d1d9;
        background: #21262d;
    }

    .djot-content .tabs-radio:checked + .tabs-label {
        color: #c9d1d9;
        background: #0d1117;
    }

    .djot-content .tabs-panel {
        border-top-color: #30363d;
        background: #0d1117;
    }
}