/**
 * Contextual SEO — Extras stylesheet (v1.8.0+)
 * Styles for: TOC, Breadcrumbs, FAQ Schema (visible + metabox), Schema Builder metabox,
 * Open Graph metabox. Shares the unified design tokens from shared.css.
 */

/* ============================================================
   Table of Contents (.cseo-toc)
   ============================================================ */
.cseo-toc {
        background: var(--cseo-d-bg, #f8fafc);
        color: var(--cseo-d-text, #0f172a);
        border: 1px solid var(--cseo-d-border, #e2e8f0);
        border-radius: var(--cseo-d-radius, 8px);
        padding: var(--cseo-d-py, 14px) var(--cseo-d-px, 18px);
        margin: 1.5em 0;
        font-size: var(--cseo-d-fs, 14px);
        line-height: 1.6;
}

.cseo-toc--plain {
        background: transparent;
        border: 0;
        padding: 0;
}

.cseo-toc--pill {
        border-radius: 999px;
        padding: 10px 18px;
}

.cseo-toc__title {
        margin: 0 0 10px 0;
        font-size: 1.05em;
        font-weight: 600;
        color: var(--cseo-d-text, #0f172a);
}

.cseo-toc__list,
.cseo-toc__sublist {
        list-style: none;
        margin: 0;
        padding: 0;
}

.cseo-toc__list {
        counter-reset: cseo-toc-counter;
}

.cseo-toc--boxed .cseo-toc__list > .cseo-toc__item,
.cseo-toc--pill   .cseo-toc__list > .cseo-toc__item {
        position: relative;
        padding: 4px 0 4px 26px;
}

.cseo-toc--boxed .cseo-toc__list > .cseo-toc__item::before,
.cseo-toc--pill   .cseo-toc__list > .cseo-toc__item::before {
        counter-increment: cseo-toc-counter;
        content: counter(cseo-toc-counter);
        position: absolute;
        left: 0;
        top: 4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--cseo-d-accent, #3b82f6);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        line-height: 20px;
}

.cseo-toc__sublist {
        margin-left: 18px;
        padding-left: 12px;
        border-left: 2px solid var(--cseo-d-border, #e2e8f0);
}

.cseo-toc__item--h3 {
        font-size: 0.95em;
}

.cseo-toc__item--h4 {
        font-size: 0.9em;
        opacity: 0.85;
}

.cseo-toc__link {
        color: var(--cseo-d-text, #0f172a);
        text-decoration: none;
        transition: color 0.15s;
}

.cseo-toc__link:hover,
.cseo-toc__link:focus {
        color: var(--cseo-d-accent, #3b82f6);
        text-decoration: underline;
}

/* Ordered list variant */
.cseo-toc--boxed .cseo-toc__list ol,
.cseo-toc[style] .cseo-toc__list ol {
        list-style: decimal;
        padding-left: 20px;
}

/* RTL adjustments */
[dir="rtl"] .cseo-toc--boxed .cseo-toc__list > .cseo-toc__item,
[dir="rtl"] .cseo-toc--pill   .cseo-toc__list > .cseo-toc__item {
        padding: 4px 26px 4px 0;
}

[dir="rtl"] .cseo-toc--boxed .cseo-toc__list > .cseo-toc__item::before,
[dir="rtl"] .cseo-toc--pill   .cseo-toc__list > .cseo-toc__item::before {
        left: auto;
        right: 0;
}

[dir="rtl"] .cseo-toc__sublist {
        margin-left: 0;
        margin-right: 18px;
        padding-left: 0;
        padding-right: 12px;
        border-left: 0;
        border-right: 2px solid var(--cseo-d-border, #e2e8f0);
}

/* ============================================================
   Breadcrumbs (.cseo-bc)
   ============================================================ */
.cseo-bc {
        background: var(--cseo-d-bg, #f8fafc);
        color: var(--cseo-d-text, #0f172a);
        border: 1px solid var(--cseo-d-border, #e2e8f0);
        border-radius: var(--cseo-d-radius, 8px);
        padding: 10px var(--cseo-d-px, 18px);
        margin: 1em 0;
        font-size: var(--cseo-d-fs, 14px);
        line-height: 1.6;
        /* Use logical alignment so RTL pages get right-alignment automatically. */
        text-align: start;
        unicode-bidi: plaintext;
}

.cseo-bc__list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        /* v1.8.5 — Use baseline alignment so all text (links, current page,
           separators) sits on the same text baseline. Previously `align-items:center`
           caused the long current-page title to appear "lower" than the linked
           items because flex centering operates on the box, not the text baseline —
           and the current-page item has a different font-weight (600) which
           shifted its baseline relative to the regular-weight links. */
        align-items: baseline;
        margin: 0;
        padding: 0;
        gap: 6px;
        /* Inherit direction from page; flex row already reverses naturally in RTL. */
}

.cseo-bc__item {
        display: inline-flex;
        align-items: baseline;
        /* Ensure consistent line-height so wrapping doesn't shift the baseline. */
        line-height: inherit;
}

.cseo-bc__link {
        color: var(--cseo-d-text, #0f172a);
        text-decoration: none;
        transition: color 0.15s;
        /* Match the current-page font-weight so baselines line up exactly. */
        font-weight: 500;
}

.cseo-bc__link:hover,
.cseo-bc__link:focus {
        color: var(--cseo-d-accent, #3b82f6);
        text-decoration: underline;
}

.cseo-bc__current {
        color: var(--cseo-d-text, #0f172a);
        font-weight: 600;
        opacity: 0.85;
}

.cseo-bc__sep {
        color: var(--cseo-d-border, #cbd5e1);
        margin: 0 4px;
        /* v1.8.5 — Keep separator on the same baseline as the surrounding items. */
        font-size: 1em;
        line-height: inherit;
        /* Separator arrow stays readable in both directions. */
        unicode-bidi: plaintext;
        /* Use inline-flex so the separator participates in baseline alignment. */
        display: inline-flex;
        align-items: baseline;
}

/* RTL: ensure nav block aligns to the right edge of its container.
   The flex row naturally reverses when direction:rtl is inherited from <html>;
   do NOT add flex-direction:row-reverse — that would double-reverse it. */
html[dir="rtl"] .cseo-bc,
[dir="rtl"] .cseo-bc {
        direction: rtl;
        text-align: right;
}

[dir="rtl"] .cseo-bc__sep {
        /* Flip the arrow character visually so it points the right way in RTL. */
        display: inline-block;
        transform: scaleX(-1);
}

/* ============================================================
   FAQ Schema (.cseo-faq) — visible FAQ section
   ============================================================ */
.cseo-faq {
        background: var(--cseo-d-bg, #f8fafc);
        color: var(--cseo-d-text, #0f172a);
        border: 1px solid var(--cseo-d-border, #e2e8f0);
        border-radius: var(--cseo-d-radius, 8px);
        padding: var(--cseo-d-py, 14px) var(--cseo-d-px, 18px);
        margin: 1.5em 0;
        font-size: var(--cseo-d-fs, 14px);
        line-height: 1.7;
}

.cseo-faq__title {
        margin: 0 0 12px 0;
        font-size: 1.1em;
        font-weight: 600;
        color: var(--cseo-d-text, #0f172a);
}

.cseo-faq__list {
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.cseo-faq__item {
        background: #fff;
        border: 1px solid var(--cseo-d-border, #e2e8f0);
        border-radius: 6px;
        overflow: hidden;
        transition: box-shadow 0.15s;
}

.cseo-faq__item[open] {
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.cseo-faq__q {
        padding: 10px 14px;
        font-weight: 600;
        color: var(--cseo-d-text, #0f172a);
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
}

.cseo-faq__q::-webkit-details-marker {
        display: none;
}

.cseo-faq__q::after {
        content: '+';
        font-size: 1.4em;
        font-weight: 400;
        color: var(--cseo-d-accent, #3b82f6);
        transition: transform 0.2s;
}

.cseo-faq__item[open] .cseo-faq__q::after {
        content: '−';
}

.cseo-faq__a {
        padding: 0 14px 14px 14px;
        color: var(--cseo-d-text, #475569);
}

.cseo-faq__a p:first-child {
        margin-top: 0;
}

.cseo-faq__a p:last-child {
        margin-bottom: 0;
}

/* ============================================================
   FAQ Metabox (admin) — make rows visually grouped
   ============================================================ */
.cseo-faq-metabox .cseo-faq-row {
        padding: 8px 0;
}

.cseo-faq-metabox hr {
        border: 0;
        border-top: 1px dashed #dcdcde;
        margin: 12px 0;
}

.cseo-faq-metabox .cseo-remove-row {
        color: #b32d2e;
}

/* ============================================================
   OG Metabox (admin) — small refinements
   ============================================================ */
#cseo-og-metabox label strong {
        display: inline-block;
        margin-bottom: 4px;
        font-size: 12px;
}

#cseo-og-metabox .description {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        color: #666;
}

/* ============================================================
   Preset palettes — re-apply design tokens to .cseo-toc / .cseo-bc / .cseo-faq
   (so when a preset is selected, the same colors apply across all modules)
   ============================================================ */
.cseo-preset-default .cseo-toc,
.cseo-preset-default .cseo-bc,
.cseo-preset-default .cseo-faq { --cseo-d-bg: #f8fafc; --cseo-d-text: #0f172a; --cseo-d-border: #e2e8f0; --cseo-d-accent: #3b82f6; }

.cseo-preset-blue .cseo-toc,
.cseo-preset-blue .cseo-bc,
.cseo-preset-blue .cseo-faq { --cseo-d-bg: #eff6ff; --cseo-d-text: #1e3a8a; --cseo-d-border: #bfdbfe; --cseo-d-accent: #2563eb; }

.cseo-preset-yellow .cseo-toc,
.cseo-preset-yellow .cseo-bc,
.cseo-preset-yellow .cseo-faq { --cseo-d-bg: #fefce8; --cseo-d-text: #713f12; --cseo-d-border: #fde68a; --cseo-d-accent: #ca8a04; }

.cseo-preset-red .cseo-toc,
.cseo-preset-red .cseo-bc,
.cseo-preset-red .cseo-faq { --cseo-d-bg: #fef2f2; --cseo-d-text: #7f1d1d; --cseo-d-border: #fecaca; --cseo-d-accent: #dc2626; }

.cseo-preset-green .cseo-toc,
.cseo-preset-green .cseo-bc,
.cseo-preset-green .cseo-faq { --cseo-d-bg: #f0fdf4; --cseo-d-text: #14532d; --cseo-d-border: #bbf7d0; --cseo-d-accent: #16a34a; }

.cseo-preset-soft .cseo-toc,
.cseo-preset-soft .cseo-bc,
.cseo-preset-soft .cseo-faq { --cseo-d-bg: #fdf4ff; --cseo-d-text: #581c87; --cseo-d-border: #f5d0fe; --cseo-d-accent: #a21caf; }

.cseo-preset-dark .cseo-toc,
.cseo-preset-dark .cseo-bc,
.cseo-preset-dark .cseo-faq { --cseo-d-bg: #1e293b; --cseo-d-text: #f1f5f9; --cseo-d-border: #334155; --cseo-d-accent: #fbbf24; }

.cseo-preset-dark .cseo-faq__item { background: #0f172a; }

.cseo-preset-dark .cseo-faq__a { color: #cbd5e1; }

/* ============================================================
   v1.8.6-fix — Print styles
   TOC + Breadcrumbs are pure navigation — never print.
   FAQ visible section is informational but adds significant length; hide
   on print to match the policy applied to other CSEO modules.
   ============================================================ */
@media print {
        .cseo-toc,
        .cseo-bc,
        .cseo-faq {
                display: none !important;
        }
}

/* ============================================================
   v1.8.6-fix — Reduced motion: disable all transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
        .cseo-toc__link,
        .cseo-bc__link,
        .cseo-faq__item,
        .cseo-faq__q::after {
                transition: none !important;
        }
}

/* ============================================================
   v1.8.6-fix — Responsive: tighten layout on small screens
   ============================================================ */
@media (max-width: 600px) {
        .cseo-toc {
                padding: 10px 12px;
                font-size: 13px;
        }
        .cseo-toc__sublist {
                margin-left: 10px;
                padding-left: 8px;
        }
        [dir="rtl"] .cseo-toc__sublist {
                margin-left: 0;
                margin-right: 10px;
                padding-left: 0;
                padding-right: 8px;
        }
        .cseo-bc {
                padding: 8px 10px;
                font-size: 13px;
        }
        .cseo-bc__list {
                gap: 4px;
        }
        .cseo-faq {
                padding: 10px 12px;
                font-size: 13px;
        }
        .cseo-faq__q {
                padding: 8px 10px;
        }
        .cseo-faq__a {
                padding: 0 10px 10px 10px;
        }
}

/* ============================================================
   v1.8.6-fix — Defensive box-sizing reset
   ============================================================ */
.cseo-toc,
.cseo-bc,
.cseo-faq,
.cseo-toc *,
.cseo-bc *,
.cseo-faq * {
        box-sizing: border-box;
}