/* ==========================================================
   Single Posts & Pages Stylesheet — page.css
   Koora Live Free Theme — v2.0
   ========================================================== */

/* ── Global Dark Theme Overrides for Article Containers ──── */
.BlogBox,
.PostBody,
#ContantBody,
.single-post-container article {
    background-color: #121a2d !important;
    background: #121a2d !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 28px 32px 36px;
    margin-top: var(--Main-Margin, 20px);
    margin-bottom: var(--Main-Margin, 28px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    color: #cbd5e1 !important;
}

.Night .BlogBox,
.Night #ContantBody {
    background-color: #121a2d !important;
    background: #121a2d !important;
    color: #cbd5e1 !important;
}

/* ── Post Header & Title ─────────────────────────────────── */
.PostTitle {
    padding: 0 0 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
    background: transparent !important;
}

.PostTitle h1.TopicTitle,
.PostTitle h2.TopicTitle,
h1.TopicTitle {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    color: #ffffff !important;
    margin: 0 0 12px 0;
    letter-spacing: -0.2px;
    background: transparent !important;
}

/* ── Featured Image & Media ──────────────────────────────── */
.article-thumb {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 28px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    background: #0b1120 !important;
}

.article-thumb img.article-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

/* Images inside article content (#ContantBody) */
#ContantBody img,
#ContantBody figure img,
.wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 24px auto;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#ContantBody figure {
    margin: 24px 0;
    text-align: center;
    background: transparent !important;
}

#ContantBody figcaption {
    font-size: 13px;
    color: #94a3b8 !important;
    margin-top: 8px;
    text-align: center;
    font-style: italic;
    background: transparent !important;
}

/* ── Article Content Body & Typography ───────────────────── */
#ContantBody {
    font-size: 16px;
    line-height: 1.85;
    color: #cbd5e1 !important;
}

#ContantBody p,
#ContantBody span,
#ContantBody li,
#ContantBody ul,
#ContantBody ol,
#ContantBody em,
#ContantBody strong,
#ContantBody b,
#ContantBody div:not(.klf-toc-container):not(.postTags):not(.share-links) {
    background-color: transparent !important;
}

#ContantBody p {
    display: block;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 20px;
    color: #cbd5e1 !important;
    text-align: left;
    word-wrap: break-word;
}

#ContantBody br {
    display: inline;
}

#ContantBody b,
#ContantBody strong {
    font-weight: 700;
    color: #ffffff !important;
}

/* ── Article Headings ────────────────────────────────────── */
#ContantBody h1,
#ContantBody h2,
#ContantBody h3,
#ContantBody h4,
#ContantBody h5,
#ContantBody h6 {
    display: block;
    position: relative;
    border: none;
    margin: 32px 0 16px 0;
    line-height: 1.4em !important;
    color: #ffffff !important;
    overflow: visible;
}

#ContantBody h1 {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff !important;
    background: transparent !important;
    border-bottom: 2px solid var(--Main-Color, #f80);
    padding-bottom: 8px;
}

#ContantBody h2 {
    font-size: 22px;
    font-weight: 700;
    color: #ff9900 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 4px solid var(--Main-Color, #f80);
    padding: 10px 16px;
    border-radius: 8px;
}

#ContantBody h3 {
    font-size: 18px;
    font-weight: 700;
    color: #38bdf8 !important;
    background: transparent !important;
    padding-left: 12px;
    border-left: 3px solid #38bdf8;
}

#ContantBody h4 {
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0 !important;
    background: transparent !important;
}

/* ── Article Links ───────────────────────────────────────── */
#ContantBody a {
    color: #38bdf8 !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

#ContantBody a:hover {
    color: #ff9900 !important;
    text-decoration: underline;
}

/* ── Article Lists ───────────────────────────────────────── */
#ContantBody ul,
#ContantBody ol {
    margin: 16px 0 24px 24px;
    padding: 0;
    background: transparent !important;
}

#ContantBody li {
    margin-bottom: 10px;
    line-height: 1.7;
    color: #cbd5e1 !important;
    background: transparent !important;
}

#ContantBody ul li { list-style-type: disc; }
#ContantBody ol li { list-style-type: decimal; }

/* ── Section Dividers / HR ────────────────────────────────── */
#ContantBody hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
    margin: 36px 0;
}

