/* ==========================================================================
   Darkshop Readability v2.0 — 2026 Edition
   
   Tech stack:
   • @layer cascade control — plugin never fights theme CSS
   • CSS Nesting — native, zero preprocessor
   • text-wrap: pretty/balance — browser-native orphan/widow control
   • Container queries — responds to parent, not viewport
   • light-dark() — single-declaration dark mode
   • color-mix() — dynamic color tints
   • lh unit — spacing relative to line-height
   • content-visibility: auto — off-screen rendering skip
   • :has() relational selector
   • initial-letter — drop cap
   • prefers-reduced-motion / prefers-contrast
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer: plugin styles sit BELOW theme in cascade
   Theme can always override without !important
   -------------------------------------------------------------------------- */
@layer dsr-base, dsr-layout, dsr-blocks, dsr-collapse, dsr-a11y;

/* --------------------------------------------------------------------------
   Color Scheme — opt-in to light-dark()
   -------------------------------------------------------------------------- */
@layer dsr-base {
    .dsr {
        color-scheme: light dark;
    }
}

/* --------------------------------------------------------------------------
   Scale presets via data attribute
   -------------------------------------------------------------------------- */
@layer dsr-base {

    .dsr {
        /* NO font-size — inherit from theme. Plugin only controls spacing. */
        --dsr-lh:         1.72;
        --dsr-gap:        1.3em;
        --dsr-tracking:   0.01em;
        --dsr-word:       0.04em;
        --dsr-text:       light-dark(#2a2a2a, #e2e2e2);
        --dsr-text-bold:  light-dark(#111, #f5f5f5);
        --dsr-text-muted: light-dark(#666, #aaa);
        --dsr-border:     light-dark(#e4e4e4, #3a3a3a);
        --dsr-surface:    light-dark(#fff, #1a1a1a);
        --dsr-fade-end:   light-dark(rgb(255 255 255), rgb(26 26 26));
    }

    .dsr[data-scale="compact"] {
        --dsr-lh:   1.6;
        --dsr-gap:  1em;
    }

    .dsr[data-scale="spacious"] {
        --dsr-lh:   1.85;
        --dsr-gap:  1.5em;
    }

}

/* --------------------------------------------------------------------------
   Core Typography
   -------------------------------------------------------------------------- */
@layer dsr-layout {

    .dsr {
        /* Container for container queries */
        container-type: inline-size;
        container-name: dsr-content;

        /* NO font-size override — inherit from theme */
        line-height: var(--dsr-lh);
        letter-spacing: var(--dsr-tracking);
        word-spacing: var(--dsr-word);

        /* 2026: browser handles widows/orphans natively */
        text-wrap: pretty;

        /* Hyphenation with limits */
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 8 3 3;
        overflow-wrap: break-word;

        /* Subpixel rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-feature-settings: "kern" 1, "liga" 1, "calt" 1;

        /* Optimal measure */
        max-width: 72ch;
    }

    /* ---------- Paragraphs ---------- */

    .dsr p {
        margin: 0 0 var(--dsr-gap);
        text-wrap: pretty;
        widows: 2;
        orphans: 2;

        &:last-child {
            margin-bottom: 0;
        }
    }

    /* No font-size manipulation — first paragraph inherits theme styling */

    /* ---------- Headings ---------- */

    .dsr :is(h2, h3, h4, h5, h6) {
        text-wrap: balance;
        line-height: 1.25;
        margin-top: 2lh;
        margin-bottom: 0.5lh;
    }

    /* No font-size overrides for headings — inherit from theme */

    /* ---------- Bold / Strong ---------- */

    /* Bold — no color override, inherit from theme */

    /* Links and images — no visual override, inherit from theme */
}

/* --------------------------------------------------------------------------
   Semantic Content Blocks — spacing only, no visual additions
   -------------------------------------------------------------------------- */
@layer dsr-blocks {

    /* Lists — only spacing, no checkmarks or visual changes */
    .dsr ul,
    .dsr ol {
        margin-block: 0.8em var(--dsr-gap);

        & li {
            margin-bottom: 0.45em;
            line-height: 1.55;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    /* Spec tables — spacing only */
    .dsr table {
        margin-block: 0.8em var(--dsr-gap);

        & th,
        & td {
            padding: 0.55em 0.75em;
        }
    }

    /* Reading time badge — injected by JS */
    .dsr-readtime {
        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        font-size: 0.82em;
        color: var(--dsr-text-muted);
        margin-bottom: 0.8lh;
        letter-spacing: 0.02em;

        &::before {
            content: "";
            display: inline-block;
            width: 1em;
            height: 1em;
            background: currentColor;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
            mask-size: contain;
        }
    }
}

/* --------------------------------------------------------------------------
   Container Queries — respond to parent width, not viewport
   -------------------------------------------------------------------------- */
@layer dsr-layout {

    /* Narrow container (sidebar, quick-view modal, mobile) */
    @container dsr-content (max-width: 480px) {
        .dsr {
            max-width: 100%;
            --dsr-gap: 1.15em;

            /* Bump line-height slightly for narrow columns */
            line-height: calc(var(--dsr-lh) + 0.08);
        }

        /* Stack tables on narrow containers */
        .dsr table {
            & thead { display: none; }

            & tr {
                display: block;
                padding: 0.6em 0;
            }

            & td {
                display: block;
                padding: 0.2em 0;
            }
        }
    }

    /* Wide container — no font-size override, spacing only */
}

/* --------------------------------------------------------------------------
   Collapse — "Lees meer"
   -------------------------------------------------------------------------- */
@layer dsr-collapse {

    .dsr[data-dsr-collapsible] {
        position: relative;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    /* Fade gradient */
    .dsr[data-dsr-state="collapsed"]::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 5lh;
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--dsr-fade-end) 0%, transparent) 0%,
            var(--dsr-fade-end) 100%
        );
        pointer-events: none;
        z-index: 1;
    }

    .dsr-toggle {
        /* Hard reset — prevent theme from hijacking */
        all: unset;
        display: block;
        width: auto;
        margin: 0.6em 0 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        color: var(--dsr-text-muted);
        font: inherit;
        font-size: 0.85em;
        font-weight: 400;
        cursor: pointer;
        text-align: left;
        letter-spacing: 0.02em;
        transition: color 0.15s;

        &:hover {
            color: var(--dsr-text-bold);
        }

        &:active {
            opacity: 0.7;
        }

        & .dsr-chevron {
            display: inline-block;
            margin-left: 0.3em;
            transition: rotate 0.3s;
            font-size: 0.75em;
        }

        &[aria-expanded="true"] .dsr-chevron {
            rotate: 180deg;
        }
    }
}

/* --------------------------------------------------------------------------
   Performance — skip rendering off-screen long descriptions
   -------------------------------------------------------------------------- */
@layer dsr-layout {
    .dsr[data-length="long"] {
        content-visibility: auto;
        contain-intrinsic-size: auto 400px;
    }
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
@layer dsr-a11y {

    @media (prefers-reduced-motion: reduce) {
        .dsr[data-dsr-collapsible] {
            transition: none;
        }

        .dsr-toggle .dsr-chevron {
            transition: none;
        }
    }

    @media (prefers-contrast: more) {
        .dsr {
            --dsr-text: light-dark(#000, #fff);
            --dsr-text-bold: light-dark(#000, #fff);
            --dsr-border: light-dark(#000, #fff);
            letter-spacing: 0.02em;
            word-spacing: 0.06em;
        }
    }

    /* Focus visible for keyboard navigation */
    .dsr-toggle:focus-visible {
        outline: 2px solid var(--dsr-text);
        outline-offset: 2px;
    }
}

/* --------------------------------------------------------------------------
   WooCommerce — surgical resets so theme defaults don't fight
   -------------------------------------------------------------------------- */
@layer dsr-base {
    .woocommerce div.product .dsr p,
    .woocommerce-Tabs-panel--description .dsr p,
    .woocommerce-product-details__short-description .dsr p {
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        margin-bottom: var(--dsr-gap);
    }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
    .dsr {
        font-size: 11pt !important;
        line-height: 1.5 !important;
        max-width: none !important;
        color: #000 !important;
        content-visibility: visible !important;
    }

    .dsr-toggle,
    .dsr-readtime {
        display: none !important;
    }

    .dsr[data-dsr-collapsible] {
        max-height: none !important;
        overflow: visible !important;

        &::after { display: none !important; }
    }
}