/**
 * Circular Related — Frontend Styles
 *
 * Targets the markup the v5 renderer actually emits:
 *   .cr-circular-next    → one forward link (A→B)
 *   .cr-related-list-box → related list <section> + real heading
 *   .cr-circular-nav     → prev / current / next <nav> (shortcode only)
 *
 * Layout-stable by design: no entry animations, no transforms on first paint,
 * reserved line-height — these blocks are injected mid-article and must not
 * shift surrounding content (CLS is a Core Web Vitals signal).
 *
 * @version 5.2.0
 */

.cr-circular-next,
.cr-circular-nav,
.cr-related-list-box,
.circular-related-box {
    --cr-fe-accent: var(--primary-color, var(--color-primary, #446084));
    --cr-fe-accent-dark: var(--primary-color-dark, var(--color-primary-dark, #354d66));
    --cr-fe-surface: #f8f9fa;
    --cr-fe-border: #e3e6ea;
    --cr-fe-text: inherit;
    --cr-fe-muted: #5b6570;

    box-sizing: border-box;
    clear: both;
    margin: 1.6em 0;
    max-width: 100%;
}

.cr-circular-next *,
.cr-circular-nav *,
.cr-related-list-box * {
    box-sizing: inherit;
}

/* ==========================================================================
   1. Circular Next-Link — a single forward link inside the article body
   ========================================================================== */

.cr-circular-next {
    padding: 0.9em 1.1em;
    background: var(--cr-fe-surface);
    border-left: 4px solid var(--cr-fe-accent);
    border-radius: 0 6px 6px 0;
}

.cr-circular-next .cr-next-link {
    margin: 0;
    font-size: 0.97em;
    line-height: 1.6;
    color: var(--cr-fe-text);
}

.cr-circular-next .cr-next-anchor,
.cr-circular-next a {
    color: var(--cr-fe-accent);
    font-weight: 600;
    text-decoration: none;
    /* Underline on hover only: keeps the injected link visually distinct from
       body links without competing with the article's own anchors. */
    text-underline-offset: 2px;
}

.cr-circular-next .cr-next-anchor:hover,
.cr-circular-next .cr-next-anchor:focus-visible,
.cr-circular-next a:hover,
.cr-circular-next a:focus-visible {
    color: var(--cr-fe-accent-dark);
    text-decoration: underline;
}

/* ==========================================================================
   2. Related List — <section> + real heading + <ul>
   ========================================================================== */

.cr-related-list-box {
    padding: 1.1em 1.25em;
    background: var(--cr-fe-surface);
    border: 1px solid var(--cr-fe-border);
    border-radius: 8px;
}

.cr-related-list-box .cr-related-heading {
    margin: 0 0 0.6em;
    padding: 0;
    font-size: 1.05em;
    line-height: 1.4;
    font-weight: 700;
    color: var(--cr-fe-text);
    /* Neutralise theme heading margins/borders so h2/h3/h4 all render alike. */
    border: 0;
    text-transform: none;
    letter-spacing: normal;
}

.cr-related-list-box .cr-related-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-related-list-box .cr-related-item {
    margin: 0;
    padding: 0.4em 0;
    border-bottom: 1px solid var(--cr-fe-border);
}

.cr-related-list-box .cr-related-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cr-related-list-box .cr-related-item::before {
    content: "›";
    display: inline-block;
    width: 1em;
    margin-right: 0.15em;
    color: var(--cr-fe-accent);
    font-weight: 700;
}

.cr-related-list-box .cr-related-anchor,
.cr-related-list-box a {
    color: var(--cr-fe-text);
    text-decoration: none;
    line-height: 1.5;
}

.cr-related-list-box .cr-related-anchor:hover,
.cr-related-list-box .cr-related-anchor:focus-visible,
.cr-related-list-box a:hover,
.cr-related-list-box a:focus-visible {
    color: var(--cr-fe-accent);
    text-decoration: underline;
}

.cr-related-list-box small {
    color: var(--cr-fe-muted);
    font-size: 0.82em;
}

/* JSON-LD must never occupy layout, even if a theme unsets script{display:none}. */
.cr-related-schema {
    display: none !important;
}

/* ==========================================================================
   3. Circular Nav — prev / current / next (shortcode only)
   ========================================================================== */

.cr-circular-nav {
    padding: 0.85em 1.1em;
    background: var(--cr-fe-surface);
    border: 1px solid var(--cr-fe-border);
    border-radius: 8px;
}

.cr-circular-nav .cr-nav-title {
    margin: 0 0 0.5em;
    font-weight: 700;
}

.cr-circular-nav .cr-nav-row,
.cr-circular-nav .cr-related-neighbors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-circular-nav .cr-nav-current {
    font-weight: 600;
    color: var(--cr-fe-muted);
}

.cr-circular-nav a {
    color: var(--cr-fe-accent);
    text-decoration: none;
}

.cr-circular-nav a:hover,
.cr-circular-nav a:focus-visible {
    color: var(--cr-fe-accent-dark);
    text-decoration: underline;
}

/* ==========================================================================
   4. Injected images (H2/gallery operations)
   ========================================================================== */

.cr-h2-image {
    max-width: 100%;
    height: auto;
}

p.auto-h2-image {
    margin: 1.2em 0;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 782px) {

    .cr-circular-next,
    .cr-circular-nav,
    .cr-related-list-box {
        margin: 1.25em 0;
        padding: 0.85em 0.95em;
    }

    .cr-related-list-box .cr-related-heading {
        font-size: 1em;
    }
}

@media (max-width: 549px) {

    .cr-circular-next {
        border-left-width: 3px;
    }

    .cr-circular-next .cr-next-link {
        font-size: 0.94em;
    }
}

/* ==========================================================================
   6. Dark mode — theme class hooks + OS preference
   ========================================================================== */

.dark .cr-circular-next,
.dark .cr-circular-nav,
.dark .cr-related-list-box,
.dark-style .cr-circular-next,
.dark-style .cr-circular-nav,
.dark-style .cr-related-list-box,
[data-theme="dark"] .cr-circular-next,
[data-theme="dark"] .cr-circular-nav,
[data-theme="dark"] .cr-related-list-box {
    --cr-fe-surface: #22252a;
    --cr-fe-border: #383c43;
    --cr-fe-muted: #a3abb5;
    --cr-fe-accent: var(--primary-color, #6b9fd4);
    --cr-fe-accent-dark: #8fbbe6;
}

@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) .cr-circular-next,
    :root:not([data-theme="light"]) .cr-circular-nav,
    :root:not([data-theme="light"]) .cr-related-list-box {
        --cr-fe-surface: #22252a;
        --cr-fe-border: #383c43;
        --cr-fe-muted: #a3abb5;
        --cr-fe-accent: var(--primary-color, #6b9fd4);
        --cr-fe-accent-dark: #8fbbe6;
    }
}

/* ==========================================================================
   7. Print — internal navigation is noise on paper
   ========================================================================== */

@media print {

    .cr-circular-next,
    .cr-circular-nav,
    .cr-related-list-box {
        background: none !important;
        border: 0 !important;
        border-left: 2px solid #333 !important;
        page-break-inside: avoid;
    }

    .cr-circular-nav {
        display: none !important;
    }
}

/* ==========================================================================
   8. Legacy v2/v3 markup — kept so old cached HTML does not render unstyled
   ========================================================================== */

.circular-related-post,
.circular-related-product {
    margin: 1.5em 0;
    padding: 1em 1.2em;
    background: #f8f9fa;
    border-left: 4px solid var(--primary-color, #446084);
    border-radius: 0 8px 8px 0;
}

.circular-related-post p,
.circular-related-product p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

.circular-related-post a,
.circular-related-product a {
    color: var(--primary-color, #446084);
    font-weight: 600;
    text-decoration: none;
}

.circular-related-post a:hover,
.circular-related-product a:hover {
    text-decoration: underline;
}

.circular-product-gallery {
    margin: 2em 0;
    clear: both;
}

.circular-product-gallery .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}