/*
 * PidoGame shared editorial content.
 * Tables, quotations and embedded media use one contract in posts, pages and product descriptions.
 */

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(.wp-block-video, .wp-video, .wp-block-embed.is-type-video, .wp-block-embed-youtube, .wp-block-embed-vimeo, .pido-product-video-wrap, .aparat-player, .aparat-responsive, .embed-responsive, [class*="aparat"]) {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem auto !important;
    overflow: hidden;
    border-radius: var(--pido-radius-card);
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(.wp-block-embed__wrapper, .wp-has-aspect-ratio, .mejs-container, .mejs-video, .mejs-inner, .mejs-mediaelement) {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) .mejs-video {
    height: auto !important;
    aspect-ratio: 16 / 9;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(video, .wp-video-shortcode, .mejs-mediaelement > video, iframe) {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    border: 0;
    border-radius: var(--pido-radius-card);
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(video, .wp-video-shortcode) {
    height: auto !important;
    object-fit: contain;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(.wp-block-embed__wrapper > iframe, iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[src*="aparat"]) {
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 0;
}

/* Gutenberg tables already have a figure wrapper. Raw legacy tables are wrapped by pido-theme.js. */
:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(.wp-block-table, .pido-table-wrap) {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 1.6rem 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--pido-border) !important;
    border-radius: var(--pido-radius-card) !important;
    background: var(--pido-surface) !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(.wp-block-table, .pido-table-wrap):focus-visible {
    outline: 3px solid rgba(var(--pido-primary-rgb), .2);
    outline-offset: 3px;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(.wp-block-table, .pido-table-wrap) > table,
table.pido-content-table {
    display: table !important;
    float: none !important;
    table-layout: auto;
    inline-size: 100% !important;
    width: 100% !important;
    min-width: 580px;
    max-inline-size: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    background: var(--pido-surface) !important;
    color: var(--pido-text) !important;
    font-size: .92rem;
    line-height: 1.8;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) table :where(thead, tbody, tfoot, tr) {
    width: auto !important;
    max-width: none !important;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) table :where(th, td),
table.pido-content-table :where(th, td) {
    float: none !important;
    min-width: 0;
    padding: .8rem .95rem !important;
    border: 0 !important;
    border-block-end: 1px solid var(--pido-border) !important;
    border-inline-start: 1px solid var(--pido-border) !important;
    background: var(--pido-surface);
    color: var(--pido-text);
    text-align: start !important;
    vertical-align: middle !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) table :where(th, td):first-child,
table.pido-content-table :where(th, td):first-child {
    border-inline-start: 0 !important;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) table tr:last-child td,
table.pido-content-table tr:last-child td {
    border-block-end: 0 !important;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) table th,
table.pido-content-table th {
    background: var(--pido-surface-soft) !important;
    color: var(--pido-text) !important;
    font-weight: var(--pido-font-weight-bold, 700);
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) table tbody tr:nth-child(even) td,
table.pido-content-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--pido-surface) 97%, var(--pido-primary) 3%) !important;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) table caption,
table.pido-content-table caption {
    padding: .65rem .9rem;
    color: var(--pido-text-muted);
    font-size: var(--pido-font-size-xs, .8125rem);
    font-weight: var(--pido-font-weight-semibold, 600);
    text-align: start;
    caption-side: top;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) blockquote,
blockquote.pido-content-quote {
    position: relative;
    margin: 1.6rem 0;
    padding: 1.2rem 1.35rem;
    border: 1px solid color-mix(in srgb, var(--pido-border) 68%, var(--pido-primary) 32%);
    border-inline-start: 4px solid var(--pido-primary);
    border-radius: var(--pido-radius-card);
    background: color-mix(in srgb, var(--pido-surface) 96%, var(--pido-primary) 4%);
    color: var(--pido-text);
    font-size: 1rem;
    line-height: 2;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) blockquote::before,
blockquote.pido-content-quote::before {
    content: "“";
    position: absolute;
    inset-block-start: .45rem;
    inset-inline-end: .9rem;
    color: rgba(var(--pido-primary-rgb), .2);
    font-size: 3rem;
    font-weight: var(--pido-font-weight-extrabold, 800);
    line-height: 1;
}

:where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) blockquote > :last-child {
    margin-block-end: 0;
}

html[data-pido-theme="dark"] :where(
    .pido-rich-content,
    .entry-content,
    .post-content,
    .page-content,
    .woocommerce-Tabs-panel,
    .product-description
) :where(.wp-block-table, .pido-table-wrap, table) {
    border-color: var(--pido-border) !important;
    background: var(--pido-surface) !important;
    color: var(--pido-text) !important;
}

@media (max-width: 575.98px) {
    :where(
        .pido-rich-content,
        .entry-content,
        .post-content,
        .page-content,
        .woocommerce-Tabs-panel,
        .product-description
    ) :where(.wp-block-video, .wp-video, .wp-block-embed.is-type-video, .wp-block-embed-youtube, .wp-block-embed-vimeo, .pido-product-video-wrap) {
        margin-block: 1.15rem !important;
    }

    :where(
        .pido-rich-content,
        .entry-content,
        .post-content,
        .page-content,
        .woocommerce-Tabs-panel,
        .product-description
    ) :where(.wp-block-table, .pido-table-wrap) > table,
    table.pido-content-table {
        min-width: 520px;
        font-size: .86rem;
    }

    :where(
        .pido-rich-content,
        .entry-content,
        .post-content,
        .page-content,
        .woocommerce-Tabs-panel,
        .product-description
    ) blockquote,
    blockquote.pido-content-quote {
        padding: 1rem 1.05rem;
    }
}