/*
 * OnlineOblozuvanje.mk Styles
 * Front-end scope: the actual WordPress post/page content block only.
 */

.wp-block-post-content {
    --oo-navy: #07111f;
    --oo-navy-2: #0c1b2d;
    --oo-yellow: #ffb000;
    --oo-cyan: #0b84c6;
    --oo-cyan-dark: #075b88;
    --oo-blue-soft: #eef7fc;
    --oo-line: #dce5ee;
    --oo-text: #142033;
    --oo-muted: #617084;
}

/* =========================================================
   ARTICLE / PAGE BODY LINKS
   ========================================================= */

/*
 * Link styling is class-driven rather than applied to every anchor inside
 * .wp-block-post-content. WordPress front pages can contain Query/Post blocks
 * inside that wrapper, so a broad descendant selector would also style card
 * titles, taxonomy links and other homepage UI. content-links.js marks only
 * genuine prose links in single posts and non-home pages.
 */
.wp-block-post-content a.oo-content-link {
    color: var(--oo-cyan-dark);
    font-weight: 650;
    text-decoration: none;
    background-image: linear-gradient(var(--oo-yellow), var(--oo-yellow));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: color 150ms ease, background-size 150ms ease, background-color 150ms ease;
}

.wp-block-post-content a.oo-content-link:hover {
    color: var(--oo-navy);
    background-size: 100% 4px;
    background-color: rgba(255, 176, 0, 0.08);
}

.wp-block-post-content a.oo-content-link:focus-visible {
    color: var(--oo-navy);
    outline: 3px solid rgba(255, 176, 0, 0.45);
    outline-offset: 3px;
    border-radius: 3px;
}

/* =========================================================
   TABLE ENGINE: shared responsive behaviour
   ========================================================= */

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 1.75rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 132, 198, 0.45) transparent;
}