/* ── WordPress Gutenberg Blocks Dark Overrides ───────────── */
#ContantBody .wp-block-group,
#ContantBody .wp-block-columns,
#ContantBody .wp-block-column,
#ContantBody .wp-block-cover,
#ContantBody .wp-block-media-text,
#ContantBody .wp-block-quote,
#ContantBody .wp-block-preformatted,
#ContantBody .wp-block-code,
#ContantBody .has-white-background-color,
#ContantBody .has-background,
#ContantBody blockquote,
#ContantBody section {
    background-color: #162036 !important;
    background: #162036 !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

/* ── Article Tables Dark Theme Overrides (NO WHITE BACKGROUNDS EVER) ── */
table,
.wp-block-table,
.wp-block-table table,
table#match-info,
.M-Table table,
#ContantBody table,
.BlogBox table {
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: #162036 !important;
    background: #162036 !important;
    border-radius: 10px !important;
    margin-bottom: 24px !important;
    margin-top: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    color: #cbd5e1 !important;
}

#ContantBody .wp-block-table {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow-x: auto !important;
}

/* Force dark header background on thead, th, and tr:first-child */
table thead,
table thead tr,
table thead th,
table th,
.wp-block-table th,
.wp-block-table thead th,
#ContantBody table th,
#ContantBody table thead tr,
#ContantBody table thead th {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 18px !important;
    text-align: left !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    letter-spacing: 0.2px !important;
}

/* Table body rows and cells */
table tbody,
table tbody tr,
table td,
.wp-block-table td,
.wp-block-table tbody td,
#ContantBody table td,
#ContantBody table tbody td {
    background-color: transparent !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    font-size: 14.5px !important;
    padding: 12px 18px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    line-height: 1.6 !important;
}

#ContantBody table tr:last-child td,
.wp-block-table tr:last-child td {
    border-bottom: none !important;
}

/* Row Hover and Striping */
table tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even),
#ContantBody table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

table tbody tr:hover,
.wp-block-table tbody tr:hover,
#ContantBody table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ══════════════════════════════════════════════════════════
   TABLE OF CONTENTS (TOC) — CLEAN SINGLE DARK TOC (HIGH SPECIFICITY)
