/**
 * Contextual SEO — Frontend styles
 * Top Bar + SEO Footer (Inline Related is in inline-related.css)
 */

/* === Top Bar === */
.cseo-tb {
        background: var(--cseo-tb-bg, #1e293b);
        color: var(--cseo-tb-text, #fff);
        height: var(--cseo-tb-h, 40px);
        font-size: var(--cseo-tb-fs, 14px);
        font-family: var(--cseo-font);
        line-height: 1.4;
        width: 100%;
        z-index: var(--cseo-z-tb);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        transition: transform var(--cseo-dur) var(--cseo-ease);
}

.cseo-tb--top {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
}

.cseo-tb--sticky-top {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
}

.cseo-tb--bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.15);
}

/* Hidden state when user closes */
.cseo-tb.is-hidden {
        transform: translateY(-100%);
}
.cseo-tb--bottom.is-hidden {
        transform: translateY(100%);
}

.cseo-tb__container {
        max-width: var(--cseo-tb-cw, 1200px);
        margin: 0 auto;
        padding: 0 var(--cseo-space-4);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--cseo-space-4);
}

/* === v1.6.2 — Three-slot layout ===
   The container's inner grid. Three columns: left (1fr), center (auto),
   right (1fr). Empty slots are not rendered at all, so the grid auto-fills
   from the remaining slots. The --count-N modifier is a hint that lets the
   grid collapse cleanly when fewer than 3 slots are populated.
*/
.cseo-tb__slots {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--cseo-space-3);
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
}

/* 2 populated slots — distribute evenly with a 1fr 1fr grid. */
.cseo-tb__slots--count-2 {
        grid-template-columns: 1fr 1fr;
}

/* 1 populated slot — single column, fills the bar. */
.cseo-tb__slots--count-1 {
        grid-template-columns: 1fr;
}

.cseo-tb__slot {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 0;
}

.cseo-tb__slot--left {
        justify-content: flex-start;
}

.cseo-tb__slot--center {
        justify-content: center;
}

.cseo-tb__slot--right {
        justify-content: flex-end;
}

/* Logo image — bounded by the slot's logo_size setting (inline style
   provides height:Npx). Width auto to preserve aspect ratio. */
.cseo-tb__logo {
        display: block;
        max-width: 100%;
        object-fit: contain;
}

/* Font Awesome icon — inherits size + color from inline style. */
.cseo-tb__fa-icon {
        line-height: 1;
        display: inline-block;
}

.cseo-tb__msg {
        margin: 0;
        font-size: inherit;
        font-weight: 600;
        color: inherit;
        letter-spacing: 0.01em;
}
.cseo-tb__msg.is-static {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

/*
 * High-specificity overrides for the message text color.
 *
 * Themes commonly style <h2> via rules like `body h2 { color: ... }` or
 * `.entry-content h2 { color: ... }` (specificity 0,1,1 / 0,2,0), which
 * beat `.cseo-tb__msg { color: inherit }` (specificity 0,1,0) and force
 * the theme's default h2 color — often blue — to bleed into the top bar.
 *
 * To guarantee that the user-configured "text color" field actually wins,
 * we anchor the rule on the `#cseo-top-bar` ID (specificity 1,0,0) so
 * the combined selector (1,1,0) outranks virtually every theme rule.
 * The same treatment is applied to nested elements (links, spans) inside
 * the message, since themes also style `a` and `a:hover` aggressively.
 */
#cseo-top-bar .cseo-tb__msg,
#cseo-top-bar .cseo-tb__msg *,
#cseo-top-bar .cseo-tb__msg a,
#cseo-top-bar .cseo-tb__msg a:hover,
#cseo-top-bar .cseo-tb__msg a:focus,
#cseo-top-bar .cseo-tb__msg a:visited {
        color: var(--cseo-tb-text, #fff);
}
#cseo-top-bar .cseo-tb__msg a {
        text-decoration: underline;
        text-underline-offset: 2px;
}
#cseo-top-bar .cseo-tb__msg a:hover,
#cseo-top-bar .cseo-tb__msg a:focus {
        text-decoration: none;
        opacity: 0.85;
}

/* Rotating messages */
.cseo-tb__messages--rotating {
        position: relative;
        display: inline-block;
        min-height: 1.4em;
}
.cseo-tb__messages--rotating .cseo-tb__msg {
        display: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}
.cseo-tb__messages--rotating .cseo-tb__msg.is-active {
        display: inline-block;
        animation: cseo-fade-in var(--cseo-dur) var(--cseo-ease);
}

@keyframes cseo-fade-in {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
}

/* Social icons */
.cseo-tb__social {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: var(--cseo-space-1);
}