.wp-block-post-content .wp-block-table {
    display: block;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap)::-webkit-scrollbar {
    height: 8px;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap)::-webkit-scrollbar-thumb {
    background: rgba(11, 132, 198, 0.35);
    border-radius: 999px;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap) table {
    width: 100%;
    min-width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    color: var(--oo-text);
    font-size: 0.96em;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-wide table {
    min-width: 680px;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap) th,
.wp-block-post-content :where(.wp-block-table, .oo-table-wrap) td {
    box-sizing: border-box;
    padding: 0.82rem 0.95rem;
    vertical-align: middle;
    text-align: left;
    overflow-wrap: break-word;
}

/* Alignment is deliberately decided once per table, never per row/cell. */
.wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-align-center th,
.wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-align-center td {
    text-align: center;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-align-left th,
.wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-align-left td {
    text-align: left;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap) .oo-numeric {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-text-heavy th,
.wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-text-heavy td {
    vertical-align: top;
    line-height: 1.55;
}

.wp-block-post-content .wp-block-table figcaption {
    margin: 0;
    padding: 0.72rem 0.9rem 0;
    color: var(--oo-muted);
    font-size: 0.86em;
    line-height: 1.45;
    text-align: left;
}

/* Remove Gutenberg stripe styling so the selected template owns the table. */
.wp-block-post-content .wp-block-table.is-style-stripes {
    border: 0;
}

/* =========================================================
   1. SIGNAL
   ========================================================= */

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
    border: 1px solid #d7e0e9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(7, 17, 31, 0.08);
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap)::before {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--oo-yellow) 0 24%, var(--oo-cyan) 24% 100%);
    pointer-events: none;
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) thead th {
    color: #fff;
    background: var(--oo-navy);
    border-bottom: 0;
    font-weight: 800;
    letter-spacing: 0.012em;
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) thead th:first-child {
    padding-left: 1.1rem;
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td {
    border-bottom: 1px solid #e6ecf2;
    background: #fff;
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:last-child td {
    border-bottom: 0;
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:hover td {
    background: #f5faff;
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td:first-child {
    font-weight: 650;
}

body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-numeric-heavy .oo-numeric {
    color: #0b5d88;
    font-weight: 760;
}

/* =========================================================
   2. BLUEPRINT
   ========================================================= */

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
    border: 1px solid #bcdced;
    border-radius: 14px;
    background: #f8fcff;
    box-shadow: 0 8px 26px rgba(11, 132, 198, 0.08);
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) table {
    background: linear-gradient(180deg, #fbfdff, #f5faff);
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) thead th {
    color: #083f5f;
    background: #e4f4fc;
    border-bottom: 2px solid var(--oo-cyan);
    font-weight: 820;
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) th + th,
body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) td + td {
    border-left: 1px solid #d8ebf5;
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td {
    border-bottom: 1px solid #dcecf5;
    background: rgba(255, 255, 255, 0.82);
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:nth-child(even) td {
    background: rgba(235, 247, 253, 0.7);
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:last-child td {
    border-bottom: 0;
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:hover td {
    background: #fff8e8;
}

body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) .oo-numeric {
    color: #075b88;
    font-weight: 750;
}

/* =========================================================
   3. SCOREBOARD
   ========================================================= */

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
    border: 1px solid #20354c;
    border-radius: 16px;
    background: var(--oo-navy);
    box-shadow: 0 16px 38px rgba(7, 17, 31, 0.22);
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) table {
    color: #eaf3fa;
    background: var(--oo-navy);
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) thead th {
    color: #9dddfc;
    background: #0b1a2a;
    border-bottom: 1px solid #2c435a;
    font-size: 0.86em;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td {
    border-bottom: 1px solid #20354a;
    background: #0d1c2d;
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:nth-child(even) td {
    background: #102236;
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:last-child td {
    border-bottom: 0;
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:hover td {
    background: #15304a;
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td:first-child {
    color: #fff;
    font-weight: 700;
}

body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) .oo-numeric {
    color: var(--oo-yellow);
    font-weight: 850;
}

body.oo-table-template-scoreboard .wp-block-post-content .wp-block-table figcaption {
    color: #6d7d90;
}

/* Keep links readable inside the dark table. */
body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) a:not(.wp-element-button) {
    color: #9dddfc;
}

/* =========================================================
   4. CARDS
   ========================================================= */

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
    overflow: visible;
    padding: 0.2rem 0;
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-scrolls {
    overflow-x: auto;
    overflow-y: visible;
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) thead th {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    color: #5d6c7f;
    background: transparent;
    border: 0;
    font-size: 0.82em;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td {
    border-top: 1px solid #e1e8ef;
    border-bottom: 1px solid #e1e8ef;
    background: #fff;
    box-shadow: 0 7px 20px rgba(7, 17, 31, 0.055);
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td:first-child {
    border-left: 4px solid var(--oo-cyan);
    border-radius: 12px 0 0 12px;
    font-weight: 720;
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td:last-child {
    border-right: 1px solid #e1e8ef;
    border-radius: 0 12px 12px 0;
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:hover td {
    background: #fbfdff;
    border-color: #bddceb;
}

body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) .oo-numeric {
    color: #075b88;
    font-weight: 800;
}

/* =========================================================
   5. EDITORIAL
   ========================================================= */

body.oo-table-template-editorial .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
    border-top: 3px solid var(--oo-navy);
    border-bottom: 1px solid var(--oo-navy);
    background: transparent;
}

body.oo-table-template-editorial .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) thead th {
    color: var(--oo-navy);
    background: transparent;
    border-bottom: 1px solid #91a0af;
    font-weight: 850;
}

body.oo-table-template-editorial .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td {
    border-bottom: 1px solid #dde4eb;
    background: transparent;
}

body.oo-table-template-editorial .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:last-child td {
    border-bottom: 0;
}

body.oo-table-template-editorial .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td:first-child {
    color: var(--oo-navy);
    font-weight: 740;
}

body.oo-table-template-editorial .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody tr:hover td {
    background: linear-gradient(90deg, rgba(255, 176, 0, 0.08), rgba(11, 132, 198, 0.035));
}

body.oo-table-template-editorial .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) .oo-numeric {
    font-weight: 760;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
        margin: 1.35rem 0;
        max-width: 100%;
    }

    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) table {
        font-size: 0.91em;
    }

    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) th,
    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) td {
        padding: 0.7rem 0.72rem;
    }

    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-wide table {
        min-width: 610px;
    }

    /* Two-column tables stay fluid instead of unnecessarily scrolling. */
    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-cols-2 table {
        min-width: 100%;
    }

    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-cols-2 th,
    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-cols-2 td {
        white-space: normal;
    }

    body.oo-table-template-signal .wp-block-post-content :where(.wp-block-table, .oo-table-wrap),
    body.oo-table-template-blueprint .wp-block-post-content :where(.wp-block-table, .oo-table-wrap),
    body.oo-table-template-scoreboard .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) {
        border-radius: 12px;
    }

    body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) table {
        border-spacing: 0 6px;
    }
}

@media (max-width: 430px) {
    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) table {
        font-size: 0.88em;
    }

    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) th,
    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) td {
        padding: 0.64rem 0.62rem;
    }

    .wp-block-post-content :where(.wp-block-table, .oo-table-wrap).oo-table-wide table {
        min-width: 570px;
    }

    body.oo-table-template-cards .wp-block-post-content :where(.wp-block-table, .oo-table-wrap) tbody td:first-child {
        border-left-width: 3px;
    }
}

