/**
 * PinkDocs Blocks Frontend Styles
 * Styles for blocks on the frontend with dark/light mode and skeleton loading
 *
 * CSS ISOLATION STRATEGY:
 * -----------------------
 * All PinkDocs content is wrapped in .pinkdocs-docs-root for CSS isolation from theme styles.
 * This file loads at wp_enqueue_scripts priority 20 (after theme styles at priority 10),
 * ensuring PinkDocs styles win on equal specificity due to cascade order.
 *
 * Key principles:
 * 1. All .pinkdocs-* selectors are descendants of .pinkdocs-docs-root
 * 2. CSS variables are defined on :root in templates (KB-specific settings) and cascade to all descendants
 * 3. Typography normalization is scoped to prevent theme bleed-through
 * 4. No reliance on !important except for critical overrides
 */

/* ==========================================================================
   CSS ISOLATION: Scoped Typography Normalization
   Ensures consistent rendering across block and classic themes
   ========================================================================== */

.pinkdocs-docs-root {
    /* Base typography */
    font-family: var(--pinkdocs-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary, #111827);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scoped heading normalization */
.pinkdocs-docs-root h1,
.pinkdocs-docs-root h2,
.pinkdocs-docs-root h3,
.pinkdocs-docs-root h4,
.pinkdocs-docs-root h5,
.pinkdocs-docs-root h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, #111827);
}

/* Scoped paragraph normalization */
.pinkdocs-docs-root p {
    margin-top: 0;
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Scoped link normalization */
.pinkdocs-docs-root a {
    color: var(--brand-color, var(--pinkdocs-brand-color, #3b82f6));
    text-decoration: none;
    transition: color 0.2s ease;
}

.pinkdocs-docs-root a:hover {
    text-decoration: none;
}

/* Scoped list normalization */
.pinkdocs-docs-root ul,
.pinkdocs-docs-root ol {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.pinkdocs-docs-root li {
    margin-bottom: 0.25em;
    line-height: 1.6;
}

/* Scoped button normalization */
.pinkdocs-docs-root button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Filter buttons: override inherited font-size so template size (13px) wins */
.pinkdocs-docs-root .pinkdocs-filter-btn {
    font-size: 13px;
}

/* Scoped image normalization */
.pinkdocs-docs-root img {
    max-width: 100%;
    height: auto;
}

/* Dark mode normalization */
.pinkdocs-docs-root[data-theme="dark"],
[data-theme="dark"] .pinkdocs-docs-root,
.pinkdocs-docs-root .pinkdocs-wrapper[data-theme="dark"] {
    color: var(--text-primary, #f3f4f6);
}

.pinkdocs-docs-root[data-theme="dark"] h1,
.pinkdocs-docs-root[data-theme="dark"] h2,
.pinkdocs-docs-root[data-theme="dark"] h3,
.pinkdocs-docs-root[data-theme="dark"] h4,
.pinkdocs-docs-root[data-theme="dark"] h5,
.pinkdocs-docs-root[data-theme="dark"] h6,
[data-theme="dark"] .pinkdocs-docs-root h1,
[data-theme="dark"] .pinkdocs-docs-root h2,
[data-theme="dark"] .pinkdocs-docs-root h3,
[data-theme="dark"] .pinkdocs-docs-root h4,
[data-theme="dark"] .pinkdocs-docs-root h5,
[data-theme="dark"] .pinkdocs-docs-root h6 {
    color: var(--text-primary, #f3f4f6);
}

/* ==========================================================================
   PinkDocs Component Styles
   ========================================================================== */

/* Hero Section Block */
.pinkdocs-hero-section {
    --brand-color: var(--pinkdocs-brand-color, #3b82f6);
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    transition: all 0.3s ease;
    text-align: center;
    z-index: 1;
    padding: 80px 24px;
    margin: 40px 0;
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pinkdocs-hero-section .pinkdocs-hero-content {
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Light mode background - using rgba with brand color */
.pinkdocs-hero-section,
div.pinkdocs-hero-section,
.pinkdocs-docs-root .pinkdocs-hero-section,
.pinkdocs-wrapper .pinkdocs-hero-section {
    background: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.08) !important;
}

/* Dark mode background - higher opacity */
[data-theme="dark"] .pinkdocs-hero-section,
[data-theme="dark"] div.pinkdocs-hero-section,
[data-theme="dark"] .pinkdocs-docs-root .pinkdocs-hero-section,
[data-theme="dark"] .pinkdocs-wrapper .pinkdocs-hero-section,
.pinkdocs-docs-root[data-theme="dark"] .pinkdocs-hero-section,
.pinkdocs-wrapper[data-theme="dark"] .pinkdocs-hero-section {
    background: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.15) !important;
}

.pinkdocs-hero-search-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    margin: 20px 0;
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Light mode background */
.pinkdocs-hero-search-section,
div.pinkdocs-hero-search-section,
.pinkdocs-docs-root .pinkdocs-hero-search-section,
.pinkdocs-wrapper .pinkdocs-hero-search-section {
    background: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.08) !important;
}

/* Dark mode background */
[data-theme="dark"] .pinkdocs-hero-search-section,
[data-theme="dark"] div.pinkdocs-hero-search-section,
[data-theme="dark"] .pinkdocs-docs-root .pinkdocs-hero-search-section,
[data-theme="dark"] .pinkdocs-wrapper .pinkdocs-hero-search-section,
.pinkdocs-docs-root[data-theme="dark"] .pinkdocs-hero-search-section,
.pinkdocs-wrapper[data-theme="dark"] .pinkdocs-hero-search-section {
    background: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.15) !important;
}

.pinkdocs-hero-search-section h1 {
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    color: var(--text-primary, #111827) !important;
}

.pinkdocs-hero-search-section p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--text-secondary, #6b7280) !important;
}

.pinkdocs-hero-search-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.pinkdocs-hero-search-trigger {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
}

.pinkdocs-hero-search-trigger svg {
    color: #9ca3af;
    margin-right: 12px;
    flex-shrink: 0;
}

.pinkdocs-hero-search-placeholder {
    color: #9ca3af;
    font-size: 16px;
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pinkdocs-hero-search-shortcut {
    font-size: 12px;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
    padding: 2px 6px;
    font-weight: 500;
    flex-shrink: 0;
}

/* Dark mode styles for hero search */
[data-theme="dark"] .pinkdocs-hero-search-trigger {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pinkdocs-hero-search-trigger svg {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .pinkdocs-hero-search-placeholder {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .pinkdocs-hero-search-shortcut {
    color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Hero with Image Block */
.pinkdocs-hero-with-image,
.pinkdocs-hero-section:has(.pinkdocs-hero-image) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

.pinkdocs-hero-with-image .pinkdocs-hero-content,
.pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-content {
    min-width: 0;
    box-sizing: border-box;
}

.pinkdocs-hero-with-image .pinkdocs-hero-image,
.pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-image {
    min-width: 0;
    box-sizing: border-box;
}

.pinkdocs-hero-image {
    position: relative;
    padding: 80px 24px;
    margin: 40px 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.pinkdocs-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Hero Code Block - hero left + multi-language code right */

.pinkdocs-hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
}

.pinkdocs-hero-section h1 {
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 20px !important;
    margin-top: 0 !important;
    color: var(--text-primary, #111827) !important;
    transition: color 0.3s ease;
}

.pinkdocs-hero-section p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin: 0 auto 40px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--text-secondary, #6b7280) !important;
    transition: color 0.3s ease;
    box-sizing: border-box;
}

/* Version tag styling */
.pinkdocs-version-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 16px 8px 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: calc(var(--border-roundness, 8px) * 3) !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.2) !important;
    transition: all 0.3s ease !important;
}

.pinkdocs-version-tag:hover {
    background-color: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.15) !important;
    border-color: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.3) !important;
}

.pinkdocs-version-number {
    background: var(--pinkdocs-brand-color, #3b82f6) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: calc(var(--border-roundness, 8px) * 2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.pinkdocs-version-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary, #111827) !important;
}

[data-theme="dark"] .pinkdocs-version-tag {
    background-color: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.15) !important;
    border-color: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.25) !important;
}

[data-theme="dark"] .pinkdocs-version-tag:hover {
    background-color: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.2) !important;
    border-color: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.35) !important;
}

[data-theme="dark"] .pinkdocs-version-number {
    background: var(--pinkdocs-brand-color, #3b82f6) !important;
    color: #fff !important;
}

[data-theme="dark"] .pinkdocs-version-title {
    color: #fff !important;
}

/* Hero with image: text and image side by side – reduced vertical padding (no inline override) */
.pinkdocs-hero-with-image,
.pinkdocs-hero-section:has(.pinkdocs-hero-image) {
    flex-direction: row !important;
    gap: 40px !important;
    padding: 14px 24px !important;
    margin: 10px 0 !important;
}

.pinkdocs-hero-with-image .pinkdocs-hero-content {
    flex: 1;
    max-width: 550px;
    text-align: center;
}

.pinkdocs-hero-with-image .pinkdocs-hero-image {
    flex: 1;
    max-width: 500px;
}

.pinkdocs-hero-with-image .pinkdocs-hero-image img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .pinkdocs-hero-with-image .pinkdocs-hero-image img {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pinkdocs-hero-with-image h1 {
    font-size: 36px;
}

.pinkdocs-hero-with-image p {
    margin-bottom: 28px;
    max-width: 700px;
    box-sizing: border-box;
}

/* Version Tag - Pill Style with Brand Color */
.pinkdocs-version-tag {
    --brand-color: var(--pinkdocs-brand-color, #3b82f6);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    background-color: color-mix(in srgb, var(--brand-color) 10%, white);
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
    border: 1px solid color-mix(in srgb, var(--brand-color) 20%, transparent);
    transition: all 0.3s ease;
}

.pinkdocs-version-tag:hover {
    background-color: color-mix(in srgb, var(--brand-color) 15%, white);
    border-color: color-mix(in srgb, var(--brand-color) 30%, transparent);
}

.pinkdocs-version-number {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: var(--brand-color);
    color: var(--pinkdocs-brand-text-color, #ffffff);
    border-radius: calc(var(--border-roundness, 8px) * 1.75);
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pinkdocs-version-title {
    color: color-mix(in srgb, var(--brand-color) 100%, black 20%);
    font-weight: 600;
    white-space: nowrap;
}

.pinkdocs-version-arrow {
    color: var(--brand-color);
    opacity: 0.8;
    flex-shrink: 0;
    margin-left: 2px;
}

[data-theme="dark"] .pinkdocs-version-tag {
    background-color: color-mix(in srgb, var(--brand-color) 15%, transparent);
    border-color: color-mix(in srgb, var(--brand-color) 25%, transparent);
}

[data-theme="dark"] .pinkdocs-version-tag:hover {
    background-color: color-mix(in srgb, var(--brand-color) 20%, transparent);
    border-color: color-mix(in srgb, var(--brand-color) 35%, transparent);
}

[data-theme="dark"] .pinkdocs-version-number {
    background-color: var(--brand-color);
    color: var(--pinkdocs-brand-text-color, #ffffff);
}

[data-theme="dark"] .pinkdocs-version-title {
    color: color-mix(in srgb, var(--brand-color) 100%, white 30%);
}

[data-theme="dark"] .pinkdocs-version-arrow {
    color: color-mix(in srgb, var(--brand-color) 100%, white 20%);
    opacity: 0.85;
}

/* Dark Mode Text Colors - Using Site Theme */
[data-theme="dark"] .pinkdocs-hero-section .pinkdocs-hero-content h1,
[data-theme="dark"] .pinkdocs-hero-section h1,
[data-theme="dark"] div.pinkdocs-hero-section h1 {
    color: #ffffff !important;
}

[data-theme="dark"] .pinkdocs-hero-section .pinkdocs-hero-content p,
[data-theme="dark"] .pinkdocs-hero-section p,
[data-theme="dark"] div.pinkdocs-hero-section p {
    color: #e5e7eb !important;
}

/* Light Mode Text Colors - Using Site Theme */
[data-theme="light"] .pinkdocs-hero-section .pinkdocs-hero-content h1,
[data-theme="light"] .pinkdocs-hero-section h1,
[data-theme="light"] div.pinkdocs-hero-section h1 {
    color: #111827 !important;
}

[data-theme="light"] .pinkdocs-hero-section .pinkdocs-hero-content p,
[data-theme="light"] .pinkdocs-hero-section p,
[data-theme="light"] div.pinkdocs-hero-section p {
    color: #6b7280 !important;
}

/* No block-level skeleton animations - handled by page template */

/* No borders - consistent with page design */

/* Button Styles - Solid Brand Color */
.pinkdocs-hero-button {
    --brand-color: var(--pinkdocs-brand-color, #3b82f6);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    background: var(--brand-color) !important;
    color: #ffffff !important;
    border-radius: calc(var(--border-roundness, 8px) * 1.5) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.3) !important;
}

.pinkdocs-hero-button-solid {
    background: var(--pinkdocs-brand-color, #3b82f6) !important;
}

/* Shine animation effect */
.pinkdocs-hero-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.pinkdocs-hero-button:hover::before {
    left: 100% !important;
}

.pinkdocs-hero-button:hover {
    transform: translateY(-2px) !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.4) !important;
    filter: brightness(1.1) !important;
}

.pinkdocs-hero-button:active {
    transform: translateY(0) !important;
}

/* Responsive Design - Hero blocks mobile first */
@media (max-width: 1024px) {
    .pinkdocs-hero-section {
        margin: 16px 0;
    }

    .pinkdocs-hero-with-image,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) {
        margin: 12px 0 !important;
    }

    .pinkdocs-hero-search-section {
        padding: 48px 20px !important;
    }
}

@media (max-width: 768px) {
    .pinkdocs-hero-section {
        padding: 48px 16px !important;
        margin: 12px 0;
        flex-direction: column !important;
        gap: 28px !important;
    }

    .pinkdocs-hero-with-image,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) {
        padding: 24px 16px !important;
        margin: 12px 0 !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .pinkdocs-hero-with-image .pinkdocs-hero-content,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-content {
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    .pinkdocs-hero-with-image .pinkdocs-hero-image,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-image {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .pinkdocs-hero-with-image .pinkdocs-hero-image img,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .pinkdocs-hero-with-image p,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) p {
        max-width: 100% !important;
    }

    .pinkdocs-hero-content {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pinkdocs-hero-section .pinkdocs-hero-content {
        padding: 0 4px !important;
    }

    .pinkdocs-hero-image {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .pinkdocs-hero-section h1,
    .pinkdocs-hero-search-section h1,
    .pinkdocs-hero-section .pinkdocs-hero-content h1 {
        font-size: 35px !important;
        margin-bottom: 16px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .pinkdocs-hero-with-image h1 {
        font-size: 28px !important;
    }

    .pinkdocs-hero-section p,
    .pinkdocs-hero-search-section p {
        font-size: 16px !important;
        margin-bottom: 24px !important;
        max-width: 100% !important;
    }

    .pinkdocs-hero-search-section {
        padding: 40px 16px !important;
        gap: 20px;
    }

    .pinkdocs-hero-search-section .pinkdocs-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    .pinkdocs-hero-search-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .pinkdocs-hero-search-trigger {
        padding: 12px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pinkdocs-hero-search-trigger svg {
        width: 20px !important;
        height: 20px !important;
        margin-right: 10px !important;
    }

    .pinkdocs-hero-search-placeholder {
        font-size: 15px !important;
    }

    .pinkdocs-hero-search-shortcut {
        font-size: 11px !important;
        padding: 2px 5px !important;
    }

    .pinkdocs-version-tag {
        flex-wrap: wrap !important;
        padding: 6px 12px 6px 6px !important;
        gap: 8px !important;
    }

    .pinkdocs-version-number {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }

    .pinkdocs-version-title {
        font-size: 13px !important;
    }

    .pinkdocs-hero-button {
        padding: 12px 28px !important;
        font-size: 15px !important;
    }

    .skeleton-line:first-of-type {
        width: 80% !important;
        height: 36px !important;
    }
}

@media (max-width: 480px) {
    .pinkdocs-hero-section {
        padding: 32px 12px !important;
        border-radius: calc(var(--border-roundness, 8px) * 1.5) !important;
        margin: 8px 0;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .pinkdocs-hero-with-image,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) {
        padding: 20px 12px !important;
        margin: 10px 0 !important;
        gap: 16px !important;
    }

    .pinkdocs-hero-with-image .pinkdocs-hero-content,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-content {
        padding: 0 2px !important;
    }

    .pinkdocs-hero-with-image .pinkdocs-hero-image,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-image {
        width: 100% !important;
    }

    .pinkdocs-hero-with-image .pinkdocs-hero-image img,
    .pinkdocs-hero-section:has(.pinkdocs-hero-image) .pinkdocs-hero-image img {
        border-radius: calc(var(--border-roundness, 8px) * 1.25);
    }

    .pinkdocs-hero-search-section {
        padding: 24px 12px !important;
        border-radius: calc(var(--border-roundness, 8px) * 1.5) !important;
        gap: 16px !important;
    }

    .pinkdocs-hero-search-section .pinkdocs-hero-content {
        padding: 0 2px !important;
    }

    .pinkdocs-hero-search-container {
        padding: 0 !important;
    }

    .pinkdocs-hero-content {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .pinkdocs-hero-section .pinkdocs-hero-content {
        padding: 0 2px !important;
    }

    .pinkdocs-hero-image {
        max-width: 100% !important;
    }

    .pinkdocs-hero-section h1,
    .pinkdocs-hero-search-section h1,
    .pinkdocs-hero-section .pinkdocs-hero-content h1 {
        font-size: 35px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .pinkdocs-hero-with-image h1 {
        font-size: 22px !important;
    }

    .pinkdocs-hero-section p,
    .pinkdocs-hero-search-section p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
    }

    .pinkdocs-hero-search-trigger {
        padding: 10px 14px !important;
    }

    .pinkdocs-hero-search-placeholder {
        font-size: 14px !important;
        white-space: normal !important;
    }

    .pinkdocs-hero-search-shortcut {
        display: none !important;
    }

    .pinkdocs-version-tag {
        padding: 6px 10px 6px 6px !important;
        margin-bottom: 16px !important;
    }

    .pinkdocs-version-number {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .pinkdocs-version-title {
        font-size: 12px !important;
    }

    .pinkdocs-hero-button {
        padding: 12px 24px !important;
        font-size: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .skeleton-line:first-of-type {
        width: 90% !important;
        height: 28px !important;
    }

    .skeleton-button {
        width: 100% !important;
    }
}

/* No scroll animations - simplified */

/* Feature Cards Block */

.pinkdocs-icon-center {
    margin-left: auto;
    margin-right: auto;
}

/* Alignment styles */

/* Responsive Design */

/* Features Grid Block */

/* Responsive Design */

/* Docs Category Grid */
.pinkdocs-docs-category-grid-wrapper {
    width: 100%;
    margin: 40px 0;
}

.pinkdocs-docs-category-section-heading {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    text-align: center;
    color: var(--text-primary, #09090b);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-docs-category-section-heading {
    color: #ffffff;
}

.pinkdocs-docs-category-section-description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-secondary, #71717a);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-docs-category-section-description {
    color: var(--text-secondary, #a1a1aa);
}

.pinkdocs-docs-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pinkdocs-docs-category-card {
    padding: 28px 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: calc(var(--border-roundness, 8px) * 2);
    transition: all 0.3s ease;
    background-color: rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .pinkdocs-docs-category-card {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
}

.pinkdocs-docs-category-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .pinkdocs-docs-category-card {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

[data-theme="light"] .pinkdocs-docs-category-card:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Docs Category Grid */
.pinkdocs-docs-category-grid-wrapper {
    width: 100%;
    margin: 40px 0;
}

.pinkdocs-docs-category-section-heading {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    text-align: center;
    color: var(--text-primary, #09090b);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-docs-category-section-heading {
    color: #ffffff;
}

.pinkdocs-docs-category-section-description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-secondary, #71717a);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-docs-category-section-description {
    color: var(--text-secondary, #a1a1aa);
}

.pinkdocs-docs-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pinkdocs-docs-category-card {
    padding: 28px 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: calc(var(--border-roundness, 8px) * 2);
    transition: all 0.3s ease;
    background-color: rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .pinkdocs-docs-category-card {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
}

.pinkdocs-docs-category-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .pinkdocs-docs-category-card {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

[data-theme="light"] .pinkdocs-docs-category-card:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .pinkdocs-docs-category-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.5);
}

.pinkdocs-docs-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pinkdocs-docs-category-icon {
    --brand-color: var(--pinkdocs-brand-color, #3b82f6);
    width: 48px;
    height: 48px;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--brand-color);
    transition: all 0.3s ease;
}

.pinkdocs-docs-category-card:hover .pinkdocs-docs-category-icon {
    background-color: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}

[data-theme="light"] .pinkdocs-docs-category-icon {
    background-color: color-mix(in srgb, var(--brand-color) 8%, transparent);
}

[data-theme="light"] .pinkdocs-docs-category-card:hover .pinkdocs-docs-category-icon {
    background-color: color-mix(in srgb, var(--brand-color) 12%, transparent);
}

.pinkdocs-docs-category-icon svg {
    width: 20px;
    height: 20px;
}

.pinkdocs-docs-category-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--text-primary, #09090b);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-docs-category-title {
    color: var(--text-primary, #ffffff);
}

.pinkdocs-docs-category-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.pinkdocs-docs-category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
    color: var(--text-secondary, #71717a);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease;
}

[data-theme="dark"] .pinkdocs-docs-category-item {
    color: var(--text-secondary, #a1a1aa);
}

.pinkdocs-docs-category-item:hover {
    background: var(--bg-secondary, #f4f4f5);
    color: var(--pinkdocs-brand-color, #3b82f6);
}

[data-theme="dark"] .pinkdocs-docs-category-item:hover {
    background: var(--bg-secondary, #27272a);
}

.pinkdocs-docs-category-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.pinkdocs-docs-category-item:hover svg {
    opacity: 1;
}

.pinkdocs-docs-category-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pinkdocs-docs-category-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary, #71717a);
    font-size: 13px;
    opacity: 0.7;
}

[data-theme="dark"] .pinkdocs-docs-category-empty {
    color: var(--text-secondary, #a1a1aa);
}

.pinkdocs-docs-category-view-more {
    --brand-color: var(--pinkdocs-brand-color, #3b82f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #09090b);
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--bg-secondary, #f4f4f5);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
}

[data-theme="dark"] .pinkdocs-docs-category-view-more {
    background: var(--bg-secondary, #27272a);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #ffffff);
}

.pinkdocs-docs-category-view-more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.pinkdocs-docs-category-view-more:hover {
    background: var(--brand-color);
    color: var(--pinkdocs-brand-text-color, #ffffff);
    border-color: var(--brand-color);
}

.pinkdocs-docs-category-view-more:hover svg {
    transform: translateX(4px);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pinkdocs-docs-category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Code Block Styles with Line Numbers */
.wp-block-code,
pre.wp-block-code,
.pinkdocs-code-block {
    position: relative;
    background: #1e1e1e !important;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    padding: 0 !important;
    margin: 32px 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .wp-block-code,
[data-theme="light"] pre.wp-block-code,
[data-theme="light"] .pinkdocs-code-block {
    background: #f6f8fa !important;
    border-color: #e1e4e8;
}

.wp-block-code code,
pre.wp-block-code code {
    display: block;
    padding: 20px 20px 20px 56px !important;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #d4d4d4 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

[data-theme="light"] .wp-block-code code,
[data-theme="light"] pre.wp-block-code code {
    color: #24292e !important;
}

/* PinkDocs code blocks use .pinkdocs-code-content (not pre/code) */
.pinkdocs-code-block .pinkdocs-code-content,
.pinkdocs-code-block pre code {
    display: block;
    padding: 20px 20px 20px 56px !important;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #d4d4d4 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

/* Reset pre styling inside pinkdocs blocks */
.pinkdocs-code-block pre {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-content,
[data-theme="light"] .pinkdocs-code-block pre code {
    color: #24292e !important;
}

/* Line numbers container */
.pinkdocs-line-numbers {
    position: absolute;
    top: 0;
    /* Let specific blocks position it */
    left: 0;
    width: 44px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #1e1e1e !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    /* Center align numbers */
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    user-select: none;
    pointer-events: none;
    z-index: 5;
}

[data-theme="light"] .pinkdocs-line-numbers {
    /* !important: the dark default uses it, so without it the gutter stays dark in light mode */
    background: #f0f1f3 !important;
    border-right-color: #e1e4e8;
    color: #9a9aa2;
}

.pinkdocs-line-number {
    display: block;
    padding: 0;
}

.pinkdocs-docs-category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
    color: var(--text-secondary, #71717a);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease;
}

[data-theme="dark"] .pinkdocs-docs-category-item {
    color: var(--text-secondary, #a1a1aa);
}

.pinkdocs-docs-category-item:hover {
    background: var(--bg-secondary, #f4f4f5);
    color: var(--pinkdocs-brand-color, #3b82f6);
}

[data-theme="dark"] .pinkdocs-docs-category-item:hover {
    background: var(--bg-secondary, #27272a);
}

.pinkdocs-docs-category-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.pinkdocs-docs-category-item:hover svg {
    opacity: 1;
}

.pinkdocs-docs-category-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pinkdocs-docs-category-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary, #71717a);
    font-size: 13px;
    opacity: 0.7;
}

[data-theme="dark"] .pinkdocs-docs-category-empty {
    color: var(--text-secondary, #a1a1aa);
}

.pinkdocs-docs-category-view-more {
    --brand-color: var(--pinkdocs-brand-color, #3b82f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #09090b);
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--bg-secondary, #f4f4f5);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
}

[data-theme="dark"] .pinkdocs-docs-category-view-more {
    background: var(--bg-secondary, #27272a);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #ffffff);
}

.pinkdocs-docs-category-view-more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.pinkdocs-docs-category-view-more:hover {
    background: var(--brand-color);
    color: var(--pinkdocs-brand-text-color, #ffffff);
    border-color: var(--brand-color);
}

.pinkdocs-docs-category-view-more:hover svg {
    transform: translateX(4px);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pinkdocs-docs-category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Code Block Styles with Line Numbers */
.wp-block-code,
pre.wp-block-code,
.pinkdocs-code-block {
    position: relative;
    background: #1e1e1e !important;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    padding: 0 !important;
    margin: 24px 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .wp-block-code,
[data-theme="light"] pre.wp-block-code,
[data-theme="light"] .pinkdocs-code-block {
    background: #f6f8fa !important;
    border-color: #e1e4e8;
}

.wp-block-code code,
pre.wp-block-code code {
    display: block;
    padding: 20px 20px 20px 56px !important;
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #d4d4d4 !important;
    background: transparent !important;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

[data-theme="light"] .wp-block-code code,
[data-theme="light"] pre.wp-block-code code {
    color: #24292e !important;
}

/* PinkDocs code blocks use .pinkdocs-code-content (not pre/code) */
.pinkdocs-code-block .pinkdocs-code-content,
.pinkdocs-code-block pre code {
    display: block;
    padding: 20px 20px 20px 56px !important;
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #d4d4d4 !important;
    background: transparent !important;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

/* AI sidebar: force code block appearance so theme/global styles don't apply blue or wrong background */
.pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block,
.pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--border-roundness, 8px) !important;
    overflow: hidden !important;
}

.pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block .pinkdocs-code-content,
.pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block pre,
.pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block code,
.pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block .pinkdocs-code-content,
.pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block pre,
.pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block code {
    background: transparent !important;
    background-color: transparent !important;
    color: #d4d4d4 !important;
}

.pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block .token,
.pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block .token {
    background: transparent !important;
}

[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block,
[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block {
    background: #f6f8fa !important;
    background-color: #f6f8fa !important;
    border-color: #e1e4e8 !important;
}

[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block .pinkdocs-code-content,
[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block pre,
[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-answer .pinkdocs-code-block code,
[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block .pinkdocs-code-content,
[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block pre,
[data-theme="light"] .pinkdocs-ai-sidebar .pinkdocs-ai-message-content .pinkdocs-code-block code {
    background: transparent !important;
    color: #24292e !important;
}

/* Reset pre styling inside pinkdocs blocks */
.pinkdocs-code-block pre {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-content,
[data-theme="light"] .pinkdocs-code-block pre code {
    color: #24292e !important;
}

/* Filename header */
.pinkdocs-code-header {
    background: #1a1a1a;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

[data-theme="light"] .pinkdocs-code-header {
    background: #f1f3f5;
    border-bottom-color: #e1e4e8;
    color: #57606a;
}

/* Code block header buttons: isolate from theme button styles (e.g. blue background) */
.pinkdocs-code-block .pinkdocs-code-actions,
.pinkdocs-multi-lang-code-block .pinkdocs-code-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pinkdocs-code-block .pinkdocs-code-header button.pinkdocs-code-action-btn,
.pinkdocs-code-block .pinkdocs-code-actions .pinkdocs-code-action-btn,
.pinkdocs-multi-lang-code-block .pinkdocs-code-header button.pinkdocs-code-action-btn,
.pinkdocs-multi-lang-code-block .pinkdocs-code-actions .pinkdocs-code-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: calc(var(--border-roundness, 8px) * 0.625) !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: 1 !important;
}

.pinkdocs-code-block .pinkdocs-code-action-btn:hover,
.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.pinkdocs-code-block .pinkdocs-code-action-btn.copied,
.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn.copied {
    background: #10b981 !important;
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
}

.pinkdocs-code-block .pinkdocs-code-action-btn svg,
.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
}

[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-action-btn,
[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: #e1e4e8 !important;
    color: #57606a !important;
}

[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-action-btn:hover,
[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: #d0d7de !important;
    color: #24292f !important;
}

.pinkdocs-code-lang {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
    opacity: 0.8;
}

/* Syntax highlighting colors - Dark theme */
.wp-block-code .token.number,
.wp-block-code .token.constant,
.wp-block-code .token.symbol,
.wp-block-code .token.deleted {
    color: #b5cea8;
}

.pinkdocs-code-block .token.selector,
.pinkdocs-code-block .token.attr-name,
.pinkdocs-code-block .token.string,
.pinkdocs-code-block .token.char,
.pinkdocs-code-block .token.builtin,
.pinkdocs-code-block .token.inserted,
.wp-block-code .token.selector,
.wp-block-code .token.attr-name,
.wp-block-code .token.string,
.wp-block-code .token.char,
.wp-block-code .token.builtin,
.wp-block-code .token.inserted {
    color: #ce9178;
}

.pinkdocs-code-block .token.operator,
.pinkdocs-code-block .token.entity,
.pinkdocs-code-block .token.url,
.pinkdocs-code-block .language-css .token.string,
.pinkdocs-code-block .style .token.string,
.wp-block-code .token.operator,
.wp-block-code .token.entity,
.wp-block-code .token.url,
.wp-block-code .language-css .token.string,
.wp-block-code .style .token.string {
    color: #d4d4d4;
}

.pinkdocs-code-block .token.atrule,
.pinkdocs-code-block .token.attr-value,
.pinkdocs-code-block .token.keyword,
.wp-block-code .token.atrule,
.wp-block-code .token.attr-value,
.wp-block-code .token.keyword {
    color: #c586c0;
}

.pinkdocs-code-block .token.function,
.pinkdocs-code-block .token.class-name,
.wp-block-code .token.function,
.wp-block-code .token.class-name {
    color: #dcdcaa;
}

.pinkdocs-code-block .token.regex,
.pinkdocs-code-block .token.important,
.pinkdocs-code-block .token.variable,
.wp-block-code .token.regex,
.wp-block-code .token.important,
.wp-block-code .token.variable {
    color: #d16969;
}

/* Syntax highlighting colors - Light theme */
[data-theme="light"] .pinkdocs-code-block .token.comment,
[data-theme="light"] .pinkdocs-code-block .token.prolog,
[data-theme="light"] .pinkdocs-code-block .token.doctype,
[data-theme="light"] .pinkdocs-code-block .token.cdata,
[data-theme="light"] .wp-block-code .token.comment,
[data-theme="light"] .wp-block-code .token.prolog,
[data-theme="light"] .wp-block-code .token.doctype,
[data-theme="light"] .wp-block-code .token.cdata {
    color: #6a737d;
}

[data-theme="light"] .pinkdocs-code-block .token.property,
[data-theme="light"] .pinkdocs-code-block .token.tag,
[data-theme="light"] .pinkdocs-code-block .token.boolean,
[data-theme="light"] .pinkdocs-code-block .token.number,
[data-theme="light"] .pinkdocs-code-block .token.constant,
[data-theme="light"] .wp-block-code .token.property,
[data-theme="light"] .wp-block-code .token.tag,
[data-theme="light"] .wp-block-code .token.boolean,
[data-theme="light"] .wp-block-code .token.number,
[data-theme="light"] .wp-block-code .token.constant {
    color: #005cc5;
}

[data-theme="light"] .pinkdocs-code-block .token.selector,
[data-theme="light"] .pinkdocs-code-block .token.attr-name,
[data-theme="light"] .pinkdocs-code-block .token.string,
[data-theme="light"] .pinkdocs-code-block .token.char,
[data-theme="light"] .pinkdocs-code-block .token.builtin,
[data-theme="light"] .wp-block-code .token.selector,
[data-theme="light"] .wp-block-code .token.attr-name,
[data-theme="light"] .wp-block-code .token.string,
[data-theme="light"] .wp-block-code .token.char,
[data-theme="light"] .wp-block-code .token.builtin {
    color: #032f62;
}

[data-theme="light"] .pinkdocs-code-block .token.atrule,
[data-theme="light"] .pinkdocs-code-block .token.attr-value,
[data-theme="light"] .pinkdocs-code-block .token.keyword,
[data-theme="light"] .wp-block-code .token.atrule,
[data-theme="light"] .wp-block-code .token.attr-value,
[data-theme="light"] .wp-block-code .token.keyword {
    color: #d73a49;
}

[data-theme="light"] .pinkdocs-code-block .token.function,
[data-theme="light"] .pinkdocs-code-block .token.class-name,
[data-theme="light"] .wp-block-code .token.function,
[data-theme="light"] .wp-block-code .token.class-name {
    color: #6f42c1;
}

/* Scrollbar styling for code blocks */
.wp-block-code code::-webkit-scrollbar,
.pinkdocs-code-block .pinkdocs-code-content::-webkit-scrollbar,
.pinkdocs-code-block pre code::-webkit-scrollbar,
.pinkdocs-multi-lang-code-block .pinkdocs-code-content::-webkit-scrollbar,
.pinkdocs-multi-lang-code-block pre code::-webkit-scrollbar {
    height: 8px;
}

.wp-block-code code::-webkit-scrollbar-track,
.pinkdocs-code-block .pinkdocs-code-content::-webkit-scrollbar-track,
.pinkdocs-code-block pre code::-webkit-scrollbar-track,
.pinkdocs-multi-lang-code-block .pinkdocs-code-content::-webkit-scrollbar-track,
.pinkdocs-multi-lang-code-block pre code::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: calc(var(--border-roundness, 8px) * 0.5);
}

.wp-block-code code::-webkit-scrollbar-thumb,
.pinkdocs-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb,
.pinkdocs-code-block pre code::-webkit-scrollbar-thumb,
.pinkdocs-multi-lang-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb,
.pinkdocs-multi-lang-code-block pre code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: calc(var(--border-roundness, 8px) * 0.5);
}

.wp-block-code code::-webkit-scrollbar-thumb:hover,
.pinkdocs-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb:hover,
.pinkdocs-code-block pre code::-webkit-scrollbar-thumb:hover,
.pinkdocs-multi-lang-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb:hover,
.pinkdocs-multi-lang-code-block pre code::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .wp-block-code code::-webkit-scrollbar-track,
[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-content::-webkit-scrollbar-track,
[data-theme="light"] .pinkdocs-code-block pre code::-webkit-scrollbar-track,
[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-content::-webkit-scrollbar-track,
[data-theme="light"] .pinkdocs-multi-lang-code-block pre code::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .wp-block-code code::-webkit-scrollbar-thumb,
[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb,
[data-theme="light"] .pinkdocs-code-block pre code::-webkit-scrollbar-thumb,
[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb,
[data-theme="light"] .pinkdocs-multi-lang-code-block pre code::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .wp-block-code code::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .pinkdocs-code-block pre code::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-content::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .pinkdocs-multi-lang-code-block pre code::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Inline code */
code:not(.wp-block-code code):not(.pinkdocs-code-block code) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pinkdocs-brand-color, #3b82f6);
    padding: 2px 6px;
    border-radius: calc(var(--border-roundness, 8px) * 0.5);
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] code:not(.wp-block-code code):not(.pinkdocs-code-block code) {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Prism.js Theme Overrides */
.wp-block-code pre[class*="language-"] {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* PinkDocs code blocks: preserve 56px left padding for line numbers */
.pinkdocs-code-block .pinkdocs-code-content[class*="language-"],
.pinkdocs-code-block pre code[class*="language-"],
.pinkdocs-multi-lang-code-block .pinkdocs-code-content[class*="language-"],
.pinkdocs-multi-lang-code-block pre code[class*="language-"] {
    background: transparent !important;
    margin: 0 !important;
    padding: 20px 20px 20px 56px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.pinkdocs-code-block .pinkdocs-code-content[class*="language-"],
.pinkdocs-code-block pre code[class*="language-"],
.pinkdocs-multi-lang-code-block .pinkdocs-code-content[class*="language-"],
.pinkdocs-multi-lang-code-block pre code[class*="language-"],
.wp-block-code code[class*="language-"] {
    background: transparent !important;
    text-shadow: none !important;
}

[data-theme="light"] .pinkdocs-code-block .pinkdocs-code-content[class*="language-"],
[data-theme="light"] .pinkdocs-code-block pre code[class*="language-"],
[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-content[class*="language-"],
[data-theme="light"] .pinkdocs-multi-lang-code-block pre code[class*="language-"],
[data-theme="light"] .wp-block-code code[class*="language-"] {
    color: #24292e !important;
}

/* Prism token colors - Dark theme (VS Code inspired) */
.pinkdocs-code-block .token.comment,
.pinkdocs-code-block .token.prolog,
.pinkdocs-code-block .token.doctype,
.pinkdocs-code-block .token.cdata,
.pinkdocs-multi-lang-code-block .token.comment,
.pinkdocs-multi-lang-code-block .token.prolog,
.pinkdocs-multi-lang-code-block .token.doctype,
.pinkdocs-multi-lang-code-block .token.cdata {
    color: #6a9955 !important;
}

.pinkdocs-code-block .token.punctuation,
.pinkdocs-multi-lang-code-block .token.punctuation {
    color: #d4d4d4 !important;
}

.pinkdocs-code-block .token.property,
.pinkdocs-code-block .token.tag,
.pinkdocs-code-block .token.boolean,
.pinkdocs-code-block .token.number,
.pinkdocs-code-block .token.constant,
.pinkdocs-code-block .token.symbol,
.pinkdocs-multi-lang-code-block .token.property,
.pinkdocs-multi-lang-code-block .token.tag,
.pinkdocs-multi-lang-code-block .token.boolean,
.pinkdocs-multi-lang-code-block .token.number,
.pinkdocs-multi-lang-code-block .token.constant,
.pinkdocs-multi-lang-code-block .token.symbol {
    color: #b5cea8 !important;
}

.pinkdocs-code-block .token.selector,
.pinkdocs-code-block .token.attr-name,
.pinkdocs-code-block .token.string,
.pinkdocs-code-block .token.char,
.pinkdocs-code-block .token.builtin,
.pinkdocs-multi-lang-code-block .token.selector,
.pinkdocs-multi-lang-code-block .token.attr-name,
.pinkdocs-multi-lang-code-block .token.string,
.pinkdocs-multi-lang-code-block .token.char,
.pinkdocs-multi-lang-code-block .token.builtin {
    color: #ce9178 !important;
}

.pinkdocs-code-block .token.operator,
.pinkdocs-code-block .token.entity,
.pinkdocs-code-block .token.url,
.pinkdocs-multi-lang-code-block .token.operator,
.pinkdocs-multi-lang-code-block .token.entity,
.pinkdocs-multi-lang-code-block .token.url {
    color: #d4d4d4 !important;
}

.pinkdocs-code-block .token.atrule,
.pinkdocs-code-block .token.attr-value,
.pinkdocs-code-block .token.keyword,
.pinkdocs-multi-lang-code-block .token.atrule,
.pinkdocs-multi-lang-code-block .token.attr-value,
.pinkdocs-multi-lang-code-block .token.keyword {
    color: #c586c0 !important;
}

.pinkdocs-code-block .token.function,
.pinkdocs-code-block .token.class-name,
.pinkdocs-multi-lang-code-block .token.function,
.pinkdocs-multi-lang-code-block .token.class-name {
    color: #dcdcaa !important;
}

.pinkdocs-code-block .token.regex,
.pinkdocs-code-block .token.important,
.pinkdocs-code-block .token.variable,
.pinkdocs-multi-lang-code-block .token.regex,
.pinkdocs-multi-lang-code-block .token.important,
.pinkdocs-multi-lang-code-block .token.variable {
    color: #d16969 !important;
}

/* Prism token colors - Light theme (GitHub inspired) */
[data-theme="light"] .pinkdocs-code-block .token.comment,
[data-theme="light"] .pinkdocs-code-block .token.prolog,
[data-theme="light"] .pinkdocs-code-block .token.doctype,
[data-theme="light"] .pinkdocs-code-block .token.cdata,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.comment,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.prolog,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.doctype,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.cdata {
    color: #6a737d !important;
}

[data-theme="light"] .pinkdocs-code-block .token.punctuation,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.punctuation {
    color: #24292e !important;
}

[data-theme="light"] .pinkdocs-code-block .token.property,
[data-theme="light"] .pinkdocs-code-block .token.tag,
[data-theme="light"] .pinkdocs-code-block .token.boolean,
[data-theme="light"] .pinkdocs-code-block .token.number,
[data-theme="light"] .pinkdocs-code-block .token.constant,
[data-theme="light"] .pinkdocs-code-block .token.symbol,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.property,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.tag,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.boolean,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.number,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.constant,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.symbol {
    color: #005cc5 !important;
}

[data-theme="light"] .pinkdocs-code-block .token.selector,
[data-theme="light"] .pinkdocs-code-block .token.attr-name,
[data-theme="light"] .pinkdocs-code-block .token.string,
[data-theme="light"] .pinkdocs-code-block .token.char,
[data-theme="light"] .pinkdocs-code-block .token.builtin,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.selector,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.attr-name,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.string,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.char,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.builtin {
    color: #032f62 !important;
}

[data-theme="light"] .pinkdocs-code-block .token.operator,
[data-theme="light"] .pinkdocs-code-block .token.entity,
[data-theme="light"] .pinkdocs-code-block .token.url,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.operator,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.entity,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.url {
    color: #24292e !important;
}

[data-theme="light"] .pinkdocs-code-block .token.atrule,
[data-theme="light"] .pinkdocs-code-block .token.attr-value,
[data-theme="light"] .pinkdocs-code-block .token.keyword,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.atrule,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.attr-value,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.keyword {
    color: #d73a49 !important;
}

[data-theme="light"] .pinkdocs-code-block .token.function,
[data-theme="light"] .pinkdocs-code-block .token.class-name,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.function,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.class-name {
    color: #6f42c1 !important;
}

[data-theme="light"] .pinkdocs-code-block .token.regex,
[data-theme="light"] .pinkdocs-code-block .token.important,
[data-theme="light"] .pinkdocs-code-block .token.variable,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.regex,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.important,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.variable {
    color: #e36209 !important;
}

/* Top bar example: keep Prism syntax highlighting (prettify) but suppress .token.tag emphasis */
[data-top-bar-example] .token.tag,
[data-top-bar-example] .token.tag .token.punctuation {
    color: #d4d4d4 !important;
}

[data-theme="light"] [data-top-bar-example] .token.tag,
[data-theme="light"] [data-top-bar-example] .token.tag .token.punctuation {
    color: #24292e !important;
}

/* Fix Prism HTML tag token spacing - override .tag .tag CSS that conflicts with .token.tag */
.pinkdocs-code-block .token.tag,
.pinkdocs-code-block .token.tag .token.tag,
.pinkdocs-code-block .tag.tag,
.pinkdocs-multi-lang-code-block .token.tag,
.pinkdocs-multi-lang-code-block .token.tag .token.tag,
.pinkdocs-multi-lang-code-block .tag.tag,
.wp-block-code .token.tag,
.wp-block-code .token.tag .token.tag,
.wp-block-code .tag.tag {
    display: inline !important;
    align-items: initial !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: normal !important;
    border-width: 0 !important;
    border-color: transparent !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #b5cea8 !important;
    /* Prism tag color */
}

/* Ensure nested tokens in code blocks have proper Prism colors */
.pinkdocs-code-block .token.tag .token.tag,
.pinkdocs-multi-lang-code-block .token.tag .token.tag,
.wp-block-code .token.tag .token.tag {
    color: #b5cea8 !important;
    /* Prism tag color */
}

.pinkdocs-code-block .token.tag .token.punctuation,
.pinkdocs-multi-lang-code-block .token.tag .token.punctuation,
.wp-block-code .token.tag .token.punctuation {
    color: #808080 !important;
    /* Prism punctuation color for HTML tags */
}

/* General nested token reset */
.pinkdocs-code-block .token.tag .token,
.pinkdocs-multi-lang-code-block .token.tag .token,
.wp-block-code .token.tag .token {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Light theme overrides */
[data-theme="light"] .pinkdocs-code-block .token.tag,
[data-theme="light"] .pinkdocs-code-block .token.tag .token.tag,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.tag,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.tag .token.tag,
[data-theme="light"] .wp-block-code .token.tag,
[data-theme="light"] .wp-block-code .token.tag .token.tag {
    color: #005cc5 !important;
    /* Prism tag color - light theme */
}

[data-theme="light"] .pinkdocs-code-block .token.tag .token.punctuation,
[data-theme="light"] .pinkdocs-multi-lang-code-block .token.tag .token.punctuation,
[data-theme="light"] .wp-block-code .token.tag .token.punctuation {
    color: #24292e !important;
    /* Prism punctuation color - light theme */
}

/* Multi-Language Code Block */
.pinkdocs-multi-lang-code-block {
    position: relative;
    background: #1e1e1e !important;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    margin: 32px 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* !important: the dark default above uses it, so without it the block stayed dark in light mode */
[data-theme="light"] .pinkdocs-multi-lang-code-block {
    background: #f6f8fa !important;
    border-color: #e1e4e8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Use same header style as regular code block, but higher z-index for dropdowns */
.pinkdocs-multi-lang-code-block .pinkdocs-code-header {
    z-index: 20;
}

/* Filename + language in the header of every code block (regular and multi-language) */
.pinkdocs-code-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pinkdocs-code-filename {
    font-size: 13px;
    color: #9ca3af;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[data-theme="light"] .pinkdocs-code-filename {
    color: #57606a;
}

/* Language dropdown - styled like the language badge */
.pinkdocs-multi-lang-selector {
    position: relative;
}

.pinkdocs-multi-lang-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-roundness, 8px);
    color: #a0a0a0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
}

.pinkdocs-multi-lang-dropdown:hover,
.pinkdocs-multi-lang-dropdown.open {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pinkdocs-brand-color, #ff26ba);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 38, 186, 0.15);
}

[data-theme="light"] .pinkdocs-multi-lang-dropdown {
    background: rgba(0, 0, 0, 0.05);
    border-color: #e1e4e8;
    color: #57606a;
}

[data-theme="light"] .pinkdocs-multi-lang-dropdown:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: #d0d7de;
    color: #24292f;
}

.pinkdocs-multi-lang-dropdown svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
    transition: transform 0.2s;
}

.pinkdocs-multi-lang-dropdown.open svg {
    transform: rotate(180deg);
}

.pinkdocs-multi-lang-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 140px;
    background: #2d2d2d;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-roundness, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    overflow: hidden;
}

.pinkdocs-multi-lang-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-theme="light"] .pinkdocs-multi-lang-menu {
    background: #fff !important;
    border-color: #e1e4e8 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pinkdocs-multi-lang-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #d4d4d4;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.pinkdocs-multi-lang-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pinkdocs-multi-lang-menu-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.pinkdocs-multi-lang-menu-item.active::before {
    content: '✓';
    font-size: 11px;
    margin-right: 4px;
}

[data-theme="light"] .pinkdocs-multi-lang-menu-item {
    color: #374151;
}

[data-theme="light"] .pinkdocs-multi-lang-menu-item:hover {
    background: #f3f4f6;
}

[data-theme="light"] .pinkdocs-multi-lang-menu-item.active {
    background: #f0f0f0;
    color: #24292f;
}

.pinkdocs-code-variant {
    display: none;
}

.pinkdocs-code-variant.active {
    display: block;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-content {
    display: block;
    margin: 0 !important;
    padding: 20px 20px 20px 56px !important;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #e0e0e0 !important;
    background: #1e1e1e !important;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.pinkdocs-multi-lang-code-block pre {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-content {
    color: #24292e !important;
    background: #f6f8fa !important;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-content * {
    line-height: inherit !important;
}

/* Line numbers for multi-language block */
.pinkdocs-multi-lang-code-block .pinkdocs-line-numbers {
    top: 39px;
    width: 44px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #1e1e1e !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 10;
}

[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-line-numbers {
    /* !important: the dark default uses it, so without it the gutter stays dark in light mode */
    background: #f0f1f3 !important;
    border-right-color: #e1e4e8;
    color: #9a9aa2;
}

/* Report Modal Styles */
.pinkdocs-code-report-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pinkdocs-code-report-modal.active {
    display: flex;
    opacity: 1;
}

.pinkdocs-code-report-content {
    background: #18181b;
    border-radius: calc(var(--border-roundness, 8px) * 2);
    padding: 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.pinkdocs-code-report-modal.active .pinkdocs-code-report-content {
    transform: scale(1);
}

[data-theme="light"] .pinkdocs-code-report-content {
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.05);
}

.pinkdocs-code-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pinkdocs-code-report-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pinkdocs-text-primary, #ffffff);
}

[data-theme="light"] .pinkdocs-code-report-title {
    color: #1a1a1a;
}

.pinkdocs-code-report-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
    cursor: pointer;
    color: var(--pinkdocs-text-secondary, #a1a1aa);
    transition: all 0.2s ease;
}

.pinkdocs-code-report-close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

[data-theme="light"] .pinkdocs-code-report-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

.pinkdocs-code-report-field {
    margin-bottom: 16px;
}

.pinkdocs-code-report-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pinkdocs-text-primary, #ffffff);
    margin-bottom: 8px;
}

[data-theme="light"] .pinkdocs-code-report-label {
    color: #1a1a1a;
}

.pinkdocs-code-report-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
    font-size: 14px;
    font-family: inherit;
    color: #ffffff;
    background-color: #2a2a2a;
    resize: vertical;
    box-sizing: border-box;
}

[data-theme="light"] .pinkdocs-code-report-textarea {
    background-color: #f3f4f6;
    color: #1a1a1a;
    border-color: #e5e7eb;
}

.pinkdocs-code-report-textarea:focus {
    outline: none;
    border-color: var(--pinkdocs-brand-color, #ff26ba);
}

.pinkdocs-code-report-textarea[aria-invalid="true"] {
    border-color: #ef4444;
}

.pinkdocs-code-report-error {
    display: none;
    margin-top: 6px;
    font-size: 13px;
    color: #ef4444;
}

[data-theme="light"] .pinkdocs-code-report-error {
    color: #dc2626;
}

.pinkdocs-code-report-preview {
    background: #1e1e1e;
    border-radius: calc(var(--border-roundness, 8px) * 0.75);
    padding: 12px;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #d4d4d4;
    max-height: 150px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .pinkdocs-code-report-preview {
    background: #f6f8fa;
    color: #24292e;
    border-color: #e5e7eb;
}

.pinkdocs-code-report-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.pinkdocs-code-report-btn {
    padding: 10px 20px !important;
    border-radius: calc(var(--border-roundness, 8px) * 0.75) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none !important;
    box-shadow: none !important;
}

.pinkdocs-code-report-btn-cancel {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

[data-theme="light"] .pinkdocs-code-report-btn-cancel {
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
}

.pinkdocs-code-report-btn-submit {
    background: var(--pinkdocs-brand-color, #ff26ba) !important;
    color: var(--pinkdocs-brand-text-color, #ffffff) !important;
}

.pinkdocs-code-report-btn-submit:hover {
    opacity: 0.9;
}


/* Use same action buttons as regular code block */
.pinkdocs-multi-lang-code-block .pinkdocs-code-actions {
    display: flex;
    gap: 6px;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: calc(var(--border-roundness, 8px) * 0.625);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    position: relative;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: calc(var(--border-roundness, 8px) * 0.625);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn:hover::after {
    opacity: 1;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn svg {
    width: 14px;
    height: 14px;
}

.pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn.copied {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: #e1e4e8;
    color: #57606a;
}

[data-theme="light"] .pinkdocs-multi-lang-code-block .pinkdocs-code-action-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: #d0d7de;
    color: #24292f;
}

/* Responsive */
@media (max-width: 768px) {

    .wp-block-code code {
        font-size: 13px !important;
        padding: 16px 16px 16px 48px !important;
    }

    .pinkdocs-code-block .pinkdocs-code-content,
    .pinkdocs-code-block pre code,
    .pinkdocs-multi-lang-code-block .pinkdocs-code-content,
    .pinkdocs-multi-lang-code-block pre code {
        font-size: 13px !important;
        padding: 16px 16px 16px 56px !important;
    }

    /* Same size and padding as the code beside it (13px, 16px), so each number stays on its line
       and the column isn't taller than the block */
    .pinkdocs-line-numbers,
    .pinkdocs-multi-lang-code-block .pinkdocs-line-numbers {
        width: 38px;
        font-size: 13px !important;
        padding-top: 20px; /* code text starts 4px lower inside its pre */
        padding-bottom: 16px;
    }

    .pinkdocs-line-number {
        padding-right: 8px;
    }

    .pinkdocs-multi-lang-code-block .pinkdocs-code-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .pinkdocs-multi-lang-dropdown {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Hero Search Block Styles */
.pinkdocs-hero-search-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .pinkdocs-hero-search-trigger {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .pinkdocs-hero-search-trigger svg {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .pinkdocs-hero-search-placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Icon Cards Block Styles */
.pinkdocs-icon-cards-section {
    transition: background 0.3s ease;
    margin: 40px 0;
    padding: 0;
}

.pinkdocs-icon-cards-section .section-header h2 {
    color: var(--text-primary, #111827);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-icon-cards-section .section-header h2 {
    color: var(--text-primary, #ffffff);
}

.pinkdocs-icon-cards-section .section-header p {
    color: var(--text-secondary, #6b7280);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-icon-cards-section .section-header p {
    color: var(--text-secondary, #a1a1aa);
}

.icon-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.icon-card {
    background: var(--bg-primary, white);
    padding: 32px;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .icon-card {
    background: var(--bg-primary, rgba(0, 0, 0, 0.4));
    border-color: rgba(255, 255, 255, 0.12);
}

.icon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .icon-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.icon-card .card-icon {
    width: 56px;
    height: 56px;
    background: rgba(var(--brand-rgb, 255, 38, 185), 0.15);
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--brand-color, #3b82f6);
    transition: all 0.3s ease;
}

.icon-card:hover .card-icon {
    background: rgba(var(--brand-rgb, 255, 38, 185), 0.25);
}

.icon-card h3 {
    color: var(--text-primary, #111827);
    transition: color 0.3s ease;
}

[data-theme="dark"] .icon-card h3 {
    color: var(--text-primary, #ffffff);
}

.icon-card p {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 16px;
    flex: 1;
    transition: color 0.3s ease;
}

[data-theme="dark"] .icon-card p {
    color: var(--text-secondary, #a1a1aa);
}

.icon-card-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-color, #3b82f6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.icon-card-cta:hover {
    gap: 8px;
    text-decoration: none;
}

.icon-card-cta span {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.icon-card:hover .icon-card-cta span {
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 768px) {
    .pinkdocs-icon-cards-section {
        padding: 0 !important;
        max-width: 100%;
    }

    .icon-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;
        margin: 0;
    }

    .icon-card {
        padding: 24px;
        margin: 0;
    }
}

/* Image Cards Block Styles */
.pinkdocs-image-cards-section {
    transition: background 0.3s ease;
    margin: 40px 0;
    padding: 0;
}

.pinkdocs-image-cards-section .section-header h2 {
    color: var(--text-primary, #111827);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-image-cards-section .section-header h2 {
    color: var(--text-primary, #ffffff);
}

.pinkdocs-image-cards-section .section-header p {
    color: var(--text-secondary, #6b7280);
    transition: color 0.3s ease;
}

[data-theme="dark"] .pinkdocs-image-cards-section .section-header p {
    color: var(--text-secondary, #a1a1aa);
}

.image-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
}

.image-card {
    background: var(--bg-primary, white);
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color, #e5e7eb);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .image-card {
    background: var(--bg-primary, rgba(0, 0, 0, 0.4));
    border-color: rgba(255, 255, 255, 0.12);
}

.image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .image-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.image-card .card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f3f4f6;
}

[data-theme="dark"] .image-card .card-image {
    background: rgba(0, 0, 0, 0.3);
}

.image-card .card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-card:hover .card-image img {
    transform: scale(1.05);
}

/* Image card placeholder (no image) - matches Related Documents style */
.pinkdocs-image-cards-section .card-image.pinkdocs-image-card-placeholder,
.image-cards-grid .card-image.pinkdocs-image-card-placeholder,
.image-card .card-image.pinkdocs-image-card-placeholder {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    position: relative !important;
    overflow: visible !important;
}

.pinkdocs-image-cards-section .card-image.pinkdocs-image-card-placeholder::before,
.image-cards-grid .card-image.pinkdocs-image-card-placeholder::before,
.image-card .card-image.pinkdocs-image-card-placeholder::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--brand-color, #ff26ba) !important;
    opacity: 0.08 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.pinkdocs-image-cards-section .card-image.pinkdocs-image-card-placeholder svg,
.image-cards-grid .card-image.pinkdocs-image-card-placeholder svg,
.image-card .card-image.pinkdocs-image-card-placeholder svg {
    color: var(--brand-color, #ff26ba) !important;
    opacity: 0.7 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
}

.image-card:hover .card-image.pinkdocs-image-card-placeholder svg {
    opacity: 1 !important;
}

/* Dark mode support for placeholder */
[data-theme="dark"] .pinkdocs-image-cards-section .card-image.pinkdocs-image-card-placeholder,
[data-theme="dark"] .image-cards-grid .card-image.pinkdocs-image-card-placeholder,
[data-theme="dark"] .image-card .card-image.pinkdocs-image-card-placeholder {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .pinkdocs-image-cards-section .card-image.pinkdocs-image-card-placeholder::before,
[data-theme="dark"] .image-cards-grid .card-image.pinkdocs-image-card-placeholder::before,
[data-theme="dark"] .image-card .card-image.pinkdocs-image-card-placeholder::before {
    opacity: 0.15 !important;
}

[data-theme="dark"] .pinkdocs-image-cards-section .card-image.pinkdocs-image-card-placeholder svg,
[data-theme="dark"] .image-cards-grid .card-image.pinkdocs-image-card-placeholder svg,
[data-theme="dark"] .image-card .card-image.pinkdocs-image-card-placeholder svg {
    opacity: 0.85 !important;
}

[data-theme="dark"] .image-card:hover .card-image.pinkdocs-image-card-placeholder svg {
    opacity: 1 !important;
}

.image-card h3 {
    color: var(--text-primary, #111827);
    transition: color 0.3s ease;
}

[data-theme="dark"] .image-card h3 {
    color: var(--text-primary, #ffffff);
}

.image-card p {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 16px;
    flex: 1;
    transition: color 0.3s ease;
}

[data-theme="dark"] .image-card p {
    color: var(--text-secondary, #a1a1aa);
}

.image-card-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-color, #3b82f6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.image-card-cta:hover {
    gap: 8px;
    text-decoration: none;
}

.image-card-cta span {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.image-card:hover .image-card-cta span {
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 768px) {
    .pinkdocs-image-cards-section {
        padding: 40px 16px;
    }

    .image-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .image-card .card-image {
        height: 180px;
    }
    
    .card-image.pinkdocs-image-card-placeholder {
        height: 180px !important;
    }
}

/* Category Articles Block Styles */
/* ========================================
   PinkDocs Category Articles Block - Redesigned
   3-column responsive grid with modern card design
   ======================================== */

.pinkdocs-cat-articles-section {
    transition: background 0.3s ease;
    margin: 40px 0;
    padding: 0;
}

/* Section Header */
.pinkdocs-cat-articles-header {
    text-align: center;
    margin-bottom: 56px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pinkdocs-cat-articles-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary, #0f172a);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

[data-theme="dark"] .pinkdocs-cat-articles-header h2 {
    color: var(--text-primary, #ffffff);
}

.pinkdocs-cat-articles-header p {
    font-size: 18px;
    color: var(--text-secondary, #64748b);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

[data-theme="dark"] .pinkdocs-cat-articles-header p {
    color: var(--text-secondary, #94a3b8);
}

/* 2-Column Grid */
.pinkdocs-cat-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Category Card */
.pinkdocs-cat-card {
    background: var(--bg-primary, white);
    border-radius: calc(var(--border-roundness, 8px) * 2);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

[data-theme="dark"] .pinkdocs-cat-card {
    background: var(--bg-primary, rgba(15, 23, 42, 0.95));
    border-color: rgba(255, 255, 255, 0.08);
}

.pinkdocs-cat-card:hover {
    border-color: var(--brand-color, #3b82f6);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

[data-theme="dark"] .pinkdocs-cat-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--brand-color, #3b82f6);
}

/* Card Header */
.pinkdocs-cat-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

[data-theme="dark"] .pinkdocs-cat-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Category Icon */
.pinkdocs-cat-icon {
    width: 48px;
    height: 48px;
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--brand-rgb, 255, 38, 185), 0.12);
    color: var(--brand-color, #3b82f6);
    border: 1px solid rgba(var(--brand-rgb, 255, 38, 185), 0.2);
    transition: all 0.2s ease;
}

.pinkdocs-cat-icon svg,
.pinkdocs-cat-icon i {
    width: 22px;
    height: 22px;
}

.pinkdocs-cat-card:hover .pinkdocs-cat-icon {
    background: rgba(var(--brand-rgb, 255, 38, 185), 0.18);
    transform: scale(1.05);
}

/* Category Info */
.pinkdocs-cat-info {
    flex: 1;
    min-width: 0;
}

.pinkdocs-cat-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--text-primary, #0f172a);
    line-height: 1.3;
}

[data-theme="dark"] .pinkdocs-cat-title {
    color: var(--text-primary, #ffffff);
}

/* Doc Count Badge */
.pinkdocs-cat-count {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}

[data-theme="dark"] .pinkdocs-cat-count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #94a3b8);
}

/* Card Body */
.pinkdocs-cat-card-body {
    padding: 16px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Article Item */
.pinkdocs-cat-article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: calc(var(--border-roundness, 8px) * 1.25);
    background: var(--bg-secondary, #f8fafc);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

[data-theme="dark"] .pinkdocs-cat-article {
    background: rgba(255, 255, 255, 0.08);
}

.pinkdocs-cat-article:hover {
    background: var(--bg-primary, white);
    border-color: var(--border-color, #e2e8f0);
    transform: translateX(4px);
}

[data-theme="dark"] .pinkdocs-cat-article:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Article Icon */
.pinkdocs-cat-article-icon {
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

[data-theme="dark"] .pinkdocs-cat-article-icon {
    color: var(--text-muted, #64748b);
}

.pinkdocs-cat-article:hover .pinkdocs-cat-article-icon {
    color: var(--brand-color, #3b82f6);
}

/* Article Title */
.pinkdocs-cat-article-title {
    flex: 1;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-secondary, #475569);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

[data-theme="dark"] .pinkdocs-cat-article-title {
    color: var(--text-secondary, #94a3b8);
}

.pinkdocs-cat-article:hover .pinkdocs-cat-article-title {
    color: var(--text-primary, #0f172a);
}

[data-theme="dark"] .pinkdocs-cat-article:hover .pinkdocs-cat-article-title {
    color: var(--text-primary, #ffffff);
}

/* Article Arrow */
.pinkdocs-cat-article-arrow {
    color: var(--text-muted, #cbd5e1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.2s ease;
}

[data-theme="dark"] .pinkdocs-cat-article-arrow {
    color: var(--text-muted, #475569);
}

.pinkdocs-cat-article:hover .pinkdocs-cat-article-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--brand-color, #3b82f6);
}

/* No Articles */
.pinkdocs-cat-no-articles {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    padding: 32px 16px;
    margin: 0;
    background: var(--bg-secondary, #f8fafc);
    border-radius: calc(var(--border-roundness, 8px) * 1.25);
}

[data-theme="dark"] .pinkdocs-cat-no-articles {
    background: rgba(255, 255, 255, 0.03);
}

/* Card Footer */
.pinkdocs-cat-card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: auto;
}

[data-theme="dark"] .pinkdocs-cat-card-footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* View All Link */
.pinkdocs-cat-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-color, #3b82f6);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pinkdocs-cat-view-all:hover {
    opacity: 0.8;
}

.pinkdocs-cat-view-all svg {
    transition: transform 0.2s ease;
}

.pinkdocs-cat-view-all:hover svg {
    transform: translateX(4px);
}

/* No Categories */
.pinkdocs-no-categories {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    background: var(--bg-primary, white);
    border-radius: calc(var(--border-roundness, 8px) * 2);
    border: 2px dashed var(--border-color, #e2e8f0);
    color: var(--text-muted, #94a3b8);
    font-size: 15px;
}

[data-theme="dark"] .pinkdocs-no-categories {
    background: var(--bg-primary, rgba(15, 23, 42, 0.95));
    border-color: rgba(255, 255, 255, 0.08);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .pinkdocs-cat-articles-grid {
        gap: 20px;
    }

    .pinkdocs-cat-articles-section {
        padding: 60px 20px;
    }

    .pinkdocs-cat-articles-header h2 {
        font-size: 32px;
    }
}

/* Responsive - Mobile (1 column) */
@media (max-width: 768px) {
    .pinkdocs-cat-articles-section {
        padding: 0px;
    }

    .pinkdocs-cat-articles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pinkdocs-cat-articles-header {
        margin-bottom: 40px;
    }

    .pinkdocs-cat-articles-header h2 {
        font-size: 28px;
    }

    .pinkdocs-cat-articles-header p {
        font-size: 16px;
    }

    .pinkdocs-cat-card-header {
        padding: 20px;
    }

    .pinkdocs-cat-card-body {
        padding: 12px 20px;
    }

    .pinkdocs-cat-card-footer {
        padding: 14px 20px;
    }

    .pinkdocs-cat-icon {
        width: 44px;
        height: 44px;
    }

    .pinkdocs-cat-title {
        font-size: 16px;
    }

    .pinkdocs-cat-article {
        padding: 10px 12px;
    }

    .pinkdocs-cat-article-title {
        font-size: 13px;
    }
}

/* Changelog Block Styles */
.pinkdocs-changelog-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 0;
}

.pinkdocs-changelog-header {
    margin-bottom: 48px;
}

.pinkdocs-changelog-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin-bottom: 12px;
}

[data-theme="dark"] .pinkdocs-changelog-title {
    color: var(--text-primary, #ffffff);
}

.pinkdocs-changelog-subtitle {
    font-size: 16px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.6;
}

[data-theme="dark"] .pinkdocs-changelog-subtitle {
    color: var(--text-secondary, #a1a1aa);
}

/* Timeline */
.pinkdocs-changelog-timeline {
    position: relative;
}

.pinkdocs-changelog-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color, #e5e7eb);
}

[data-theme="dark"] .pinkdocs-changelog-timeline::before {
    background: rgba(255, 255, 255, 0.08);
}

.pinkdocs-changelog-entry {
    position: relative;
    padding-left: 40px;
    padding-bottom: 48px;
}

.pinkdocs-changelog-entry:last-child {
    padding-bottom: 0;
}

.pinkdocs-changelog-entry::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    width: 12px;
    height: 12px;
    background: var(--pinkdocs-brand-color, #3b82f6);
    border-radius: 50%;
    border: 3px solid var(--bg-secondary, #f9fafb);
    box-sizing: content-box;
}

[data-theme="dark"] .pinkdocs-changelog-entry::before {
    border-color: #0a0a0a;
}

.pinkdocs-changelog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pinkdocs-changelog-version {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #111827);
}

[data-theme="dark"] .pinkdocs-changelog-version {
    color: var(--text-primary, #ffffff);
}

.pinkdocs-changelog-date {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    padding: 4px 10px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
}

[data-theme="dark"] .pinkdocs-changelog-date {
    color: var(--text-secondary, #a1a1aa);
    background: #000000;
    border-color: rgba(255, 255, 255, 0.08);
}

.pinkdocs-changelog-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
    font-size: 12px;
    font-weight: 600;
}

.pinkdocs-changelog-badge svg {
    flex-shrink: 0;
}

.pinkdocs-changelog-badge-new {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.pinkdocs-changelog-badge-tweaked {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.pinkdocs-changelog-badge-fixed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

[data-theme="light"] .pinkdocs-changelog-badge-new {
    background: #dcfce7;
    color: #15803d;
}

[data-theme="light"] .pinkdocs-changelog-badge-tweaked {
    background: #fef3c7;
    color: #b45309;
}

[data-theme="light"] .pinkdocs-changelog-badge-fixed {
    background: #fee2e2;
    color: #dc2626;
}

/* Changelog Items List */
.pinkdocs-changelog-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.pinkdocs-changelog-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-primary, white);
    border: none;
    border-radius: var(--border-roundness, 8px);
    transition: all 0.2s;
}

[data-theme="dark"] .pinkdocs-changelog-item {
    background: #0f0f0f;
}

.pinkdocs-changelog-item .pinkdocs-changelog-badge {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0;
}

.pinkdocs-changelog-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pinkdocs-changelog-item-text {
    font-size: 15px;
    color: var(--text-primary, #111827);
    line-height: 1.5;
}

[data-theme="dark"] .pinkdocs-changelog-item-text {
    color: var(--text-primary, #ffffff);
}

a.pinkdocs-changelog-item-link {
    color: var(--text-primary, #111827);
    text-decoration: none;
    transition: color 0.2s ease;
}

[data-theme="dark"] a.pinkdocs-changelog-item-link {
    color: var(--text-primary, #ffffff);
}

a.pinkdocs-changelog-item-link:hover {
    color: var(--pinkdocs-brand-color, #3b82f6);
}

.pinkdocs-changelog-link-icon {
    color: var(--pinkdocs-brand-color, #3b82f6);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    display: inline;
    vertical-align: middle;
    margin-left: 6px;
}

a.pinkdocs-changelog-item-link:hover .pinkdocs-changelog-link-icon {
    opacity: 1;
}

.pinkdocs-changelog-item-image {
    display: block;
    width: 100%;
    border-radius: var(--border-roundness, 8px);
    overflow: hidden;
    border: 1px solid var(--border-color, #e5e7eb);
    transition: all 0.2s ease;
    cursor: pointer;
}

[data-theme="dark"] .pinkdocs-changelog-item-image {
    border-color: rgba(255, 255, 255, 0.08);
}

.pinkdocs-changelog-item-image:hover {
    border-color: var(--pinkdocs-brand-color, #3b82f6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pinkdocs-changelog-item-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--border-roundness, 8px) * 0.875);
}

/* Changelog Video Container - Responsive 16:9 Aspect Ratio */
.pinkdocs-changelog-item-video {
    display: block;
    width: 100%;
    margin-top: 16px;
    border-radius: var(--border-roundness, 8px);
    overflow: hidden;
    border: 1px solid var(--border-color, #e5e7eb);
    background: #000;
    position: relative;
    aspect-ratio: 16 / 9;
    /* Fallback for browsers without aspect-ratio support */
    padding-top: 56.25%;
}

[data-theme="dark"] .pinkdocs-changelog-item-video {
    border-color: rgba(255, 255, 255, 0.08);
}

@supports (aspect-ratio: 16 / 9) {
    .pinkdocs-changelog-item-video {
        padding-top: 0;
    }
}

.pinkdocs-changelog-item-video iframe,
.pinkdocs-changelog-item-video video {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.pinkdocs-changelog-item-video video {
    object-fit: contain;
}

@media (max-width: 768px) {
    .pinkdocs-changelog-item-video {
        margin-top: 12px;
        border-radius: calc(var(--border-roundness, 8px) * 0.75);
    }
}

/* Changelog Lightbox */
.pinkdocs-changelog-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999999 !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pinkdocs-changelog-lightbox.active {
    display: flex;
    opacity: 1;
}

.pinkdocs-changelog-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10000000 !important;
}

.pinkdocs-changelog-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.pinkdocs-changelog-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--border-roundness, 8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Changelog Reactions & Comments */
.pinkdocs-changelog-engagement {
    padding: 16px;
    background: transparent;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

[data-theme="dark"] .pinkdocs-changelog-engagement {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.pinkdocs-changelog-reactions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pinkdocs-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f4f4f5;
    border: 1px solid #e5e7eb;
    border-radius: calc(var(--border-roundness, 8px) * 2.5);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="dark"] .pinkdocs-reaction-btn {
    background: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .pinkdocs-reaction-btn {
    background: #f4f4f5;
    border-color: #e5e7eb;
}

.pinkdocs-reaction-btn:hover {
    border-color: var(--pinkdocs-brand-color, #3b82f6);
    background: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.1);
}

.pinkdocs-reaction-btn.active {
    border-color: var(--pinkdocs-brand-color, #3b82f6);
    background: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.15);
}

[data-theme="light"] .pinkdocs-reaction-btn.active {
    background: rgba(var(--pinkdocs-brand-color-rgb, 59, 130, 246), 0.1);
    border-color: var(--pinkdocs-brand-color, #3b82f6);
}

.pinkdocs-reaction-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pinkdocs-reaction-emoji {
    font-size: 16px;
    line-height: 1;
}

.pinkdocs-reaction-count {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #ffffff;
    padding: 2px 6px;
    border-radius: calc(var(--border-roundness, 8px) * 1.25);
    min-width: 18px;
    text-align: center;
}

[data-theme="dark"] .pinkdocs-reaction-count {
    background: #000000;
    color: #a1a1aa;
}

[data-theme="light"] .pinkdocs-reaction-count {
    background: #ffffff;
    color: #6b7280;
}

.pinkdocs-reaction-btn.active .pinkdocs-reaction-count {
    color: var(--pinkdocs-brand-color, #3b82f6);
}

.pinkdocs-changelog-empty {
    text-align: center;
    padding: 80px 40px;
    color: var(--text-secondary, #9ca3af);
    max-width: 500px;
    margin: 60px auto;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
}

.pinkdocs-changelog-empty svg {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    opacity: 0.6;
    color: var(--pinkdocs-brand-color, #3b82f6);
    display: block;
}

.pinkdocs-changelog-empty h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 12px 0;
}

[data-theme="dark"] .pinkdocs-changelog-empty h3 {
    color: var(--text-primary, #ffffff);
}

.pinkdocs-changelog-empty p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    color: var(--text-secondary, #6b7280);
}

[data-theme="dark"] .pinkdocs-changelog-empty {
    background: var(--bg-primary, #000000);
    border-color: var(--border-color, rgba(255, 255, 255, 0.1));
}

[data-theme="dark"] .pinkdocs-hero-search-shortcut {
    color: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Changelog Block CTA Styles */
.pinkdocs-changelog-cta {
    text-align: center;
    margin-top: 32px;
}

.pinkdocs-changelog-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--pinkdocs-brand-color, #3b82f6);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--border-roundness, 8px);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pinkdocs-changelog-cta-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.6s;
}

.pinkdocs-changelog-cta-button:hover::before {
    transform: translateX(100%) rotate(45deg);
}

.pinkdocs-changelog-cta-button:hover {
    background: color-mix(in srgb, var(--pinkdocs-brand-color, #3b82f6) 90%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pinkdocs-changelog-cta-button svg {
    transition: transform 0.2s ease;
}

.pinkdocs-changelog-cta-button:hover svg {
    transform: translateX(3px);
}

/* Copy Toast Notification */
.pinkdocs-copy-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #10b981;
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--border-roundness, 8px);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    animation: pinkdocs-slideInUp 0.3s ease, pinkdocs-slideOutDown 0.3s ease 2.7s;
    pointer-events: none;
}

.pinkdocs-copy-toast svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@keyframes pinkdocs-slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pinkdocs-slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100px);
        opacity: 0;
    }
}

/* =========================================
   PinkDocs Tabs Block
   ========================================= */

.pinkdocs-tabs-block {
    --brand-color: var(--pinkdocs-brand-color, #10b981);
    margin: 24px 0;
}

/* Tabs Header - Horizontal Scroll */
.pinkdocs-tabs-header {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    border-bottom: 1px solid #e5e7eb;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

[data-theme="dark"] .pinkdocs-tabs-header {
    border-bottom-color: #374151;
    scrollbar-color: #555 transparent;
}

.pinkdocs-tabs-header::-webkit-scrollbar {
    height: 4px;
}

.pinkdocs-tabs-header::-webkit-scrollbar-track {
    background: transparent;
}

.pinkdocs-tabs-header::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: calc(var(--border-roundness, 8px) * 0.5);
}

.pinkdocs-tabs-header::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

[data-theme="dark"] .pinkdocs-tabs-header::-webkit-scrollbar-thumb {
    background: #555;
}

[data-theme="dark"] .pinkdocs-tabs-header::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Tab Button */
.pinkdocs-tab-button {
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pinkdocs-tab-button:hover {
    color: #374151;
}

.pinkdocs-tab-button.active {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
    font-weight: 600;
}

[data-theme="dark"] .pinkdocs-tab-button {
    color: #9ca3af;
}

[data-theme="dark"] .pinkdocs-tab-button:hover {
    color: #e5e7eb;
}

[data-theme="dark"] .pinkdocs-tab-button.active {
    color: var(--brand-color);
}

/* Tab Content */
.pinkdocs-tabs-content {
    position: relative;
}

.pinkdocs-tabs-content>.pinkdocs-tab-panel {
    display: none;
    padding: 24px 0;
    animation: pinkdocs-tab-fade 0.2s ease;
}

.pinkdocs-tabs-content>.pinkdocs-tab-panel.active {
    display: block;
}

@keyframes pinkdocs-tab-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pinkdocs-tab-panel-content {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
}

[data-theme="dark"] .pinkdocs-tab-panel-content {
    color: #e5e7eb;
}

.pinkdocs-tab-panel-content p {
    margin: 0 0 16px;
}

.pinkdocs-tab-panel-content p:last-child {
    margin-bottom: 0;
}

.pinkdocs-tab-panel-content ul,
.pinkdocs-tab-panel-content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.pinkdocs-tab-panel-content li {
    margin-bottom: 8px;
}

.pinkdocs-tab-panel-content a {
    color: var(--brand-color);
}

.pinkdocs-tab-panel-content code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: calc(var(--border-roundness, 8px) * 0.5);
    font-size: 13px;
    font-family: 'Fira Code', monospace;
}

[data-theme="dark"] .pinkdocs-tab-panel-content code {
    background: #374151;
    color: #e5e7eb;
}

/* Responsive */
@media (max-width: 640px) {
    .pinkdocs-tab-button {
        padding: 12px 16px;
        font-size: 13px;
    }

    .pinkdocs-tab-panel {
        padding: 16px 0;
    }

    .pinkdocs-tab-panel-content {
        font-size: 14px;
    }
}

/* =========================================
   PinkDocs Steps Block
   ========================================= */

.pinkdocs-steps-block {
    margin: 24px 0;
    counter-reset: step-counter;
}

.pinkdocs-step-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    counter-increment: step-counter;
}

/* Step indicator (number + line) */
.pinkdocs-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    margin-right: 16px;
    align-self: stretch;
}

.pinkdocs-step-number {
    width: 28px;
    height: 28px;
    border-radius: calc(var(--border-roundness, 8px) * 999);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--pinkdocs-brand-text-color, #ffffff);
    background-color: var(--pinkdocs-brand-color, #3b82f6);
    flex-shrink: 0;
}

.pinkdocs-step-number::before {
    content: counter(step-counter);
}

.pinkdocs-step-line {
    width: 1px;
    flex: 1;
    background-color: color-mix(in srgb, var(--pinkdocs-brand-color, #3b82f6) 30%, transparent);
    min-height: 100%;
}

/* Step content */
.pinkdocs-step-content {
    flex: 1;
    padding-bottom: 32px;
    min-width: 0;
}

.pinkdocs-step-item:last-child .pinkdocs-step-content {
    padding-bottom: 0;
}

.pinkdocs-step-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: -2px 0 16px 0;
    line-height: 28px;
}

[data-theme="dark"] .pinkdocs-step-title {
    color: #f9fafb;
}

.pinkdocs-step-body {
    font-size: 15px;
    line-height: 1.7;
    color: #9ca3af;
}

.pinkdocs-step-body>*:first-child {
    margin-top: 0;
}

.pinkdocs-step-body p {
    margin: 0 0 16px;
}

.pinkdocs-step-body p:last-child {
    margin-bottom: 0;
}

.pinkdocs-step-body ul,
.pinkdocs-step-body ol {
    margin: 16px 0;
    padding-left: 24px;
}

.pinkdocs-step-body li {
    margin-bottom: 8px;
    color: #9ca3af;
}

.pinkdocs-step-body li::marker {
    color: var(--pinkdocs-brand-color, #3b82f6);
}

.pinkdocs-step-body a {
    color: var(--pinkdocs-brand-color, #3b82f6);
    text-decoration: none;
}

.pinkdocs-step-body a:hover {
    text-decoration: none;
}

.pinkdocs-step-body code {
    background: #374151;
    padding: 2px 8px;
    border-radius: calc(var(--border-roundness, 8px) * 0.5);
    font-size: 14px;
    font-family: 'Fira Code', monospace;
    color: #e5e7eb;
}

/* Light Mode */
[data-theme="light"] .pinkdocs-step-number {
    color: #ffffff;
    background-color: var(--pinkdocs-brand-color, #3b82f6);
}

[data-theme="light"] .pinkdocs-step-title {
    color: #111827;
}

[data-theme="light"] .pinkdocs-step-body {
    color: #4b5563;
}

[data-theme="light"] .pinkdocs-step-body li {
    color: #4b5563;
}

[data-theme="light"] .pinkdocs-step-body code {
    background: #f3f4f6;
    color: #374151;
}

/* Responsive */
@media (max-width: 640px) {
    .pinkdocs-step-indicator {
        width: 24px;
        margin-right: 12px;
    }

    .pinkdocs-step-number {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .pinkdocs-step-title {
        font-size: 14px;
        line-height: 24px;
    }

    .pinkdocs-step-body {
        font-size: 14px;
    }

    .pinkdocs-step-content {
        padding-bottom: 24px;
    }
}

/* =========================================
   Admin Bar Fixes for Logged-in Users
   CSS Isolation: Scoped under .pinkdocs-docs-root
   ========================================= */

/* Hero Section - Desktop admin bar (32px) */
.admin-bar .pinkdocs-docs-root .pinkdocs-hero-section:first-child,
.admin-bar .pinkdocs-docs-root .pinkdocs-hero-search-section:first-child,
.admin-bar .pinkdocs-docs-root .pinkdocs-hero-image:first-child {
    margin-top: 32px;
}

/* Hero Section - Tablet admin bar (46px) */
@media screen and (max-width: 782px) {

    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-section:first-child,
    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-search-section:first-child,
    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-image:first-child {
        margin-top: 46px;
    }
}

/* Hero Section - Mobile admin bar (46px, fixed at top) */
@media screen and (max-width: 600px) {

    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-section:first-child,
    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-search-section:first-child,
    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-image:first-child {
        margin-top: 46px;
    }
}

/*
 * Hero Search block: reduced top padding when admin bar is present.
 * Inline base is 60px 24px; we add a reduced amount for admin bar.
 * CSS Isolation: Scoped under .pinkdocs-docs-root
 */
.admin-bar .pinkdocs-docs-root .pinkdocs-hero-search-section {
    padding-top: 80px !important;
    /* 60px base + 20px */
}

@media screen and (max-width: 782px) {
    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-search-section {
        padding-top: 92px !important;
        /* 60px base + 32px */
    }
}

/*
 * Hero Section block: reduced top padding when admin bar is present.
 * Base is 80px 24px; reduced increment for admin bar.
 * CSS Isolation: Scoped under .pinkdocs-docs-root for higher specificity
 */
.admin-bar .pinkdocs-docs-root .pinkdocs-hero-section {
    padding-top: 100px !important;
    /* 80px base + 20px */
}

@media screen and (max-width: 782px) {
    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-section {
        padding-top: 112px !important;
        /* 80px base + 32px */
    }
}

@media screen and (max-width: 480px) {
    .admin-bar .pinkdocs-docs-root .pinkdocs-hero-section {
        padding-top: 64px !important;
        /* 32px base + 32px */
    }
}

/* Theme isolation: PinkDocs block header fonts - use PinkDocs font when inside docs wrapper
   CSS Isolation: Scoped under .pinkdocs-docs-root for higher specificity over theme styles */
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-hero-section h1,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-docs-category-section-heading,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-docs-category-title,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-icon-cards-section .section-header h2,
.pinkdocs-docs-root .pinkdocs-wrapper .icon-card h3,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-image-cards-section .section-header h2,
.pinkdocs-docs-root .pinkdocs-wrapper .image-card h3,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-cat-articles-header h2,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-cat-title,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-changelog-title,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-changelog-version,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-changelog-empty h3,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-step-title,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-tab-button,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-version-title,
.pinkdocs-docs-root .pinkdocs-wrapper .pinkdocs-faq-title {
    font-family: var(--font-family, inherit) !important;
}
/* ==========================================================================
   Block polish: one quiet visual language for every PinkDocs block
   (hairline borders, soft tints, consistent radius, less empty space).
   Values fall back sensibly on pages outside the PinkDocs templates.
   ========================================================================== */
.pinkdocs-hero-section, .pinkdocs-alert, .pinkdocs-faq-section, .pinkdocs-icon-cards-section,
.pinkdocs-image-cards-section, .pinkdocs-cat-articles-section, .pinkdocs-steps-block,
.pinkdocs-changelog-container, .pinkdocs-tabs-block {
    --pdb-brand: var(--brand-color, #ff26ba);
    --pdb-bg: var(--bg-primary, #ffffff);
    --pdb-bg2: var(--bg-secondary, #fafafa);
    --pdb-text: var(--text-primary, #0a0a0b);
    --pdb-muted: var(--text-secondary, #52525b);
    --pdb-line: var(--border-color, rgba(10, 10, 11, 0.09));
    --pdb-r: var(--border-roundness, 8px);
}

/* ---------- Heroes ---------- */
.pinkdocs-hero-section.pinkdocs-hero-section.pinkdocs-hero-section {
    position: relative;
    overflow: hidden;
    margin: 28px 0 !important;
    padding: 52px 32px !important;
    border: 1px solid color-mix(in srgb, var(--pdb-brand) 18%, var(--pdb-line)) !important;
    border-radius: calc(var(--pdb-r) * 2) !important;
    background: color-mix(in srgb, var(--pdb-brand) 4%, var(--pdb-bg)) !important;
    box-shadow: none !important;
}
.pinkdocs-hero-section.pinkdocs-hero-section.pinkdocs-hero-section::before {
    content: "";
    position: absolute;
    inset: -60% 10% auto;
    height: 100%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pdb-brand) 20%, transparent), transparent);
    opacity: .7;
    pointer-events: none;
    z-index: 0;
}
.pinkdocs-hero-section.pinkdocs-hero-section > * { position: relative; z-index: 1; }
.pinkdocs-hero-section h1 {
    margin: 16px 0 10px !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    color: var(--pdb-text) !important;
}
.pinkdocs-hero-section h1 + p {
    max-width: 540px;
    margin: 0 auto !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--pdb-muted) !important;
}
.pinkdocs-hero-section .pinkdocs-version-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px !important;
    border: 1px solid color-mix(in srgb, var(--pdb-brand) 25%, transparent) !important;
    border-radius: calc(var(--border-roundness, 8px) * 999) !important;
    background: color-mix(in srgb, var(--pdb-brand) 8%, transparent) !important;
    font-size: 13px !important;
    color: var(--pdb-text) !important;
}
.pinkdocs-hero-section .pinkdocs-version-number {
    padding: 2px 8px !important;
    border-radius: calc(var(--border-roundness, 8px) * 999) !important;
    background: var(--pdb-brand) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.pinkdocs-hero-section .pinkdocs-hero-button { margin-top: 22px; }
.pinkdocs-hero-section .pinkdocs-hero-search-section input,
.pinkdocs-hero-search-section .pinkdocs-hero-search input { border-radius: calc(var(--pdb-r) * 1.5) !important; }
/* Hero with image: text left, picture right */
.pinkdocs-hero-section.pinkdocs-hero-with-image.pinkdocs-hero-with-image {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center !important;
    gap: 32px !important;
    padding: 40px 36px !important;
    text-align: left !important;
}
.pinkdocs-hero-with-image .pinkdocs-hero-content { max-width: none !important; text-align: left !important; }
.pinkdocs-hero-with-image .pinkdocs-hero-content h1 + p { margin: 0 !important; }
.pinkdocs-hero-with-image .pinkdocs-hero-content > div:last-child { justify-content: flex-start !important; }
.pinkdocs-hero-with-image .pinkdocs-hero-image { max-width: none !important; width: 100% !important; }
.pinkdocs-hero-with-image .pinkdocs-hero-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border: 1px solid var(--pdb-line);
    border-radius: calc(var(--pdb-r) * 1.5) !important;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45) !important;
}
@media (max-width: 760px) {
    .pinkdocs-hero-section.pinkdocs-hero-section.pinkdocs-hero-section { padding: 40px 20px !important; }
    .pinkdocs-hero-section.pinkdocs-hero-with-image.pinkdocs-hero-with-image { grid-template-columns: 1fr; padding: 32px 20px !important; }
}

/* ---------- Alerts ---------- */
.pinkdocs-alert.pinkdocs-alert {
    --pdb-tone: #2563eb;
    display: flex;
    gap: 12px;
    margin: 16px 0 !important;
    padding: 14px 16px !important;
    border: 1px solid color-mix(in srgb, var(--pdb-tone) 26%, transparent) !important;
    border-radius: calc(var(--pdb-r) * 1.25) !important;
    /* Solid surface (same as code blocks and the file tree on docs pages) tinted with the alert colour,
       so the page background no longer shows through */
    --pdb-alert-surface: var(--pdb-bg);
    background: color-mix(in srgb, var(--pdb-tone) 10%, var(--pdb-alert-surface)) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .pinkdocs-alert.pinkdocs-alert { --pdb-alert-surface: #1e1e1e; }
[data-theme="light"] .pinkdocs-alert.pinkdocs-alert { --pdb-alert-surface: #f6f8fa; }
.pinkdocs-alert.pinkdocs-alert-note { --pdb-tone: #71717a; }
.pinkdocs-alert.pinkdocs-alert-success { --pdb-tone: #16a34a; }
.pinkdocs-alert.pinkdocs-alert-warning { --pdb-tone: #d97706; }
.pinkdocs-alert.pinkdocs-alert-error { --pdb-tone: #dc2626; }
.pinkdocs-alert.pinkdocs-alert .pinkdocs-alert-icon { flex: 0 0 auto; margin-top: 2px; color: var(--pdb-tone) !important; }
.pinkdocs-alert.pinkdocs-alert .pinkdocs-alert-icon svg { width: 18px; height: 18px; }
.pinkdocs-alert.pinkdocs-alert .pinkdocs-alert-title { margin: 0 0 2px !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--pdb-text) !important; }
.pinkdocs-alert.pinkdocs-alert .pinkdocs-alert-text { font-size: 14.5px !important; line-height: 1.6 !important; color: var(--pdb-muted) !important; }
.pinkdocs-alert.pinkdocs-alert .pinkdocs-alert-text > :last-child { margin-bottom: 0; }

/* ---------- Steps: brand number, title beside it, a thin line down to the next step ---------- */
.pinkdocs-steps-block { margin: 24px 0 !important; }
.pinkdocs-steps-block .pinkdocs-step-indicator { width: 28px !important; margin-right: 18px !important; }
.pinkdocs-steps-block .pinkdocs-step-number {
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--pdb-brand) !important;
    color: var(--pinkdocs-brand-text-color, #fff) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.pinkdocs-steps-block .pinkdocs-step-line {
    flex: 1;
    width: 1px !important;
    margin: 8px 0 !important;
    border-radius: 0;
    background: var(--pdb-line) !important;
}
.pinkdocs-steps-block .pinkdocs-step-item:last-child .pinkdocs-step-line { display: none !important; }
.pinkdocs-steps-block .pinkdocs-step-content { padding-bottom: 28px !important; }
.pinkdocs-steps-block .pinkdocs-step-item:last-child .pinkdocs-step-content { padding-bottom: 0 !important; }
.pinkdocs-steps-block .pinkdocs-step-title {
    margin: 2px 0 10px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em;
    color: var(--pdb-text) !important;
}
.pinkdocs-steps-block .pinkdocs-step-body { font-size: 15.5px; line-height: 1.65; color: var(--pdb-muted); }
.pinkdocs-steps-block .pinkdocs-step-body > :first-child { margin-top: 0 !important; }
.pinkdocs-steps-block .pinkdocs-step-body > :last-child { margin-bottom: 0 !important; }

/* ---------- Section headers (FAQ and card sections) ---------- */
.pinkdocs-faq-section.pinkdocs-faq-section,
.pinkdocs-icon-cards-section.pinkdocs-icon-cards-section,
.pinkdocs-image-cards-section.pinkdocs-image-cards-section,
.pinkdocs-cat-articles-section.pinkdocs-cat-articles-section {
    margin: 40px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
.pinkdocs-icon-cards-section .section-header,
.pinkdocs-image-cards-section .section-header,
.pinkdocs-cat-articles-section .pinkdocs-cat-articles-header,
.pinkdocs-faq-section .pinkdocs-faq-header { margin: 0 auto 18px !important; padding: 0 !important; }
.pinkdocs-icon-cards-section .section-header p,
.pinkdocs-image-cards-section .section-header p,
.pinkdocs-cat-articles-section .pinkdocs-cat-articles-header p { margin: 6px auto 0 !important; font-size: 15px !important; color: var(--pdb-muted) !important; }
/* Inside an article the sections read like the rest of the page: left aligned */
.pinkdocs-article-body .pinkdocs-icon-cards-section .section-header,
.pinkdocs-article-body .pinkdocs-image-cards-section .section-header,
.pinkdocs-article-body .pinkdocs-cat-articles-header,
.pinkdocs-article-body .pinkdocs-faq-header { text-align: left !important; margin-left: 0 !important; }
.pinkdocs-article-body .pinkdocs-icon-cards-section .section-header p,
.pinkdocs-article-body .pinkdocs-image-cards-section .section-header p,
.pinkdocs-article-body .pinkdocs-cat-articles-header p { margin-left: 0 !important; }
.pinkdocs-icon-cards-section > div, .pinkdocs-image-cards-section > div { max-width: none !important; padding: 0 !important; }

/* ---------- FAQ: one accordion list ---------- */
.pinkdocs-faq-section .pinkdocs-faq-container { max-width: none !important; padding: 0 !important; }
.pinkdocs-faq-section .pinkdocs-faq-grid.pinkdocs-faq-grid--list { display: block !important; }
.pinkdocs-faq-grid--list .pinkdocs-faq-column {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden;
    border: 1px solid var(--pdb-line);
    border-radius: calc(var(--pdb-r) * 1.5);
    background: var(--pdb-bg);
}
.pinkdocs-faq-grid--list .pinkdocs-faq-item.pinkdocs-faq-item {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.pinkdocs-faq-grid--list .pinkdocs-faq-item + .pinkdocs-faq-item { border-top: 1px solid var(--pdb-line) !important; }
.pinkdocs-faq-grid--list .pinkdocs-faq-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    width: 100%;
    padding: 16px 18px !important;
    border: 0 !important;
    background: none !important;
    text-align: left !important;
    cursor: pointer;
}
.pinkdocs-faq-grid--list .pinkdocs-faq-toggle:hover { background: color-mix(in srgb, var(--pdb-text) 3%, transparent) !important; }
.pinkdocs-faq-grid--list .pinkdocs-faq-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--pdb-brand) 50%, transparent); outline-offset: -2px; }
.pinkdocs-faq-grid--list .pinkdocs-faq-question { flex: 1; margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.45 !important; color: var(--pdb-text) !important; }
.pinkdocs-faq-grid--list .pinkdocs-faq-toggle svg { order: 2; flex: 0 0 auto; width: 16px; height: 16px; margin: 0 !important; color: var(--pdb-muted); transition: transform .25s ease; }
.pinkdocs-faq-grid--list .pinkdocs-faq-item.active .pinkdocs-faq-toggle svg { transform: rotate(45deg); color: var(--pdb-brand); }
.pinkdocs-faq-grid--list .pinkdocs-faq-answer { margin: 0 !important; padding: 0 18px 16px !important; font-size: 14.5px !important; line-height: 1.65 !important; color: var(--pdb-muted) !important; }

/* ---------- Icon and image cards ---------- */
.pinkdocs-icon-cards-section .icon-cards-grid,
.pinkdocs-image-cards-section .image-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
    gap: 14px !important;
}
.pinkdocs-icon-cards-section .icon-card,
.pinkdocs-image-cards-section .image-card {
    display: flex !important;
    flex-direction: column;
    border: 1px solid var(--pdb-line) !important;
    border-radius: calc(var(--pdb-r) * 1.5) !important;
    background: var(--pdb-bg) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, transform .2s ease;
}
.pinkdocs-icon-cards-section .icon-card:hover,
.pinkdocs-image-cards-section .image-card:hover { border-color: color-mix(in srgb, var(--pdb-brand) 35%, var(--pdb-line)) !important; transform: translateY(-2px); }
.pinkdocs-icon-cards-section .icon-card { gap: 6px; padding: 20px !important; }
.pinkdocs-icon-cards-section .icon-card .card-icon { width: 36px !important; height: 36px !important; margin: 0 0 8px !important; border-radius: calc(var(--border-roundness, 8px) * 1.25) !important; }
.pinkdocs-icon-cards-section .icon-card .card-icon svg { width: 18px !important; height: 18px !important; }
.pinkdocs-icon-cards-section .icon-card h3,
.pinkdocs-image-cards-section .image-card h3 { margin: 0 0 4px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--pdb-text) !important; }
.pinkdocs-icon-cards-section .icon-card p,
.pinkdocs-image-cards-section .image-card p { flex: 1; margin: 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--pdb-muted) !important; }
.pinkdocs-icon-cards-section .icon-card-cta,
.pinkdocs-image-cards-section .image-card a:last-child { margin-top: 12px !important; font-size: 13.5px !important; font-weight: 600 !important; }
.pinkdocs-image-cards-section .image-card { overflow: hidden; padding: 0 !important; }
.pinkdocs-image-cards-section .image-card .card-image { aspect-ratio: 16 / 10; height: auto !important; margin: 0 !important; overflow: hidden; border-bottom: 1px solid var(--pdb-line); border-radius: 0 !important; }
.pinkdocs-image-cards-section .image-card .card-image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.pinkdocs-image-cards-section .image-card > div:not(.card-image) { padding: 16px 18px 18px !important; }
.pinkdocs-icon-cards-section h3 .pinkdocs-heading-link,
.pinkdocs-image-cards-section h3 .pinkdocs-heading-link,
.pinkdocs-cat-articles-section h3 .pinkdocs-heading-link { display: none !important; }

/* ---------- Category articles ---------- */
.pinkdocs-cat-articles-section .pinkdocs-cat-articles-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: 14px !important;
}
.pinkdocs-cat-articles-section .pinkdocs-cat-card {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--pdb-line) !important;
    border-radius: calc(var(--pdb-r) * 1.5) !important;
    background: var(--pdb-bg) !important;
    box-shadow: none !important;
}
.pinkdocs-cat-articles-section .pinkdocs-cat-card-header { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 14px 16px !important; border-bottom: 1px solid var(--pdb-line) !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-icon { width: 32px !important; height: 32px !important; flex: 0 0 auto; border-radius: calc(var(--border-roundness, 8px) * 1.125) !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-icon svg { width: 16px !important; height: 16px !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pinkdocs-cat-articles-section .pinkdocs-cat-title { margin: 0 !important; font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--pdb-text) !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-info > :not(.pinkdocs-cat-title) { margin: 0 !important; padding: 1px 7px !important; border-radius: calc(var(--border-roundness, 8px) * 999) !important; background: color-mix(in srgb, var(--pdb-text) 6%, transparent) !important; font-size: 11.5px !important; color: var(--pdb-muted) !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-card-body { display: flex !important; flex-direction: column !important; flex: 1; gap: 0 !important; padding: 6px !important; }
.pinkdocs-cat-articles-section a.pinkdocs-cat-article {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: var(--border-roundness, 8px) !important;
    background: none !important;
    font-size: 14px !important;
    line-height: 1.4;
    color: var(--pdb-text) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.pinkdocs-cat-articles-section a.pinkdocs-cat-article:hover { background: color-mix(in srgb, var(--pdb-text) 5%, transparent) !important; color: var(--pdb-brand) !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-article-icon { display: inline-flex !important; flex: 0 0 auto; margin: 0 !important; color: var(--pdb-muted); }
.pinkdocs-cat-articles-section .pinkdocs-cat-article-icon svg { width: 15px !important; height: 15px !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-card-footer { margin: 0 !important; padding: 10px 16px !important; border-top: 1px solid var(--pdb-line) !important; }
.pinkdocs-cat-articles-section .pinkdocs-cat-view-all { font-size: 13.5px !important; font-weight: 600 !important; color: var(--pdb-brand) !important; }

/* ---------- Changelog block: same clean list as the changelog page ---------- */
.pinkdocs-changelog-container .pinkdocs-changelog-timeline::before,
.pinkdocs-changelog-container .pinkdocs-changelog-entry::before { display: none !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-entry {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0 !important;
    border-bottom: 1px solid var(--pdb-line);
}
.pinkdocs-changelog-container .pinkdocs-changelog-entry:last-child { border-bottom: 0; }
.pinkdocs-changelog-container .pinkdocs-changelog-meta { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; margin: 0 !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-version { font-size: 17px !important; font-weight: 650 !important; color: var(--pdb-text) !important; text-decoration: none; }
.pinkdocs-changelog-container .pinkdocs-changelog-date { padding: 0 !important; border: 0 !important; background: none !important; font-size: 13px !important; color: var(--pdb-muted) !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-items { margin: 0 !important; background: none !important; border-radius: 0 !important; overflow: visible !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-item { gap: 14px !important; padding: 8px 0 !important; border: 0 !important; background: none !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-item .pinkdocs-changelog-badge { flex: 0 0 auto; min-width: 72px; justify-content: center; margin-top: 2px; padding: 2px 8px !important; border-radius: calc(var(--border-roundness, 8px) * 0.75) !important; font-size: 11.5px !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-item .pinkdocs-changelog-badge svg { display: none; }
.pinkdocs-changelog-container .pinkdocs-changelog-item-text { font-size: 15px !important; line-height: 1.6 !important; color: var(--pdb-text) !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-item-image,
.pinkdocs-changelog-container .pinkdocs-changelog-item-video { margin-top: 12px !important; border: 1px solid var(--pdb-line); border-radius: calc(var(--pdb-r) * 1.25) !important; overflow: hidden; }
.pinkdocs-changelog-container .pinkdocs-changelog-engagement { margin-top: 8px !important; padding: 0 !important; border: 0 !important; background: none !important; }
.pinkdocs-changelog-container .pinkdocs-changelog-reactions { justify-content: flex-start !important; gap: 6px !important; }
.pinkdocs-changelog-container .pinkdocs-reaction-btn { height: 28px; padding: 0 9px !important; border-radius: calc(var(--border-roundness, 8px) * 999) !important; background: none !important; font-size: 12.5px !important; box-shadow: none !important; }
.pinkdocs-changelog-container .pinkdocs-reaction-count { padding: 0 !important; background: none !important; font-size: 12px !important; }
@media (max-width: 640px) {
    .pinkdocs-changelog-container .pinkdocs-changelog-entry { grid-template-columns: 1fr; gap: 10px; }
    .pinkdocs-changelog-container .pinkdocs-changelog-meta { flex-direction: row !important; align-items: baseline !important; gap: 10px !important; }
}
/* Heroes: the template styles set a strong tint with higher specificity; :not(#…) lifts these above them */
.pinkdocs-hero-section.pinkdocs-hero-section:not(#pd-hero-none) {
    background: color-mix(in srgb, var(--pdb-brand) 4%, var(--pdb-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--pdb-brand) 18%, var(--pdb-line)) !important;
}
/* Steps: visible connector on dark backgrounds, muted instructions (article paragraph colours would win otherwise) */
.pinkdocs-steps-block .pinkdocs-step-line { background: color-mix(in srgb, var(--pdb-text) 16%, transparent) !important; }
.pinkdocs-steps-block .pinkdocs-step-body,
.pinkdocs-steps-block .pinkdocs-step-body p,
.pinkdocs-steps-block .pinkdocs-step-body li { color: var(--pdb-muted) !important; }
.pinkdocs-steps-block .pinkdocs-step-title { margin-bottom: 14px !important; }
.pinkdocs-steps-block .pinkdocs-step-content { padding-bottom: 36px !important; }
.pinkdocs-steps-block .pinkdocs-step-item:last-child .pinkdocs-step-content { padding-bottom: 0 !important; }

/* Hero search: quick links under the search box */
.pinkdocs-hero-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 600px;
    margin: 18px auto 0;
}
.pinkdocs-hero-quick-label {
    margin-right: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}
.pinkdocs-hero-quick-links .pinkdocs-hero-quick-link {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border-color, rgba(10, 10, 11, 0.12));
    border-radius: calc(var(--border-roundness, 8px) * 999);
    background: color-mix(in srgb, var(--bg-primary, #fff) 70%, transparent);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-primary, #111827) !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.pinkdocs-hero-quick-links .pinkdocs-hero-quick-link:hover,
.pinkdocs-hero-quick-links .pinkdocs-hero-quick-link:focus-visible {
    border-color: color-mix(in srgb, var(--brand-color, #ff26ba) 50%, transparent);
    background: color-mix(in srgb, var(--brand-color, #ff26ba) 8%, transparent);
    color: var(--brand-color, #ff26ba) !important;
    outline: none;
}
@media (max-width: 480px) {
    .pinkdocs-hero-quick-links { gap: 6px; margin-top: 14px; }
    .pinkdocs-hero-quick-label { width: 100%; text-align: center; }
}

/* Hero quick links: icon before each label (doc for articles, magnifier for searches) */
.pinkdocs-hero-quick-links .pinkdocs-hero-quick-link { gap: 6px; }
.pinkdocs-hero-quick-links .pinkdocs-hero-quick-link svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--text-secondary, #6b7280);
    transition: color .15s ease;
}
.pinkdocs-hero-quick-links .pinkdocs-hero-quick-link:hover svg,
.pinkdocs-hero-quick-links .pinkdocs-hero-quick-link:focus-visible svg {
    color: var(--brand-color, var(--pinkdocs-brand-color, #ff26ba));
}

/* Category grid block: description centred under the title */
.pinkdocs-docs-category-section-description { margin-left: auto !important; margin-right: auto !important; }

/* Icon and image cards: "Cards per row" setting (class added by the block, saved markup unchanged) */
.pinkdocs-icon-cards-section.pinkdocs-cards-cols-1 .icon-cards-grid,
.pinkdocs-image-cards-section.pinkdocs-cards-cols-1 .image-cards-grid { grid-template-columns: minmax(0, 1fr) !important; }
.pinkdocs-icon-cards-section.pinkdocs-cards-cols-2 .icon-cards-grid,
.pinkdocs-image-cards-section.pinkdocs-cards-cols-2 .image-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pinkdocs-icon-cards-section.pinkdocs-cards-cols-3 .icon-cards-grid,
.pinkdocs-image-cards-section.pinkdocs-cards-cols-3 .image-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.pinkdocs-icon-cards-section.pinkdocs-cards-cols-4 .icon-cards-grid,
.pinkdocs-image-cards-section.pinkdocs-cards-cols-4 .image-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) {
    .pinkdocs-icon-cards-section.pinkdocs-cards-cols-3 .icon-cards-grid,
    .pinkdocs-image-cards-section.pinkdocs-cards-cols-3 .image-cards-grid,
    .pinkdocs-icon-cards-section.pinkdocs-cards-cols-4 .icon-cards-grid,
    .pinkdocs-image-cards-section.pinkdocs-cards-cols-4 .image-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .pinkdocs-icon-cards-section[class*="pinkdocs-cards-cols-"] .icon-cards-grid,
    .pinkdocs-image-cards-section[class*="pinkdocs-cards-cols-"] .image-cards-grid { grid-template-columns: minmax(0, 1fr) !important; }
}


/* Corners saved inside block markup as inline styles (hero, image and icon cards, images) follow
   Appearance → Border roundness too. Matched by value so the saved HTML never has to change. */
[class*="wp-block-pinkdocs-"][style*="border-radius:8px"],
[class*="wp-block-pinkdocs-"] [style*="border-radius:8px"],
[class*="wp-block-pinkdocs-"][style*="border-radius: 8px"],
[class*="wp-block-pinkdocs-"] [style*="border-radius: 8px"] {
    border-radius: var(--border-roundness, 8px) !important;
}
[class*="wp-block-pinkdocs-"][style*="border-radius:12px"],
[class*="wp-block-pinkdocs-"] [style*="border-radius:12px"],
[class*="wp-block-pinkdocs-"][style*="border-radius: 12px"],
[class*="wp-block-pinkdocs-"] [style*="border-radius: 12px"] {
    border-radius: calc(var(--border-roundness, 8px) * 1.5) !important;
}
[class*="wp-block-pinkdocs-"][style*="border-radius:20px"],
[class*="wp-block-pinkdocs-"] [style*="border-radius:20px"],
[class*="wp-block-pinkdocs-"][style*="border-radius: 20px"],
[class*="wp-block-pinkdocs-"] [style*="border-radius: 20px"] {
    border-radius: calc(var(--border-roundness, 8px) * 2.5) !important;
}

/* ==========================================================================
   File Tree (pinkdocs/tree) — includes/class-pinkdocs-tree.php, assets/js/tree.js
   Brand colour, roundness and light/dark colours come from the PinkDocs variables;
   --tree-highlight on the block (or a parent) overrides the highlight colour.
   ========================================================================== */
.pinkdocs-tree {
    /* Same surface as PinkDocs code blocks: dark by default, light on light-theme pages. Text and
       line colours are set with the background so they always contrast with it. */
    --pd-tree-hl: var(--tree-highlight, var(--brand-color, var(--pinkdocs-brand-color, #ff26ba)));
    --pd-tree-bg: #1e1e1e;
    --pd-tree-text: #e6edf3;
    --pd-tree-muted: #9198a1;
    --pd-tree-line: rgba(255, 255, 255, 0.1);
    --pd-tree-indent: 18px;
    margin: 20px 0;
    padding: 8px;
    border: 1px solid var(--pd-tree-line);
    border-radius: calc(var(--border-roundness, 8px) * 1.5);
    background: var(--pd-tree-bg);
    color: var(--pd-tree-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    line-height: 1.4;
    overflow-x: auto;
}
.pinkdocs-tree-title {
    margin: 2px 6px 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pd-tree-line);
    font-family: var(--font-family, inherit);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pd-tree-muted);
}

[data-theme="light"] .pinkdocs-tree {
    --pd-tree-bg: #f6f8fa;
    --pd-tree-text: #1f2328;
    --pd-tree-muted: #59636e;
    --pd-tree-line: #e1e4e8;
}

/* Lists: no bullets, spacing or markers from article styles */
.pinkdocs-tree ul.pinkdocs-tree-root,
.pinkdocs-tree ul.pinkdocs-tree-group,
.pinkdocs-tree li.pinkdocs-tree-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pinkdocs-tree li.pinkdocs-tree-item::before,
.pinkdocs-tree li.pinkdocs-tree-item::after { content: none !important; display: none !important; }
.pinkdocs-tree li.pinkdocs-tree-item::marker { content: none; }
.pinkdocs-tree ul.pinkdocs-tree-group[hidden] { display: none !important; }

/* Indent guide under each open folder */
.pinkdocs-tree ul.pinkdocs-tree-group {
    position: relative;
}
.pinkdocs-tree ul.pinkdocs-tree-group::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 4px;
    left: calc(var(--pd-tree-level, 0) * var(--pd-tree-indent) + 17px);
    width: 1px;
    background: var(--pd-tree-line);
}
.pinkdocs-tree li.pinkdocs-tree-item > ul.pinkdocs-tree-group { --pd-tree-level: inherit; }

/* Rows */
.pinkdocs-tree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    /* Indent with a margin, not padding: hover and highlight backgrounds start at the item's own level
       (right of the folder's guide line) instead of at the tree's left edge */
    margin-left: calc(var(--pd-tree-level, 0) * var(--pd-tree-indent));
    padding: 3px 10px 3px 6px;
    border-radius: max(2px, calc(var(--border-roundness, 8px) * 0.75));
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.pinkdocs-tree .is-folder > .pinkdocs-tree-row { cursor: pointer; }
.pinkdocs-tree .is-folder.is-locked > .pinkdocs-tree-row { cursor: default; }
.pinkdocs-tree .is-folder > .pinkdocs-tree-row:hover,
.pinkdocs-tree .is-file > .pinkdocs-tree-row:hover {
    background: color-mix(in srgb, var(--pd-tree-text) 5%, transparent);
}

/* Keyboard focus: ring on the row, not around the whole folder */
.pinkdocs-tree li.pinkdocs-tree-item { outline: none; }
.pinkdocs-tree li.pinkdocs-tree-item:focus-visible > .pinkdocs-tree-row {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pd-tree-hl) 55%, transparent);
}

.pinkdocs-tree-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--pd-tree-muted);
    transition: transform 0.15s ease;
}
.pinkdocs-tree-chevron svg { width: 14px; height: 14px; }
.pinkdocs-tree [aria-expanded="true"] > .pinkdocs-tree-row > .pinkdocs-tree-chevron { transform: rotate(90deg); }

.pinkdocs-tree-icon {
    display: inline-flex;
    flex: 0 0 16px;
    color: var(--pd-tree-muted);
}
.pinkdocs-tree-icon svg { width: 16px; height: 16px; }
.pinkdocs-tree .is-folder > .pinkdocs-tree-row .pinkdocs-tree-icon { color: color-mix(in srgb, var(--pd-tree-hl) 70%, var(--pd-tree-muted)); }
/* Open folders (and locked ones, always open) show the open-folder icon */
.pinkdocs-tree .pinkdocs-tree-svg--folder-open { display: none; }
.pinkdocs-tree [aria-expanded="true"] > .pinkdocs-tree-row .pinkdocs-tree-svg--folder,
.pinkdocs-tree .is-locked > .pinkdocs-tree-row .pinkdocs-tree-svg--folder { display: none; }
.pinkdocs-tree [aria-expanded="true"] > .pinkdocs-tree-row .pinkdocs-tree-svg--folder-open,
.pinkdocs-tree .is-locked > .pinkdocs-tree-row .pinkdocs-tree-svg--folder-open { display: block; }
.pinkdocs-tree--no-icons .pinkdocs-tree-icon { display: none; }

.pinkdocs-tree-name { color: var(--pd-tree-text); }
.pinkdocs-tree .is-folder > .pinkdocs-tree-row .pinkdocs-tree-name { font-weight: 600; }
.pinkdocs-tree-note {
    margin-left: 10px;
    font-family: var(--font-family, inherit);
    font-size: 12.5px;
    color: var(--pd-tree-muted);
    white-space: nowrap;
}
.pinkdocs-tree-note::before { content: "— "; opacity: 0.6; }

/* Highlight: the item stands out; inside a highlighted folder everything is tinted */
.pinkdocs-tree .is-highlight > .pinkdocs-tree-row {
    background: color-mix(in srgb, var(--pd-tree-hl) 14%, transparent);
}
.pinkdocs-tree .is-highlight > .pinkdocs-tree-row .pinkdocs-tree-name,
.pinkdocs-tree .is-highlight > .pinkdocs-tree-row .pinkdocs-tree-icon { color: var(--pd-tree-hl); }
.pinkdocs-tree .is-highlight > .pinkdocs-tree-row .pinkdocs-tree-name { font-weight: 600; }
.pinkdocs-tree .in-highlight > .pinkdocs-tree-row .pinkdocs-tree-name { color: color-mix(in srgb, var(--pd-tree-hl) 65%, var(--pd-tree-text)); }
.pinkdocs-tree .in-highlight > .pinkdocs-tree-row .pinkdocs-tree-icon { color: color-mix(in srgb, var(--pd-tree-hl) 55%, var(--pd-tree-muted)); }
.pinkdocs-tree .is-highlight > ul.pinkdocs-tree-group::before { background: color-mix(in srgb, var(--pd-tree-hl) 45%, transparent); }

/* Editor: text box above the preview, empty state */
.pinkdocs-tree-source textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    tab-size: 2;
}
.pinkdocs-tree-empty {
    padding: 16px;
    border: 1px dashed var(--pd-tree-line, rgba(0, 0, 0, 0.15));
    border-radius: var(--border-roundness, 8px);
    color: #757575;
    font-size: 13px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .pinkdocs-tree-chevron { transition: none; }
}


/* Code blocks: the line-number column ends at the block's bottom edge, and the block clips its
   contents to its rounded corners (iOS Safari ignores overflow:hidden + border-radius for positioned
   children without isolation) */
.pinkdocs-code-block .pinkdocs-line-numbers,
.pinkdocs-multi-lang-code-block .pinkdocs-line-numbers {
    bottom: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.pinkdocs-code-block,
.pinkdocs-multi-lang-code-block {
    isolation: isolate;
}

/* ==========================================================================
   Toasts (assets/js/toast.js)
   Only opacity/transform animate on the toast, so it never shifts sideways; a leaving
   toast fades, then its slot collapses so the others glide into place.
   ========================================================================== */
.pd-toast-region {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.pd-toast-slot {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0;
}
/* After the toast has slid out, its slot closes (height set by toast.js) so the others glide */
.pd-toast-slot.is-collapsing {
    overflow: hidden;
    padding: 0;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pd-toast {
    --pd-toast-tone: var(--brand-color, var(--pinkdocs-brand-color, #ff26ba));
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 9px 14px 9px 9px;
    border: 1px solid var(--border-color, rgba(10, 10, 11, 0.08));
    border-radius: calc(var(--border-roundness, 8px) * 1.25);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #0a0a0b);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06);
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    pointer-events: auto;
    animation: pd-toast-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity;
}
[data-theme="dark"] .pd-toast {
    background: #1c1c1f;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f4f4f5;
    box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Exit is its own animation (the entry animation's end state would otherwise block a transition) */
.pd-toast-slot.is-leaving .pd-toast { animation: pd-toast-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards; }
.pd-toast-slot.is-bump .pd-toast { animation: pd-toast-bump 0.3s ease; }
.pd-toast--error { --pd-toast-tone: #ef4444; }
.pd-toast--info { --pd-toast-tone: var(--text-secondary, #71717a); }

.pd-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pd-toast-tone) 15%, transparent);
    color: var(--pd-toast-tone);
}
.pd-toast-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-toast-title { font-weight: 600; }
.pd-toast-title + .pd-toast-text { font-weight: 400; opacity: 0.8; }
.pd-toast-close {
    display: inline-flex;
    margin: -4px -6px -4px 4px;
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
}
.pd-toast-close:hover,
.pd-toast-close:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }

@keyframes pd-toast-in {
    from { opacity: 0; transform: translateX(calc(100% + 24px)); }
    60% { opacity: 1; }
    to { opacity: 1; transform: none; }
}
@keyframes pd-toast-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(calc(100% + 24px)); }
}
@keyframes pd-toast-bump {
    40% { transform: scale(1.03); }
}

/* Phones: bottom right as well, just above the Ask AI bar (24px from the bottom, 54px tall) */
@media (max-width: 768px) {
    .pd-toast-region {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 32px);
    }
    body:has(#pinkdocs-ai-question) .pd-toast-region {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }
    .pd-toast { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pd-toast { animation: none; transition: none; }
    .pd-toast-slot { transition: none; }
}

/* ==========================================================================
   API reference blocks — includes/class-pinkdocs-api-docs.php, assets/js/api-docs.js
   Endpoint badge, parameter lists, request/response examples (tabs + copy) and method colours.
   Light by default; [data-theme="dark"] pages get the dark surface.
   ========================================================================== */
.pinkdocs-api-endpoint,
.pinkdocs-api-params,
.pinkdocs-api-panel {
    --pd-api-line: var(--border-color, #e5e7eb);
    --pd-api-text: var(--text-primary, #111827);
    --pd-api-muted: var(--text-secondary, #6b7280);
    --pd-api-surface: var(--bg-secondary, #f9fafb);
    --pd-api-radius: var(--border-roundness, 8px);
    --pd-api-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Method colours (badges here and in the docs sidebar) */
.pinkdocs-api-method,
.pinkdocs-sidebar-method {
    --pd-m: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 7px;
    border-radius: calc(var(--border-roundness, 8px) * .6);
    background: color-mix(in srgb, var(--pd-m) 12%, transparent);
    color: var(--pd-m);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}
:is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-get { --pd-m: #16a34a; }
:is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-post { --pd-m: #2563eb; }
:is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-put { --pd-m: #d97706; }
:is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-patch { --pd-m: #7c3aed; }
:is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-delete { --pd-m: #dc2626; }
:is(.pinkdocs-api-method, .pinkdocs-sidebar-method):is(.is-head, .is-options) { --pd-m: #6b7280; }
[data-theme="dark"] :is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-get { --pd-m: #4ade80; }
[data-theme="dark"] :is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-post { --pd-m: #60a5fa; }
[data-theme="dark"] :is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-put { --pd-m: #fbbf24; }
[data-theme="dark"] :is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-patch { --pd-m: #a78bfa; }
[data-theme="dark"] :is(.pinkdocs-api-method, .pinkdocs-sidebar-method).is-delete { --pd-m: #f87171; }
[data-theme="dark"] :is(.pinkdocs-api-method, .pinkdocs-sidebar-method):is(.is-head, .is-options) { --pd-m: #9ca3af; }

/* Endpoint */
.pinkdocs-api-endpoint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0;
    padding: 6px 6px 6px 8px;
    border: 1px solid var(--pd-api-line);
    border-radius: calc(var(--pd-api-radius) * 1.25);
    background: var(--pd-api-surface);
    min-width: 0;
}
.pinkdocs-api-endpoint .pinkdocs-api-method { height: 26px; font-size: 12.5px; }
.pinkdocs-api-path {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-family: var(--pd-api-mono);
    font-size: 14px;
    color: var(--pd-api-text);
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.pinkdocs-api-path::-webkit-scrollbar { display: none; }
.pinkdocs-api-base { color: var(--pd-api-muted); }
.pinkdocs-api-path-param { color: var(--brand-color, #ff26ba); }

/* Copy buttons */
.pinkdocs-api-copy {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--pd-api-radius, 8px);
    background: transparent;
    color: var(--pd-api-muted, #6b7280);
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.pinkdocs-api-copy:hover,
.pinkdocs-api-copy:focus-visible { color: var(--pd-api-text, #111827); background: color-mix(in srgb, currentColor 10%, transparent); outline: none; }
.pinkdocs-api-copy.is-copied { color: #16a34a; }

/* Flags: required / deprecated */
.pinkdocs-api-flag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    font-family: var(--pd-api-mono, monospace);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
}
.pinkdocs-api-flag.is-required { background: rgba(220, 38, 38, .08); color: #dc2626; }
.pinkdocs-api-flag.is-deprecated { background: rgba(217, 119, 6, .1); color: #b45309; }
[data-theme="dark"] .pinkdocs-api-flag.is-required { background: rgba(248, 113, 113, .12); color: #f87171; }
[data-theme="dark"] .pinkdocs-api-flag.is-deprecated { background: rgba(251, 191, 36, .12); color: #fbbf24; }

/* Parameters */
.pinkdocs-api-params { margin: 32px 0; }
.pinkdocs-article-body .pinkdocs-api-params-title,
.pinkdocs-api-params-title {
    margin: 0 0 4px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pd-api-line);
}
.pinkdocs-api-param-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.pinkdocs-api-param {
    margin: 0 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--pd-api-line);
    list-style: none !important;
}
.pinkdocs-api-param::before, .pinkdocs-api-param::marker { content: none !important; }
.pinkdocs-api-param-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pinkdocs-api-param-in {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--pd-api-text) 8%, transparent);
    color: var(--pd-api-text);
    font-family: var(--pd-api-mono);
    font-size: 11.5px;
    font-weight: 500;
}
.pinkdocs-article-body .pinkdocs-api-param-name,
.pinkdocs-api-param-name {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-family: var(--pd-api-mono);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pd-api-text) !important;
}
.pinkdocs-api-param-type { font-family: var(--pd-api-mono); font-size: 13px; color: var(--pd-api-muted); }
.pinkdocs-api-param-default { font-size: 12.5px; color: var(--pd-api-muted); }
.pinkdocs-api-param-default code { font-size: 12px; }
.pinkdocs-api-param-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--pd-api-muted); }
.pinkdocs-api-param-desc a { color: var(--brand-color, #ff26ba); }

/* Request / response panels */
.pinkdocs-api-panel {
    --pd-api-code-bg: #fafafa;
    --pd-api-code-text: #24292f;
    --pd-api-head-bg: #f3f4f6;
    margin: 24px 0;
    border: 1px solid var(--pd-api-line);
    border-radius: calc(var(--pd-api-radius) * 1.5);
    background: var(--pd-api-code-bg);
    overflow: hidden;
}
[data-theme="dark"] .pinkdocs-api-panel {
    --pd-api-code-bg: #161618;
    --pd-api-code-text: #e6edf3;
    --pd-api-head-bg: #1d1d20;
}
.pinkdocs-api-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 6px 6px 8px;
    border-bottom: 1px solid var(--pd-api-line);
    background: var(--pd-api-head-bg);
}
.pinkdocs-api-panel-title { flex: 0 0 auto; padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--pd-api-text); }
.pinkdocs-api-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pinkdocs-api-tabs::-webkit-scrollbar { display: none; }
.pinkdocs-api-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--pd-api-radius);
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--pd-api-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background-color .15s, border-color .15s;
}
.pinkdocs-api-tab:hover { color: var(--pd-api-text); }
.pinkdocs-api-tab.is-active {
    border-color: var(--pd-api-line);
    background: var(--pd-api-code-bg);
    color: var(--pd-api-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.pinkdocs-api-tab:focus-visible { outline: 2px solid var(--brand-color, #ff26ba); outline-offset: 1px; }
.pinkdocs-api-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.pinkdocs-api-status-dot.is-success { background: #16a34a; }
.pinkdocs-api-status-dot.is-redirect { background: #2563eb; }
.pinkdocs-api-status-dot.is-client { background: #d97706; }
.pinkdocs-api-status-dot.is-server { background: #dc2626; }
.pinkdocs-api-code[hidden] { display: none !important; }
.pinkdocs-api-code-note { padding: 10px 16px 0; font-size: 13px; color: var(--pd-api-muted); }
.pinkdocs-api-panel pre {
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    max-height: 480px;
    overflow: auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.pinkdocs-api-panel pre code,
.pinkdocs-api-panel pre code[class*="language-"] {
    display: block;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-family: var(--pd-api-mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--pd-api-code-text) !important;
    text-shadow: none !important;
    white-space: pre;
    tab-size: 2;
}
/* Token colours (light, GitHub-like) */
.pinkdocs-api-panel .token.comment, .pinkdocs-api-panel .token.prolog, .pinkdocs-api-panel .token.doctype, .pinkdocs-api-panel .token.cdata { color: #6e7781; font-style: italic; }
.pinkdocs-api-panel .token.punctuation, .pinkdocs-api-panel .token.operator { color: #57606a; background: none; }
.pinkdocs-api-panel .token.property, .pinkdocs-api-panel .token.tag, .pinkdocs-api-panel .token.constant, .pinkdocs-api-panel .token.symbol { color: #0550ae; }
.pinkdocs-api-panel .token.boolean, .pinkdocs-api-panel .token.number { color: #0550ae; }
.pinkdocs-api-panel .token.string, .pinkdocs-api-panel .token.char, .pinkdocs-api-panel .token.attr-value, .pinkdocs-api-panel .token.url { color: #0a3069; background: none; }
.pinkdocs-api-panel .token.keyword, .pinkdocs-api-panel .token.atrule, .pinkdocs-api-panel .token.important { color: #cf222e; }
.pinkdocs-api-panel .token.function, .pinkdocs-api-panel .token.class-name, .pinkdocs-api-panel .token.builtin { color: #8250df; }
.pinkdocs-api-panel .token.variable, .pinkdocs-api-panel .token.parameter, .pinkdocs-api-panel .token.attr-name { color: #953800; }
/* Token colours (dark) */
[data-theme="dark"] .pinkdocs-api-panel .token.comment, [data-theme="dark"] .pinkdocs-api-panel .token.prolog, [data-theme="dark"] .pinkdocs-api-panel .token.doctype, [data-theme="dark"] .pinkdocs-api-panel .token.cdata { color: #8b949e; }
[data-theme="dark"] .pinkdocs-api-panel .token.punctuation, [data-theme="dark"] .pinkdocs-api-panel .token.operator { color: #c9d1d9; }
[data-theme="dark"] .pinkdocs-api-panel .token.property, [data-theme="dark"] .pinkdocs-api-panel .token.tag, [data-theme="dark"] .pinkdocs-api-panel .token.constant, [data-theme="dark"] .pinkdocs-api-panel .token.symbol,
[data-theme="dark"] .pinkdocs-api-panel .token.boolean, [data-theme="dark"] .pinkdocs-api-panel .token.number { color: #79c0ff; }
[data-theme="dark"] .pinkdocs-api-panel .token.string, [data-theme="dark"] .pinkdocs-api-panel .token.char, [data-theme="dark"] .pinkdocs-api-panel .token.attr-value, [data-theme="dark"] .pinkdocs-api-panel .token.url { color: #a5d6ff; }
[data-theme="dark"] .pinkdocs-api-panel .token.keyword, [data-theme="dark"] .pinkdocs-api-panel .token.atrule, [data-theme="dark"] .pinkdocs-api-panel .token.important { color: #ff7b72; }
[data-theme="dark"] .pinkdocs-api-panel .token.function, [data-theme="dark"] .pinkdocs-api-panel .token.class-name, [data-theme="dark"] .pinkdocs-api-panel .token.builtin { color: #d2a8ff; }
[data-theme="dark"] .pinkdocs-api-panel .token.variable, [data-theme="dark"] .pinkdocs-api-panel .token.parameter, [data-theme="dark"] .pinkdocs-api-panel .token.attr-name { color: #ffa657; }

/* Examples column: in place by default (phones, tablets, the editor); see templates for the wide layout */
.pinkdocs-api-examples { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.pinkdocs-api-examples > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Sidebar badge before the article title */
/* (the link is a flex row with a gap, so no margin is needed) */
.pinkdocs-sidebar-method {
    height: 18px;
    min-width: 34px;
    padding: 0 5px;
    font-size: 10.5px;
}

/* ---------- Editor forms (block selected) ---------- */
.pinkdocs-api-ed { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff; }
.pinkdocs-api-ed .components-base-control { margin-bottom: 0 !important; }
.pinkdocs-api-ed .components-base-control__field { margin-bottom: 4px; }
.pinkdocs-api-ed-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #ececec; border-radius: 8px; background: #fafafa; }
.pinkdocs-api-ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pinkdocs-api-ed-row-head, .pinkdocs-api-ed-row-foot, .pinkdocs-api-ed-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pinkdocs-api-ed-row-foot { align-items: center; }
.pinkdocs-api-ed-row-foot .components-toggle-control { margin: 0; }
.pinkdocs-api-ed-bar .pinkdocs-api-ed-title { flex: 1 1 200px; }
.pinkdocs-api-ed-row-tools { display: flex; gap: 2px; margin-left: auto; }
.pinkdocs-api-ed-code textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; }
.pinkdocs-api-ed-empty { padding: 18px; border: 1px dashed #d0d0d0; border-radius: 8px; color: #757575; text-align: center; font-size: 13px; }
.pinkdocs-api-ed-endpoint select.pinkdocs-api-method { height: 28px; padding: 0 22px 0 8px; border: 0; font-size: 12.5px; cursor: pointer; }
.pinkdocs-api-ed-endpoint .pinkdocs-api-ed-path { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.pinkdocs-api-ed-endpoint .pinkdocs-api-ed-path:focus { border-color: var(--wp-admin-theme-color, #3858e9); background: #fff; outline: none; }
.pinkdocs-api-ed-examples { padding: 12px; border: 1px dashed #cfcfd5; border-radius: 12px; }
.pinkdocs-api-ed-examples-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #3c3c43; }
.pinkdocs-api-ed-examples-label svg { width: 16px; height: 16px; }
.pinkdocs-api-ed-examples-label small { margin-left: auto; font-weight: 400; color: #8a8a8e; }
/* API blocks sit inside the article, whose code, heading and button styles are strong (and use
   !important): keep the blocks' own sizes and colours, one step below the body text */
.pinkdocs-api-endpoint .pinkdocs-api-path { font-size: 13px !important; color: var(--pd-api-text) !important; background: none !important; padding: 0 !important; }
.pinkdocs-api-endpoint .pinkdocs-api-base { color: var(--pd-api-muted) !important; }
.pinkdocs-api-endpoint .pinkdocs-api-path-param { color: var(--brand-color, #ff26ba) !important; }
.pinkdocs-api-endpoint .pinkdocs-api-method { height: 22px; font-size: 11px; }
.pinkdocs-api-endpoint { padding: 4px 4px 4px 6px; gap: 8px; }
.pinkdocs-api-copy { width: 28px; height: 28px; }
.pinkdocs-api-copy svg { width: 14px; height: 14px; }
.pinkdocs-article-body .pinkdocs-api-params .pinkdocs-api-params-title,
.pinkdocs-api-params .pinkdocs-api-params-title { font-size: 17px !important; line-height: 1.4 !important; font-weight: 600 !important; padding-bottom: 8px; }
.pinkdocs-api-param { padding: 12px 0 !important; }
.pinkdocs-api-params .pinkdocs-api-param-name { font-size: 13.5px !important; }
.pinkdocs-api-param-type { font-size: 12px; }
.pinkdocs-api-flag, .pinkdocs-api-param-in { height: 18px; font-size: 11px; }
.pinkdocs-api-param-default { font-size: 12px; }
.pinkdocs-api-params .pinkdocs-api-param-default code { font-size: 11.5px !important; }
.pinkdocs-api-param-desc { margin-top: 4px; font-size: 14px; line-height: 1.55; }
.pinkdocs-api-params .pinkdocs-api-param-desc code { font-size: 12.5px !important; }
.pinkdocs-api-panel .pinkdocs-api-tab { height: 26px; padding: 0 8px; font-size: 12.5px !important; line-height: 1 !important; }
.pinkdocs-api-panel-head { min-height: 38px; padding: 4px 4px 4px 6px; }
.pinkdocs-api-panel-title { font-size: 12px; }
.pinkdocs-api-panel pre { padding: 12px 14px 14px !important; }
.pinkdocs-api-panel pre code,
.pinkdocs-api-panel pre code[class*="language-"] { font-size: 12.5px !important; line-height: 1.65 !important; }
.pinkdocs-api-code-note { padding: 8px 14px 0; font-size: 12.5px; }

/* Changelog block: which changelog a release belongs to, when there are two (e.g. Free and Pro) */
.pinkdocs-changelog-tab-label {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-color, #ff26ba) 12%, transparent);
    color: var(--brand-color, #ff26ba);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}