.cseo-tb__social-item {
        margin: 0;
        padding: 0;
}

.cseo-tb__social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--cseo-radius-pill);
        color: var(--cseo-tb-text, #fff);
        opacity: 0.85;
        transition: opacity var(--cseo-dur-fast) var(--cseo-ease), background-color var(--cseo-dur-fast) var(--cseo-ease);
        text-decoration: none;
}

.cseo-tb__social-link:hover,
.cseo-tb__social-link:focus {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.12);
        color: var(--cseo-tb-accent, #fbbf24);
}

.cseo-tb__social-svg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
}

.cseo-tb__social-svg svg {
        display: block;
}

/* Close button */
.cseo-tb__close {
        background: transparent;
        border: none;
        color: var(--cseo-tb-text, #fff);
        cursor: pointer;
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--cseo-radius-pill);
        opacity: 0.7;
        transition: opacity var(--cseo-dur-fast) var(--cseo-ease), background-color var(--cseo-dur-fast) var(--cseo-ease);
        padding: 0;
}
.cseo-tb__close:hover, .cseo-tb__close:focus {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.12);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
        .cseo-tb {
                font-size: calc(var(--cseo-tb-fs, 14px) - 1px);
        }
        .cseo-tb__container {
                padding: 0 var(--cseo-space-3);
                gap: var(--cseo-space-2);
        }
        .cseo-tb__msg {
                font-size: inherit !important;
        }
        .cseo-tb__social {
                gap: 0;
        }
        .cseo-tb__social-link {
                width: 24px;
                height: 24px;
        }
}