/* =========================================================
   ARTICLE / PAGE LIST ENGINE
   Gutenberg lists only. Keeps navigation and custom UI lists untouched.
   ========================================================= */

.wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) {
    --oo-list-gap: 0.68rem;
    box-sizing: border-box;
    margin-block: 1.35rem 1.65rem;
    padding: 0;
}

.wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li {
    position: relative;
    box-sizing: border-box;
    margin: 0 0 var(--oo-list-gap);
    line-height: 1.58;
}

.wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li:last-child {
    margin-bottom: 0;
}

.wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) :where(ul, ol) {
    margin: 0.7rem 0 0.1rem;
}

.wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li > :first-child {
    margin-top: 0;
}

.wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li > :last-child {
    margin-bottom: 0;
}

/* ---------- Signal ---------- */
body.oo-list-template-signal .wp-block-post-content ul.wp-block-list {
    list-style: none;
}

body.oo-list-template-signal .wp-block-post-content ul.wp-block-list > li {
    padding-left: 1.65rem;
}

body.oo-list-template-signal .wp-block-post-content ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 0.82rem;
    height: 0.28rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--oo-yellow) 0 62%, var(--oo-cyan) 62% 100%);
    box-shadow: 0 0 0 4px rgba(255, 176, 0, 0.09);
}

body.oo-list-template-signal .wp-block-post-content ol.wp-block-list {
    list-style: none;
    counter-reset: oo-signal;
}

body.oo-list-template-signal .wp-block-post-content ol.wp-block-list > li {
    min-height: 2rem;
    padding-left: 2.7rem;
    counter-increment: oo-signal;
}

body.oo-list-template-signal .wp-block-post-content ol.wp-block-list > li::before {
    content: counter(oo-signal);
    position: absolute;
    left: 0;
    top: 0.03rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.62rem;
    color: var(--oo-yellow);
    background: var(--oo-navy);
    box-shadow: inset 0 -2px 0 rgba(11, 132, 198, 0.45), 0 5px 12px rgba(7, 17, 31, 0.12);
    font-size: 0.78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* ---------- Blueprint ---------- */
body.oo-list-template-blueprint .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) {
    padding-left: 1rem;
    border-left: 2px solid #c8e6f5;
}

body.oo-list-template-blueprint .wp-block-post-content ul.wp-block-list {
    list-style: none;
}

body.oo-list-template-blueprint .wp-block-post-content ul.wp-block-list > li {
    padding-left: 1.55rem;
}

body.oo-list-template-blueprint .wp-block-post-content ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    left: -0.43rem;
    top: 0.48em;
    width: 0.7rem;
    height: 0.7rem;
    box-sizing: border-box;
    border: 2px solid var(--oo-cyan);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px #eef8fd;
}

body.oo-list-template-blueprint .wp-block-post-content ol.wp-block-list {
    list-style: none;
    counter-reset: oo-blueprint;
}

body.oo-list-template-blueprint .wp-block-post-content ol.wp-block-list > li {
    min-height: 2rem;
    padding-left: 2.45rem;
    counter-increment: oo-blueprint;
}

body.oo-list-template-blueprint .wp-block-post-content ol.wp-block-list > li::before {
    content: counter(oo-blueprint, decimal-leading-zero);
    position: absolute;
    left: -0.48rem;
    top: 0.07rem;
    min-width: 2rem;
    padding: 0.22rem 0.38rem;
    border: 1px solid #99cee8;
    border-radius: 0.45rem;
    color: #075b88;
    background: #eef8fd;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-align: center;
}

/* ---------- Scoreboard ---------- */
body.oo-list-template-scoreboard .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    padding: 0.65rem;
    border: 1px solid #1e3349;
    border-radius: 1rem;
    background: #07111f;
    box-shadow: 0 12px 28px rgba(7, 17, 31, 0.12);
}