══════════════════════════════════════════════════════════ */
#ContantBody .klf-toc-container,
#ContantBody #klf-toc-box,
#ContantBody .ez-toc-v2_0,
#ContantBody #ez-toc-container,
#ContantBody .ez-toc-container,
#ContantBody #toc_container,
#ContantBody .toc_container,
#ContantBody .toc,
#ContantBody .lwptoc,
#ContantBody .lwptoc_items,
#ContantBody .rank-math-toc-block,
#ContantBody #rank-math-toc,
#ContantBody .wp-block-rank-math-toc-block,
#ContantBody .wp-block-table-of-contents,
#ContantBody div[class*="toc"],
#ContantBody div[id*="toc"],
#ContantBody nav[class*="toc"],
#ContantBody nav[id*="toc"],
.klf-toc-container,
#ez-toc-container,
.ez-toc-container,
#rank-math-toc,
.rank-math-toc-block,
.wp-block-table-of-contents {
    background-color: #162036 !important;
    background: #162036 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin: 28px 0 36px 0 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
    color: #e2e8f0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Force dark transparent background on ALL nested elements inside ANY TOC box */
#ContantBody .klf-toc-container *,
#ContantBody #ez-toc-container *,
#ContantBody .ez-toc-container *,
#ContantBody #toc_container *,
#ContantBody .toc *,
#ContantBody .lwptoc *,
#ContantBody .rank-math-toc-block *,
#ContantBody .wp-block-table-of-contents *,
#ContantBody div[class*="toc"] *,
#ContantBody div[id*="toc"] *,
#ContantBody nav[class*="toc"] *,
.klf-toc-container *,
#ez-toc-container *,
.ez-toc-container *,
.rank-math-toc-block * {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* TOC Header */
.klf-toc-header,
.ez-toc-title-container,
.lwptoc_header,
.rank-math-toc-title,
#toc_container .toc_title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.klf-toc-title,
.ez-toc-title,
.lwptoc_title,
.toc_title,
.rank-math-toc-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ff9900 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.klf-toc-toggle,
.ez-toc-toggle,
.lwptoc_toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s !important;
}

.klf-toc-toggle:hover,
.ez-toc-toggle:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

/* TOC Navigation List */
#ContantBody div[class*="toc"] ul,
#ContantBody div[id*="toc"] ul,
#ContantBody nav[class*="toc"] ul,
.klf-toc-nav ul,
.ez-toc-container ul,
#ez-toc-container ul,
.lwptoc_items ul,
.wp-block-table-of-contents ul,
.toc ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#ContantBody div[class*="toc"] li,
#ContantBody div[id*="toc"] li,
#ContantBody nav[class*="toc"] li,
.klf-toc-list > li,
.ez-toc-widget-container ul > li,
#ez-toc-container ul > li,
.lwptoc_item,
.toc li {
    margin-bottom: 8px !important;
    background: transparent !important;
}

#ContantBody div[class*="toc"] a,
#ContantBody div[id*="toc"] a,
#ContantBody nav[class*="toc"] a,
.klf-toc-list a,
.ez-toc-container a,
#ez-toc-container a,
.lwptoc a,
.wp-block-table-of-contents a,
.toc a {
    display: inline-block !important;
    color: #93c5fd !important;
    text-decoration: none !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: transparent !important;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}

#ContantBody div[class*="toc"] a:hover,
#ContantBody div[id*="toc"] a:hover,
#ContantBody nav[class*="toc"] a:hover,
.klf-toc-list a:hover,
.ez-toc-container a:hover,
#ez-toc-container a:hover,
.lwptoc a:hover,
.wp-block-table-of-contents a:hover,
.toc a:hover {
    color: #ff9900 !important;
    background: rgba(255, 153, 0, 0.12) !important;
    transform: translateX(4px) !important;
}

/* Sub-lists (Nested Headings) */
.klf-toc-sublist,
.ez-toc-container ul ul,
#ez-toc-container ul ul,
.lwptoc_items ul ul,
.toc ul ul {
    margin-left: 20px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
    padding-left: 12px !important;
    background: transparent !important;
}

/* Hide 1.0.1, 1.0.2 section numbers from third-party plugins */
.ez-toc-section-number,
.lwptoc_item_number,
.toc_number {
    display: none !important;
}

/* Hide duplicate TOCs if more than one exists in the DOM */
.klf-toc-container ~ .klf-toc-container,
.klf-toc-container ~ .ez-toc-container,
.klf-toc-container ~ #ez-toc-container,
.klf-toc-container ~ .lwptoc {
    display: none !important;
}

/* ── Post Footer, Tags & Share ────────────────────────────── */
.PostFooter {
    display: flex;
    position: relative;
    flex-direction: column;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    background: transparent !important;
}

.postTags,
.share-links {
    background-color: var(--Items-BG, #162036) !important;
    position: relative;
    width: 100%;
    border-radius: 10px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.postTags {
    padding-bottom: 4px !important;
    margin-bottom: 16px;
}

.TagsList li,
.postTags span {
    float: left;
    display: block;
    margin: 0 8px 10px 0;
    padding: 0 14px;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px;
    line-height: 32px;
    font-size: 13px;
    color: #e2e8f0 !important;
}

.TagsList li a {
    display: flex;
    font-size: 13px;
    align-items: center;
    color: #e2e8f0 !important;
    text-decoration: none;
}

.TagsList li a:hover {
    color: #ff9900 !important;
}

.share-links {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(4, 1fr);
}

.share-links > * {
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    color: #ffffff !important;
    padding: 0 12px;
    height: 42px;
    border-radius: 8px;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.share-links > *:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.share-links .Tw { background: #000000 !important; }
.share-links .Wa { background: #25D366 !important; }
.share-links .Fb { background: #1877F2 !important; }
.share-links .Te { background: #0088CC !important; }

/* ── Related Posts Section ────────────────────────────────── */
.related-posts-block {
    margin-top: 36px;
    margin-bottom: 24px;
}

/* ── Responsive Adjustments ──────────────────────────────── */
@media screen and (max-width: 768px) {
    .BlogBox {
        padding: 20px 18px 24px;
        border-radius: 10px;
    }
    .PostTitle h1.TopicTitle,
    h1.TopicTitle {
        font-size: 22px;
    }
    #ContantBody h1 { font-size: 22px; }
    #ContantBody h2 { font-size: 19px; padding: 8px 12px; }
    #ContantBody h3 { font-size: 16px; }
    #ContantBody p { font-size: 15px; line-height: 1.75; }
    .klf-toc-container { padding: 16px 18px !important; }
    .share-links { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 480px) {
    .BlogBox {
        padding: 16px 14px 20px;
    }
    .PostTitle h1.TopicTitle,
    h1.TopicTitle {
        font-size: 19px;
    }
    #ContantBody p { font-size: 14.5px; }
    .klf-toc-list a { font-size: 13.5px !important; }
    .share-links { grid-template-columns: 1fr; }
}