/* === SEO Footer === */
.cseo-sf {
        background: var(--cseo-sf-bg, #fff);
        color: var(--cseo-sf-text, #475569);
        padding: var(--cseo-sf-py, 32px) 0;
        font-family: var(--cseo-font);
        font-size: 14px;
        line-height: 1.7;
        border-top: 1px solid var(--cseo-border, #e2e8f0);
}

.cseo-sf__container {
        max-width: var(--cseo-sf-cw, 1200px);
        margin: 0 auto;
        padding: 0 var(--cseo-space-4);
}

.cseo-sf__block {
        margin-bottom: var(--cseo-space-6);
        position: relative;
}
.cseo-sf__block:last-child {
        margin-bottom: 0;
}
.cseo-sf__block.is-first {
        padding-top: var(--cseo-space-4);
}

.cseo-sf__block-title {
        color: var(--cseo-sf-heading, #0f172a);
        font-size: var(--cseo-fs-xl, 20px);
        font-weight: 700;
        margin: 0 0 var(--cseo-space-3);
        padding-bottom: var(--cseo-space-2);
        border-bottom: 2px solid var(--cseo-sf-accent, #fbbf24);
        display: inline-block;
}

.cseo-sf__block-content {
        color: var(--cseo-sf-text, #475569);
        max-height: var(--cseo-sf-maxh, 220px);
        overflow: hidden;
        transition: max-height var(--cseo-dur) var(--cseo-ease);
        position: relative;
}

/* Fade gradient when collapsed (Digikala-style) */
.cseo-sf__block-content.has-fade.is-collapsed::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(
                to bottom,
                transparent,
                var(--cseo-sf-bg, #fff) 90%
        );
        pointer-events: none;
}

.cseo-sf__block-content.is-expanded {
        max-height: 5000px;
}

.cseo-sf__block-content p {
        margin: 0 0 var(--cseo-space-3);
}
.cseo-sf__block-content h2,
.cseo-sf__block-content h3,
.cseo-sf__block-content h4 {
        color: var(--cseo-sf-heading, #0f172a);
        margin: var(--cseo-space-5) 0 var(--cseo-space-3);
        font-weight: 700;
        line-height: 1.3;
}
.cseo-sf__block-content h2 { font-size: 18px; }
.cseo-sf__block-content h3 { font-size: 16px; }
.cseo-sf__block-content h4 { font-size: 15px; }

.cseo-sf__block-content a {
        color: var(--cseo-sf-link, #3b82f6);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color var(--cseo-dur-fast) var(--cseo-ease);
}
.cseo-sf__block-content a:hover,
.cseo-sf__block-content a:focus {
        border-bottom-color: currentColor;
}

.cseo-sf__block-content ul,
.cseo-sf__block-content ol {
        margin: 0 0 var(--cseo-space-3);
        padding-inline-start: var(--cseo-space-5);
}

/* Toggle button */
.cseo-sf__toggle {
        background: transparent;
        border: 1px solid var(--cseo-border-strong, #cbd5e1);
        color: var(--cseo-sf-heading, #0f172a);
        font-family: inherit;
        font-size: var(--cseo-fs-sm, 12px);
        font-weight: 600;
        padding: var(--cseo-space-2) var(--cseo-space-4);
        border-radius: var(--cseo-radius-pill, 999px);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: var(--cseo-space-2);
        margin-top: var(--cseo-space-3);
        transition: all var(--cseo-dur-fast) var(--cseo-ease);
        text-decoration: none;
}
.cseo-sf__toggle:hover,
.cseo-sf__toggle:focus {
        background: var(--cseo-surface, #fff);
        border-color: var(--cseo-primary, #3b82f6);
        color: var(--cseo-primary, #3b82f6);
}
.cseo-sf__toggle[aria-expanded="true"] .cseo-sf__toggle-icon {
        transform: rotate(180deg);
}
.cseo-sf__toggle-icon {
        display: inline-flex;
        transition: transform var(--cseo-dur) var(--cseo-ease);
}

@media (max-width: 768px) {
        .cseo-sf {
                padding: calc(var(--cseo-sf-py, 32px) * 0.6) 0;
        }
        .cseo-sf__block-title {
                font-size: var(--cseo-fs-lg, 17px);
        }
}

/* ===========================================
   RTL adjustments — auto-applied when site
   language is Persian/Arabic/Hebrew (WordPress
   adds dir="rtl" to <html> automatically).
   =========================================== */
[dir="rtl"] .cseo-tb__container {
        flex-direction: row-reverse;
}

/* RTL: flip the slot grid so the "left" slot appears on the right side,
   matching the visual reading direction. The slot's own alignment also
   mirrors — what was "align to the start" is still "align to the start"
   because logical properties handle the direction flip. */
[dir="rtl"] .cseo-tb__slots {
        direction: rtl;
}

[dir="rtl"] .cseo-tb__msg.is-static {
        text-align: right;
}

[dir="rtl"] .cseo-tb__social {
        flex-direction: row-reverse;
}

/* Top Bar close button position mirrors in RTL */
[dir="rtl"] .cseo-tb__close {
        margin-inline-end: var(--cseo-space-2);
        margin-inline-start: 0;
}

/* SEO Footer: lists & block content use logical
   properties (padding-inline-start) so they auto-flip;
   we only need to ensure text alignment is right. */
[dir="rtl"] .cseo-sf__block-content {
        text-align: right;
}

[dir="rtl"] .cseo-sf__block-title {
        text-align: right;
}

/* Toggle icon points the other way in RTL */
[dir="rtl"] .cseo-sf__toggle-icon {
        transform: rotate(180deg);
}
[dir="rtl"] .cseo-sf__toggle[aria-expanded="true"] .cseo-sf__toggle-icon {
        transform: rotate(0deg);
}

/* === Auto Internal Links ===
   Auto-inserted links use the .cseo-auto-link class. By default they
   inherit the surrounding text color and use a subtle dashed underline
   so they don't visually overpower the source content but stay
   discoverable. The unified design tokens (--cseo-d-* variables) are
   applied inline via the design_to_css_vars() helper. */

.cseo-auto-link {
        color: var(--cseo-d-text, inherit);
        text-decoration: underline;
        text-decoration-style: dashed;
        text-decoration-color: var(--cseo-d-accent, currentColor);
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
        transition: color 0.15s ease, text-decoration-color 0.15s ease;
        background: var(--cseo-d-bg, transparent);
        border-radius: var(--cseo-d-radius, 0);
        padding-inline: var(--cseo-d-px, 0);
        padding-block: var(--cseo-d-py, 0);
        font-size: var(--cseo-d-fs, inherit);
}

.cseo-auto-link:hover,
.cseo-auto-link:focus {
        color: var(--cseo-d-accent, inherit);
        text-decoration-style: solid;
}

.cseo-auto-link:visited {
        color: var(--cseo-d-text, inherit);
        opacity: 0.85;
}

/* RTL: keep underline and color the same — no directional flip needed
   because the link is inline text. But ensure padding-inline flips
   automatically via CSS logical properties (already does). */
[dir="rtl"] .cseo-auto-link {
        /* No overrides needed — logical properties handle direction. */
}

/* Reduced motion — respect user preference for topbar, SEO footer, auto-link animations. */
@media (prefers-reduced-motion: reduce) {
        .cseo-tb,
        .cseo-tb *,
        .cseo-sf,
        .cseo-sf *,
        .cseo-auto-link,
        .cseo-auto-link * {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
        }
        .cseo-tb.is-hidden {
                display: none !important;
        }
}

/* ============================================================
 * Print styles — hide the Top Bar and SEO Footer when printing
 * ============================================================ */
@media print {
    .cseo-tb,
    .cseo-sf {
        display: none !important;
    }
}