body.oo-list-template-scoreboard .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li {
    margin: 0;
    padding: 0.72rem 0.9rem 0.72rem 2.65rem;
    border: 1px solid rgba(157, 221, 252, 0.12);
    border-radius: 0.72rem;
    color: #eef7fc;
    background: linear-gradient(135deg, #0d1c2d, #10243a);
}

body.oo-list-template-scoreboard .wp-block-post-content ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 1.08rem;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 0.18rem;
    background: var(--oo-yellow);
    box-shadow: 0 0 0 4px rgba(255, 176, 0, 0.1), 8px 0 0 -2px var(--oo-cyan);
}

body.oo-list-template-scoreboard .wp-block-post-content ol.wp-block-list {
    counter-reset: oo-scoreboard;
}

body.oo-list-template-scoreboard .wp-block-post-content ol.wp-block-list > li {
    counter-increment: oo-scoreboard;
}

body.oo-list-template-scoreboard .wp-block-post-content ol.wp-block-list > li::before {
    content: counter(oo-scoreboard);
    position: absolute;
    left: 0.82rem;
    top: 0.66rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: #07111f;
    background: var(--oo-yellow);
    font-size: 0.7rem;
    font-weight: 950;
    box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.1);
}

body.oo-list-template-scoreboard .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) :where(ul, ol) {
    border-color: rgba(157, 221, 252, 0.12);
    box-shadow: none;
}

/* ---------- Cards ---------- */
body.oo-list-template-cards .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) {
    list-style: none;
    display: grid;
    gap: 0.62rem;
}

body.oo-list-template-cards .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li {
    margin: 0;
    padding: 0.78rem 1rem 0.78rem 3.05rem;
    border: 1px solid #dde6ee;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 7px 18px rgba(7, 17, 31, 0.055);
}

body.oo-list-template-cards .wp-block-post-content ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0.92rem;
    width: 1rem;
    height: 1rem;
    border-radius: 0.32rem;
    background: linear-gradient(135deg, var(--oo-cyan), #075b88);
    box-shadow: inset 0 -3px 0 rgba(7, 17, 31, 0.16), 0 0 0 4px rgba(11, 132, 198, 0.08);
}

body.oo-list-template-cards .wp-block-post-content ul.wp-block-list > li::after {
    content: "";
    position: absolute;
    left: 1.31rem;
    top: 1.19rem;
    width: 0.36rem;
    height: 0.2rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

body.oo-list-template-cards .wp-block-post-content ol.wp-block-list {
    counter-reset: oo-cards;
}

body.oo-list-template-cards .wp-block-post-content ol.wp-block-list > li {
    counter-increment: oo-cards;
}

body.oo-list-template-cards .wp-block-post-content ol.wp-block-list > li::before {
    content: counter(oo-cards);
    position: absolute;
    left: 0.9rem;
    top: 0.68rem;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.5rem;
    color: var(--oo-navy);
    background: #fff4d5;
    border: 1px solid #ffd167;
    font-size: 0.75rem;
    font-weight: 950;
}

/* ---------- Editorial ---------- */
body.oo-list-template-editorial .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) {
    list-style: none;
}

body.oo-list-template-editorial .wp-block-post-content ul.wp-block-list > li {
    padding-left: 1.55rem;
}

body.oo-list-template-editorial .wp-block-post-content ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.64em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--oo-navy);
}

body.oo-list-template-editorial .wp-block-post-content ol.wp-block-list {
    counter-reset: oo-editorial;
}

body.oo-list-template-editorial .wp-block-post-content ol.wp-block-list > li {
    min-height: 2.25rem;
    padding-left: 3.35rem;
    counter-increment: oo-editorial;
}

