/* Shared by single posts, the block editor, and the classic visual editor. */
:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) {
    --kidsread-table-border: #cfe7f5;
    --kidsread-table-accent: #78c9f4;
    --kidsread-table-header: #e6f4fe;
    --kidsread-table-stripe: #f4faff;
    --kidsread-table-text: #395c70;
    --kidsread-table-heading: #245a75;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table {
    display: table;
    width: 100%;
    max-width: none;
    margin: 1.75rem 0;
    overflow: hidden;
    border: 1px solid var(--kidsread-table-border);
    border-left: 4px solid var(--kidsread-table-accent);
    border-radius: 0;
    /* TinyMCE inserts border-collapse: collapse inline on new tables. */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff;
    color: var(--kidsread-table-text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    white-space: normal;
    box-shadow: 0 8px 24px rgb(36 90 117 / 0.06);
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table :is(th, td) {
    min-width: 8rem;
    padding: 16px 22px;
    /* Override TinyMCE's dotted editing grid and legacy inline borders. */
    border: 0 !important;
    border-radius: 0;
    border-right: 1px solid var(--kidsread-table-border) !important;
    border-bottom: 1px solid var(--kidsread-table-border) !important;
    background: #fff;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table tbody > tr:nth-child(even) > td {
    background: var(--kidsread-table-stripe);
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table :is(thead > tr > *, th) {
    background: var(--kidsread-table-header);
    color: var(--kidsread-table-heading);
    font-weight: 700;
    text-align: start;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table > :last-child > tr:last-child > * {
    border-bottom: 0 !important;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table tr > :last-child {
    border-right: 0 !important;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table :is(th, td) > :first-child {
    margin-top: 0;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table :is(th, td) > :last-child {
    margin-bottom: 0;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table :is(strong, b) {
    color: var(--kidsread-table-heading);
    font-weight: 700;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table a {
    color: #28799f;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table a:is(:hover, :focus-visible) {
    color: var(--kidsread-table-heading);
}

:is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table caption {
    padding: 0 0 12px;
    color: var(--kidsread-table-heading);
    font-weight: 700;
    text-align: start;
    caption-side: top;
}

.kidsread-article-table {
    position: relative;
    max-width: 100%;
    margin: 1.75rem 0;
}

.kidsread-article-table-scroll {
    max-width: 100%;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #78c9f4 #e6f4fe;
    -webkit-overflow-scrolling: touch;
}

.kidsread-article-table-hint {
    display: none;
}

.kidsread-article-table-scroll:focus-visible {
    outline: 2px solid #245a75;
    outline-offset: 4px;
    border-radius: 0;
}

.single-post .kidsread-responsive-content .kidsread-article-table-scroll > table,
:is(.editor-styles-wrapper, .mce-content-body) .wp-block-table > table,
.single-post .kidsread-responsive-content .wp-block-table > .kidsread-article-table {
    margin: 0;
}

:is(.editor-styles-wrapper, .mce-content-body) .wp-block-table {
    overflow-x: auto;
}

@media (max-width: 767px) {
    .kidsread-article-table-hint {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        display: flex;
        width: 108px;
        height: 108px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        border-radius: 50%;
        background: rgb(30 66 89 / 0.9);
        color: #fff;
        box-shadow: 0 4px 18px rgb(36 90 117 / 0.15);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.12em;
        pointer-events: none;
        user-select: none;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -50%);
        transition: opacity 0.2s, visibility 0.2s;
    }

    .kidsread-article-table[data-scroll-hint="true"] > .kidsread-article-table-hint {
        opacity: 1;
        visibility: visible;
    }

    .kidsread-article-table-hint-gesture {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .kidsread-article-table-hint-gesture > svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.5;
    }

    .kidsread-article-table-hint-gesture > svg:nth-child(2) {
        width: 28px;
        height: 28px;
        fill: #fff;
        animation: kidsread-table-swipe 1.4s ease-in-out infinite;
    }

    :is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table {
        min-width: 32rem;
        font-size: 14px;
    }

    :is(.single-post .kidsread-responsive-content, .editor-styles-wrapper, .mce-content-body) table :is(th, td) {
        padding: 13px 16px;
    }
}

@keyframes kidsread-table-swipe {
    0%, 100% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .kidsread-article-table-hint {
        transition: none;
    }

    .kidsread-article-table-hint-gesture > svg:nth-child(2) {
        animation: none;
    }
}