body.oo-list-template-editorial .wp-block-post-content ol.wp-block-list > li::before {
    content: counter(oo-editorial, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -0.18rem;
    color: #a5b0bc;
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

body.oo-list-template-editorial .wp-block-post-content ol.wp-block-list > li::after {
    content: "";
    position: absolute;
    left: 2.35rem;
    top: 0.2rem;
    bottom: 0.18rem;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(var(--oo-yellow), #e5eaf0);
}

@media (max-width: 600px) {
    .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) {
        --oo-list-gap: 0.58rem;
        margin-block: 1.15rem 1.4rem;
    }

    body.oo-list-template-scoreboard .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) {
        padding: 0.5rem;
        border-radius: 0.82rem;
    }

    body.oo-list-template-scoreboard .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li,
    body.oo-list-template-cards .wp-block-post-content :where(ul.wp-block-list, ol.wp-block-list) > li {
        padding-top: 0.68rem;
        padding-bottom: 0.68rem;
    }

    body.oo-list-template-editorial .wp-block-post-content ol.wp-block-list > li {
        padding-left: 3rem;
    }
}

/* =========================================================
   QUERY LOOP PAGINATION
   Targets only WordPress core Query Pagination blocks.
   Strong normalization prevents theme styles from producing blank or
   misaligned current-page controls.
   ========================================================= */

.wp-block-query-pagination {
    --oo-page-navy: #07111f;
    --oo-page-navy-2: #0c1b2d;
    --oo-page-yellow: #ffb000;
    --oo-page-cyan: #0b84c6;
    --oo-page-line: #d8e3ec;
    --oo-page-muted: #66778a;
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    width: max-content;
    max-width: 100%;
    margin: 3rem auto 1.25rem !important;
    gap: 0.45rem !important;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
}

.wp-block-query-pagination > * {
    margin: 0 !important;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
}

.wp-block-query-pagination :where(
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next,
    .page-numbers
) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.7rem;
    min-height: 2.7rem;
    margin: 0 !important;
    padding: 0.72rem 0.9rem;
    border: 0;
    border-radius: 12px;
    color: var(--oo-page-navy) !important;
    font: inherit !important;
    line-height: 1 !important;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    background-image: none !important;
    box-shadow: none;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 150ms ease, color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.wp-block-query-pagination .page-numbers {
    padding-inline: 0.7rem;
}

.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination [aria-current="page"] {
    color: var(--oo-page-navy) !important;
    opacity: 1 !important;
}

.wp-block-query-pagination :where(a):focus-visible {
    outline: 3px solid rgba(255, 176, 0, 0.48) !important;
    outline-offset: 3px;
}

.wp-block-query-pagination .page-numbers.dots {
    min-width: 1.55rem;
    padding-inline: 0.15rem;
    cursor: default;
}

/* ---------- 1. Arena ---------- */
body.oo-pagination-template-arena .wp-block-query-pagination {
    position: relative;
    padding: 0.55rem !important;
    border: 1px solid #20364d;
    border-radius: 18px;
    background: linear-gradient(180deg, #0d1d30 0%, #07111f 100%);
    box-shadow: 0 14px 34px rgba(7, 17, 31, 0.18);
}

body.oo-pagination-template-arena .wp-block-query-pagination::before {
    content: '';
    position: absolute;
    inset: 0.28rem 1.1rem auto;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--oo-page-yellow), var(--oo-page-cyan), transparent);
    pointer-events: none;
}

body.oo-pagination-template-arena .wp-block-query-pagination :where(
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next,
    .page-numbers
) {
    color: #eaf3fa !important;
    border: 1px solid #213a52 !important;
    background: #0f2236 !important;
}

body.oo-pagination-template-arena .wp-block-query-pagination :where(
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next
) {
    min-width: auto;
    padding-inline: 1rem;
    color: #fff !important;
}

body.oo-pagination-template-arena .wp-block-query-pagination a:hover {
    color: #fff !important;
    border-color: #2f7fa8 !important;
    background: #15334c !important;
    transform: translateY(-1px);
}

body.oo-pagination-template-arena .wp-block-query-pagination .page-numbers.current,
body.oo-pagination-template-arena .wp-block-query-pagination [aria-current="page"] {
    color: #07111f !important;
    border-color: #ffd46b !important;
    background: linear-gradient(180deg, #ffc94f 0%, #ffb000 100%) !important;
    box-shadow: 0 5px 14px rgba(255, 176, 0, 0.26) !important;
}

body.oo-pagination-template-arena .wp-block-query-pagination .page-numbers.dots {
    color: #8ca0b4 !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* ---------- 2. Orbit ---------- */
body.oo-pagination-template-orbit .wp-block-query-pagination {
    padding: 0.42rem !important;
    border: 1px solid rgba(209, 221, 231, 0.92);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 17, 31, 0.09);
}

body.oo-pagination-template-orbit .wp-block-query-pagination :where(
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next
) {
    min-width: auto;
    padding-inline: 1rem;
    color: #0a3550 !important;
    border: 1px solid #d6e2eb !important;
    border-radius: 12px;
    background: #f8fbfd !important;
}

body.oo-pagination-template-orbit .wp-block-query-pagination .page-numbers {
    width: 2.7rem;
    min-width: 2.7rem;
    height: 2.7rem;
    min-height: 2.7rem;
    padding: 0 !important;
    color: #4d6074 !important;
    border: 1px solid transparent !important;
    border-radius: 11px;
    background: transparent !important;
}

body.oo-pagination-template-orbit .wp-block-query-pagination a:hover {
    color: #075b88 !important;
    border-color: #9fd0e7 !important;
    background: #edf8fd !important;
    transform: translateY(-1px);
}

body.oo-pagination-template-orbit .wp-block-query-pagination .page-numbers.current,
body.oo-pagination-template-orbit .wp-block-query-pagination [aria-current="page"] {
    color: #07111f !important;
    border-color: #ffcb4d !important;
    background: #ffb000 !important;
    box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.16) !important;
}

body.oo-pagination-template-orbit .wp-block-query-pagination .page-numbers.dots {
    width: 1.4rem;
    min-width: 1.4rem;
    color: #98a6b4 !important;
}

/* ---------- 3. Track ---------- */
body.oo-pagination-template-track .wp-block-query-pagination {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
    padding: 0.7rem 0 !important;
    border-top: 1px solid #dce5ed;
    border-bottom: 1px solid #dce5ed;
    background: transparent;
}

body.oo-pagination-template-track .wp-block-query-pagination .wp-block-query-pagination-previous {
    justify-self: start;
}

body.oo-pagination-template-track .wp-block-query-pagination .wp-block-query-pagination-next {
    justify-self: end;
}

body.oo-pagination-template-track .wp-block-query-pagination :where(
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next
) {
    min-width: auto;
    min-height: 2.5rem;
    padding: 0.65rem 0.2rem;
    color: #07111f !important;
    border-radius: 0;
    background: transparent !important;
}

body.oo-pagination-template-track .wp-block-query-pagination .page-numbers {
    position: relative;
    min-width: 2.55rem;
    min-height: 2.55rem;
    padding: 0.7rem;
    color: #607184 !important;
    border-radius: 9px;
    background: transparent !important;
}

body.oo-pagination-template-track .wp-block-query-pagination a:hover {
    color: #075b88 !important;
    background: #f2f9fc !important;
}

body.oo-pagination-template-track .wp-block-query-pagination .page-numbers.current,
body.oo-pagination-template-track .wp-block-query-pagination [aria-current="page"] {
    color: #07111f !important;
    background: #fff4d5 !important;
}

body.oo-pagination-template-track .wp-block-query-pagination .page-numbers.current::after,
body.oo-pagination-template-track .wp-block-query-pagination [aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.18rem;
    height: 3px;
    border-radius: 999px;
    background: #ffb000;
}

body.oo-pagination-template-track .wp-block-query-pagination .page-numbers.dots {
    color: #9aa6b3 !important;
    background: transparent !important;
}

@media (max-width: 640px) {
    .wp-block-query-pagination {
        width: 100%;
        gap: 0.34rem !important;
        margin-top: 2.35rem !important;
        font-size: 0.88rem;
    }

    .wp-block-query-pagination .wp-block-query-pagination-numbers {
        gap: 0.24rem !important;
    }

    .wp-block-query-pagination :where(
        .wp-block-query-pagination-previous,
        .wp-block-query-pagination-next,
        .page-numbers
    ) {
        min-width: 2.28rem;
        min-height: 2.28rem;
        padding: 0.58rem 0.62rem;
        border-radius: 9px;
    }

    body.oo-pagination-template-arena .wp-block-query-pagination,
    body.oo-pagination-template-orbit .wp-block-query-pagination {
        justify-content: space-between !important;
        padding: 0.38rem !important;
        border-radius: 14px;
    }

    body.oo-pagination-template-arena .wp-block-query-pagination :where(
        .wp-block-query-pagination-previous,
        .wp-block-query-pagination-next
    ),
    body.oo-pagination-template-orbit .wp-block-query-pagination :where(
        .wp-block-query-pagination-previous,
        .wp-block-query-pagination-next
    ) {
        padding-inline: 0.68rem;
    }

    body.oo-pagination-template-orbit .wp-block-query-pagination .page-numbers {
        width: 2.28rem;
        min-width: 2.28rem;
        height: 2.28rem;
        min-height: 2.28rem;
    }

    body.oo-pagination-template-track .wp-block-query-pagination {
        grid-template-columns: 1fr 1fr;
        row-gap: 0.55rem;
    }

    body.oo-pagination-template-track .wp-block-query-pagination .wp-block-query-pagination-numbers {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.oo-pagination-template-track .wp-block-query-pagination .wp-block-query-pagination-previous {
        grid-column: 1;
        grid-row: 2;
    }

    body.oo-pagination-template-track .wp-block-query-pagination .wp-block-query-pagination-next {
        grid-column: 2;
        grid-row: 2;
    }
}